.directions-index {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-block: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-page .directions-index a:any-link {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 7px 10px;
  color: #4b4943;
  font: 12px/1.35 var(--mono);
  text-decoration: none;
}
.site-page .directions-index a:is(:hover,:focus-visible,[aria-current]) {
  color: #2449bf;
  border-color: #ccd6f5;
  background: #eef2fc;
}
.direction-chapter {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(24px, 5vw, 72px);
  padding-block: clamp(32px, 7vh, 72px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 105px;
}
.direction-copy h2 {
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1;
}
.direction-copy p { margin: 12px 0 0; color: #5d5951; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; }
.direction-copy > .site-links { margin-top: 18px; }
.direction-visual {
  margin: 0;
  min-width: 0;
  background: #f3efe5;
  border: 1px solid #e2d9c7;
  border-radius: 10px;
  overflow: hidden;
}
.direction-canvas {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle, #d8d0bf 1px, transparent 1px) 0 0 / 16px 16px;
}
.direction-canvas img {
  display: block;
  width: 82%;
  max-height: 85%;
  object-fit: contain;
  border-radius: 7px;
  transform: translateY(calc((1 - var(--scene-progress, 1)) * 28px)) scale(calc(.92 + var(--scene-progress, 1) * .08));
}
#mobile .direction-canvas img { width: auto; height: 78%; max-width: 75%; }
.direction-visual figcaption {
  border-top: 1px solid #e2d9c7;
  padding: 11px 16px;
  font: 11px/1.45 var(--mono);
  color: #5d5951;
}
@media (min-width: 801px) {
  .direction-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .direction-copy > .site-links {
    margin-top: auto;
    padding-top: 18px;
  }
  .direction-visual { position: sticky; top: 78px; }
  .direction-canvas { max-height: 62vh; }
}
@media (max-width: 800px) {
  .directions-index { top: 64px; }
  .direction-chapter { grid-template-columns: 1fr; scroll-margin-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .direction-canvas img { transform: none; }
}

.direction-canvas { position: relative; }
.direction-canvas img, #mobile .direction-canvas img { width: 100%; height: 100%; max-width: none; max-height: none; transform: none; border-radius: 0; }
.direction-visual { opacity: calc(.78 + var(--scene-progress, 1) * .45); }
.tip-scene { background:radial-gradient(ellipse at 55% 70%,#675032,#211910 75%); }
.mobile-scene { background-color:#ebe7dc; }
.mobile-scene .alt-phone { top: 100%; transform: translateY(-80%); }
.alt-phone { height:86%; aspect-ratio:750/1688; position:absolute; overflow:hidden; border:1px solid #cbc6b9; border-radius:clamp(7px,1.35vw,16px); box-shadow:0 10px 28px #413d3226; background:#fafafa; }
#mobile .alt-phone img { object-fit:contain; }
.alt-call { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4%; color:#20211e; background:linear-gradient(#f6f7f0fa,#e7eaddf7); opacity:0; }
.call-avatar { width:34%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#dadbc9; color:#5a624c; font-size:clamp(13px,2vw,30px); }
.call-person { font-size:clamp(13px,1.6vw,23px); font-weight:600; }
.alt-call small { font:clamp(7px,.85vw,11px) var(--mono); }
.call-actions { display:flex; gap:10px; margin-top:9%; }
.call-actions span { display:grid; place-items:center; width:clamp(17px,2.65vw,34px); aspect-ratio:1; border-radius:50%; background:#ac3b3b; color:white; font-size:20px; line-height:1; }
.call-actions span:last-child { background:#237149; }
.turbine-scene { background:radial-gradient(ellipse at 58% 52%,#334963,#142031 75%); }
.direction-turbine { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.direction-turbine canvas { display:block; }
.direction-turbine [hidden] { display:none; }
.agent-scene svg { width:96%; max-height:92%; }
.agent-wires,.agent-pulses { stroke:#9eabc6; fill:none; stroke-width:2; }
.agent-pulses { stroke:#315ee8;stroke-width:3;stroke-linecap:round;stroke-dasharray:12 120;stroke-dashoffset:12;opacity:0; }
.agent-node rect { fill:#faf8f0;stroke:#c8c2b5;stroke-width:1.5; }
.agent-node text { text-anchor:middle;dominant-baseline:central;fill:#363b43;font:16px var(--mono); }
.agent-core rect { fill:#eaf0fd;stroke:#9faed7; }
#analytics .direction-visual { background: #171b24; border-color: #303746; opacity: 1; }
#analytics figcaption { border-color: #303746; color: #b9c3d7; }
.analytics-scene {
  background:
    radial-gradient(circle, #b9cfff19 1px, transparent 1.2px) center / 16px 16px,
    radial-gradient(ellipse at 47% 48%, #242e43, #141821 76%);
}
.direction-chapter[data-in-view] .alt-call { animation:alt-call 7s ease-in-out infinite; }
.direction-chapter[data-in-view] .call-avatar { animation:call-ring 1.25s 1s ease-out infinite; }
.direction-chapter[data-in-view] .agent-pulses path { animation:agent-travel 4.6s linear infinite; }
.direction-chapter[data-in-view] .agent-pulses { opacity:1; }
.direction-chapter[data-in-view] .agent-pulses path:nth-child(3) { animation-name:agent-deliver; }
.direction-chapter[data-in-view] .agent-core rect { animation:agent-check 4.6s linear infinite; }
.direction-chapter[data-in-view] .agent-result rect { animation:agent-finish 4.6s linear infinite; }
@keyframes alt-call { 0%,18%,88%,100%{opacity:0} 27%,77%{opacity:1} }
@keyframes call-ring { from{box-shadow:0 0 0 0 #526e5540} to{box-shadow:0 0 0 12px #526e5500} }
@keyframes agent-travel { 0%,8%{stroke-dashoffset:12;opacity:0} 10%{opacity:1} 37%{stroke-dashoffset:-100;opacity:1} 39%,100%{stroke-dashoffset:-115;opacity:0} }
@keyframes agent-deliver { 0%,51%{stroke-dashoffset:12;opacity:0} 54%{opacity:1} 79%{stroke-dashoffset:-100;opacity:1} 82%,100%{stroke-dashoffset:-115;opacity:0} }
@keyframes agent-check { 0%,30%,64%,100%{fill:#eaf0fd} 40%,53%{fill:#c5d4ff;stroke:#315ee8} }
@keyframes agent-finish { 0%,73%,100%{fill:#faf8f0} 83%,94%{fill:#e2efde;stroke:#6a9365} }
@media(prefers-reduced-motion:reduce) {
  .direction-visual {opacity:1}
  .directions-overview * {animation:none!important}
}

.tip-scene {
  container-type: size;
  grid-template-rows: 1fr auto;
  gap: 0;
  box-sizing: border-box;
  padding-block: clamp(8px, 1.5vw, 22px);
}
@media(max-width:480px) {
  .site-page .directions-index a:any-link {font-size:10px;padding-inline:5px;}
  .directions-index {gap:3px;}
  .mobile-scene {aspect-ratio: 4 / 3;}
  .alt-phone {height:90%;}
}


.adepta-flow {
  --node-height: clamp(36px, 4vw, 48px);
  --wire-gap: clamp(10px, 2.4vw, 33px);
  --wire-color: #647caa;
  position: relative;
  width: 92%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.18fr) minmax(0, .85fr) minmax(0, .8fr);
  align-items: center;
  gap: var(--wire-gap);
  text-align: center;
}
.adepta-nodes { position: relative; display: grid; gap: 10px; }
.adepta-nodes span, .adepta-core, .adepta-agents {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-content: center;
  height: var(--node-height);
  padding: 3px;
  border: 1px solid #394353;
  border-radius: 6px;
  background: #1c2330;
  color: #c6cfdf;
  font: clamp(8px, 1vw, 13px)/1.2 var(--mono);
}
#analytics .adepta-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
#analytics .adepta-logo img {
  width: min(var(--logo-width, 54px), 88%);
  height: 72%;
  object-fit: contain;
}
#analytics .adepta-logo:first-child { --logo-width: 48px; }
#analytics .adepta-logo--excel { --logo-width: 38px; }
@media (max-width: 480px) {
  .analytics-scene { aspect-ratio: 4 / 3; }
  .adepta-flow { --node-height: 29px; }
  .adepta-nodes { gap: 6px; }
}
.adepta-core {
  gap: 5px;
  height: clamp(57px, 8vw, 99px);
  border-color: #768db7;
  background: linear-gradient(150deg, #3b5077, #222c42 80%);
  color: #f3f6fc;
  box-shadow: inset 0 1px #c7dbff29, 0 7px 24px #0c121d80;
}
.adepta-core strong { font-size: clamp(9px, 1.2vw, 16px); }
.adepta-core small { color: #c0cce3; }
.adepta-agents {
  border-color: #637899;
  background: #29364d;
  color: #e3ecff;
}
.adepta-wiring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.adepta-wire { fill: none; stroke: var(--wire-color); stroke-width: 1; }
.adepta-pulse {
  fill: none;
  stroke: #afc9ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 16 116;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  #analytics[data-in-view] .adepta-pulse {
    animation: adepta-travel 7s linear infinite;
  }
  #analytics[data-in-view] .adepta-pulse--core { animation-name: adepta-travel-core; }
  #analytics[data-in-view] .adepta-pulse--output { animation-name: adepta-travel-output; }
  #analytics[data-in-view] .adepta-core { animation: adepta-core-active 7s ease-in-out infinite; }
  #analytics[data-in-view] .adepta-agents { animation: adepta-agents-active 7s ease-in-out infinite; }
  #analytics[data-in-view] .adepta-outputs { animation: adepta-reveal 7s ease-in-out infinite; }
}
@keyframes adepta-travel {
  0%, 4% { stroke-dashoffset: 16; opacity: 0; }
  9% { opacity: .8; }
  30% { stroke-dashoffset: -100; opacity: .8; }
  32%, 100% { stroke-dashoffset: -116; opacity: 0; }
}
@keyframes adepta-travel-core {
  0%, 34% { stroke-dashoffset: 16; opacity: 0; }
  37% { opacity: .75; }
  46% { stroke-dashoffset: -100; opacity: .75; }
  48%, 100% { stroke-dashoffset: -116; opacity: 0; }
}
@keyframes adepta-travel-output {
  0%, 51% { stroke-dashoffset: 16; opacity: 0; }
  55% { opacity: .75; }
  68% { stroke-dashoffset: -100; opacity: .75; }
  70%, 100% { stroke-dashoffset: -116; opacity: 0; }
}
@keyframes adepta-core-active {
  0%, 22%, 55%, 100% { box-shadow: inset 0 1px #c7dbff29, 0 7px 24px #0c121d80; }
  36% { box-shadow: inset 0 1px #c7dbff55, 0 0 22px #7396df55; }
}
@keyframes adepta-agents-active {
  0%, 42%, 81%, 100% { background: #29364d; box-shadow: 0 0 0 #7396df00; }
  55%, 63% { background: #3a5075; box-shadow: 0 0 18px #7396df45; }
}
@keyframes adepta-reveal {
  0%, 61%, 100% { opacity: .26; }
  73%, 91% { opacity: 1; }
}

.tip-level-disc {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  width: min(45%, 55cqh);
  aspect-ratio: 1;
  border: 1px solid #d4ac686e;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 20%, #87603380, #322516 60%, #1e180f 95%);
  box-shadow: 0 0 0 9px #cda36508, 0 0 0 10px #cda36532, 0 15px 45px #0004, inset 0 0 35px #cda36518;
  color: #f0d8a2;
}
.tip-level-disc::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #d9b77420;
  border-radius: 50%;
}
.tip-level-disc > span, .tip-level-disc > small {
  color: #cfb37f;
  font: clamp(6px, 3cqh, 10px)/1.2 var(--mono);
  letter-spacing: .2em;
}
.tip-level-disc > strong {
  display: grid;
  font: 500 clamp(32px, 25cqh, 104px)/1.12 Georgia, serif;
  letter-spacing: -.045em;
}
.tip-level-disc > strong span { grid-area: 1 / 1; }
.tip-level-disc > strong span:first-child { opacity: 0; }

.tip-progress {
  width: min(66%, 340px);
  color: #dbc49b;
  font: clamp(8px, 3.25cqh, 12px)/1.25 var(--mono);
}
.tip-progress-values, .tip-progress-note { display: grid; }
.tip-progress-cycle, .tip-progress-note > span { grid-area: 1 / 1; }
.tip-progress-cycle { display: flex; justify-content: space-between; }
.tip-progress-track {
  height: 3px;
  margin-block: 8px;
  border-radius: 3px;
  background: #b49a603b;
}
.tip-progress-track > span {
  position: relative;
  display: block;
  width: 13.333%;
  height: 100%;
  border-radius: inherit;
  background: #debf7e;
}
.tip-progress-track > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: #f6dba5;
  box-shadow: 0 0 9px #efcf8480;
}
.tip-progress-note { text-align: center; }
.tip-progress-start, .tip-progress-gain { opacity: 0; }
.tip-progress-gain { color: #f6dba5; }

.direction-chapter[data-in-view] .tip-scene {
  --tip-duration: 4.6s;
  --tip-easing: cubic-bezier(.23, .7, .22, 1);
}
.direction-chapter[data-in-view] .tip-level-disc strong span:first-child { animation: tip-level-out var(--tip-duration) var(--tip-easing) both; }
.direction-chapter[data-in-view] .tip-level-disc strong span:last-child { animation: tip-level-in var(--tip-duration) var(--tip-easing) both; }
.direction-chapter[data-in-view] .tip-progress-track > span { animation: tip-progress-fill var(--tip-duration) var(--tip-easing) both; }
.direction-chapter[data-in-view] .tip-progress-start { animation: tip-values-out var(--tip-duration) ease both; }
.direction-chapter[data-in-view] .tip-progress-next,
.direction-chapter[data-in-view] .tip-progress-result { animation: tip-values-in var(--tip-duration) ease both; }
.direction-chapter[data-in-view] .tip-progress-gain { animation: tip-gain-in var(--tip-duration) ease both; }

@keyframes tip-progress-fill {
  0%, 18% { width: 63.333%; }
  47%, 73% { width: 100%; opacity: 1; }
  78% { width: 100%; opacity: 0; }
  79% { width: 0; opacity: 0; }
  94%, 100% { width: 13.333%; opacity: 1; }
}
@keyframes tip-level-out {
  0%, 49% { opacity: 1; transform: translateY(0); }
  64%, 100% { opacity: 0; transform: translateY(-.18em); }
}
@keyframes tip-level-in {
  0%, 51% { opacity: 0; transform: translateY(.18em); }
  68%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes tip-values-out { 0%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes tip-values-in { 0%, 79% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes tip-gain-in {
  0%, 6% { opacity: 0; transform: translateY(4px); }
  17%, 72% { opacity: 1; transform: translateY(0); }
  78%, 100% { opacity: 0; transform: translateY(-3px); }
}

.tip-level-disc { isolation: isolate; }
.tip-celebration, .tip-celebration i, .tip-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tip-celebration { z-index: -1; }
.tip-halo, .tip-wave, .tip-sparks i { opacity: 0; }
.tip-glint {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
.tip-glint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, #ffe6ae35 49%, #fff0c542 50%, transparent 64%);
  opacity: 0;
}
.tip-halo {
  border-radius: 50%;
  background: radial-gradient(circle, transparent 49%, #efc77238 65%, transparent 74%);
  filter: blur(9px);
  scale: 1.25;
}
.tip-wave { border: 1px solid #f2ce82; border-radius: 50%; }
.tip-wave-echo { border-color: #e9cd9359; }
.tip-sparks i { rotate: var(--angle); }
.tip-sparks i::after {
  content: "";
  position: absolute;
  top: -3%;
  left: 50%;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe0a2;
  box-shadow: 0 0 6px #f6c777aa;
}
.tip-sparks i:nth-child(even)::after { width: 2px; top: -7%; }
.direction-chapter[data-in-view] .tip-halo { animation: tip-halo var(--tip-duration) ease-in-out both; }
.direction-chapter[data-in-view] .tip-wave { animation: tip-wave var(--tip-duration) cubic-bezier(.18,.55,.27,1) both; }
.direction-chapter[data-in-view] .tip-wave-echo { animation-delay: .14s; }
.direction-chapter[data-in-view] .tip-sparks i { animation: tip-sparks var(--tip-duration) ease-out both; }
.direction-chapter[data-in-view] .tip-sparks i:nth-child(even) { animation-delay: .09s; }
.direction-chapter[data-in-view] .tip-glint::before { animation: tip-glint var(--tip-duration) ease-in-out both; }
@keyframes tip-halo {
  0%, 38% { opacity: 0; scale: 1.05; }
  62% { opacity: .76; scale: 1.36; }
  100% { opacity: 0; scale: 1.55; }
}
@keyframes tip-wave {
  0%, 48% { opacity: 0; scale: .94; }
  57% { opacity: .55; scale: 1.04; }
  92%, 100% { opacity: 0; scale: 1.58; }
}
@keyframes tip-sparks {
  0%, 52% { opacity: 0; scale: .9; }
  61% { opacity: .85; scale: 1.16; }
  94%, 100% { opacity: 0; scale: 1.58; }
}
@keyframes tip-glint {
  0%, 47% { opacity: 0; transform: translateX(-75%); }
  62% { opacity: .68; }
  82%, 100% { opacity: 0; transform: translateX(75%); }
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-scene .alt-phone {
    transform: translateY(calc(-80% * var(--phone-lift, 1)));
    transition: transform 140ms ease-out;
  }
}