/* ============================================================
   Yoga Class Workflow page — page-unique visuals only.
   Loaded after styles.css / tbos-homepage.css / homepage-redesign.css,
   so it inherits --accent / --brand-2 / --pink / --gold / --green /
   --radius / --font-sans tokens from homepage-redesign.css's :root.
   Scoped under body.wy-page so it affects this page only.
   ============================================================ */

body.wy-page .wy-hero {
  position: relative;
  padding: 72px var(--tbos-page-gutter, 24px) 32px;
  max-width: var(--tbos-content-max, 1120px);
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

body.wy-page .wy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 14px;
}
body.wy-page .wy-eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

body.wy-page .wy-hero h1 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
  max-width: 880px;
  margin: 0 auto 16px;
}

body.wy-page .wy-hero-sub {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
}

body.wy-page .wy-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* ---------- orbit / ecosystem diagram ---------- */
body.wy-page .wy-orbit {
  position: relative;
  width: min(620px, 100%);
  height: min(360px, 62vw);
  margin: 0 auto;
}
body.wy-page .wy-orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
body.wy-page .wy-orbit-line {
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 1.5;
  stroke-opacity: 0.4;
  stroke-dasharray: 4 6;
  animation: wy-dash 16s linear infinite;
}
@keyframes wy-dash { to { stroke-dashoffset: -200; } }

body.wy-page .wy-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--accent), var(--brand-2));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 20px 44px -14px rgba(30, 64, 175, 0.55);
  z-index: 3;
}
body.wy-page .wy-orbit-core img { width: 36px; height: 36px; border-radius: 10px; }

body.wy-page .wy-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 12px 26px -12px rgba(11, 21, 51, 0.22);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  animation: wy-bob 6s ease-in-out infinite;
}
body.wy-page .wy-node i {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--accent-light);
  color: var(--accent);
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 11px;
}
@keyframes wy-bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
  body.wy-page .wy-node, body.wy-page .wy-orbit-line { animation: none; }
}

body.wy-page .wy-node[data-pos="n1"] { left: 10%; top: 12%; animation-delay: 0s; }
body.wy-page .wy-node[data-pos="n2"] { left: 88%; top: 16%; animation-delay: 0.5s; }
body.wy-page .wy-node[data-pos="n3"] { left: 4%; top: 72%; animation-delay: 1s; }
body.wy-page .wy-node[data-pos="n4"] { left: 92%; top: 76%; animation-delay: 1.5s; }
body.wy-page .wy-node[data-pos="n5"] { left: 50%; top: 94%; animation-delay: 0.8s; }

@media (max-width: 640px) {
  body.wy-page .wy-orbit { height: 420px; }
  body.wy-page .wy-node { font-size: 11px; padding: 7px 10px; }
}

/* ---------- step timeline ---------- */
body.wy-page .wy-steps-section {
  padding: 24px var(--tbos-page-gutter, 24px) 56px;
  max-width: 880px;
  margin: 0 auto;
}

body.wy-page .wy-steps {
  position: relative;
  margin-top: 40px;
}
body.wy-page .wy-steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-2), var(--border) 95%);
}
@media (min-width: 720px) {
  body.wy-page .wy-steps::before { left: 50%; }
}

body.wy-page .wy-step {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 0 0 36px 64px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body.wy-page .wy-step.is-in { opacity: 1; transform: translateY(0); }

body.wy-page .wy-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-2);
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(30, 64, 175, 0.4);
  flex-shrink: 0;
}

body.wy-page .wy-step-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 2px 10px -4px rgba(11, 21, 51, 0.08);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

body.wy-page .wy-step-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.wy-page .wy-step-icon svg { width: 24px; height: 24px; stroke: var(--accent); }

body.wy-page .wy-step h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
body.wy-page .wy-step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

@media (min-width: 720px) {
  body.wy-page .wy-step { padding-left: 0; justify-content: center; }
  body.wy-page .wy-step-num { left: 50%; transform: translateX(-50%); top: 0; }
  body.wy-page .wy-step-card { width: calc(50% - 46px); }
  body.wy-page .wy-step:nth-child(odd) { flex-direction: row; }
  body.wy-page .wy-step:nth-child(odd) .wy-step-card { margin-right: auto; }
  body.wy-page .wy-step:nth-child(even) { flex-direction: row-reverse; }
  body.wy-page .wy-step:nth-child(even) .wy-step-card { margin-left: auto; }
}

/* ---------- mode / venue chips used inside step copy ---------- */
body.wy-page .wy-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
body.wy-page .wy-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
}
body.wy-page .wy-chip.is-online { background: var(--accent-light); color: var(--accent); }
body.wy-page .wy-chip.is-offline { background: var(--gold-light); color: #92400e; }

/* ---------- CTA band ---------- */
body.wy-page .wy-cta {
  margin: 0 var(--tbos-page-gutter, 24px) 64px;
  max-width: var(--tbos-content-max, 1120px);
  margin-inline: auto;
  background: linear-gradient(135deg, #1e40af, #3b6cf6 55%, #7b5cff);
  border-radius: 36px;
  padding: 48px 32px;
  text-align: center;
  color: #fff;
}
body.wy-page .wy-cta h2 { color: #fff; font-size: clamp(22px, 4vw, 30px); margin: 0 0 10px; }
body.wy-page .wy-cta p { color: #dbe5ff; margin: 0 0 22px; }
body.wy-page .wy-cta-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
body.wy-page .wy-cta .btn-primary { background: #fff; color: var(--accent); }
body.wy-page .wy-cta-secondary {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  font-size: 14px;
  align-self: center;
}