:root{
  --bg: #ECEBE4;
  --surface: #D1CFCB;
  --line: #B1AFAB;
  --accent-soft: #E6C9CC;
  --accent: #A27A7F;
  --text: #3a2e30;
}

*{box-sizing:border-box;margin:0;padding:0}

/* ============ MOTION SYSTEM ============ */
[data-reveal]{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-in{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   GLOBAL — prevent horizontal overflow & lock body width
   ========================================================= */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body{
  min-height: 100vh;
}
img, svg, canvas{
  max-width: 100%;
}

html,body{
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* TOP BAR */
.bar{
  position:sticky; top:0; z-index:10;
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items:center;
  padding: 14px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.bar__nav{display:flex;justify-content:center;gap:28px}
.bar__nav a:hover{color:var(--accent)}
.bar__right{justify-self:end;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.dot--open{background:var(--accent)}

.hero{
  position:relative;
  height: 86vh;
  min-height: 580px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
  /* leave room for the bottom CTA bar (~56px) */
  padding-bottom: 56px;
}
#noise{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

.hero__title-wrap{
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 0.9;
  cursor: default;
}

.hero__title{
  position: relative;
  font-weight: 600;
  font-size: clamp(140px, 22vw, 340px);
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 0.9;
  transition: letter-spacing .5s ease;
}

/* HERO STAGES */
.hero__stage{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 24px;
  width: min(720px, 92%);
  text-align:center;
}
.hero__stage[hidden]{ display:none; }

/* HERO BAR CTA — full-width control bar pinned to hero bottom */
.hero__bar-cta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;

  width: 100%;
  padding: 18px 24px;
  border: none;
  border-top: 1px solid var(--line);
  background: rgba(236,235,228,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;

  transition: background .3s ease, color .25s ease, padding .3s ease, letter-spacing .3s ease;
}

.hero__bar-cta-left{
  justify-self: start;
  /* compensate trailing letter-spacing — text reads centered within its slot */
  padding-right: 0.16em;
}
.hero__bar-cta-right{
  justify-self: end;
  color: var(--line);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding-right: 0;
}
.hero__bar-cta-mid{
  display:inline-flex;
  align-items:center;
  color: var(--accent);
  opacity: .7;
  transition: transform .35s cubic-bezier(.6,.05,.2,1), opacity .25s ease;
}

.hero__bar-cta:hover{
  background: var(--accent);
  color: var(--bg);
}
.hero__bar-cta:hover .hero__bar-cta-right{ color: var(--bg); opacity: .8; }
.hero__bar-cta:hover .hero__bar-cta-mid{ opacity: 1; transform: translateX(8px); }

/* hide hero bar cta when hero is in probe / result stage */
.hero[data-active-stage="probe"]  .hero__bar-cta,
.hero[data-active-stage="result"] .hero__bar-cta{
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}
.hero__bar-cta{ transition-property: background, color, padding, letter-spacing, opacity, transform; }

/* idle ambient pulse on the arrow — extremely subtle */
@keyframes heroArrowDrift{
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.hero__bar-cta-mid{ animation: heroArrowDrift 3.6s ease-in-out infinite; }
.hero__bar-cta:hover .hero__bar-cta-mid{ animation: none; }

@media (prefers-reduced-motion: reduce){
  .hero__bar-cta-mid{ animation: none; }
  .hero__bar-cta{ transition: none; }
}

/* PROBE */
.probe{
  width: 100%;
  background: rgba(236,235,228,0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  padding: 24px;
  text-align:left;
}
.probe__head{
  display:flex; justify-content:space-between; align-items:center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text);
}
.probe__step{ color: var(--accent); }
.probe__close{
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--line); cursor:pointer;
}
.probe__close:hover{ color: var(--accent); }

.probe__progress{
  margin: 16px 0 24px;
  height: 2px; background: var(--surface);
}
.probe__progress-fill{
  height: 100%; width: 0;
  background: var(--accent);
  transition: width .4s ease;
}

.probe__question{
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 24px;
  min-height: 70px;
}

.probe__choices{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.probe__choice{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.probe__choice:hover{
  border-color: var(--accent);
  background: rgba(226,201,204,0.18);
  transform: translateY(-1px);
}
.probe__choice-key{
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  border:1px solid var(--accent);
  padding: 2px 6px;
  flex-shrink:0;
}
.probe__choice-text{
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
}

/* RESULT */
.result{
  width: 100%;
  background: rgba(236,235,228,0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  padding: 24px;
  text-align: left;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.result__head{
  display:flex; justify-content:space-between; align-items:center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.result__id{ color: var(--accent); }
.result__label{ color: var(--line); }

.result__vec{
  display:grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  height: 28px;
}
.result__vec i{
  display:block;
  background: var(--surface);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .5s ease, background .3s ease;
}
.result__vec.is-on i{ transform: scaleY(1); }
.result__vec i.on{ background: var(--accent); }
.result__vec i.mid{ background: var(--accent-soft); }

.result__roles{
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.result__roles strong{ color: var(--accent); font-weight: 500; }

.result__match{
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display:flex; flex-direction:column; gap: 10px;
}
.result__match-label{
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--line);
}
.result__match-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
}
.result__match-row b{ color: var(--accent); font-weight: 500; }

.result__actions{
  display:flex; gap: 12px; flex-wrap:wrap;
}
.btn--ghost{
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover{
  background: var(--text); color: var(--bg); border-color: var(--text);
}

.def{ max-width: 900px; display:flex; flex-direction:column; gap: 40px; }

/* L — ЯДРО */
.def__core{
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0;
}

/* M — МЕХАНИКА */
.def__mech{
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.def__mech li{
  padding: 14px 0;
  font-size: 18px;
  line-height: 1.3;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.def__mech li:last-child{ border-bottom: none; }

/* S — ГРАНИЦА */
.def__bounds{
  list-style: none;
  padding: 0;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.def__bounds li{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}
.def__bounds li::before{
  content: "— ";
  color: var(--line);
}

/* BLOCK */
.block{
  display:grid;
  grid-template-columns: 80px 240px 1fr;
  gap: 32px;
  padding: 56px 24px;
  border-bottom: 1px solid var(--line);
}
.block__index{
  font-size:12px;
  letter-spacing:0.1em;
  color: var(--line);
}
.block__label{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--text);
}
.block__body{max-width: 720px}
.block__body p{margin-bottom:10px;font-size:16px}

.block__intro{
  grid-column: 3 / 4;
  margin-bottom: 24px;
  max-width: 720px;
}
.block__intro p{
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  opacity: .85;
}

/* Все основные content-контейнеры внутри .block принудительно
   ставятся в третью колонку, чтобы не съезжали под index/label. */
.block > .flow,
.block > .dims,
.block > .nodes,
.block > .match,
.block > .access,
.block > .def{
  grid-column: 3 / 4;
}

/* DEFINITION block — тут .def выступает основным контентом */
.block--def > .def{
  grid-column: 3 / 4;
}

/* legend */
.legend{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--line);
}
.legend__item{
  display:flex;
  align-items:center;
  gap: 8px;
}
.legend__sw{
  width: 14px;
  height: 6px;
  display:inline-block;
  background: var(--surface);
}
.legend__sw--off{ background: var(--surface); }
.legend__sw--mid{ background: var(--accent-soft); }
.legend__sw--on{  background: var(--accent); }
.legend__sep{
  width: 1px;
  height: 14px;
  background: var(--line);
}

/* FLOW (data flow steps) */
.flow{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  border-left: 1px solid var(--line);
}
.flow__step{
  position: relative;
  border-right: 1px solid var(--line);
  padding: 20px 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 220px;
  transition: background .25s ease;
}
.flow__step:hover{ background: rgba(226,201,204,0.18); }
.flow__step:hover .flow__num{ color: var(--accent); }

/* arrow between steps */
.flow__step:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -5px; top: 38px;
  width: 9px; height: 9px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  transform: rotate(45deg);
  background: var(--bg);
}

.flow__num{
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--line);
  transition: color .25s ease;
}
.flow__name{
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}
.flow__io{
  display:flex; gap: 8px;
  font-size: 12px;
  color: var(--text);
}
.flow__io span{
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--line);
  border:1px solid var(--line);
  padding: 1px 5px;
  align-self: flex-start;
}
.flow__desc{
  margin-top: auto;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  opacity: .85;
}

/* per-step reveal stagger */
.flow__step{ transition-delay: 0s; }
.flow.is-in .flow__step:nth-child(1){ transition-delay: .00s; }
.flow.is-in .flow__step:nth-child(2){ transition-delay: .08s; }
.flow.is-in .flow__step:nth-child(3){ transition-delay: .16s; }
.flow.is-in .flow__step:nth-child(4){ transition-delay: .24s; }
.flow.is-in .flow__step:nth-child(5){ transition-delay: .32s; }

/* DIMENSIONS */
.dims{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.dim{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 14px 16px;
  font-size:14px;
  display:flex;
  gap:14px;
  text-transform:lowercase;
  cursor: default;
  transition: background .2s ease, color .2s ease;
  position: relative;
}
.dim:hover{
  background: rgba(226,201,204,0.18);
  color: var(--accent);
}
.dim:hover span{ color: var(--accent); }
.dim::after{
  content: attr(data-tip);
  position: absolute;
  left: 16px; bottom: calc(100% - 4px);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--bg);
  background: var(--text);
  padding: 6px 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 4;
  text-transform: none;
}
.dim[data-tip]:hover::after{
  opacity: 1; transform: translateY(0);
}
.dim span{color:var(--line);min-width:24px}

/* NODES */
.nodes{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1px;
  background: var(--line);
  border:1px solid var(--line);
}
.node{
  background: var(--bg);
  padding: 18px 18px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 200px;
  cursor: default;
  position: relative;
  transition: padding-left .2s ease;
}

/* левый индикатор — заменяет фон-подсветку, не ломает читаемость ячеек */
.node::before{
  content:"";
  position:absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .2s ease, width .2s ease;
}
.node:hover::before{
  background: var(--accent);
  width: 4px;
}

/* акцент — на ID и state-точке, без заливки фона */
.node__id{
  font-size:12px;letter-spacing:0.15em;color:var(--line);
  transition: color .2s ease;
}
.node:hover .node__id{ color: var(--accent); }

.node:hover .node__state .dot{ box-shadow: 0 0 0 3px rgba(162,122,127,0.18); }
.node__state .dot{ transition: box-shadow .2s ease; }

/* вектор: сегменты не теряют цвет, просто подрастают по высоте,
   и появляется тонкая нумерация под ними */
.node__vec{
  display:grid;
  grid-template-columns: repeat(16,1fr);
  gap:2px;
  height:6px;
  transition: height .25s ease;
  position: relative;
  overflow: visible;       /* allow tooltips to escape the strip */
}
.node:hover .node__vec{ height: 14px; }

.node__vec i{
  position: relative;
  display:block;
  background:var(--surface);
  transform-origin: bottom;
  transition: background .25s ease, transform .2s ease;
}
.node__vec i.on{  background: var(--accent); }
.node__vec i.mid{ background: var(--accent-soft); }

.node:hover .node__vec i:hover{
  transform: scaleY(1.4);
}

/* axis labels appear under the vector on hover — функциональная подсказка */
.node__axes{
  display:grid;
  grid-template-columns: repeat(16,1fr);
  gap:2px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--line);
  height: 0;
  overflow:hidden;
  transition: height .25s ease, opacity .2s ease;
  opacity: 0;
}
.node:hover .node__axes{
  height: 12px;
  opacity: 1;
}
.node__axes i{
  display:block;
  text-align:center;
  font-style: normal;
}

.node__id{
  font-size:12px;letter-spacing:0.15em;color:var(--line);
}
.node__roles{
  font-size:14px;letter-spacing:0.05em;text-transform:uppercase;
}
.node__state{
  margin-top:auto;
  display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
}
.node__vec{
  display:grid;grid-template-columns: repeat(16,1fr);gap:2px;height:6px;
}
.node__vec i{display:block;background:var(--surface)}
.node__vec i.on{background:var(--accent)}
.node__vec i.mid{background:var(--accent-soft)}

/* MATCH */
.match{
  border:1px solid var(--line);
  padding: 24px;
}
.match__pair{
  display:grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items:center;
  gap: 16px;
  margin-bottom: 24px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:13px;
}
.match__line{
  height:1px;background:var(--accent);position:relative;
}
.match__line::before, .match__line::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%);
}
.match__line::before{left:0}
.match__line::after{right:0}

.score__row{
  display:grid;
  grid-template-columns: 120px 1fr 60px;
  gap:16px;
  align-items:center;
  padding: 6px 0;
  font-size:13px;
}
.score__row span:first-child{text-transform:uppercase;letter-spacing:0.1em;color:var(--text)}
.score__row span:last-child{text-align:right;color:var(--accent)}
.bar-track{
  height:4px;background:var(--surface);position:relative;
}
.bar-fill{
  height:100%;background:var(--accent);
}
.match__total{
  margin-top:24px;
  padding-top: 16px;
  border-top:1px solid var(--line);
  font-size:13px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);
}

/* ACCESS */
.access{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
/* GENERIC BUTTON */
.btn{
  position: relative;
  isolation: isolate;            /* create local stacking context */
  display:inline-flex;
  align-items:center;
  gap: 12px;
  border:1px solid var(--accent);
  color:var(--accent);
  background: transparent;
  padding: 14px 22px;
  letter-spacing: 0.14em;        /* было 0.18em — компактнее, текст не "плывёт" */
  text-transform:uppercase;
  font-size:13px;
  overflow: hidden;
  transition: color .25s ease, border-color .25s ease;
}
.btn:hover{ color: var(--bg); border-color: var(--accent); }

/* fill animation — pinned BELOW content via negative z-index in isolated context */
.btn::before{
  content:"";
  position:absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.6,.05,.2,1);
  z-index: -1;
}
.btn:hover::before{ transform: scaleX(1); }

/* ensure all children — including nested spans — stay above the fill */
.btn > *,
.btn .btn__label,
.btn .btn__arrow{
  position: relative;
  z-index: 1;
}

/* protect the label from being captured as part of the bare text node */
.btn__label{
  display: inline-block;
  /* visual centering compensation for the trailing letter-spacing */
  padding-right: 0.14em;
}

/* CTA variant — REQUEST A NODE */
.btn--cta{
  padding: 18px 24px;
  font-size: 14px;
  letter-spacing: 0.16em;
}
.btn__label{ display:inline-block; }
.btn__arrow{
  display:inline-flex;
  align-items:center;
  transition: transform .35s cubic-bezier(.6,.05,.2,1);
}
.btn--cta:hover .btn__arrow{
  transform: translateX(6px);
}

/* Pulse: тонкий "сигнал готовности" — повторяется раз в 4с,
   указывает что система ждёт действия. Останавливается на hover. */
.btn__pulse{
  position:absolute;
  inset:-1px;
  border:1px solid var(--accent);
  pointer-events:none;
  opacity: 0;
  z-index: 0;
  animation: btnPulse 4s ease-in-out infinite;
}
.btn--cta:hover .btn__pulse{ animation-play-state: paused; opacity: 0; }

@keyframes btnPulse{
  0%   { transform: scale(1);    opacity: 0.0; }
  10%  { transform: scale(1);    opacity: 0.55; }
  60%  { transform: scale(1.08); opacity: 0.0; }
  100% { transform: scale(1.08); opacity: 0.0; }
}

/* ghost variant — для "READ THE SYSTEM" в hero result */
.btn--ghost{
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost::before{ background: var(--text); }
.btn--ghost:hover{ color: var(--bg); border-color: var(--text); }

@media (prefers-reduced-motion: reduce){
  .btn__pulse{ animation: none; }
  .btn::before{ transition: none; }
}

.access__note{font-size:13px;color:var(--text);opacity:.7}

/* FOOTER */
.foot{
  display:flex;justify-content:space-between;
  padding:20px 24px;
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--line);
}

/* =========================================================
   FLOATING TOOLTIP — singleton, positioned via JS
   Used for vector cell axes (.node__vec, .result__vec).
   Lives on <body>, escapes all overflow / stacking contexts.
   ========================================================= */
.vec-tip{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;

  /* reset typography — defend against italic <i>, uppercase parents, etc. */
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;

  background: var(--text);
  color: var(--bg);
  padding: 6px 10px;

  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px)) translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.vec-tip.is-on{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px));
}
.vec-tip::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text);
}

/* ensure the cell still feels interactive */
.node__vec i[data-axis],
.result__vec i[data-axis]{
  cursor: help;
}

/* axis number label — small caption shown beside the tip text */
.vec-tip b{
  display: inline-block;
  font-weight: 500;
  color: var(--accent-soft);
  margin-right: 6px;
  letter-spacing: 0.08em;
}

/* =========================================================
   RESPONSIVE — tablet
   ========================================================= */
@media (max-width: 960px){
  .block{
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 40px 20px;
  }
  .block__label{ grid-column: 2; }
  .block__intro,
  .block__body,
  .block > .flow,
  .block > .dims,
  .block > .nodes,
  .block > .match,
  .block > .access,
  .block > .def{
    grid-column: 1 / -1;
  }

  .flow{ grid-template-columns: repeat(2, 1fr); }
  .flow__step:not(:last-child)::after{ display: none; }

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

  .bar{
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
    gap: 12px;
  }
  .bar__nav{ display: none; }
  .bar__right{ font-size: 11px; }

  .probe__choices{ grid-template-columns: 1fr; }
  .result__vec{ height: 22px; }

  .hero{ padding-bottom: 64px; }
  .hero__bar-cta{
    padding: 14px 20px;
    grid-template-columns: 1fr auto;
    gap: 14px;
  }
  .hero__bar-cta-right{ display: none; }
  .hero__bar-cta-left{ font-size: 11px; letter-spacing: 0.14em; }
}

/* =========================================================
   RESPONSIVE — phone
   ========================================================= */
@media (max-width: 600px){
  html, body{ font-size: 13px; }

  .bar{
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .bar__left{ font-size: 11px; }
  .bar__right{ font-size: 10px; gap: 6px; }

  .hero{
    height: auto;
    min-height: 70vh;
    padding: 60px 0 72px;
  }
  .hero__title{
    font-size: clamp(72px, 28vw, 160px);
  }

  .hero__bar-cta{
    padding: 12px 14px;
    gap: 10px;
  }
  .hero__bar-cta-left{
    font-size: 10px;
    letter-spacing: 0.12em;
    padding-right: 0;
  }
  .hero__bar-cta-mid svg{ width: 40px; }

  .block{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 36px 16px;
  }
  .block__index, .block__label{
    grid-column: 1;
    font-size: 11px;
  }

  /* DEFINITION block — fix oversized headline */
  .def{ gap: 28px; }
  .def__core{
    font-size: clamp(28px, 9vw, 44px);
    line-height: 1.05;
  }
  .def__mech li{ font-size: 15px; }
  .def__bounds{ gap: 16px; }

  /* FLOW — single column on phones */
  .flow{
    grid-template-columns: 1fr;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .flow__step{
    border-right: none;
    border-bottom: 1px solid var(--line);
    min-height: auto;
    padding: 18px 16px;
  }

  /* DIMS — single column readable list */
  .dims{ grid-template-columns: 1fr; }
  .dim{ padding: 12px 14px; font-size: 13px; }

  /* NODES vector strip — taller on phone for tap targets */
  .node{ padding: 16px; min-height: auto; }
  .node__vec{ height: 10px; }
  .node:hover .node__vec{ height: 16px; }

  /* MATCH — collapse the score grid */
  .match{ padding: 18px 16px; }
  .match__pair{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
  }
  .match__line{ width: 60%; margin: 0 auto; }
  .score__row{
    grid-template-columns: 90px 1fr 48px;
    gap: 10px;
    font-size: 12px;
  }

  /* ACCESS */
  .access{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .btn--cta{
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  /* RESULT actions stack */
  .result__actions{ flex-direction: column; }
  .result__actions .btn{ width: 100%; justify-content: center; }

  /* PROBE — fix question height */
  .probe{ padding: 18px 16px; }
  .probe__head{ font-size: 10px; letter-spacing: 0.14em; }
  .probe__question{
    font-size: clamp(18px, 5vw, 22px);
    min-height: 50px;
    margin-bottom: 18px;
  }
  .probe__choice{ padding: 14px; }
  .probe__choice-text{ font-size: 13px; }

  /* FOOTER stacks */
  .foot{
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    font-size: 10px;
    text-align: left;
  }

  /* TOOLTIPS — disable axis tip on phones (no hover, just touch) */
  .vec-tip{ display: none; }
}

/* very narrow */
@media (max-width: 380px){
  .hero__title{ font-size: clamp(56px, 26vw, 100px); }
  .bar__left{ font-size: 10px; }
  .bar__right{ font-size: 9px; }
}