/* Reference Index v3
   A task-led, evidence-first system derived from the tuned site icon. */

:root {
  color-scheme: light;

  --page: #f7f8f7;
  --surface: #ffffff;
  --subtle: #e8ece9;
  --ink: #101713;
  --strong: #183226;
  --muted: #53635a;
  --rule: #c7cfca;
  --rule-strong: #81968b;
  --leaf: #2f7550;
  --mint: #9dedac;

  /* Compatibility aliases for the existing components. */
  --bg: var(--page);
  --bg-soft: #eef1ef;
  --panel: var(--surface);
  --panel-solid: var(--surface);
  --panel-hover: var(--subtle);
  --border: var(--rule);
  --border-strong: var(--rule-strong);
  --text: var(--ink);
  --text-dim: var(--muted);
  --text-faint: #64736b;
  --brand-1: var(--leaf);
  --brand-2: var(--leaf);
  --brand-3: #245c3f;
  --brand-amber: #865d00;
  --good: var(--leaf);
  --warn: #865d00;
  --bad: #a33a3a;
  --grad-brand: var(--strong);
  --grad-text: var(--strong);
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --shadow-soft: none;
  --shadow-glow: none;

  --fg: var(--ink);
  --fg-muted: var(--muted);
  --accent: var(--leaf);
  --accent-hover: #245c3f;
  --accent-pill: var(--strong);
  --accent-pill-hover: #0f251a;
  --bg-base: var(--page);
  --bg-elevated: var(--surface);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

*, *::before, *::after {
  box-shadow: none !important;
}

html {
  background: var(--page);
  scroll-padding-top: 88px;
}

html,
body {
  background: var(--page);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  line-height: 1.58;
}

body {
  min-width: 0;
}

body * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

::selection {
  background: var(--mint);
  color: var(--strong);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--strong);
  outline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--leaf);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--strong);
}

.bg-grid,
.bg-glow {
  display: none !important;
}

/* Masthead */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  min-height: 70px;
  padding: 10px clamp(16px, 2vw, 28px);
  border-bottom: 2px solid var(--strong);
  background: var(--surface);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  color: var(--strong);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.brand-copy,
.brand-name {
  display: block;
}

.brand-copy small {
  display: block;
  margin-top: -3px;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}

.brand .accent {
  color: var(--leaf);
}

.header-nav-desktop {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  gap: clamp(12px, 1.25vw, 20px);
}

.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-nav a:hover {
  color: var(--strong);
}

.header-nav a[aria-current="page"] {
  color: var(--strong);
  text-decoration: underline;
  text-decoration-color: var(--leaf);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.header-reference {
  position: relative;
  flex: 0 0 auto;
}

.header-reference summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.header-reference summary::-webkit-details-marker {
  display: none;
}

.header-reference summary:hover,
.header-reference[open] summary,
.header-reference.is-current summary {
  color: var(--strong);
}

.header-reference.is-current summary {
  text-decoration: underline;
  text-decoration-color: var(--leaf);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.header-reference summary svg {
  transition: transform .15s ease;
}

.header-reference[open] summary svg {
  transform: rotate(180deg);
}

.header-reference-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 70;
  width: 214px;
  padding: 4px 12px;
  border: 1px solid var(--strong);
  background: var(--surface);
}

.header-reference-menu a {
  display: flex;
  min-height: 44px;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.header-reference-menu a:last-child {
  border-bottom: 0;
}

.header-reference-menu a[aria-current="page"] {
  text-underline-offset: 5px;
}

.header-pickers {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  margin-left: 0;
}

.region-chip,
.nav-toggle {
  min-height: 36px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  color: var(--muted);
}

.region-chip {
  justify-content: center;
  width: 92px;
  height: 36px;
  min-height: 36px;
  padding: 0 9px;
  box-sizing: border-box;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.035em;
}

.region-chip > .region-flag,
.region-menu .region-flag {
  display: none;
}

.region-chip:hover,
.nav-toggle:hover {
  border-color: var(--strong);
  color: var(--strong);
}

.region-chip .region-text,
.lang-chip .lang-text {
  color: var(--strong);
}

.region-menu {
  padding: 4px;
  border: 1px solid var(--strong);
  border-radius: 2px;
  background: var(--surface);
}

.region-menu li {
  border-radius: 0;
  color: var(--muted);
}

.region-menu li:hover,
.lang-menu li.active {
  background: var(--subtle);
  color: var(--strong);
}

.nav-toggle {
  padding: 6px;
}

/* Page rhythm and type */
main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3.4vw, 44px) 72px;
}

section {
  padding: 58px 0;
}

h1,
h2,
h3,
h4 {
  color: var(--strong);
  text-wrap: balance;
}

.section-head {
  max-width: 760px;
  margin: 0 0 24px;
  text-align: left;
}

.section-head h2 {
  margin: 0 0 8px;
  color: var(--strong);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.section-head p {
  color: var(--muted);
  line-height: 1.58;
}

.grad-text,
.article h1,
.memory-readout span {
  background: none !important;
  color: var(--strong) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Remove the old AI-startup gradient and motion vocabulary. */
:where(
  .btn-cta,
  .btn-primary,
  .tab.active,
  .usecase-card.selected,
  .pick-card::after,
  .pick-card .ribbon,
  .model-card.selected,
  .quant-btn.active,
  .sel-card.sota,
  .feedback-submit
) {
  background-image: none !important;
}

:where(
  .btn-cta,
  .btn-cta-secondary,
  .btn-primary,
  .buy-btn,
  .hf-btn,
  .vh-cta-builds,
  .cmp-back-cta,
  .share-results-btn,
  .cmp-share-btn,
  .floating-cta,
  .floating-compare-cta
):hover {
  transform: none !important;
}

/* Hero */
.hero {
  max-width: 980px;
  padding: clamp(54px, 7vw, 86px) 0 54px;
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
}

.hero-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--leaf);
}

.hero h1 {
  max-width: 880px;
  margin: 0 0 22px;
  color: var(--strong);
  font-size: clamp(46px, 6.3vw, 76px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero-sub {
  max-width: 68ch;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.62;
}

.hero-cta-row {
  justify-content: flex-start;
}

.btn-cta,
.btn-primary {
  min-height: 44px;
  border: 1px solid var(--strong);
  border-radius: 0;
  background: var(--strong);
  color: #ffffff;
  font-weight: 700;
}

.btn-cta {
  padding: 11px 16px;
  font-size: 14px;
}

.btn-cta:hover,
.btn-primary:hover {
  border-color: var(--leaf);
  background: var(--leaf);
  color: #ffffff;
}

.picker-footer .btn-primary:disabled {
  border: 1px solid var(--rule-strong);
  background: var(--subtle);
  color: var(--strong);
  opacity: 1;
}

.vh-cta-builds {
  border: 1px solid var(--strong);
  border-radius: 0;
  background: var(--strong);
  color: #ffffff;
}

.vh-cta-builds:hover {
  border-color: var(--leaf);
  background: var(--leaf);
  color: #ffffff;
}

.btn-cta-secondary {
  min-height: 44px;
  border: 1px solid var(--strong);
  border-radius: 0;
  background: transparent;
  color: var(--strong);
}

.hero-stats {
  justify-content: flex-start;
  gap: 0;
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.hero-stats > div {
  min-width: 142px;
  padding: 0 24px 0 0;
  border-right: 1px solid var(--rule);
  align-items: flex-start;
}

.hero-stats > div + div {
  padding-left: 24px;
}

.hero-stats > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.hero-stats strong {
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: var(--strong);
  -webkit-text-fill-color: currentColor !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-stats span {
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Picker and result surfaces */
.picker-section {
  margin-top: 54px;
  padding: 30px;
  border: 1px solid var(--rule-strong);
  border-top: 4px solid var(--strong);
  background: var(--surface);
  scroll-margin-top: 88px;
}

.picker-tabs {
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
}

.tab {
  min-height: 76px;
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  color: var(--muted);
}

.tab:last-child {
  border-right: 0;
}

.tab:hover {
  background: var(--subtle);
  color: var(--strong);
}

.tab.active {
  background: var(--subtle);
  color: var(--strong);
  box-shadow: inset 0 4px 0 var(--leaf) !important;
}

.tab .tab-icon {
  width: 18px;
  height: 18px;
  color: var(--leaf);
  font-size: 18px;
}

.tab .tab-icon svg,
.reference-line-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.modality-tab .ml-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.tab span:nth-of-type(2) {
  font-size: 14px;
}

.tab em {
  font-size: 11px;
}

.tab-panel {
  animation: none;
}

.usecase-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

.usecase-card {
  width: 100%;
  min-height: 144px;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.usecase-card:nth-child(2n) {
  border-right: 0;
}

.usecase-card::before {
  display: none;
}

.usecase-card:hover {
  border-color: var(--rule);
  background: var(--subtle);
  transform: none;
}

.usecase-card.selected {
  border-color: var(--rule);
  background: var(--subtle);
  box-shadow: inset 4px 0 0 var(--leaf) !important;
}

.usecase-card .icon {
  margin-bottom: 8px;
  width: 24px;
  height: 24px;
  color: var(--leaf);
  font-size: 22px;
}

.memory-control,
.vh-zone,
.quant-toggle {
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
}

.memory-control {
  padding: 32px;
}

.memory-readout span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(56px, 8vw, 82px);
  font-weight: 600;
}

#memSlider,
#budgetSlider {
  height: 4px;
  border-radius: 0;
  background: var(--rule-strong);
}

#memSlider::-webkit-slider-thumb,
#budgetSlider::-webkit-slider-thumb,
#memSlider::-moz-range-thumb,
#budgetSlider::-moz-range-thumb {
  border: 3px solid var(--surface);
  background: var(--strong);
}

.memory-presets button,
.vh-chip,
.cf-pill,
.quant-btn,
.modality-tab,
.category-filter button {
  border-radius: 2px;
  background: var(--surface);
  color: var(--muted);
}

:where(.memory-presets button, .vh-chip, .cf-pill, .quant-btn, .modality-tab):hover {
  border-color: var(--strong);
  background: var(--subtle);
  color: var(--strong);
}

:where(.vh-chip.active, .cf-pill.active, .quant-btn.active, .modality-tab.active) {
  border-color: var(--strong);
  background: var(--strong);
  color: #ffffff;
}

.quant-toggle {
  gap: 0;
  padding: 0;
}

.quant-label,
.cf-label,
.vh-label {
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.picker-footer {
  justify-content: flex-start;
}

.picker-footer .btn-primary {
  border-radius: 0;
}

.picks-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 3px solid var(--strong);
}

.pick-card {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}

.pick-card:hover {
  border-color: var(--rule-strong);
  transform: none;
}

.pick-card::after {
  display: none;
}

.pick-card .ribbon {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 0 0 11px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--leaf);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .055em;
  text-align: left;
  white-space: normal;
  transform: none;
  box-shadow: none !important;
}

.pick-card .ribbon::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.buy-btn,
.hf-btn,
.share-results-btn,
.cmp-share-btn,
.cmp-back-cta,
.back-to-picker,
.compare-top-back {
  border: 1px solid var(--strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--strong);
}

.buy-btn:hover,
.hf-btn:hover,
.share-results-btn:hover,
.cmp-share-btn:hover,
.cmp-back-cta:hover,
.back-to-picker:hover,
.compare-top-back:hover {
  border-color: var(--leaf);
  background: var(--subtle);
  color: var(--strong);
}

/* Tables and comparison */
.table-wrap,
.compare-shell {
  border-top: 3px solid var(--strong);
  background: var(--surface);
}

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  border-color: var(--rule) !important;
}

th {
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

table thead th {
  border-bottom: 1px solid var(--rule-strong) !important;
  background: var(--subtle) !important;
  color: var(--strong) !important;
}

td {
  color: var(--ink);
}

.compare-section {
  padding: 42px 0 58px;
}

.compare-h1,
.sel-h1 {
  margin: 0 0 14px;
  color: var(--strong);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.compare-lede,
.sel-lede {
  max-width: 72ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.cmp-tab-bar {
  border-bottom: 1px solid var(--rule-strong);
}

.cmp-tab-btn {
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.cmp-tab-btn.active {
  border-color: var(--strong);
  background: var(--strong);
  color: #ffffff;
}

.cmp-toolbar {
  justify-content: flex-start;
  gap: 7px;
}

.cmp-diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--strong);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cmp-diff-toggle.active {
  border-color: var(--strong);
  background: var(--strong);
  color: #ffffff;
}

.cmp-diff-mark,
.cmp-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.cmp-diff-mark,
.cmp-diff-mark svg {
  width: 16px;
  height: 16px;
}

.cmp-diff-check {
  opacity: 0;
}

.cmp-diff-toggle.active .cmp-diff-check {
  opacity: 1;
}

.cmp-mark,
.cmp-mark svg {
  width: 14px;
  height: 14px;
}

.cmp-row[hidden] {
  display: none !important;
}

.compare-picker-bar {
  gap: 0;
  border: 1px solid var(--rule-strong);
}

.compare-picker-bar .slot,
.sel-slot {
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
}

.compare-picker-bar .slot:last-child {
  border-right: 0;
}

.slot-plus {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.sel-slot.empty .slot-plus {
  width: 32px;
  height: 32px;
  color: var(--leaf);
}

.compare-picker-bar .slot.empty {
  border-style: none;
}

.compare-search-panel,
.sel-search-panel {
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
}

#compareSearch,
#cmpLlmSearch,
#selSearch,
#modelSearch {
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
}

.compare-empty {
  padding: 28px;
  border: 1px solid var(--rule-strong);
  border-left: 5px solid var(--leaf);
  border-radius: 0;
  background: var(--subtle);
  color: var(--muted);
  text-align: left;
}

.cmp-table {
  gap: 28px;
}

.cmp-group {
  padding: 0;
  border: 0;
  border-top: 3px solid var(--strong);
  border-radius: 0;
  background: transparent;
}

.cmp-group-title {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--strong);
}

.cmp-row {
  border-top-color: var(--rule);
}

.cmp-header-cell {
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
}

.model-pill,
.stack-label,
.fit-score,
.vllm-badge,
.cell-build-label,
.ch-price .ch-tax {
  border-radius: 2px;
  background: var(--subtle);
  color: var(--strong);
}

.rating-dot.on {
  background: var(--leaf);
}

.cmp-sticky-strip {
  top: 70px;
  border: 1px solid var(--strong);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.97);
}

.cmp-video-card,
.cmp-buy-card,
.cmp-videos {
  border-radius: 0;
  background: transparent;
}

/* Closed-model references use neutral editorial contrast, not an amber or
   near-black theme. The separator and REF label carry the distinction. */
.sel-ref-strip {
  margin-bottom: 26px;
  padding: 18px 0 0;
  border: 0;
  border-top: 4px solid var(--strong);
  border-radius: 0;
  background: transparent;
}

.sel-ref-head h3,
.sel-ref-toggle {
  color: var(--strong);
}

.sel-ref-toggle {
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface);
}

.sel-ref-grid {
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

.sel-ref-card {
  padding: 15px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
}

.sel-ref-card:nth-child(4n) {
  border-right: 0;
}

.sel-ref-card :where(.cc-name, .cc-bench .bv, .cc-vibe strong) {
  color: var(--strong);
}

.cc-speed,
.cc-speed-100k {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--subtle);
  color: var(--muted);
}

.cc-speed-key,
.cc-speed-100k .cc-speed-key {
  color: var(--leaf);
}

.sel-bucket-icon {
  width: 28px;
  color: var(--leaf);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}

.sel-full-table,
.cmp-llm-wrap,
.cmp-vibe-panel {
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
}

.cmp-llm-table thead th,
.sel-ft-table thead th {
  border-bottom: 1px solid var(--rule-strong) !important;
  background: var(--subtle) !important;
  color: var(--strong) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cmp-llm-table thead th .colhead-name,
.cmp-llm-table thead th .colhead-meta {
  color: var(--strong);
}

.cmp-llm-table thead th .colhead-meta {
  opacity: .72;
}

.cmp-llm-table tbody td.cmp-row-name,
.sel-ft-table td.sel-ft-name {
  background: var(--surface);
}

.cmp-llm-table tbody tr.cmp-row-ref td:not(.cmp-row-name),
.cmp-llm-table tbody tr.cmp-row-ref td.cmp-row-name,
.sel-ft-table tr.sel-ft-ref,
.sel-ft-table tr.sel-ft-ref td.sel-ft-name {
  background: var(--subtle) !important;
}

.cmp-llm-table tbody tr.cmp-row-ref td,
.sel-ft-table tr.sel-ft-ref td {
  border-top: 1px solid var(--rule-strong);
}

.cmp-llm-table tbody tr.cmp-row-ref td.cmp-row-name strong,
.sel-ft-table tr.sel-ft-ref .sel-ft-name strong {
  color: var(--strong);
}

.cmp-ref-badge {
  padding: 1px 4px;
  border: 1px solid var(--leaf);
  border-radius: 2px;
  background: transparent;
  color: var(--leaf);
}

.cmp-vibe-ref .cmp-vibe-name {
  color: var(--strong);
}

.sel-hf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 17px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px !important;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.hf-row-link > span,
.hf-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 16px;
  padding: 1px 3px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 1000px) {
  .sel-ref-card:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 560px) {
  .sel-ref-card,
  .sel-ref-card:nth-child(2n) {
    border-right: 0;
  }
}

/* Data indexes and content cards become quiet ruled lists. */
.build-card,
.model-card,
.sel-card,
.seo-index-card,
.news-card,
.next-step {
  border-radius: 0 !important;
  background: var(--surface) !important;
}

.build-card:hover,
.model-card:hover,
.sel-card:hover,
.seo-index-card:hover,
.news-card:hover,
.next-step:hover {
  border-color: var(--rule-strong) !important;
  background: var(--subtle) !important;
  transform: none !important;
}

.all-builds,
.models-section,
.sources-section,
.seo-index-section {
  border-top-color: var(--strong);
}

.seo-index-groups,
.seo-index-group,
.seo-index-list,
.seo-index-list li,
.seo-index-list li > a,
.seo-index-meta,
.seo-index-tagline {
  min-width: 0;
  max-width: 100%;
}

.seo-index-list li {
  box-sizing: border-box;
}

.build-card-head,
.sel-card-head,
.seo-index-head {
  background: transparent !important;
}

/* Long-form reading */
.article {
  max-width: 70ch;
  padding: 54px 0 42px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.68;
}

.article h1 {
  margin-bottom: 22px;
  color: var(--strong) !important;
  font-size: clamp(40px, 6vw, 62px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.article h2 {
  margin: 46px 0 14px;
  color: var(--strong);
  font-size: 28px;
  line-height: 1.12;
}

.article .lede {
  margin-bottom: 30px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.55;
}

.article p,
.article li {
  max-width: 70ch;
  overflow-wrap: anywhere;
}

/* Markdown news posts cannot add a wrapper around authored tables. On narrow
   screens the table itself becomes the bounded scroll region so it never
   widens the article or clips the page edge. */
@media (max-width: 700px) {
  .news-post-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* Avoid a page-scroll / table-scroll trap on phones. The dense table keeps
     its horizontal pan, but its rows participate in the normal page flow. */
  .sel-ft-wrap {
    max-height: none;
  }
}

.article code,
code {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--subtle);
  color: var(--strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.article blockquote,
.solai-xref,
.answer-first {
  border-radius: 0 !important;
  background: var(--subtle) !important;
}

/* One retailer-link grammar everywhere: a compact text link plus the shared
   external-link SVG. Buying context belongs to the surrounding copy; the
   destination itself should not change from a pill to a button to a tiny
   table annotation depending on which template rendered it. */
.retailer-link,
.buy-btn,
.article a.retailer-link,
.m5max-buy a.buy-btn {
  display: inline-flex !important;
  align-items: center;
  gap: .32em;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--strong) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  transform: none !important;
  white-space: normal;
}

.retailer-link:hover,
.retailer-link:focus-visible,
.buy-btn:hover,
.buy-btn:focus-visible,
.article a.retailer-link:hover,
.m5max-buy a.buy-btn:hover {
  border: 0 !important;
  background: transparent !important;
  color: var(--leaf) !important;
  transform: none !important;
}

.retailer-link::after,
.buy-btn::after {
  flex: 0 0 auto;
  margin-left: 0 !important;
}

.retailer-inline-route {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  margin-left: .28em;
  vertical-align: baseline;
  white-space: nowrap;
}

.retailer-separator {
  color: var(--muted);
}

/* The beginner guide pairs hardware names and retailer routes in narrow data
   tables. Below tablet width, stack the destination under the product name so
   the first column is sized by useful content rather than "name + retailer". */
@media (max-width: 640px) {
  .beginner-retailer-route {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: .3rem 0 0;
  }

  .beginner-retailer-route .retailer-separator {
    display: none;
  }
}

.buy-links {
  gap: 6px 16px;
}

/* Positive price movement is the one amber status in the buying system.
   Keep the same label geometry on the editorial guide and the State page. */
.price-change-tip {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px !important;
  border: 1px solid #d5c18e !important;
  border-radius: 2px !important;
  background: #f4ead3 !important;
  color: var(--warn) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.recipes-tps-batch,
.recipes-tps-batch small {
  color: var(--warn) !important;
}

.pick-card .price,
.multi-tps-row.primary strong {
  background: none !important;
  color: var(--leaf) !important;
  -webkit-text-fill-color: currentColor !important;
}

.modelreq-tag {
  color: var(--muted) !important;
}

.review-play::before,
.sel-review-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.sel-family-icon {
  display: inline-flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--leaf);
}

.sel-family-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Same-silicon alternatives are a small ruled index, not a row of pills.
   The old 999px corners made static navigation look like filter buttons. */
.sel-family-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px !important;
  border-top: 1px solid var(--rule-strong);
}

.sel-family-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 9px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.sel-family-list a {
  min-width: 0;
  color: var(--strong) !important;
  overflow-wrap: anywhere;
}

.sel-family-list a:hover {
  color: var(--leaf) !important;
}

.sel-family-price {
  flex: 0 0 auto;
  color: var(--muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

@media (max-width: 640px) {
  .sel-family-list {
    grid-template-columns: 1fr;
  }
}

.sort-arrow {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: currentColor;
  vertical-align: -1px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.sort-arrow.off {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13V3m0 0L2.5 5.5M5 3l2.5 2.5M11 3v10m0 0 2.5-2.5M11 13l-2.5-2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13V3m0 0L2.5 5.5M5 3l2.5 2.5M11 3v10m0 0 2.5-2.5M11 13l-2.5-2.5'/%3E%3C/svg%3E");
}

.sort-arrow.asc {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14V2M3.5 6.5 8 2l4.5 4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14V2M3.5 6.5 8 2l4.5 4.5'/%3E%3C/svg%3E");
}

.sort-arrow.desc {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3.5 9.5 8 14l4.5-4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3.5 9.5 8 14l4.5-4.5'/%3E%3C/svg%3E");
}

/* The picker's legacy sortable headers used font arrows. Keep the same state
   signal, but draw it from the shared project-owned line-icon vocabulary. */
table thead th.sortable::after {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13V3m0 0L2.5 5.5M5 3l2.5 2.5M11 3v10m0 0 2.5-2.5M11 13l-2.5-2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13V3m0 0L2.5 5.5M5 3l2.5 2.5M11 3v10m0 0 2.5-2.5M11 13l-2.5-2.5'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

table thead th.sortable.sort-asc::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14V2M3.5 6.5 8 2l4.5 4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14V2M3.5 6.5 8 2l4.5 4.5'/%3E%3C/svg%3E");
}

table thead th.sortable.sort-desc::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3.5 9.5 8 14l4.5-4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v12M3.5 9.5 8 14l4.5-4.5'/%3E%3C/svg%3E");
}

details {
  border-radius: 0 !important;
}

/* Footer */
.site-footer,
.bb-footer {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 2px solid var(--strong);
  color: var(--muted);
}

.site-footer a,
.bb-footer a {
  color: var(--strong);
}

/* Floating actions remain useful without looking like glowing pills. */
.floating-cta,
.floating-compare-cta,
.floating-compare-clear {
  border-radius: 2px;
}

.floating-compare-cta {
  border: 1px solid var(--strong);
  background: var(--strong);
  color: #ffffff;
}

/* Responsive masthead and content transformations */
@media (max-width: 1500px) {
  .brand-copy small {
    display: none;
  }
}

@media (max-width: 1180px) {
  .header-nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
  }

  .header-pickers {
    order: 2;
    margin-left: auto;
  }

  .header-nav-mobile {
    display: none;
    flex-direction: column;
    gap: 0;
    order: 99;
    width: 100%;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--rule-strong);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header.nav-open .header-nav-mobile {
    display: flex;
  }

  .header-nav-mobile a {
    min-height: 44px;
    padding: 9px 3px;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
  }

  .mobile-nav-home {
    border-bottom: 2px solid var(--strong) !important;
  }

  .mobile-nav-group {
    display: grid;
  }

  .mobile-nav-group + .mobile-nav-group {
    margin-top: 8px;
    border-top: 2px solid var(--strong);
  }

  .mobile-nav-group p {
    margin: 0;
    padding: 12px 3px 3px;
    color: var(--leaf);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
  }
}

@media (max-width: 800px) {
  html {
    scroll-padding-top: 68px;
  }

  .site-header {
    min-height: 62px;
    padding: 9px 14px;
    gap: 8px;
  }

  .site-header:not(.nav-open) {
    flex-wrap: nowrap;
  }

  .brand {
    gap: 7px;
    font-size: 14px;
  }

  .brand-mark {
    width: 27px;
    height: 27px;
  }

  .region-chip,
  .lang-chip {
    width: 42px;
    min-width: 42px;
    height: 36px;
    min-height: 36px;
    padding: 0;
  }

  .region-chip .region-caret {
    display: none;
  }

  .region-picker .region-chip .region-text {
    display: none;
  }

  .region-picker .region-chip > .region-flag {
    display: inline;
    color: var(--strong);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
  }

  main {
    padding: 0 18px 56px;
  }

  section {
    padding: 44px 0;
  }

  .hero {
    padding: 46px 0 40px;
  }

  .hero h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .hero-sub {
    font-size: 17px;
  }

  .hero-cta-row {
    align-items: stretch;
  }

  .picker-section {
    margin-inline: -4px;
    padding: 22px 14px 28px;
  }

  .picker-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .tab {
    min-height: 64px;
    border-bottom: 1px solid var(--rule);
  }

  .tab:nth-child(2n) {
    border-right: 0;
  }

  .tab em {
    display: block;
  }

  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .usecase-card,
  .usecase-card:nth-child(2n) {
    min-height: auto;
    border-right: 0;
  }

  .quant-toggle {
    grid-template-columns: 1fr 1fr;
  }

  .compare-section {
    padding-top: 30px;
  }

  .compare-picker-bar {
    border-bottom: 0;
  }

  .compare-picker-bar .slot,
  .compare-picker-bar .slot:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .cmp-row .cmp-cell {
    border-top: 1px solid var(--rule);
  }

  .cell-build-label {
    border: 0;
    border-left: 3px solid var(--leaf);
    background: transparent;
  }

  .article {
    padding-top: 34px;
    font-size: 17px;
    line-height: 1.65;
  }

  .article h1 {
    font-size: 40px;
  }

  .article h2 {
    margin-top: 38px;
    font-size: 25px;
  }
}

@media (max-width: 360px) {
  .brand-copy {
    display: none;
  }

  .sel-slot.filled {
    grid-template-columns: minmax(0, 1fr);
  }

  .sel-slot .slot-vendor,
  .sel-slot .slot-name,
  .sel-slot-stats {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .sel-slot-change {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .brand .accent,
  .region-chip .region-caret {
    display: none;
  }

  .region-chip {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
  }

  .hero-stats {
    gap: 0;
  }

  .hero-stats > div {
    min-width: 0;
    padding-right: 14px;
  }

  .hero-stats > div + div {
    padding-left: 14px;
  }

  .picker-tabs,
  .quant-toggle {
    grid-template-columns: 1fr;
  }

  .tab,
  .tab:nth-child(2n) {
    min-height: 58px;
    border-right: 0;
  }

  .tab em {
    display: none;
  }

  .memory-control {
    padding: 24px 14px;
  }

  .category-filter {
    align-items: stretch;
  }

  .cf-label {
    width: 100%;
  }

  .category-filter button {
    min-height: 42px;
  }

  .seo-index-list li > a {
    display: block;
  }

  .seo-index-meta {
    display: block;
    margin-top: 3px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .seo-index-tagline {
    overflow-wrap: anywhere;
  }

  .solai-scale-grid,
  .solai-picks-grid,
  .solai-budget-grid,
  .solai-build-index {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .solai-scale-tier,
  .solai-picks-col,
  .solai-budget-half,
  .solai-build-index li {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================
   Native integration pass

   These rules are the shared component grammar for the whole project. The
   page-specific styles still own layout and content-specific data, while this
   layer owns hierarchy, surface treatment, controls, disclosure and rhythm.
   ======================================================================== */

/* Secondary context and optional media use one disclosure pattern. */
.context-details,
.media-disclosure,
.news-topic-index {
  max-width: 72ch;
  margin: 22px 0 28px;
  padding: 0;
  border: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
}

:where(.context-details, .media-disclosure, .news-topic-index) > summary {
  min-height: 44px;
  padding: 12px 2px;
  color: var(--strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-underline-offset: 3px;
}

:where(.context-details, .media-disclosure, .news-topic-index) > summary::marker {
  color: var(--leaf);
}

:where(.context-details, .media-disclosure, .news-topic-index) > summary:hover {
  color: var(--leaf);
  text-decoration: underline;
}

.context-details-body {
  max-width: 68ex;
  padding: 0 2px 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.context-details-body p {
  margin: 0 0 12px;
}

.context-details-body p:last-child {
  margin-bottom: 0;
}

/* Navigation looks like navigation. Filled boxes are reserved for actions. */
.compare-top-back,
.back-to-picker,
.cmp-back-cta,
.seo-cta .btn-cta-secondary {
  width: fit-content;
  min-height: 44px;
  padding: 11px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--strong) !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
}

:where(.compare-top-back, .back-to-picker, .cmp-back-cta, .seo-cta .btn-cta-secondary):hover {
  color: var(--leaf) !important;
  text-decoration-color: currentColor;
}

.seo-cta {
  gap: 6px 20px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* Actual hardware/model index markup: quiet ruled rows, not a card carpet. */
.seo-index-groups {
  gap: 38px !important;
}

.seo-index-group h2 {
  margin-bottom: 7px !important;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--strong);
}

.seo-index-list {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.seo-index-list li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.seo-index-list li > a {
  min-height: 44px;
  padding: 13px 2px 5px !important;
}

.seo-index-list li:hover {
  background: linear-gradient(90deg, var(--subtle), transparent 76%) !important;
}

.seo-index-list strong {
  color: var(--strong);
}

.seo-index-tagline {
  margin: 0 !important;
  padding: 0 2px 13px;
  color: var(--muted) !important;
}

/* News is an archive: one topic index, then chronological ruled entries. */
.news-topic-index {
  max-width: none;
  margin-bottom: 30px;
}

.news-tag-row {
  gap: 7px 18px !important;
  margin: 0 !important;
  padding: 4px 2px 15px;
}

.news-tag-chip {
  min-height: 28px;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--strong) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--rule-strong) !important;
  text-underline-offset: 3px;
}

.news-tag-chip:hover {
  color: var(--leaf) !important;
  text-decoration-color: currentColor !important;
}

.news-tag-count {
  color: var(--muted) !important;
  font-variant-numeric: tabular-nums;
}

.news-list {
  gap: 0 !important;
  border-top: 3px solid var(--strong);
}

.news-list-item {
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.news-list-item:hover {
  background: linear-gradient(90deg, var(--subtle), transparent 82%) !important;
}

.news-list-link {
  padding: 18px 2px !important;
  text-decoration: none !important;
}

.news-list-title {
  margin: 0 0 6px !important;
  color: var(--strong) !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

.news-list-summary,
.news-list-date,
.news-list-tag {
  color: var(--muted) !important;
}

.news-list-tags {
  gap: 5px 12px !important;
}

.news-list-tag,
.news-post-tags .news-tag-chip {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.news-derived-note {
  padding: 12px 0 !important;
  border: 0 !important;
  border-left: 3px solid var(--leaf) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-left: 14px !important;
}

.news-adjacent {
  gap: 0 !important;
  border-bottom: 1px solid var(--rule);
}

.news-adjacent-link {
  padding: 14px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.news-adjacent-link + .news-adjacent-link {
  border-left: 1px solid var(--rule) !important;
}

/* Long-form pages share a left-aligned, readable editorial head and TOC. */
.article,
.solai-section p,
.bb-section-lede,
.bb-tier-body {
  text-wrap: pretty;
}

.article p,
.article li,
.solai-section > p,
.solai-deck,
.bb-deck {
  max-width: 68ex;
}

.solai-article-head {
  margin-bottom: 34px !important;
  padding: 50px 0 26px !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  text-align: left !important;
}

.solai-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.solai-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--leaf);
}

.solai-article h1 {
  max-width: 18ch;
  color: var(--strong) !important;
  font-size: clamp(40px, 6vw, 62px) !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
}

.solai-deck {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 19px !important;
  line-height: 1.58 !important;
}

.solai-toc,
.bg-toc {
  margin: 0 0 38px !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.solai-toc-head,
.bg-toc-head {
  margin-bottom: 10px !important;
  color: var(--muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.solai-toc-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 30px !important;
  padding-left: 22px !important;
}

.bg-toc-list {
  column-gap: 38px !important;
}

:where(.solai-toc-list, .bg-toc-list) a {
  color: var(--strong) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--rule-strong) !important;
  text-underline-offset: 3px;
}

:where(.solai-toc-list, .bg-toc-list) a:hover {
  color: var(--leaf) !important;
  text-decoration-color: currentColor !important;
}

/* State-of-Local-AI uses contextual dialects, but the same rule-led grammar. */
.solai-callout,
.bg-xref,
.bb-section-source {
  border: 0 !important;
  border-left: 3px solid var(--leaf) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-scale-block {
  padding: 22px 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-scale-grid,
.solai-picks-grid,
.solai-budget-grid {
  gap: 0 !important;
}

.solai-scale-tier,
.solai-picks-col,
.solai-budget-half {
  padding: 16px 20px !important;
  border: 0 !important;
  border-left: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

:where(.solai-scale-tier, .solai-picks-col, .solai-budget-half):first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.solai-scale-list {
  gap: 0 !important;
  border-top: 1px solid var(--rule);
}

.solai-scale-list li {
  padding: 9px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-era-list {
  border-top: 3px solid var(--strong);
}

.solai-era {
  margin: 0 !important;
  padding: 15px 2px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-picks-col {
  border-top: 3px solid var(--strong) !important;
}

.solai-picks-col-dense {
  border-top-color: var(--leaf) !important;
}

.solai-picks-col-moe {
  border-top-color: var(--warn) !important;
}

.solai-budget {
  margin: 0 0 34px !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-budget > h3 {
  margin-bottom: 10px !important;
  font-size: 22px !important;
}

.solai-budget-dense {
  border-top: 3px solid var(--leaf) !important;
}

.solai-budget-moe {
  border-top: 3px solid var(--warn) !important;
}

.solai-budget-mentions {
  padding: 14px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-budget-comparison {
  border-radius: 0 !important;
  background: var(--subtle) !important;
  color: var(--ink) !important;
}

:where(
  .solai-scale-badge,
  .solai-era-leader,
  .solai-arch-badge,
  .solai-budget-delta,
  .solai-mention-delta,
  .solai-scale-price
) {
  border-radius: 2px !important;
  background: var(--subtle) !important;
  color: var(--strong) !important;
}

.solai-build-index,
.bb-build-index {
  display: block !important;
  margin-top: 12px !important;
  border-top: 3px solid var(--strong);
}

:where(.solai-build-index, .bb-build-index) li {
  margin: 0 !important;
  padding: 12px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.solai-video-embed {
  border-radius: 0 !important;
  border-color: var(--rule-strong) !important;
  background: var(--subtle) !important;
}

.solai-to-top {
  width: 44px !important;
  height: 44px !important;
  border-radius: 2px !important;
  border-color: var(--strong) !important;
  background: var(--strong) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Bounded interaction remains bounded; nested helpers become rules, not cards. */
.sel-filters,
.recipes-filter-bar,
.modelreq-calc,
.vhb-section,
.be-setup {
  padding: 17px 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vh-zone,
.category-filter,
.pnp-row {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.vh-zone {
  border-right: 0 !important;
  border-left: 0 !important;
}

.sel-picker-bar .sel-slot {
  border-radius: 0 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.sel-picker-bar .sel-slot.filled {
  border-left: 4px solid var(--leaf) !important;
}

.sel-buy-links {
  padding: 14px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sel-slot-change {
  min-height: 36px;
  border-radius: 2px !important;
}

.sel-quant-toggle {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100%;
  padding: 0 !important;
  border: 1px solid var(--rule-strong) !important;
  background: var(--surface) !important;
}

.sel-quant-toggle .quant-btn {
  min-width: 0 !important;
  min-height: 58px;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-right: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}

.sel-quant-toggle .quant-btn:last-child {
  border-right: 0 !important;
}

.sel-slider-wrap input[type="range"] {
  min-height: 28px;
}

.sel-buckets {
  gap: 34px !important;
}

.sel-bucket {
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sel-bucket-grid {
  gap: 0 !important;
  border-top: 1px solid var(--rule);
}

.sel-model-card {
  padding: 14px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sel-model-card:nth-child(2n) {
  border-right: 0 !important;
}

.sel-bucket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.sel-bucket-icon svg {
  display: block;
}

/* Comparison: identity once, answers first, buying route once, media optional. */
.cmp-header {
  border-top: 3px solid var(--strong);
  border-bottom: 1px solid var(--rule-strong);
}

.cmp-header-cell {
  padding: 15px 16px !important;
  border: 0 !important;
  border-left: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cmp-sticky-strip {
  display: none !important;
  box-shadow: none !important;
}

.cmp-sticky-strip.is-active {
  display: grid !important;
}

.cmp-buy-grid {
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}

.cmp-buy-card {
  padding: 16px !important;
  border: 0 !important;
  border-left: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.cmp-buy-card:first-child {
  border-left: 0 !important;
}

.cmp-videos,
.sel-reviews-strip {
  max-width: none;
  margin: 28px 0 !important;
  padding: 0 !important;
}

.cmp-videos-grid,
.sel-reviews-grid {
  gap: 0 !important;
  padding: 0 0 14px;
  border-top: 1px solid var(--rule);
}

.cmp-video-card,
.sel-review-thumb {
  min-width: 0;
  padding: 12px !important;
  border: 0 !important;
  border-right: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.cmp-video-card:last-child,
.sel-review-thumb:last-child {
  border-right: 0 !important;
}

.cmp-video-thumb,
.sel-review-thumb img {
  border-radius: 0 !important;
}

.sel-review-title {
  background: transparent !important;
  color: var(--muted) !important;
}

.sel-review-play {
  border-radius: 2px !important;
  background: rgba(16, 23, 19, .82) !important;
}

.cmp-toolbar {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.cmp-diff-toggle,
.cmp-share-btn,
.share-results-btn {
  min-height: 44px;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.model-pill,
.stack-label,
.fit-score,
.vllm-badge,
.cell-build-label,
.ch-tax,
.cmp-ref-badge {
  border-radius: 2px !important;
}

.rating-dot {
  box-shadow: none !important;
}

/* Data tables are one family across model pages, recipes and setup guides. */
.sel-full-table,
.cmp-llm-wrap,
.cmp-vibe-panel,
.recipes-table-wrap,
.be-table-wrap,
.modelreq-table-wrap,
.vhb-table-wrap,
.solai-power-table {
  border-radius: 0 !important;
  box-shadow: none !important;
}

:where(.recipes-table, .be-table, .modelreq-table, .vhb-table, .solai-power-table table) thead th {
  border-top: 3px solid var(--strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  background: var(--subtle) !important;
  color: var(--strong) !important;
}

:where(.recipes-table, .be-table, .modelreq-table, .vhb-table, .solai-power-table table) tbody tr:hover {
  background: var(--subtle) !important;
}

/* Share and feedback are quiet utility strips, not promotional cards. */
.share,
.feedback-widget {
  max-width: none !important;
  margin: 36px 0 0 !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.feedback-actions {
  justify-content: flex-start !important;
}

.share-btn,
.feedback-btn,
.feedback-reason-send {
  min-height: 40px;
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

.feedback-reason-send {
  min-height: 44px;
  border: 1px solid var(--strong) !important;
  background: var(--strong) !important;
  color: #fff !important;
}

.feedback-reason-input {
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Recipe controls use the same form and action hierarchy as the pickers. */
.recipes-filter-bar {
  gap: 10px 14px !important;
}

.recipes-filter-select,
.recipe-submit-field input,
.recipe-submit-field select,
.recipe-submit-field textarea,
.modelreq-calc-controls input,
.modelreq-calc-controls select {
  min-height: 44px;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

.recipes-submit-btn,
.recipe-submit-send {
  min-height: 44px;
  border: 1px solid var(--strong) !important;
  border-radius: 2px !important;
  background: var(--strong) !important;
  color: #fff !important;
}

.recipes-run-btn,
.be-run-btn {
  min-height: 36px;
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--strong) !important;
}

.recipes-run-btn-pressed,
.be-run-btn[aria-pressed="true"] {
  border-color: var(--leaf) !important;
  background: var(--subtle) !important;
}

.recipe-submit-dialog {
  border-color: var(--rule-strong) !important;
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: 0 18px 50px rgba(16, 23, 19, .28) !important;
}

.recipe-submit-close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 2px !important;
}

.recipe-submit-error,
.recipe-submit-success {
  border-radius: 2px !important;
}

/* One fixed comparison tray replaces two unrelated floating controls. */
.floating-compare-tray {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  align-items: stretch;
  gap: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(16, 23, 19, .22));
}

.floating-compare-tray .floating-compare-cta,
.floating-compare-tray .floating-compare-clear {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.floating-compare-tray .floating-compare-cta {
  min-height: 48px;
  padding: 11px 16px !important;
  border: 1px solid var(--strong) !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--strong) !important;
  color: #fff !important;
}

.floating-compare-tray .floating-compare-cta .cmp-count {
  border-radius: 2px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

.floating-compare-tray .floating-compare-clear {
  order: -1;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--strong) !important;
  border-right: 0 !important;
  border-radius: 2px 0 0 2px !important;
  background: var(--surface) !important;
  color: var(--strong) !important;
}

.floating-compare-tray .floating-compare-clear:hover {
  background: var(--subtle) !important;
  color: var(--leaf) !important;
}

.floating-cta {
  min-height: 44px;
  padding: 9px 13px !important;
  border: 1px solid var(--strong) !important;
  border-radius: 2px !important;
  background: var(--strong) !important;
  color: #fff !important;
  font-size: 13px;
  box-shadow: none !important;
}

body:has(.floating-compare-tray .visible) main {
  padding-bottom: 92px;
}

/* Locale controls are one control family and foreign labels identify language. */
.tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.tick svg {
  display: block;
}

@media (max-width: 800px) {
  .context-details,
  .media-disclosure,
  .news-topic-index {
    margin: 18px 0 24px;
  }

  .solai-article-head {
    padding-top: 38px !important;
    text-align: left !important;
  }

  .solai-article h1 {
    font-size: 40px !important;
  }

  .solai-deck {
    margin: 0 !important;
    font-size: 17px !important;
  }

  .solai-toc-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .bg-toc-list {
    columns: 1 !important;
  }

  .solai-scale-grid,
  .solai-picks-grid,
  .solai-budget-grid {
    display: block !important;
  }

  .solai-scale-tier,
  .solai-picks-col,
  .solai-budget-half,
  :where(.solai-scale-tier, .solai-picks-col, .solai-budget-half):first-child {
    padding: 15px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--rule) !important;
  }

  .sel-quant-toggle {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sel-quant-toggle .quant-btn,
  .sel-quant-toggle .quant-btn:last-child {
    width: 100% !important;
    min-height: 54px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    text-align: left;
  }

  .sel-quant-toggle .quant-btn:last-child {
    border-bottom: 0 !important;
  }

  .sel-filter-row {
    gap: 8px !important;
  }

  .sel-model-card,
  .sel-model-card:nth-child(2n) {
    padding-inline: 0 !important;
    border-right: 0 !important;
  }

  .cmp-sticky-strip,
  .cmp-sticky-strip.is-active {
    display: none !important;
  }

  .cmp-header {
    border-bottom: 0;
  }

  .cmp-header-cell {
    padding: 13px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--rule) !important;
  }

  .cmp-buy-grid {
    display: block !important;
  }

  .cmp-buy-card,
  .cmp-buy-card:first-child {
    padding: 14px 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }

  .cmp-videos-grid,
  .sel-reviews-grid {
    display: block !important;
  }

  .cmp-video-card,
  .sel-review-thumb,
  .cmp-video-card:last-child,
  .sel-review-thumb:last-child {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 11px;
    padding: 10px 0 !important;
    border-right: 0 !important;
  }

  .sel-review-thumb {
    grid-template-rows: auto;
  }

  .cmp-video-thumb,
  .sel-review-thumb img {
    grid-column: 1;
    width: 96px !important;
    height: 54px !important;
    aspect-ratio: auto !important;
  }

  .cmp-video-body,
  .sel-review-title {
    grid-column: 2;
    align-self: center;
    padding: 0 !important;
  }

  .sel-review-play {
    top: 27px !important;
    left: 48px !important;
  }

  .recipes-filter-bar {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center !important;
  }

  .recipes-filter-select {
    width: 100%;
    min-width: 0 !important;
  }

  .recipes-count,
  .recipes-submit-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0 !important;
  }

  .recipes-count {
    order: initial !important;
  }

  .news-adjacent-link + .news-adjacent-link {
    border-top: 1px solid var(--rule) !important;
    border-left: 0 !important;
  }

  .floating-compare-tray {
    right: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }

  .floating-compare-tray .floating-compare-cta {
    flex: 1 1 auto;
    justify-content: center;
  }

  .floating-compare-tray .floating-compare-clear {
    flex: 0 0 48px;
  }

  .floating-cta {
    top: auto !important;
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: calc(100% - 28px);
    transform: translateY(8px) !important;
  }

  .floating-cta.visible {
    transform: translateY(0) !important;
  }

  .floating-cta:active {
    transform: translateY(1px) !important;
  }
}

@media (max-width: 520px) {
  .seo-index-list li > a {
    padding-top: 12px !important;
  }

  .news-list-link {
    padding-inline: 0 !important;
  }

  .share-list {
    gap: 6px !important;
  }

  .share-btn {
    min-height: 40px;
  }
}

/* Compact status and evidence elements complete the shared vocabulary. */
.slot-x {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

.cmp-toggle {
  min-height: 32px;
  border-radius: 2px !important;
  background: var(--surface) !important;
  color: var(--strong) !important;
}

.cmp-toggle.on {
  border-color: var(--leaf) !important;
  background: var(--subtle) !important;
  color: var(--leaf) !important;
}

.tab.active {
  box-shadow: none !important;
}

:where(.sel-card-badge, .sel-stat-tag, .quant-pill, .oos-badge, .bb-pick-delta) {
  border-radius: 2px !important;
}

.pick-card .multi-tps {
  padding: 10px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pick-card .why {
  padding: 9px 0 9px 12px !important;
  border-left: 3px solid var(--leaf);
  border-radius: 0 !important;
  background: transparent !important;
}

.pick-card .reviews.media-disclosure {
  margin: 16px 0 0 !important;
}

.pick-card .reviews-strip {
  gap: 0 !important;
  padding-bottom: 10px;
  border-top: 1px solid var(--rule);
}

.pick-card .review-thumb {
  padding: 8px !important;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.pick-card .review-thumb:last-child {
  border-right: 0;
}

.pick-card .review-thumb img,
.article img {
  border-radius: 0 !important;
}

.pick-card .review-play {
  border-radius: 2px !important;
  background: rgba(16, 23, 19, .82) !important;
}

@media (max-width: 800px) {
  .pick-card .reviews-strip {
    display: block !important;
  }

  .pick-card .review-thumb,
  .pick-card .review-thumb:last-child {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 11px;
    padding: 10px 0 !important;
    border-right: 0 !important;
  }

  .pick-card .review-thumb img {
    grid-column: 1;
    width: 96px !important;
    height: 54px !important;
    aspect-ratio: auto !important;
  }

  .pick-card .review-title {
    grid-column: 2;
    align-self: center;
    padding: 0 !important;
  }

  .pick-card .review-play {
    top: 27px !important;
    left: 48px !important;
  }
}