/* MeeGo Logistics — Landing styles
 * Marketing surface · Title Case · brand.800 accent · pill CTA only on primary
 * Tokens come from ../colors_and_type.css
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: none;
  scroll-padding-top: var(--landing-anchor-offset);
}
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  font: var(--body-md);
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ─── Layout primitives ─────────────────── */
:root {
  --landing-photo-width: 720px;
  --landing-photo-aspect: 4 / 3;
  --landing-copy-width: 540px;
  --landing-split-gap: 64px;
  /* L0.A · sticky-nav anchor offset.
   * nav.top is sticky 72 px (desktop) / 56 px (mobile); the 16 px
   * breathing keeps section content (eyebrow / photo top) clear of
   * the nav after a scroll-to-anchor.
   * Read by both CSS (`scroll-margin-top` on viewport sections) and
   * JS (`smoothScrollTo` in landing-body.js).
   */
  --nav-h: 72px;
  --landing-anchor-offset: 88px;
  /* L4 fix-4 · tonal rhythm.
   * Cold-white surface for "operational" sections (#platform,
   * #launch-support, #about-product, #faq). Pure neutral white —
   * reads colder vs warm #FAFAF7 default without using cool slate
   * (cool slate is forbidden per bundle README §4.1). */
  --surface-cold: var(--neutral-0);
}

@media (max-width: 1100px) {
  :root {
    --nav-h: 56px;
    --landing-anchor-offset: 72px;
  }
}

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 48px; width: 100%; }

/* Viewport-section — full-screen sections that snap on scroll */
.viewport-section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: var(--landing-anchor-offset);
  padding-top: 96px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.viewport-section > .wrap { width: 100%; }
@media (max-width: 1100px) {
  .viewport-section {
    min-height: auto;
    padding-top: 64px;
    padding-bottom: 48px;
  }
  html { scroll-snap-type: none; }
}

/* Non-viewport sections (FAQ, footer) keep natural flow */
.section { padding: 96px 0 80px; }
.section--lg.viewport-section,
.section--lg { padding-top: 96px; padding-bottom: 80px; }
.section--auto-h { min-height: auto; padding: 96px 0 80px; }
footer.foot { scroll-snap-align: start; scroll-margin-top: var(--landing-anchor-offset); }
.section--dark { background: var(--surface-brand-dark); color: #fff; }
.section--sunken { background: var(--surface-sunken); }
.section--cold { background: var(--surface-cold); }

/* ─── Nav target highlight (smooth-scroll feedback) ─── */
.section.is-target,
.hero.is-target,
section.is-target { animation: navTargetGlow 800ms cubic-bezier(.2,.8,.2,1); }
@keyframes navTargetGlow {
  0%   { box-shadow: inset 0 0 0 0 rgba(0, 0, 155, 0); }
  35%  { box-shadow: inset 0 0 0 3px rgba(0, 0, 155, 0.55); }
  100% { box-shadow: inset 0 0 0 0 rgba(0, 0, 155, 0); }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─── Eyebrow / heading system (DS-aligned) ─── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
  margin-bottom: 16px;
}
.section--dark .eyebrow { color: rgba(255,255,255,.55); }

h1, h2, h3, h4, h5 { color: inherit; letter-spacing: -0.02em; }
.h-2xl { font: var(--display-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.h-xl  { font: var(--display-xl);  font-weight: 600; letter-spacing: -0.020em; line-height: 1.05; }
.h-lg  { font: var(--display-lg);  letter-spacing: -0.015em; line-height: 1.10; }
.h-md  { font: var(--display-md);  letter-spacing: -0.010em; line-height: 1.15; }

.accent { color: var(--brand-800); display: block; }
.section--dark .accent { color: var(--brand-300); }

.lead { font: var(--body-lg); font-size: 19px; color: var(--text-secondary); max-width: 620px; line-height: 1.55; }
.section--dark .lead { color: rgba(255,255,255,.72); }

/* ─── Buttons ───────────────────────────── */
.btn { font: var(--label-lg); padding: 12px 22px; border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 8px; transition: 200ms var(--easing-standard); border: 1px solid transparent; }
.btn-pill { border-radius: 9999px; padding: 14px 32px; }
.btn-brand { background: var(--brand-600); color: #fff; }
.btn-brand:hover { background: var(--brand-700); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost { color: var(--text-primary); border-color: var(--border-default); background: #fff; }
.btn-ghost:hover { background: var(--neutral-100); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }
.btn-text { color: var(--text-primary); padding: 12px 6px; font: var(--label-lg); }
.btn-text:hover { color: var(--brand-700); }
.btn-text-light { color: rgba(255,255,255,.85); }
.btn-text-light:hover { color: #fff; }

/* ─── Top nav ───────────────────────────── */
nav.top { position: sticky; top: 0; z-index: 100; background: rgba(250,250,247,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle); }
nav.top .row { display: flex; align-items: center; justify-content: space-between; gap: 48px; height: 72px; }
nav.top .logo { display: inline-flex; align-items: center; transition: opacity 160ms var(--easing-standard); cursor: pointer; }
nav.top .logo:hover { opacity: 0.85; }
nav.top .logo img { height: 26px; }
nav.top ul.links { display: flex; gap: 20px; list-style: none; }
nav.top ul.links a { font: var(--label-md); color: var(--text-secondary); transition: color 120ms; }
nav.top ul.links a:hover { color: var(--text-primary); }
nav.top .right { display: flex; gap: 12px; align-items: center; }
.locale { font: var(--label-md); color: var(--text-tertiary); display: flex; gap: 4px; }
.locale .on { color: var(--text-primary); font-weight: 600; }
.btn-sm { padding: 8px 16px; font: var(--label-md); }
.btn-pill.btn-sm { padding: 8px 20px; }

/* ─── Hero carousel ─────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero .stage { position: relative; min-height: 580px; width: 100%; }
.hero .stage:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}
.hero .slide { position: absolute; inset: 0; display: grid; grid-template-columns: 40fr 60fr; gap: 64px; align-items: center; opacity: 0; pointer-events: none; transition: opacity 600ms var(--easing-standard); }
.hero .slide.active { opacity: 1; pointer-events: auto; }
.hero .slide .copy h1,
.hero .slide .copy h2 { margin-bottom: 24px; }
.hero .slide .copy .lead { margin-bottom: 32px; }
.hero .slide .ctas { display: flex; gap: 14px; align-items: center; }

/* ─── Unified photo card standard ────────────────────
 * Same visual geometry across hero / platform / split sections / contacts.
 * 4:3 aspect, 720px max width, 24px radius, premium inset rim.
 */
.photo-std,
.hero .photo-card,
.split .img-wrap,
.driver-visual .photo {
  position: relative;
  aspect-ratio: var(--landing-photo-aspect);
  max-width: var(--landing-photo-width);
  width: 100%;
  height: auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--neutral-200);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 24px rgba(28,27,23,0.08);
}
.photo-std img,
.hero .photo-card img,
.split .img-wrap img,
.driver-visual .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero photo card needs the chip overlapping outside on right; lift overflow */
.hero .photo-card {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.hero .photo-card .frame {
  position: absolute; inset: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--neutral-200);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 24px rgba(28,27,23,0.08);
}
.hero .photo-card .ambient {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero .photo-card .overlay-chip {
  position: absolute; right: -24px; bottom: 28px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  min-width: 240px;
  box-shadow:
    0 18px 48px rgba(0, 0, 30, 0.18),
    0 2px 6px rgba(0, 0, 30, 0.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  z-index: 2;
}
.hero .photo-card .overlay-chip .lab { font: var(--label-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.hero .photo-card .overlay-chip .val { font: var(--display-sm); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.hero .photo-card .overlay-chip .delta { font: var(--label-md); font-size: 12px; padding: 2px 6px; border-radius: 4px; background: #DCFCE7; color: #15803D; letter-spacing: 0; }
.hero .photo-card .overlay-chip .desc { font: var(--body-sm); color: var(--text-secondary); margin-top: 6px; }

/* Driver visual: outer container holds photo + iPhone, photo uses the standard card */
.driver-visual { position: relative; aspect-ratio: 4 / 3; max-width: 720px; width: 100%; }
.driver-visual .photo { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; }

.hero .controls { display: flex; align-items: center; justify-content: center; margin-top: 40px; }
/* Hero carousel dots — Lighthouse target-size requires ≥ 24×24 px;
 * the visible 4-px bar is rendered via ::before so the surrounding
 * button bounding box can grow to 24×24 (and 40×24 when active)
 * without changing the visual rhythm. */
.hero .dots { display: flex; gap: 8px; align-items: center; }
.hero .dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: width 200ms;
}
.hero .dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--neutral-300);
  transition: 200ms;
}
.hero .dots button.active { width: 40px; }
.hero .dots button.active::before { background: var(--brand-600); }
.hero .dots button:hover::before { background: var(--neutral-500); }
.hero .dots button.active:hover::before { background: var(--brand-700); }

/* ─── Generic split section ─────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(380px, var(--landing-copy-width)) minmax(0, var(--landing-photo-width));
  gap: var(--landing-split-gap);
  align-items: start;
  justify-content: center;
}
.split.flip,
.platform-split,
.section--carriers .split {
  grid-template-columns: minmax(0, var(--landing-photo-width)) minmax(380px, var(--landing-copy-width));
}
.split.split-tight { gap: var(--landing-split-gap); }
.split .copy { max-width: var(--landing-copy-width); }
.split .copy h2 { margin-bottom: 20px; }
.split .copy .lead { margin-bottom: 40px; }
.split.flip > .copy { order: 2; }
/* On the photo side, push the standard photo card to align nicely on the row */
.split > .img-wrap { justify-self: center; }
.split.flip > .img-wrap { justify-self: center; }
.about-product-photo img { object-position: 100% center; }
/* L7.5 / L7.6 / L9 · #about-product media stack — photo + mockup
 * placeholder tile. Vertical column stack inside the media side
 * of the .split.about-product-split layout. Holds the photo (top)
 * and the «Контур продукта» mockup placeholder (bottom) until
 * Claude Design renders the final infographic. */
.about-product-media {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--landing-photo-width);
  margin: 0 auto;
}
/* ─── L7.5 fix-1 / L8 · Mockup placeholder primitives ─────────
 * Used by `.concept-panel.concept-panel--mockup` (Triple Auction
 * in #platform) and `.about-product-mockup` (Контур продукта в
 * #about-product). Deliberate same-size visual tile/panel that
 * holds the correct space, explains what should be drawn, and
 * makes the future Claude Design replacement obvious while
 * preserving the landing rhythm. Avoid «Coming soon / Скоро»
 * wording — title + caption + dashed-border stage signal
 * placeholder intent without an explicit «Макет» chip (per L7.6
 * controlled polish · Valentin product accept).
 */
.mockup-stage {
  background: var(--brand-50);
  border: 1.5px dashed var(--brand-200);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 220px;
  margin-top: 12px;
}
.mockup-stage-hint {
  font: var(--label-md);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-align: center;
}
/* Triple Auction mockup occupies the visual footprint of the
 * previous SVG (viewBox 720x320 within concept-panel). */
.concept-panel--mockup .mockup-stage {
  aspect-ratio: 720 / 320;
  min-height: 220px;
}
/* About product placeholder under photo. Visual weight reaches
 * down toward 3rd/4th about-product card lower edge per Codex
 * L7.5 fix-1 alignment intent. */
.about-product-mockup {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
}
.about-product-mockup .mockup-title {
  font: var(--heading-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.about-product-mockup .mockup-caption {
  font: var(--body-sm);
  color: var(--text-secondary);
  margin: 0;
}
.about-product-mockup .mockup-stage {
  aspect-ratio: auto;
  min-height: 180px;
}
.platform-visual-stack,
.section-visual-stack,
.drivers-stack {
  width: 100%;
  max-width: var(--landing-photo-width);
  justify-self: center;
}
.platform-visual-stack,
.section-visual-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.platform-cards { margin-top: 36px; }

/* ─── Concept infographics — side-panel variant ──────
 * These styles are a deliberate side-panel adaptation of the
 * full-width `ig-card` layout from
 * `_design-imports/iter-11-2026-05-06/bundle/landing/concepts.html`.
 * Sizes are reduced to fit inside the 720 px split-side column on
 * the home landing (tier-grid 1fr 190px instead of 1fr 240px,
 * tier-score 170 instead of 200, concept-panel padding 32/28
 * instead of 48/40, gates 28-px arrow gutters instead of 32, etc.).
 * When porting concepts to a standalone `/concepts` page, use the
 * source `ig-card` numbers from `concepts.html`, not these.
 *
 * L0.D / L7.5 · concept-panel is not clickable / not tappable.
 * Explicit `cursor: default` + neutralised panel-level hover so
 * the card chrome (radius / shadow) does not invite a click.
 * Decorative hover interactions on INNER elements (doc-link
 * progressive green, tier-row build-up, eco-flow-step lift, etc.)
 * are allowed where explicitly approved (L7.5 interaction polish).
 */
.concept-panel {
  width: 100%;
  padding: 32px 28px 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  cursor: default;
}
.concept-panel:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}
.concept-num {
  font: var(--label-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  margin-bottom: 10px;
}
.concept-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.concept-caption {
  font: var(--body-md);
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.concept-stage {
  background: var(--surface-sunken, var(--neutral-100));
  border-radius: var(--radius-xl);
  padding: 28px;
  overflow: hidden;
}
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 28px;
  align-items: center;
}
.tier-criteria {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tier-row {
  display: grid;
  grid-template-columns: 132px 1fr 42px;
  align-items: center;
  gap: 12px;
}
.tier-row .name {
  font: var(--label-md);
  font-weight: 500;
  color: var(--text-primary);
}
.tier-row .bar {
  height: 10px;
  background: var(--neutral-200);
  border-radius: 5px;
  overflow: hidden;
}
.tier-row .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-700));
  border-radius: 5px;
  opacity: 0.55;
  transition: opacity 400ms var(--easing-standard);
}
.tier-row .pts {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-800);
  text-align: right;
  opacity: 0.65;
  transition: opacity 400ms var(--easing-standard);
}
/* L7.5 · tier-score hover build-up — bars and points "assemble" on
 * panel hover; numbers and criteria stay the same (no formula
 * change, no slider). Visual affordance only. */
.concept-panel:hover .tier-row .fill,
.concept-panel:hover .tier-row .pts {
  opacity: 1;
}
.tier-score {
  background: var(--brand-600);
  color: #fff;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(0,0,248,.18), 0 4px 8px rgba(0,0,248,.10);
  position: relative;
}
.tier-score::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed var(--brand-300);
}
.tier-score {
  transition: transform 400ms var(--easing-standard), box-shadow 400ms var(--easing-standard);
}
.concept-panel:hover .tier-score {
  transform: scale(1.04);
  box-shadow: 0 16px 32px rgba(0,0,248,.24), 0 6px 12px rgba(0,0,248,.14);
}
.tier-score .label {
  font: var(--label-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-bottom: 2px;
}
.tier-score .grade {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier-score .pts-total {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.85;
}
.tier-cap-note {
  margin: 18px 0 0;
  font: var(--body-md);
  color: rgba(255,255,255,.72);
}
.gates {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
  gap: 0;
}
.gate {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 200ms var(--easing-standard), border-color 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard);
}
.gate:hover {
  transform: translateY(-2px);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 2px var(--brand-50);
}
.gate:hover .num {
  background: var(--brand-600);
  color: #fff;
}
.gate.active {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 2px var(--brand-50);
}
/* Suppress default active state when ANY sibling gate is hovered.
 * Result: only one gate looks active at a time — either default
 * `.gate.active` (when no hover), or the currently hovered gate.
 * On hover leave, default active state returns. */
.gates:has(.gate:hover) .gate.active:not(:hover) {
  border-color: var(--border-subtle);
  box-shadow: none;
}
.gates:has(.gate:hover) .gate.active:not(:hover) .num {
  background: var(--brand-50);
  color: var(--brand-700);
}
.gate .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.gate.active .num { background: var(--brand-600); color: #fff; }
.gate .name {
  font: var(--heading-md);
  color: var(--text-primary);
}
.gate .desc {
  font: var(--body-sm);
  color: var(--text-secondary);
}
.gate .meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--body-xs);
  color: var(--text-tertiary);
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
}
.gate-arrow {
  align-self: center;
  color: var(--brand-400);
}
.doc-chain {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: 16px;
}
.doc-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
}
.doc-icon {
  width: 64px;
  height: 80px;
  background: #fff;
  border: 1.5px solid var(--brand-300);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
}
.doc-icon::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 1px;
  box-shadow:
    0 0 0 0 var(--neutral-300),
    0 6px 0 0 var(--neutral-300),
    0 12px 0 0 var(--neutral-300),
    0 18px 0 0 var(--neutral-300);
}
.doc-icon .seal {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(28,27,23,.15);
  transition: background 200ms var(--easing-standard), color 200ms var(--easing-standard);
}
/* L7.5 · evidence chain progressive green confirmation on hover.
 * Hover doc-link Nth → seals 1..N turn green, connectors 1..N-1 turn green.
 * Hover leave → all return to calm baseline. CSS-only via :has() / nth-child. */
.doc-chain:has(.doc-link:nth-child(1):hover) .doc-link:nth-child(-n+1) .seal,
.doc-chain:has(.doc-link:nth-child(2):hover) .doc-link:nth-child(-n+2) .seal,
.doc-chain:has(.doc-link:nth-child(3):hover) .doc-link:nth-child(-n+3) .seal,
.doc-chain:has(.doc-link:nth-child(4):hover) .doc-link:nth-child(-n+4) .seal,
.doc-chain:has(.doc-link:nth-child(5):hover) .doc-link:nth-child(-n+5) .seal {
  background: var(--success-500);
  color: #fff;
}
.doc-chain:has(.doc-link:nth-child(2):hover) .doc-link:nth-child(-n+1) .connector,
.doc-chain:has(.doc-link:nth-child(3):hover) .doc-link:nth-child(-n+2) .connector,
.doc-chain:has(.doc-link:nth-child(4):hover) .doc-link:nth-child(-n+3) .connector,
.doc-chain:has(.doc-link:nth-child(5):hover) .doc-link:nth-child(-n+4) .connector {
  background: var(--success-500);
}
.doc-chain:has(.doc-link:nth-child(2):hover) .doc-link:nth-child(-n+1) .connector::after,
.doc-chain:has(.doc-link:nth-child(3):hover) .doc-link:nth-child(-n+2) .connector::after,
.doc-chain:has(.doc-link:nth-child(4):hover) .doc-link:nth-child(-n+3) .connector::after,
.doc-chain:has(.doc-link:nth-child(5):hover) .doc-link:nth-child(-n+4) .connector::after {
  border-right-color: var(--success-500);
  border-top-color: var(--success-500);
}
.doc-link .connector,
.doc-link .connector::after {
  transition: background 200ms var(--easing-standard), border-color 200ms var(--easing-standard);
}
.doc-link .label {
  font: var(--label-md);
  color: var(--text-primary);
  margin-top: 4px;
}
.doc-link .sub {
  font: var(--body-xs);
  color: var(--text-tertiary);
}
.doc-link .connector {
  position: absolute;
  top: 32px;
  right: -16px;
  width: 16px;
  height: 2px;
  background: var(--brand-300);
}
.doc-link .connector::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--brand-300);
  border-top: 2px solid var(--brand-300);
  transform: translateY(-50%) rotate(45deg);
}
/* L4.5 · Hide trailing arrow on the last evidence-chain link.
 * Source `_design-imports/iter-11-2026-05-06/bundle/landing/concepts.html`
 * has this rule; restored after L0 found the regression. */
.doc-link:last-child .connector { display: none; }

/* ─── L0.B · Concept panel — dark-section variant ───────
 * Mounts the concept infographic inside `section--dark` /
 * `section--carriers` without the white page-card chrome that
 * makes the panel read as detached on the dark gradient.
 * Mirrors the existing `.section--dark .card` palette grammar
 * (rgba glass surface + brand-300 accents).
 */
.section--dark .concept-panel,
.section--carriers .concept-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 36px rgba(0, 0, 0, 0.18);
}
.section--dark .concept-panel:hover,
.section--carriers .concept-panel:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 36px rgba(0, 0, 0, 0.18);
}
.section--dark .concept-title,
.section--carriers .concept-title { color: #fff; }
.section--dark .concept-caption,
.section--carriers .concept-caption { color: rgba(255, 255, 255, 0.72); }
.section--dark .concept-stage,
.section--carriers .concept-stage {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Tier criteria — dark variant */
.section--dark .tier-row .name,
.section--carriers .tier-row .name { color: rgba(255, 255, 255, 0.92); }
.section--dark .tier-row .bar,
.section--carriers .tier-row .bar { background: rgba(255, 255, 255, 0.10); }
.section--dark .tier-row .pts,
.section--carriers .tier-row .pts { color: var(--brand-300); }
/* Tier score badge — brand-500 reads stronger than brand-600 on the
 * neutral-900 → brand-900 carrier gradient. */
.section--dark .tier-score,
.section--carriers .tier-score {
  background: var(--brand-500);
  box-shadow:
    0 12px 32px rgba(0, 0, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.section--dark .tier-score::before,
.section--carriers .tier-score::before { border-color: rgba(255, 255, 255, 0.35); }

/* ─── Card grids ────────────────────────── */
.cards-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }

.card {
  background: rgba(255,255,255,.66);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.74);
  padding: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 22px rgba(28,27,23,.06);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out, background 200ms ease-out;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.card:hover {
  background: rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 16px 34px rgba(28,27,23,.10);
  border-color: rgba(255,255,255,.90);
  transform: translateY(-4px) scale(1.02);
}
.card.is-target { animation: cardTargetGlow 800ms cubic-bezier(.2,.8,.2,1); }
@keyframes cardTargetGlow {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 155, 0); border-color: var(--neutral-200); }
  35%  { box-shadow: 0 0 0 3px rgba(0, 0, 155, 0.45); border-color: var(--brand-500); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 155, 0); border-color: var(--neutral-200); }
}
.card .num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--neutral-400);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
  position: relative;
  padding-bottom: 12px;
}
.card .num::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 24px; height: 2px; background: var(--brand-500); border-radius: 1px;
}
.card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--neutral-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-top: 4px;
}
.card p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--neutral-700);
  line-height: 1.55;
}

.section--dark .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 36px rgba(0,0,0,.18); }
.section--dark .card:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px rgba(0,0,0,.24); }
.section--dark .card .num { color: rgba(255,255,255,.5); }
.section--dark .card .num::after { background: var(--brand-300); }
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: var(--neutral-300); }

/* Compact card variant (legacy) — same baseline now */
.card-sm { padding: 24px; }
.card-sm h3 { font-size: 18px; }
.card-sm p { font-size: 14px; }

/* ─── Carrier dark section ──────────────── */
.section--carriers {
  background: linear-gradient(180deg, var(--neutral-900) 0%, var(--brand-900) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 80px;
}
.section--carriers::before {
  content: ""; position: absolute; top: -10%; right: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(0,0,248,.18), transparent 60%);
  pointer-events: none;
}
.section--carriers .eyebrow { color: var(--brand-300); }
.section--carriers .lead { color: rgba(255,255,255,.78); }
.section--carriers .accent { color: #fff; }
.section--carriers h2 .accent { display: inline; }
.section--carriers .img-wrap { box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,0.1); }

/* ─── Driver section: 2-column with right stack ──── */
.drivers-split { align-items: start; }
.drivers-stack { display: flex; flex-direction: column; gap: 24px; }
.drivers-stack .img-wrap { max-width: var(--landing-photo-width); width: 100%; }

/* Two-device row */
.device-row { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; padding: 8px 0; }
.device { position: relative; background: #0A0A0A; border-radius: 28px; padding: 5px; box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1.5px #1F1F1F, inset 0 1px 0 rgba(255,255,255,.06); }
.device .screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; position: relative; }
.device-iphone { width: 156px; aspect-ratio: 156/308; transform: rotate(-3deg); margin-right: -28px; z-index: 2; margin-top: -4px; }
.device-iphone .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 54px; height: 14px; background: #000; border-radius: 10px; z-index: 3; }
.device-samsung { width: 156px; aspect-ratio: 156/308; transform: rotate(3deg); margin-left: -28px; z-index: 1; margin-top: 20px; border-radius: 24px; }
.device-samsung .screen { border-radius: 18px; }

/* Store badges + QR — single inline row */
.store-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--neutral-900); color: #fff; text-decoration: none; transition: 160ms; }
.store-badge:hover { background: var(--neutral-800); }
.store-badge .store-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge .store-lab { font-size: 10px; opacity: .75; letter-spacing: .02em; }
.store-badge .store-name { font-size: 13px; font-weight: 600; }
.qr-row { display: flex; gap: 12px; justify-content: center; align-items: center; }
.qr-tile { display: flex; align-items: center; gap: 8px; }
.qr-grid { width: 52px; height: 52px; background: #fff; border: 1px solid var(--neutral-300); border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 4px; }
.qr-grid svg { width: 100%; height: 100%; }
.qr-tile .qr-lab { font-size: 9px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; max-width: 56px; }

/* ─── Driver-app real screens ─────────────── */
.da-screen { width: 100%; height: 100%; padding: 28px 12px 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); font-size: 9px; line-height: 1.3; overflow: hidden; }
.da-dark { background: #0A0A0F; color: #fff; }
.da-light { background: #FAFAF7; color: #1C1B17; }
.da-statusbar { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; padding: 0 4px; }
.da-statusbar .signals { display: flex; gap: 3px; }
.da-statusbar .s-cell, .da-statusbar .s-wifi, .da-statusbar .s-bat { width: 10px; height: 8px; background: currentColor; opacity: .85; border-radius: 1px; }
.da-statusbar .s-bat { width: 14px; }
.da-topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; }
.da-topbar .title { font-size: 9.5px; font-weight: 600; }
.da-topbar .ic { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.da-status-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(91,91,255,.15); font-size: 9px; }
.da-status-chip .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #5B5BFF; box-shadow: 0 0 0 0 rgba(91,91,255,.55); animation: pulseDot 1.6s ease-out infinite; }
.da-status-chip.status-amber { background: rgba(247,181,60,.18); }
.da-status-chip.status-amber .dot { width: 6px; height: 6px; border-radius: 50%; background: #F7B53C; }
.da-status-chip .lab { font-weight: 600; }
.da-status-chip .eta { opacity: .7; margin-left: auto; font-size: 8.5px; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(91,91,255,.55);} 70% { box-shadow: 0 0 0 6px rgba(91,91,255,0);} 100% { box-shadow: 0 0 0 0 rgba(91,91,255,0);} }
.da-card { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; }
.da-light .da-card { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.da-card-h { font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin-bottom: 4px; }
.da-card-t { font-size: 10.5px; font-weight: 600; margin-bottom: 2px; }
.da-card-b { font-size: 9px; opacity: .7; line-height: 1.4; margin-bottom: 8px; }
.da-route { display: flex; flex-direction: column; gap: 4px; }
.da-route .r-row { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; }
.da-route .r-pin { width: 7px; height: 7px; border-radius: 50%; }
.da-route .r-pin.r-from { background: #fff; border: 1.5px solid #5B5BFF; }
.da-route .r-pin.r-to { background: #5B5BFF; }
.da-light .da-route .r-pin.r-from { background: #fff; border-color: #5B5BFF; }
.da-route .r-track { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; margin-left: 3px; position: relative; }
.da-light .da-route .r-track { background: #EFEFEA; }
.da-route .r-fill { height: 100%; background: #5B5BFF; border-radius: 2px; }
.da-distance { font-size: 8.5px; opacity: .65; margin-top: 6px; }
.da-map { height: 56px; border-radius: 8px; overflow: hidden; }
.da-map svg { width: 100%; height: 100%; display: block; }
.da-cta { background: #5B5BFF; color: #fff; border: 0; padding: 8px 12px; border-radius: 8px; font-size: 10px; font-weight: 600; cursor: pointer; width: 100%; margin-top: 4px; }
.da-cta.ghost { background: transparent; color: #1C1B17; border: 1px solid #DDDBD3; margin-top: 6px; }
.da-cta.primary { margin-top: 8px; }
.da-h { font-size: 14px; font-weight: 700; margin: 4px 0; padding: 0 2px; }
.da-list { display: flex; flex-direction: column; gap: 6px; }
.da-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.da-item .state-dot { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.da-item.ok .state-dot { background: #22C55E; }
.da-item .state-dot.dot-amber { background: #F7B53C; }
.da-item .state-dot.dot-idle { background: #DDDBD3; }
.da-item .t { flex: 1; font-size: 9.5px; font-weight: 500; }
.da-item .st { font-size: 8.5px; opacity: .65; }
.da-item .st.ok { color: #15803D; opacity: 1; font-weight: 600; }
.da-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 8px 4px; border-top: 1px solid rgba(255,255,255,.08); margin-left: -12px; margin-right: -12px; }
.da-tabs.light { border-top-color: #EFEFEA; }
.da-tabs .tab { font-size: 8px; opacity: .55; display: flex; align-items: center; gap: 3px; }
.da-tabs .tab.active { opacity: 1; color: #5B5BFF; font-weight: 600; }
.da-tabs .tab.active .dot { width: 4px; height: 4px; border-radius: 50%; background: #5B5BFF; }

/* ─── Card icon (lucide line-style, no tile) ──────── */
.card-icon { width: 24px; height: 24px; color: var(--brand-600); display: flex; align-items: center; justify-content: flex-start; margin-bottom: 16px; background: none; border-radius: 0; }
.card-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.card .num.num-with-icon { font-size: 11px; opacity: .55; padding-bottom: 6px; border-bottom: none; margin-bottom: 8px; display: inline-block; }
.card .num.num-with-icon::after { display: none; }
.card:hover { border-color: var(--brand-200); }
.section--carriers .card-icon { color: var(--brand-300); }
.about-product-cards .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ─── Mini-mockups inside cards ─────────── */
.mockup { margin-top: 16px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); background: #fff; font-size: 11px; }
.section--carriers .mockup { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; }

/* Orders table */
.mockup-orders .row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); align-items: center; font-size: 11px; }
.mockup-orders .row:last-child { border-bottom: 0; }
.mockup-orders .id { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.mockup-orders .route { font-weight: 500; color: var(--text-secondary); font-size: 11px; }
.mockup-orders .status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.mockup-orders .status .dot { width: 6px; height: 6px; border-radius: 50%; }
.mockup-orders .status-active { background: rgba(91,91,255,.10); color: var(--brand-700); }
.mockup-orders .status-active .dot { background: var(--brand-500); }
.mockup-orders .status-pending { background: rgba(247,181,60,.18); color: #B47616; }
.mockup-orders .status-pending .dot { background: #F7B53C; }
.mockup-orders .status-done { background: rgba(34,197,94,.12); color: #15803D; }
.mockup-orders .status-done .dot { background: #22C55E; }
.section--carriers .mockup-orders .row { border-bottom-color: rgba(255,255,255,.08); }
.section--carriers .mockup-orders .id, .section--carriers .mockup-orders .route { color: rgba(255,255,255,.85); }

/* Mini map */
.mockup-map { display: flex; flex-direction: column; gap: 8px; }
.mockup-map svg { width: 100%; height: 140px; display: block; }
/* L9 fix-1 · mini-map two-line status legend — regular card text
 * scale (not tiny label). Each line has its own green status dot;
 * caption fills the bottom air under the route SVG without
 * shrinking the map. */
.map-legend {
  list-style: none;
  margin: 0;
  padding: 4px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
}
.map-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-legend li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-500);
  flex-shrink: 0;
}

/* Compact mockups inside cards-3 stacked column (split sections) */
.split .cards-3 .card { padding: 18px 20px; }
.split .cards-3 .card h3 { font-size: 16px; margin-bottom: 6px; }
.split .cards-3 .card p { font-size: 13px; }
.split .cards-3 .mockup { margin-top: 12px; }
.split .cards-3 .mockup-load { padding: 10px 12px; }
.split .cards-3 .mockup-kpi { padding: 10px 12px; }
.split .cards-3 .mockup-kpi .spark { height: 28px; }

/* KPI block */
.mockup-kpi { padding: 12px; }
.mockup-kpi .kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.mockup-kpi .chip { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--neutral-100); }
.mockup-kpi .chip .lab { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.mockup-kpi .chip .val { font: var(--label-md); font-weight: 600; color: var(--brand-700); font-size: 13px; }
.mockup-kpi .spark { width: 100%; height: 40px; }

/* Load card */
.mockup-load { padding: 12px; }
.mockup-load .route-line { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; margin-bottom: 4px; color: var(--text-primary); }
.section--carriers .mockup-load .route-line { color: #fff; }
.mockup-load .route-line .arrow { color: var(--brand-500); }
.mockup-load .meta-line { display: flex; gap: 6px; font-size: 10px; color: var(--text-tertiary); margin-bottom: 10px; }
.mockup-load .rate-row { display: flex; align-items: center; justify-content: space-between; }
.mockup-load .rate { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); font-size: 13px; }
.section--carriers .mockup-load .rate { color: #fff; }
.mockup-load .cta { background: var(--brand-500); color: #fff; border: 0; padding: 6px 12px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; }

/* Doc stack (Platform 03) */
.mockup-docs { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mockup-docs .d-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: var(--neutral-50); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); }
.mockup-docs .d-state { font-size: 12px; line-height: 1; }
.mockup-docs .d-state.ok { color: #15803D; }
.mockup-docs .d-state.amb { color: #B47616; }
.mockup-docs .d-state.idl { color: var(--neutral-400); }

/* Analytics KPI (Platform 04) */
.mockup-analytics { padding: 12px; }
.mockup-analytics .a-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.mockup-analytics .a-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--neutral-100); }
.mockup-analytics .a-chip .lab { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.mockup-analytics .a-chip .val { font: var(--label-md); font-weight: 600; color: var(--brand-700); font-size: 12px; }
.mockup-analytics .a-spark { width: 100%; height: 32px; }

/* Carrier bids (Shippers 01) */
.mockup-bids { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.mockup-bids .b-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; font-size: 11px; }
.mockup-bids .b-row.best { background: rgba(0,0,248,.06); }
.mockup-bids .b-name { color: var(--text-primary); font-weight: 500; }
.mockup-bids .b-rate { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); font-size: 11px; }
.mockup-bids .b-row.best { grid-template-columns: 1fr auto auto; }
.mockup-bids .b-badge { font-size: 9px; padding: 2px 6px; border-radius: 999px; background: var(--brand-500); color: #fff; font-weight: 600; letter-spacing: .02em; }

/* Close stepper (Shippers 03) */
.mockup-stepper { padding: 12px; }
.mockup-stepper .s-track { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.mockup-stepper .s-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mockup-stepper .s-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.mockup-stepper .s-step.ok .s-dot { background: #22C55E; }
.mockup-stepper .s-step.amb .s-dot { background: #F7B53C; }
.mockup-stepper .s-line { flex: 1; height: 2px; background: var(--neutral-200); border-radius: 1px; }
.mockup-stepper .s-line.ok { background: #22C55E; }
.mockup-stepper .s-line.amb { background: #F7B53C; }
.mockup-stepper .s-lab { font-size: 9px; color: var(--text-secondary); white-space: nowrap; }
.mockup-stepper .s-cap { font-size: 10px; color: var(--text-tertiary); text-align: center; }

/* Offer form (Carriers 02) */
.mockup-offer { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.section--carriers .mockup-offer { color: #fff; }
.mockup-offer .o-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; }
.mockup-offer .o-lab { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.mockup-offer .o-input { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: #fff; }
.mockup-offer .o-check { display: flex; align-items: center; gap: 6px; font-size: 10px; opacity: .85; }
.mockup-offer .o-box { width: 12px; height: 12px; border-radius: 3px; background: var(--brand-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.mockup-offer .o-cta { background: var(--brand-500); color: #fff; border: 0; padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; }

/* Fill graph (Carriers 03) */
.mockup-fill { padding: 10px 12px; }
.section--carriers .mockup-fill { color: #fff; }
.mockup-fill .f-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 56px; margin-bottom: 6px; }
.mockup-fill .f-bar { background: rgba(91,91,255,.5); border-radius: 3px 3px 0 0; position: relative; min-height: 20%; display: flex; align-items: flex-end; justify-content: center; }
.mockup-fill .f-bar.full { background: var(--brand-500); }
.mockup-fill .f-num { font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,.85); transform: translateY(-14px); white-space: nowrap; }
.mockup-fill .f-cap { font-size: 10px; opacity: .6; }

/* ─── Driver app mockups inside the existing Drivers section ───── */
.driver-app-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  max-width: var(--landing-photo-width);
  margin: 0 auto;
  padding-top: 8px;
}
.driver-app-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform 200ms var(--easing-standard);
}
.driver-app-device:hover {
  transform: translateY(-4px);
}
.driver-app-phone {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(28,27,23,.05), 0 16px 30px rgba(28,27,23,.14), 0 4px 8px rgba(28,27,23,.08);
  transition: box-shadow 200ms var(--easing-standard);
}
/* L7.5 · phone hover glow — brand ring around phone via box-shadow,
 * no QR distortion, no layout shift. */
.driver-app-device:hover .driver-app-phone {
  box-shadow: 0 0 0 1px rgba(28,27,23,.05), 0 0 0 4px var(--brand-100), 0 16px 30px rgba(28,27,23,.14), 0 4px 8px rgba(28,27,23,.08);
}
/* L5 fix-1 · Driver App install-row · per Valentin BLOCKER 2026-05-09.
 * Horizontal layout: badge + QR side by side under each phone.
 * Drop the prior heavy Liquid Glass frame around badges (badges are
 * already self-chromed black-pill graphics; the frame read as «большая
 * пустая рамка»). Keep Liquid Glass only on the QR frame so QR reads
 * as a deliberate "scan target" affordance. */
.driver-app-install-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.driver-app-badge {
  display: block;
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.driver-app-qr-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 6px 18px rgba(28, 27, 23, 0.08);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.driver-app-qr {
  display: block;
  width: 152px;
  height: 152px;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(28, 27, 23, 0.06);
}
/* ─── Launch & Support section (Block C) ───── */
.section--launch { background: #FAFAF7; }
.section--launch .split { gap: var(--landing-split-gap); }
.launch-cards { display: flex; flex-direction: column; gap: 16px; }
.launch-cards .card { padding: 24px; border-radius: 12px; }
.photo-card-placeholder {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 4 / 3;
  background: #F5F4EF;
  border: 1px dashed #DBD9D2;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B6963;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  justify-self: center;
}

/* ─── Driver section + iPhone mock (legacy) ─ */
.iphone { display: none; }

/* ─── Ecosystem / About / Advantages bands ─ */
.bandhead { max-width: 760px; margin-bottom: 64px; }
.bandhead h2 { margin-bottom: 16px; }

/* ─── FAQ ─────────────────────────────────── */
.faq { max-width: 880px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--border-default); padding: 24px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--border-default); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; font: var(--heading-lg); font-weight: 600; cursor: pointer; list-style: none; align-items: flex-start; color: var(--text-primary); min-height: 48px; padding: 8px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 200ms; margin-top: 4px; }
.faq details[open] summary .plus { background: var(--brand-600); border-color: var(--brand-600); transform: rotate(45deg); color: #fff; }
.faq summary .plus svg { stroke: currentColor; }
.faq details[open] summary .plus svg { stroke: #fff; }
.faq details p { margin-top: 16px; color: var(--text-secondary); font: var(--body-lg); max-width: 760px; }

/* ─── Contacts panel ─────────────────────── */
.contacts-panel { background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-md); }
.contacts-panel h3 { font: var(--heading-xl); margin-bottom: 12px; }
.contacts-panel .lead { font: var(--body-md); margin-bottom: 28px; color: var(--text-secondary); }
.contacts-panel ul.checklist { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 4px; }
/* L7.5 fix-1 · checklist hover affordance — stable transparent
 * border baseline, brand-tinted hover panel with subtle lift.
 * No layout shift. Checkmark marker preserved. */
.contacts-panel ul.checklist li {
  font: var(--body-md);
  padding: 10px 14px 10px 36px;
  position: relative;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: transform 200ms var(--easing-standard), border-color 200ms var(--easing-standard), background 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard);
}
.contacts-panel ul.checklist li::before { content: ""; position: absolute; left: 12px; top: 16px; width: 14px; height: 8px; border-left: 2px solid var(--brand-600); border-bottom: 2px solid var(--brand-600); transform: rotate(-45deg); }
.contacts-panel ul.checklist li:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  background: var(--brand-50);
  box-shadow: 0 4px 12px rgba(0, 0, 248, 0.08);
}
.contacts-panel .steps { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.contacts-panel .step { font: var(--label-sm); padding: 6px 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.contacts-panel .contact-rows { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.contacts-panel .contact-rows a { font: var(--body-md); color: var(--text-primary); display: flex; gap: 8px; align-items: center; }
.contacts-panel .contact-rows .lab { font: var(--label-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); width: 84px; flex-shrink: 0; }

/* ─── Footer ─────────────────────────────── */
footer.foot { background: var(--surface-brand-dark); color: rgba(255,255,255,.72); padding: 80px 0 32px; }
footer.foot .grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 48px; margin-bottom: 56px; }
footer.foot img.logo { height: 28px; filter: brightness(0) invert(1); margin-bottom: 20px; }
footer.foot p.tagline { font: var(--body-sm); max-width: 320px; line-height: 1.6; }
footer.foot h4, footer.foot h5 { font: var(--label-md); color: #fff; margin-bottom: 16px; font-weight: 600; }
footer.foot ul { list-style: none; }
footer.foot ul li { font: var(--body-sm); }
footer.foot ul li a { color: rgba(255,255,255,.6); transition: 120ms; display: inline-block; padding: 6px 0; min-height: 24px; }
footer.foot ul li a:hover { color: #fff; }
footer.foot .legal-info { font: var(--body-sm); color: rgba(255,255,255,.55); line-height: 1.7; }
footer.foot .legal-info strong { color: rgba(255,255,255,.78); font-weight: 500; display: block; margin-bottom: 4px; }
footer.foot a.foot-contact { color: rgba(255,255,255,.55); transition: 160ms var(--easing-standard); text-decoration: none; }
footer.foot a.foot-contact:hover { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; }
footer.foot .meta-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.08); font: var(--body-sm); color: rgba(255,255,255,.4); flex-wrap: wrap; gap: 16px; }
footer.foot .meta-bar a { color: rgba(255,255,255,.5); margin-right: 24px; }
footer.foot .meta-bar a:hover { color: #fff; }

@media (max-width: 1180px) and (min-width: 768px) {
  .wrap { padding: 0 32px; }
  .split,
  .split.flip,
  .platform-split,
  .section--carriers .split,
  .drivers-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split.flip > .copy { order: 0; }
  .split .copy {
    max-width: 720px;
    justify-self: center;
  }
  .split > .img-wrap,
  .platform-visual-stack,
  .section-visual-stack,
  .drivers-stack {
    max-width: var(--landing-photo-width);
    justify-self: center;
  }
}

/* ─── Mobile (390px) ────────────────────── */
.is-mobile body { font-size: 15px; scroll-snap-type: none; }
.is-mobile .wrap { padding: 0 20px; }
.is-mobile .section,
.is-mobile .hero { min-height: auto; scroll-snap-align: none; padding: 64px 0; display: block; }
.is-mobile .section--lg { padding: 80px 0; }
.is-mobile .section--carriers { padding: 80px 0; }
.is-mobile footer.foot { scroll-snap-align: none; }

.is-mobile nav.top .row { gap: 0; height: 56px; }
.is-mobile nav.top ul.links, .is-mobile nav.top .right .desktop-only { display: none; }
.is-mobile nav.top .logo img { height: 22px; }
.is-mobile .menu-icon { display: flex; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; }
.is-mobile .menu-icon span { width: 18px; height: 2px; min-height: 2px; flex: 0 0 2px; margin: 0; background: var(--text-primary); }

.is-mobile .h-2xl { font-size: 44px; line-height: 1.04; letter-spacing: -0.02em; }
.is-mobile .h-xl  { font-size: 36px; line-height: 1.08; }
.is-mobile .h-lg  { font-size: 28px; }
.is-mobile .h-md  { font-size: 24px; }
.is-mobile .lead { font-size: 16px; }

.is-mobile .hero { padding: 32px 0 64px; }
.is-mobile .hero .stage { min-height: 0; }
.is-mobile .hero .slide { position: relative; grid-template-columns: 1fr; gap: 32px; opacity: 1 !important; pointer-events: auto !important; display: none; }
.is-mobile .hero .slide.active { display: grid; }
.is-mobile .hero .photo-card { aspect-ratio: 4/3.4; border-radius: 16px; max-width: min(820px, 100%); margin-left: auto; margin-right: auto; }
.is-mobile .hero .photo-card .overlay-chip { right: 14px; bottom: 14px; padding: 10px 12px; min-width: 180px; }
.is-mobile .hero .controls { margin-top: 24px; }
.is-mobile .hero .ctas { flex-direction: column; align-items: stretch; gap: 10px; }
.is-mobile .hero .ctas .btn { justify-content: center; }

.is-mobile .split, .is-mobile .driver-visual { grid-template-columns: 1fr !important; gap: 32px; }
.is-mobile .split.flip > .copy { order: 0; }
.is-mobile .cards-2x2, .is-mobile .cards-3, .is-mobile .cards-4 { grid-template-columns: 1fr; gap: 12px; }
.is-mobile .card { padding: 22px 20px; }
.is-mobile .about-product-cards .card:last-child:nth-child(odd) { grid-column: auto; }
.is-mobile footer.foot .grid { grid-template-columns: 1fr; gap: 32px; }
.is-mobile footer.foot .meta-bar { flex-direction: column; align-items: flex-start; }
.is-mobile .iphone { position: relative; right: auto; bottom: auto; width: 56%; transform: rotate(0); margin: 24px auto 0; }
.is-mobile .driver-visual { aspect-ratio: auto; }
.is-mobile .driver-visual .photo { position: relative; aspect-ratio: 4/3; }
.is-mobile .driver-app-visual { grid-template-columns: 1fr; gap: 28px; max-width: 100%; }
.is-mobile .driver-app-device { gap: 18px; }
.is-mobile .driver-app-phone { max-width: 335px; border-radius: 24px; }
.is-mobile .driver-app-install-row { gap: 10px; }
.is-mobile .driver-app-badge { height: 44px; }
.is-mobile .driver-app-qr-frame { padding: 7px; border-radius: 14px; }
.is-mobile .driver-app-qr { width: 138px; height: 138px; padding: 7px; border-radius: 9px; }
.is-mobile .concept-panel { padding: 20px; border-radius: 18px; }
.is-mobile .concept-title { font-size: 24px; }
.is-mobile .concept-caption { font-size: 15px; margin-bottom: 20px; }
.is-mobile .concept-stage { padding: 18px; }
.is-mobile .tier-grid { grid-template-columns: 1fr; gap: 24px; }
.is-mobile .tier-row { grid-template-columns: 110px 1fr 40px; }
.is-mobile .tier-score { width: 150px; height: 150px; }
.is-mobile .tier-score .grade { font-size: 48px; }
.is-mobile .gates { grid-template-columns: 1fr; gap: 12px; }
.is-mobile .gate-arrow { transform: rotate(90deg); justify-self: center; }
.is-mobile .doc-chain { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
.is-mobile .doc-link .connector { display: none; }
.is-mobile .contacts-panel { padding: 28px 24px; }
.is-mobile .faq summary { font-size: 18px; }
.is-mobile .bandhead { margin-bottom: 40px; }

/* ═══════════════════════════════════════════════════════
 * L4 Slice 4 additions (2026-05-09)
 * L4.6 · Minimal mobile menu (full a11y baseline)
 * L4.8 · Ecosystem delegated-access strip
 * ═══════════════════════════════════════════════════════ */

/* L4.6 · mobile burger drawer over existing nav.top markup.
 * `.is-menu-open` class on nav.top is toggled by wireMobileMenu()
 * in landing-body.js; ARIA state (aria-expanded, aria-hidden) is
 * synced there. Reversible — remove this block + the JS function
 * to fully roll back. */

/* Mobile-only CTA items (`Войти`, `Подключить компанию`) sit at the
 * top of `ul.links` in markup. They are hidden by default so the
 * desktop horizontal nav and the closed mobile header stay clean —
 * the `.right .desktop-only` cluster keeps owning the desktop CTAs.
 * The opened mobile drawer below promotes them with higher
 * specificity. */
nav.top ul.links li.mobile-menu-cta { display: none; }

.is-mobile nav.top.is-menu-open ul.links {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--neutral-0);
  padding: 12px 20px 20px;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  list-style: none;
  margin: 0;
  z-index: 99;
  box-shadow: 0 16px 24px rgba(28, 27, 23, 0.06);
}
.is-mobile nav.top.is-menu-open ul.links li {
  padding: 0;
  list-style: none;
}
.is-mobile nav.top.is-menu-open ul.links li:not(.mobile-menu-cta) {
  padding: 10px 4px;
}
.is-mobile nav.top.is-menu-open ul.links li:not(.mobile-menu-cta) a {
  font: var(--label-lg);
  color: var(--text-primary);
  display: block;
  width: 100%;
  text-align: center;
}
/* Promote the mobile-only CTA items inside the opened drawer. */
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta {
  display: block;
}
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta + li.mobile-menu-cta {
  margin-top: 4px;
}
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta + li:not(.mobile-menu-cta) {
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta a.btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta--primary a.btn-pill {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}
/* Restore the canonical button text colors inside the mobile drawer.
 * The generic `nav.top ul.links a { color: var(--text-secondary) }` rule
 * (specificity 0,0,1,3) would otherwise outrank `.btn-text` and
 * `.btn-brand` (specificity 0,0,1,0) and turn both CTA labels into the
 * gray nav-link color. Match the desktop cluster: `Войти` keeps the
 * primary text color, `Подключить компанию` keeps white-on-brand. */
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta a.btn-text {
  color: var(--text-primary);
}
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta a.btn-brand {
  color: var(--neutral-0);
}
.is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta a.btn-brand:hover {
  color: var(--neutral-0);
}
/* Keep the duplicate `.right` desktop CTAs hidden when the mobile
 * drawer is open, so the header row stays as logo + close-burger
 * only and the drawer is the single visible navigation surface. */
.is-mobile nav.top.is-menu-open .right .desktop-only {
  display: none;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .is-mobile nav.top.is-menu-open ul.links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    left: 0;
    right: 0;
    top: 56px;
    width: auto;
    padding: 14px 48px 18px;
    gap: 8px 14px;
    border-radius: 0;
    box-shadow: 0 18px 36px rgba(28, 27, 23, 0.08);
  }
  .is-mobile nav.top.is-menu-open ul.links li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta {
    grid-column: span 2;
  }
  .is-mobile nav.top.is-menu-open ul.links li:not(.mobile-menu-cta) {
    padding: 8px 0;
  }
  .is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta + li.mobile-menu-cta,
  .is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta + li:not(.mobile-menu-cta) {
    margin-top: 0;
  }
  .is-mobile nav.top.is-menu-open ul.links li.mobile-menu-cta + li:not(.mobile-menu-cta) {
    border-top: 0;
    padding-top: 8px;
  }
  .is-mobile nav.top.is-menu-open + main {
    padding-top: 154px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Ecosystem · Iter-12 Claude Design port (2026-05-09)
 * Source: _design-imports/iter-12-2026-05-09-ecosystem/ecosystem.html
 *
 * Adaptations vs source per Valentin port-brief 2026-05-09:
 * - No outer .eco wrapper / radial gradients (uses existing
 *   section--sunken background instead).
 * - Eyebrow uses our global .eyebrow style (no pill chrome).
 * - Foreign visible terms localized in markup
 *   (SLA → сроки и качество, PoD → чек-лист доставки,
 *    ETA → время прибытия, SSO → единый вход,
 *    2FA → двухфакторная защита, Excel → таблицы).
 * - Legend chips renamed
 *   (Действие → Можно изменять, Чтение → Только просмотр,
 *    Аудит → Журнал действий).
 *
 * Replaces fix-1 (.ecosystem-delegated) + fix-2
 * (.ecosystem-roles .card:hover, .ecosystem-process,
 * .ecosystem-flow) CSS blocks. Old class selectors no longer
 * referenced from markup; full removal slated for L8 cleanup.
 * ═══════════════════════════════════════════════════════ */

.eco-roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 0;
  margin-top: 8px;
}
.eco-role {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: 200ms var(--easing-standard);
}
.eco-role:hover {
  border-color: var(--brand-400);
  box-shadow:
    var(--shadow-md),
    0 0 0 2px rgba(0, 0, 248, 0.08);
  transform: translateY(-4px);
}
.eco-role-head { display: flex; align-items: center; gap: 14px; }
.eco-role-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
  flex-shrink: 0;
}
.eco-role-meta { display: flex; flex-direction: column; gap: 2px; }
.eco-role-name { font: var(--label-md); font-weight: 600; color: var(--text-primary); }
.eco-role-tag { font: var(--body-xs); color: var(--text-tertiary); }
.eco-role h3 {
  font: var(--heading-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.eco-role p {
  font: var(--body-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.eco-role-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.eco-role-list li {
  font: var(--body-sm);
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.eco-role-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-600);
}

/* Bridge connectors from role cards to workflow strip. */
.eco-bridges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  height: 36px;
  margin-top: -10px;
}
/* Wave 1 · Driver persona block (separate from 4-org .eco-roles).
 * Driver is a person / mobile-app persona, not an organization type,
 * per canon v0.6.2. Visually distinct card centered below bridges. */
.eco-persona {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 24px;
}
.eco-role--persona {
  max-width: 720px;
  width: 100%;
  background: var(--surface-card);
  border-color: var(--brand-200);
}
.eco-role--persona .eco-role-name {
  color: var(--brand-800);
}
.eco-bridge { position: relative; }
.eco-bridge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-300), var(--brand-100));
  transform: translateX(-50%);
}
.eco-bridge::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--brand-400);
  border-bottom: 2px solid var(--brand-400);
  transform: translateX(-50%) rotate(45deg);
}

/* Workflow strip · 5 stages × 4 arrows = 9 grid tracks. */
.eco-flow {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.eco-flow-eyebrow {
  font: var(--label-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.eco-flow-row {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 1.4fr 0.5fr 1.4fr 0.5fr 1.4fr 0.5fr 1.4fr;
  align-items: stretch;
}
.eco-flow-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  text-align: center;
  transition: transform 200ms var(--easing-standard), border-color 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard);
}
/* L7.5 · ecosystem flow step hover lift — modest brand affordance,
 * keep arrows and layout stable, do not turn into a clickable wizard. */
.eco-flow-step:hover {
  transform: translateY(-2px);
  border-color: var(--brand-400);
  box-shadow: 0 4px 12px rgba(0, 0, 248, 0.10);
}
.eco-flow-num {
  font: var(--label-xs);
  font-weight: 700;
  color: var(--brand-700);
  letter-spacing: 0.08em;
}
.eco-flow-name {
  font: var(--label-md);
  font-weight: 600;
  color: var(--text-primary);
}
.eco-flow-who {
  font: var(--body-xs);
  color: var(--text-tertiary);
}
.eco-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400);
}

/* Team-access dark panel. */
.eco-team {
  border-radius: var(--radius-xl);
  padding: 32px 32px 28px;
  box-shadow:
    0 24px 60px rgba(15, 15, 60, 0.18),
    0 4px 12px rgba(15, 15, 60, 0.06);
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(0, 0, 248, 0.18), transparent 60%),
    linear-gradient(160deg, #11121A 0%, #1B1F33 60%, #0F0F4A 100%);
  color: #fff;
}
.eco-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.eco-team-eyebrow {
  font: var(--label-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.eco-team-h {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 4px 0 0;
}
.eco-team-sub {
  font: var(--body-sm);
  color: rgba(255, 255, 255, 0.7);
  max-width: 460px;
}
.eco-team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.eco-seat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: 160ms var(--easing-standard);
}
.eco-seat:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
.eco-seat-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 248, 0.32);
  border: 1px solid rgba(214, 214, 255, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-100);
}
.eco-seat-name {
  font: var(--label-md);
  font-weight: 600;
  color: #fff;
}
.eco-seat-scope {
  font: var(--body-xs);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.eco-team-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font: var(--body-sm);
  color: rgba(255, 255, 255, 0.7);
}
.eco-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  font: var(--label-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.eco-legend-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400);
}
.eco-legend-chip.read .dot { background: var(--success-400, #22C55E); }
.eco-legend-chip.audit .dot { background: var(--warning-400, #F2B33A); }
.eco-team-foot-meta {
  margin-left: auto;
  font: var(--body-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* Mobile responsive (.is-mobile equivalent of source @media 980px). */
.is-mobile .eco-roles { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
.is-mobile .eco-bridges { display: none; }
.is-mobile .eco-flow-row { grid-template-columns: 1fr; gap: 8px; }
.is-mobile .eco-flow-arrow { transform: rotate(90deg); padding: 4px 0; }
.is-mobile .eco-team { padding: 24px 20px; }
.is-mobile .eco-team-grid { grid-template-columns: repeat(2, 1fr); }
.is-mobile .eco-team-h { font-size: 22px; }
.is-mobile .eco-team-foot-meta { margin-left: 0; width: 100%; }

/* ============================================================
 * Wave 2b fix-1 · Documents-and-checks 4-tile sub-grid + Compound/
 * Dealership CODE-COMPOSE flows + Triple Choice port from Claude
 * Design source (_design-imports/iter-13-2026-05-13-triple-choice/).
 * All new class names scoped under parent classes (.docs-and-checks,
 * .concept-panel--mockup, .triple-choice) to avoid global leak per
 * Codex Wave 2b implementation GO guidance.
 * ============================================================ */

/* ─── «Документы и проверки» 4-tile 2x2 sub-grid (Option A) ─────────
 * Lives inside .about-product-mockup. Outer .about-product-mockup
 * rules still provide background, border, padding, .mockup-title,
 * .mockup-caption typography.
 *
 * Wave 2b fix-2 amendments:
 * - status badges («встроено» / «эскалация») removed per Valentin
 *   visual review (visually cheap for premium landing block)
 * - .dac-tile-name no longer needs flex: 1 (no badge to push against)
 * - hover + focus-visible affordance for accessible visual interaction
 *   (no real navigation target per Codex addendum §1 — tabindex=0 only)
 */
.docs-and-checks .dac-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.docs-and-checks .dac-tile {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  outline: none;
}
.docs-and-checks .dac-tile:hover,
.docs-and-checks .dac-tile:focus-visible {
  background: #fff;
  border-color: var(--brand-300);
  box-shadow: 0 4px 16px rgba(0, 0, 248, 0.10);
  transform: translateY(-1px);
}
.docs-and-checks .dac-tile:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.docs-and-checks .dac-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.docs-and-checks .dac-tile-num {
  font: var(--label-xs);
  font-weight: 700;
  color: var(--brand-700);
  letter-spacing: 0.08em;
}
.docs-and-checks .dac-tile-name {
  font: var(--label-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.docs-and-checks .dac-tile-body {
  font: var(--body-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}
.is-mobile .docs-and-checks .dac-grid { grid-template-columns: 1fr; }

/* ─── Concept-panel CODE-COMPOSE flow (Compound + Dealership) ─────
 * Scoped under .concept-panel--mockup. Used by concepts.compoundReadiness
 * and concepts.dealershipReceive in landing-body.js.
 *
 * Wave 2b fix-2 amendments:
 * - aux pills (.cp-aux*) removed — Compound infographic no longer
 *   shows working hours / address / «не запрещает приезд» note
 * - side-flow (.cp-side*) removed — Dealership infographic no longer
 *   shows soft-VIN offshoot in the scheme
 * - .cp-slots (vertical) replaced by .cp-slots-inline (compact) so the
 *   slot-load idea lives inline inside Compound stage 02 card body
 * - fix-4: dense one-line meta strings and technical tags replaced by
 *   .cp-meta-list thesis stacks for calmer B2B readability
 * - hover + focus-visible affordance on every .cp-step card
 */
.concept-panel--mockup .cp-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 6px;
  margin-top: 4px;
}
.concept-panel--mockup .cp-step {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  outline: none;
}
.concept-panel--mockup .cp-step:hover,
.concept-panel--mockup .cp-step:focus-visible {
  background: #fff;
  border-color: var(--brand-300);
  box-shadow: 0 4px 16px rgba(0, 0, 248, 0.10);
  transform: translateY(-1px);
}
.concept-panel--mockup .cp-step:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.concept-panel--mockup .cp-num {
  font: var(--label-xs);
  font-weight: 700;
  color: var(--brand-700);
  letter-spacing: 0.08em;
}
.concept-panel--mockup .cp-name {
  font: var(--label-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.concept-panel--mockup .cp-meta {
  font: var(--body-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.concept-panel--mockup .cp-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: var(--body-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.concept-panel--mockup .cp-meta-list li {
  margin: 0;
  padding: 0;
}
.concept-panel--mockup .cp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--label-md);
  font-weight: 600;
  color: var(--brand-300);
  padding: 0 2px;
}

/* Slot-load colour dots inline (Compound infographic stage 02 — kept
 * inside card body, not as a separate aux row per Valentin fix-2). */
.concept-panel--mockup .cp-slots-inline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.concept-panel--mockup .cp-slots-inline li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--body-xs);
  color: var(--text-secondary);
}
.concept-panel--mockup .cp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.concept-panel--mockup .cp-dot--green { background: var(--success-500, #22C55E); }
.concept-panel--mockup .cp-dot--amber { background: var(--warning-500, #F2B33A); }
.concept-panel--mockup .cp-dot--red   { background: #DC2626; }

/* Mobile: stack flow steps vertically, vertical arrows */
.is-mobile .concept-panel--mockup .cp-flow {
  grid-template-columns: 1fr;
}
.is-mobile .concept-panel--mockup .cp-arrow {
  transform: rotate(90deg);
  padding: 2px 0;
}

/* ─── Triple Choice — Wave 2b fix-2 rework (scoped to .triple-choice) ─
 * Reworked per Valentin visual review of fix-1 port:
 * - 3 parallel commercial mechanics (.tc-mechanics .tc-mech × 3), not
 *   timeline grid with convergence arrow + side deal column
 * - Money labels readable in dedicated .tc-mech-price row below visual,
 *   not floating absolute corner overlay
 * - Access modes (по приглашению / рейтинговый пул / гибридный доступ)
 *   live in one centered access row above commercial mechanics
 * - Axis row (.tc-axis) dropped — was misreading as
 *   Старт=Фиксированная / Торги=Аукцион / Финал=Лучшее (incorrect logic)
 * - Final deal sits in bottom full-width result band (.tc-result);
 *   shared-plan visibility is a calm supporting line under the price
 * - 3 commercial mechanics still converge into one chosen proposal
 * - hover + focus-visible on each .tc-mech card */
.triple-choice .tc-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: var(--shadow-sm);
}
.triple-choice .concept-stage {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.triple-choice .tc-mechanics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
.triple-choice .tc-mech {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  outline: none;
}
.triple-choice .tc-mech:hover,
.triple-choice .tc-mech:focus-visible {
  border-color: var(--brand-300);
  box-shadow: 0 6px 18px rgba(0, 0, 248, 0.10);
  transform: translateY(-1px);
}
.triple-choice .tc-mech:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.triple-choice .tc-mech-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.triple-choice .tc-num {
  font: var(--label-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}
.triple-choice .tc-name {
  font: var(--label-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.triple-choice .tc-sub {
  font: var(--body-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.triple-choice .tc-mech-vis {
  position: relative;
  height: 110px;
  background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(0, 0, 0, 0.04) 21px 22px);
  border-radius: 6px;
  overflow: hidden;
}
.triple-choice .tc-mech-price {
  font: var(--heading-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-700);
  text-align: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.triple-choice .tc-mech--auction .tc-mech-price { color: var(--brand-500); }
.triple-choice .tc-mech--best .tc-mech-price { color: var(--brand-300); }

/* Wave 2b fix-3 · Platform access modes — top row above mechanics.
 * Replaces fix-2 .tc-modes (which lived inside .tc-mech--auction);
 * access labels apply to the whole platform, not specifically to the
 * auction column. Labels: По приглашению / Рейтинговый пул /
 * Гибридный доступ (per Valentin fix-3 §1 — «аккредитованный» dropped
 * because participants are already verified). */
.triple-choice .tc-access {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
}
.triple-choice .tc-access-cap {
  font: var(--label-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.triple-choice .tc-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.triple-choice .tc-access-mode {
  display: inline-block;
  padding: 3px 10px;
  font: var(--label-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  letter-spacing: 0.01em;
}

/* Column 1 — Fixed price (single flat bar) */
.triple-choice .tc-bar--fixed {
  position: absolute;
  bottom: 0;
  left: 18%;
  width: 64%;
  height: 62%;
  background: linear-gradient(180deg, var(--brand-700), var(--brand-500));
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Column 2 — Auction (3 bars staircase down) */
.triple-choice .tc-auc {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: absolute;
  inset: 8px 12px 0;
}
.triple-choice .tc-auc-b {
  flex: 1;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-300));
  border-radius: 4px 4px 0 0;
}
.triple-choice .tc-auc-b:nth-child(1) { height: 82%; }
.triple-choice .tc-auc-b:nth-child(2) { height: 64%; }
.triple-choice .tc-auc-b:nth-child(3) { height: 46%; }

/* Column 3 — Best offer (line chart) */
.triple-choice .tc-bo {
  position: absolute;
  inset: 8px 8px 4px;
  width: calc(100% - 16px);
  height: calc(100% - 12px);
  color: var(--brand-300);
}
.triple-choice .tc-bo-dot { fill: var(--brand-500); }
.triple-choice .tc-bo-dot--best { fill: var(--brand-700); }

/* Bottom full-width result band — final selected deal with two calm
 * supporting lines under the confirmed price.
 * Wave 2b fix-6: mirror the calm .tc-access treatment instead of a
 * dominant blue band; keep the green confirmation mark as the accent. */
.triple-choice .tc-result {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface-cold, var(--neutral-50));
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(28, 27, 23, 0.06);
}
.triple-choice .tc-result-deal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.triple-choice .tc-result-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--success-500, #22C55E);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.20);
}
.triple-choice .tc-result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.triple-choice .tc-result-eyebrow {
  font: var(--label-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.triple-choice .tc-result-price {
  font: var(--heading-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.triple-choice .tc-result-sub {
  font: var(--label-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
.triple-choice .tc-result-note {
  font: var(--label-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* Mobile: stack mechanic cards vertically; result band keeps selected deal readable */
.is-mobile .triple-choice .tc-mechanics {
  grid-template-columns: 1fr;
  gap: 10px;
}
.is-mobile .triple-choice .tc-mech-vis {
  height: 90px;
}
.is-mobile .triple-choice .tc-result {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}