:root {
  --paper: #f5f1e8;
  --paper-2: #ebe5d8;
  --ink: #17211f;
  --muted: #68716d;
  --line: #d5cec0;
  --orange: #f0643a;
  --orange-soft: #ffd8c7;
  --teal: #155c59;
  --teal-2: #0c3d3b;
  --lime: #d9e567;
  --blue: #476b8e;
  --white: #fffdf8;
  --shadow: 0 20px 70px rgba(30, 40, 36, .12);
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main, header, section, footer { min-width: 0; max-width: 100%; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
}
.skip-link:focus { top: 12px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 74px;
  padding: 12px max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid rgba(23, 33, 31, .12);
  background: rgba(245, 241, 232, .9);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50% 50% 50% 14%;
  background: var(--orange);
  color: var(--white);
  font-size: 19px;
  font-weight: 900;
  transform: rotate(-7deg);
}
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 14px; letter-spacing: .13em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.desktop-nav a { color: #3f4b47; font-size: 13px; font-weight: 750; text-decoration: none; }
.desktop-nav a:hover { color: var(--orange); }
.language-switch { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 850; }
.lang-btn {
  padding: 4px;
  border: 0;
  background: transparent;
  color: #9a9e98;
  cursor: pointer;
}
.lang-btn.active { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.section-pad { min-width: 0; padding: 110px max(24px, calc((100vw - var(--max)) / 2)); }
.soft-section { background: var(--paper-2); }
.dark-section { overflow: hidden; background: var(--ink); color: var(--white); }
.section-intro { max-width: 810px; margin-bottom: 56px; }
.section-intro.light { color: var(--white); }
.eyebrow {
  margin: 0 0 16px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3, h4, p, li, a, strong, span { overflow-wrap: break-word; }
h1 {
  margin-bottom: 24px;
  font-size: clamp(48px, 7vw, 92px);
  line-height: .94;
  letter-spacing: -.055em;
}
h1 em { color: var(--orange); font-family: Georgia, serif; font-weight: 400; }
h2 {
  margin-bottom: 20px;
  max-width: 900px;
  font-size: clamp(38px, 5.1vw, 68px);
  line-height: 1;
  letter-spacing: -.045em;
}
.section-intro > p:last-child { max-width: 710px; margin-bottom: 0; color: var(--muted); font-size: 19px; }
.section-intro.light > p:last-child { color: #aebbb6; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { border-color: var(--orange); background: var(--orange); color: var(--white); }
.button.ghost { background: transparent; }
.button.light-button { border-color: var(--white); background: var(--white); color: var(--ink); }
.source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-color: rgba(240, 100, 58, .45);
  text-underline-offset: 4px;
}
.source-link:hover { color: var(--orange); }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  align-items: center;
  gap: 60px;
  min-height: calc(100svh - 74px);
  padding-top: 84px;
  background:
    radial-gradient(circle at 84% 20%, rgba(217, 229, 103, .35), transparent 29%),
    linear-gradient(180deg, #f8f4ec, var(--paper));
}
.hero::after {
  position: absolute;
  right: -8vw;
  bottom: 22%;
  width: 28vw;
  height: 28vw;
  border: 1px solid rgba(23, 33, 31, .08);
  border-radius: 50%;
  content: "";
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { margin-bottom: 28px; }
.hero-lead { max-width: 680px; margin-bottom: 32px; color: #505b57; font-size: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { position: relative; z-index: 1; display: grid; min-width: 0; place-items: center; min-height: 520px; }
.market-visual { display: block; min-height: 610px; isolation: isolate; }
.penny-flyer-card {
  position: absolute;
  top: 4px;
  left: 4%;
  width: min(330px, 76%);
  margin: 0;
  transform: rotate(-4deg);
  filter: drop-shadow(0 28px 46px rgba(29, 35, 31, .22));
  z-index: 1;
}
.penny-flyer-card::before {
  position: absolute;
  inset: 12px -12px -12px 12px;
  z-index: -1;
  border-radius: 13px;
  background: var(--lime);
  content: "";
}
.penny-flyer-card > img { width: 100%; aspect-ratio: .66; border: 7px solid var(--white); border-radius: 11px; object-fit: cover; object-position: top; }
.penny-flyer-card figcaption {
  position: absolute;
  right: -36px;
  bottom: 54px;
  display: grid;
  width: 176px;
  gap: 2px;
  padding: 15px 17px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--white);
  transform: rotate(4deg);
}
.penny-flyer-card figcaption span { color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.penny-flyer-card figcaption b { font-family: Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1; }
.penny-flyer-card figcaption small { color: #b9c5c0; font-size: 9px; line-height: 1.25; }
.shopfully-card {
  position: absolute;
  right: -2%;
  bottom: 26px;
  z-index: 3;
  width: min(300px, 72%);
  padding: 23px;
  border: 1px solid rgba(74, 41, 131, .13);
  border-radius: 22px;
  background: rgba(255, 253, 248, .96);
  box-shadow: var(--shadow);
  transform: rotate(3deg);
}
.shopfully-card .new-player { display: inline-flex; margin-bottom: 24px; padding: 5px 8px; border-radius: 99px; background: #ede6ff; color: #5c29a3; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.shopfully-card img { width: 100%; height: 54px; object-fit: contain; object-position: left center; }
.shopfully-card p { margin: 19px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.market-tension {
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 4;
  width: 165px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--orange);
  color: white;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.3;
  transform: rotate(2deg);
}
.flyer-stack { position: relative; width: min(360px, 85%); aspect-ratio: .72; transform: rotate(4deg); }
.flyer-sheet { position: absolute; inset: 0; border: 1px solid rgba(23, 33, 31, .12); border-radius: 6px; box-shadow: var(--shadow); }
.flyer-sheet.back { background: var(--teal); transform: rotate(-9deg) translate(-12px, 12px); }
.flyer-sheet.middle { background: var(--lime); transform: rotate(-3deg) translate(-5px, 5px); }
.flyer-sheet.front { display: flex; flex-direction: column; padding: 26px; background: #fffdf8; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 2px solid var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.sheet-top strong { padding: 7px 10px; border-radius: 4px; background: var(--orange); color: white; font-size: 18px; }
.sheet-product { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0 20px; }
.sheet-product span { aspect-ratio: 1; border-radius: 50% 50% 44% 46%; background: var(--paper-2); }
.sheet-product span:nth-child(2) { background: var(--orange-soft); transform: translateY(12px); }
.sheet-product span:nth-child(3) { background: #c4d9d5; }
.sheet-lines { display: grid; gap: 9px; }
.sheet-lines i { display: block; width: 100%; height: 8px; border-radius: 99px; background: #d6d4cd; }
.sheet-lines i:nth-child(2) { width: 80%; }
.sheet-lines i:nth-child(3) { width: 57%; }
.sheet-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; }
.sheet-footer b { color: var(--teal); font-family: Georgia, serif; font-size: 48px; letter-spacing: -.05em; }
.sheet-footer small { max-width: 110px; color: var(--muted); font-size: 10px; line-height: 1.2; text-align: right; }
.cycle-labels {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cycle-labels b { color: var(--orange); }
.hero-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
  overflow: hidden;
}
.fact-card { display: flex; flex-direction: column; min-height: 186px; padding: 25px; background: rgba(255, 253, 248, .86); }
.fact-card p { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.fact-card strong { font-family: Georgia, serif; font-size: 38px; font-weight: 500; line-height: 1; }
.fact-card p span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.fact-card .source-link { margin-top: auto; }
.unknown-card { background: var(--orange-soft); }
.unknown-card strong { color: var(--orange); }

/* Definitions */
.definition { background: var(--white); }
.term-row { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.term-row article { position: relative; min-height: 250px; padding: 24px 24px 30px; border-right: 1px solid var(--line); }
.term-row article:last-child { border-right: 0; }
.term-row article > span { color: var(--orange); font-family: Georgia, serif; font-size: 13px; }
.term-row h3 { margin: 80px 0 12px; font-size: 21px; }
.term-row p { margin: 0; color: var(--muted); font-size: 14px; }
.plain-conclusion { max-width: 850px; margin: 50px 0 0; font-family: Georgia, serif; font-size: clamp(28px, 4vw, 46px); line-height: 1.15; }

/* Ecosystem */
.ecosystem { position: relative; }
.ecosystem::before {
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 50%;
  content: "";
}
.flow-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.flow-btn {
  padding: 10px 16px;
  border: 1px solid #47514e;
  border-radius: 999px;
  background: transparent;
  color: #c2cbc7;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.flow-btn:hover, .flow-btn.active { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.flow-story {
  display: grid;
  grid-template-columns: 190px minmax(280px, .85fr) minmax(300px, 1fr);
  align-items: center;
  gap: 24px;
  margin: -10px 0 24px;
  padding: 22px 26px;
  border: 1px solid #39433f;
  border-radius: 18px;
  background: #111917;
}
.flow-story > div { display: grid; gap: 3px; }
.flow-story span { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.flow-story strong { font-size: 17px; }
.flow-story p { margin: 0; }
.flow-path { color: var(--lime); font-family: Georgia, serif; font-size: 18px; line-height: 1.25; }
#flowStoryBody { color: #aebbb6; font-size: 12px; }
.ecosystem-shell { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .55fr); gap: 24px; }
.eco-map {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  gap: 11px;
  padding: 30px;
  border: 1px solid #39433f;
  border-radius: var(--radius-lg);
  background: #111917;
}
.eco-node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid #39433f;
  border-radius: 13px;
  background: #1c2623;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: opacity .25s ease, transform .2s ease, border .2s ease, background .2s ease;
}
.eco-node:hover { transform: translateY(-2px); border-color: var(--orange); }
.eco-node.selected { border-color: var(--lime); background: #27342f; box-shadow: 0 0 0 1px var(--lime); }
.eco-node small { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.eco-node strong { font-size: 13px; line-height: 1.15; }
.eco-node span { color: #93a09b; font-size: 9px; }
.supplier, .retailer, .consumer, .measurement { grid-column: 1 / -1; width: min(400px, 75%); justify-self: center; text-align: center; }
.retailer { background: #26362f; }
.consumer { background: #3a2a23; }
.measurement { background: #213039; }
.map-arrow, .map-split, .map-join { grid-column: 1 / -1; display: flex; justify-content: center; color: #66736e; font-size: 18px; }
.map-split, .map-join { justify-content: space-around; padding: 0 24%; }
.physical-lane { grid-column: 1 / 2; }
.digital-lane { grid-column: 3 / 4; }
.lane { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 34px 12px 12px; border: 1px dashed #3b4742; border-radius: 17px; }
.lane-label { position: absolute; top: 10px; left: 12px; margin: 0; color: #73807b; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.lane-arrow { color: #5b6762; font-size: 15px; line-height: 1; text-align: center; transform: rotate(90deg); }
.eco-map[data-active-flow] .eco-node.is-dim { opacity: .14; filter: grayscale(.8); }
.eco-map[data-active-flow] .eco-node:not(.is-dim) { box-shadow: 0 0 0 1px rgba(217,229,103,.18); }
.eco-map[data-active-flow="offer"] .lane-arrow,
.eco-map[data-active-flow="paper"] .physical-lane .lane-arrow,
.eco-map[data-active-flow="digital"] .digital-lane .lane-arrow,
.eco-map[data-active-flow="money"] .lane-arrow,
.eco-map[data-active-flow="data"] .lane-arrow { color: var(--lime); }
.eco-map[data-active-flow="paper"] .physical-lane { border-color: var(--orange); }
.eco-map[data-active-flow="digital"] .digital-lane { border-color: var(--blue); }
.eco-map[data-active-flow="data"] .measurement { border-color: var(--blue); }
.eco-detail {
  align-self: stretch;
  padding: 34px;
  border-radius: var(--radius-lg);
  background: var(--lime);
  color: var(--ink);
}
.detail-kicker { margin-bottom: 14px; color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.eco-detail h3 { margin-bottom: 18px; font-size: 31px; letter-spacing: -.03em; }
.eco-detail > p:nth-of-type(2) { font-size: 15px; }
.eco-detail dl { display: grid; gap: 16px; margin: 26px 0; padding: 20px 0; border-top: 1px solid rgba(23, 33, 31, .18); border-bottom: 1px solid rgba(23, 33, 31, .18); }
.eco-detail dl div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; }
.eco-detail dt { font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.eco-detail dd { margin: 0; font-size: 12px; }
.evidence-note { display: flex; flex-direction: column; gap: 4px; font-size: 10px; }
.evidence-note span { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.evidence-note strong { font-size: 12px; }
.company-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.company-tags span { padding: 5px 8px; border: 1px solid rgba(23, 33, 31, .22); border-radius: 99px; font-size: 9px; font-weight: 800; }
.map-footnote { margin: 26px 0 0; color: #aebbb6; font-family: Georgia, serif; font-size: 20px; text-align: center; }

/* Static value chain */
.value-chain { display: grid; grid-template-columns: 1fr 38px 1fr 38px 1fr; align-items: stretch; gap: 12px; padding: 30px; border: 1px solid #39433f; border-radius: var(--radius-lg); background: #111917; }
.stakeholder { min-width: 0; padding: 24px; border: 1px solid #39433f; border-radius: 16px; background: #1c2623; color: var(--white); }
.value-chain .stakeholder { grid-column: auto; width: auto; justify-self: stretch; text-align: left; }
.stakeholder small { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.stakeholder h3 { margin: 9px 0 10px; font-size: 18px; line-height: 1.15; }
.stakeholder p { margin: 0; color: #aebbb6; font-size: 12px; }
.stakeholder.retailer { border-color: rgba(217,229,103,.55); background: #27342f; }
.stakeholder.consumer { background: #3a2a23; text-align: left; }
.stakeholder.measurement { background: #213039; text-align: left; }
.chain-arrow { display: grid; place-items: center; color: var(--lime); font-size: 20px; }
.chain-branch-label { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-top: 12px; color: #8c9994; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.chain-branches { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.branch { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; gap: 10px; padding: 14px; border: 1px dashed #46514d; border-radius: 18px; }
.branch.digital { grid-template-columns: 1fr 30px 1fr; border-color: rgba(87,151,181,.55); }
.branch .stakeholder { padding: 19px; }
.chain-down { grid-column: 1 / -1; min-height: 34px; }
.chain-outcome { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 38px 1fr; gap: 12px; width: min(850px, 100%); justify-self: center; }

/* Evidence */
.evidence { background: var(--white); }
.number-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); overflow: hidden; }
.number-wall article { display: flex; flex-direction: column; min-height: 180px; padding: 26px; background: var(--paper); }
.number-wall strong { margin-bottom: 38px; color: var(--teal); font-family: Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1; }
.number-wall span { font-size: 14px; font-weight: 800; line-height: 1.25; }
.number-wall small { margin-top: 6px; color: var(--muted); font-size: 10px; }
.number-wall article.negative strong { color: var(--orange); }
.evidence-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.evidence-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  min-height: 116px;
  padding: 22px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.evidence-step:last-child { border-right: 0; }
.evidence-step b { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.evidence-step span { font-size: 15px; font-weight: 850; }
.evidence-step small { color: var(--muted); font-size: 11px; }
.evidence-step.active { background: var(--ink); color: var(--white); }
.evidence-step.active b { border-color: var(--orange); background: var(--orange); }
.evidence-step.active small { color: #aab7b2; }
.evidence-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  padding: 40px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--paper);
}
.panel-label { margin-bottom: 8px; color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.panel-label.warning { color: var(--orange); }
.evidence-panel h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(23px, 3vw, 34px); font-weight: 500; line-height: 1.18; }
.evidence-panel > p { grid-column: 1 / -1; max-width: 850px; margin: 0; color: var(--muted); }
.evidence-panel > div:last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; }

/* Channels */
.category-switch { display: inline-flex; gap: 5px; margin-bottom: 24px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.category-btn { padding: 11px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 850; cursor: pointer; }
.category-btn.active { background: var(--ink); color: var(--white); }
.channel-result { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; min-height: 360px; padding: 48px; border-radius: var(--radius-lg); background: var(--teal); color: var(--white); }
.channel-statement h3 { margin-bottom: 18px; font-size: clamp(28px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.channel-statement > p:not(.eyebrow) { color: #c1d3ce; font-size: 15px; }
.channel-bars { display: grid; gap: 22px; }
.channel-bars > div { display: grid; grid-template-columns: 100px 1fr 52px; align-items: center; gap: 12px; }
.channel-bars span { font-size: 12px; font-weight: 800; }
.channel-bars i { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.channel-bars i b { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--lime); transition: width .5s ease; }
.channel-bars strong { font-family: Georgia, serif; font-size: 20px; font-weight: 500; text-align: right; }
.channel-bars.is-comparison { gap: 9px; }
.channel-bars.is-comparison > div { grid-template-columns: 130px 1fr 48px; gap: 9px; }
.channel-bars.is-comparison span { font-size: 9px; }
.channel-bars.is-comparison i { height: 7px; }
.channel-bars.is-comparison strong { font-size: 15px; }
.channel-bars.is-comparison .paper-row i b { background: var(--orange); }
.channel-bars.is-comparison .paper-row { margin-bottom: 5px; }
.channel-bars.is-qualitative > div { grid-template-columns: 110px 1fr; }
.channel-bars.is-qualitative strong { display: none; }
.channel-bars.is-qualitative i { height: 42px; background: rgba(255,255,255,.1); }
.channel-bars.is-qualitative i b { display: flex; align-items: center; width: 100% !important; padding: 0 14px; color: var(--ink); font-size: 10px; font-style: normal; font-weight: 900; }
.digital-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); overflow: hidden; }
.digital-scale article { min-height: 190px; padding: 25px; background: var(--white); }
.digital-scale strong { display: block; margin-bottom: 34px; color: var(--teal); font-family: Georgia, serif; font-size: 29px; font-weight: 500; line-height: 1; }
.digital-scale h3 { margin-bottom: 5px; font-size: 15px; }
.digital-scale p { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.digital-scale small { color: var(--orange); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.metric-warning { margin: 13px 0 0; color: var(--muted); font-size: 11px; }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(920px, 100%); margin: 18px auto 0; }
.capability-grid article { min-height: 220px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.cap-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 38px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-size: 24px; }
.capability-grid h3 { margin-bottom: 11px; font-size: 18px; }
.capability-grid p { margin: 0; color: var(--muted); font-size: 13px; }

/* Timeline */
.history { background: var(--white); }
.timeline { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.timeline-track { display: grid; min-width: 0; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.timeline-dot { position: relative; min-height: 112px; padding: 22px 14px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.timeline-dot:last-child { border-right: 0; }
.timeline-dot::after { position: absolute; right: 14px; bottom: 14px; width: 8px; height: 8px; border: 1px solid var(--muted); border-radius: 50%; content: ""; }
.timeline-dot b { display: block; margin-bottom: 16px; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.timeline-dot span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.timeline-dot:hover, .timeline-dot.active { background: var(--lime); }
.timeline-dot.active::after { border-color: var(--orange); background: var(--orange); }
.timeline-card { min-height: 290px; padding: 46px; background: var(--paper); }
.timeline-card h3 { max-width: 780px; margin-bottom: 18px; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.timeline-card > p:not(.eyebrow) { max-width: 850px; color: var(--muted); }
.timeline-card > div { display: flex; flex-wrap: wrap; gap: 14px; }

/* Cases */
.case-layout { display: grid; min-width: 0; grid-template-columns: 230px 1fr; gap: 24px; }
.case-tabs { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.case-tab {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid #3e4945;
  border-radius: 14px;
  background: transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.case-tab:hover, .case-tab.active { border-color: var(--lime); background: #25302c; }
.case-tab img { width: 62px; height: 34px; padding: 4px; object-fit: contain; border-radius: 6px; background: white; }
.case-tab small { color: #9ca8a3; font-size: 10px; }
.word-logo { display: grid; width: 62px; height: 34px; place-items: center; border-radius: 6px; background: white; font-size: 13px; font-weight: 950; }
.tesco-logo { color: #e72329; }
.cba-logo { background: #f2d536; color: #15536b; }
.case-panel { min-width: 0; padding: 40px; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); }
.case-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.case-head h3 { margin-bottom: 28px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.verdict-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.case-journey { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: stretch; gap: 6px; }
.case-journey > div { min-height: 170px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.case-journey > b { align-self: center; color: var(--orange); text-align: center; }
.case-journey span { display: grid; width: 28px; height: 28px; place-items: center; margin-bottom: 30px; border-radius: 50%; background: var(--ink); color: white; font-size: 10px; }
.case-journey small { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.case-journey p { margin: 8px 0 0; font-size: 13px; }
.case-reading { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-reading h4 { margin: 0 0 8px; font-size: 12px; }
.case-reading p { margin: 0; color: var(--muted); font-size: 13px; }
.case-source-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 25px; }

/* Certainty */
.certainty { background: var(--white); }
.certainty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.certainty-grid article { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.certainty-grid h3 { margin-bottom: 24px; font-size: 24px; }
.certainty-grid ul { display: grid; gap: 14px; margin: 0; padding-left: 18px; }
.certainty-grid li { color: #4f5a56; font-size: 13px; }
.status-dot { display: block; width: 12px; height: 12px; margin-bottom: 35px; border-radius: 50%; }
.known .status-dot { background: var(--teal); }
.suggested .status-dot { background: #c79b34; }
.unknown .status-dot { background: var(--orange); }
.margin-story { display: grid; grid-template-columns: .7fr 1.2fr auto; align-items: center; gap: 35px; margin-top: 40px; padding: 34px; border-radius: var(--radius-md); background: var(--paper-2); }
.margin-story h3 { margin: 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; line-height: 1.15; }
.margin-story > p { margin: 0; color: var(--muted); font-size: 13px; }

/* Rules */
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.rule-grid.is-two { grid-template-columns: repeat(2, 1fr); }
.rule-grid article { display: flex; flex-direction: column; min-height: 320px; padding: 28px; border-right: 1px solid var(--line); background: var(--white); }
.rule-grid.is-two article { min-height: 570px; padding: 40px; }
.rule-grid article:last-child { border-right: 0; }
.rule-grid article > strong { margin-bottom: 70px; color: var(--orange); font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.rule-grid.is-two article > strong { margin-bottom: 55px; }
.rule-grid h3 { margin-bottom: 12px; font-size: 18px; }
.rule-grid.is-two h3 { max-width: 490px; font-size: 26px; line-height: 1.15; }
.rule-grid p { color: var(--muted); font-size: 12px; }
.rule-grid .source-link { margin-top: auto; }
.rule-detail { display: grid; gap: 7px; margin: 24px 0 34px; padding: 20px; border-radius: 14px; background: var(--paper); }
.rule-detail b { color: var(--teal); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.rule-detail span { color: #4f5b56; font-size: 12px; }
.dual-source { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.dual-source .source-link { margin-top: 0; }

/* Future */
.future { background: var(--white); }
.scenario-explorer { display: grid; min-width: 0; grid-template-columns: 330px 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.scenario-tabs { display: flex; flex-direction: column; background: var(--paper); }
.scenario-tab { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; min-height: 82px; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.scenario-tab:last-child { border-bottom: 0; }
.scenario-tab b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
.scenario-tab span { font-size: 13px; font-weight: 850; }
.scenario-tab:hover, .scenario-tab.active { background: var(--lime); }
.scenario-tab.active b { border-color: var(--ink); background: var(--ink); color: white; }
.scenario-panel { padding: 46px; background: var(--teal); color: var(--white); }
.scenario-panel h3 { max-width: 700px; margin-bottom: 18px; font-size: clamp(31px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.scenario-panel > p:not(.eyebrow) { max-width: 760px; color: #c3d5d0; }
.scenario-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.2); }
.scenario-columns h4 { color: var(--lime); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.scenario-columns p { color: #d3dfdc; font-size: 13px; }

/* Verdict */
.verdict { background: linear-gradient(145deg, #17211f, #0c3938); }
.verdict-inner { max-width: 1050px; }
.verdict blockquote { margin: 0 0 30px; color: var(--lime); font-family: Georgia, serif; font-size: clamp(38px, 6vw, 72px); line-height: 1.05; letter-spacing: -.025em; }
.verdict-inner > p:not(.eyebrow) { max-width: 850px; margin-bottom: 34px; color: #b8c6c1; font-size: 18px; }

/* Sources */
.sources { background: var(--paper); }
.source-tools { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-bottom: 20px; }
.source-tools label { display: grid; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.source-tools input, .source-tools select { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 14px; outline: none; }
.source-tools input:focus, .source-tools select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,92,89,.12); }
.source-legend { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 26px 0; }
.source-legend span { display: flex; align-items: center; gap: 7px; }
.source-legend i { color: var(--muted); font-size: 10px; font-style: normal; }
.grade { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-size: 9px; }
.grade.a { background: var(--teal); color: white; }
.grade.b { background: var(--lime); }
.grade.c { background: var(--orange-soft); color: #9b3e23; }
.grade.d { background: #d9dbe1; color: #4c5261; }
.source-count { margin: 0 0 15px; color: var(--muted); font-size: 12px; }
.source-list { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.source-list li { border-bottom: 1px solid var(--line); }
.source-list li a { display: grid; grid-template-columns: 58px 1fr auto; gap: 18px; align-items: center; padding: 17px 2px; color: var(--ink); text-decoration: none; }
.source-list li a:hover strong { color: var(--orange); }
.source-list li span { color: var(--muted); font-family: Georgia, serif; font-size: 15px; }
.source-list li strong { font-size: 13px; font-weight: 750; transition: color .2s ease; }
.source-list li i { color: var(--orange); font-style: normal; font-weight: 900; }
.source-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.source-id { display: flex; flex-direction: column; gap: 7px; }
.source-id strong { font-family: Georgia, serif; font-size: 18px; }
.source-content h3 { margin-bottom: 7px; font-size: 14px; line-height: 1.25; }
.source-content p { margin: 0; color: var(--muted); font-size: 11px; }
.source-card > a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--orange); font-size: 15px; font-weight: 900; text-decoration: none; }
.source-card > a:hover { border-color: var(--orange); background: var(--orange); color: white; }
.empty-sources { grid-column: 1 / -1; padding: 50px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); text-align: center; }

footer { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 46px max(24px, calc((100vw - var(--max)) / 2)); background: var(--ink); color: var(--white); }
footer strong { font-size: 14px; }
footer p { max-width: 600px; margin: 6px 0 0; color: #9ba8a3; font-size: 11px; }
.footer-actions { display: flex; align-items: center; gap: 30px; }
.footer-actions > a { color: var(--lime); font-size: 12px; font-weight: 800; }
.footer-author { display: flex; align-items: center; gap: 10px; color: #9ba8a3; font-size: 11px; }
.linkedin-link { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #59635f; border-radius: 50%; color: var(--white); font-family: Arial, sans-serif; font-size: 13px; text-decoration: none; }
.linkedin-link:hover { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.noscript { position: fixed; right: 20px; bottom: 20px; z-index: 1000; max-width: 380px; padding: 16px; border-radius: 10px; background: #fff3cd; color: #523f00; font-size: 13px; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr .65fr; gap: 24px; }
  .hero-visual { min-height: 500px; }
  .market-visual { min-height: 540px; }
  .penny-flyer-card { left: 0; width: min(285px, 78%); }
  .shopfully-card { right: -4%; width: min(260px, 70%); }
  .market-tension { top: 15px; }
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
  .term-row { grid-template-columns: repeat(3, 1fr); }
  .term-row article:nth-child(3) { border-right: 0; }
  .term-row article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .ecosystem-shell { grid-template-columns: 1fr; }
  .eco-detail { min-height: auto; }
  .case-layout { grid-template-columns: 1fr; }
  .case-tabs {
    flex-direction: row;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-bottom: 5px;
  }
  .case-tabs::-webkit-scrollbar { display: none; }
  .case-tab { flex: 0 0 170px; grid-template-columns: 55px 1fr; }
  .case-tab { scroll-snap-align: start; }
  .case-tab img, .word-logo { width: 50px; }
  .rule-grid { grid-template-columns: repeat(2, 1fr); }
  .rule-grid.is-two { grid-template-columns: repeat(2, 1fr); }
  .rule-grid article:nth-child(2) { border-right: 0; }
  .rule-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .value-chain { grid-template-columns: 1fr 30px 1fr 30px 1fr; padding: 22px; }
}

@media (max-width: 760px) {
  html {
    width: auto;
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: 76px;
    scrollbar-gutter: auto;
  }
  body { width: auto; font-size: 16px; }
  body, main { max-width: 100%; overflow-x: clip; }
  main, header, section, footer { width: auto; }
  .ecosystem::before { display: none; }
  .section-pad {
    padding-block: clamp(64px, 16vw, 78px);
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
  }
  .topbar {
    min-height: 64px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: 8px;
    padding-left: max(14px, env(safe-area-inset-left));
    gap: 12px;
    box-shadow: 0 8px 24px rgba(23, 33, 31, .06);
  }
  .brand-mark { width: 36px; height: 36px; }
  .brand strong { font-size: 12px; }
  .brand small { display: none; }
  .lang-btn { min-width: 42px; min-height: 42px; }
  h1 { font-size: clamp(42px, 14vw, 64px); line-height: .96; }
  h2 { font-size: clamp(34px, 10.5vw, 50px); line-height: 1.02; }
  .section-intro { margin-bottom: 40px; }
  .section-intro > p:last-child { font-size: 17px; }
  .hero { display: block; min-height: auto; padding-top: 62px; }
  .hero-lead { font-size: 16px; line-height: 1.55; }
  .hero-visual { width: 100%; min-height: 450px; margin: 36px auto 12px; overflow: hidden; }
  .market-visual { width: min(100%, 430px); min-height: 600px; margin-bottom: 0; contain: layout paint; }
  .penny-flyer-card { left: 8%; width: min(310px, 72vw); }
  .penny-flyer-card figcaption { right: -25px; }
  .shopfully-card { right: 4%; bottom: 16px; width: min(300px, 74vw); }
  .market-tension { right: 3%; top: 18px; }
  .flyer-stack { width: min(300px, 80vw); }
  .hero-facts { grid-template-columns: 1fr; }
  .fact-card { min-height: 150px; }
  .term-row { grid-template-columns: 1fr; }
  .term-row article { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
  .term-row article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .term-row article:last-child { border-bottom: 0; }
  .term-row h3 { margin-top: 34px; }
  .value-chain { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
  .stakeholder { padding: 17px; }
  .stakeholder h3 { margin: 7px 0 7px; font-size: 16px; }
  .stakeholder p { font-size: 11px; line-height: 1.42; }
  .stakeholder p::after { display: none; }
  .stakeholder.supplier p { font-size: 0; }
  .stakeholder.supplier p::before { font-size: 11px; content: "Dodá produktová data, dostupnost a obchodní podmínky akce."; }
  html[lang="en"] .stakeholder.supplier p::before { content: "Provides product data, availability and commercial terms."; }
  .stakeholder.retailer p { font-size: 0; }
  .stakeholder.retailer p::before { font-size: 11px; content: "Vybere produkty, cenu, termín, zásobu a kanály."; }
  html[lang="en"] .stakeholder.retailer p::before { content: "Chooses products, price, timing, stock and channels."; }
  .stakeholder.content p { font-size: 0; }
  .stakeholder.content p::before { font-size: 11px; content: "Převede nabídku do letáku, webu, feedu a dalších formátů."; }
  html[lang="en"] .stakeholder.content p::before { content: "Turns the offer into a flyer, website, feed and other formats."; }
  .branch.physical .stakeholder:nth-of-type(1) p,
  .branch.physical .stakeholder:nth-of-type(2) p,
  .branch.physical .stakeholder:nth-of-type(3) p,
  .branch.digital .stakeholder:nth-of-type(1) p,
  .branch.digital .stakeholder:nth-of-type(2) p,
  .chain-outcome .stakeholder p { font-size: 0; }
  .branch.physical .stakeholder:nth-of-type(1) p::before { font-size: 11px; content: "Vytiskne náklad a předá ho do distribuce."; }
  html[lang="en"] .branch.physical .stakeholder:nth-of-type(1) p::before { content: "Prints the run and hands it to distribution."; }
  .branch.physical .stakeholder:nth-of-type(2) p::before { font-size: 11px; content: "Určí oblasti, množství, trasy a kontrolu doručení."; }
  html[lang="en"] .branch.physical .stakeholder:nth-of-type(2) p::before { content: "Defines areas, volumes, routes and delivery control."; }
  .branch.physical .stakeholder:nth-of-type(3) p::before { font-size: 11px; content: "Dostane fyzický kus do schránky — nebo také ne."; }
  html[lang="en"] .branch.physical .stakeholder:nth-of-type(3) p::before { content: "Gets the physical copy into the mailbox — or does not."; }
  .branch.digital .stakeholder:nth-of-type(1) p::before { font-size: 11px; content: "Zveřejní nabídku ve vlastních digitálních kanálech."; }
  html[lang="en"] .branch.digital .stakeholder:nth-of-type(1) p::before { content: "Publishes the offer in retailer-owned digital channels."; }
  .branch.digital .stakeholder:nth-of-type(2) p::before { font-size: 11px; content: "Srovnají nabídky nebo přivedou pozornost zvenku."; }
  html[lang="en"] .branch.digital .stakeholder:nth-of-type(2) p::before { content: "Compare offers or bring attention from outside."; }
  .chain-outcome .stakeholder.consumer p::before { font-size: 11px; content: "Nabídku ignoruje, porovná nebo podle ní nakoupí."; }
  html[lang="en"] .chain-outcome .stakeholder.consumer p::before { content: "Ignores, compares or shops from the offer."; }
  .chain-outcome .stakeholder.measurement p::before { font-size: 11px; content: "Sledují dosah, návštěvu, transakce a marži."; }
  html[lang="en"] .chain-outcome .stakeholder.measurement p::before { content: "Track reach, visits, transactions and margin."; }
  .value-chain > .chain-arrow { min-height: 14px; font-size: 15px; transform: rotate(90deg); }
  .chain-branch-label { display: none; }
  .chain-branches { display: grid; grid-template-columns: 1fr; }
  .branch, .branch.digital { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
  .branch::before { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .12em; content: "FYZICKÁ CESTA"; }
  html[lang="en"] .branch::before { content: "PHYSICAL ROUTE"; }
  .branch.digital::before { color: var(--blue); content: "DIGITÁLNÍ CESTA"; }
  html[lang="en"] .branch.digital::before { content: "DIGITAL ROUTE"; }
  .branch .chain-arrow { min-height: 14px; font-size: 14px; transform: rotate(90deg); }
  .chain-down { display: none; }
  .chain-outcome { display: flex; flex-direction: column; width: 100%; }
  .chain-outcome .chain-arrow { min-height: 14px; font-size: 14px; transform: rotate(90deg); }
  .map-footnote { margin-top: 20px; font-size: 17px; line-height: 1.25; }
  .evidence-ladder { grid-template-columns: 1fr 1fr; }
  .number-wall { grid-template-columns: 1fr 1fr; }
  .evidence-step { min-height: 100px; border-bottom: 1px solid var(--line); }
  .evidence-step:nth-child(2) { border-right: 0; }
  .evidence-step:nth-child(n+3) { border-bottom: 0; }
  .evidence-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .evidence-panel h3 { font-size: 24px; }
  .evidence-panel > p, .evidence-panel > div:last-child { grid-column: 1; }
  .category-switch { width: 100%; border-radius: 16px; }
  .category-btn { flex: 1; min-height: 44px; border-radius: 12px; }
  .channel-result { min-width: 0; grid-template-columns: 1fr; gap: 34px; padding: 28px; }
  .channel-bars { min-width: 0; }
  .digital-scale { grid-template-columns: 1fr 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .timeline { overflow: hidden; }
  .timeline-track {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    touch-action: manipulation;
  }
  .timeline-dot {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--line);
  }
  .timeline-dot:nth-child(4n) { border-right: 0; }
  .timeline-dot:nth-child(n+5) { border-bottom: 0; }
  .timeline-dot b { margin-bottom: 6px; font-size: 16px; }
  .timeline-dot span { display: block; font-size: 7px; line-height: 1.15; letter-spacing: .02em; }
  .timeline-dot::after { right: 8px; bottom: 8px; width: 6px; height: 6px; }
  .timeline-card { min-height: 0; padding: 28px; }
  .case-tabs {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    overflow: hidden;
    touch-action: manipulation;
  }
  .case-tab {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 7px 4px;
    text-align: center;
  }
  .case-tab img, .case-tab .word-logo { width: 100%; max-width: 52px; height: 28px; margin: auto; }
  .case-tab small { display: none; }
  .case-panel { padding: 24px; }
  .case-head { flex-direction: column-reverse; }
  .case-journey { grid-template-columns: 1fr; }
  .case-journey > b { line-height: 1; transform: rotate(90deg); }
  .case-journey > div { min-height: 0; padding: 16px; }
  .case-journey span { margin-bottom: 14px; }
  .case-reading { grid-template-columns: 1fr; }
  .certainty-grid { grid-template-columns: 1fr; }
  .margin-story { grid-template-columns: 1fr; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid.is-two { grid-template-columns: 1fr; }
  .rule-grid.is-two article { min-height: 0; padding: 26px; }
  .rule-grid.is-two article > strong { margin-bottom: 30px; }
  .rule-grid.is-two h3 { font-size: 23px; }
  .rule-detail { margin: 20px 0 24px; padding: 16px; }
  .rule-grid article { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rule-grid article:nth-child(2) { border-right: 0; }
  .rule-grid article:last-child { border-bottom: 0; }
  .rule-grid article > strong { margin-bottom: 44px; }
  .scenario-explorer { grid-template-columns: 1fr; }
  .scenario-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .scenario-tab { min-height: 100px; border-right: 1px solid var(--line); }
  .scenario-tab:nth-child(2n) { border-right: 0; }
  .scenario-panel { padding: 26px; }
  .scenario-panel h3 { font-size: 29px; }
  .scenario-columns { gap: 20px; margin-top: 28px; padding-top: 22px; }
  .scenario-columns { grid-template-columns: 1fr; }
  .source-tools { grid-template-columns: 1fr; }
  .source-list li a { min-height: 58px; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  footer {
    align-items: start;
    flex-direction: column;
    padding-top: 40px;
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
  }
  .footer-actions { width: 100%; flex-wrap: wrap; align-items: start; justify-content: space-between; }
}

@media (max-width: 430px) {
  .hero-actions .button { width: 100%; }
  .market-visual { min-height: 535px; }
  .penny-flyer-card { left: 1%; width: 70vw; }
  .penny-flyer-card figcaption { right: -30px; bottom: 30px; width: 138px; padding: 12px 13px; }
  .penny-flyer-card figcaption b { font-size: 28px; }
  .shopfully-card { right: 0; bottom: 4px; width: 72vw; padding: 16px; }
  .shopfully-card .new-player { margin-bottom: 16px; }
  .shopfully-card img { height: 44px; }
  .shopfully-card p { margin: 14px 0 12px; }
  .market-tension { right: 0; top: 8px; width: 138px; }
  .number-wall, .digital-scale { grid-template-columns: 1fr; }
  .cycle-labels { flex-wrap: wrap; justify-content: center; }
  .sheet-footer b { font-size: 38px; }
  .evidence-step { grid-template-columns: 28px 1fr; padding: 16px 12px; }
  .evidence-step b { width: 26px; height: 26px; }
  .channel-bars > div { grid-template-columns: 76px minmax(46px, 1fr) 43px; gap: 8px; }
  .channel-bars.is-comparison > div { grid-template-columns: 104px minmax(38px, 1fr) 43px; gap: 7px; }
  .scenario-tab { min-height: 82px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
  .scenario-tab b { width: 30px; height: 30px; }
  .scenario-tab span { font-size: 11px; line-height: 1.25; }
  .source-list li a { grid-template-columns: 42px minmax(0, 1fr) auto; }
}

@media (max-width: 350px) {
  .section-pad { padding-inline: 14px; }
  .topbar { padding-inline: 10px; }
  .brand { gap: 7px; }
  .brand-mark { width: 34px; height: 34px; }
  .language-switch { gap: 1px; }
  .lang-btn { min-width: 38px; padding-inline: 2px; }
  .evidence-step { padding-inline: 10px; }
  .evidence-step span { font-size: 13px; }
  .channel-result, .timeline-card, .case-panel, .scenario-panel { padding: 22px; }
  .rule-grid.is-two article { padding: 24px; }
  .timeline-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline-dot:nth-child(4n) { border-right: 1px solid var(--line); }
  .timeline-dot:nth-child(3n) { border-right: 0; }
  .timeline-dot:nth-child(n+5) { border-bottom: 1px solid var(--line); }
  .timeline-dot:nth-child(n+7) { border-bottom: 0; }
  .case-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}