/* Layout: centered 1200px drafting sheet on graph paper; pill navigation; 24px cards; one dark band. Single deliberate light look. */
:root {
  --lime: #bfff5a;
  --cobalt: #1a67fd;
  --forest: #0b3d28;
  --paper: #fcfcfd;
  --ink: #1d2130;
  --carbon: #151720;
  --obsidian: #0a0d16;
  --mist: #ebeef7;
  --slate: #d5d9e8;
  --pewter: #6b6d72;
  --graphite: #474950;
  --mint-tint: #d8fbed;
  --head-fill: #f5f6fa;
  --ok-fg: #0b3d28; --ok-bg: #d8fbed;
  --warn-fg: #6b4a00; --warn-bg: #fff1cf;
  --bad-fg: #8a2c1f; --bad-bg: #ffe9e5;
  --g-cyan: radial-gradient(100% 100% at 50% 0px, #7ae3ff 0%, #46d8ff 100%);
  --g-mint: radial-gradient(100% 100% at 50% 0px, #5df7b6 0%, #19f79a 100%);
  --g-citron: radial-gradient(100% 100% at 50% 0px, #ecf174 0%, #e5ed38 100%);
  --g-orchid: radial-gradient(100% 100% at 50% 0px, #ffb5f1 0%, #ff9dec 100%);
  --g-amber: radial-gradient(100% 100% at 50% 0px, #ffd888 0%, #ffc650 100%);
  --g-lime: radial-gradient(100% 100% at 50% 0px, #d6ff96 0%, #b7ff5a 100%);
  --stroke: linear-gradient(90deg, #46d8ff 0%, #19f79a 35%, #e5ed38 65%, #ff9dec 100%);
  --sans: 'IBM Plex Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sh-lift: rgba(29,33,48,.04) 0 3px 3px -1px, rgba(29,33,48,.04) 0 6px 6px -3px, rgba(29,33,48,.04) 0 12px 12px -6px, rgba(29,33,48,.04) 0 24px 24px -12px, rgba(29,33,48,.04) 0 32px 32px -16px;
  --sh-btn: rgba(255,255,255,.72) 0 1px 0 0 inset, rgba(29,33,48,.12) 0 -2px 0 0 inset, rgba(29,33,48,.04) 0 1px 1px -1px, rgba(29,33,48,.04) 0 4px 4px -2px;
  --sh-card: rgba(255,255,255,.72) 0 0 0 1px inset, #d5d9e8 0 0 0 1px, rgba(29,33,48,.03) 0 1px 1px -1px, rgba(29,33,48,.05) 0 3px 3px -2px, rgba(29,33,48,.03) 0 5px 5px -3px, rgba(213,217,232,.22) 0 5px 5px -2px;
  --sh-feature: rgba(29,33,48,.08) 0 0 0 1px, rgba(29,33,48,.04) 0 1px 1px -1px, rgba(29,33,48,.04) 0 2px 2px -1px, rgba(29,33,48,.04) 0 3px 3px -1.5px, rgba(29,33,48,.04) 0 5px 5px -2.5px;
  --glow: 70,216,255;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--carbon); font-family: var(--sans); font-size: 16px; line-height: 1.56; font-feature-settings: "liga" 0; -webkit-font-smoothing: antialiased; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

/* Type */
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 2; letter-spacing: 2px; text-transform: uppercase; color: var(--pewter); margin: 0 0 12px; }
.display { font-size: clamp(46px, 8.2vw, 80px); line-height: .9; letter-spacing: -.045em; font-weight: 700; color: var(--obsidian); margin: 0 0 24px; text-wrap: balance; }
.heading { font-size: clamp(32px, 5vw, 48px); line-height: 1; letter-spacing: -.021em; font-weight: 600; color: var(--obsidian); margin: 0 0 32px; text-wrap: balance; }
.heading-lg { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.04; letter-spacing: -.021em; font-weight: 600; color: var(--obsidian); margin: 0 0 16px; text-wrap: balance; max-width: 22ch; }
.heading-sm { font-size: 22px; line-height: 1.43; letter-spacing: -.012em; font-weight: 600; color: var(--obsidian); margin: 0 0 16px; text-wrap: balance; }
.heading-sm .sub { font-weight: 400; color: var(--pewter); font-size: 16px; letter-spacing: 0; }
.lede { font-size: 18px; line-height: 1.56; color: var(--graphite); max-width: 62ch; margin: 0 0 24px; }
.center { text-align: center; }
.center .lede, .center-text { margin-inline: auto; }
.meta { display: block; color: var(--pewter); font-size: 13px; line-height: 1.5; }
.note { color: var(--pewter); font-size: 14px; max-width: 72ch; }
.vs { color: var(--pewter); font-weight: 400; }
p { max-width: 72ch; }
.stroke { position: relative; display: inline-block; white-space: nowrap; }
.stroke::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -.06em; height: max(3px, .06em); border-radius: 3px; background: var(--stroke); }

/* Grid paper */
.grid-paper { position: relative; background-color: var(--paper);
  background-image: linear-gradient(rgba(213,217,232,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(213,217,232,.42) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center top; }
.grid-paper::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.grid-paper > * { position: relative; z-index: 1; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(252,252,253,.86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--mist); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--obsidian); font-weight: 600; font-size: 20px; letter-spacing: -.02em; text-decoration: none !important; flex: none; }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--cobalt); display: grid; place-items: center; }
.logo-mark svg { display: block; }
.logo small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; color: var(--pewter); text-transform: uppercase; margin-left: 2px; }
.nav-pill { display: flex; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--paper); box-shadow: rgba(29,33,48,.08) 0 0 0 1px, rgba(29,33,48,.04) 0 2px 2px -1px; margin-inline: auto; }
.nav-pill a { color: var(--ink); font-weight: 500; font-size: 14px; line-height: 1; padding: 10px 14px; border-radius: 44px; white-space: nowrap; text-decoration: none; }
.nav-pill a:hover { background: var(--mist); }
.nav-pill a[aria-current="page"] { background: var(--carbon); color: var(--paper); }
.header-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.header-search { position: relative; }
.header-search input { width: 180px; font: inherit; font-size: 14px; padding: 9px 14px 9px 36px; border-radius: 9999px; border: 1px solid var(--slate); background: var(--paper); color: var(--ink); }
.header-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pewter); pointer-events: none; }
.menu-btn { display: none; }
.mobile-nav { display: none; }
@media (max-width: 1100px) {
  .header-row .nav-pill, .header-tools .btn-lime { display: none; }
  .header-tools { margin-left: auto; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 9999px; border: 1px solid var(--slate); background: var(--paper); color: var(--ink); cursor: pointer; }
  .menu-open .mobile-nav { display: flex; flex-direction: column; gap: 4px; padding-block: 8px 16px; }
  .mobile-nav a { color: var(--ink); font-weight: 500; padding: 10px 16px; border-radius: 44px; }
  .mobile-nav a[aria-current="page"] { background: var(--carbon); color: var(--paper); }
}
@media (max-width: 560px) { .header-search input { width: 132px; } .logo small { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 16px/1.2 var(--sans); padding: 15px 30px; border-radius: 56px; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: box-shadow .15s, transform .15s; }
.btn-lime { background: var(--lime); color: var(--obsidian); box-shadow: var(--sh-btn); }
.btn-lime:hover { box-shadow: var(--sh-btn), rgba(191,255,90,.45) 0 6px 18px -4px; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-dark { background: var(--paper); color: var(--ink); border-color: var(--slate); padding: 12px 22px; font-size: 15px; }
.btn-outline-dark:hover, .btn-outline:hover { border-color: var(--ink); }
.header-tools .btn { padding: 10px 20px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.actions.left { justify-content: flex-start; margin-top: 24px; }

/* Hero + feature fan */
.hero { padding-block: 88px 96px; }
.fan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.feature { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 20px 22px; border-radius: 24px; background: var(--paper); color: var(--ink); text-decoration: none !important; box-shadow: var(--sh-feature), rgba(var(--glow),.08) 0 10px 10px -5px, rgba(var(--glow),.08) 0 24px 24px -8px; transition: transform .2s ease; min-width: 0; }
.feature:nth-child(1) { transform: rotate(-4deg) translateY(14px); }
.feature:nth-child(2) { transform: rotate(-2deg) translateY(4px); }
.feature:nth-child(3) { transform: rotate(-.5deg); }
.feature:nth-child(4) { transform: rotate(.5deg); }
.feature:nth-child(5) { transform: rotate(2deg) translateY(4px); }
.feature:nth-child(6) { transform: rotate(4deg) translateY(14px); }
.feature:hover { transform: translateY(-6px) rotate(0); }
.feature-icon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--sh-card); color: var(--ink); }
.feature-title { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.arc-cyan, .arc-lime, .arc-orchid, .arc-mint, .arc-amber, .arc-citron { position: relative; }
[class*="arc-"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 3px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.arc-cyan::before { background: var(--g-cyan); } .arc-cyan { --glow: 70,216,255; }
.arc-lime::before { background: var(--g-lime); } .arc-lime { --glow: 183,255,90; }
.arc-orchid::before { background: var(--g-orchid); } .arc-orchid { --glow: 255,157,236; }
.arc-mint::before { background: var(--g-mint); } .arc-mint { --glow: 25,247,154; }
.arc-amber::before { background: var(--g-amber); } .arc-amber { --glow: 255,198,80; }
.arc-citron::before { background: var(--g-citron); } .arc-citron { --glow: 229,237,56; }
@media (max-width: 1000px) {
  .fan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature:nth-child(n) { transform: none; }
}
@media (max-width: 560px) { .fan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hero { padding-block: 56px 64px; } }

/* Sections */
.section { padding-block: 80px; }
.page-head { padding-block: 56px 48px; border-bottom: 1px solid var(--mist); }
.page-head::after { height: 64px; }
.page-body { padding-block: 16px 80px; }
.block { margin-block: 48px; }
.block:first-child { margin-top: 32px; }

/* Dark band */
.band { background: var(--obsidian); color: #e8eaf2; padding-block: 96px; }
.band .eyebrow { color: #9a9ca3; }
.on-dark { color: var(--paper); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; }
.step { border: 1px solid rgba(252,252,253,.12); border-radius: 24px; padding: 24px; min-width: 0; }
.step h3 { margin: 8px 0; font-size: 22px; letter-spacing: -.012em; color: var(--paper); font-weight: 600; }
.step p { margin: 0; color: #b9bcc6; font-size: 15px; }
.step-n { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--lime); }
.amber-card { max-width: 720px; margin-inline: auto; background: var(--g-amber); color: var(--obsidian); border-radius: 24px; padding: 32px; box-shadow: rgba(17,17,17,.16) 0 0 0 1px inset, rgba(255,198,80,.12) 0 26px 32px -16px, rgba(255,198,80,.12) 0 20px 44px -16px; }
.amber-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px; color: rgba(10,13,22,.6); }
.amber-quote { font-size: 22px; line-height: 1.43; letter-spacing: -.012em; margin: 0 0 16px; font-weight: 500; }
.amber-attr { margin: 0; font-size: 14px; font-weight: 600; }
.amber-attr a { color: var(--obsidian); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Small cards */
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mini { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--sh-card); color: var(--ink); text-decoration: none !important; min-width: 0; }
.mini:hover { box-shadow: var(--sh-card), var(--sh-lift); }
.mini strong { display: block; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-block: 24px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 24px; background: var(--paper); color: var(--ink); text-decoration: none !important; box-shadow: var(--sh-feature), rgba(var(--glow),.08) 0 10px 10px -5px, rgba(var(--glow),.08) 0 24px 24px -8px; min-width: 0; }
.tile.small { border-radius: 14px; box-shadow: var(--sh-card); }
.tile-num { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--obsidian); font-variant-numeric: tabular-nums; }
.tile-num small { font-size: 16px; font-weight: 500; color: var(--pewter); letter-spacing: 0; }
.tile-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pewter); }
.tile-title { font-weight: 600; font-size: 17px; }

/* Facts */
.facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 24px 0 8px; }
.facts div { min-width: 0; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pewter); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 18px; color: var(--obsidian); font-variant-numeric: tabular-nums; }
.yours { margin: 8px 0 0; }

/* Panels and forms */
.panel { background: var(--paper); border-radius: 24px; padding: 20px 24px; box-shadow: var(--sh-card); }
.form-row, .rl-calc-hw, .rl-calc-opts { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.field, .rl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field[hidden], .rl-field[hidden] { display: none; }
.grow, .rl-field-wide { flex: 1 1 260px; }
.field label, .rl-field label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pewter); }
select, input[type="search"] { font: 15px/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--slate); border-radius: 14px; padding: 11px 14px; max-width: 100%; min-width: 0; }
select:focus, input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.detect-status, .rl-detect-status { color: var(--graphite); margin: 14px 4px 8px; min-height: 1.2em; }
.detect-choices, .rl-detect-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .rl-chip { font: 500 14px var(--sans); padding: 8px 16px; border-radius: 44px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.chip:hover, .rl-chip:hover { background: var(--carbon); color: var(--paper); }

/* Calculator (shared markup with the live plugin) */
.rl-calc { margin-top: 8px; }
.rl-calc-loading { color: var(--pewter); }
.rl-calc-hw { background: var(--paper); border-radius: 24px; padding: 20px 24px; box-shadow: var(--sh-card); }
.rl-field-action .rl-button { margin: 0; }
.rl-button { display: inline-flex; align-items: center; font: 500 15px/1.2 var(--sans); padding: 12px 24px; border-radius: 56px; border: 0; background: var(--lime); color: var(--obsidian); box-shadow: var(--sh-btn); cursor: pointer; }
.rl-calc-opts { margin-top: 8px; }
.rl-check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; }
.rl-check label { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rl-check input { width: 18px; height: 18px; accent-color: var(--carbon); }
.rl-summary { font-weight: 600; color: var(--obsidian); margin: 20px 4px 8px; }
.rl-meta { display: block; color: var(--pewter); font-size: 13px; }
.rl-tabs, .pills { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--paper); box-shadow: rgba(29,33,48,.08) 0 0 0 1px, rgba(29,33,48,.04) 0 2px 2px -1px; margin: 20px 0 12px; }
.rl-tabs button, .pills a { font: 500 14px/1 var(--sans); padding: 10px 18px; border-radius: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none !important; }
.rl-tabs button[aria-selected="true"], .pills a[aria-current="page"] { background: var(--carbon); color: var(--paper); }
.pills { margin-top: 8px; }
.rl-error { color: var(--bad-fg); }

/* Tables */
.rl-table-wrap { overflow-x: auto; border-radius: 24px; background: var(--paper); box-shadow: var(--sh-card); margin-block: 12px; }
.rl-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.rl-table th, .rl-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--mist); vertical-align: middle; }
.rl-table thead th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pewter); background: var(--head-fill); white-space: nowrap; vertical-align: bottom; }
.rl-table tbody tr:last-child > * { border-bottom: 0; }
.rl-table tbody tr:hover > * { background: #f8f9fc; }
.rl-table .num { text-align: right; white-space: nowrap; }
.rl-table code, .code code { font-family: var(--mono); font-size: 13px; }
.rl-table tbody th { font-weight: 600; color: var(--ink); font-size: 15px; }
.rl-table td.win { background: var(--mint-tint); color: var(--forest); font-weight: 600; }
.row-best > *, .rl-row-highlight > * { background: #f4fbe9 !important; }
.code { background: var(--carbon); color: #e8eaf2; border-radius: 14px; padding: 16px 20px; overflow-x: auto; }

/* Sort + filter controls (tables.js) */
.rl-th-inner { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.rl-table th.num .rl-th-inner { justify-content: flex-end; }
.rl-sort { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: 6px; }
.rl-sort:hover { color: var(--ink); }
.rl-sort:focus-visible, .rl-filter-btn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.rl-sort-ind { width: 8px; height: 10px; background: currentColor; opacity: .35;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0l3 4H1zM4 10L1 6h6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0l3 4H1zM4 10L1 6h6z'/%3E%3C/svg%3E") center/contain no-repeat; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--obsidian) !important; }
th[aria-sort="ascending"] .rl-sort-ind, th[aria-sort="descending"] .rl-sort-ind { opacity: 1; color: var(--cobalt); }
th[aria-sort="ascending"] .rl-sort-ind { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 1l3.5 5h-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 1l3.5 5h-7z'/%3E%3C/svg%3E"); }
th[aria-sort="descending"] .rl-sort-ind { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 9L.5 4h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 9L.5 4h7z'/%3E%3C/svg%3E"); }
.rl-filter-btn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 44px; border: 1px solid transparent; background: transparent; color: var(--pewter); cursor: pointer; line-height: 1; }
.rl-filter-btn:hover { border-color: var(--slate); color: var(--ink); background: var(--paper); }
th.rl-filtered .rl-filter-btn { background: var(--carbon); color: var(--paper); }
.rl-filter-count { font: 600 10px var(--sans); }
.rl-filter-pop { position: fixed; z-index: 1000; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: min(380px, calc(100vh - 16px)); overflow: auto; background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px; font: 14px var(--sans); box-shadow: rgba(29,33,48,.08) 0 0 0 1px, var(--sh-lift); }
.rl-filter-pop fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rl-filter-pop legend { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pewter); padding: 0; margin-bottom: 8px; }
.rl-filter-actions { display: flex; gap: 14px; margin-bottom: 8px; }
.rl-filter-actions button, .rl-linklike { all: unset; cursor: pointer; color: var(--cobalt); font-size: 13px; font-weight: 500; }
.rl-filter-actions button:hover, .rl-linklike:hover { text-decoration: underline; }
.rl-filter-list { display: grid; gap: 2px; }
.rl-filter-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: pointer; }
.rl-filter-opt:hover { background: var(--head-fill); }
.rl-filter-opt input { width: 16px; height: 16px; accent-color: var(--carbon); }
.rl-filter-n { color: var(--pewter); font-size: 12px; font-variant-numeric: tabular-nums; }
.rl-empty-row td { text-align: center; color: var(--pewter); padding: 24px; }

/* Grades, status, bars */
.rl-grade { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; font-weight: 700; font-size: 14px; }
.rl-grade-s { background: var(--forest); color: var(--mint-tint); }
.rl-grade-a { background: var(--carbon); color: var(--paper); }
.rl-grade-b { background: #3a3e4d; color: var(--paper); }
.rl-grade-c { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px #ecd391; }
.rl-grade-d { background: var(--bad-bg); color: var(--bad-fg); box-shadow: inset 0 0 0 1px #f2c4bb; }
.rl-grade-f { background: var(--mist); color: var(--pewter); }
.rl-status { display: inline-block; font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 9999px; white-space: nowrap; }
.rl-status-fits, .rl-status-tight { background: var(--ok-bg); color: var(--ok-fg); }
.rl-status-offload, .rl-status-heavy_offload { background: var(--warn-bg); color: var(--warn-fg); }
.rl-status-no_fit { background: var(--bad-bg); color: var(--bad-fg); }
.rl-bar { display: block; height: 4px; min-width: 72px; margin-top: 6px; background: var(--mist); border-radius: 9999px; overflow: hidden; }
.rl-bar > span { display: block; height: 100%; background: var(--forest); border-radius: 9999px; }
.rl-bar-offload > span, .rl-bar-heavy_offload > span { background: #c79a2b; }
.rl-bar-no_fit > span { background: #c0533f; }

/* Verdicts, lists */
.verdict { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: 24px; background: var(--paper); box-shadow: var(--sh-card); max-width: 780px; margin-top: 8px; color: var(--carbon); text-decoration: none !important; }
.verdict .rl-grade { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
.verdict p { margin: 0; }
.verdict-title { font-weight: 600; font-size: 22px; letter-spacing: -.012em; color: var(--obsidian); margin-bottom: 4px !important; }
.verdict.link:hover { box-shadow: var(--sh-card), var(--sh-lift); }
.ranked { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ranked li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--sh-card); }
.ranked li a { font-weight: 600; }
.ranked .meta { display: inline; }
.results { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.results li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 14px 18px; border-radius: 14px; background: var(--paper); box-shadow: var(--sh-card); }
.results li > a { font-weight: 600; }
.results .meta { flex-basis: 100%; }
.kind { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pewter); }
.inline-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.inline-list li { padding: 6px 14px; border-radius: 9999px; background: var(--head-fill); font-size: 14px; }

/* Footer */
.site-footer { border-top: 1px solid var(--mist); padding-block: 48px; color: var(--pewter); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-row nav a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .feature, .btn { transition: none; } }

/* =====================================================================
   WordPress frame
   ===================================================================== */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--carbon); color: var(--paper); padding: 10px 16px; border-radius: 44px; }
.skip-link:focus { top: 12px; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.entry-content { max-width: 760px; }
.entry-content > * { max-width: 72ch; }
.entry-content h2 { font-size: 28px; letter-spacing: -.015em; color: var(--obsidian); margin: 40px 0 12px; }
.entry-content h3 { font-size: 22px; color: var(--obsidian); margin: 32px 0 8px; }
.entry-content img { height: auto; border-radius: 14px; }
.pager .nav-links { display: flex; gap: 8px; margin-top: 24px; }
.pager .page-numbers { padding: 8px 14px; border-radius: 44px; box-shadow: var(--sh-card); color: var(--ink); }
.pager .page-numbers.current { background: var(--carbon); color: var(--paper); }

/* =====================================================================
   RunLocal Engine pages in the blueprint look.
   The plugin's own tokens are remapped, then its layout is reshaped.
   ===================================================================== */
.rl-page, .rl-calc {
  --rl-fg: var(--carbon); --rl-muted: var(--pewter); --rl-line: var(--mist); --rl-surface: var(--paper); --rl-soft: var(--head-fill);
  --rl-accent: var(--cobalt); --rl-accent-fg: var(--paper);
  --rl-ok: var(--ok-fg); --rl-ok-soft: var(--ok-bg); --rl-warn: var(--warn-fg); --rl-warn-soft: var(--warn-bg); --rl-bad: var(--bad-fg); --rl-bad-soft: var(--bad-bg);
  --rl-mono: var(--mono);
}
.rl-page { max-width: none; margin: 0; padding: 0 0 80px; }
.rl-page > * { max-width: 1200px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
@media (max-width: 640px) { .rl-page > * { padding-inline: 16px; } }
.rl-page > section { margin-block: 48px; }
.rl-page > .rl-head + section { margin-top: 32px; }

/* Page head = graph-paper band */
.rl-page > .rl-head {
  max-width: none; position: relative; margin: 0;
  padding: 56px max(24px, calc((100% - 1152px) / 2)) 48px;
  border-bottom: 1px solid var(--mist);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(213,217,232,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(213,217,232,.42) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center top;
}
@media (max-width: 640px) { .rl-page > .rl-head { padding: 40px 16px 32px; } }
.rl-page > .rl-head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.rl-page > .rl-head > * { position: relative; z-index: 1; }
.rl-head h1, .rl-page h1 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.04; letter-spacing: -.021em; font-weight: 600; color: var(--obsidian); margin: 0 0 16px; max-width: 22ch; }
.rl-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 2; letter-spacing: 2px; text-transform: uppercase; color: var(--pewter); margin: 0 0 12px; }
.rl-eyebrow a { color: var(--pewter); }
.rl-eyebrow a:hover { color: var(--ink); }
.rl-lede { font-size: 18px; line-height: 1.56; color: var(--graphite); max-width: 62ch; margin: 0 0 16px; }
.rl-page h2 { font-size: 22px; line-height: 1.43; letter-spacing: -.012em; font-weight: 600; color: var(--obsidian); margin: 0 0 16px; }
.rl-page h3 { font-size: 17px; font-weight: 600; color: var(--obsidian); margin: 24px 0 10px; }
.rl-sub { font-weight: 400; color: var(--pewter); font-size: 16px; letter-spacing: 0; }
.rl-note { color: var(--pewter); font-size: 14px; max-width: 72ch; }
.rl-page > .rl-disclaimer { display: none; } /* the footer carries it */

.rl-facts { gap: 12px 40px; margin: 24px 0 8px; }
.rl-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; color: var(--pewter); }
.rl-facts dd { font-size: 18px; color: var(--obsidian); }

/* Buttons */
.rl-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 15px/1.2 var(--sans); padding: 12px 24px; border-radius: 56px; border: 1px solid transparent; background: var(--lime); color: var(--obsidian) !important; box-shadow: var(--sh-btn); text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.rl-button:hover { filter: none; box-shadow: var(--sh-btn), rgba(191,255,90,.45) 0 6px 18px -4px; }
.rl-button.rl-button-quiet { background: var(--paper); color: var(--ink) !important; border-color: var(--slate); box-shadow: none; }
.rl-button.rl-button-quiet:hover { border-color: var(--ink); box-shadow: none; }
.rl-page p > .rl-button + .rl-button { margin-left: 8px; }

/* Forms and calculator panel */
.rl-calc-hw, .rl-mygpu-form, .rl-compare-form { padding: 20px 24px; border: 0; border-radius: 24px; background: var(--paper); box-shadow: var(--sh-card); }
.rl-field { gap: 6px; }
.rl-field label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pewter); }
.rl-field select, .rl-field input[type="search"], .rl-search-form input[type="search"] { font: 15px/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--slate); border-radius: 14px; padding: 11px 14px; }
.rl-check label { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rl-chip { font: 500 14px var(--sans); padding: 8px 16px; border-radius: 44px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.rl-chip:hover { background: var(--carbon); color: var(--paper); }
.rl-chip.rl-chip-quiet { border-color: var(--slate); color: var(--pewter); }
.rl-search-form { max-width: 720px; gap: 10px; margin-top: 16px; }

/* Tabs as pills */
.rl-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 0; border-radius: 9999px; background: var(--paper); box-shadow: rgba(29,33,48,.08) 0 0 0 1px, rgba(29,33,48,.04) 0 2px 2px -1px; margin: 20px 0 12px; }
.rl-tabs a, .rl-tabs button { font: 500 14px/1 var(--sans); padding: 10px 18px; margin: 0; border: 0; border-radius: 44px; color: var(--ink); }
.rl-tabs [aria-current="page"], .rl-tabs [aria-selected="true"] { background: var(--carbon); color: var(--paper); border: 0; }

/* Tables (shared rules with the mockup already style .rl-table) */
.rl-table-wrap { border: 0; border-radius: 24px; box-shadow: var(--sh-card); }
.rl-table th, .rl-table td { padding: 12px 16px; border-bottom-color: var(--mist); }
.rl-table thead th { font-size: 11px; letter-spacing: 1.4px; }
.rl-compare-table td.rl-win { background: var(--mint-tint); color: var(--forest); }
.rl-compare-table tbody th { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ink); background: transparent; }
.rl-row-best > * { background: #f4fbe9 !important; }
.rl-measured { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--forest); }

/* Grades (mockup set wins over the plugin's colors) */
.rl-grade { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }

/* Verdicts, ranked lists, results, tiles */
.rl-verdict { gap: 16px; padding: 20px 24px; border: 0; border-radius: 24px; background: var(--paper); box-shadow: var(--sh-card); max-width: 780px; }
.rl-verdict .rl-grade { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
.rl-verdict-title { font-weight: 600; font-size: 22px; letter-spacing: -.012em; color: var(--obsidian); margin-bottom: 4px !important; }
.rl-ranked { gap: 10px; }
.rl-ranked li { gap: 4px 12px; padding: 10px 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--sh-card); }
.rl-ranked li a { font-weight: 600; }
.rl-ai-answer { margin-top: 32px !important; }
.rl-ai-answer .rl-verdict { box-shadow: var(--sh-card), rgba(70,216,255,.10) 0 10px 10px -5px, rgba(70,216,255,.10) 0 24px 24px -8px; position: relative; }
.rl-ai-answer .rl-ranked li { box-shadow: none; background: var(--head-fill); }
.rl-search-list { gap: 10px; }
.rl-search-list li { padding: 14px 18px; border-radius: 14px; background: var(--paper); box-shadow: var(--sh-card); gap: 2px 12px; }
.rl-search-kind { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; }
.rl-tiles { gap: 16px; margin-block: 24px; }
.rl-tile { padding: 22px 24px; border: 0; border-radius: 24px; background: var(--paper); box-shadow: var(--sh-feature), rgba(70,216,255,.08) 0 10px 10px -5px, rgba(70,216,255,.08) 0 24px 24px -8px; }
a.rl-tile:hover { border: 0; box-shadow: var(--sh-feature), var(--sh-lift); text-decoration: none; }
.rl-tile-num { font-size: 40px; letter-spacing: -.03em; line-height: 1; color: var(--obsidian); }
.rl-tile-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; }
.rl-tile-title { font-weight: 600; font-size: 17px; }
.rl-inline-list { gap: 8px; }
.rl-inline-list li { padding: 6px 14px; border-radius: 9999px; background: var(--head-fill); font-size: 14px; }
pre.rl-code, .rl-page pre { background: var(--carbon); color: #e8eaf2; border-radius: 14px; padding: 16px 20px; overflow-x: auto; }
.rl-page pre code { color: inherit; font-family: var(--mono); font-size: 13px; }

/* Calculator on the home page sits on plain paper */
#calculator .rl-calc { margin-top: 8px; }

/* Fixes after review */
.header-search input[type="search"] { padding: 9px 14px 9px 36px; border-radius: 9999px; font-size: 14px; }
.center > p, .center > .eyebrow { margin-inline: auto; }
.rl-button { max-width: 100%; white-space: normal; text-align: center; }
.rl-page p > .rl-button { margin-block: 4px; }
@media (max-width: 640px) { .rl-page p > .rl-button + .rl-button { margin-left: 0; } }

/* Product images and logos (RunLocal 0.6) */
.rl-table thead th.rl-th-product a { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cobalt); }
.rl-hw { box-shadow: inset 0 0 0 1px var(--mist); }
.rl-hw-lg { box-shadow: var(--sh-card); border-radius: 24px; background: linear-gradient(180deg, #fff, var(--head-fill)); }
.rl-spec-body h1 { max-width: 20ch; }
.rl-tile > .rl-hw { align-self: flex-start; }
.rl-ranked li > .rl-hw-xs { margin-right: 2px; }

/* =====================================================================
   Light / dark switch
   ===================================================================== */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 9999px; border: 1px solid var(--slate); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-btn .icon-sun { display: block; }
[data-theme="dark"] .theme-btn .icon-moon { display: none; }
/* Room for the switch: tighten the header step by step as the window narrows */
@media (min-width: 1101px) {
  .header-row { gap: 12px; }
  .logo small { display: none; }
  .header-search input[type="search"] { width: 140px; }
  .nav-pill a { padding-inline: 11px; }
}
@media (max-width: 1300px) and (min-width: 1101px) { .header-tools .btn-lime { display: none; } }
@media (max-width: 430px) {
  .header-row { gap: 8px; }
  .header-tools { gap: 6px; }
  .header-search input[type="search"] { width: 104px; padding-right: 8px; }
  .theme-btn, .menu-btn { width: 40px !important; height: 40px !important; }
}
.theme-switching, .theme-switching * { transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0e15;
  --ink: #e4e7ef;
  --carbon: #e9ecf3;
  --obsidian: #f5f6fa;
  --mist: #1f2431;
  --slate: #2e3446;
  --pewter: #9097a7;
  --graphite: #b7bcc8;
  --head-fill: #141824;
  --mint-tint: #0f3426;
  --forest: #7ce3b1;
  --cobalt: #78a6ff;
  --ok-fg: #7ce3b1; --ok-bg: #10301f;
  --warn-fg: #f1c66d; --warn-bg: #352810;
  --bad-fg: #f49b8b; --bad-bg: #3a1b16;
  --sh-lift: rgba(0,0,0,.25) 0 6px 12px -4px, rgba(0,0,0,.25) 0 18px 28px -12px;
  --sh-btn: rgba(255,255,255,.55) 0 1px 0 0 inset, rgba(0,0,0,.18) 0 -2px 0 0 inset, rgba(0,0,0,.3) 0 2px 6px -2px;
  --sh-card: #1f2431 0 0 0 1px, rgba(0,0,0,.35) 0 2px 4px -2px, rgba(0,0,0,.25) 0 8px 16px -8px;
  --sh-feature: #232939 0 0 0 1px, rgba(0,0,0,.35) 0 4px 10px -4px;
}
[data-theme="dark"] .site-header { background: rgba(11,14,21,.84); }
[data-theme="dark"] .grid-paper,
[data-theme="dark"] .rl-page > .rl-head { background-image: linear-gradient(rgba(120,132,170,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(120,132,170,.10) 1px, transparent 1px); }
[data-theme="dark"] .nav-pill,
[data-theme="dark"] .rl-tabs,
[data-theme="dark"] .pills { box-shadow: 0 0 0 1px var(--mist); background: #10131c; }
[data-theme="dark"] .nav-pill a:hover { background: var(--head-fill); }
[data-theme="dark"] .nav-pill a[aria-current="page"],
[data-theme="dark"] .mobile-nav a[aria-current="page"],
[data-theme="dark"] .rl-tabs button[aria-selected="true"],
[data-theme="dark"] .rl-tabs [aria-current="page"],
[data-theme="dark"] .pills a[aria-current="page"] { background: var(--carbon); color: #0b0e15; }
/* Lime buttons keep dark text */
[data-theme="dark"] .btn-lime,
[data-theme="dark"] .rl-button:not(.rl-button-quiet) { color: #0a0d16 !important; }
[data-theme="dark"] .rl-button.rl-button-quiet { background: transparent; }
/* The dark band stays darker than the page */
[data-theme="dark"] .band { background: #05070c; border-block: 1px solid var(--mist); }
[data-theme="dark"] .on-dark,
[data-theme="dark"] .step h3 { color: #f5f6fa; }
[data-theme="dark"] .amber-card,
[data-theme="dark"] .amber-attr a { color: #0a0d16; }
[data-theme="dark"] .code,
[data-theme="dark"] pre.rl-code,
[data-theme="dark"] .rl-page pre { background: #05070c; color: #e4e7ef; box-shadow: 0 0 0 1px var(--mist); }
/* Tables */
[data-theme="dark"] .rl-table thead th { background: var(--head-fill); }
[data-theme="dark"] .rl-table tbody tr:hover > * { background: #121622; }
[data-theme="dark"] .row-best > *,
[data-theme="dark"] .rl-row-best > *,
[data-theme="dark"] .rl-row-highlight > * { background: #132017 !important; }
[data-theme="dark"] th.rl-filtered .rl-filter-btn { color: #0b0e15; }
/* Grades */
[data-theme="dark"] .rl-grade-s { background: var(--forest); color: #062016; }
[data-theme="dark"] .rl-grade-a { background: var(--carbon); color: #0b0e15; }
[data-theme="dark"] .rl-grade-b { background: #8e95a6; color: #0b0e15; }
[data-theme="dark"] .rl-grade-c { box-shadow: inset 0 0 0 1px #5a4718; }
[data-theme="dark"] .rl-grade-d { box-shadow: inset 0 0 0 1px #5e2c24; }
[data-theme="dark"] .rl-grade-f { background: #1c2130; }
[data-theme="dark"] .rl-bar-offload > span, [data-theme="dark"] .rl-bar-heavy_offload > span { background: #e0b04f; }
[data-theme="dark"] .rl-bar-no_fit > span { background: #e7786a; }
/* Chips and controls */
[data-theme="dark"] .chip:hover, [data-theme="dark"] .rl-chip:hover { color: #0b0e15; }
[data-theme="dark"] .skip-link, [data-theme="dark"] .pager .page-numbers.current { color: #0b0e15; }
[data-theme="dark"] .rl-check input { accent-color: var(--lime); }
/* Product images and logos */
[data-theme="dark"] .rl-hw { background: linear-gradient(180deg, #e6e9f0, #d6dae4); box-shadow: inset 0 0 0 1px #2a3041; } /* products sit on a soft light panel, like photos */
[data-theme="dark"] .rl-hw-lg { background: linear-gradient(180deg, #e9ecf2, #d8dce6); box-shadow: var(--sh-card); }
[data-theme="dark"] .rl-hw-photo { background: #f4f5f8; } /* photos are shot on white */
[data-theme="dark"] .rl-logo:has(use[href$="#apple"]) { color: #f2f3f7; }
[data-theme="dark"] .rl-hw-badge { background: #fcfcfd; box-shadow: 0 0 0 1px #d5d9e8; }
[data-theme="dark"] .rl-hw-badge .rl-logo:has(use[href$="#apple"]) { color: #000; }
[data-theme="dark"] .feature-icon { background: #121621; }
[data-theme="dark"] .rl-ai-answer .rl-verdict { box-shadow: var(--sh-card), rgba(70,216,255,.08) 0 10px 18px -8px; }
[data-theme="dark"] ::selection { background: rgba(120,166,255,.35); }
@media (prefers-reduced-motion: reduce) { .theme-switching, .theme-switching * { transition: none !important; } }
@media (max-width: 380px) { .header-search input[type="search"] { width: 84px; } .logo { gap: 8px; font-size: 18px; } }

/* Products (RunLocal 0.7) */
.rl-head .rl-tabs { margin: 0 0 20px; }
.rl-product-list li { border: 0; border-radius: 14px; box-shadow: var(--sh-card); background: var(--paper); }
.rl-product-list li:hover { box-shadow: var(--sh-card), var(--sh-lift); }
.rl-jump a { color: var(--graphite); font-size: 14px; }
.rl-jump a:hover { color: var(--cobalt); }
.rl-actions .rl-button { margin: 0 !important; }
.rl-sources h2 { font-size: 15px !important; color: var(--pewter) !important; font-family: var(--mono); letter-spacing: 1.4px; text-transform: uppercase; }
[data-theme="dark"] .rl-logo-darkmark { color: #f2f3f7; }
[data-theme="dark"] .rl-hw-badge .rl-logo-darkmark { color: #000; }