/* ============================================================
   RATING GRUNTA 2026 — Editorial Soil
   ============================================================
   Design system: paper-like, brutalist editorial, oversized
   serifs, technical mono numbers, no rounded corners,
   no drop shadows, hairlines instead of borders.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root {

  /* Palette - "soil materiality" */
  --paper:        #F3EFE6;   /* aged paper bg */
  --paper-warm:   #E8E0CC;   /* secondary bg, lime hint */
  --ink:          #171614;   /* graphite text */
  --ink-soft:     #2A2620;   /* secondary text */
  --soil:         #2A1F18;   /* deep chernozem */
  --terracotta:   #A84F2A;   /* accent / hyperlinks */
  --chlorophyll:  #3D5C2E;   /* alive / growth */
  --rust:         #8C3A1C;   /* hover state */
  --line:         rgba(23, 22, 20, 0.18);  /* hairline */
  --line-strong:  rgba(23, 22, 20, 0.45);

  /* Type */
  --ff-display: 'Fraunces', 'Times New Roman', serif;
  --ff-body:    'Instrument Serif', 'Georgia', serif;
  --ff-mono:    'JetBrains Mono', 'Menlo', monospace;

  /* Sizes - DELIBERATELY non-standard */
  --fs-mega:    clamp(52px, 8.5vw, 148px);
  --fs-h1:      clamp(56px, 10vw, 180px);
  --fs-h2:      clamp(40px, 6.5vw, 110px);
  --fs-h3:      clamp(28px, 3.5vw, 56px);
  --fs-h4:      clamp(20px, 2vw, 32px);
  --fs-body:    19px;
  --fs-body-l:  22px;
  --fs-caption: 11px;
  --fs-data:    14px;

  /* Spacing - based on baseline 8 */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  128px;
  --s-9:  192px;

  /* Layout */
  --gutter: clamp(20px, 4vw, 64px);
  --maxw:   1440px;

  /* Motion */
  --ease:   cubic-bezier(.2, .8, .2, 1);
  --ease-s: cubic-bezier(.7, 0, .3, 1);
}

/* ============================================================
   2. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  cursor: none;  /* custom cursor */
  overflow-x: hidden;
}

@media (max-width: 900px) {
  body { cursor: auto; }
  .cursor-dot { display: none; }
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ol, ul { list-style: none; padding: 0; margin: 0; }

/* Selection */
::selection { background: var(--terracotta); color: var(--paper); }

/* ============================================================
   3. GRAIN / TEXTURE OVERLAY
   Adds the "soil materiality" feeling
============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   4. UTILITIES
============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.tag--quiet { opacity: 0.55; }

.data {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum";
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
}

.section-label .dot { opacity: 0.5; }

.section-title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--fs-h2);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 24px 0 0;
  color: var(--soil);
}

.section-title--italic {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--terracotta);
}

/* ============================================================
   5. CURSOR
============================================================ */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--soil);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease), height 0.25s var(--ease);
}

.cursor-dot.is-hover {
  width: 60px;
  height: 60px;
  background: var(--terracotta);
}

/* ============================================================
   6. PROGRESS BAR
============================================================ */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--soil);
  z-index: 9998;
  transition: width 0.08s linear;
}

/* ============================================================
   7. TOP NAV (sticky after scroll)
============================================================ */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: 14px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}

.top-nav.is-visible { transform: translateY(0); }

.top-nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.top-nav__mark {
  font-size: 18px;
  color: var(--terracotta);
  letter-spacing: 0;
  transform: translateY(1px);
}

.top-nav__year {
  opacity: 0.5;
}

.top-nav__links {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
}

.top-nav__links a {
  position: relative;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease);
}

.top-nav__links a:hover { opacity: 1; color: var(--terracotta); }

.top-nav__cta {
  justify-self: end;
  padding: 8px 14px;
  background: var(--soil);
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.14em;
  transition: background 0.2s var(--ease);
}

.top-nav__cta:hover { background: var(--terracotta); }

@media (max-width: 900px) {
  .top-nav { grid-template-columns: 1fr auto; }
  .top-nav__links { display: none; }
}

/* ============================================================
   8. BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s var(--ease);
  border: 1px solid var(--ink);
  white-space: nowrap;
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
}

.btn--solid:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: translateX(4px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateX(4px);
}

.btn__arrow {
  font-family: var(--ff-display);
  font-size: 16px;
  letter-spacing: 0;
}

/* ============================================================
   9. BLOCK 1 — HERO
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: var(--s-3) var(--gutter) var(--s-3);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-3);
  background: var(--paper);
  overflow: hidden;
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.hero__meta-left,
.hero__meta-right {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

/* The mega-headline */
.hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-mega);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--soil);
  align-self: center;
}

.hero__title-line {
  display: block;
}

.hero__title-line:nth-child(1) {
  margin-left: 0;
}

.hero__title-line:nth-child(2) {
  margin-left: 10vw;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--terracotta);
}

.hero__title-line:nth-child(3) {
  margin-left: 3vw;
}

.hero__title-line:nth-child(4) {
  margin-left: 18vw;
  color: var(--chlorophyll);
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 700px) {
  .hero__title-line:nth-child(2) { margin-left: 8vw; }
  .hero__title-line:nth-child(3) { margin-left: 2vw; }
  .hero__title-line:nth-child(4) { margin-left: 12vw; }
}

/* Bottom of hero - intro + stats */
.hero__base {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-6);
  align-items: end;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .hero__base { grid-template-columns: 1fr; gap: var(--s-4); }
}

.hero__intro {
  max-width: 620px;
}

.hero__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
}

.hero__ctas {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-4);
  border-left: 1px solid var(--line);
  padding-left: var(--s-4);
}

@media (max-width: 900px) {
  .hero__stats {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--s-3);
  }
}

.stat__num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(48px, 5vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--soil);
}

.stat__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.7;
  line-height: 1.4;
}

/* Marquee (running text) */
.marquee {
  margin: var(--s-5) calc(var(--gutter) * -1) calc(var(--s-3) * -1);
  padding: var(--s-3) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
}

.marquee__track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--soil);
  letter-spacing: -0.02em;
  min-width: max-content;
}

@media (max-width: 700px) {
  .marquee__track {
    /* faster on mobile - narrower visible area */
    animation-duration: 22s;
    gap: 20px;
    font-size: 22px;
  }
  .marquee {
    padding: var(--s-2) 0;
  }
}

.marquee__track span:nth-child(even) {
  color: var(--terracotta);
  font-style: normal;
  font-weight: 900;
}

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

/* ============================================================
   10. BLOCK 2 — INDEX (Editorial TOC)
============================================================ */
.index {
  padding: var(--s-7) var(--gutter);
  background: var(--paper);
  position: relative;
}

.index__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  align-items: end;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.index__head .section-title {
  text-align: left;
}

@media (max-width: 900px) {
  .index__head { grid-template-columns: 1fr; }
}

.index__list {
  display: grid;
  grid-template-columns: 1fr;
}

.index__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease);
  position: relative;
}

.index__item:hover {
  padding-left: 24px;
  background: linear-gradient(90deg, var(--paper-warm) 0%, transparent 80%);
}

.index__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--terracotta);
  transition: width 0.3s var(--ease);
}

.index__item:hover::before { width: 16px; }

.index__num {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

.index__link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-items: baseline;
}

@media (max-width: 700px) {
  .index__item { grid-template-columns: 40px 1fr auto; }
  .index__link { grid-template-columns: 1fr; gap: 4px; }
}

.index__name {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--soil);
}

.index__item:hover .index__name {
  color: var(--terracotta);
  font-style: italic;
}

.index__type {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}

.index__dur {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}

.index__foot {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 720px;
}

.index__foot a {
  color: var(--terracotta);
  border-bottom: 1px solid currentColor;
}

.index__foot a:hover { color: var(--rust); }

/* ============================================================
   11. SCROLL TO TOP
============================================================ */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  width: 56px;
  height: 56px;
  background: var(--soil);
  color: var(--paper);
  font-size: 24px;
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease);
  font-family: var(--ff-display);
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.to-top:hover {
  background: var(--terracotta);
  transform: translateY(-4px);
}

/* ============================================================
   12. BLOCK 3 - TL;DR / SUMMARY
============================================================ */
.summary {
  padding: var(--s-7) var(--gutter) var(--s-7);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

/* gigantic background "03" number */
.summary::before {
  content: '03';
  position: absolute;
  top: 10%;
  right: -2vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 36vw, 580px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: var(--paper-warm);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.summary > * {
  position: relative;
  z-index: 1;
}

.summary__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 900px) {
  .summary__head { grid-template-columns: 1fr; }
}

.summary__head .section-label {
  grid-column: 1 / -1;
}

.summary__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--soil);
}

.summary__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  align-self: end;
  max-width: 560px;
}

/* 5 oversized theses */
.theses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.thesis {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease);
}

.thesis:hover {
  padding-left: 24px;
  background: linear-gradient(90deg, var(--paper-warm) 0%, transparent 80%);
}

.thesis__num {
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  opacity: 0.55;
  padding-top: 8px;
}

.thesis__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--soil);
  margin: 0 0 var(--s-3);
  max-width: 18ch;
}

.thesis__title--accent {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.thesis__score {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--chlorophyll);
  font-size: 0.85em;
  letter-spacing: -0.02em;
}

.thesis__text {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}

@media (max-width: 700px) {
  .thesis { grid-template-columns: 56px 1fr; gap: var(--s-3); padding: var(--s-4) 0; }
  .thesis__num { padding-top: 4px; font-size: 12px; }
}

/* Winner card */
.winner {
  margin-top: var(--s-6);
  background: var(--soil);
  color: var(--paper);
  padding: var(--s-5) var(--s-5) var(--s-5);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.winner::after {
  content: '01';
  position: absolute;
  right: -3vw;
  bottom: -8vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 30vw, 480px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: rgba(243, 239, 230, 0.05);
  pointer-events: none;
}

.winner__sash {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 2;
  position: relative;
}

.winner__main {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-4);
  z-index: 2;
  position: relative;
}

.winner__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(72px, 11vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--paper);
}

.winner__score {
  font-family: var(--ff-mono);
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--terracotta);
}

.winner__score .data {
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.winner__score-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  color: var(--paper);
}

.winner__cta {
  margin-top: var(--s-4);
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--terracotta);
  color: var(--paper);
  border: 1px solid var(--terracotta);
  z-index: 2;
  position: relative;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.winner__cta:hover {
  background: var(--rust);
  border-color: var(--rust);
  transform: translateX(6px);
}

/* ============================================================
   13. BLOCK 4 - PODIUM (asymmetric top-3)
============================================================ */
.podium {
  padding: var(--s-7) var(--gutter) var(--s-8);
  background: var(--paper-warm);
  position: relative;
  overflow: hidden;
}

.podium::before {
  content: '04';
  position: absolute;
  top: 4%;
  left: -2vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 32vw, 520px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: var(--paper);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.podium > * {
  position: relative;
  z-index: 1;
}

.podium__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: end;
}

@media (max-width: 900px) {
  .podium__head { grid-template-columns: 1fr; }
}

.podium__head .section-label {
  grid-column: 1 / -1;
}

.podium__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 560px;
}

/* ===== Card base ===== */
.card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--soil);
}

/* Gold = first place, full-width hero card */
.card--gold {
  background: var(--paper);
  border-color: var(--soil);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas:
    "mark    score"
    "name    score"
    "lede    radar"
    "facts   radar"
    "quote   quote"
    "actions actions";
  gap: var(--s-4) var(--s-6);
  padding: var(--s-6);
}

.card--gold::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--terracotta);
}

.card--gold .card__mark { grid-area: mark; }
.card--gold .card__name { grid-area: name; }
.card--gold .card__score-block { grid-area: score; }
.card--gold .card__lede { grid-area: lede; }
.card--gold .radar { grid-area: radar; }
.card--gold .card__facts { grid-area: facts; }
.card--gold .card__quote { grid-area: quote; }
.card--gold .card__actions { grid-area: actions; }

@media (max-width: 900px) {
  .card--gold {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mark"
      "name"
      "score"
      "lede"
      "radar"
      "facts"
      "quote"
      "actions";
    padding: var(--s-4);
    gap: var(--s-3);
  }
}

/* ===== Card meta marks ===== */
.card__mark {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.card__place {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(48px, 5vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--terracotta);
  font-style: italic;
  font-weight: 500;
}

.card--silver .card__place { color: var(--ink); font-style: italic; }
.card--bronze .card__place { color: var(--soil); font-style: italic; }

.card__pin {
  background: var(--terracotta);
  color: var(--paper);
  padding: 6px 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
}

.card__pin--soft {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
}

/* ===== Card name ===== */
.card__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(56px, 8vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--soil);
  margin: 0;
}

.card__name--med {
  font-size: clamp(40px, 5vw, 72px);
}

/* ===== Score block ===== */
.card__score-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: end;
  border-left: 1px solid var(--line-strong);
  padding-left: var(--s-4);
}

.card--silver .card__score-block,
.card--bronze .card__score-block {
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}

@media (max-width: 900px) {
  .card--gold .card__score-block {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-strong);
    padding-top: var(--s-3);
  }
}

.card__score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}

.card__score-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.card__score-val {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.03em;
  color: var(--chlorophyll);
  line-height: 1;
}

.card__score-mini {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 18px;
  opacity: 0.75;
}

/* ===== Card lede text ===== */
.card__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ===== Mini radar (bars) ===== */
.radar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  border-left: 1px solid var(--line);
  padding-left: var(--s-3);
}

@media (max-width: 900px) {
  .radar { border-left: 0; padding-left: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); }
}

.radar__row {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 12px;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.radar__label { opacity: 0.65; }

.radar__bar {
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.radar__fill {
  position: absolute;
  top: 0; left: 0;
  bottom: 0;
  width: var(--v, 50%);
  background: var(--soil);
  transform-origin: left;
  animation: radarGrow 1.4s var(--ease) both;
}

@keyframes radarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.radar__val {
  font-family: var(--ff-mono);
  font-weight: 700;
  text-align: right;
  font-size: 13px;
  color: var(--soil);
}

/* ===== Facts list ===== */
.card__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--line);
}

.card__facts--two { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 700px) {
  .card__facts { grid-template-columns: repeat(2, 1fr); }
}

.card__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__fact dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.card__fact dd {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0;
  color: var(--soil);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ===== Card quote ===== */
.card__quote {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.4;
  color: var(--soil);
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 3px solid var(--terracotta);
  margin: 0;
}

.card__quote-mark {
  font-family: var(--ff-display);
  font-size: 80px;
  line-height: 0;
  color: var(--terracotta);
  position: absolute;
  top: 28px;
  left: -4px;
  background: var(--paper);
  padding: 0 8px 0 0;
  display: none;
}

.card__quote-attr {
  display: block;
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 16px;
  opacity: 0.55;
}

/* ===== Card actions ===== */
.card__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ===== Pluses badges (for silver/bronze) ===== */
.card__pluses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-2);
}

.card__pluses span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.card--silver .card__pluses span { background: rgba(255,255,255,0.6); }
.card--bronze .card__pluses span { background: rgba(255,255,255,0.6); }

/* ===== Card pair (2 + 3 side by side) ===== */
.card-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: 0;
}

@media (max-width: 900px) {
  .card-pair { grid-template-columns: 1fr; }
}

.card--silver { background: var(--paper); }
.card--bronze { background: var(--paper); }

.card--silver::before,
.card--bronze::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
}
.card--bronze::before { background: var(--soil); }

/* ===== Compare strip ===== */
.compare-strip {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-4);
}

.compare-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.compare-strip__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.compare-strip__more:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.compare-strip__table {
  width: 100%;
  border-collapse: collapse;
}

.compare-strip__table thead th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--line-strong);
  opacity: 0.7;
}

.compare-strip__table thead th:not(:first-child) {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  text-transform: none;
  letter-spacing: -0.01em;
  opacity: 1;
  color: var(--soil);
  padding-bottom: var(--s-2);
}

.compare-strip__table tbody td {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 17px;
  color: var(--ink-soft);
  vertical-align: top;
}

.compare-strip__rowhead {
  font-family: var(--ff-mono) !important;
  font-size: var(--fs-caption) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  width: 30%;
}

.compare-strip__table .data {
  font-family: var(--ff-mono);
  color: var(--ink);
  font-weight: 500;
}

.compare-strip__table .is-best {
  color: var(--chlorophyll);
  font-weight: 700;
  position: relative;
}

.compare-strip__table .is-best::before {
  content: '◎ ';
  opacity: 0.7;
  margin-right: 2px;
}

@media (max-width: 700px) {
  .compare-strip__table thead th:not(:first-child) {
    font-size: 18px;
  }
  .compare-strip__table tbody td {
    font-size: 14px;
  }
  .compare-strip__rowhead {
    font-size: 10px !important;
  }
}

/* ============================================================
   14. BLOCK 5 - METHODOLOGY
============================================================ */
.method {
  padding: var(--s-7) var(--gutter);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.method::before {
  content: '05';
  position: absolute;
  top: 6%;
  right: -3vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 38vw, 620px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: var(--paper-warm);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.method > * { position: relative; z-index: 1; }

.method__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: end;
}

@media (max-width: 900px) {
  .method__head { grid-template-columns: 1fr; }
}

.method__head .section-label { grid-column: 1 / -1; }

.method__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--soil);
}

.method__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ===== Formula display ===== */
.formula {
  background: var(--soil);
  color: var(--paper);
  padding: var(--s-6) var(--s-5);
  margin-bottom: var(--s-6);
  position: relative;
  overflow: hidden;
}

.formula__caption {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--s-4);
}

.formula__body {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  align-items: baseline;
  font-family: var(--ff-mono);
}

.formula__body--big { font-size: 1.1em; }

.formula__var {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1;
  color: var(--terracotta);
  letter-spacing: -0.02em;
}

.formula__var sub {
  font-family: var(--ff-mono);
  font-style: normal;
  font-size: 0.35em;
  letter-spacing: 0.1em;
  color: var(--paper);
  opacity: 0.55;
  vertical-align: baseline;
  margin-left: 4px;
}

.formula__var--quiet {
  color: var(--paper);
  font-style: normal;
  font-weight: 700;
}

.formula__op {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 1;
  color: var(--paper);
}

.formula__op--quiet { opacity: 0.5; }

.formula__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 72px);
  color: var(--paper);
  line-height: 1;
}

.formula__group {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.formula__w {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 36px);
  color: var(--paper-warm);
  opacity: 0.85;
  letter-spacing: -0.02em;
}

.formula__dot {
  font-family: var(--ff-mono);
  font-size: clamp(20px, 2.2vw, 36px);
  color: var(--paper);
  opacity: 0.4;
}

.formula__crit {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(40px, 5.5vw, 88px);
  color: var(--terracotta);
  line-height: 1;
  letter-spacing: -0.04em;
}

.formula__crit--alt {
  color: var(--chlorophyll);
  filter: brightness(1.4);
}

.formula__legend {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(243, 239, 230, 0.12);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper-warm);
  opacity: 0.7;
  max-width: 72ch;
}

.formula__hint {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-left: auto;
  align-self: center;
}

.formula__hint .data {
  color: var(--terracotta);
  opacity: 1;
  font-weight: 700;
  font-size: 16px;
}

.formula--small { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }
.formula--small .formula__var { font-size: clamp(40px, 5vw, 72px); }
.formula--small .formula__op { font-size: clamp(32px, 4vw, 56px); }
.formula--small .formula__num { font-size: clamp(32px, 4vw, 56px); }
.formula--small .formula__crit { font-size: clamp(32px, 4vw, 64px); }
.formula--small .formula__w { font-size: clamp(18px, 1.8vw, 28px); }
.formula--small .formula__dot { font-size: clamp(18px, 1.8vw, 28px); }

.formula--final { background: var(--paper-warm); color: var(--soil); margin-top: var(--s-5); margin-bottom: 0; padding: var(--s-5); }
.formula--final .formula__caption { color: var(--soil); }
.formula--final .formula__var { color: var(--terracotta); }
.formula--final .formula__var--quiet { color: var(--soil); }
.formula--final .formula__op { color: var(--soil); }
.formula--final .formula__legend { color: var(--ink-soft); border-top-color: var(--line); }

@media (max-width: 700px) {
  .formula { padding: var(--s-4) var(--s-3); }
  .formula__body { gap: 8px 10px; }
}

/* ===== 6 criteria cards ===== */
.criteria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  margin-bottom: var(--s-7);
}

.criteria__lead {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-strong);
  padding: var(--s-3);
  background: var(--paper-warm);
}

.crit {
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--s-4);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
  transition: background 0.3s var(--ease);
}

.crit:hover { background: var(--paper-warm); }

@media (max-width: 1100px) {
  .criteria { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .criteria { grid-template-columns: repeat(2, 1fr); }
}

.crit__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.crit__letter {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(72px, 7vw, 128px);
  line-height: 0.85;
  color: var(--soil);
  letter-spacing: -0.05em;
}

.crit:nth-child(2) .crit__letter { color: var(--terracotta); font-style: italic; font-weight: 500; }
.crit:nth-child(3) .crit__letter { color: var(--chlorophyll); }
.crit:nth-child(4) .crit__letter { color: var(--soil); font-style: italic; font-weight: 500; }
.crit:nth-child(5) .crit__letter { color: var(--terracotta); }
.crit:nth-child(6) .crit__letter { color: var(--ink-soft); font-style: italic; font-weight: 500; }

.crit__weight {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.crit__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  margin: 0;
  color: var(--soil);
  letter-spacing: -0.015em;
}

.crit__name-it {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.crit__text {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.crit__bar {
  height: 4px;
  background: var(--line);
  margin-top: var(--s-2);
  position: relative;
  overflow: hidden;
}

.crit__bar span {
  position: absolute;
  inset: 0;
  width: var(--w);
  background: var(--soil);
  transform-origin: left;
  animation: barGrow 1.6s var(--ease) both;
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ===== Bonus K block ===== */
.bonus {
  margin-bottom: var(--s-7);
}

.bonus__head {
  margin-bottom: var(--s-5);
}

.bonus__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: var(--s-2) 0 var(--s-3);
  color: var(--soil);
}

.bonus__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

.bonus__params {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  margin-bottom: var(--s-3);
}

@media (max-width: 900px) {
  .bonus__params { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .bonus__params { grid-template-columns: 1fr; }
}

.bonus__param {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: background 0.3s var(--ease);
}

.bonus__param:last-child { border-right: 0; }
.bonus__param:hover { background: var(--paper-warm); }

.bonus__var {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.85;
  color: var(--chlorophyll);
  letter-spacing: -0.05em;
  font-style: italic;
  font-weight: 500;
}

.bonus__param-body h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--soil);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.bonus__param-body p {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

.bonus__plus {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--terracotta);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ===== Scale table ===== */
.scale {
  margin-bottom: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
}

.scale__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: var(--s-2) 0 var(--s-5);
  color: var(--soil);
}

.scale__table {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-strong);
}

.scale__row {
  display: grid;
  grid-template-columns: 200px 1.2fr 1.2fr 1.2fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--ink-soft);
  align-items: start;
}

.scale__row--head {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  border-bottom-color: var(--line-strong);
  padding: var(--s-2) 0;
}

.scale__cell--key {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 22px;
  color: var(--soil);
  letter-spacing: -0.01em;
}

.scale__cell--key b {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
  font-size: 28px;
  margin-right: 6px;
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .scale__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-3) 0;
  }
  .scale__row--head { display: none; }
  .scale__row > div:not(:first-child) {
    position: relative;
    padding-left: 80px;
    font-size: 14px;
  }
  .scale__row > div:not(:first-child)::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .scale__row > div:nth-child(2)::before { content: '10 баллов'; }
  .scale__row > div:nth-child(3)::before { content: '5 баллов'; }
  .scale__row > div:nth-child(4)::before { content: '0–3 балла'; }
}

/* ===== Honesty two-col ===== */
.honesty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-5);
}

@media (max-width: 700px) {
  .honesty { grid-template-columns: 1fr; gap: var(--s-3); }
}

.honesty__label { margin-bottom: var(--s-3); }

.honesty__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.honesty__list li {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--soil);
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.honesty__mark {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 16px;
  width: 24px;
  flex-shrink: 0;
}

.honesty__list--no .honesty__mark { color: var(--terracotta); }
.honesty__list--yes .honesty__mark { color: var(--chlorophyll); }
.honesty__list--no li { text-decoration: line-through; text-decoration-color: var(--line); opacity: 0.75; }

/* ===== Pull quote ===== */
.pull-quote {
  border-top: 2px solid var(--soil);
  border-bottom: 2px solid var(--soil);
  padding: var(--s-5) 0;
  margin: 0;
}

.pull-quote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--soil);
  max-width: 22ch;
}

.pull-quote p em {
  color: var(--terracotta);
  font-style: italic;
}

.pull-quote__attr {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  font-style: normal;
}

/* ============================================================
   15. BLOCK 6 - FULL RATING TABLE
============================================================ */
.rating {
  padding: var(--s-7) var(--gutter);
  background: var(--soil);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.rating::before {
  content: '06';
  position: absolute;
  top: -4%;
  left: -3vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 40vw, 680px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: rgba(243, 239, 230, 0.04);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.rating > * { position: relative; z-index: 1; }

.rating__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(243, 239, 230, 0.15);
  align-items: end;
}

@media (max-width: 900px) {
  .rating__head { grid-template-columns: 1fr; }
}

.rating__head .section-label { grid-column: 1 / -1; opacity: 0.75; color: var(--paper); }

.rating .section-title { color: var(--paper); }
.rating .section-title--italic { color: var(--terracotta); }

.rating__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--paper-warm);
  margin: 0;
  opacity: 0.85;
  max-width: 60ch;
}

/* Filter pills */
.rating__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
}

.rating__filters .section-label { color: var(--paper); }

.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(243, 239, 230, 0.25);
  background: transparent;
  color: var(--paper);
  transition: all 0.25s var(--ease);
}

.pill:hover { border-color: var(--terracotta); color: var(--terracotta); }

.pill.is-active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}

/* Big rating table */
.rt-wrap {
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1) var(--s-5);
  padding: 0 var(--gutter);
  scrollbar-color: rgba(243, 239, 230, 0.3) transparent;
}

.rt {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.rt thead th {
  text-align: left;
  padding: var(--s-2) var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid rgba(243, 239, 230, 0.3);
  color: var(--paper);
  opacity: 0.75;
  white-space: nowrap;
}

.rt thead th[class*="col-"]:not(.rt__col-name):not(.rt__col-place) {
  text-align: center;
}

.rt thead th:not(.rt__col-name):not(.rt__col-place) {
  text-align: center;
  width: 56px;
}

.rt__col-place { width: 64px; }
.rt__col-name { min-width: 220px; }
.rt__col-k { width: 70px; }
.rt__col-total { width: 90px; }

.rt thead th abbr {
  text-decoration: none;
  border: none;
  cursor: help;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--terracotta);
}

.rt tbody tr {
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
  transition: background 0.2s var(--ease);
}

.rt tbody tr:hover {
  background: rgba(243, 239, 230, 0.05);
}

.rt tbody tr.is-hidden { display: none; }

.rt tbody td {
  padding: var(--s-2) var(--s-2);
  font-family: var(--ff-body);
  font-size: 16px;
  vertical-align: middle;
  color: var(--paper);
}

.rt tbody td:not(.rt__place):not(.rt__name) {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper-warm);
}

.rt__place {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-style: italic;
  font-size: 22px;
  color: var(--paper);
  opacity: 0.5;
  letter-spacing: -0.02em;
}

.rt tr:nth-child(1) .rt__place,
.rt tr:nth-child(2) .rt__place,
.rt tr:nth-child(3) .rt__place { opacity: 1; }

.rt tr:nth-child(1) .rt__place { color: var(--terracotta); font-weight: 700; font-style: normal; }
.rt tr:nth-child(2) .rt__place { color: var(--paper); font-weight: 500; }
.rt tr:nth-child(3) .rt__place { color: var(--paper-warm); font-weight: 500; }

.rt__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 22px;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.rt tr:nth-child(1) .rt__name {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.rt__total {
  font-family: var(--ff-mono) !important;
  font-weight: 700 !important;
  color: var(--terracotta) !important;
  font-size: 18px !important;
  letter-spacing: -0.02em;
}

.rt tr:nth-child(1) .rt__total {
  font-size: 22px !important;
  color: var(--terracotta) !important;
}

/* Cell visual: progress as background gradient */
.rt__cell-q,
.rt__cell-a,
.rt__cell-l,
.rt__cell-s,
.rt__cell-t,
.rt__cell-p {
  position: relative;
}

.rt__cell-q::before,
.rt__cell-a::before,
.rt__cell-l::before,
.rt__cell-s::before,
.rt__cell-t::before,
.rt__cell-p::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 2px;
  background: rgba(243, 239, 230, 0.08);
}

.rt__cell-q::after,
.rt__cell-a::after,
.rt__cell-l::after,
.rt__cell-s::after,
.rt__cell-t::after,
.rt__cell-p::after {
  content: '';
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 2px;
  width: var(--v, 0%);
  background: var(--terracotta);
}

.rt__k {
  font-family: var(--ff-mono);
  font-size: 12px !important;
  opacity: 0.7;
}

.rt__k--bonus { color: var(--chlorophyll) !important; opacity: 1 !important; }

.rt__k--bonus.is-max { color: var(--terracotta) !important; font-weight: 700; }

/* Legend */
.rt-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(243, 239, 230, 0.15);
}

@media (max-width: 700px) {
  .rt-legend { grid-template-columns: 1fr 1fr; }
}

.rt-legend__col {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-warm);
  opacity: 0.7;
}

.rt-legend__key b {
  display: inline-block;
  width: 24px;
  text-align: center;
  color: var(--terracotta);
  font-weight: 700;
  font-size: 14px;
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-style: italic;
  font-weight: 500;
  margin-right: 6px;
}

/* ============================================================
   16. BLOCK 7 - EDITORIAL SPREAD (top-15 cards)
============================================================ */
.spread {
  padding: var(--s-7) var(--gutter) var(--s-8);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.spread::before {
  content: '07';
  position: absolute;
  top: 4%;
  right: -3vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 40vw, 680px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: var(--paper-warm);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.spread > * { position: relative; z-index: 1; }

.spread__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: end;
}

@media (max-width: 900px) {
  .spread__head { grid-template-columns: 1fr; }
}

.spread__head .section-label { grid-column: 1 / -1; }

.spread__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ===== Single card (spread) - base ===== */
.spr {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.spr__rail {
  position: relative;
}

.spr__big-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(96px, 14vw, 220px);
  line-height: 0.8;
  color: var(--terracotta);
  letter-spacing: -0.06em;
  display: block;
}

.spr__rail-tag {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: var(--s-2);
  color: var(--terracotta);
  font-weight: 500;
}

.spr__main { min-width: 0; }

.spr__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(64px, 9vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--soil);
}

.spr__name--med {
  font-size: clamp(40px, 5vw, 84px);
}

.spr__site {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
  margin: var(--s-2) 0 0;
}

.spr__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: var(--s-3) 0 0;
  max-width: 64ch;
}

.spr__lede b {
  color: var(--soil);
  font-weight: 500;
}

/* ===== Hero variant (Card 01) ===== */
.spr--hero {
  grid-template-columns: 220px 1fr;
  gap: var(--s-6);
  padding: var(--s-7) 0;
  border-top: 2px solid var(--soil);
  border-bottom: 2px solid var(--soil);
}

@media (max-width: 900px) {
  .spr--hero { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; }
}

.spr--hero .spr__rail {
  position: sticky;
  top: var(--s-4);
  align-self: start;
}

@media (max-width: 900px) {
  .spr--hero .spr__rail { position: static; }
}

/* horizontal bars for hero card */
.spr__bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 700px) {
  .spr__bars { grid-template-columns: 1fr; }
}

.spr__bar {
  display: grid;
  grid-template-columns: 32px 1fr 48px;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spr__bar-l {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 22px;
  color: var(--terracotta);
  letter-spacing: -0.02em;
}

.spr__bar-t {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.spr__bar-t span {
  position: absolute;
  inset: 0;
  background: var(--soil);
  transform-origin: left;
  width: var(--w);
  animation: barGrow 1.4s var(--ease) both;
}

.spr__bar-v {
  font-family: var(--ff-mono);
  font-weight: 700;
  text-align: right;
  font-size: 13px;
  color: var(--soil);
}

/* sides plus/minus */
.spr__sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

@media (max-width: 700px) {
  .spr__sides { grid-template-columns: 1fr; }
}

.spr__side-h {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--s-2);
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}

.spr__side--plus .spr__side-h { color: var(--chlorophyll); }
.spr__side--minus .spr__side-h { color: var(--terracotta); }

.spr__side-list {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.spr__side-list li {
  margin-bottom: 8px;
}

.spr__side-list li::marker {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
}

.spr__side-list b {
  color: var(--soil);
  font-weight: 500;
}

/* facts row */
.spr__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.spr__facts--four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 700px) {
  .spr__facts, .spr__facts--four { grid-template-columns: repeat(2, 1fr); }
}

.spr__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spr__fact span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.spr__fact b {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 19px;
  color: var(--soil);
  letter-spacing: -0.01em;
}

/* big quote */
.spr__quote {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 3px solid var(--terracotta);
  font-family: var(--ff-body);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--soil);
}

.spr__quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.spr__cta {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

/* ===== Compact variant (cards 02-07) ===== */
.spr--compact {
  grid-template-columns: 160px 1fr;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line-strong);
}

@media (max-width: 900px) {
  .spr--compact { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) 0; }
}

/* Right-aligned variant: rail moves to the right */
.spr--right { grid-template-columns: 1fr 160px; }
.spr--right .spr__rail { order: 2; text-align: right; }
.spr--right .spr__main { order: 1; }
.spr--right .spr__big-num { color: var(--soil); }
.spr--right .spr__rail-tag { color: var(--soil); }

@media (max-width: 900px) {
  .spr--right { grid-template-columns: 1fr; }
  .spr--right .spr__rail { order: 1; text-align: left; }
  .spr--right .spr__main { order: 2; }
}

.spr__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.spr__score {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 64px);
  color: var(--chlorophyll);
  letter-spacing: -0.03em;
  line-height: 1;
}

.spr__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
}

.spr__pills span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--paper-warm);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.spr__forwho {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--soil);
  margin: var(--s-3) 0 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 2px solid var(--chlorophyll);
}

.spr__forwho-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chlorophyll);
  margin-right: 8px;
}

/* ===== Breath between halves ===== */
.spread__brake {
  margin: var(--s-7) 0 var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 60ch;
}

.spread__brake .section-label {
  margin-bottom: var(--s-2);
}

.spread__brake p {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: var(--fs-body-l);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* ===== Cards 08-15 - mini grid 2-col ===== */
.spread__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  margin-bottom: var(--s-6);
}

@media (max-width: 900px) {
  .spread__grid { grid-template-columns: 1fr; }
}

.spr-mini {
  padding: var(--s-4);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: background 0.3s var(--ease);
}

.spr-mini:hover { background: var(--paper-warm); }

.spr-mini__head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-3);
  align-items: start;
}

.spr-mini__num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 44px;
  line-height: 1;
  color: var(--terracotta);
  letter-spacing: -0.04em;
}

.spr-mini__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spr-mini__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--soil);
}

.spr-mini__score {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--chlorophyll);
  letter-spacing: -0.02em;
}

.spr-mini__lede {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.spr-mini__lede b {
  color: var(--soil);
  font-weight: 500;
}

.spr-mini__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.spr-mini__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spr-mini__facts li span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.spr-mini__facts li b {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 16px;
  color: var(--soil);
}

.spr-mini__for {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

.spr-mini__for span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chlorophyll);
  margin-right: 6px;
}

/* ===== Accordion for 16-30 ===== */
.spread__more {
  border-top: 1px solid var(--line-strong);
  margin-top: var(--s-3);
}

.spread__more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s var(--ease);
}

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

.spread__more-label {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soil);
}

.spread__more-mark {
  font-family: var(--ff-display);
  font-size: 28px;
  line-height: 0.5;
  color: var(--terracotta);
  transition: transform 0.3s var(--ease);
}

.spread__more[open] .spread__more-mark {
  transform: rotate(45deg);
}

.spread__more[open] summary {
  border-bottom-color: var(--soil);
}

.spread__more-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: var(--s-3);
}

@media (max-width: 700px) {
  .spread__more-list { grid-template-columns: 1fr; }
}

.spread__more-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 18px;
  color: var(--soil);
}

.spread__more-row .data {
  font-family: var(--ff-mono);
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 14px;
}

.spread__more-row .data:last-child {
  font-weight: 700;
  color: var(--terracotta);
  font-size: 15px;
}

.spread__more-row b {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.01em;
}

/* ============================================================
   17. BLOCK 8 - COMPARE LEADERS
============================================================ */
.compare {
  padding: var(--s-7) var(--gutter);
  background: var(--paper-warm);
  position: relative;
  overflow: hidden;
}

.compare::before {
  content: '08';
  position: absolute;
  top: 4%;
  left: -3vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 38vw, 620px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: var(--paper);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.compare > * { position: relative; z-index: 1; }

.compare__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: end;
}

@media (max-width: 900px) {
  .compare__head { grid-template-columns: 1fr; }
}

.compare__head .section-label { grid-column: 1 / -1; }

.compare__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ===== Compare matrix table ===== */
.cmp-wrap {
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1) var(--s-6);
  padding: 0 var(--gutter);
}

.cmp {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}

.cmp thead th {
  text-align: left;
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--soil);
  letter-spacing: -0.015em;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}

.cmp thead .cmp__rowhead {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  font-style: normal;
}

.cmp thead th:nth-child(2) { color: var(--terracotta); font-style: italic; font-weight: 500; }

.cmp tbody td {
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--ink-soft);
  vertical-align: middle;
}

.cmp__rowhead {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  width: 24%;
}

.cmp .is-best {
  color: var(--chlorophyll);
  font-weight: 700;
  position: relative;
}

.cmp .is-best::before {
  content: '◎ ';
  opacity: 0.8;
  margin-right: 2px;
}

.cmp__total-row td {
  padding-top: var(--s-3);
  border-top: 2px solid var(--soil);
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.cmp__total-row .data {
  font-family: var(--ff-mono);
  font-size: 20px;
  color: var(--soil);
}

.cmp__total-row .is-best.data {
  color: var(--terracotta);
  font-size: 24px;
}

/* ===== Duel (interactive) ===== */
.duel {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-5);
}

.duel__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--fs-h3);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-2);
  color: var(--soil);
}

.duel__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  max-width: 56ch;
}

.duel__pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: var(--s-4);
}

@media (max-width: 700px) {
  .duel__pickers { grid-template-columns: 1fr; gap: var(--s-2); }
  .duel__vs { text-align: center; }
}

.duel__picker label {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 6px;
}

.duel__picker select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--soil);
  background: var(--paper);
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 22px;
  color: var(--soil);
  letter-spacing: -0.01em;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--soil) 50%),
    linear-gradient(135deg, var(--soil) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 22px,
    calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.duel__picker select:focus {
  outline: none;
  border-color: var(--terracotta);
}

.duel__vs {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(32px, 4vw, 56px);
  color: var(--terracotta);
  line-height: 1;
  padding-bottom: 8px;
  letter-spacing: -0.02em;
}

.duel__result {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-4);
}

.duel-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: var(--s-3);
  align-items: center;
}

@media (max-width: 700px) {
  .duel-grid { grid-template-columns: 1fr 40px 1fr; gap: var(--s-2); }
}

.duel-grid__head {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--soil);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--soil);
  letter-spacing: -0.015em;
}

.duel-grid__head--right { text-align: right; }
.duel-grid__head--c { color: var(--terracotta); font-style: italic; font-weight: 500; text-align: center; font-size: clamp(14px, 1.4vw, 18px); border-bottom: 0; padding-bottom: 0; }

.duel-grid__row {
  display: contents;
}

.duel-grid__row > * {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--ink-soft);
}

.duel-grid__row > *:nth-child(1) { font-weight: 500; }
.duel-grid__row > *:nth-child(3) { text-align: right; font-weight: 500; }
.duel-grid__row > *:nth-child(2) {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  text-align: center;
}

.duel-grid__row.win-a > *:nth-child(1) { color: var(--chlorophyll); font-weight: 700; position: relative; }
.duel-grid__row.win-a > *:nth-child(1)::before { content: '◎ '; }
.duel-grid__row.win-b > *:nth-child(3) { color: var(--chlorophyll); font-weight: 700; position: relative; }
.duel-grid__row.win-b > *:nth-child(3)::after { content: ' ◎'; }
.duel-grid__row.tie > *:nth-child(1),
.duel-grid__row.tie > *:nth-child(3) { color: var(--ink); }

.duel__summary {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 2px solid var(--soil);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-3);
  align-items: center;
}

@media (max-width: 700px) {
  .duel__summary { grid-template-columns: 1fr; text-align: center; }
}

.duel__summary-name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.025em;
  color: var(--soil);
  line-height: 1;
}

.duel__summary-name--right { text-align: right; }

@media (max-width: 700px) {
  .duel__summary-name--right { text-align: left; }
}

.duel__summary-wins {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chlorophyll);
  display: block;
  margin-top: 6px;
  font-weight: 700;
}

.duel__summary-vs {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--terracotta);
  text-align: center;
}

.duel__summary-verdict {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-soft);
  grid-column: 1 / -1;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

.duel__summary-verdict b { color: var(--soil); font-style: normal; font-weight: 500; }

/* ============================================================
   18. BLOCK 9 - INFOGRAPHICS
============================================================ */
.infog {
  padding: var(--s-7) var(--gutter);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.infog::before {
  content: '09';
  position: absolute;
  top: 4%;
  right: -3vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 40vw, 680px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: var(--paper-warm);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.infog > * { position: relative; z-index: 1; }

.infog__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: end;
}

@media (max-width: 900px) {
  .infog__head { grid-template-columns: 1fr; }
}

.infog__head .section-label { grid-column: 1 / -1; }

.infog__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ===== Generic chart wrapper ===== */
.chart {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}

.chart__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.chart__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 700;
}

.chart__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--soil);
  margin: 0;
}

.chart__scale {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.chart__caption {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: var(--s-3) 0 0;
  max-width: 70ch;
}

.chart__caption b { color: var(--soil); font-style: normal; font-weight: 500; }

/* ===== Chart 1: top-10 horizontal bars ===== */
.chart--bars .chart__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.bar-row {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 13px;
}

.bar-row__place {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 22px;
  color: var(--terracotta);
  letter-spacing: -0.02em;
}

.bar-row:nth-child(n+4) .bar-row__place { color: var(--ink-soft); opacity: 0.55; }

.bar-row__track {
  position: relative;
  height: 36px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
}

.bar-row__fill {
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  background: var(--soil);
  transform-origin: left;
  animation: barGrow 1.6s var(--ease) both;
  display: flex;
  align-items: center;
  padding-left: var(--s-2);
}

.bar-row:nth-child(1) .bar-row__fill { background: var(--terracotta); }
.bar-row:nth-child(2) .bar-row__fill { background: var(--soil); }
.bar-row:nth-child(3) .bar-row__fill { background: var(--soil); opacity: 0.8; }
.bar-row:nth-child(n+4) .bar-row__fill { background: var(--ink-soft); opacity: 0.55; }

.bar-row__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 18px;
  color: var(--paper);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 8px);
}

.bar-row__val {
  font-family: var(--ff-mono);
  font-weight: 700;
  text-align: right;
  color: var(--soil);
  font-size: 14px;
  letter-spacing: -0.02em;
}

.bar-row:nth-child(1) .bar-row__val { color: var(--terracotta); font-size: 16px; }

/* ===== Chart 2: pie (donut) of weights ===== */
.weights {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-6);
  align-items: center;
  margin: var(--s-3) 0;
}

@media (max-width: 700px) {
  .weights { grid-template-columns: 1fr; gap: var(--s-3); }
}

.weights__svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  transform: rotate(-90deg);
}

.weights__bg {
  fill: none;
  stroke: var(--paper-warm);
  stroke-width: 28;
}

.weights__seg {
  fill: none;
  stroke-width: 28;
  /* circumference = 2 * pi * 80 = 502.65 */
  stroke-dasharray: calc(var(--p) * 5.0265) 502.65;
  stroke-dashoffset: calc(var(--o) * -5.0265);
  transform-origin: center;
  animation: donutGrow 1.4s var(--ease) both;
}

@keyframes donutGrow {
  from { stroke-dasharray: 0 502.65; }
}

.weights__seg--q { stroke: var(--soil); }
.weights__seg--a { stroke: var(--terracotta); }
.weights__seg--l { stroke: var(--chlorophyll); }
.weights__seg--s { stroke: var(--ink); opacity: 0.75; }
.weights__seg--t { stroke: var(--terracotta); opacity: 0.55; }
.weights__seg--p { stroke: var(--ink-soft); opacity: 0.4; }

.weights__centre,
.weights__centre-sub {
  transform: rotate(90deg);
  transform-origin: 100px 100px;
  fill: var(--soil);
  font-family: var(--ff-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.weights__centre { font-size: 56px; letter-spacing: -0.04em; }
.weights__centre-sub { font-size: 11px; font-weight: 500; opacity: 0.6; letter-spacing: 0.16em; }

.weights__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 500px) {
  .weights__legend { grid-template-columns: 1fr; }
}

.weights__legend li {
  display: grid;
  grid-template-columns: 14px auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--ink-soft);
}

.weights__legend li b {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 18px;
  color: var(--soil);
  letter-spacing: -0.02em;
}

.weights__dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: currentColor;
  border-radius: 50%;
}

.weights__dot--q { background: var(--soil); }
.weights__dot--a { background: var(--terracotta); }
.weights__dot--l { background: var(--chlorophyll); }
.weights__dot--s { background: var(--ink); opacity: 0.75; }
.weights__dot--t { background: var(--terracotta); opacity: 0.55; }
.weights__dot--p { background: var(--ink-soft); opacity: 0.4; }

.weights__legend .data {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--soil);
}

/* ===== Chart 3: K distribution histogram ===== */
.kdist {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  height: 280px;
  align-items: end;
  margin: var(--s-4) 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 700px) {
  .kdist { height: 200px; gap: 4px; }
}

.kdist__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: end;
}

.kdist__count {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--soil);
  letter-spacing: -0.02em;
}

.kdist__bar {
  width: 100%;
  height: var(--h);
  background: var(--soil);
  transform-origin: bottom;
  animation: kdistGrow 1.4s var(--ease) both;
  opacity: 0.85;
}

@keyframes kdistGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.kdist__col--max .kdist__bar {
  background: var(--terracotta);
  opacity: 1;
}

.kdist__col--max .kdist__count {
  color: var(--terracotta);
}

.kdist__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  opacity: 0.7;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .kdist__count { font-size: 14px; }
  .kdist__label { font-size: 9px; }
}

/* ===== Chart 4: price range ===== */
.pricerange {
  margin: var(--s-4) 0;
  padding-bottom: var(--s-5);
}

.pricerange__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
  margin-bottom: 14px;
}

.pricerange__axis .data { color: var(--soil); opacity: 1; font-weight: 500; }

.pricerange__track {
  position: relative;
  height: 32px;
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pricerange__bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--chlorophyll) 0%,
    var(--soil) 50%,
    var(--terracotta) 100%);
  opacity: 0.85;
  transform-origin: left;
  animation: barGrow 1.6s var(--ease) both;
}

.pricerange__avg,
.pricerange__med {
  position: absolute;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.pricerange__avg { top: -50px; bottom: auto; }
.pricerange__med { top: 32px; bottom: auto; transform: translateX(-50%) translateY(0); }

.pricerange__avg-mark,
.pricerange__med-mark {
  width: 1px;
  height: 50px;
  background: var(--ink);
}

.pricerange__med-mark { background: var(--terracotta); }

.pricerange__avg-label,
.pricerange__med-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-top: 6px;
}

.pricerange__avg-label { margin-top: 0; margin-bottom: 6px; order: -1; }
.pricerange__med-label { color: var(--terracotta); }

.pricerange__avg-label .data,
.pricerange__med-label .data { font-weight: 700; }

/* ===== Infog CTA ===== */
.infog__cta {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-top: 2px solid var(--soil);
  border-bottom: 2px solid var(--soil);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
}

@media (max-width: 700px) {
  .infog__cta { grid-template-columns: 1fr; padding: var(--s-3) var(--s-2); }
}

.infog__cta-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--soil);
}

.infog__cta-buttons {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ============================================================
   19. BLOCK 10 - GUIDE / 8 SCENARIOS
============================================================ */
.guide {
  padding: var(--s-7) var(--gutter);
  background: var(--soil);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.guide::before {
  content: '10';
  position: absolute;
  top: 4%;
  left: -3vw;
  font-family: var(--ff-display);
  font-size: clamp(280px, 40vw, 680px);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1;
  color: rgba(243, 239, 230, 0.04);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}

.guide > * { position: relative; z-index: 1; }

.guide__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(243, 239, 230, 0.15);
  align-items: end;
}

@media (max-width: 900px) {
  .guide__head { grid-template-columns: 1fr; }
}

.guide__head .section-label { grid-column: 1 / -1; opacity: 0.75; color: var(--paper); }
.guide .section-title { color: var(--paper); }
.guide .section-title--italic { color: var(--terracotta); }

.guide__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--paper-warm);
  opacity: 0.85;
  margin: 0;
  max-width: 60ch;
}

/* ===== Scenarios grid ===== */
.scenarios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(243, 239, 230, 0.2);
  border-left: 1px solid rgba(243, 239, 230, 0.2);
}

@media (max-width: 1200px) {
  .scenarios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .scenarios { grid-template-columns: 1fr; }
}

.scen {
  padding: var(--s-4);
  border-right: 1px solid rgba(243, 239, 230, 0.2);
  border-bottom: 1px solid rgba(243, 239, 230, 0.2);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  background: var(--soil);
  transition: background 0.35s var(--ease);
}

.scen:hover { background: #221912; }

.scen__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(243, 239, 230, 0.15);
}

.scen__num {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 700;
}

.scen__icon {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--terracotta);
  opacity: 0.6;
  letter-spacing: -2px;
}

.scen--big .scen__icon,
.scen--landscape .scen__icon { color: var(--chlorophyll); filter: brightness(1.4); }

.scen--urgent .scen__icon,
.scen--cheap .scen__icon,
.scen--mix .scen__icon,
.scen--quality .scen__icon { letter-spacing: 0; font-size: 18px; opacity: 0.85; }

.scen__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
}

.scen__name span {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
  font-size: 0.78em;
  margin-top: 4px;
}

.scen__vol {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-warm);
  opacity: 0.8;
  margin: 0;
}

.scen__vol span {
  opacity: 0.55;
  margin-right: 6px;
}

.scen__problem {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--paper-warm);
  opacity: 0.85;
  margin: 0;
}

.scen__problem-tag {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 6px;
  opacity: 0.85;
}

.scen__problem b {
  color: var(--paper);
  font-weight: 500;
}

.scen__criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--s-2);
  border-top: 1px solid rgba(243, 239, 230, 0.12);
}

.scen__criteria span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(243, 239, 230, 0.08);
  color: var(--paper-warm);
}

.scen__picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(243, 239, 230, 0.15);
}

.scen__picks-tag {
  display: block;
  width: 100%;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chlorophyll);
  filter: brightness(1.4);
  margin-bottom: 4px;
}

.scen__pick {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--soil);
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 16px;
  letter-spacing: -0.01em;
  border: 1px solid var(--paper);
  transition: all 0.25s var(--ease);
}

.scen__pick .data {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.scen__pick:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
  transform: translateY(-2px);
}

.scen__pick:hover .data { color: var(--paper); opacity: 0.8; }

.scen__pick--lead {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
  font-weight: 700;
}

.scen__pick--lead .data { color: var(--paper); opacity: 0.8; }

.scen__pick--lead:hover {
  background: var(--rust);
  border-color: var(--rust);
}

.scen__pick--quiet {
  background: transparent;
  border-color: rgba(243, 239, 230, 0.3);
  color: var(--paper-warm);
}

.scen__pick--quiet .data { color: var(--paper-warm); opacity: 0.55; }

.scen__caveat {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper-warm);
  opacity: 0.7;
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px dashed rgba(243, 239, 230, 0.15);
}

.scen__caveat b {
  font-style: normal;
  color: var(--terracotta);
  font-weight: 500;
}

/* ==========================================================
   BLOCK 11. MAP
========================================================== */
.mapsec {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) var(--s-page) var(--s-10);
  border-top: 1px solid rgba(23, 22, 20, 0.1);
  position: relative;
}

.mapsec__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
  align-items: end;
}
@media (max-width: 900px) {
  .mapsec__head { grid-template-columns: 1fr; gap: var(--s-3); }
}
.mapsec__head .section-label { grid-column: 1 / -1; }

.mapsec__intro {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ---- filters (chips) ---- */
.mapsec__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  border-top: 1px solid rgba(23, 22, 20, 0.1);
  border-bottom: 1px solid rgba(23, 22, 20, 0.1);
  padding: var(--s-2) 0;
}
.mfilter {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(23, 22, 20, 0.18);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.mfilter:hover { background: rgba(23,22,20,0.05); }
.mfilter--active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}
.mfilter__count {
  font-size: 11px;
  opacity: 0.65;
  letter-spacing: 0.06em;
}
.mfilter--active .mfilter__count { opacity: 0.85; }

/* ---- map body: canvas + sidebar ---- */
.mapsec__body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 900px) {
  .mapsec__body { grid-template-columns: 1fr; gap: var(--s-4); }
}

.mapsec__canvas {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid rgba(23, 22, 20, 0.1);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.mapsvg {
  display: block;
  width: 100%;
  height: 100%;
}
.mapsvg__mkad,
.mapsvg__ttk,
.mapsvg__garden {
  fill: none;
  stroke: rgba(23, 22, 20, 0.22);
  stroke-width: 1;
}
.mapsvg__ttk { stroke-dasharray: 4 4; opacity: 0.6; }
.mapsvg__garden { stroke-dasharray: 2 4; opacity: 0.5; }
.mapsvg__center {
  fill: var(--ink);
}
.mapsvg__lbl,
.mapsvg__ring-lbl,
.mapsvg__dir {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(23, 22, 20, 0.5);
}
.mapsvg__lbl { font-size: 9px; }
.mapsvg__dir { font-size: 13px; opacity: 0.7; font-weight: 600; }

/* pins */
.mappin {
  cursor: pointer;
}
.mappin__dot {
  transition: r 0.15s, stroke-width 0.15s;
}
.mappin__num {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 600;
  fill: var(--paper);
  pointer-events: none;
}
.mappin--gold .mappin__dot { fill: var(--terracotta); }
.mappin--mid  .mappin__dot { fill: var(--chlorophyll); }
.mappin--low  .mappin__dot { fill: var(--ink); opacity: 0.6; }

.mappin:hover .mappin__dot,
.mappin--active .mappin__dot {
  stroke: var(--ink);
  stroke-width: 2;
  r: 16;
}
.mappin--dim { opacity: 0.15; pointer-events: none; }
.mappin--dim .mappin__num { opacity: 0; }

/* legend on top-right */
.mapsvg__legend {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(243, 239, 230, 0.85);
  border: 1px solid rgba(23, 22, 20, 0.12);
  padding: 8px 12px;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.mapsvg__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mapsvg__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mapsvg__legend-item--gold .mapsvg__legend-dot { background: var(--terracotta); }
.mapsvg__legend-item--mid  .mapsvg__legend-dot { background: var(--chlorophyll); }
.mapsvg__legend-item--low  .mapsvg__legend-dot { background: var(--ink); opacity: 0.6; }

/* sidebar */
.mapsec__side {
  background: var(--soil);
  color: var(--paper);
  padding: var(--s-4);
  display: flex;
  align-items: stretch;
}
.mapside__empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mapside__empty .data {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.mapside__empty p {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-warm);
  opacity: 0.78;
  margin: 0;
  max-width: 32ch;
}

.mapside__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}
.mapside__card[hidden] { display: none; }
.mapside__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(243, 239, 230, 0.15);
}
.mapside__rank {
  font-size: 13px;
  color: var(--terracotta);
  letter-spacing: 0.08em;
}
.mapside__score {
  font-family: var(--ff-mono);
  font-size: 28px;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.mapside__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
}
.mapside__loc {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 15px;
  color: var(--paper-warm);
  opacity: 0.75;
  margin: 0;
}
.mapside__facts {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid rgba(243, 239, 230, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mapside__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--ff-body);
  font-size: 14px;
}
.mapside__facts li span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-warm);
  opacity: 0.6;
}
.mapside__facts li b {
  font-weight: 500;
  color: var(--paper);
}
.mapside__more {
  margin-top: auto;
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--terracotta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(243, 239, 230, 0.15);
  padding-top: var(--s-2);
}
.mapside__more span { transition: transform 0.18s; }
.mapside__more:hover span { transform: translateX(6px); }

/* ---- distance table ---- */
.distance {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.distance__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.distance__intro {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}
.distance__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-body);
  font-size: 15px;
}
.distance__table th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ink);
}
.distance__table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(23, 22, 20, 0.1);
  color: var(--ink);
  vertical-align: top;
}
.distance__table tr:hover td { background: rgba(168, 79, 42, 0.05); }
.distance__note {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.7;
  margin: 0;
  max-width: 70ch;
}
@media (max-width: 700px) {
  .distance__table th,
  .distance__table td { padding: 10px 8px; font-size: 13px; }
  .distance__table th { font-size: 10px; }
}

/* ==========================================================
   BLOCK 12. PRICE ANALYTICS
========================================================== */
.prices {
  background: var(--lime);
  color: var(--ink);
  padding: var(--s-10) var(--s-page) var(--s-10);
  border-top: 1px solid rgba(23, 22, 20, 0.12);
  position: relative;
}

.prices__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
  align-items: end;
}
@media (max-width: 900px) {
  .prices__head { grid-template-columns: 1fr; gap: var(--s-3); }
}
.prices__head .section-label { grid-column: 1 / -1; }
.prices__intro {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

/* ---- soil types ---- */
.ptypes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
@media (max-width: 900px) {
  .ptypes { grid-template-columns: 1fr; }
}

.ptype {
  background: var(--paper);
  border: 1px solid rgba(23, 22, 20, 0.12);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ptype__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  border-bottom: 1px solid rgba(23, 22, 20, 0.1);
  padding-bottom: var(--s-2);
}
.ptype__num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--terracotta);
}
.ptype__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.ptype__hint {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* range bar */
.ptype__range {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.ptype__min,
.ptype__max {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--ink-soft);
}
.ptype__bar {
  position: relative;
  height: 36px;
  background: rgba(23, 22, 20, 0.06);
}
.ptype__bar-fill {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  background: repeating-linear-gradient(
    45deg,
    rgba(23,22,20,0.12) 0 2px,
    transparent 2px 6px
  );
}
.ptype__bar-honest {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  background: var(--terracotta);
}
.ptype__bar-mark {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px;
  background: var(--ink);
}
.ptype__bar-mark::after {
  content: '★';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--ink);
}

.ptype__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--ink-soft);
}
.ptype__legend b {
  font-family: var(--ff-mono);
  font-weight: 500;
  color: var(--ink);
}

.ptype__comment {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid rgba(23, 22, 20, 0.08);
}

/* ---- seasonal calendar ---- */
.season {
  background: var(--paper);
  border: 1px solid rgba(23, 22, 20, 0.12);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.season__head { display: flex; flex-direction: column; gap: var(--s-2); }
.season__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.season__intro {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 70ch;
}
.season__intro b {
  font-family: var(--ff-mono);
  font-weight: 500;
  color: var(--terracotta);
}

.season__chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  align-items: end;
  height: 220px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  position: relative;
}
.smonth {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.smonth__bar {
  width: 100%;
  background: var(--soil);
  height: var(--h);
  position: relative;
  transition: background 0.18s;
}
.smonth__bar::after {
  content: attr(data-val);
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.smonth--peak .smonth__bar { background: var(--terracotta); }
.smonth--low  .smonth__bar { background: var(--chlorophyll); }
.smonth__lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

.season__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
@media (max-width: 700px) {
  .season__notes { grid-template-columns: 1fr; }
}
.season__notes li {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(23, 22, 20, 0.1);
}
.season__notes li .data {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--terracotta);
  letter-spacing: 0.04em;
}
.season__notes li b {
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
}

/* ---- hidden costs ---- */
.hidden {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.hidden__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
.hidden__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
@media (max-width: 800px) {
  .hidden__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .hidden__grid { grid-template-columns: 1fr; }
}
.hidden__item {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  min-height: 130px;
}
.hidden__num {
  font-family: var(--ff-mono);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--terracotta);
}
.hidden__item p {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.hidden__note {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: var(--s-2) 0 0;
  max-width: 70ch;
}
.hidden__note b {
  font-style: normal;
  font-weight: 500;
  color: var(--terracotta);
}

/* ==========================================================
   BLOCK 13. WARNINGS / ANTI-RATING
========================================================== */
.warnings {
  background: var(--soil);
  color: var(--paper);
  padding: var(--s-10) var(--s-page);
  border-top: 1px solid rgba(243, 239, 230, 0.12);
  position: relative;
}

.warnings__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-7);
}
.warnings__head .section-label {
  grid-column: 1 / -1;
  color: rgba(243,239,230,0.72);
}
.warnings__head .section-title,
.warnings__head .section-title--italic { color: var(--paper); }
.warnings__intro {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--paper-warm);
  opacity: 0.82;
  max-width: 60ch;
  margin: 0;
}
@media (max-width: 900px) {
  .warnings__head { grid-template-columns: 1fr; gap: var(--s-3); }
}

.warnings__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  border-left: 1px solid rgba(243, 239, 230, 0.14);
  margin-bottom: var(--s-7);
}
@media (max-width: 1100px) {
  .warnings__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .warnings__grid { grid-template-columns: 1fr; }
}

.wcard {
  min-height: 280px;
  padding: var(--s-4);
  border-right: 1px solid rgba(243, 239, 230, 0.14);
  border-bottom: 1px solid rgba(243, 239, 230, 0.14);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: rgba(243,239,230,0.02);
  transition: background 0.18s ease, transform 0.18s ease;
}
.wcard:hover {
  background: rgba(243,239,230,0.05);
  transform: translateY(-2px);
}
.wcard--danger { background: rgba(168,79,42,0.08); }
.wcard--accent { background: rgba(61,92,46,0.08); }
.wcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.wcard__num {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--terracotta);
}
.wcard__tag {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-warm);
  opacity: 0.55;
}
.wcard__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0;
  max-width: 10ch;
}
.wcard__text {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.56;
  color: var(--paper-warm);
  opacity: 0.82;
  margin: 0;
}
.wcard__text b {
  color: var(--paper);
  font-weight: 500;
}
.wcard__foot {
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px dashed rgba(243,239,230,0.14);
  font-family: var(--ff-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--paper-warm);
  opacity: 0.68;
}

.trustcheck {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
.trustcheck__head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-4);
  align-items: end;
}
@media (max-width: 900px) {
  .trustcheck__head { grid-template-columns: 1fr; }
}
.trustcheck__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
}
.trustcheck__intro {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.58;
  color: var(--paper-warm);
  opacity: 0.78;
  margin: 0;
  max-width: 58ch;
}
.trustcheck__body {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 900px) {
  .trustcheck__body { grid-template-columns: 1fr; }
}
.trustcheck__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .trustcheck__list { grid-template-columns: 1fr; }
}
.titem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid rgba(243,239,230,0.14);
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.35;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.titem .data {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--terracotta);
  flex: 0 0 auto;
}
.titem:hover {
  transform: translateX(4px);
  background: rgba(243,239,230,0.04);
}
.titem.is-on {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.titem.is-on .data { color: var(--terracotta); }

.trustscore {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-4);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.trustscore__kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--terracotta);
}
.trustscore__value {
  font-family: var(--ff-display);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.trustscore__state {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.trustscore__bands {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--s-2);
  border-top: 1px solid rgba(23,22,20,0.12);
}
.trustscore__band {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.trustscore__band .data {
  font-size: 11px;
  color: var(--terracotta);
}

/* ==========================================================
   BLOCK 14. CASES
========================================================== */
.casesec {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) var(--s-page);
  border-top: 1px solid rgba(23,22,20,0.1);
  position: relative;
}
.casesec__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-6);
}
.casesec__head .section-label { grid-column: 1 / -1; }
.casesec__intro {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 900px) {
  .casesec__head { grid-template-columns: 1fr; gap: var(--s-3); }
}

.casesec__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  margin-bottom: var(--s-6);
}
@media (max-width: 800px) {
  .casesec__strip { grid-template-columns: 1fr; }
}
.casesec__metric {
  padding: var(--s-3);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 136px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.casesec__metric .data {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.92;
  color: var(--terracotta);
}
.casesec__metric p {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.casesec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1100px) {
  .casesec__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .casesec__grid { grid-template-columns: 1fr; }
}

.case {
  border: 1px solid rgba(23,22,20,0.12);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 420px;
  background: var(--paper);
}
.case--loss {
  background: linear-gradient(to bottom, rgba(168,79,42,0.05), rgba(168,79,42,0.015));
}
.case--win {
  background: linear-gradient(to bottom, rgba(61,92,46,0.06), rgba(61,92,46,0.018));
}
.case--lead {
  border-width: 2px;
}
.case__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.case__label {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.case__delta {
  font-size: 12px;
  color: var(--terracotta);
}
.case--win .case__delta { color: var(--chlorophyll); }
.case__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
  max-width: 14ch;
}
.case__lead,
.case__result {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 0;
}
.case__lead b,
.case__result b {
  font-weight: 500;
  color: var(--ink);
}
.case__steps {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px dashed rgba(23,22,20,0.16);
  border-bottom: 1px dashed rgba(23,22,20,0.16);
}
.case__steps li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: baseline;
}
.case__steps li span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.case__steps li b {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 480px) {
  .case__steps li { grid-template-columns: 1fr; gap: 4px; }
}

.casesec__quote {
  margin: var(--s-6) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid rgba(23,22,20,0.12);
}
.casesec__quote p {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(32px, 4.8vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 18ch;
}
.casesec__quote .data {
  color: var(--terracotta);
  font-size: 0.48em;
  vertical-align: top;
  letter-spacing: -0.03em;
}

/* ==========================================================
   BLOCK 15. RADAR
========================================================== */
.radarsec {
  background: var(--lime);
  color: var(--ink);
  padding: var(--s-10) var(--s-page);
  border-top: 1px solid rgba(23,22,20,0.12);
  position: relative;
}
.radarsec__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-6);
}
.radarsec__head .section-label { grid-column: 1 / -1; }
.radarsec__intro {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 900px) {
  .radarsec__head { grid-template-columns: 1fr; gap: var(--s-3); }
}
.radarsec__body {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 980px) {
  .radarsec__body { grid-template-columns: 1fr; }
}
.radarsec__chart-wrap {
  display: grid;
  gap: var(--s-3);
}
.radarsec__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rchip {
  appearance: none;
  border: 1px solid rgba(23,22,20,0.16);
  background: transparent;
  color: var(--ink);
  padding: 10px 14px;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.rchip:hover { transform: translateY(-2px); }
.rchip--active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.radarbox {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--s-3);
  align-items: center;
  background: var(--paper);
  border: 1px solid rgba(23,22,20,0.12);
  padding: var(--s-4);
}
@media (max-width: 760px) {
  .radarbox { grid-template-columns: 1fr; }
}
.radarsvg {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}
.radarsvg__ring,
.radarsvg__axis {
  fill: none;
  stroke: rgba(23,22,20,0.16);
  stroke-width: 1;
}
.radarsvg__axis { stroke-dasharray: 3 5; }
.radarsvg__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-soft);
}
.radarsvg__tick {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: rgba(23,22,20,0.46);
}
.radar-poly {
  fill-opacity: 0.08;
  stroke-width: 3;
}
.radar-poly--biogrunt { stroke: var(--terracotta); fill: var(--terracotta); }
.radar-poly--torf24 { stroke: var(--chlorophyll); fill: var(--chlorophyll); }
.radar-poly--eco { stroke: #826246; fill: #826246; }
.radar-poly--progrunt { stroke: #2f4c64; fill: #2f4c64; }
.radar-poly--mbz { stroke: #7a6a1f; fill: #7a6a1f; }
.radar-point {
  stroke-width: 2;
  fill: var(--paper);
}
.radarsvg__scale {
  font-family: var(--ff-mono);
  font-size: 10px;
  fill: rgba(23,22,20,0.5);
}
.radarbox__note {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-left: var(--s-2);
  border-left: 1px solid rgba(23,22,20,0.1);
}
@media (max-width: 760px) {
  .radarbox__note { padding-left: 0; border-left: 0; border-top: 1px solid rgba(23,22,20,0.1); padding-top: var(--s-2); }
}
.radarbox__note .data {
  font-size: 12px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
}
.radarbox__note p {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.radarsec__side {
  display: grid;
  gap: var(--s-3);
}
.rsummary {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-4);
}
.rsummary__kicker {
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 0.16em;
}
.rsummary__name {
  margin: var(--s-1) 0 0;
  font-family: var(--ff-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.rsummary__score {
  font-family: var(--ff-mono);
  font-size: 28px;
  color: var(--paper);
  margin-top: var(--s-2);
}
.rsummary__text {
  margin: var(--s-2) 0 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.58;
  color: var(--paper-warm);
}
.rinsights {
  display: grid;
  gap: 12px;
}
.rinsight {
  background: rgba(243,239,230,0.58);
  border: 1px solid rgba(23,22,20,0.1);
  padding: var(--s-3);
}
.rinsight__num {
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
}
.rinsight__title {
  margin: 8px 0 0;
  font-family: var(--ff-display);
  font-size: 28px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.rinsight__text {
  margin: 10px 0 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.radarcompare {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
}
.radarcompare__head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-4);
  align-items: end;
}
@media (max-width: 900px) {
  .radarcompare__head { grid-template-columns: 1fr; }
}
.radarcompare__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.radarcompare__intro {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-soft);
}
.radarcompare__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(23,22,20,0.12);
  border-left: 1px solid rgba(23,22,20,0.12);
}
@media (max-width: 1100px) {
  .radarcompare__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .radarcompare__grid { grid-template-columns: 1fr; }
}
.rmini {
  padding: var(--s-3);
  border-right: 1px solid rgba(23,22,20,0.12);
  border-bottom: 1px solid rgba(23,22,20,0.12);
  min-height: 180px;
  background: rgba(243,239,230,0.55);
}
.rmini--lead { background: rgba(168,79,42,0.08); }
.rmini__num {
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
}
.rmini__name {
  margin: 10px 0 0;
  font-family: var(--ff-display);
  font-size: 30px;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.rmini__text {
  margin: 10px 0 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ==========================================================
   BLOCK 16. CHECKLIST
========================================================== */
.checksec {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) var(--s-page);
  border-top: 1px solid rgba(23,22,20,0.1);
  position: relative;
}
.checksec__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-6);
}
.checksec__head .section-label { grid-column: 1 / -1; }
.checksec__intro {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 60ch;
}
@media (max-width: 900px) {
  .checksec__head { grid-template-columns: 1fr; gap: var(--s-3); }
}
.checksec__body {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 980px) {
  .checksec__body { grid-template-columns: 1fr; }
}
.checksec__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1100px) {
  .checksec__steps { grid-template-columns: 1fr; }
}
.cstage {
  border: 1px solid rgba(23,22,20,0.12);
  background: rgba(243,239,230,0.55);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cstage__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.cstage__num {
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
}
.cstage__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 36px;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.cstage__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.citem {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  appearance: none;
  border: 1px solid rgba(23,22,20,0.12);
  background: var(--paper);
  color: var(--ink);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.citem:hover {
  transform: translateX(4px);
  border-color: rgba(23,22,20,0.22);
}
.citem .data {
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
  padding-top: 2px;
}
.citem span:last-child {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.45;
}
.citem.is-done {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.citem.is-done .data { color: var(--terracotta); }
.checksec__side {
  display: grid;
  gap: var(--s-3);
}
.checkmeter {
  background: var(--soil);
  color: var(--paper);
  padding: var(--s-4);
}
.checkmeter__kicker {
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 0.16em;
}
.checkmeter__value {
  font-family: var(--ff-display);
  font-size: clamp(52px, 7vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  margin-top: var(--s-2);
}
.checkmeter__bar {
  height: 10px;
  background: rgba(243,239,230,0.14);
  margin-top: var(--s-2);
  overflow: hidden;
}
.checkmeter__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--terracotta);
  transition: width 0.22s ease;
}
.checkmeter__state {
  margin: var(--s-2) 0 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-warm);
}
.checkalert {
  background: var(--lime);
  border: 1px solid rgba(23,22,20,0.12);
  padding: var(--s-4);
}
.checkalert__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 34px;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.checkalert__list {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkalert__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.48;
  color: var(--ink-soft);
}
.checkalert__list .data {
  font-size: 11px;
  color: var(--terracotta);
}
.checkalert__list b {
  color: var(--ink);
  font-weight: 500;
}
.checksec__footer {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
@media (max-width: 900px) {
  .checksec__footer { grid-template-columns: 1fr; }
}
.checkfoot {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: var(--s-3);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 170px;
}
.checkfoot__num {
  font-size: 13px;
  color: var(--terracotta);
}
.checkfoot__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 30px;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.checkfoot__text {
  margin: 10px 0 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ==========================================================
   BLOCK 17. SEASONAL CALENDAR
========================================================== */
.seasonal {
  background: var(--soil);
  color: var(--paper);
  padding: var(--s-10) var(--s-page);
  border-top: 1px solid rgba(243,239,230,0.12);
  position: relative;
}
.seasonal__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-6);
}
.seasonal__head .section-label {
  grid-column: 1 / -1;
  color: rgba(243,239,230,0.74);
}
.seasonal__head .section-title,
.seasonal__head .section-title--italic { color: var(--paper); }
.seasonal__intro {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--paper-warm);
  opacity: 0.82;
  max-width: 60ch;
}
@media (max-width: 900px) {
  .seasonal__head { grid-template-columns: 1fr; gap: var(--s-3); }
}
.seasonal__body {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 1000px) {
  .seasonal__body { grid-template-columns: 1fr; }
}
.seasonal__calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(243,239,230,0.14);
  border-left: 1px solid rgba(243,239,230,0.14);
}
@media (max-width: 900px) {
  .seasonal__calendar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .seasonal__calendar { grid-template-columns: repeat(2, 1fr); }
}
.smonthcard {
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(243,239,230,0.14);
  border-bottom: 1px solid rgba(243,239,230,0.14);
  background: rgba(243,239,230,0.03);
  color: var(--paper);
  min-height: 150px;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.smonthcard:hover {
  background: rgba(243,239,230,0.06);
  transform: translateY(-2px);
}
.smonthcard.is-active {
  background: var(--paper);
  color: var(--ink);
}
.smonthcard--peak { background: rgba(168,79,42,0.12); }
.smonthcard--low { background: rgba(61,92,46,0.12); }
.smonthcard.is-active.smonthcard--peak,
.smonthcard.is-active.smonthcard--low { background: var(--paper); }
.smonthcard__m {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--terracotta);
}
.smonthcard__v {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.smonthcard__s {
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.76;
}
.seasonal__side {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-4);
  min-height: 100%;
}
.seasonalpanel__kicker {
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 0.16em;
}
.seasonalpanel__name {
  margin: 8px 0 0;
  font-family: var(--ff-display);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.seasonalpanel__index {
  margin-top: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 30px;
  color: var(--ink);
}
.seasonalpanel__text {
  margin: var(--s-2) 0 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-soft);
}
.seasonalpanel__facts {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid rgba(23,22,20,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seasonalpanel__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.seasonalpanel__facts li span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.seasonalpanel__facts li b {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.seasonal__zones {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
@media (max-width: 900px) {
  .seasonal__zones { grid-template-columns: 1fr; }
}
.szone {
  border: 1px solid rgba(243,239,230,0.14);
  padding: var(--s-4);
  background: rgba(243,239,230,0.03);
}
.szone--best { background: rgba(61,92,46,0.14); }
.szone--warn { background: rgba(168,79,42,0.12); }
.szone__tag {
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 0.14em;
}
.szone__title {
  margin: 10px 0 0;
  font-family: var(--ff-display);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.szone__text {
  margin: 12px 0 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.58;
  color: var(--paper-warm);
  opacity: 0.82;
}
.seasonal__matrix {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
}
.smatrix__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-4);
  align-items: end;
}
@media (max-width: 900px) {
  .smatrix__head { grid-template-columns: 1fr; }
}
.smatrix__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--paper);
}
.smatrix__intro {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.58;
  color: var(--paper-warm);
  opacity: 0.8;
}
.smatrix__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(243,239,230,0.14);
  border-left: 1px solid rgba(243,239,230,0.14);
}
@media (max-width: 1000px) {
  .smatrix__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .smatrix__grid { grid-template-columns: 1fr; }
}
.smatrix__item {
  padding: var(--s-3);
  border-right: 1px solid rgba(243,239,230,0.14);
  border-bottom: 1px solid rgba(243,239,230,0.14);
  min-height: 180px;
  background: rgba(243,239,230,0.03);
}
.smatrix__item .data {
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 0.14em;
}
.smatrix__item b {
  display: block;
  margin-top: 10px;
  font-family: var(--ff-display);
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.smatrix__item p {
  margin: 10px 0 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.56;
  color: var(--paper-warm);
  opacity: 0.82;
}

/* ==========================================================
   BLOCK 18. FAQ
========================================================== */
.faqsec {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) var(--s-page);
  border-top: 1px solid rgba(23,22,20,0.1);
  position: relative;
}
.faqsec__head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-6);
}
.faqsec__head .section-label { grid-column: 1 / -1; }
.faqsec__intro {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 60ch;
}
@media (max-width: 900px) {
  .faqsec__head { grid-template-columns: 1fr; gap: var(--s-3); }
}
.faqsec__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  margin-bottom: var(--s-6);
}
@media (max-width: 900px) {
  .faqsec__stats { grid-template-columns: 1fr; }
}
.faqstat {
  padding: var(--s-3);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 150px;
}
.faqstat .data {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.9;
  color: var(--terracotta);
}
.faqstat p {
  margin: 12px 0 0;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.52;
  color: var(--ink-soft);
}
.faqsec__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(23,22,20,0.12);
}
.faqitem {
  border-bottom: 1px solid rgba(23,22,20,0.12);
}
.faqitem__q {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 76px 1fr 36px;
  gap: 16px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 640px) {
  .faqitem__q { grid-template-columns: 58px 1fr 28px; gap: 12px; }
}
.faqitem__num {
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
}
.faqitem__txt {
  font-family: var(--ff-display);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.faqitem__plus {
  font-family: var(--ff-mono);
  font-size: 22px;
  color: var(--ink-soft);
  justify-self: end;
  transition: transform 0.18s ease, color 0.18s ease;
}
.faqitem.is-open .faqitem__plus {
  transform: rotate(45deg);
  color: var(--terracotta);
}
.faqitem__a {
  display: none;
  padding: 0 0 24px 92px;
}
@media (max-width: 640px) {
  .faqitem__a { padding-left: 70px; }
}
.faqitem.is-open .faqitem__a {
  display: block;
}
.faqitem__a p {
  margin: 0;
  max-width: 72ch;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(232,224,204,0.42), rgba(243,239,230,1));
}

.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-5);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.site-footer__title {
  margin: 18px 0 0;
  font-family: var(--ff-display);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--soil);
}

.site-footer__lead {
  max-width: 68ch;
  margin: 20px 0 0;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink-soft);
}

.site-footer__nav {
  display: grid;
  gap: 10px;
  align-content: start;
}

.site-footer__nav a,
.site-footer__up {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.site-footer__nav a:hover,
.site-footer__up:hover {
  color: var(--terracotta);
  transform: translateX(4px);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: var(--s-5);
}

.site-footer__card {
  min-width: 0;
  padding-top: 16px;
  border-top: 2px solid var(--soil);
}

.site-footer__card span {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.site-footer__card p,
.site-footer__bottom p {
  margin: 14px 0 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding-top: var(--s-5);
}

@media (max-width: 980px) {
  .site-footer__top,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .site-footer,
  .site-footer * {
    min-width: 0;
  }

  .site-footer__inner {
    padding-inline: 20px;
  }

  .site-footer__lead,
  .site-footer__card p,
  .site-footer__bottom p,
  .site-footer__nav a,
  .site-footer__up {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: start;
  }
}

/* ============================================================
   MOBILE HARDENING
============================================================ */
html, body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

.container,
.container-wide,
section,
header,
article,
div,
p,
h1,
h2,
h3,
h4,
li,
a,
button,
span,
small,
em,
strong,
b,
table,
thead,
tbody,
tr,
td,
th,
dl,
dt,
dd,
nav,
aside,
blockquote {
  min-width: 0;
}

@media (max-width: 760px) {
  .btn,
  .top-nav__cta,
  .hero__ctas a,
  .index__link,
  .compare-strip__more,
  .companycard__actions a,
  .faqitem__txt,
  .faqitem__a p,
  .hero__lede,
  .section-title,
  .section-label,
  .podium__intro,
  .method__lead,
  .guide__lead,
  .mapsec__intro,
  .prices__lead,
  .warnings__lead,
  .cases__lead,
  .radarsec__lead,
  .checksec__lead,
  .seasonal__lead {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .btn {
    white-space: normal;
    text-align: left;
  }

  .rt-wrap,
  .compare-strip {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rt-wrap {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .rt,
  .compare-strip__table {
    min-width: 680px;
  }

  .calc-table,
  .reviews__table,
  .maptable {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}