/* HUGO-1975: progressively enhanced, scroll-led product walkthrough.
   Layout, clock and choices live here; the illustrated Hugo screens are in
   getting-started-screens.css and their choreography in getting-started-motion.css. */
/* Full-bleed clip box: shadows and the glow may leave the column, never the viewport. */
.journey { margin: 110px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%); overflow-x: clip; }
.journey-sprite { position: absolute; }
.journey .ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.journey h2 { font: 700 clamp(32px, 4.8vw, 62px)/1.05 var(--display); letter-spacing: -.045em; margin: 20px 0; }
.journey p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.journey-heading { max-width: 780px; margin: 0 0 40px; }
/* HUGO-2163 — chapter 01 is titled by the hero; its heading stays for screen readers only. */
.journey .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.journey-phase { scroll-margin-top: 100px; margin-bottom: 75px; }
.journey-track { position: relative; }
.journey-pin { display: none; }
.journey-step { padding: 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.journey-mark { display: inline-block; font: 600 15px var(--display); font-variant-numeric: tabular-nums; background: var(--yellow); border-radius: 30px; padding: 8px 14px; }
.journey h3 { font: 650 clamp(26px, 3vw, 38px)/1.12 var(--display); letter-spacing: -.03em; margin: 24px 0 18px; }
.demo-caption { display: block; text-align: center; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-top: 12px; }

/* ---------- choices ---------- */
.journey-choice { border: 0; border-top: 1px solid var(--line); padding: 45px 0 24px; margin: 0; min-width: 0; }
.journey-choice legend { padding: 0 18px 0 0; font: 650 clamp(28px, 3vw, 40px)/1.1 var(--display); letter-spacing: -.03em; }
.journey-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.journey-options label { position: relative; cursor: pointer; display: flex; align-items: center; gap: 16px; background: #fff; border: 2px solid var(--line); border-radius: 22px; padding: 22px 24px; font: 650 19px/1.25 var(--display); letter-spacing: -.01em; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, border-color .25s; }
.journey-options label:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #14110d14; }
.journey-options label:has(input:checked) { border-color: var(--ink); background: var(--yellow); box-shadow: 0 16px 34px #f2c80055; }
.journey-options label:has(input:focus-visible) { outline: 3px solid #20594b; outline-offset: 4px; }
.journey-options input { appearance: none; order: 3; margin: 0 0 0 auto; width: 26px; height: 26px; flex-shrink: 0; border: 2px solid #cfc8b9; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.journey-options input::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid var(--yellow); border-width: 0 0 3px 3px; rotate: -45deg; scale: 0; transition: scale .3s cubic-bezier(.3, 1.6, .5, 1); }
.journey-options input:checked { background: var(--ink); border-color: var(--ink); }
.journey-options input:checked::after { scale: 1; }
.journey-option-art { flex: none; width: 58px; height: 58px; display: grid; place-items: center; font-size: 28px; border-radius: 18px; background: var(--cream); transition: background .25s, rotate .35s cubic-bezier(.3, 1.6, .5, 1); }
.journey-options label:has(input:checked) .journey-option-art { background: #fff; rotate: -6deg; }
.journey-option-t { width: 44px; height: 50px; object-fit: contain; }

/* ---------- branch panels ---------- */
.journey-nudge, .journey-own { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 36px; padding: 36px; border-radius: 28px; background: #fff; margin: 15px 0 60px; }
.journey-nudge h3 { margin-top: 0; }
.journey-nudge .btn { margin-top: 22px; }
.journey-nudge-art { position: relative; width: 120px; height: 120px; display: grid; place-items: center; font-size: 56px; border-radius: 50%; background: var(--cream); }
.journey-nudge-art i { position: absolute; right: -10px; bottom: -4px; width: 58px; height: 58px; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: var(--yellow); border: 4px solid #fff; }
.journey-own { grid-template-columns: 1fr auto; background: var(--yellow); }
.journey-own .eyebrow, .journey-own p { color: var(--ink-2); }
.journey-pair { display: flex; align-items: center; gap: 8px; }
.journey-pair b { width: clamp(34px, 4.4vw, 56px); aspect-ratio: 5 / 6; display: grid; place-items: center; font: 700 clamp(20px, 2.6vw, 34px) var(--display); color: var(--yellow); background: var(--ink); border-radius: 12px; }
.journey-pair span { width: clamp(34px, 4.4vw, 56px); aspect-ratio: 1; margin-left: 6px; display: grid; place-items: center; font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; color: #fff; background: #20594b; border-radius: 50%; }
.journey [hidden] { display: none !important; }
.journey:not(.is-enhanced) .journey-choice, .journey:not(.is-enhanced) [data-enable-cards] { display: none; }

/* ---------- clock ---------- */
.journey-clock { display: flex; align-items: baseline; gap: 14px; }
.journey-time { font: 650 clamp(52px, 5.4vw, 84px)/1 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; transition: color .4s; }
.journey-clock > span:last-child { font-size: 17px; color: var(--muted); }
.journey-progress { height: 8px; border-radius: 8px; background: #e1dbcf; margin: 16px 0 0; overflow: hidden; }
.journey-progress span { display: block; height: 100%; width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--yellow-deep), var(--yellow) 60%, #fff3a8); transform-origin: left; transform: scaleX(0); transition: background .4s; }
.journey-ticks { position: relative; height: 14px; margin: 5px 0 14px; }
.journey-ticks i { position: absolute; top: 0; width: 6px; height: 6px; margin-left: -6px; border-radius: 50%; background: #d3ccbd; transition: background .3s, scale .3s cubic-bezier(.3, 1.6, .5, 1); }
.journey-ticks i.is-past { background: var(--ink); scale: 1.35; }
.journey-phase.is-done .journey-time { color: #20594b; }
.journey-phase.is-done .journey-progress span { background: #20594b; }

/* JS selects the nearest narrative step. Original UI remains readable to AT. */
@media (min-width: 761px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .journey.is-enhanced .journey-track { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; align-items: start; }
  .journey.is-enhanced .journey-pin { display: block; position: sticky; top: 96px; }
  .journey.is-enhanced .journey-stage { width: min(100%, (100vh - 330px) * 1.1); margin: 0 auto; }
  .journey.is-enhanced .journey-steps { position: relative; padding-left: 34px; }
  .journey.is-enhanced .journey-steps::before, .journey.is-enhanced .journey-steps::after { content: ""; position: absolute; left: 0; top: 80px; bottom: 30vh; width: 3px; border-radius: 3px; background: #e1dbcf; }
  .journey.is-enhanced .journey-steps::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--p, 0)); will-change: transform; }
  .journey.is-enhanced .journey-step { display: flex; min-height: 74vh; padding: 80px 0; }
  .journey.is-enhanced .journey-step:last-child { min-height: 90vh; }
}
@media (max-width: 760px) {
  .journey { margin-top: 75px; }
  .journey-step { grid-template-columns: 1fr; gap: 18px; padding: 35px 0; }
  .journey-options { grid-template-columns: 1fr; gap: 12px; }
  .journey-options label { padding: 16px 18px; font-size: 17px; }
  .journey-option-art { width: 48px; height: 48px; font-size: 24px; border-radius: 14px; }
  .journey-nudge, .journey-own { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px; }
  .journey-nudge-art { width: 84px; height: 84px; font-size: 40px; }
  .journey-nudge-art i { width: 44px; height: 44px; font-size: 22px; }
  .journey p { font-size: 16px; }
}
/* 520px, not more: a phone browser's height changes as its toolbar collapses (roughly
   660–750px on a 390px-wide phone), and a threshold inside that range would swap the
   whole layout mid-scroll. */
@media (max-width: 760px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .journey.is-enhanced .journey-pin { display: block; position: sticky; top: 68px; background: var(--cream); padding: 8px 0 10px; z-index: 2; }
  .journey.is-enhanced .journey-stage { width: min(100%, 42vh); margin: 0 auto; }
  .journey.is-enhanced .journey-step { min-height: 62vh; display: flex; align-items: end; padding: 40px 0; }
  .journey-time { font-size: 40px; }
  .journey-progress { height: 6px; margin-top: 6px; }
  .journey-ticks { margin-bottom: 4px; }
  .journey-stage .demo-caption { display: none; }
}
/* The step's own screen stays in the DOM for assistive tech; the pinned stage shows its mirror. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) and (min-height: 720px), (prefers-reduced-motion: no-preference) and (max-width: 760px) and (min-height: 520px) {
  .journey.is-enhanced .journey-step > .journey-screen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .journey.is-enhanced .journey-step { opacity: .32; transition: opacity .45s; }
  .journey.is-enhanced .journey-step.is-active { opacity: 1; }
  .journey.is-enhanced .journey-step .journey-mark { background: #e6dfcf; transition: background .4s, scale .4s cubic-bezier(.3, 1.6, .5, 1); transform-origin: left; }
  .journey.is-enhanced .journey-step.is-active .journey-mark { background: var(--yellow); scale: 1.08; }
  .journey.is-enhanced [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity .7s, translate .8s cubic-bezier(.2, .8, .2, 1); }
  .journey.is-enhanced [data-reveal].is-in { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) { .journey *, .journey *::before, .journey *::after { animation: none !important; transition: none !important; } }