/* ARAYA whole-system journey DAG — home page only. Tokens only (see tokens.css); gold hex in
 * inline SVG icons is the documented exception (CONVENTIONS.md §1.1). Desktop: 3-per-row snake
 * (S-flow) grid connected by a gold line. Mobile (<=800px): single vertical flow. */
.an-journey {
  background-color: var(--an-cream-card);
  color: var(--an-ink);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'170'%20height%3D'170'%20viewBox%3D'0%200%20170%20170'%20fill%3D'none'%20stroke%3D'%23C6A15B'%20stroke-opacity%3D'0.10'%20stroke-width%3D'1'%3E%3Cpath%20d%3D%22M85%2073%20Q94%2058%2085%2043%20Q76%2058%2085%2073%20Z%22%2F%3E%3Cpath%20d%3D%22M85%2097%20Q94%20112%2085%20127%20Q76%20112%2085%2097%20Z%22%2F%3E%3Cpath%20d%3D%22M73%2085%20Q58%2094%2043%2085%20Q58%2076%2073%2085%20Z%22%2F%3E%3Cpath%20d%3D%22M97%2085%20Q112%2094%20127%2085%20Q112%2076%2097%2085%20Z%22%2F%3E%3C%2Fsvg%3E");
}
.an-journey .an-wrap { padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px); }
.an-journey .an-kicker { color: var(--an-gold-strong); }
.an-journey .an-sub { color: var(--an-ink-soft); }
.an-page .an-journey :where(h2, h3) { color: inherit; }

/* ── grid: desktop snake / S-flow, 3 nodes per row ── */
.an-journey-grid { margin-top: 48px; }
.an-journey-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.an-journey-row::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 16.6%;
  right: 16.6%;
  height: 2px;
  background: linear-gradient(90deg, var(--an-gold) 0 70%, transparent 0);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  opacity: .7;
  z-index: 0;
}
.an-journey-row.is-reverse { flex-direction: row-reverse; }

.an-journey-turn {
  width: 2px;
  height: 34px;
  background: var(--an-gold);
  background-image: linear-gradient(var(--an-gold) 0 70%, transparent 0);
  background-size: 2px 14px;
  background-repeat: repeat-y;
  opacity: .7;
  position: relative;
}
.an-journey-turn.is-right { margin-left: auto; margin-right: 16.6%; }
.an-journey-turn.is-left { margin-right: auto; margin-left: 16.6%; }
.an-journey-turn::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--an-gold);
}

.an-journey-node {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.an-journey-ico-wrap { position: relative; margin-bottom: 12px; }
.an-journey-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--an-gold);
  background: var(--an-cream-tint); border: 1px solid rgba(198,161,91,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.an-journey-node.is-branch .an-journey-ico { border-style: dashed; }
.an-journey-num {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--an-gold);
  color: var(--an-maroon-ink);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.an-journey-label { font-size: 14.5px; line-height: 1.4; font-weight: 600; }
.an-journey-note { font-size: 12.5px; line-height: 1.4; color: var(--an-ink-muted); margin-top: 4px; }
.an-journey-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px dashed var(--an-gold);
  border-radius: var(--an-radius-pill);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--an-gold);
}

.an-journey-cta { text-align: center; margin-top: 48px; }

/* ── mobile: single vertical flow ── */
@media (max-width: 800px) {
  /* mobile = vertical stepper (order-tracking pattern): one gold rail on the left,
     numbered dots ON the rail, content right — easiest scan on a phone. */
  .an-journey-grid { position: relative; }
  .an-journey-grid::before {
    content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
    background-image: linear-gradient(var(--an-gold) 0 62%, transparent 0);
    background-size: 2px 10px; background-repeat: repeat-y; opacity: .7;
  }
  .an-journey-row, .an-journey-row.is-reverse { flex-direction: column; align-items: stretch; gap: 0; }
  .an-journey-row::before { display: none; }
  .an-journey-turn, .an-journey-turn.is-right, .an-journey-turn.is-left { display: none; }
  .an-journey-node, .an-journey-node.is-branch {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start;
    max-width: none; width: 100%; text-align: left; padding: 12px 0; position: relative;
  }
  .an-journey-node::after { display: none; }
  .an-journey-ico-wrap { grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 1; }
  .an-journey-num { width: 26px; height: 26px; font-size: 13px; box-shadow: 0 0 0 4px var(--an-cream-card); }
  .an-journey-ico { display: none; } /* rail keeps it clean; numbers carry the sequence */
  .an-journey-label { font-size: 15.5px; line-height: 1.5; margin: 2px 0 0; }
  .an-journey-note { margin-top: 2px; }
  .an-journey-tag { justify-self: start; margin-top: 6px; }
  .an-journey-node.is-branch { background: var(--an-cream-tint); border: 1px dashed var(--an-gold); border-radius: 12px; padding: 12px 12px 12px 0; margin: 4px 0; }
  .an-journey-node.is-branch .an-journey-num { box-shadow: 0 0 0 4px var(--an-cream-tint); }
  .an-journey-cta { margin-top: 22px; }
}
}

/* founder 2026-07-13: the whole flow lives in ONE box */
.an-journey { background-color: var(--an-cream); }
.an-journey-grid {
  background: var(--an-cream-card); border: 1px solid rgba(198,161,91,.4);
  border-radius: var(--an-radius-card); padding: clamp(18px, 3.5vw, 40px);
  box-shadow: 0 14px 44px rgba(94,27,38,.07);
}
@media (max-width: 800px) {
  .an-journey-grid { padding: 16px 14px; }
  .an-journey-grid::before { left: 27px; top: 20px; bottom: 20px; }
}

/* emoji icon sizing (travel-fun set) */
.an-journey-emoji { font-size: 26px; line-height: 1; display: block; }
@media (max-width: 800px) { .an-journey-emoji { font-size: 20px; } }
@media (max-width: 800px) { .an-journey-ico { display: flex; } } /* emoji carry the fun on mobile too */

/* step-8 link node (connects to add-on services) */
a.an-journey-node { text-decoration: none; color: inherit; cursor: pointer; }
a.an-journey-node.is-link .an-journey-note { color: var(--an-gold-strong); font-weight: 600; }
a.an-journey-node:hover { transform: translateY(-2px); transition: transform var(--an-transition); }