/* Section 2: How it works. Owner: journeys builder.
   Own grid: a pinned stage. Heading and toggle on top, a horizontal track below that
   slides right to left as the page scrolls. Light page, tokens only, no shadows. */
:root {
  /* The people: one constant. Drawn, made-up people only (img/drawn); no photos. */
  --j-person-sam: url('../img/drawn/sam.svg');
  --j-person-tam: url('../img/drawn/tam.svg');
  --j-person-ravi: url('../img/drawn/ravi-call.svg');
  --j-person-host: url('../img/drawn/host.svg');
  --j-card-w: 560px;
  --j-gap: 24px;
  --j-pad: clamp(24px, 6vw, 96px);
}
.journeys { position: relative; }
.j-runway { position: relative; }
.j-stage { padding-block: var(--sec-pad-y); }

/* ---- head ---- */
.j-head { display: grid; justify-items: center; text-align: center; gap: var(--sp-32); padding-inline: var(--j-pad); }
.j-title.sec-head { max-width: 24ch; }
.j-head__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }

/* ---- segmented control (DS segmented, selected thumb = smoked glass) ---- */
.j-seg { position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, max-content); padding: 5px; border-radius: 15px; background: var(--tile-2); border: 1px solid var(--line); }
.j-seg__thumb.cta-glass { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--seg-w, 0px); min-height: 0; padding: 0; gap: 0; border-radius: 10px; transform: translateX(var(--seg-x, 0px)); transition: transform var(--dur) var(--ease-snap), width var(--dur) var(--ease-snap); pointer-events: none; }
.j-seg__item { position: relative; z-index: 1; min-height: 40px; padding: 10px 20px; border: 0; border-radius: 10px; background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--ink); cursor: pointer; transition: color var(--dur-fast) var(--ease-out) .08s; }
.j-seg__item[aria-selected='true'] { color: var(--white); cursor: default; }
.j-seg__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .j-seg__item[aria-selected='false']:hover { background: var(--tile); } }
.j-seg:not([data-ready]) .j-seg__item[aria-selected='true'] { background: var(--ink); }

/* ---- progress ---- */
.j-progress { display: flex; align-items: center; gap: 16px; width: 160px; }
.j-count { font-family: var(--font-body); font-weight: 600; font-size: var(--w-meta); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.j-bar { position: relative; flex: 1; height: 1px; background: var(--line-strong); }
.j-bar__fill { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--j-p, .3333)); transition: transform var(--dur) var(--ease-out); }

/* ---- window + track ---- */
.j-window { margin-top: var(--gap-head); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--j-pad); scroll-padding-inline: var(--j-pad); }
.j-window::-webkit-scrollbar { display: none; }
.j-panel[hidden] { display: none; }
.j-panel { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.j-panel.is-leaving { opacity: 0; transform: translateY(8px); }
.j-track { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--j-gap); width: max-content; will-change: transform; }
.j-card { flex: none; width: var(--j-card-w); max-width: calc(100vw - 2 * var(--j-pad)); display: grid; grid-template-rows: auto 1fr; gap: var(--sp-32); scroll-snap-align: start; border-top: 1px solid var(--line-strong); padding-top: var(--sp-24); transition: opacity var(--dur-slow) var(--ease-out); }
.j-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.j-card__text { min-height: clamp(132px, 12vw, 170px); }
.j-num { display: block; margin-bottom: var(--sp-16); font-family: var(--font-body); font-weight: 600; font-size: var(--w-meta); line-height: 1.4; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.j-card h3 { margin: 0 0 var(--gap-title); font-family: var(--font-body); font-weight: var(--fw-title); font-size: var(--w-title); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.j-card p { margin: 0; font-family: var(--font-body); font-size: var(--w-lead); line-height: 1.55; color: var(--muted); max-width: 44ch; }

/* pinned mode (set by JS on wide, tall screens without reduced motion) */
.journeys.is-pinned .j-stage { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; flex-direction: column; padding-block: calc(var(--l-topbar-h) + clamp(32px, 5svh, 64px)) var(--sp-32); overflow: hidden; }
.journeys.is-pinned .j-window { padding-block: var(--sp-8); overflow: hidden; scroll-snap-type: none; flex: 1; min-height: 0; margin-top: clamp(32px, 5svh, 56px); }
.journeys.is-pinned .j-card > * { opacity: .4; transition: opacity var(--dur-slow) var(--ease-out); }
.journeys.is-pinned .j-card.is-active > * { opacity: 1; }

/* reduced motion: a plain stacked list, everything in its finished state */
.journeys.is-stacked .j-window { overflow: visible; padding-inline: var(--j-pad); }
.journeys.is-stacked .j-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); width: auto; }
.journeys.is-stacked .j-card { width: auto; max-width: none; }
.journeys.is-stacked .j-progress { display: none; }

/* phones and narrow: swipeable snap row */
@media (max-width: 899px) {
  :root { --j-card-w: min(86vw, 420px); --j-gap: 16px; }
  .j-stage { padding-block: var(--sp-96) var(--sp-64); }
  .j-window { margin-top: var(--sp-48); }
}
@media (max-width: 480px) { .j-seg { width: 100%; grid-auto-columns: 1fr; } .j-seg__item { padding-inline: 8px; } .j-progress { max-width: none; } }

/* ============ mockups (generic, DS look) ============ */
.j-vis { position: relative; min-height: clamp(300px, calc(100vh - 560px), 400px); border: 1px solid var(--line); border-radius: 12px; background: var(--tile-2); overflow: hidden; display: grid; place-items: center; padding: 20px; transition: opacity var(--dur) var(--ease-out); }
.jm { position: relative; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; padding: 16px; font-family: var(--font-body); font-size: 13px; color: var(--ink); }
.jm .micro { margin: 0 0 8px; font-size: 11px; line-height: 14px; }
.jm .px-icon { flex: none; width: 16px; height: 16px; }
.jm-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--signal); flex: none; }
.jm-mark svg { width: 11px; height: 11px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jm-mark--lg { width: 36px; height: 36px; } .jm-mark--lg svg { width: 20px; height: 20px; }
.jm :is(p) { margin: 0; max-width: none; color: inherit; font-size: inherit; line-height: 1.4; }

/* host 1 */
.jm-ext { width: min(300px, 100%); }
.jm-ext__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 14px; }
.jm-code { display: flex; align-items: center; gap: 8px; }
.jm-code__grp { display: flex; gap: 4px; }
.jm-code__grp i { display: grid; place-items: center; width: 28px; height: 38px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--tile-2); font-style: normal; font-family: var(--font-display); font-size: 17px; color: transparent; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.jm-code__dash { width: 8px; height: 1px; background: var(--ink); }
.jm-ok { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; }
.jm-ok .px-icon { color: var(--signal); }
[data-visual="host1"].t1 .jm-code i { color: var(--ink); border-color: var(--ink); }
[data-visual="host1"] .jm-code i:nth-child(2) { transition-delay: .12s } [data-visual="host1"] .jm-code i:nth-child(3) { transition-delay: .24s } [data-visual="host1"] .jm-code i:nth-child(4) { transition-delay: .36s }
[data-visual="host1"] .jm-code__grp:last-child i:nth-child(1) { transition-delay: .5s } [data-visual="host1"] .jm-code__grp:last-child i:nth-child(2) { transition-delay: .62s } [data-visual="host1"] .jm-code__grp:last-child i:nth-child(3) { transition-delay: .74s } [data-visual="host1"] .jm-code__grp:last-child i:nth-child(4) { transition-delay: .86s }

/* host 2 */
.jm-cal { width: min(340px, 100%); display: grid; gap: 12px; }
.jm-cal__title { font-family: var(--font-display); font-size: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.jm-cal__row { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.jm-cal__row--on { color: var(--ink); }
.jm-switch { flex: none; position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line-strong); transition: background var(--dur) var(--ease-out); }
.jm-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform var(--dur) var(--ease-snap); }
[data-visual="host2"].t1 .jm-switch { background: var(--ink); } [data-visual="host2"].t1 .jm-switch i { transform: translateX(14px); }
.jm-toast { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 10px; align-items: flex-start; width: min(300px, calc(100% - 32px)); padding: 12px; opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.jm-toast__t { font-weight: 600; font-size: 12px; } .jm-toast__d { font-size: 11px; color: var(--muted); margin-top: 2px !important; }
[data-visual="host2"].t2 .jm-toast { opacity: 1; transform: none; }
[data-visual="host2"] .jm-cal { align-self: start; }

/* host 3 */
.j-vis:has(.jm-call:not(.jm-call--one)) { grid-template-columns: 1fr 190px; gap: 12px; }
.jm-call { width: 100%; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; background: var(--ink); border-color: var(--ink); }
.jm-call--one { grid-template-columns: 1fr; width: min(300px, 100%); }
.jm-tile { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--ink-2); color: var(--white); overflow: hidden; }
.jm-tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.jm-tile b { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--line-strong); }
.jm-tile--big { aspect-ratio: 16 / 9; }
.jm-name { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 600; }
.jm-name .px-icon { width: 14px; height: 14px; color: var(--signal); opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease-out), transform .3s var(--ease-snap); }
[data-visual="host3"].t1 .jm-tile:nth-child(1) .px-icon, [data-visual="host3"].t1 .jm-tile:nth-child(2) .px-icon { opacity: 1; transform: none; }
[data-visual="host3"].t1 .jm-tile:nth-child(2) .px-icon { transition-delay: .2s; }
.jm-list { padding: 12px; font-size: 12px; align-self: stretch; display: grid; align-content: start; gap: 4px; }
.jm-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.jm-st { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; }
.jm-st .px-icon { width: 14px; height: 14px; }
.jm-st--ok { color: var(--signal); } .jm-st--c { color: var(--caution-ink); }

/* guest 1 */
.jm-mail { width: min(300px, 100%); display: grid; gap: 8px; justify-items: start; transition: transform .5s var(--ease-out), opacity .4s var(--ease-out); }
.jm-mail__s { font-family: var(--font-display); font-size: 16px; } .jm-mail__b { color: var(--muted); font-size: 12px; }
.jm-btn.cta-glass { min-height: 40px; padding: 0 18px; border-radius: 10px; font-size: 13px; margin-top: 8px; cursor: default; transition: transform .16s ease-out; }
.jm-app { position: absolute; width: min(300px, 80%); padding: 0; overflow: hidden; opacity: 0; transform: scale(.92) translateY(12px); transition: opacity .4s var(--ease-out), transform .45s var(--ease-snap); }
.jm-app__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--tile-2); }
.jm-app__bar i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); }
.jm-app__t { margin-left: 8px; font-size: 11px; color: var(--muted); font-weight: 600; }
.jm-app__body { display: grid; justify-items: center; gap: 12px; padding: 32px 16px; text-align: center; }
[data-visual="guest1"].t1 .jm-btn { transform: scale(.96); }
[data-visual="guest1"].t2 .jm-mail { transform: translateX(-24px) scale(.94); opacity: .35; }
[data-visual="guest1"].t2 .jm-app { opacity: 1; transform: none; }

/* guest 2 */
.jm-checks { position: relative; width: min(300px, 100%); height: 262px; padding: 12px; overflow: hidden; }
.jm-checks__top { position: absolute; left: 12px; top: 10px; margin: 0 !important; }
.jm-pill { --slot: 34px; position: absolute; left: 12px; right: 12px; top: 30px; display: grid; height: 30px; align-items: center; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--paper); font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(210px); transition: transform .7s var(--ease-out), opacity .35s var(--ease-out), border-color .3s var(--ease-out); }
.jm-pill > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px; transition: opacity .25s var(--ease-out); }
.jm-pill__d { opacity: 0; } .jm-pill__d .px-icon { color: var(--signal); }
.jm-pill__c { color: var(--muted); }
.jm-pill.rise { opacity: 1; transform: translateY(150px); }
.jm-pill.done { opacity: 1; transform: translateY(calc(var(--to) * var(--slot))); border-color: var(--line); }
.jm-pill.done .jm-pill__c { opacity: 0; } .jm-pill.done .jm-pill__d { opacity: 1; }
.jm-pill.rise:not(.done) .px-icon { animation: j-spin 1s steps(8) infinite; }
@keyframes j-spin { to { transform: rotate(360deg); } }

/* guest 3 */
.jm-live { width: min(300px, 100%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 12px; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.jm-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.jm-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--signal); opacity: 0; }
[data-visual="guest3"] { display: grid; place-items: center; align-content: center; gap: 12px; }
[data-visual="guest3"].t2 .jm-live { opacity: 1; transform: none; }
[data-visual="guest3"].t2 .jm-dot::after { animation: j-ping 2.4s var(--ease-out) infinite; }
@keyframes j-ping { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
.jm-scan { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 92%, var(--paper) 100%); opacity: 0; transform: translateY(-100%); }
[data-visual="guest3"].t2 .jm-scan { animation: j-scan 3.2s var(--ease-in-out) infinite; }
@keyframes j-scan { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: .6; } 90% { opacity: .6; } 100% { transform: translateY(0); opacity: 0; } }
[data-visual="guest3"] .jm-name .px-icon { opacity: 0; }
[data-visual="guest3"].t1 .jm-name .px-icon { opacity: 1; transform: none; }

.j-vis.is-reset { opacity: 0; }

/* finished state: reduced motion, or JS not run yet */
.journeys.is-stacked .j-vis *, .journeys .j-vis:not(.is-anim) .j-vis *, .journeys.is-stacked .j-vis, .journeys .j-vis:not(.is-anim) .j-vis { transition: none !important; animation: none !important; }
.journeys.is-stacked .jm-ok, .journeys .j-vis:not(.is-anim) .jm-ok, .journeys.is-stacked .jm-toast, .journeys .j-vis:not(.is-anim) .jm-toast, .journeys.is-stacked .jm-row, .journeys .j-vis:not(.is-anim) .jm-row, .journeys.is-stacked .jm-live, .journeys .j-vis:not(.is-anim) .jm-live { opacity: 1; transform: none; }
.journeys.is-stacked .jm-code i, .journeys .j-vis:not(.is-anim) .jm-code i { color: var(--ink); border-color: var(--ink); }
.journeys.is-stacked .jm-switch, .journeys .j-vis:not(.is-anim) .jm-switch { background: var(--ink); }
.journeys.is-stacked .jm-switch i, .journeys .j-vis:not(.is-anim) .jm-switch i { transform: translateX(14px); }
.journeys.is-stacked .jm-name .px-icon, .journeys .j-vis:not(.is-anim) .jm-name .px-icon { opacity: 1; transform: none; }
.journeys.is-stacked .jm-mail, .journeys .j-vis:not(.is-anim) .jm-mail { opacity: .35; }
.journeys.is-stacked .jm-app, .journeys .j-vis:not(.is-anim) .jm-app { opacity: 1; transform: none; }
.journeys.is-stacked .jm-pill, .journeys .j-vis:not(.is-anim) .jm-pill { opacity: 1; transform: translateY(calc(var(--to) * var(--slot))); border-color: var(--line); }
.journeys.is-stacked .jm-pill__c, .journeys .j-vis:not(.is-anim) .jm-pill__c { opacity: 0; }
.journeys.is-stacked .jm-pill__d, .journeys .j-vis:not(.is-anim) .jm-pill__d { opacity: 1; }
.journeys.is-stacked .jm-scan, .journeys .j-vis:not(.is-anim) .jm-scan { display: none; }

@media (max-width: 480px) { .j-vis:has(.jm-call:not(.jm-call--one)) { grid-template-columns: 1fr; } .j-vis { padding: 14px; } }

.jm-list__all { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px !important; color: var(--muted); }
.journeys.is-stacked .jm-list__all { opacity: 1; }
@media (max-width: 899px) { .j-card__text { min-height: 0; } }

/* people */
.jm-tile b, .jm-av { background-size: cover; background-position: center; }
.jm-tile b { position: absolute; inset: 0; background-color: var(--ink-2); font-size: 0; }
.jm-tile--sam b, .jm-av--sam { background-image: var(--j-person-sam); }
.jm-tile--tam b, .jm-av--tam { background-image: var(--j-person-tam); }
.jm-tile--ravi b { background-image: var(--j-person-ravi); }
.jm-tile--ravi b { background-position: center 30%; }
.jm-tile--ravi::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--caution); border-radius: 8px; }
.jm-av { flex: none; width: 20px; height: 20px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--paper); background-color: var(--tile); }
.jm-cal__row .px-icon + .jm-av { margin-left: 0; }
.jm-name { z-index: 1; }
.jm-tile b, .jm-av { filter: grayscale(1); }

/* in-Meet chips: icon only, 24px. Host is never badged. */
.jm-chip { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--paper); color: var(--signal); opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease-out), transform .3s var(--ease-snap); }
.jm-chip .px-icon { width: 14px; height: 14px; }
.jm-chip--c { color: var(--caution); }
.jm-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 2px; }
.jm-bar i { width: 20px; height: 20px; border-radius: 50%; background: var(--ink-2); }
.jm-chip--bar { position: static; opacity: 0; width: 20px; height: 20px; border-radius: 50%; }
[data-visual="host3"].t1 .jm-tile--sam .jm-chip, [data-visual="host3"].t1 .jm-tile--tam .jm-chip, [data-visual="host3"].t1 .jm-chip--bar, [data-visual="host3"].t2 .jm-chip--c, [data-visual="guest3"].t1 .jm-chip { opacity: 1; transform: none; }
[data-visual="host3"].t2 .jm-chip--c { transition-delay: .2s; }
.journeys .j-vis:not(.is-anim) .jm-chip, .journeys.is-stacked .jm-chip { opacity: 1; transform: none; transition: none; }

/* short viewports (1024x768, 1280x720): keep the pinned stage inside the screen */
@media (max-height: 820px) {
  .journeys.is-pinned .j-stage { padding-block: calc(var(--l-topbar-h) + 24px) 16px; }
  .journeys.is-pinned .j-head { gap: var(--sp-16); }
  .journeys.is-pinned .j-window { margin-top: var(--sp-24); }
  .j-vis { min-height: clamp(240px, calc(100vh - 600px), 300px); }
  .j-card__text { min-height: 96px; }
  .j-card { gap: var(--sp-16); }
  .j-num { margin-bottom: var(--sp-8); }
  .j-card h3 { margin-bottom: var(--sp-8); }
  .jm-tile:nth-child(3) { aspect-ratio: 3 / 1; }
  .jm-tile { aspect-ratio: 16 / 10; }
  .j-vis { padding: 14px; }
}

/* pinned stage fills the viewport: the active card and its visual stretch to the free height */
.journeys.is-pinned .j-panel, .journeys.is-pinned .j-track { height: 100%; }
.journeys.is-pinned .j-card { height: 100%; }
.journeys.is-pinned .j-vis { min-height: 0; }
@media (min-width: 1500px) { :root { --j-card-w: 640px; } }

/* align head and controls to the page column (the rails run through this section) */
@media (min-width: 900px) { .journeys { --j-pad: calc(var(--rail-w, 0px) + 32px); } }
.jm-tile:nth-child(3) { aspect-ratio: 3 / 1; }
.jm-tile { aspect-ratio: 16 / 10; }

.j-card { background: var(--paper); }
.j-vis { align-content: center; }