/* Tooling Around 2026 visual system
 * The newsroom's signal language, adapted for the rest of the product. */

:root {
  --paper: #eceae3;
  --card: #f8f7f2;
  --ink: #0b0c0f;
  --muted: #6f727a;
  --line: rgba(11,12,15,.13);
  --accent: #dfff47;
  --signal: #00e87a;
  --surface: #16181d;
  --surface-2: #20232a;
  --soft-white: #f6f5ef;
  --radius-xl: 30px;
  --radius-lg: 20px;
  --radius-md: 13px;
  --shadow: 0 18px 50px rgba(11,12,15,.09);
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ── Shared shell ───────────────────────────────────────────────────── */
.site-header {
  background: rgba(11,12,15,.97); border-bottom: 2px solid var(--signal);
  backdrop-filter: blur(18px); box-shadow: 0 10px 30px rgba(11,12,15,.12);
  /* Backstop for the breakpoints below: a row that outgrows its box is clipped
     rather than allowed to widen the document and give every page a horizontal
     scrollbar. Clip on one axis only, so the account dropdown still hangs
     below the header. */
  overflow-x: clip;
}
.site-header .inner { max-width: 1488px; height: 72px; gap: 24px; padding-left: 34px; padding-right: 34px; }
.brand { gap: 11px; }
.brand-icon { width: 34px; height: 34px; }
.brand-name { font-size: 22px; letter-spacing: -.035em; }
.site-nav { gap: 5px; }
.site-nav a {
  padding: 8px 11px; border-radius: 7px; color: #aaaeb6;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase;
}
.site-nav a:hover { background: rgba(255,255,255,.06); color: var(--soft-white); }
.header-search {
  min-width: 230px; padding: 9px 12px; border-color: rgba(255,255,255,.11);
  border-radius: 9px; background: #202228;
}
.header-search:hover { border-color: rgba(223,255,71,.5); }
.header-search-placeholder { font-size: 12px; }
.locale-nav a { border: 1px solid transparent; }
.locale-nav a.active { border-color: rgba(223,255,71,.22); background: rgba(223,255,71,.07); color: var(--accent); }
.site-header .user-nav-link { color: #aeb0b6; }
.site-header .user-nav-link:hover { color: var(--soft-white); }
.site-header .user-nav-btn {
  padding: 8px 13px; border: 1px solid var(--accent); border-radius: 8px;
  background: transparent; color: var(--accent);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.site-header .user-nav-btn:hover { background: var(--accent); color: var(--ink); opacity: 1; }

main:not(.news-page) { max-width: 1280px; padding: 32px 24px 112px; }
.crumbs {
  display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: #74777e;
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.crumbs a { color: var(--ink); }
.crumbs a:hover { box-shadow: none; color: #3d6e00; }

.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: clamp(36px, 4vw, 54px); font-weight: 900; letter-spacing: -.055em; }
.section-more {
  padding: 8px 12px; border: 1px solid var(--ink); border-radius: 8px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.section-more:hover { background: var(--ink); color: var(--accent); }
.lift { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease; }
.lift:hover { transform: translateY(-5px); border-color: rgba(11,12,15,.32) !important; box-shadow: var(--shadow); }

/* Reserved ad inventory stays visible without competing with content. */
.home-ad-wrap { max-width: 1280px; margin: 0 auto 52px; padding: 0; }
.home-ad-wrap .ph-leader { height: 72px; }
.home-ad-inline { padding-top: 20px; }
.home-ad-inline .ad-slot { padding: 0; }
[data-ad-placeholder] {
  border: 1px dashed rgba(11,12,15,.16); border-radius: 12px;
  background: rgba(255,255,255,.24); background-image: none;
}
[data-ad-placeholder]::before, .ad-label { color: #9c9a92; }
[data-ad-placeholder] .ph-inner-title { color: #9c9a92; }
[data-ad-placeholder] .ph-inner-sub { color: #b3b0a8; }

/* ── Homepage ───────────────────────────────────────────────────────── */
.home-hero {
  padding: 18px 24px 28px; border: 0; background: var(--ink); color: var(--ink);
}
.home-hero .wrap {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1280px;
  padding: 30px 50px 24px; border-radius: 28px; background: var(--accent);
}
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .62fr); gap: 34px; align-items: stretch; }
.home-hero-main { min-width: 0; }
.home-hero .hero-eyebrow {
  display: inline-flex; margin-bottom: 14px; padding: 6px 11px; border-radius: 999px;
  background: var(--ink); color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .13em;
}
.home-hero h1 {
  max-width: 15ch; margin-bottom: 14px; color: var(--ink);
  font-size: clamp(40px, 4.4vw, 62px); line-height: .92; letter-spacing: -.055em;
}
.home-hero p { max-width: 590px; margin-bottom: 16px; color: rgba(11,12,15,.72); font-size: 15px; font-weight: 500; }
.home-hero .hero-search {
  max-width: 650px; min-height: 48px; border: 0; border-radius: 11px; background: var(--ink);
  box-shadow: 7px 7px 0 rgba(11,12,15,.14);
}
.home-hero .hero-search input { padding: 12px 18px; color: var(--soft-white); font-size: 15px; }
.home-hero .hero-search input::placeholder { color: #858890; }
.home-hero .hero-search button {
  border: 0; border-left: 1px solid rgba(255,255,255,.12); background: var(--ink); color: var(--accent);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px; letter-spacing: .1em;
}
.home-hero .hero-search button:hover { background: #22252a; }
.hero-brief {
  display: flex; flex-direction: column; min-height: 100%; padding: 18px 20px;
  border-radius: 20px; background: var(--ink); color: var(--soft-white);
  box-shadow: 9px 9px 0 rgba(11,12,15,.14);
}
.hero-brief-head {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.1); color: #898c94;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.hero-brief-live { color: var(--accent); }
.hero-brief-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: auto 0 16px; }
.hero-brief-stat { min-width: 0; }
.hero-brief-stat strong {
  display: block; color: var(--accent); font-family: 'Archivo', sans-serif;
  font-size: clamp(34px, 3vw, 46px); line-height: .9; letter-spacing: -.06em;
}
.hero-brief-stat span {
  display: block; max-width: 10ch; margin-top: 7px; color: #8f9299;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 8px; line-height: 1.35;
  letter-spacing: .08em; text-transform: uppercase;
}
.home-hero .hero-brief-copy {
  margin: 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1);
  color: #b4b6bc; font-size: 12px; line-height: 1.5;
}
.home-hero .hero-chips {
  flex-wrap: nowrap; max-width: none; margin-top: 16px; gap: 7px; overflow-x: auto;
  padding-bottom: 2px; scrollbar-width: none;
}
.home-hero .hero-chips::-webkit-scrollbar { display: none; }
.home-hero .hero-chips-label { flex: 0 0 auto; color: rgba(11,12,15,.5); font-size: 9px; font-weight: 700; }
.home-hero .hero-chip {
  flex: 0 0 auto; white-space: nowrap; border-color: rgba(11,12,15,.2);
  background: rgba(255,255,255,.23); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px; font-weight: 600;
}
.home-hero .hero-chip:hover { border-color: var(--ink); background: var(--ink); color: var(--accent); }

.home-sections { max-width: 1280px; padding: 30px 24px 84px; }
.home-section { margin-bottom: 40px; padding-top: 0; }
.home-section--tight { margin-bottom: 30px; }
.home-sections .section-head { margin-bottom: 14px; }
.home-sections .section-head h2 { font-size: clamp(30px, 3vw, 38px); }
.section-note {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

/* Categories are a dense text index, not a picture gallery.
   The photos here were borrowed from whichever model in the category happened to
   have one, so the angle-grinder card showed a battery pack and the chainsaw
   card a Bosch in Makita blue — a browse aid that misinformed. Eighteen tiles
   now cost about a fifth of the height, which is what pulls the news strip and
   the article grid into the first screen. */
.cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cat-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* A fixed floor keeps the row with "Random orbital sanders" the same height as
     the row of one-word names, so the grid reads as a grid. */
  min-height: 52px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  color: var(--ink); text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cat-tile-name {
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15;
}
.cat-tile-go { font-size: 14px; color: var(--muted); transition: transform .18s ease, color .18s ease; }
.cat-tile:hover { border-color: var(--ink); background: var(--ink); color: var(--soft-white); transform: translateY(-2px); }
.cat-tile:hover .cat-tile-go { color: var(--accent); transform: translateX(3px); }
.cat-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.news-strip { overflow: hidden; border: 0; border-radius: 24px; background: var(--surface); color: var(--soft-white); }
.news-strip-head { padding: 15px 20px; background: var(--ink); }
.news-strip-dot { background: var(--accent); }
.news-strip-title { color: var(--soft-white); }
.news-strip-all { color: var(--accent); }
.news-row { grid-template-columns: 100px 1fr 140px; padding: 13px 20px; border-color: rgba(255,255,255,.08); color: #d7d8d4; }
.news-row:hover { background: var(--surface-2); }
.news-date, .news-row .news-source { color: #7f828b; }

.article-grid { gap: 16px; }
.article-grid--home { grid-template-columns: repeat(3, 1fr); }
.article-card {
  min-height: 360px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px;
  background: var(--surface); color: var(--soft-white);
}
.article-card-img {
  height: 92px; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--ink); background-image: none;
}
.article-type-badge { border-radius: 6px; background: var(--accent); font-size: 9px; font-weight: 700; }
.article-card-body { padding: 22px; }
.article-card-title { color: var(--soft-white); font-size: 22px; line-height: 1.08; letter-spacing: -.035em; }
.article-card-dek { color: #a0a3aa; }
.article-card-meta { color: #73767e; font-size: 10px; }
.article-card-score { top: 16px; right: 16px; border-radius: 8px; background: var(--accent); color: var(--ink); }

.h2h {
  position: relative; overflow: hidden; padding: 48px; border-radius: 28px;
  background: var(--accent); color: var(--ink);
}
.h2h-eyebrow { color: rgba(11,12,15,.55); }
.h2h h2 { max-width: 13ch; color: var(--ink); font-size: clamp(36px, 4vw, 58px); letter-spacing: -.055em; }
.h2h p { color: rgba(11,12,15,.68); }
.h2h-btn { border-radius: 8px; background: var(--ink); color: var(--accent); }
.h2h-tool { border-color: var(--ink); border-radius: 17px; background: rgba(255,255,255,.22); }
/* A tile holding a photo becomes the same white chip the brand cards use: the
   product shots are lit for white, and on the band's lime they otherwise read
   as a cut-out. `contain` because these are two different drills shot at two
   different scales, and cropping either to fill would misstate its proportions
   on a page about comparing them. */
.h2h-tool--photo {
  padding: 10px; background: #fff;
  align-items: center; justify-content: center;
}
.h2h-tool--photo img { width: 100%; height: 100%; object-fit: contain; }
.h2h-vs { color: var(--ink); }

/* ── Catalogue & filters ────────────────────────────────────────────── */
.browse-page { padding-bottom: 140px !important; }
.browse-page .browse-head {
  gap: 14px; margin-bottom: 22px; padding: 30px 32px; border-radius: 24px;
  background: var(--ink); color: var(--soft-white);
}
.browse-page .browse-head h1 {
  color: var(--soft-white); font-size: clamp(44px, 5vw, 68px); letter-spacing: -.06em;
}
.browse-page .browse-meta { color: #888b93; font-size: 10px; letter-spacing: .08em; }
.browse-page .browse-sort-label { color: #83868f; font-size: 9px; letter-spacing: .09em; }
.browse-page .browse-sort-label select {
  min-width: 150px; border-color: rgba(255,255,255,.14); border-radius: 8px;
  background: var(--surface-2); color: var(--soft-white); font-size: 13px;
}
.browse-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 18px; }
.sidebar {
  top: 94px; overflow: hidden; padding: 22px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; background: var(--surface); color: var(--soft-white);
}
.sidebar-title { color: var(--accent); font-size: 10px; letter-spacing: .13em; }
.filter-group { padding: 17px 0; border-color: rgba(255,255,255,.09); }
.filter-group-label { color: #777a83; font-size: 9px; letter-spacing: .12em; }
.filter-check { color: #d3d4d0; font-size: 13px; }
.filter-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.sidebar [data-ad-placeholder] { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.sidebar .ad-label { color: #60636b; }
.sidebar-filter-details > summary { display: none; }
.sidebar-filter-details > summary::-webkit-details-marker { display: none; }
.sidebar-filter-hint { color: #757983; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.browse-page .tool-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: tools; gap: 14px;
}
.browse-page .tool-list:has(> .tool-card:first-child:last-child) { grid-template-columns: minmax(0, 1fr); }
.browse-page .tool-list:has(> .tool-card:nth-child(2):last-child),
.browse-page .tool-list:has(> .tool-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.browse-page .tool-card {
  counter-increment: tools; position: relative; display: grid; grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto 1fr auto; min-width: 0; min-height: 370px; padding: 12px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.browse-page .tool-card:hover { transform: translateY(-4px); border-color: rgba(11,12,15,.32); box-shadow: var(--shadow); }
.browse-page .tool-card:has(.cmp:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--accent), var(--shadow); }
.browse-page .tool-card::before {
  content: counter(tools, decimal-leading-zero); position: absolute; z-index: 2; top: 22px; left: 22px;
  padding: 6px 8px; border-radius: 7px; background: var(--ink); color: var(--accent);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .08em;
}
.browse-page .tool-card-cmp {
  position: absolute; z-index: 3; top: 19px; right: 19px; display: inline-flex;
  flex-direction: row; gap: 7px; padding: 7px 9px; border: 1px solid rgba(11,12,15,.13);
  border-radius: 8px; background: rgba(248,247,242,.92); backdrop-filter: blur(8px);
}
.browse-page .tool-card-cmp input { width: 16px; height: 16px; accent-color: var(--ink); }
.browse-page .tool-card-cmp-lbl { color: #62656c; font-size: 8px; font-weight: 700; }
.browse-page .tool-card-img {
  grid-column: 1; grid-row: 1; width: 100%; height: 176px; margin: 0; padding: 0;
  border: 0; border-radius: 13px; background: #fff;
}
.browse-page .tool-card-img img { padding: 19px; transition: transform .2s ease; }
.browse-page .tool-card:hover .tool-card-img img { transform: scale(1.06) rotate(-1deg); }
.browse-page .tool-card-info { grid-column: 1; grid-row: 2; align-self: stretch; padding: 18px 8px 13px; }
.browse-page .tool-card-brand-row { margin-bottom: 3px; }
.browse-page .tool-card-brand {
  color: var(--ink); font-family: 'Archivo', sans-serif; font-size: 22px;
  font-weight: 900; letter-spacing: -.035em; line-height: 1; text-transform: uppercase;
}
.browse-page .tool-card-name {
  margin: 4px 0 17px; color: #686b72; font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .045em;
}
.browse-page .tool-card-specs {
  display: grid; grid-template-columns: 1fr; gap: 4px; padding-top: 13px;
  border-top: 1px solid var(--line); color: var(--muted);
}
.browse-page .tool-card-spec-label {
  color: #92949a; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 8px;
  font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
}
.browse-page .tool-card-spec-value {
  color: var(--ink); font-family: 'Archivo', sans-serif; font-size: 15px;
  font-weight: 700; letter-spacing: -.015em;
}
.browse-page .tool-card-right {
  grid-column: 1; grid-row: 3; align-self: end; flex-direction: row;
  align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 8px; text-align: left;
}
.browse-page .tool-card-price { font-family: 'Archivo', sans-serif; font-size: 22px; letter-spacing: -.035em; }
.browse-page .tool-card-btn {
  margin-left: auto; padding: 10px 12px; border-radius: 9px; background: var(--ink);
  color: var(--accent); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px; letter-spacing: .04em;
}
.browse-page .tool-card-btn:hover { background: var(--accent); color: var(--ink); }

#cmpbar { border-top: 1px solid rgba(223,255,71,.3); background: rgba(11,12,15,.97); backdrop-filter: blur(18px); }
#cmpbar .inner { max-width: 1280px; height: 76px; }
.cmpbar-count, .cmpbar-names { color: #a7aab1; }
.cmpbar-count b { color: var(--accent); }
#cmpclear { color: #8a8d95; }
.cmpbar-go { border-radius: 9px; background: var(--accent); color: var(--ink); }

/* ── Tool detail ────────────────────────────────────────────────────── */
.model-mobile-heading { display: none; }
.model-page .model-layout { grid-template-columns: minmax(360px, .82fr) minmax(0, 1.45fr); gap: 46px; }
.model-page .model-sticky { top: 96px; }
.model-page .model-gallery {
  min-height: 390px; border: 1px solid var(--line); border-radius: 24px; background: #fff;
  box-shadow: var(--shadow);
}
.model-page .model-gallery--photo img { max-height: 360px; padding: 26px; transition: transform .28s ease; }
.model-page .model-gallery:hover img { transform: scale(1.035) rotate(-.6deg); }
.model-page .model-buy-box {
  margin-top: 16px; padding: 25px; border: 0; border-radius: 20px; background: var(--accent); color: var(--ink);
}
.model-page .model-buy-eyebrow { color: rgba(11,12,15,.55); font-size: 9px; }
.model-page .model-buy-price { color: var(--ink); font-size: 40px; letter-spacing: -.055em; }
.model-page .model-buy-btn { border-radius: 10px; background: var(--ink); color: var(--accent); }
.model-page .model-buy-note { border-color: rgba(11,12,15,.18); color: rgba(11,12,15,.55); }
.model-page .model-brand-row { margin-top: 8px; }
.model-page .model-brand { color: #555960; font-size: 10px; letter-spacing: .13em; }
.model-page .model-parent { border-left-color: var(--line); color: #96989d; }
.model-page .model-name {
  max-width: 13ch; margin: 10px 0 23px; font-size: clamp(48px, 5.5vw, 76px);
  line-height: .94; letter-spacing: -.065em;
}
.model-page .model-score-badge { margin-bottom: 24px; }
.model-page .model-score-num { padding: 7px 11px; border-radius: 8px; background: var(--ink); color: var(--accent); }
.model-page .model-score-label { font-size: 9px; letter-spacing: .1em; }
.model-page .model-verdict {
  padding: 30px; border-radius: 24px; background: var(--surface); box-shadow: 12px 12px 0 rgba(11,12,15,.08);
}
.model-page .model-verdict-eyebrow { color: var(--accent); font-size: 9px; }
.model-page .model-verdict-text { color: #d9dad7; font-size: 16px; }
.model-page .model-verdict-proscons { border-top: 1px solid rgba(255,255,255,.09); padding-top: 20px; }
.model-page .model-section-head { margin: 34px 0 14px; font-size: 28px; letter-spacing: -.035em; }
.model-page .model-specs-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.model-page .model-spec-row { padding: 15px 19px; }
.model-page .model-spec-k { color: #777a81; font-size: 9px; letter-spacing: .09em; }
.model-page .model-spec-v { font-size: 15px; }
.model-page .model-note { border-left-color: var(--accent); background: rgba(223,255,71,.22); }
.model-page .vote-bar {
  border-color: rgba(255,255,255,.1); border-radius: 15px; background: var(--surface); color: var(--soft-white);
}
.model-page .vote-score-label, .model-page .vote-hint { color: #a0a3aa; }
.model-page .vote-hint a { color: var(--accent); }
.model-page .vote-btn { border-color: rgba(255,255,255,.14); background: var(--surface-2); color: #d7d8d4; }
.model-page .subscribe-box { padding: 18px; border-radius: 15px; background: var(--card); }
.model-page .btn-secondary { border-color: var(--ink); background: var(--ink); color: var(--accent); }

.comments-section, .comments-inner { max-width: 820px; }
.comments-title { font-size: 34px; letter-spacing: -.04em; }
.comment { border-radius: 15px; background: var(--card); }

/* ── Comparisons ────────────────────────────────────────────────────── */
.compare-page .compare-title {
  margin: 0 0 8px; font-size: clamp(48px, 6vw, 76px); font-weight: 900;
  line-height: .94; letter-spacing: -.065em;
}
.compare-page .compare-meta {
  display: flex; justify-content: space-between; gap: 18px; margin: 0 0 26px;
  color: var(--muted); font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
}
.compare-swipe { display: none; color: var(--ink); }
.compare-wrap { overflow: auto; border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.compare-table { border-collapse: separate; border-spacing: 0; background: var(--card); }
.compare-table thead th { padding: 20px; border-color: rgba(255,255,255,.1); background: var(--surface); }
.compare-table thead th:first-child { background: var(--ink); }
.col-photo { height: 140px; border: 0; border-radius: 14px; background: #fff; }
.col-photo img { padding: 13px; transition: transform .2s ease; }
.col-photo:hover img { transform: scale(1.06); }
.col-brand { margin-top: 14px; color: var(--accent); font-size: 9px; letter-spacing: .12em; }
.col-name { color: var(--soft-white); font-size: 18px; }
.col-price { border-radius: 7px; background: var(--accent); color: var(--ink); }
.compare-table tbody td { padding: 16px 18px; border-color: var(--line); }
.compare-table tbody td:first-child { background: #e3e1da; color: #6f7278; font-size: 9px; letter-spacing: .09em; }
.compare-table tbody tr:hover td:not(:first-child) { background: rgba(223,255,71,.13); }
.compare-cta { border-radius: 9px; background: var(--ink); color: var(--accent); }
.back-btn { border-radius: 10px; background: transparent; }

/* ── Brands and discovery hubs ──────────────────────────────────────── */
.articles-head {
  position: relative; overflow: hidden; margin-bottom: 26px; padding: 44px 48px;
  border-radius: 28px; background: var(--ink); color: var(--soft-white);
}
.articles-head h1 {
  position: relative; z-index: 1; margin-bottom: 14px; color: var(--soft-white);
  font-size: clamp(50px, 6vw, 78px); letter-spacing: -.065em;
}
.articles-dek { position: relative; z-index: 1; max-width: 620px; color: #9da0a8; font-size: 16px; }
.brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.brand-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: 0; padding: 16px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; background: var(--surface); color: var(--soft-white);
}
/* Every mark sits on the same white chip. The cards are dark and the logos are
   not consistent about it — Bosch's red reads fine, Metabo's dark green and
   Einhell's black would disappear — so the chip normalises them instead of the
   grid looking half-broken. It also gives the wordmark fallback the same
   footprint as a logo, so a brand we hold no file for does not read as missing. */
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  height: 78px; padding: 14px 18px; border-radius: 13px; background: #fff;
}
.brand-mark img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.brand-wordmark {
  font-family: 'Archivo', sans-serif; font-size: 23px; font-weight: 900;
  letter-spacing: -.04em; line-height: 1;
  color: var(--brand-ink, var(--ink)); text-align: center;
}
.brand-card-meta { display: flex; flex-direction: column; gap: 3px; }
.brand-card-count { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 700; color: var(--accent); }
.brand-card-parent { color: #777a82; font-size: 12.5px; }
/* A hairline of the brand's own colour, so the card carries the identity even
   at a glance and even where the mark is a wordmark. */
.brand-card::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand, transparent);
}

.news-rail {
  padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  background: var(--surface); color: var(--soft-white);
}
.news-rail-head { color: var(--accent); font-size: 9px; letter-spacing: .12em; }
.news-rail-list { gap: 0; }
.news-rail-list li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.news-rail-list a { color: #e4e5e1; }
.news-rail-meta { color: #767982; }
.news-rail-more { color: var(--accent); }
.brand-section { margin-bottom: 34px; }
.brand-section-head { margin-bottom: 13px; font-size: 26px; letter-spacing: -.03em; }
.brand-page .tool-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.brand-page .tool-card {
  min-height: 250px; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card);
}
.brand-page .tool-card-img { width: 100%; height: 180px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.brand-page .tool-card-img img { padding: 17px; }
.brand-page .tool-card-info { flex: 1; padding: 17px; }
.brand-page .tool-card-name { font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 900; }

/* ── Editorial hub and stories ───────────────────────────────────────── */
.article-tabs {
  gap: 7px; margin-bottom: 28px; padding: 8px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255,255,255,.36);
}
.article-tab { margin: 0; padding: 8px 13px; border: 0; border-radius: 8px; color: #73767d; font-size: 12px; }
.article-tab.active { border: 0; background: var(--ink); color: var(--accent); }
.article-tab:hover { background: rgba(11,12,15,.06); }
.article-tab.active:hover { background: var(--ink); }
.articles-page .article-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.article-page { max-width: 1120px !important; }
.article-page .article-crumbs { max-width: 880px; margin: 0 auto; padding: 0 0 22px; }
.article-page .article-wrap { max-width: 880px; margin: 0 auto; }
.article-header {
  margin-bottom: 22px; padding: 42px 44px; border-radius: 26px; background: var(--ink); color: var(--soft-white);
}
.article-type-pill { border: 1px solid rgba(223,255,71,.34); background: rgba(223,255,71,.09); color: var(--accent); }
.article-h1 { color: var(--soft-white); font-size: clamp(46px, 5.6vw, 72px); line-height: .96; letter-spacing: -.06em; }
.article-dek { color: #a7aab1; font-size: 18px; }
.article-byline-name { color: var(--soft-white); }
.article-byline-avatar { background: var(--accent); color: var(--ink); }
.article-byline-date, .article-byline-read, .article-byline-dot { color: #73767e; }
.article-header-rule { border-color: rgba(255,255,255,.1); }
.article-rating { border-color: rgba(255,255,255,.1); }
.article-rating-cta { color: #8f929a; }
.article-rating-cta a { color: var(--accent); }
.article-hero-img:not(.article-hero-img--real) { display: none; }
.article-hero-img--real { overflow: hidden; border-radius: 22px; box-shadow: var(--shadow); }
.article-verdict-card { border: 0; border-radius: 22px; background: var(--accent); color: var(--ink); }
.article-verdict-eyebrow { color: rgba(11,12,15,.55); }
.article-verdict-score { color: var(--ink); }
.article-verdict-text { color: rgba(11,12,15,.7); }
.article-verdict-proscons { border-color: rgba(11,12,15,.17); }
/* The prose card keeps a reading measure — 700px of card, 612px of text, about
   75 characters at 18px — while the panels above and below it run the wrap's
   full 880px. That is deliberate; what was not deliberate is where it sat.
   .article-body's 700px cap is inherited from the design this page had before
   the wrap widened to 880, when the page itself was 720px and the cap was
   invisible. With no auto margins it left 180px of dead gutter down the right
   of every article and read as a column that had come unaligned. */
.article-body {
  margin-top: 22px; margin-inline: auto; padding: 38px 44px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--card);
}
.article-body-h2 { margin-top: 38px; font-size: 30px; letter-spacing: -.035em; }
.article-body-p { color: #34363b; font-size: 17px; line-height: 1.8; }
.article-body-blockquote { border-left-color: var(--accent); background: rgba(223,255,71,.18); }
.article-filed { margin-top: 22px; }
.article-filed-tag { border-radius: 7px; background: var(--ink); color: var(--accent); }
.article-comments { padding: 0; }
.article-comment { border-color: var(--line); border-radius: 15px; background: var(--card); }

/* ── Accounts and community ─────────────────────────────────────────── */
.profile-page { max-width: none !important; padding: 0 0 96px !important; }
.profile-hero { background: var(--ink); color: var(--soft-white); }
.profile-hero-inner { max-width: 1280px; padding: 52px 24px; }
.profile-avatar { background: var(--accent); color: var(--ink); box-shadow: 10px 10px 0 rgba(223,255,71,.15); }
.profile-name { color: var(--soft-white); font-size: 42px; letter-spacing: -.045em; }
.profile-handle, .profile-bio { color: #93969e; }
.profile-tag { border-color: rgba(223,255,71,.28); background: rgba(223,255,71,.08); color: var(--accent); }
.profile-stat-n { color: var(--accent); }
.profile-stat-l { color: #6f727a; }
.profile-tabs-bar { background: var(--surface); border-color: rgba(255,255,255,.08); }
.profile-tabs-inner { max-width: 1280px; }
.profile-tab { color: #8d9098; }
.profile-tab--active { border-color: var(--accent); color: var(--soft-white); }
.profile-edit-btn { border-radius: 8px; background: var(--accent); color: var(--ink); }
.profile-content { max-width: 1280px; }
.profile-article-card, .profile-comment-card, .profile-vote-row { border-radius: 15px; background: var(--card); }

.account-page { max-width: 1000px !important; }
.account-title { font-size: 54px; letter-spacing: -.055em; }
.account-grid { gap: 16px; }
.account-section { padding: 26px; border-radius: 18px; background: var(--card); }
.account-section h2 { font-size: 23px; letter-spacing: -.03em; }
.account-banner { border: 0; border-radius: 10px; background: var(--accent); color: var(--ink); }

.auth-page {
  max-width: none !important; min-height: 680px; display: grid; place-items: center;
  padding: 64px 24px 100px !important; background: var(--ink);
}
.auth-card {
  width: min(520px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px; background: var(--surface); box-shadow: 14px 14px 0 rgba(223,255,71,.12);
}
.auth-title { color: var(--soft-white); font-size: 44px; letter-spacing: -.05em; }
.auth-label { color: #8f929a; }
.auth-input {
  border-color: rgba(255,255,255,.13); border-radius: 10px; background: var(--surface-2); color: var(--soft-white);
}
.auth-input:focus { border-color: var(--accent); }
.auth-btn { border-radius: 10px; background: var(--accent); color: var(--ink); }
.auth-switch { color: #858890; }
.auth-switch a { color: var(--accent); }

/* ── Newsletter and footer ──────────────────────────────────────────── */
.nl-strip { padding: 72px 24px; background: var(--accent); }
.nl-strip-inner { max-width: 1280px; }
.nl-strip-eyebrow { color: rgba(11,12,15,.55); }
.nl-strip-headline { max-width: 13ch; font-size: clamp(38px, 4.5vw, 58px); letter-spacing: -.055em; }
.nl-strip-toggle-btn { border-color: var(--ink); }
.nl-strip-toggle-btn--active { background: var(--ink); color: var(--accent); }
.nl-strip-input-row { border-color: var(--ink); border-radius: 11px; }
.nl-strip-submit { background: var(--ink); color: var(--accent); }
.site-footer { background: var(--ink); }
.footer-body { max-width: 1280px; padding-top: 64px; }
.footer-logo-name { font-size: 20px; }
.footer-col-head { color: var(--accent); }
.footer-col a:hover { color: var(--accent); }

/* ── Responsive system ──────────────────────────────────────────────── */

/* The header cluster sheds a piece each time the row runs out of room, so the
   thresholds sit where a piece stops fitting rather than on round device
   widths. Measured intrinsic widths of the row, signed out and signed in:
   with the search box 1299/1307, without it 983/991, without the locale
   switcher too 823/831. Each threshold below therefore lands 40-80px above the
   width its row needs, which is the margin a fallback font rendering wider
   than Archivo gets to eat into. What is left under the last one is brand +
   account, and that fits 320px. */
@media (max-width: 1360px) {
  .site-header .inner { gap: 13px; }
  .site-nav a { padding: 7px; }
  .header-search { display: none; }
}
@media (max-width: 1080px) { .locale-nav { display: none; } }
@media (max-width: 900px) { .site-nav { display: none; } }

@media (max-width: 1080px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(240px, .7fr); gap: 28px; }
  .home-hero .wrap { padding-left: 40px; padding-right: 40px; }
  .cat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .browse-layout { grid-template-columns: 240px minmax(0,1fr); }
  .browse-page .tool-list,
  .browse-page .tool-list:has(> .tool-card:first-child:last-child),
  .browse-page .tool-list:has(> .tool-card:nth-child(2):last-child),
  .browse-page .tool-list:has(> .tool-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .browse-page .tool-card { grid-template-columns: minmax(0,1fr); }
  .browse-page .tool-card-img { width: 100%; }
  .model-page .model-layout { gap: 30px; }
  .brand-page .tool-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px) {
  main:not(.news-page) { padding-left: 18px; padding-right: 18px; }
  .home-hero { padding: 14px 14px 26px; }
  .home-hero .wrap { padding: 36px 30px 28px; border-radius: 24px; }
  .home-hero-grid { grid-template-columns: 1fr; }
  .hero-brief { display: none; }
  .home-hero h1 { max-width: 11ch; font-size: clamp(52px, 10vw, 68px); }
  .home-sections { padding-left: 18px; padding-right: 18px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .article-grid--home, .articles-page .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: 300px; }
  .h2h { grid-template-columns: 1fr; gap: 36px; }
  .browse-page .browse-head { align-items: flex-end; }
  .browse-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; padding: 0; }
  .sidebar-filter-details > summary {
    display: flex; align-items: center; justify-content: space-between; padding: 20px 22px;
    color: var(--accent); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: .13em; text-transform: uppercase; cursor: pointer;
  }
  .sidebar-filter-details[open] > summary { border-bottom: 1px solid rgba(255,255,255,.09); }
  .sidebar-filter-content { padding: 0 22px 22px; }
  .sidebar-filter-content .sidebar-title { display: none; }
  .filter-group { display: grid; min-width: 0; margin-right: 0; }
  .model-mobile-heading { display: block; margin: 0 0 22px; }
  .model-mobile-heading .model-name { max-width: 14ch; margin-bottom: 0; }
  .model-info > .model-brand-row, .model-info > .model-name { display: none; }
  .model-page .model-layout { grid-template-columns: 1fr; }
  .model-page .model-sticky { position: static; }
  .brand-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .article-header, .article-body { padding: 30px; }
}
@media (max-width: 620px) {
  .site-header .inner { height: 60px; padding: 0 14px; }
  .brand-name { font-size: clamp(13px, 4.2vw, 17px); }
  .brand-icon { width: 29px; height: 29px; }
  .site-header .user-nav-link { display: none; }
  .site-header .user-nav-btn { padding: 6px 9px; }
  main:not(.news-page) { padding-top: 22px; padding-bottom: 80px; }
  .home-hero .wrap { padding: 30px 22px 24px; border-radius: 20px; }
  .home-hero h1 { font-size: clamp(46px, 13vw, 58px); }
  .home-hero p { font-size: 15px; }
  .home-hero .hero-search { display: grid; grid-template-columns: 1fr auto; box-shadow: 7px 7px 0 rgba(11,12,15,.14); }
  .home-hero .hero-search input { min-width: 0; }
  .home-hero .hero-search button { padding: 0 14px; }
  .home-hero .hero-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .home-sections { padding-top: 30px; }
  .home-section { margin-bottom: 44px; }
  .home-sections .section-head h2 { font-size: 34px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .cat-tile { padding: 12px 13px; }
  .cat-tile-name { font-size: 14px; }
  .home-ad-wrap { margin-bottom: 44px; }
  .news-row { grid-template-columns: 1fr; gap: 4px; }
  .news-row .news-source { display: none; }
  .article-grid--home { grid-template-columns: 1fr; }
  .h2h { padding: 30px 24px; border-radius: 20px; }
  .h2h-tools { flex-wrap: wrap; }
  .browse-page .browse-head { display: grid; grid-template-columns: 1fr 1fr; padding: 24px; }
  .browse-page .browse-head > div { grid-column: 1 / -1; }
  .browse-page .browse-sort-label { width: auto; }
  .browse-page .browse-sort-label select { min-width: 0; width: 100%; }
  .browse-page .tool-list,
  .browse-page .tool-list:has(> .tool-card:first-child:last-child),
  .browse-page .tool-list:has(> .tool-card:nth-child(2):last-child),
  .browse-page .tool-list:has(> .tool-card:nth-child(4):last-child) { grid-template-columns: 1fr; }
  .browse-page .tool-card {
    grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr auto;
    min-height: 340px; padding: 12px;
  }
  .browse-page .tool-card-img { grid-column: 1; grid-row: 1; align-self: stretch; width: 100%; height: 172px; }
  .browse-page .tool-card-info { grid-column: 1; grid-row: 2; align-self: stretch; padding: 17px 8px 12px; }
  .browse-page .tool-card-brand { font-size: 23px; }
  .browse-page .tool-card-name { font-size: 13px; }
  .browse-page .tool-card-right {
    grid-column: 1; grid-row: 3; align-self: end; flex-direction: row;
    justify-content: space-between; padding: 0 8px 8px;
  }
  .browse-page .tool-card-price { font-size: 20px; }
  .browse-page .tool-card-btn { display: inline-block; }
  .model-page .model-gallery { min-height: 320px; }
  .model-page .model-name { font-size: 49px; }
  .model-page .model-verdict { padding: 24px; }
  .model-page .model-verdict-proscons { grid-template-columns: 1fr; }
  .model-page .model-spec-row { grid-template-columns: 1fr 1fr; }
  .compare-page .compare-title { font-size: 49px; }
  .compare-swipe { display: inline; }
  .compare-wrap { margin-right: -18px; border-radius: 18px 0 0 18px; }
  .compare-table { min-width: 720px; }
  .articles-head { padding: 32px 27px; border-radius: 20px; }
  .articles-head h1 { font-size: 49px; }
  .brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brand-page .tool-list { grid-template-columns: 1fr; }
  .article-tabs { overflow-x: auto; }
  .article-tab { white-space: nowrap; }
  .article-header, .article-body { padding: 25px 22px; border-radius: 18px; }
  .article-h1 { font-size: 43px; }
  .article-dek { font-size: 16px; }
  .article-byline { flex-wrap: wrap; }
  .article-body-p { font-size: 16px; }
  .account-grid { grid-template-columns: 1fr; }
  .account-section--full { grid-column: 1; }
  .auth-page { min-height: 600px; padding: 34px 14px 70px !important; }
  .auth-card { padding: 26px 22px; border-radius: 19px; box-shadow: 7px 7px 0 rgba(223,255,71,.12); }
  .nl-strip { padding: 52px 18px; }
  .nl-strip-input-row { display: grid; grid-template-columns: 1fr; border: 0; overflow: visible; background: transparent; gap: 8px; }
  .nl-strip-input { border: 2px solid var(--ink); border-radius: 9px; background: #fff; }
  .nl-strip-submit { border-radius: 9px; }
}
/* Narrowest phones: the brand lockup and the account button together still
   want more than 320px gives, so both give up a little. */
@media (max-width: 400px) {
  .site-header .inner { gap: 10px; padding: 0 12px; }
  .site-header .user-nav-btn { padding: 6px 8px; font-size: 9px; }
}

/* ── Product detail: performance console ──────────────────────────── */
.model-page {
  --model-panel: #0b0c0f;
  --model-panel-soft: #15171c;
  --model-copy: #f6f5ef;
  --model-muted: #b4b7bf;
  position: relative; max-width: 1488px !important; padding: 0 0 112px !important;
}
.model-page .crumbs {
  position: absolute; z-index: 2; top: 26px; left: 34px; margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px;
}
.model-product-shell {
  display: grid; grid-template-columns: minmax(0, 45.65%) minmax(0, 54.35%);
  /* clip, not hidden: `overflow: hidden` makes this a scroll container, and a
     sticky descendant then resolves against a box that never scrolls, so the
     gallery silently did not stick at all. `clip` still clips the rounded
     corners at mobile but creates no scroll container. */
  min-height: 560px; overflow: clip; border: 0; border-radius: 0;
  background: var(--model-panel); box-shadow: none;
}
.model-gallery-column {
  min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start;
  padding: 56px 34px 28px; background: #fbfaf6;
}
/* The column still stretches so its light background fills the shell; only its
   contents stick, which keeps the photo beside whatever part of the panel the
   reader has scrolled to. */
.model-gallery-stick { position: sticky; top: 88px; display: flex; flex-direction: column; min-height: 0; }
/* Rankings now sit on the gallery column's light paper, so they take ink and a
   white card rather than the dark-panel treatment the shared rules give them. */
.model-gallery-column .model-rankings { width: 100%; margin: 0 0 20px; }
.model-gallery-column .model-rankings .model-section-kicker {
  margin-bottom: 9px; color: #6b6e75; font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.model-gallery-column .model-rankings-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.model-gallery-column .model-rankings-list a {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 13px;
  border: 1px solid rgba(11,12,15,.13); border-radius: 11px; background: #fff;
  color: var(--ink); text-decoration: none; transition: border-color .16s ease, transform .16s ease;
}
.model-gallery-column .model-rankings-list a:hover { transform: translateY(-1px); border-color: rgba(11,12,15,.42); }
.model-gallery-column .model-rank-pos { flex: none; color: var(--ink); font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 900; }
.model-gallery-column .model-rank-title { min-width: 0; flex: 1; font-size: 13px; font-weight: 600; line-height: 1.3; }
.model-gallery-column .model-rank-meta { flex: none; color: #6b6e75; font-size: 11px; white-space: nowrap; }
.model-page .model-gallery {
  min-height: 0; height: auto; flex: 1; margin: 0; padding: 24px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  align-items: center; justify-content: center;
}
.model-page .model-gallery--photo img {
  width: 100%; height: 100%; max-width: 610px; max-height: 565px; padding: 0;
  object-fit: contain; transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.model-page .model-gallery:hover img { transform: scale(1.025); }
.model-page .model-gallery--empty { display: flex; flex-direction: column; gap: 8px; color: #71747b; text-align: center; }
.model-page .model-gallery--empty strong { color: var(--ink); font: 800 22px/1.1 'Archivo', sans-serif; }
.model-gallery-thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 122px); justify-content: center;
  gap: 10px; overflow-x: auto; padding: 14px 2px 2px; scrollbar-width: thin;
}
.model-gallery-thumbs--single { justify-content: start; }
.model-gallery-thumb {
  height: 96px; overflow: hidden; padding: 7px; border: 1px solid rgba(11,12,15,.16);
  border-radius: 11px; background: #fff; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.model-gallery-thumb:hover { transform: translateY(-2px); border-color: rgba(11,12,15,.42); }
.model-gallery-thumb.is-active { border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--ink); }
.model-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

.model-product-panel { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--model-panel); color: var(--model-copy); }
.model-product-head { padding: 28px 42px 0; }
.model-page .model-brand-row { display: flex; gap: 10px; margin: 0 0 8px; }
.model-page .model-brand,
.model-page .model-kind {
  color: var(--accent); font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.model-page .model-kind { color: #9ea1a9; }
.model-page .model-kind::before { content: "/"; margin-right: 10px; color: #5d6068; }
.model-page .model-name {
  max-width: none; margin: 0; color: var(--model-copy); overflow-wrap: break-word;
  font-size: clamp(46px, 4.15vw, 62px); font-weight: 900; line-height: .96; letter-spacing: -.055em;
}
.model-page .model-name--long { font-size: clamp(42px, 3.45vw, 52px); line-height: .98; text-wrap: balance; }
.model-page .model-name--xlong { font-size: clamp(38px, 3vw, 46px); line-height: .99; text-wrap: balance; }
.model-title-name { margin-left: 0; }
.model-page .model-parent {
  display: block; margin: 10px 0 0; padding: 0; border: 0; color: #a7aab2;
  font-size: 14px; line-height: 1.45;
}
/* minmax(min-content, ...) is what stops a value being broken mid-word: a track
   never shrinks below the longest word it holds, so a cell showing "Brushless"
   claims the width that word needs while "20V" stays narrow. Four equal 1fr
   columns gave every cell the same width whether it held three characters or
   nine, and the long ones broke. */
.model-highlights { display: grid; grid-template-columns: repeat(4, minmax(min-content,1fr)); align-items: start; margin: 22px 42px 0; }
.model-highlight { min-width: 0; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.18); }
.model-highlight:first-child { padding-left: 0; border-left: 0; }
/* These four cells are the page's headline figures, so they must never be the
   place a value gets cut off. They used to be nowrap + ellipsis, which turned
   "Power source" into "POWER SOU…" and "Brushless" into "Brush…" — the label
   and the answer both lost, in the one strip a reader looks at first. They wrap
   instead; the label reserves two lines so the numbers stay on a common
   baseline whether its own text needs one line or two. */
.model-highlight-label {
  display: block; min-height: 2.6em; margin-bottom: 8px; color: var(--model-muted);
  font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase;
  overflow-wrap: break-word;
}
.model-highlight strong {
  display: block; overflow-wrap: normal; word-break: normal; color: var(--accent);
  font-family: 'Archivo', sans-serif; font-size: clamp(24px, 2.15vw, 34px); font-weight: 900;
  line-height: .98; hyphens: none;
}
/* A word like "Brushless" cannot shrink to fit a 150px cell at display size, so
   the text variant is set smaller and allowed to wrap onto a second line. */
.model-highlight--text strong { font-size: clamp(18px, 1.42vw, 23px); line-height: 1.06; }
.model-highlight-unit { display: block; margin-top: 6px; color: var(--model-copy); font-size: 15px; font-weight: 600; line-height: 1.1; }

.model-purchase {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .9fr); align-items: center;
  gap: 32px; margin-top: 24px; padding: 13px 42px; background: var(--accent); color: var(--ink);
}
.model-purchase-summary { display: flex; flex-direction: column; gap: 2px; }
.model-purchase-label { font-size: 12px; font-weight: 700; line-height: 1.25; }
.model-purchase-price { font: 900 25px/1 'Archivo', sans-serif; letter-spacing: -.03em; }
.model-page .model-buy-btn {
  display: inline-flex; align-items: center; align-self: flex-start; justify-content: flex-start; padding: 0;
  border-radius: 0; background: transparent; color: var(--ink); font-family: 'Archivo', sans-serif;
  font-size: 25px; font-weight: 900; letter-spacing: -.035em; text-decoration: none;
}
.model-page .model-buy-btn:hover { background: transparent; color: var(--ink); opacity: .65; }
.model-purchase p { max-width: 30ch; margin: 0 0 0 auto; padding-left: 28px; border-left: 1px solid rgba(11,12,15,.35); font-size: 12px; line-height: 1.45; }

.model-specifications { flex: 1; padding: 18px 42px 20px; }
/* The written summary. Reads as body copy, not as a verdict card: no border,
   no score, nothing that borrows the visual weight of a review. */
.model-summary { padding: 18px 42px 4px; }
.model-summary p { margin: 0 0 11px; color: var(--model-copy); font-size: 15px; line-height: 1.62; }
.model-summary-basis { margin-top: 2px; color: #aeb1b9; font-size: 12.5px; line-height: 1.5; }
.model-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.model-section-kicker { display: block; margin-bottom: 5px; color: var(--accent); font-size: 12px; font-weight: 700; }
.model-section-heading h2 { color: var(--model-copy); font-size: 19px; letter-spacing: -.015em; text-transform: uppercase; }
.model-spec-count { color: #aeb1b9; font-size: 13px; font-weight: 600; }
.model-spec-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 34px; }
.model-spec-group { min-width: 0; border-top: 1px solid rgba(255,255,255,.17); }
.model-spec-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0;
  color: var(--model-copy); font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.model-spec-group summary:hover { color: var(--accent); }
.model-spec-group-meta { display: inline-flex; align-items: center; gap: 9px; }
.model-spec-group summary small {
  min-width: 26px; padding: 3px 8px; border-radius: 999px; background: #252830; color: #d1d3d8;
  font-size: 11px; font-weight: 700; text-align: center;
}
.model-spec-action { min-width: 30px; color: #9da0a8; font-size: 11px; font-weight: 600; text-align: right; }
.model-spec-action::after { content: "View"; }
.model-spec-group[open] .model-spec-action::after { content: "Hide"; }
.model-spec-group[open] .model-spec-group-meta { display: none; }
.model-spec-grid { margin: 0; padding: 0 0 10px; }
.model-page .model-spec-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(90px, auto); gap: 18px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.16);
}
.model-page .model-spec-row:last-child { border-bottom: 0; }
.model-page .model-spec-row dt { min-width: 0; color: #b8bbc2; font-size: 11px; line-height: 1.3; }
.model-page .model-spec-row dd { margin: 0; color: var(--model-copy); font-size: 11px; font-weight: 600; line-height: 1.3; text-align: right; }

.model-actions { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); border-top: 1px solid rgba(255,255,255,.14); }
.model-page .vote-bar,
.model-page .subscribe-box {
  min-width: 0; min-height: 74px; margin: 0; padding: 13px 24px; border: 0; border-radius: 0;
  background: var(--model-panel-soft); color: var(--model-copy);
}
.model-page .vote-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; border-right: 1px solid rgba(255,255,255,.14); }
.model-page .vote-score-label { width: 100%; color: var(--model-copy); font-size: 13px; }
.model-page .vote-btn { min-height: 34px; padding: 7px 11px; border-color: rgba(255,255,255,.16); background: #24272e; color: var(--model-copy); font-size: 12px; }
.model-page .vote-hint { color: #b5b8bf; font-size: 12px; }
.model-page .subscribe-box { display: flex; align-items: center; flex-wrap: wrap; }
.model-page .subscribe-label { color: var(--model-copy); font-size: 13px; font-weight: 600; }
.model-page .subscribe-form { min-width: 260px; flex: 1; }
.model-page .subscribe-input { min-width: 0; flex: 1; border-color: rgba(255,255,255,.18); background: #23262c; color: var(--model-copy); }
.model-page .subscribe-input::placeholder { color: #9699a1; }
.model-page .btn-secondary { min-height: 36px; border: 0; border-radius: 7px; background: var(--accent); color: var(--ink); font-weight: 700; }

/* Reading links, inside the panel below the ratings. The panel grows as specs
   are added, so this sits at the end of it and is pushed down rather than
   competing for a fixed slot. */
.model-reading { padding: 20px 42px 24px; border-top: 1px solid rgba(255,255,255,.14); background: var(--model-panel); }
.model-page .model-reading-head {
  margin: 0 0 4px; color: var(--accent); font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.model-reading-list { margin: 0; padding: 0; list-style: none; }
.model-reading-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.model-reading-list a {
  min-width: 0; flex: 1; color: var(--model-copy); font-size: 14px; font-weight: 600;
  line-height: 1.35; text-decoration: none; overflow-wrap: break-word;
}
.model-reading-list a:hover { color: var(--accent); text-decoration: underline; }
.model-reading-meta { flex: none; color: #8f929a; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.model-reading-more { display: inline-block; margin-top: 13px; color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.model-reading-more:hover { text-decoration: underline; }

.model-page .model-note {
  max-width: 1280px; margin: 18px auto 0; padding: 13px 16px; border: 0; border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0; background: rgba(255,255,255,.45); color: #555960; font-size: 13px; line-height: 1.5;
}
.model-page .model-siblings { margin: 14px 0 0; color: #555960; font-size: 13px; }
.model-review-panel {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 30px;
  margin-top: 26px; padding: 28px 30px; border-radius: 18px; background: var(--model-panel); color: var(--model-copy);
}
.model-review-panel h2 { margin: 0; font-size: 27px; }
.model-review-panel p { max-width: 64ch; margin: 8px 0 0; color: #b8bbc2; font-size: 14px; }
.model-review-score { color: var(--accent); font: 900 38px/1 'Archivo', sans-serif; }
.model-review-score span { color: #9a9da5; font-size: 15px; }
.model-review-panel a { color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.model-ad { max-width: 1280px; margin: 22px auto 0; }
.model-page .comments-section,
.model-page .comments-inner { max-width: 860px; margin-left: auto; margin-right: auto; }

/* The four headline figures each need roughly 120px of text width; a word like
   "Brushless" is about 92px at display size and cannot shrink. The panel is
   only ~54% of the shell, so below about 1400px four-up leaves each cell under
   90px and the value breaks mid-word. They go two-up here, well before the rest
   of the layout changes at 1040px, which gives each figure ~250px instead. */
@media (max-width: 1400px) {
  .model-highlights { grid-template-columns: repeat(2, minmax(min-content,1fr)); gap: 22px 0; }
  .model-highlight:nth-child(3) { padding-left: 0; border-left: 0; }
  .model-highlight-label { min-height: 0; }
}

@media (max-width: 1040px) {
  .model-product-shell { grid-template-columns: minmax(340px,.8fr) minmax(0,1.2fr); }
  .model-gallery-column { min-height: 610px; padding: 52px 22px 22px; }
  .model-product-head { padding: 30px 30px 0; }
  .model-highlights { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 0; margin: 25px 30px 0; }
  .model-highlight:nth-child(3) { padding-left: 0; border-left: 0; }
  .model-purchase { grid-template-columns: auto auto; padding-left: 30px; padding-right: 30px; }
  .model-purchase p { grid-column: 1 / -1; max-width: none; margin: 0; padding: 0; border: 0; }
  .model-specifications { padding-left: 30px; padding-right: 30px; }
  .model-summary { padding-left: 30px; padding-right: 30px; }
  .model-reading { padding-left: 30px; padding-right: 30px; }
  .model-spec-groups { grid-template-columns: 1fr; }
  .model-actions { grid-template-columns: 1fr; }
  .model-page .vote-bar { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 760px) {
  .model-page { padding: 22px 12px 80px !important; }
  .model-page .crumbs { position: static; margin-bottom: 18px; padding: 0 4px; font-size: 11px; }
  .model-product-shell { grid-template-columns: minmax(0,1fr); border-radius: 18px; }
  .model-gallery-column { min-height: 420px; padding: 18px; }
  .model-gallery-stick { position: static; }
  .model-page .model-gallery { min-height: 300px; padding: 8px; }
  .model-page .model-gallery--photo img { max-height: 330px; }
  .model-gallery-thumbs { grid-auto-columns: 76px; justify-content: start; }
  .model-gallery-thumb { height: 68px; }
  .model-product-head { padding: 27px 22px 0; }
  .model-page .model-name { font-size: clamp(40px,12vw,54px); }
  .model-page .model-name--long { font-size: 36px; line-height: 1; }
  .model-page .model-name--xlong { font-size: 32px; line-height: 1.01; }
  .model-highlights { margin-left: 22px; margin-right: 22px; }
  .model-highlight { padding: 0 10px; }
  .model-highlight-label { white-space: normal; }
  .model-highlight strong { font-size: clamp(20px, 6vw, 24px); }
  /* Two cells across a phone leaves ~105px of text, and "Brushless" does not
     fit that at 20px. The word cannot break and the track cannot grow at this
     width, so the type scales with the viewport instead. */
  .model-highlight--text strong { font-size: clamp(15px, 4.4vw, 20px); }
  .model-purchase { grid-template-columns: 1fr; gap: 13px; padding: 18px 22px; }
  .model-page .model-buy-btn { width: 100%; }
  .model-specifications { padding: 25px 22px; }
  .model-summary { padding: 22px 22px 2px; }
  .model-reading { padding: 20px 22px 24px; }
  /* Side by side, the source and date leave the headline about half the panel
     and it wraps to four lines; stacked, the headline gets the full width. */
  .model-reading-list li { flex-direction: column; gap: 5px; }
  .model-reading-list a { flex: none; width: 100%; }
  .model-section-heading { align-items: start; }
  .model-section-heading h2 { font-size: 27px; }
  .model-page .model-spec-row { grid-template-columns: minmax(0,1fr) minmax(88px,auto); }
  .model-page .subscribe-label { width: 100%; margin-bottom: 10px; }
  .model-page .subscribe-form { min-width: 0; width: 100%; flex: 0 0 100%; }
  .model-page .subscribe-input { width: 100%; }
  .model-review-panel { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
}

/* ── Rankings ───────────────────────────────────────────────────────── */
/* The index reads as a shelf of lists; the ranking itself as a leaderboard,
 * so the number and the figure carry the row and the photo supports it. */
.rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rank-card, .rank-info, .rank-img, .rank-btn { text-decoration: none; }
.rank-card {
  display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 24px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  background: var(--surface); color: var(--soft-white);
}
.rank-card-cat {
  color: var(--accent); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.rank-card-title { font-family: 'Archivo', sans-serif; font-size: 25px; font-weight: 900; letter-spacing: -.04em; line-height: 1.06; }
.rank-card-lead { display: flex; gap: 13px; align-items: center; margin-top: auto; }
.rank-card-lead-img {
  display: grid; flex: 0 0 62px; place-items: center; width: 62px; height: 62px;
  border-radius: 13px; background: rgba(255,255,255,.06); color: var(--accent);
  font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 900;
}
.rank-card-lead-img--photo { background: #fff; }
.rank-card-lead-img img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.rank-card-lead-text { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.rank-card-lead-name {
  overflow: hidden; color: #b8bbc2; font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap;
}
.rank-card-lead-value { font-family: 'Archivo', sans-serif; font-size: 27px; font-weight: 900; letter-spacing: -.045em; }
.rank-card-foot {
  padding-top: 13px; border-top: 1px solid rgba(255,255,255,.09); color: #777a82;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

.ranking-page .browse-head {
  display: block; margin-bottom: 22px; padding: 40px 44px; border-radius: 26px;
  background: var(--ink); color: var(--soft-white);
}
.ranking-page .browse-head h1 {
  margin-bottom: 12px; color: var(--soft-white);
  font-size: clamp(42px, 5vw, 66px); letter-spacing: -.06em; line-height: .98;
}
.ranking-dek { max-width: 640px; margin-bottom: 14px; color: #9da0a8; font-size: 16px; }
.ranking-page .browse-meta {
  color: #83868f; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

.rank-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rank-row {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: 54px 92px minmax(0, 1fr) minmax(0, 240px) auto;
  padding: 14px 20px 14px 14px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--card);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.rank-row:hover { transform: translateY(-3px); border-color: rgba(11,12,15,.32); box-shadow: var(--shadow); }
.rank-row:nth-child(-n+3) { border-color: rgba(11,12,15,.3); }
.rank-pos {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--ink); color: #7f838c; font-family: 'Archivo', sans-serif;
  font-size: 20px; font-weight: 900; letter-spacing: -.04em;
}
.rank-row:nth-child(-n+3) .rank-pos { color: var(--accent); }
.rank-img {
  display: grid; width: 92px; height: 78px; place-items: center; overflow: hidden;
  border-radius: 12px; background: rgba(11,12,15,.05); color: var(--muted);
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 900; text-transform: uppercase;
}
.rank-img--photo { background: #fff; }
.rank-img img { width: 100%; height: 100%; padding: 8px; object-fit: contain; transition: transform .2s ease; }
.rank-row:hover .rank-img img { transform: scale(1.06); }
.rank-info { display: flex; min-width: 0; flex-direction: column; gap: 2px; color: var(--ink); }
.rank-brand { font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 900; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.rank-name { color: #686b72; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .045em; }
.rank-variants { margin-top: 3px; color: #93969d; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px; letter-spacing: .02em; }
.rank-figure { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.rank-value { font-family: 'Archivo', sans-serif; font-size: 24px; font-weight: 900; letter-spacing: -.045em; }
.rank-bar { display: block; overflow: hidden; height: 6px; border-radius: 99px; background: rgba(11,12,15,.09); }
.rank-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); }
.rank-row:nth-child(-n+3) .rank-bar i { background: var(--signal); }
.rank-buy { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rank-price { font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 900; letter-spacing: -.035em; }
.rank-btn {
  padding: 10px 12px; border-radius: 9px; background: var(--ink); color: var(--accent);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 9px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.rank-btn:hover { background: var(--accent); color: var(--ink); }
.rank-note {
  max-width: 760px; margin: 24px 0 34px; color: var(--muted);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.75;
}
.rank-note a { color: var(--ink); font-weight: 700; }

@media (max-width: 1100px) {
  .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-row { grid-template-columns: 46px 78px minmax(0, 1fr) minmax(0, 180px); }
  .rank-buy { grid-column: 3 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; }
}
@media (max-width: 700px) {
  .rank-grid { grid-template-columns: minmax(0, 1fr); }
  .ranking-page .browse-head { padding: 28px 24px; border-radius: 20px; }
  .rank-row { grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; }
  .rank-pos { width: 42px; height: 42px; font-size: 18px; }
  .rank-img { display: none; }
  .rank-figure, .rank-buy { grid-column: 2 / -1; }
  .rank-buy { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-row, .rank-img img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lift, .cat-tile, .cat-tile-go, .model-gallery img, .col-photo img { transition: none; }
}