/* ============================================
   Links to Wild — the "noir + one green" theme
   Loaded only by index.html, and every rule is scoped to body.noir,
   so no other page changes. The shared header and footer keep their
   markup (dropdown, mobile menu and theme toggle still work) and are
   only restyled here.

   One accent hue, the brand's electric green #38E9AD. It is rationed:
   solid pills, section index labels, one word per headline, arrows,
   stat suffixes, underlines and the hover fill of the rows.
   ============================================ */

/* --- Tokens: dark (default) --- */
body.noir {
  --h-bg: #06110d;
  --h-bg-rgb: 6, 17, 13;
  --h-coal: #0a1813;
  --h-slate: #0e1f18;
  --h-text: #eef6f2;
  --h-text-rgb: 238, 246, 242;
  --h-accent: #38e9ad;
  --h-accent-rgb: 56, 233, 173;
  --h-accent-ink: #38e9ad;
  --h-on-accent: #032418;
  --h-accent-hover-bg: #c0fee1;
  --h-accent-hover-text: #032418;
  --h-line: rgba(var(--h-text-rgb), 0.1);
  --h-line-2: rgba(var(--h-text-rgb), 0.2);
  --h-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  --h-glow: rgba(var(--h-accent-rgb), 0.1);
  --h-grain: 0.045;

  --h-display: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --h-archivo: 'Archivo', 'Inter', system-ui, sans-serif;
  --h-body: 'Inter', system-ui, sans-serif;

  /* Re-point the site-wide tokens so the shared pieces (dropdown,
     mobile menu, cookie banner, back-to-top) match this page. */
  --color-bg: var(--h-bg);
  --color-bg-section: var(--h-coal);
  --color-bg-card: var(--h-slate);
  --color-primary: var(--h-accent);
  --color-accent: var(--h-accent-ink);
  --color-accent-light: var(--h-accent-ink);
  --color-mint: var(--h-text);
  --color-text: var(--h-text);
  --color-text-muted: rgba(var(--h-text-rgb), 0.6);
  --color-border: var(--h-line);
  --color-accent-soft: rgba(var(--h-accent-rgb), 0.3);
  --color-accent-faint: rgba(var(--h-accent-rgb), 0.08);

  background-color: var(--h-bg);
  color: var(--h-text);
  font-family: var(--h-body);
  overflow-x: hidden;
}

/* --- Tokens: light --- */
body.noir.light-mode {
  --h-bg: #f3f8f5;
  --h-bg-rgb: 243, 248, 245;
  --h-coal: #e8f0ec;
  --h-slate: #ffffff;
  --h-text: #032418;
  --h-text-rgb: 3, 36, 24;
  --h-accent-ink: #146c4e;
  --h-on-accent: #032418;
  --h-accent-hover-bg: #032418;
  --h-accent-hover-text: #c0fee1;
  --h-line: rgba(var(--h-text-rgb), 0.12);
  --h-line-2: rgba(var(--h-text-rgb), 0.22);
  --h-shadow: 0 24px 50px rgba(3, 36, 24, 0.12);
  --h-glow: rgba(var(--h-accent-rgb), 0.3);
  --h-grain: 0.06;
}

body.noir ::selection {
  background: var(--h-accent);
  color: var(--h-on-accent);
}

body.noir :focus-visible {
  outline: 2px solid var(--h-accent-ink);
  outline-offset: 3px;
}

/* --- Layout primitives --- */
.noir .h-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: 20px;
}

.noir .h-section {
  position: relative;
  padding-block: 96px;
}

.noir .h-section--flush {
  padding-top: 0;
}

.noir .h-section--rule {
  border-top: 1px solid var(--h-line);
}

@media (min-width: 768px) {
  .noir .h-wrap { padding-inline: 32px; }
  .noir .h-section { padding-block: 136px; }
  .noir .h-section--flush { padding-top: 0; }
}

/* --- Type --- */
.noir .h-display {
  font-family: var(--h-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--h-text);
  margin: 0;
}

.noir .h-sub {
  font-family: var(--h-archivo);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--h-text);
  margin: 0;
}

.noir .h-script {
  font-family: var(--h-archivo);
  font-style: italic;
  font-weight: 800;
  font-size: 0.6em;
  text-transform: none;
  letter-spacing: -0.02em;
  margin-left: -0.1em;
  white-space: nowrap;
  color: var(--h-accent-ink);
}

.noir .h-block { display: block; }
.noir .h-accent { color: var(--h-accent-ink); }
/* The quiet half of a headline: green, not grey (Hayk, 19 Sep 2026). */
.noir .h-muted { color: var(--h-accent-ink); }

.noir .h-index {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

.noir .h-underline {
  color: var(--h-accent-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.4s ease, color 0.3s ease;
}

.noir .h-underline:hover {
  color: var(--h-accent-ink);
  background-size: 100% 2px;
}

.noir .h-ico {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Pills --- */
.noir .h-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--h-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.noir .h-pill:hover { transform: translateY(-2px); }

.noir .h-pill--solid {
  background-color: var(--h-accent);
  color: var(--h-on-accent);
}

.noir .h-pill--solid:hover {
  background-color: var(--h-accent-hover-bg);
  color: var(--h-accent-hover-text);
}

.noir .h-pill--ghost {
  border-color: var(--h-line-2);
  color: var(--h-text);
}

.noir .h-pill--ghost:hover {
  border-color: var(--h-accent-ink);
  color: var(--h-accent-ink);
}

.noir .h-pill--lg {
  padding: 17px 32px;
  font-size: 15px;
}

/* --- Atmosphere: grain + one green glow --- */
.noir .h-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--h-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.noir .h-glow {
  position: absolute;
  top: 40px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--h-glow);
  filter: blur(120px);
  pointer-events: none;
}

/* ============================================
   Header: the shared nav as a floating glass pill
   ============================================ */
body.noir .site-header,
body.noir .site-header.scrolled {
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.noir .site-header > .container {
  max-width: 1320px;
  padding-inline: 12px;
}

@media (min-width: 768px) {
  body.noir .site-header > .container { padding-inline: 32px; }
}

body.noir .nav {
  position: relative;
  margin-top: 16px;
  padding: 11px 12px 11px 18px;
  gap: 1.25rem;
  border: 1px solid var(--h-line);
  border-radius: 999px;
}

/* The blur lives on a pseudo-element: a backdrop-filter on .nav itself
   would become the containing block of the fixed mobile menu. */
body.noir .nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(var(--h-bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

body.noir .nav__logo img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

body.noir .nav__logo span {
  font-family: var(--h-archivo);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

body.noir .nav__logo span::after {
  content: '.';
  color: var(--h-accent-ink);
}

body.noir .nav__links {
  gap: 1.6rem;
}

body.noir .nav__links > a,
body.noir .nav__toggle {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--h-text-rgb), 0.7);
}

body.noir .nav__links > a:hover,
body.noir .nav__links > a.active,
body.noir .nav__toggle:hover,
body.noir .nav__item.open .nav__toggle {
  color: var(--h-text);
}

body.noir .nav__links a::after {
  background: var(--h-accent-ink);
}

body.noir .nav__cta.btn,
body.noir .nav__links .mobile-cta.btn {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--h-accent);
  color: var(--h-on-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

body.noir .nav__cta.btn:hover,
body.noir .nav__links .mobile-cta.btn:hover {
  transform: translateY(-2px);
  background: var(--h-accent-hover-bg);
  color: var(--h-accent-hover-text);
}

body.noir .nav__cta {
  margin-left: auto;
}

body.noir .theme-toggle {
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  border-color: var(--h-line-2);
  color: var(--h-text);
}

body.noir .theme-toggle:hover {
  border-color: var(--h-accent-ink);
  color: var(--h-accent-ink);
}

body.noir .hamburger span {
  background-color: var(--h-text);
}

/* Anchored to the Tools button's left edge rather than centred on it,
   so it never runs off the left side of the screen. */
body.noir .nav__menu {
  /* Sets the gap only — .nav__menu computes `top` and the bridge height
     from it, so the two cannot drift apart. */
  --nav-menu-gap: 1.6rem;
  left: -12px;
  transform: none;
  background: var(--h-slate);
  border-color: var(--h-line);
  box-shadow: var(--h-shadow);
}

@media (max-width: 1100px) and (min-width: 769px) {
  body.noir .nav__links { gap: 1.1rem; }
  body.noir .nav__logo span { display: none; }
}

@media (max-width: 768px) {
  body.noir .nav { padding: 8px 12px 8px 10px; }
  body.noir .nav__links {
    background: var(--h-coal);
    border-left: 1px solid var(--h-line);
  }
  body.noir .nav__links > a { font-size: 1.1rem; }
}

/* ============================================
   Hero
   ============================================ */
.noir .h-hero {
  position: relative;
  overflow: hidden;
  padding-top: 128px;
}

.noir .h-hero > .h-wrap {
  position: relative;
}

@media (min-width: 768px) {
  .noir .h-hero { padding-top: 176px; }
}

.noir .h-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.55);
}

.noir .h-kicker__line {
  width: 32px;
  height: 1px;
  background: var(--h-accent-ink);
}

.noir .h-hero__title {
  margin-top: 24px;
  font-size: clamp(3.2rem, 13.4vw, 12.75rem);
}

.noir .h-hero__row {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--h-line);
}

@media (min-width: 768px) {
  .noir .h-hero__row {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: 32px;
  }
}

.noir .h-lead {
  margin: 0;
  max-width: 34ch;
  font-family: var(--h-archivo);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(var(--h-text-rgb), 0.82);
}

.noir .h-hero__note {
  margin: 14px 0 0;
  font-size: 14px;
  color: rgba(var(--h-text-rgb), 0.5);
}

.noir .h-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 768px) {
  .noir .h-hero__actions { justify-content: flex-end; }
}

/* Marquee */
.noir .h-marquee {
  position: relative;
  margin-top: 64px;
  padding-block: 16px;
  overflow: hidden;
  background: var(--h-coal);
  border-block: 1px solid var(--h-line);
}

.noir .h-marquee__track {
  display: flex;
  width: max-content;
  animation: h-marquee 32s linear infinite;
}

.noir .h-marquee:hover .h-marquee__track {
  animation-play-state: paused;
}

.noir .h-marquee__set {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.7);
}

.noir .h-star { color: var(--h-accent-ink); }

@keyframes h-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .noir .h-marquee__track { animation: none; }
}

/* ============================================
   Section heads
   ============================================ */
.noir .h-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .noir .h-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
  }
}

.noir .h-head__title {
  font-size: clamp(2.6rem, 7.6vw, 6rem);
}

.noir .h-head__title--sub {
  max-width: 17ch;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.06;
}

.noir .h-head__blurb {
  max-width: 24rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.55);
}

.noir .h-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.noir .h-head__link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================
   01 Statement + stats
   ============================================ */
.noir .h-statement {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .noir .h-statement {
    grid-template-columns: 3fr 9fr;
    gap: 48px;
  }
}

.noir .h-side-note {
  max-width: 28ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.55);
}

.noir .h-statement__title {
  font-size: clamp(1.75rem, 4.1vw, 3.4rem);
  line-height: 1.06;
}

.noir .h-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--h-line);
}

@media (min-width: 768px) {
  .noir .h-stats { grid-template-columns: repeat(4, 1fr); }
}

.noir .h-stat__num {
  display: block;
  font-size: clamp(2.8rem, 5vw, 4.25rem);
  color: var(--h-accent-ink);
}

.noir .h-stat__label {
  display: block;
  max-width: 18ch;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.5);
}

/* ============================================
   Cards (services + tools)
   ============================================ */
.noir .h-cards {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .noir .h-cards { grid-template-columns: repeat(2, 1fr); }
  .noir .h-card--wide { grid-column: span 2; }
}

.noir .h-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--h-line);
  border-radius: 18px;
  background: var(--h-slate);
  color: var(--h-text);
  text-decoration: none;
  transition: border-color 0.35s ease;
}

.noir .h-card:hover {
  color: var(--h-text);
  border-color: rgba(var(--h-accent-rgb), 0.45);
}

.noir .h-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 24px;
  overflow: hidden;
  background-color: var(--h-coal);
  background-image:
    radial-gradient(circle at 78% 18%, rgba(var(--h-accent-rgb), 0.14), transparent 55%),
    linear-gradient(var(--h-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--h-line) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}

.noir .h-card--wide .h-card__media { aspect-ratio: 16 / 10; }

@media (min-width: 768px) {
  .noir .h-card--wide .h-card__media { aspect-ratio: 21 / 8; }
}

/* Small screens: let the mini-screen set the height instead of cropping it. */
@media (max-width: 767px) {
  .noir .h-card__media,
  .noir .h-card--wide .h-card__media {
    aspect-ratio: auto;
    padding: 36px 16px;
  }
}

.noir .h-screen {
  width: 100%;
  max-width: 440px;
  padding: 20px;
  border: 1px solid var(--h-line);
  border-radius: 14px;
  background: var(--h-bg);
  box-shadow: var(--h-shadow);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.noir .h-screen--score { max-width: 580px; }

.noir .h-card:hover .h-screen {
  transform: scale(1.05);
  filter: saturate(1.1) brightness(0.94);
}

.noir .h-screen__title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.45);
}

.noir .h-rowlist {
  display: grid;
  gap: 8px;
}

.noir .h-rowlist__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--h-line);
  border-radius: 10px;
  background: rgba(var(--h-text-rgb), 0.03);
  font-size: 13px;
  color: rgba(var(--h-text-rgb), 0.85);
}

.noir .h-rowlist__row > span:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.noir .h-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-accent);
}

.noir .h-dot--dim { background: rgba(var(--h-accent-rgb), 0.45); }
.noir .h-dot--off { background: rgba(var(--h-text-rgb), 0.25); }
.noir .h-dot--hot { box-shadow: 0 0 0 4px rgba(var(--h-accent-rgb), 0.22); }

.noir .h-tag {
  padding: 3px 8px;
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.6);
}

.noir .h-tag--on {
  border-color: rgba(var(--h-accent-rgb), 0.4);
  background: rgba(var(--h-accent-rgb), 0.14);
  color: var(--h-accent-ink);
}

/* Score screen */
.noir .h-score__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.noir .h-score__head .h-screen__title { margin-bottom: 4px; }

.noir .h-score__domain {
  margin: 0;
  font-family: var(--h-archivo);
  font-size: 18px;
  font-weight: 800;
  color: var(--h-text);
}

.noir .h-score__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 8px 14px 7px;
  border-radius: 12px;
  background: var(--h-accent);
  color: var(--h-on-accent);
  line-height: 1;
}

.noir .h-score__total b {
  font-family: var(--h-display);
  font-size: 34px;
  font-weight: 400;
}

.noir .h-score__total span {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.noir .h-score__verdict {
  display: inline-flex;
  margin: 16px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--h-accent-rgb), 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

.noir .h-bars {
  display: grid;
  gap: 12px;
}

.noir .h-bar {
  display: grid;
  grid-template-columns: 104px 1fr 58px;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(var(--h-text-rgb), 0.7);
}

.noir .h-bar__track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--h-text-rgb), 0.08);
}

.noir .h-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--h-accent);
}

.noir .h-bar__fill--dim { background: rgba(var(--h-accent-rgb), 0.5); }

.noir .h-bar__fill--hot {
  background: repeating-linear-gradient(45deg, var(--h-accent) 0 4px, rgba(var(--h-accent-rgb), 0.35) 4px 8px);
}

.noir .h-bar__value {
  text-align: right;
  font-weight: 700;
  color: var(--h-text);
}

/* Hover-reveal meta */
.noir .h-card__meta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(to top, rgba(var(--h-bg-rgb), 0.94), rgba(var(--h-bg-rgb), 0.25) 55%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.noir .h-card:hover .h-card__meta,
.noir .h-card:focus-visible .h-card__meta {
  opacity: 1;
  transform: none;
}

.noir .h-card__meta-text {
  font-family: var(--h-archivo);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

.noir .h-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--h-accent);
  color: var(--h-on-accent);
  font-size: 20px;
}

/* Touch screens have no hover: keep the arrow, drop the overlay. */
@media (hover: none) {
  .noir .h-card__meta {
    opacity: 1;
    transform: none;
    align-items: flex-start;
    justify-content: flex-end;
    background: none;
    padding: 10px;
  }
  .noir .h-arrow {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
  .noir .h-card__media { padding-top: 56px; }
  .noir .h-card__meta-text { display: none; }
}

.noir .h-card__label {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 24px;
  border-top: 1px solid var(--h-line);
}

@media (min-width: 560px) {
  .noir .h-card__label {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-inline: 24px;
  }
}

.noir .h-card__title {
  margin: 0;
  font-family: var(--h-archivo);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

.noir .h-card__title--lg { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.noir .h-card__text {
  max-width: 54ch;
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(var(--h-text-rgb), 0.58);
}

.noir .h-chip {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid rgba(var(--h-text-rgb), 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--h-text-rgb), 0.65);
}

.noir .h-chip--accent {
  border-color: rgba(var(--h-accent-rgb), 0.5);
  color: var(--h-accent-ink);
}

/* The "browse all" card */
.noir .h-card--all {
  justify-content: space-between;
  gap: 48px;
  min-height: 300px;
  padding: 32px;
  background: var(--h-coal);
}

@media (min-width: 768px) {
  .noir .h-card--all { padding: 40px; }
}

.noir .h-card--all__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.noir .h-card--all__label {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.5);
}

.noir .h-card--all__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--h-line-2);
  border-radius: 50%;
  font-size: 20px;
  transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.noir .h-card--all:hover .h-card--all__arrow {
  transform: rotate(45deg);
  border-color: var(--h-accent);
  background: var(--h-accent);
  color: var(--h-on-accent);
}

.noir .h-card--all__title {
  margin-bottom: 14px;
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
}

/* ============================================
   Tool index
   ============================================ */
.noir .h-index-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 72px 0 24px;
}

.noir .h-index-head__title {
  margin: 0;
  font-family: var(--h-archivo);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

.noir .h-filter {
  width: min(100%, 280px);
  padding: 11px 18px;
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--h-text);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.noir .h-filter::placeholder { color: rgba(var(--h-text-rgb), 0.45); }

.noir .h-filter:focus {
  outline: none;
  border-color: var(--h-accent-ink);
  box-shadow: 0 0 0 3px rgba(var(--h-accent-rgb), 0.2);
}

.noir .h-filter[hidden] { display: none; }

.noir .h-toolindex {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--h-line);
  border-radius: 18px;
  background: var(--h-line);
}

@media (min-width: 640px) {
  .noir .h-toolindex { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .noir .h-toolindex { grid-template-columns: repeat(4, 1fr); }
}

.noir .h-toolindex .tool-index__group {
  padding: 26px;
  background: var(--h-bg);
}

.noir .h-toolindex__title {
  margin: 0 0 16px;
  font-family: var(--h-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

.noir .h-toolindex__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.noir .h-toolindex .tool-index__link {
  font-size: 14.5px;
  line-height: 1.35;
  color: rgba(var(--h-text-rgb), 0.75);
  background-image: linear-gradient(var(--h-accent-ink), var(--h-accent-ink));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s ease, color 0.3s ease;
}

.noir .h-toolindex .tool-index__link:hover {
  color: var(--h-text);
  background-size: 100% 1px;
}

.noir .h-toolindex__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 26px;
  background: var(--h-bg);
  color: rgba(var(--h-text-rgb), 0.6);
}

.noir .h-toolindex__empty[hidden] { display: none; }

.noir .h-bridge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 16px 24px 16px 16px;
  border: 1px solid var(--h-line);
  border-radius: 20px;
  background: var(--h-coal);
}

@media (min-width: 768px) {
  .noir .h-bridge { border-radius: 999px; }
}

.noir .h-bridge__photo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid var(--h-accent);
  border-radius: 50%;
}

.noir .h-bridge__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--h-text-rgb), 0.7);
}

/* ============================================
   Hairline grids: specs, quotes, posts
   ============================================ */
.noir .h-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--h-line);
  border-radius: 18px;
  background: var(--h-line);
}

.noir .h-grid--specs { margin-top: 56px; }

@media (min-width: 640px) {
  .noir .h-grid--specs { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .noir .h-grid--specs { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .noir .h-grid--quotes,
  .noir .h-grid--posts { grid-template-columns: repeat(3, 1fr); }
}

.noir .h-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px;
  background: var(--h-bg);
}

.noir .h-cell__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.45);
}

.noir .h-cell__value {
  font-family: var(--h-archivo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--h-text);
}

.noir .h-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.noir .h-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(var(--h-text-rgb), 0.16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.6);
}

.noir .h-badge--accent {
  border-color: rgba(var(--h-accent-rgb), 0.5);
  color: var(--h-accent-ink);
}

.noir .h-quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 32px;
  background: var(--h-bg);
  transition: background-color 0.3s ease;
}

.noir .h-quote:hover { background: var(--h-coal); }

.noir .h-quote__stars {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--h-accent-ink);
}

.noir .h-quote__text {
  flex: 1;
  margin: 0;
  font-family: var(--h-archivo);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(var(--h-text-rgb), 0.86);
}

.noir .h-quote__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--h-line);
}

.noir .h-quote__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--h-accent);
  color: var(--h-on-accent);
  font-family: var(--h-display);
  font-size: 18px;
}

.noir .h-quote__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--h-text);
}

.noir .h-quote__role {
  display: block;
  font-size: 13px;
  color: rgba(var(--h-text-rgb), 0.5);
}

.noir .h-post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  padding: 32px;
  background: var(--h-bg);
  color: var(--h-text);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.noir .h-post:hover {
  background: var(--h-coal);
  color: var(--h-text);
}

.noir .h-post__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

.noir .h-post__title {
  margin: 0;
  font-family: var(--h-archivo);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

.noir .h-post__text {
  flex: 1;
  margin: 0;
  font-size: 15px;
  color: rgba(var(--h-text-rgb), 0.55);
}

.noir .h-post__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.noir .h-post__more .h-ico { transition: transform 0.3s ease; }
.noir .h-post:hover .h-post__more { color: var(--h-accent-ink); }
.noir .h-post:hover .h-post__more .h-ico { transform: translateX(4px); }

/* ============================================
   Hover-fill rows (method gates, comparisons)
   ============================================ */
.noir .h-rows { border-top: 1px solid var(--h-line); }

.noir .h-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px 14px;
  padding: 26px 10px;
  border-bottom: 1px solid var(--h-line);
  color: var(--h-text);
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.noir .h-row > :nth-child(n + 3) { grid-column: 2; }

@media (min-width: 768px) {
  .noir .h-row {
    grid-template-columns: 64px minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
    gap: 24px;
    padding: 34px 24px;
  }
  .noir .h-row > :nth-child(n + 3) { grid-column: auto; }
}

.noir .h-row__num {
  font-size: 14px;
  font-weight: 700;
  color: rgba(var(--h-text-rgb), 0.35);
  transition: color 0.35s ease;
}

.noir .h-row__title {
  margin: 0;
  font-family: var(--h-archivo);
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: inherit;
}

.noir .h-row--link .h-row__title {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
}

.noir .h-row__vs {
  font-style: italic;
  font-size: 0.62em;
  color: rgba(var(--h-text-rgb), 0.38);
  transition: color 0.35s ease;
}

.noir .h-row__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--h-text-rgb), 0.6);
  transition: color 0.35s ease;
}

.noir .h-row__chip {
  justify-self: start;
  padding: 6px 13px;
  border: 1px solid rgba(var(--h-text-rgb), 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--h-text-rgb), 0.72);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.noir .h-row__arrow {
  display: none;
  font-size: 28px;
  color: rgba(var(--h-text-rgb), 0.5);
  transition: transform 0.35s ease, color 0.35s ease;
}

@media (min-width: 768px) {
  .noir .h-row__chip { justify-self: end; }
  .noir .h-row__arrow { display: flex; justify-self: end; }
}

.noir .h-row:hover {
  background: var(--h-accent);
  color: var(--h-on-accent);
}

.noir .h-row:hover .h-row__num,
.noir .h-row:hover .h-row__text,
.noir .h-row:hover .h-row__vs,
.noir .h-row:hover .h-row__arrow {
  color: var(--h-on-accent);
}

.noir .h-row:hover .h-row__chip {
  border-color: var(--h-on-accent);
  color: var(--h-on-accent);
}

.noir .h-row:hover .h-row__arrow { transform: translateX(4px); }

.noir .h-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 28px;
  font-size: 14px;
  color: rgba(var(--h-text-rgb), 0.55);
}

/* ============================================
   07 Steps
   ============================================ */
.noir .h-steps {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 40px 0 0;
  list-style: none;
  border-top: 1px solid var(--h-line);
}

@media (min-width: 768px) {
  .noir .h-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.noir .h-step__num {
  display: block;
  margin-bottom: 20px;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  color: rgba(var(--h-text-rgb), 0.16);
  transition: color 0.35s ease;
}

.noir .h-step:hover .h-step__num { color: var(--h-accent-ink); }

.noir .h-step__title {
  margin: 0 0 8px;
  font-family: var(--h-archivo);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

.noir .h-step__text {
  max-width: 32ch;
  margin: 0;
  font-size: 15px;
  color: rgba(var(--h-text-rgb), 0.55);
}

/* ============================================
   08 FAQ (restyles the shared accordion)
   ============================================ */
.noir .h-faq {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .noir .h-faq {
    grid-template-columns: 4fr 8fr;
    align-items: start;
    gap: 64px;
  }
  .noir .h-faq__side {
    position: sticky;
    top: 120px;
  }
}

body.noir .h-faq__list {
  max-width: none;
  margin: 0;
  gap: 0;
  border-top: 1px solid var(--h-line);
}

body.noir .h-faq__list .faq-item {
  border: 0;
  border-bottom: 1px solid var(--h-line);
  border-radius: 0;
  background: transparent;
}

body.noir .h-faq__list .faq-question {
  padding: 24px 0;
  gap: 24px;
  font-family: var(--h-archivo);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--h-text);
}

body.noir .h-faq__list .faq-question:hover { color: var(--h-accent-ink); }

body.noir .h-faq__list .faq-question__icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--h-line-2);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--h-text);
  transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.noir .h-faq__list .faq-item.active .faq-question__icon {
  transform: rotate(45deg);
  border-color: var(--h-accent);
  background: var(--h-accent);
  color: var(--h-on-accent);
}

body.noir .h-faq__list .faq-answer__inner {
  padding: 0 60px 26px 0;
}

body.noir .h-faq__list .faq-answer__inner p {
  max-width: 62ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(var(--h-text-rgb), 0.65);
}

body.noir .h-faq__list .faq-answer__inner a { color: var(--h-accent-ink); }

/* ============================================
   09 CTA
   ============================================ */
.noir .h-cta {
  position: relative;
  overflow: hidden;
  padding-block: 112px;
  border-top: 1px solid var(--h-line);
  text-align: center;
}

.noir .h-cta::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 720px;
  height: 480px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--h-glow);
  filter: blur(120px);
  pointer-events: none;
}

.noir .h-cta > .h-wrap {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .noir .h-cta { padding-block: 168px; }
}

.noir .h-cta__title {
  max-width: 13ch;
  margin: 24px auto 0;
  font-size: clamp(3.2rem, 11vw, 10.5rem);
}

.noir .h-cta__text {
  max-width: 36rem;
  margin: 32px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.65);
}

.noir .h-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .noir .h-cta__actions { flex-direction: row; }
}

/* ============================================
   Footer (restyles the shared component)
   ============================================ */
body.noir .site-footer {
  padding: 80px 0 32px;
  border-top: 1px solid var(--h-line);
  background: var(--h-coal);
}

body.noir .site-footer::before { display: none; }

body.noir .site-footer > .container {
  max-width: 1320px;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  body.noir .site-footer > .container { padding-inline: 32px; }
}

body.noir .footer-grid {
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 56px;
}

@media (min-width: 640px) {
  body.noir .footer-grid { grid-template-columns: repeat(2, 1fr); }
  body.noir .footer-grid > .footer__brand { grid-column: 1 / -1; }
  body.noir .footer-grid > div:last-child { grid-column: auto; }
}

@media (min-width: 1100px) {
  body.noir .footer-grid { grid-template-columns: 1.5fr 0.8fr 1.4fr 1.8fr 1.6fr; gap: 32px; }
  body.noir .footer-grid > .footer__brand { grid-column: auto; }
}

body.noir .footer__tagline {
  max-width: 30ch;
  margin: 0 0 20px;
  font-size: 16.5px;
  color: rgba(var(--h-text-rgb), 0.55);
}

body.noir .site-footer h2 {
  margin: 0 0 18px;
  font-family: var(--h-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.4);
}

body.noir .footer__links { gap: 10px; }

body.noir .footer__links a,
body.noir .footer__social a {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: 16px;
  color: rgba(var(--h-text-rgb), 0.72);
  background-image: linear-gradient(var(--h-accent-ink), var(--h-accent-ink));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s ease, color 0.3s ease;
}

body.noir .footer__links a:hover,
body.noir .footer__social a:hover {
  color: var(--h-text);
  background-size: 100% 1px;
}

body.noir .footer__newsletter-text {
  margin: 0 0 14px;
  font-size: 15px;
  color: rgba(var(--h-text-rgb), 0.55);
}

body.noir .footer-newsletter {
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(var(--h-text-rgb), 0.16);
  border-radius: 999px;
}

body.noir .footer-newsletter:focus-within { border-color: var(--h-accent-ink); }

body.noir .footer-newsletter__input {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font-size: 14px;
}

body.noir .footer-newsletter__input:focus { outline: none; }

body.noir .footer-newsletter .btn {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--h-accent);
  color: var(--h-on-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

body.noir .footer-newsletter .btn:hover {
  background: var(--h-accent-hover-bg);
  color: var(--h-accent-hover-text);
}

body.noir .footer-bottom {
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--h-line);
  font-size: 14px;
  color: rgba(var(--h-text-rgb), 0.45);
}

body.noir .footer-bottom p {
  margin: 0;
  color: inherit;
}

body.noir .footer-bottom a { color: rgba(var(--h-text-rgb), 0.6); }
body.noir .footer-bottom a:hover { color: var(--h-accent-ink); }

/* ============================================
   Russian. Anton has no Cyrillic, so /ru/ falls back to Oswald, which is
   wider and has tall accents (Й): smaller headlines with looser leading.
   ============================================ */
html[lang="ru"] body.noir .h-display { line-height: 1; }

html[lang="ru"] body.noir .h-hero__title {
  font-size: clamp(2.5rem, 9vw, 9rem);
}

html[lang="ru"] body.noir .h-head__title { font-size: clamp(2.2rem, 6vw, 4.75rem); }
html[lang="ru"] body.noir .h-cta__title { font-size: clamp(2.6rem, 8vw, 7.5rem); }
html[lang="ru"] body.noir .h-card--all__title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }

/* ============================================
   Free-tools section cards (three families, replacing the two
   single-tool cards) and the footer's "Email Hayk" button.
   ============================================ */
.noir .h-cards--three { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .noir .h-cards--three { grid-template-columns: repeat(3, 1fr); }
}

.noir .h-card--sec {
  justify-content: space-between;
  gap: 40px;
  min-height: 300px;
  padding: 30px;
  background: var(--h-coal);
}

@media (min-width: 768px) {
  .noir .h-card--sec { padding: 36px; }
}

.noir .h-card--sec__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.noir .h-card--sec__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.5);
}

.noir .h-card--sec__title {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
}

.noir .h-card--sec__list {
  display: block;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--h-line);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.45);
}

.noir .h-card--sec:hover .h-card--all__arrow {
  transform: rotate(45deg);
  border-color: var(--h-accent);
  background: var(--h-accent);
  color: var(--h-on-accent);
}

body.noir .footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--h-text);
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.noir .footer__mail:hover {
  transform: translateY(-2px);
  border-color: var(--h-accent-ink);
  color: var(--h-accent-ink);
  background-size: 0 0;
}

body.noir .footer__mail-ico { flex-shrink: 0; }

/* The article share row: the X button is its logo alone, no stray letter. */
body.noir .article-share__btn--twitter { gap: 0; }

/* ============================================
   Inner pages (pricing, blog, contact, and anything else that opts in
   with class="noir"). These restyle the site's existing markup rather
   than replacing it, so the Russian copies need no re-translation.
   ============================================ */
body.noir .container { max-width: 1320px; }

@media (min-width: 768px) {
  body.noir .container { padding-inline: 32px; }
}

body.noir .section { padding-block: 88px; }
body.noir .section--alt { background: var(--h-coal); }
body.noir .section--no-top { padding-top: 0; }

@media (min-width: 768px) {
  body.noir .section { padding-block: 120px; }
}

/* Breadcrumbs */
body.noir .breadcrumbs {
  padding-top: 118px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.noir .breadcrumbs a { color: rgba(var(--h-text-rgb), 0.55); }
body.noir .breadcrumbs a:hover { color: var(--h-accent-ink); }

/* Page hero */
body.noir .hero--compact {
  position: relative;
  padding: 40px 0 0;
  overflow: hidden;
}

body.noir .hero--compact::before,
body.noir .hero--compact::after { display: none; }

body.noir .hero--compact h1 {
  font-family: var(--h-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--h-text);
  margin-bottom: 20px;
}

body.noir .hero--compact h1 span { color: var(--h-accent-ink); }

/* The compact hero is centred — the h1 is, the container is — but the two
   paragraphs under it were not. They were narrow blocks pinned to the left
   of a 720px content box with centred text inside them, which reads as text
   that has slipped off-centre rather than as a deliberate left column. And
   34ch is too narrow for 22px type: the tools hub's lede broke into five
   stubby lines. */
body.noir .hero--compact .hero__subtitle {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 14px;
  font-family: var(--h-archivo);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(var(--h-text-rgb), 0.82);
}

body.noir .hero--compact .hero__text {
  max-width: 62ch;
  margin-inline: auto;
  font-size: 16px;
  color: rgba(var(--h-text-rgb), 0.58);
}

body.noir html[lang="ru"] .hero--compact h1,
html[lang="ru"] body.noir .hero--compact h1 {
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height: 1;
}

/* Section headers */
body.noir .section-header h2,
body.noir .section-head h2 {
  font-family: var(--h-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 4.25rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--h-text);
}

body.noir .section-header p,
body.noir .section-head p { color: rgba(var(--h-text-rgb), 0.55); }

/* Buttons */
body.noir .btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.noir .btn:hover { transform: translateY(-2px); }

body.noir .btn--primary {
  border: 0;
  background: var(--h-accent);
  color: var(--h-on-accent);
  box-shadow: none;
}

body.noir .btn--primary:hover {
  background: var(--h-accent-hover-bg);
  color: var(--h-accent-hover-text);
}

body.noir .btn--secondary {
  border: 1px solid var(--h-line-2);
  background: none;
  color: var(--h-text);
}

body.noir .btn--secondary:hover {
  border-color: var(--h-accent-ink);
  background: none;
  color: var(--h-accent-ink);
}

/* Cards: pricing, blog, generic */
body.noir .pricing-card,
body.noir .blog-card,
body.noir .contact-info,
body.noir .card {
  border: 1px solid var(--h-line);
  border-radius: 18px;
  background: var(--h-slate);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

body.noir .pricing-card:hover,
body.noir .blog-card:hover,
body.noir .card:hover {
  border-color: rgba(var(--h-accent-rgb), 0.45);
  transform: translateY(-3px);
}

body.noir .pricing-card--featured {
  border-color: rgba(var(--h-accent-rgb), 0.5);
  background: var(--h-coal);
}

body.noir .pricing-card__name {
  font-family: var(--h-archivo);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

body.noir .pricing-card__price {
  font-family: var(--h-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--h-text);
}

body.noir .pricing-card__per {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

body.noir .pricing-card__detail { color: rgba(var(--h-text-rgb), 0.72); }
body.noir .pricing-card__detail span { color: var(--h-accent-ink); }

body.noir .pricing-badge {
  border-radius: 999px;
  background: var(--h-accent);
  color: var(--h-on-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: none;
}

body.noir .blog-card__title {
  font-family: var(--h-archivo);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-text);
}

body.noir .blog-card__excerpt { color: rgba(var(--h-text-rgb), 0.55); }

body.noir .blog-card__meta,
body.noir .blog-card__link {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

/* Forms */
body.noir .form-group input,
body.noir .form-group textarea,
body.noir .form-group select,
body.noir .blog-search__input {
  border: 1px solid var(--h-line-2);
  border-radius: 14px;
  background: var(--h-slate);
  color: var(--h-text);
  font-family: var(--h-body);
}

body.noir .blog-search__input { border-radius: 999px; }

body.noir .form-group input:focus,
body.noir .form-group textarea:focus,
body.noir .form-group select:focus,
body.noir .blog-search__input:focus {
  outline: none;
  border-color: var(--h-accent-ink);
  box-shadow: 0 0 0 3px rgba(var(--h-accent-rgb), 0.2);
}

body.noir .form-group label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.55);
}

body.noir .contact-info__item { color: rgba(var(--h-text-rgb), 0.7); }
body.noir .contact-info__item a { color: var(--h-accent-ink); }

/* Closing CTA band */
body.noir .cta-banner {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--h-line);
  padding-block: 104px;
  background: none;
}

body.noir .cta-banner::before,
body.noir .cta-banner::after { display: none; }

body.noir .cta-banner h2 {
  font-family: var(--h-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--h-text);
}

body.noir .cta-banner p {
  max-width: 34rem;
  margin-inline: auto;
  color: rgba(var(--h-text-rgb), 0.65);
}

/* Category chips and tags used across the inner pages */
body.noir .chip,
body.noir .blog-filter__btn {
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
  color: rgba(var(--h-text-rgb), 0.7);
  background: none;
}

body.noir .blog-filter__btn.active,
body.noir .blog-filter__btn:hover {
  border-color: var(--h-accent);
  background: var(--h-accent);
  color: var(--h-on-accent);
}

/* Language switcher, left of the theme toggle. */
body.noir .lang-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(var(--h-text-rgb), 0.6);
  transition: border-color 0.3s ease;
}

body.noir .lang-switch:hover { border-color: var(--h-accent-ink); }

body.noir .lang-switch span {
  padding: 8px 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.noir .lang-switch__on {
  background: var(--h-accent);
  color: var(--h-on-accent);
}

body.noir .lang-switch--ru .lang-switch__on {
  background: none;
  color: rgba(var(--h-text-rgb), 0.6);
}

body.noir .lang-switch--ru .lang-switch__off {
  background: var(--h-accent);
  color: var(--h-on-accent);
}

@media (max-width: 400px) {
  body.noir .lang-switch span { padding: 7px 8px; }
}

/* ============================================
   Service card artwork (icons instead of mock screens)
   ============================================ */
.noir .h-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  padding: 12px;
  text-align: center;
}

.noir .h-art__caption {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.45);
}

.noir .h-art svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The exchange ring: A -> B -> C -> A, with B as the client's site. */
.noir .h-art--ring,
.noir .h-art--audit {
  gap: 0;
  height: 100%;
  padding: 0;
}

/* Fit the drawing to whatever the card gives it, never crop it. */
.noir .h-ring,
.noir .h-audit {
  width: 100%;
  height: 100%;
  max-height: 340px;
}

.noir .h-ring__flow {
  fill: none;
  stroke: rgba(var(--h-accent-rgb), 0.85);
  stroke-width: 2.2;
  stroke-linecap: round;
  color: rgba(var(--h-accent-rgb), 0.85);
}

.noir .h-ring__node circle {
  fill: var(--h-bg);
  stroke: var(--h-line-2);
  stroke-width: 1.5;
  transition: stroke 0.4s ease, fill 0.4s ease;
}

.noir .h-ring__node text {
  font-family: var(--h-archivo);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-anchor: middle;
  fill: rgba(var(--h-text-rgb), 0.8);
  stroke: none;
}

.noir .h-ring__sub {
  font-family: var(--h-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--h-accent-ink);
}

.noir .h-ring__glyph {
  fill: none;
  stroke: rgba(var(--h-text-rgb), 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke 0.4s ease;
}

.noir .h-ring__glyph .h-ring__dot {
  fill: rgba(var(--h-text-rgb), 0.55);
  stroke: none;
}

.noir .h-ring__node--you circle {
  fill: var(--h-accent);
  stroke: var(--h-accent);
}

.noir .h-ring__node--you .h-ring__glyph { stroke: var(--h-on-accent); }
.noir .h-ring__node--you .h-ring__glyph .h-ring__dot { fill: var(--h-on-accent); }
.noir .h-ring__node--you text { fill: var(--h-text); }

.noir .h-card:hover .h-ring__node:not(.h-ring__node--you) circle {
  stroke: rgba(var(--h-accent-rgb), 0.6);
}

/* The audit: a report with a trend line, a lens and a slice. */
.noir .h-audit__sheet rect,
.noir .h-audit__sheet path,
.noir .h-audit__lens circle,
.noir .h-audit__lens path,
.noir .h-audit__pie circle,
.noir .h-audit__pie path {
  fill: none;
  stroke: rgba(var(--h-text-rgb), 0.45);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.noir .h-audit__sheet > rect {
  fill: var(--h-bg);
  stroke: var(--h-line-2);
}

.noir .h-audit__bars rect {
  fill: rgba(var(--h-accent-rgb), 0.28);
  stroke: none;
}

.noir .h-audit__bars .h-audit__bar--on { fill: var(--h-accent); }

.noir .h-audit__trend {
  stroke: var(--h-accent);
  stroke-width: 3;
  color: var(--h-accent);
}

.noir .h-audit__lens circle:first-child {
  fill: var(--h-bg);
  stroke: var(--h-accent);
  stroke-width: 2.4;
}

.noir .h-audit__lens-inner {
  stroke: rgba(var(--h-accent-rgb), 0.35) !important;
  stroke-width: 1.4 !important;
}

.noir .h-audit__lens path {
  stroke: var(--h-accent);
  stroke-width: 4;
}

.noir .h-audit__pie circle {
  fill: var(--h-bg);
  stroke: var(--h-line-2);
}

.noir .h-audit__slice {
  fill: var(--h-accent) !important;
  stroke: none !important;
}

.noir .h-audit__sheet,
.noir .h-audit__lens,
.noir .h-audit__pie { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

.noir .h-card:hover .h-audit__lens { transform: translate(-6px, 4px); }
.noir .h-card:hover .h-audit__pie { transform: translate(330px, 246px) scale(1.04); }

/* ============================================
   Tool-category tabs
   ============================================ */
.noir .h-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.noir .h-tab {
  padding: 11px 20px;
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
  background: none;
  font-family: var(--h-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.65);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.noir .h-tab:hover {
  transform: translateY(-2px);
  border-color: var(--h-accent-ink);
  color: var(--h-accent-ink);
}

.noir .h-tab.is-active {
  border-color: var(--h-accent);
  background: var(--h-accent);
  color: var(--h-on-accent);
}

.noir .h-toolindex[hidden] { display: none; }

.noir .h-toolindex--soon { grid-template-columns: 1fr; }

.noir .h-toolindex__note {
  max-width: 46ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.55);
}

/* ============================================
   About page
   ============================================ */
body.noir .about-layout {
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1080px;
}

@media (min-width: 860px) {
  body.noir .about-layout {
    grid-template-columns: 380px 1fr;
    gap: 64px;
  }
}

body.noir .about-photo {
  position: relative;
  top: auto;
  max-width: 420px;
  margin: 0 auto;
}

@media (min-width: 860px) {
  body.noir .about-photo {
    position: sticky;
    top: 128px;
  }
}

/* The frame: a hairline card with one green corner rule behind it. */
body.noir .about-photo::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid rgba(var(--h-accent-rgb), 0.55);
  border-radius: 22px;
  pointer-events: none;
}

body.noir .about-photo__img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  border: 1px solid var(--h-line);
  border-radius: 22px;
  background: var(--h-slate);
  box-shadow: var(--h-shadow);
}

body.noir .about-photo__img:hover { filter: none; }

body.noir .about-content p { color: rgba(var(--h-text-rgb), 0.72); }

body.noir .about-content blockquote {
  border-left: 2px solid var(--h-accent);
  font-family: var(--h-archivo);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--h-text);
}

body.noir .hero:not(.hero--compact) h1 {
  font-family: var(--h-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

body.noir .hero:not(.hero--compact) h1 span { color: var(--h-accent-ink); }

/* Dropdown: three tool families side by side. */
body.noir .nav__menu-grid--3 { grid-template-columns: repeat(3, 1fr); }

body.noir .nav__menu-soon {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(var(--h-text-rgb), 0.45);
}

@media (max-width: 700px) {
  body.noir .nav__menu-grid--3 { grid-template-columns: 1fr; }
}

/* The pill is meant to hold a logo, a language switch, a theme toggle and a
   hamburger. The "Book a Call" button was still in it on a phone: style.css
   hides .nav__cta under 768px at specificity (0,1,0), and `body.noir .btn`
   sets display at (0,2,1), so the noir theme quietly un-hid it on every
   page. Five controls in 366px is what made the header look broken on a
   phone, and the button is not lost — it is the last item in the menu the
   hamburger opens. */
@media (max-width: 768px) {
  body.noir .nav__cta,
  body.noir .nav__cta.btn { display: none; }
}

/* Phones: the pill holds a logo, a language switch, a theme toggle and a
   hamburger, so the wordmark steps aside and the rest tightens up. */
@media (max-width: 460px) {
  body.noir .nav {
    gap: 0.55rem;
    padding: 8px 8px 8px 10px;
  }
  body.noir .nav__logo span { display: none; }
  body.noir .nav__logo img { width: 34px; height: 34px; }
  body.noir .theme-toggle { width: 38px; height: 38px; }
  body.noir .lang-switch { font-size: 11px; }
  body.noir .lang-switch span { padding: 7px 8px; }
}

/* ============================================================
   Phone rhythm
   ============================================================
   The noir spacing scale was set on a desktop: 120px between sections,
   dropping to 88px below 768px. On a 390px screen 88px above and below
   each section is 176px of empty canvas between blocks — a fifth of the
   viewport, repeated five or six times down a tool page. It reads as
   unfinished rather than airy, and it is most of why the site felt worse
   on a phone than on a laptop.

   Tightened only below 560px, so tablets and large phones keep the
   designed rhythm.
   ============================================================ */
@media (max-width: 560px) {
  body.noir .section { padding-block: 60px; }
  body.noir .hero--compact { padding-top: 28px; }
  body.noir .hero--compact .hero__text { margin-bottom: 8px; }

  /* The breadcrumb, the h1 and the lede are one unit; they do not need the
     same separation as two unrelated sections. */
  body.noir .breadcrumbs { padding-block: 12px; }
}

/* ============================================================
   Tool hub, eighty-five tools
   ============================================================
   The hub was a flat list of eighteen. At eighty-five it needs the same
   three family tabs the homepage uses, a count on each, and a lede under
   every category heading so the groups are scannable rather than a wall.
   ============================================================ */
body.noir .tool-index-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 2.25rem;
}

body.noir .h-tab__n {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(var(--h-text-rgb), 0.1);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
}
body.noir .h-tab.is-active .h-tab__n { background: rgba(0, 0, 0, 0.18); }

body.noir .tool-index__lede {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.5);
  max-width: 62ch;
}

body.noir .h-toolindex__more { margin-top: 1.25rem; }

/* "All 26 traveling tools →" at the foot of each dropdown column. */
body.noir .nav__menu-link--all {
  margin-top: 0.35rem;
  color: var(--h-accent-ink);
  font-weight: 600;
}

/* The hub filter sits beside the tabs rather than under them. */
@media (max-width: 560px) {
  body.noir .tool-index-controls { gap: 0.5rem; margin: 1.5rem 0 1.75rem; }
  body.noir .tool-index-controls .h-filter { width: 100%; }
}

/* The hub's list items read as plain text: the same weight and colour as
   the description under them, with no underline. On a page that is almost
   entirely links, nothing looked clickable. */
body.noir .tool-index__list .tool-index__link {
  font-family: var(--h-archivo);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--h-text);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
body.noir .tool-index__list .tool-index__link:hover,
body.noir .tool-index__list .tool-index__link:focus-visible {
  color: var(--h-accent-ink);
  border-bottom-color: var(--h-accent-ink);
}
body.noir .tool-index__list li { margin-bottom: 1.1rem; }
body.noir .tool-index__list li:last-child { margin-bottom: 0; }
body.noir .tool-index__note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(var(--h-text-rgb), 0.55);
  max-width: 66ch;
}

/* ============================================================
   Free Tools dropdown — long names must stay inside the panel
   ============================================================
   Two things pushed the text out of the box, and both only showed up once
   the columns filled with real tool names:

   - `.nav__links a { white-space: nowrap }` is meant for the top-level nav
     items, where wrapping "Pricing" would look silly. It cascades into the
     dropdown, where "Anchor Text Distribution Checker" cannot fit a
     183px column and simply ran past the panel's rounded edge.
   - `.nav__menu-link` carries `margin-left: -0.5rem` so the hover highlight
     bleeds into the gutter, but with no matching right margin the box ends
     up 8px wider than its column and hangs over the right edge.

   The panel gets more room, the columns size to their content, the bleed is
   symmetric, and wrapping is allowed as the backstop so a name added later
   can never spill again.
   ============================================================ */
/* Desktop only. Inside the mobile panel the menu is a full-width accordion,
   and an unscoped version of these two rules gave it three 114px columns in
   a 319px drawer and pushed the panel 81px off the screen edge. */
@media (min-width: 769px) {
  body.noir .nav__menu {
    width: min(94vw, 760px);
  }

  body.noir .nav__menu-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

body.noir .nav__links .nav__menu-link {
  white-space: normal;
  margin-inline: -0.5rem;
  overflow-wrap: break-word;
  line-height: 1.35;
}

@media (max-width: 768px) {
  /* In the drawer the menu is part of the list, not a floating panel. */
  body.noir .nav__menu {
    width: 100%;
    padding: 0.5rem 0 0.75rem;
  }
  body.noir .nav__menu-grid--3 { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ============================================================
   Homepage tool index — cards, not a border grid
   ============================================================
   The panel drew its dividers with the gap-as-border trick: a 1px grid gap
   over a border-coloured background, each cell painting itself back in. It
   is a good trick when the cell count divides evenly into the columns, and
   it falls apart when it does not — every leftover slot renders as a solid
   block of border colour. With four columns and six categories that is two
   grey rectangles, and the "All 48 SEO tools" link sat in a seventh cell
   236px wide and 190px tall holding a single line of text.

   Each cell carries its own border now and the grid uses a real gap, so a
   short last row is simply fewer cards rather than a hole. The counts
   differ per family — six categories for SEO, five for travel, two for the
   rest — so no fixed column count would have made all three tile cleanly.
   ============================================================ */
.noir .h-toolindex {
  gap: 14px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .noir .h-toolindex { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.noir .h-toolindex .tool-index__group {
  padding: 22px 24px;
  border: 1px solid var(--h-line);
  border-radius: 14px;
  background: var(--h-bg);
  transition: border-color var(--transition);
}

.noir .h-toolindex .tool-index__group:hover { border-color: var(--h-line-2); }

/* The "All 48 SEO tools" link is a footer for the panel, not a category. */
.noir .h-toolindex__more {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.noir .h-toolindex__empty {
  border: 1px solid var(--h-line);
  border-radius: 14px;
  padding: 22px 24px;
}

/* ============================================================
   Tool hub — every category in one row
   ============================================================
   The panel inherited a fixed four-column grid, so six SEO categories
   wrapped into a row of four and a row of two: two tables stacked, which
   reads as two separate things rather than one index. The family counts
   differ — six for SEO, five for travel, two for the rest — so no fixed
   column count tiles all three.

   grid-auto-flow: column lets the row take however many categories there
   are. Below 1200px that would squeeze them past readability, so it steps
   back down to a wrapping grid.
   ============================================================ */
/* Between tablet and 1200px there is not room for one row, and the
   inherited four-column grid put six categories into a row of four and a
   row of two — the same lopsided shape as before, just at a narrower
   window. Three columns divides six evenly and reads as a deliberate grid
   rather than a row that ran out of space. */
@media (min-width: 900px) and (max-width: 1199px) {
  body.noir .tool-index[role="tabpanel"]:not(.h-toolindex) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  body.noir .tool-index[role="tabpanel"]:not(.h-toolindex) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 2rem 1.75rem;
    align-items: start;
  }
}

/* The hub's section is narrower than the tool list now needs. Let it use
   the full width available rather than the prose measure. */
@media (min-width: 1200px) {
  body.noir .section--alt .container:has(.tool-index[role="tabpanel"]:not(.h-toolindex)) {
    max-width: 1500px;
  }
}

/* Six columns means less room per column, so the descriptions tighten
   rather than overflow into a very tall thin stack. */
@media (min-width: 1200px) {
  body.noir .tool-index[role="tabpanel"]:not(.h-toolindex) .tool-index__note {
    font-size: 0.8rem;
    line-height: 1.5;
  }
  body.noir .tool-index[role="tabpanel"]:not(.h-toolindex) .tool-index__lede {
    font-size: 0.82rem;
  }
  body.noir .tool-index[role="tabpanel"]:not(.h-toolindex) .tool-index__list .tool-index__link {
    font-size: 0.92rem;
  }
}

/* ============================================================
   The pill on a phone
   ============================================================
   `.nav` is justify-content: space-between, which is right when the left
   side is a logo plus a wordmark and the right side is a group of
   controls. Below 460px the wordmark is hidden, so the pill became four
   lone controls with the slack shared evenly between them — a logo mark,
   70px of nothing, EN/RU, 70px of nothing, a moon, 70px of nothing, a
   hamburger. Every gap identical and none of them meaningful.

   The logo belongs on the left and the controls belong together on the
   right, so the slack goes in one place instead of three.
   ============================================================ */
@media (max-width: 768px) {
  body.noir .nav { justify-content: flex-start; }
  body.noir .lang-switch { margin-left: auto; }
}

/* The wordmark fits comfortably to 400px once the controls are grouped;
   it was being dropped at 460px, which is what left the mark stranded. */
@media (max-width: 400px) {
  body.noir .nav__logo span { display: none; }
}
@media (min-width: 401px) and (max-width: 460px) {
  body.noir .nav__logo span { display: inline; font-size: 17px; }
}

/* In the drawer, "Free Tools" sat left-aligned with its caret pushed to the
   far edge while every other item was centred. */
@media (max-width: 768px) {
  body.noir .nav__links .nav__toggle {
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
  }
  body.noir .nav__menu-title { text-align: center; }
  body.noir .nav__links .nav__menu-link { text-align: center; margin-inline: 0; }
}

/* The count beside a category heading: four tools are shown, this says how
   many there are. Without it "Technical" listing four of eight reads as the
   whole category rather than a sample. */
.noir .h-toolindex__count {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(var(--h-text-rgb), 0.08);
  color: rgba(var(--h-text-rgb), 0.55);
  font-size: 0.85em;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* While a filter is active the results span every family, so the tab strip
   is not describing what is on screen. Dim it rather than leave a tab
   looking selected over results it did not produce. */
.noir.is-filtering .h-tabs { opacity: 0.45; }
.noir.is-filtering .h-tab { pointer-events: auto; }
.noir .h-toolindex__empty { margin-top: 1.25rem; }

/* ============================================================
   Footer tool index — all 85, every page
   ============================================================
   A <details> rather than a plain block. Eighty-five links is a reasonable
   thing to put at the foot of a desktop page and an unreasonable thing to
   make someone scroll past on a phone, so it ships shut and js/main.js
   opens it on wide screens. The links are in the DOM either way, so
   collapsing it hides nothing from a crawler.
   ============================================================ */
.noir .footer-tools {
  border-bottom: 1px solid var(--h-line);
  margin-bottom: 44px;
  padding-bottom: 8px;
}

.noir .footer-tools__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 4px 0 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--h-archivo);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--h-text-rgb), 0.55);
  transition: color var(--transition);
}
.noir .footer-tools__summary::-webkit-details-marker { display: none; }
.noir .footer-tools__summary:hover { color: var(--h-text); }
.noir .footer-tools__summary:focus-visible {
  outline: 2px solid var(--h-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* A chevron that turns, rather than the UA triangle. */
.noir .footer-tools__chev {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.noir .footer-tools[open] .footer-tools__chev { transform: rotate(-135deg); }

.noir .footer-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 30px 26px;
  padding-bottom: 36px;
}

.noir .footer-tools__title {
  margin: 0 0 12px;
  font-family: var(--h-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--h-accent-ink);
}

.noir .footer-tools__link {
  display: block;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(var(--h-text-rgb), 0.6);
  transition: color var(--transition);
}
.noir .footer-tools__link:hover,
.noir .footer-tools__link:focus-visible { color: var(--h-text); }
.noir .footer-tools__link:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .noir .footer-tools__grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .noir .footer-tools__link { font-size: 13px; }
}

@media (pointer: coarse) {
  .noir .footer-tools__summary { min-height: 44px; }
  .noir .footer-tools__link { padding-block: 2px; }
}