/* U8: page-local catalog/read surfaces. No global chrome, palette or editor rules. */
.catalog-page {
  --cat-paper: hsl(var(--background, 42 38% 94%));
  --cat-card: hsl(var(--card, 42 50% 98%));
  --cat-well: hsl(var(--muted, 38 22% 90%));
  --cat-ink: hsl(var(--foreground, 36 14% 17%));
  --cat-note: hsl(var(--muted-foreground, 34 11% 36%));
  --cat-edge: hsl(var(--border, 36 20% 78%));
  --cat-accent: hsl(var(--primary, 35 49% 32%));
  --cat-action-ink: hsl(var(--primary-foreground, 40 40% 98%));
  min-width: 0; color: var(--cat-ink); background: var(--cat-paper); overflow-wrap: anywhere;
}
.catalog-page.catalog-spa { padding: 92px 24px 48px; min-height: 65vh; }
.catalog-page .catalog-container { max-width: 1160px; min-width: 0; margin-inline: auto; }
.catalog-page .catalog-compare-article { max-width: 1000px; }
.catalog-page :is(h1,h2,h3,h4) { color: var(--cat-ink); overflow-wrap: anywhere; }
.catalog-page h1 { margin: 0; font-size: clamp(26px, 3.5vw, 42px); line-height: 1.4; letter-spacing: -.025em; font-weight: 650; }
.catalog-page h2 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.5; font-weight: 600; margin: 0 0 18px; scroll-margin-top: 88px; }
.catalog-page h3 { font-size: 17px; line-height: 1.65; font-weight: 600; margin: 0 0 8px; }
.catalog-page p { line-height: 1.9; margin: 0; }
.catalog-page .catalog-heading { min-width: 0; margin-bottom: 28px; }
.catalog-page .catalog-eyebrow { font-size: 12px; color: var(--cat-note); line-height: 1.7; margin: 0 0 12px; }
.catalog-page .catalog-lead { font-size: 16px; line-height: 1.95; color: var(--cat-note); margin-top: 18px; max-width: 850px; }
.catalog-page .catalog-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; line-height: 1.7; color: var(--cat-note); margin-bottom: 28px; }
.catalog-page .catalog-breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 4px; color: inherit; }
.catalog-page .catalog-breadcrumb [aria-current] { align-self: center; }
.catalog-page .catalog-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 8px; border-radius: 10px; background: var(--cat-well); margin: 0 0 36px; }
.catalog-page .catalog-metrics > div { min-width: 0; padding: 16px 20px; border-inline-start: 1px solid var(--cat-edge); }
.catalog-page .catalog-metrics > div:first-child { border-inline-start: 0; }
.catalog-page .catalog-metrics dt { font-size: 12px; color: var(--cat-note); }
.catalog-page .catalog-metrics dd { margin: 8px 0 0; font-size: 23px; font-weight: 600; line-height: 1.5; }
.catalog-page .catalog-metrics p { font-size: 13px; color: var(--cat-note); margin-top: 8px; font-weight: 400; }
.catalog-page .catalog-section { border-top: 1px solid var(--cat-edge); padding-block: 30px; min-width: 0; }
.catalog-page .catalog-section-description { color: var(--cat-note); margin: -4px 0 20px; font-size: 14px; }
.catalog-page .catalog-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.catalog-page .catalog-feature-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; border: 1px solid var(--cat-edge); border-radius: 10px; padding: 20px; background: var(--cat-card); color: inherit; text-decoration: none; }
.catalog-page .catalog-feature-card-heading { display: flex; align-items: start; gap: 12px; }
.catalog-page .catalog-feature-card-heading svg { flex: 0 0 22px; margin-top: 3px; color: var(--cat-accent); }
.catalog-page .catalog-feature-card-heading h3 { margin: 0; }
.catalog-page .catalog-feature-card p { font-size: 13px; color: var(--cat-note); }
.catalog-page .catalog-card-subtitle { color: var(--cat-ink); font-weight: 500; }
.catalog-page .catalog-image { min-width: 0; border-radius: 9px; background: var(--cat-well); border: 1px solid var(--cat-edge); overflow: hidden; }
.catalog-page .catalog-image img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.catalog-page .catalog-feature-card .catalog-image { margin-top: auto; }
.catalog-page .catalog-feature-card .catalog-image img { aspect-ratio: 16 / 10; }
.catalog-page .catalog-card-action { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cat-ink); line-height: 1.7; }
.catalog-page .catalog-resource-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 16px; }
.catalog-page .catalog-resource { display: block; min-width: 0; border: 1px solid var(--cat-edge); border-radius: 9px; padding: 20px; background: var(--cat-card); text-decoration: none; color: var(--cat-ink); }
.catalog-page .catalog-resource h3 { display: flex; align-items: start; gap: 8px; }
.catalog-page .catalog-resource h3 svg { flex-shrink: 0; margin-top: 5px; }
.catalog-page .catalog-resource p { color: var(--cat-note); font-size: 14px; }
.catalog-page .catalog-resource .catalog-card-action { margin-top: 14px; }
.catalog-page :is(.catalog-resource,.catalog-feature-card):hover { border-color: var(--cat-accent); }
.catalog-page .catalog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.catalog-page :is(.catalog-primary,.catalog-secondary) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; height: auto; max-width: 100%; padding: 10px 18px; border: 1px solid var(--cat-edge); border-radius: 8px; font-size: 14px; font-weight: 550; line-height: 1.7; white-space: normal; text-decoration: none; color: var(--cat-ink); background: var(--cat-card); }
.catalog-page .catalog-primary { color: var(--cat-action-ink); background: var(--cat-accent); border-color: var(--cat-accent); }
.catalog-page .catalog-feature-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: center; margin-bottom: 30px; }
.catalog-page .catalog-feature-hero > figure { min-width: 0; margin: 0; }
.catalog-page .catalog-feature-body-illustrated { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 30px; align-items: start; }
.catalog-page .catalog-feature-body { min-width: 0; }
.catalog-page .catalog-feature-body[data-image-position="left"] > .catalog-image { order: -1; }
.catalog-page .catalog-prose { min-width: 0; font-size: 15px; }
.catalog-page .catalog-prose :is(p,li,td,blockquote) { color: var(--cat-ink); line-height: 1.95; }
.catalog-page .catalog-prose :is(strong,a) { color: var(--cat-ink); }
.catalog-page .catalog-prose :is(code,thead) { background: var(--cat-well); color: var(--cat-ink); border-color: var(--cat-edge); }
.catalog-page .catalog-prose :is(table,th,td,blockquote,[data-reading-table]) { border-color: var(--cat-edge); }
.catalog-page .catalog-prose [data-reading-table] { max-width: 100%; overflow-x: auto !important; }
.catalog-page .catalog-prose [role="region"] { outline-offset: 3px; }
.catalog-page .catalog-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.catalog-page .catalog-section-nav a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--cat-edge); border-radius: 7px; background: var(--cat-well); color: var(--cat-ink); font-size: 13px; line-height: 1.6; text-decoration: none; }
.catalog-page .catalog-section-nav a span { color: var(--cat-note); }
.catalog-page .catalog-feature-cta p { color: var(--cat-note); }
.catalog-page .catalog-faq details { padding: 0; border: 0; border-top: 1px solid var(--cat-edge); border-radius: 0; background: transparent; margin: 0; }
.catalog-page .catalog-faq summary { cursor: pointer; padding: 14px 8px; min-height: 48px; line-height: 1.75; color: var(--cat-ink); font-size: 15px; font-weight: 600; }
.catalog-page .catalog-faq details p { padding: 0 8px 20px; font-size: 14px; color: var(--cat-note); line-height: 1.95; }
.catalog-page .catalog-compare-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.catalog-page .catalog-card-meta { display: block; font-size: 12px; color: var(--cat-note); line-height: 1.8; margin-top: 16px; }
.catalog-page .catalog-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.catalog-page .catalog-choice-grid > div { background: var(--cat-card); border: 1px solid var(--cat-edge); padding: 18px; border-radius: 9px; min-width: 0; }
.catalog-page .catalog-choice-grid p { font-size: 14px; color: var(--cat-note); }
.catalog-page blockquote { margin: 12px 0 0; padding: 16px 20px; border-inline-start: 3px solid var(--cat-accent); border-radius: 0 8px 8px 0; background: var(--cat-well); color: var(--cat-ink); line-height: 1.95; }
.catalog-page .catalog-points { margin: 14px 0 0; padding-left: 24px; list-style: disc; }
.catalog-page ol.catalog-points { list-style: decimal; }
.catalog-page .catalog-points li { line-height: 1.95; margin: 10px 0; }
.catalog-page .catalog-points a { color: var(--cat-ink); text-decoration: underline; text-underline-offset: 3px; }
.catalog-page .catalog-points small { display: block; font-size: 12px; color: var(--cat-note); }
.catalog-page .catalog-table-hint { font-size: 12px; color: var(--cat-note); margin-bottom: 12px; }
.catalog-page :is(.catalog-table,[data-catalog-table]) { width: 100%; max-width: 100%; overflow-x: auto !important; border: 1px solid var(--cat-edge); border-radius: 8px; background: var(--cat-card); }
.catalog-page [data-catalog-table] table { min-width: 720px; width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.catalog-page [data-catalog-table] :is(td,th) { padding: 14px 16px; text-align: left; vertical-align: top; line-height: 1.9; border-bottom: 1px solid var(--cat-edge); color: var(--cat-ink); overflow-wrap: anywhere; }
.catalog-page [data-catalog-table] thead th { background: var(--cat-well); font-size: 13px; font-weight: 600; }
.catalog-page [data-catalog-table] tbody th { width: 20%; font-weight: 600; }
.catalog-page .catalog-contents { margin-block: 20px; border-block: 1px solid var(--cat-edge); padding: 0; background: transparent; }
.catalog-page .catalog-contents summary { cursor: pointer; min-height: 48px; padding: 14px 4px; font-size: 14px; font-weight: 600; }
.catalog-page .catalog-contents nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding-bottom: 16px; }
.catalog-page .catalog-contents nav a { padding: 10px 8px; color: var(--cat-ink); line-height: 1.7; font-size: 13px; }
.catalog-page .catalog-missing { padding-block: 60px; max-width: 700px; }
.catalog-page .catalog-missing p { color: var(--cat-note); margin-top: 12px; }
.catalog-page .catalog-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.catalog-page :is(a,button,summary,[tabindex="0"]):focus-visible { outline: 2px solid var(--cat-accent); outline-offset: 4px; }
/* Existing static shells keep their extra editorial content, navigation and SEO.
   Consume their own token scheme rather than overwrite the shared static palette. */
.catalog-page.catalog-static-comparison { --cat-paper: var(--paper); --cat-card: var(--paper-2); --cat-well: var(--paper-3); --cat-ink: var(--ink); --cat-note: var(--ink-2); --cat-edge: var(--rule, #d4ccb9); --cat-accent: var(--accent); }
/* Original 320px track is wider than the content area of a padded 320px screen. */
.catalog-static-comparison .feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.catalog-static-comparison :is(.feature-grid,.card-grid,.meta-grid,.step-grid) > * { min-width: 0; overflow-wrap: anywhere; }
.catalog-static-comparison :is(.cta-primary,.cta-ghost,summary) { min-height: 44px; height: auto; white-space: normal; }
.catalog-static-comparison .table-wrap { border-color: var(--cat-edge); }
.catalog-page.catalog-static-features { padding-top: 64px; }
.catalog-static-features :is(.text-black,.dark\:text-white,.text-ink-gradient) { color: var(--cat-ink); -webkit-text-fill-color: currentColor; background-image: none; }
.catalog-static-features [class*="text-gray-"] { color: var(--cat-note); }
.catalog-static-features [class*="border-black"] { border-color: var(--cat-edge); }
.catalog-static-features [class*="bg-white"] { background-color: var(--cat-card); }
.catalog-static-features [class*="line-clamp-"] { display: block; -webkit-line-clamp: unset; overflow: visible; }
.catalog-static-features .catalog-static-card { min-width: 0; }
.catalog-static-features .catalog-static-card img { object-fit: contain; background: var(--cat-well); }
.catalog-static-features .catalog-primary { color: var(--cat-action-ink); background: var(--cat-accent); border-color: var(--cat-accent); -webkit-text-fill-color: currentColor; }
.catalog-static-features .catalog-secondary { color: var(--cat-ink); background: var(--cat-card); }
.catalog-static-features img { max-width: 100%; }
.catalog-static-features .catalog-faq summary { font-size: 16px; }
@media (max-width: 1000px) {
  .catalog-page .catalog-feature-grid, .catalog-page .catalog-compare-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-page .catalog-feature-hero, .catalog-page .catalog-feature-body-illustrated { grid-template-columns: minmax(0,1fr); }
  .catalog-page .catalog-feature-body[data-image-position="left"] > .catalog-image { order: 0; }
  .catalog-page .catalog-feature-hero > .catalog-image { max-width: 750px; }
}
@media (max-width: 600px) {
  .catalog-page.catalog-spa { padding: 84px 16px 32px; }
  .catalog-page h1 { font-size: 27px; line-height: 1.5; }
  .catalog-page h2 { font-size: 22px; }
  .catalog-page .catalog-lead { font-size: 15px; }
  .catalog-page .catalog-feature-grid, .catalog-page .catalog-compare-grid, .catalog-page .catalog-choice-grid { grid-template-columns: minmax(0,1fr); }
  .catalog-page .catalog-metrics { grid-template-columns: minmax(0,1fr); }
  .catalog-page .catalog-metrics > div { border-inline-start: 0; border-top: 1px solid var(--cat-edge); }
  .catalog-page .catalog-metrics > div:first-child { border-top: 0; }
  .catalog-page .catalog-actions > a { flex: 1 1 180px; }
  .catalog-page .catalog-contents nav { grid-template-columns: minmax(0,1fr); }
  .catalog-static-features :is(section > div,section article,aside,.catalog-static-card) { min-width: 0; }
  .catalog-static-features > section { padding: 24px 16px; }
}
@media (max-width: 767px), (pointer: coarse) {
  .catalog-page :is(.catalog-section-nav a,.catalog-breadcrumb a,.catalog-contents a,summary) { min-height: 44px; }
  .catalog-static-features aside a { display: block; padding-block: 10px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .catalog-page *, .catalog-page *::before, .catalog-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .catalog-page :is(.catalog-primary,.catalog-secondary,.catalog-resource,.catalog-feature-card) { border: 1px solid ButtonText; }
  .catalog-page :is(a,button,summary,[tabindex="0"]):focus-visible { outline-color: Highlight; }
}
@media print {
  .catalog-page, .catalog-page.catalog-static-comparison { --cat-paper: white; --cat-card: white; --cat-well: white; --cat-ink: black; --cat-note: black; --cat-edge: #777; background: white; color: black; }
  .catalog-page.catalog-spa { padding: 0; }
  .catalog-page :is(.catalog-breadcrumb,.catalog-section-nav,.catalog-contents,.catalog-actions,.catalog-table-hint,.cta-row) { display: none; }
  .catalog-page :is(.catalog-container,.catalog-table,[data-catalog-table]) { width: 100%; max-width: none; overflow: visible !important; }
  .catalog-page [data-catalog-table] table { min-width: 0; font-size: 10pt; }
  .catalog-page [data-catalog-table] :is(th,td) { padding: 5pt; color: black; }
  .catalog-page .catalog-feature-grid, .catalog-page .catalog-compare-grid { grid-template-columns: 1fr; }
  .catalog-page h2, .catalog-page h3 { break-after: avoid; }
  .catalog-page [data-catalog-table] tr { break-inside: avoid; }
}