/* ===== Four stops to board: pick where you work, then four steps =====
   Nothing here moves with the scroll. Each path has its own hue (Claude warm, coding agents cool,
   chat apps neutral) that marks the chosen tab, the stops and the thing to press in each small screen.
   The screens are clean: a light frame that says where it lives, and the one control, large.
   The card is the size container, so the screens scale with it. */

#way-claude, #path-claude { --way: var(--br-claude); --way-a: color-mix(in oklab, var(--br-claude) 22%, transparent); }
#way-agents, #path-agents { --way: oklch(74% 0.12 235); --way-a: oklch(74% 0.12 235 / 0.2); }
#way-chat, #path-chat { --way: oklch(84% 0.012 250); --way-a: oklch(84% 0.012 250 / 0.16); }

/* where you work: three choices, fills only; the chosen one takes its hue */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.ways button { display: flex; align-items: center; gap: var(--space-md); min-height: 76px; padding: 0 var(--space-lg); border: 0; border-radius: var(--r-tile); background: var(--color-paper-2); color: var(--color-muted); font: inherit; text-align: left; cursor: pointer; transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.ways button:hover { background: var(--color-paper-3); color: var(--color-ink-2); }
.ways button[aria-selected="true"] { background: color-mix(in oklab, var(--way) 10%, var(--color-paper-2)); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--way); }
.ways button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.way-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tint-2); transition: background-color 300ms var(--ease-out); }
.way-ico svg { width: 22px; height: 22px; color: var(--way); }
.ways button[aria-selected="true"] .way-ico { background: var(--way-a); }
.way-txt { display: grid; gap: 4px; min-width: 0; }
.way-txt b { color: inherit; font: 500 var(--text-md)/1.2 var(--font-body); }
.way-txt small { overflow: hidden; color: var(--ink-quiet); font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }

/* switching paths: the old one dissolves, the new one comes into focus card by card */
.path { margin-top: var(--space-xl); }
.path.is-out { opacity: 0; filter: blur(4px); transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .path.is-in .step, .path.is-in .path-then { animation: way-in 560ms var(--ease-out) both; }
  .path.is-in .step:nth-child(2) { animation-delay: 60ms; }
  .path.is-in .step:nth-child(3) { animation-delay: 120ms; }
  .path.is-in .step:nth-child(4) { animation-delay: 180ms; }
  .path.is-in .path-then { animation-delay: 240ms; }
}
@keyframes way-in { from { opacity: 0; filter: blur(6px); translate: 0 12px; } to { opacity: 1; filter: none; translate: 0 0; } }

/* the four steps: a stop, then a card without an outline */
.path .steps { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-cards); }
.path .step, .path .step.is-lit { display: grid; grid-template-rows: auto 1fr; gap: var(--space-md); min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.step-card { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-lg); padding: 10px 10px var(--space-lg); border-radius: var(--r-card); background: var(--color-paper-2); }
.step-body { display: flex; flex-direction: column; gap: var(--space-sm); padding: 0 14px; }
.step-body h3 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; }
.step-body p { max-width: none; color: var(--color-muted); font-size: var(--text-md); line-height: 1.45; }
.step-body .step-cmd { margin-top: var(--space-2xs); }
.step-body .step-cmd code, .then-cmds .step-cmd code { overflow-wrap: normal; word-break: normal; white-space: normal; }
.step-cmd .nb { white-space: nowrap; }
.path .sit-cmd { border-color: transparent; background: var(--tint-2); }
.step-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.step-link svg { width: 16px; height: 16px; }
.step-link:hover { text-decoration-color: var(--color-ink); }
.step-copy .copy { min-height: 36px; }

/* the stops: the number centred over each card, a still hairline running between them */
.stop { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 16px; }
.stop::before, .stop::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }
.stop::before { margin-left: calc(var(--gap-cards) / -2); margin-right: 4px; }
.stop::after { margin-right: calc(var(--gap-cards) / -2); margin-left: 4px; }
.step:first-child .stop::before, .step:last-child .stop::after { visibility: hidden; }
.stop i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--way); }
.stop span { color: var(--ink-dim); font: 500 12px/1 var(--font-code); }

/* the small screen: a clean ground, a light frame for where it lives, the control large */
.sv { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--color-paper); color: var(--color-muted); font: 500 4.6cqi/1.25 var(--font-body); letter-spacing: 0; }
.sv--center { align-items: center; justify-content: center; padding: 1em; }
.sv-hit { position: relative; background: var(--way-a); color: var(--color-ink); }
.sv-n { display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--way); color: var(--color-paper); font: 600 0.74em/1 var(--font-code); }
.sv-ph { display: block; flex: none; width: 70%; height: 0.5em; border-radius: 99em; background: var(--tint-2); }
.sv-ph.is-short { width: 45%; }

/* centred pieces of interface: a browser's address bar, a menu card, a dialog, a list */
.sv-browser { display: flex; flex-direction: column; gap: 0.7em; width: 90%; padding: 0.8em; border-radius: 0.9em; background: var(--color-paper-3); }
.sv-dots { display: flex; gap: 0.35em; }
.sv-dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--tint-3); }
.sv-addr { display: flex; align-items: center; gap: 0.5em; padding: 0.65em 0.9em; border-radius: 99em; font-size: 1.05em; }
.sv-lock { width: 0.95em; height: 0.95em; fill: none; stroke: var(--way); stroke-width: 2.2; stroke-linecap: round; }
.sv-card { display: flex; flex-direction: column; gap: 0.35em; padding: 0.55em; border-radius: 0.85em; background: var(--color-paper-3); box-shadow: 0 0.8em 1.8em oklch(0% 0 0 / 0.4); }
.sv-cascade { display: flex; align-items: flex-start; gap: 0.5em; width: 100%; }
.sv-cascade .sv-card { flex: 1; min-width: 0; }
.sv-cascade .sv-card.is-back { margin-top: 1.6em; }
.sv-card.is-list { width: 92%; gap: 0.45em; }
.sv-card.is-side { width: 66%; }
.sv-item { display: flex; align-items: center; gap: 0.5em; min-height: 2.1em; padding: 0 0.6em; border-radius: 0.55em; color: var(--color-ink-2); white-space: nowrap; }
.sv-item > i { flex: none; width: 0.85em; height: 0.85em; border-radius: 0.25em; background: var(--tint-3); }
.sv-item .sv-ph { width: 100%; }
.sv-item .sv-ph.is-short { width: 60%; }
.sv-item.sv-hit { background: var(--way-a); color: var(--color-ink); }
.sv-item.is-new { justify-content: center; font-weight: 600; }
.sv-ph.is-title { width: 50%; margin: 0.55em 0.6em 0.35em; background: var(--tint-3); }
.sv-chatwin { display: flex; flex-direction: column; gap: 0.7em; width: 94%; }
.sv-bub.is-agent { align-self: flex-start; color: var(--color-ink-2); }
.sv-pill { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.55em 0.75em; border-radius: 0.65em; background: var(--tint-2); color: var(--color-ink-2); white-space: nowrap; }
.sv-pill.sv-hit { background: var(--way-a); color: var(--color-ink); }
.sv-modal { display: flex; width: 90%; flex-direction: column; gap: 0.6em; padding: 0.9em; border-radius: 0.9em; background: var(--color-paper-3); box-shadow: 0 1.2em 2.6em oklch(0% 0 0 / 0.55); }
.sv-modal b { color: var(--color-ink); font-weight: 600; }
.sv-field { display: flex; align-items: center; overflow: hidden; padding: 0.65em 0.75em; border-radius: 0.6em; background: var(--color-paper); color: var(--color-ink); font: 500 0.8em/1 var(--font-code); white-space: nowrap; }
.sv-caret { flex: none; width: 1px; height: 1.15em; margin-left: 2px; background: var(--way); }
.sv-btn, .sv-btn.sv-hit { align-self: flex-end; padding: 0.5em 1.2em; border-radius: 99em; background: var(--color-ink); color: var(--color-paper); font-weight: 600; }
.sv-row { display: flex; align-items: center; gap: 0.5em; width: 100%; padding: 0.75em 0.8em; border-radius: 0.6em; }
.sv-row b { flex: 1; min-width: 0; overflow: hidden; color: var(--color-ink-2); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sv-row.is-main { background: var(--tint-2); }
.sv-row + .sv-row { margin-top: 0; }
.sv-row.is-main b { color: var(--color-ink); }
.sv-tog { position: relative; flex: none; width: 2.2em; height: 1.25em; border-radius: 99em; background: var(--tint-3); }
.sv-tog::before { content: ""; position: absolute; left: 0.16em; top: 0.16em; width: 0.93em; height: 0.93em; border-radius: 50%; background: var(--color-ink-2); }
.sv-tog.is-on, .sv-tog.is-on.sv-hit { background: var(--way); }
.sv-tog.is-on::before { translate: 0.95em 0; background: var(--color-paper); }

.sv-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9em 0.4em; width: 100%; }
.sv-logos > span { display: flex; flex-direction: column; align-items: center; gap: 0.4em; color: var(--color-ink-2); font-size: 0.72em; white-space: nowrap; }
.sv-logos svg { width: 2.2em; height: 2.2em; color: var(--color-ink); }
.sv-logos svg:has(use[href="#l-gemini"]) { color: var(--br-gemini); }
.sv-logos svg:has(use[href="#l-copilot"]) { color: var(--br-copilot); }
.sv-logos svg:has(use[href="#l-windsurf"]) { color: var(--br-windsurf); }
.sv-logos i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 0.5em; background: var(--tint-3); color: var(--color-ink); font: 600 0.8em/1 var(--font-code); font-style: normal; }
.sv-composer { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.55em 0.55em 0.9em; border-radius: 1em; background: var(--tint-2); }
.sv-typed { flex: 1; min-width: 0; color: var(--color-ink); font: 500 0.78em/1.4 var(--font-code); word-break: break-all; }
.sv-send, .sv-send.sv-hit { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--color-ink); }
.sv-send svg { width: 1em; height: 1em; fill: none; stroke: var(--color-paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-qa { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45em; width: 100%; }
.sv-q { color: var(--color-ink-2); font-size: 0.92em; }
.sv-q + .sv-chips { margin-bottom: 0.45em; }
.sv-chips { display: flex; gap: 0.4em; }
.sv-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4em 0.75em; border-radius: 99em; background: var(--tint-2); color: var(--color-ink-2); white-space: nowrap; }
.sv-term { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em; width: 100%; color: var(--color-ink-2); font: 500 0.82em/1.3 var(--font-code); }
.sv-term i { margin-right: 0.6em; color: var(--ok); font-style: normal; }
.sv-term .sv-hit { margin-top: 0.3em; padding: 0.4em 0.7em; border-radius: 0.5em; }
.sv-drop { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0.45em; width: 100%; padding: 1em 0.8em; border-radius: 0.9em; }
.sv-drop span { padding: 0.45em 0.6em; border-radius: 0.45em; background: var(--color-paper-3); color: var(--color-ink); font: 500 0.72em/1.2 var(--font-code); white-space: nowrap; }
.sv-note { display: flex; flex-direction: column; gap: 0.7em; width: 100%; padding: 0.9em; border-radius: 0.8em; background: var(--tint-2); }
.sv-text { color: var(--color-ink-2); font: 500 0.78em/1.45 var(--font-code); }
.sv-bubs { display: flex; flex-direction: column; gap: 0.5em; width: 100%; }
.sv-bub { display: flex; flex-direction: column; gap: 0.45em; align-self: flex-start; max-width: 88%; padding: 0.6em 0.85em; border-radius: 0.85em; background: var(--tint-2); color: var(--color-ink-2); }
.sv-bub--me { align-self: flex-end; background: var(--color-ink); color: var(--color-paper); }
.sv-bub em { align-self: flex-start; padding: 0.3em 0.55em; border-radius: 0.4em; background: var(--way-a); color: var(--color-ink); font: 500 0.85em/1 var(--font-code); font-style: normal; }

/* the cursor rests on the thing to press */
.sv-cur { position: absolute; z-index: 3; left: 50%; top: 50%; width: 1.6em; height: 1.6em; pointer-events: none; }
.sv-cur svg { width: 100%; height: 100%; fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0.15em 0.3em oklch(0% 0 0 / 0.5)); }

/* after the four stops: one card. Onboarding on top; the other route folds open smoothly below */
.path-then { margin-top: var(--space-lg); padding: 6px; border-radius: var(--r-card); background: var(--color-paper-2); }
.then-bar { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); }
.then-k { flex: none; min-width: 5.5em; color: var(--way); font: 500 12px/1 var(--font-code); }
.then-bar p { flex: 1; min-width: 0; margin: 0; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; }
.then-bar code, .then-note code { padding: 3px 7px; border-radius: 6px; background: var(--tint-2); color: var(--color-ink); font: 500 0.9em/1 var(--font-code); white-space: nowrap; }
.then-bar a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.then-bar a:hover { text-decoration-color: var(--color-ink); }
.then-more { margin-top: 2px; border-radius: calc(var(--r-card) - 6px); background: var(--tint-1); }
.then-toggle { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 56px; padding: 0 var(--space-lg); border: 0; border-radius: inherit; background: none; color: var(--color-muted); font: inherit; text-align: left; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.then-toggle:hover, .then-toggle[aria-expanded="true"] { color: var(--color-ink-2); }
.then-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.then-toggle > span { flex: 1; min-width: 0; }
.then-toggle b { color: var(--color-ink); font-weight: 500; }
.then-ico { flex: none; width: 18px; height: 18px; color: var(--ink-dim); }
.then-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 300ms var(--ease-out); }
.then-toggle[aria-expanded="true"] .then-chev { rotate: 180deg; }
.then-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 380ms var(--ease-out), visibility 0s linear 380ms; }
.then-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 380ms var(--ease-out), visibility 0s; }
.then-inner { overflow: hidden; min-height: 0; }
.then-pad { display: grid; gap: var(--space-lg); padding: var(--space-2xs) var(--space-lg) var(--space-lg); }
.then-note { max-width: 72ch; margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.55; }
.then-cmds { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.then-cmds li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: var(--space-sm); }
.then-i { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--tint-2); color: var(--color-ink-2); font: 500 12px/1 var(--font-code); }
.then-cmds li > div { display: grid; gap: var(--space-xs); min-width: 0; }
.then-lab { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; line-height: 24px; }
.then-cmds .step-cmd { max-width: 820px; margin: 0; }

/* tablets: two steps a row; the line breaks with the row */
@media (max-width: 60rem) {
  .path .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .path .step:nth-child(odd) .stop::before, .path .step:nth-child(even) .stop::after { visibility: hidden; }
  .ways { margin-top: var(--space-xl); }
  .ways button { gap: var(--space-sm); padding: 0 var(--space-md); }
  .way-txt small { display: none; }
}
/* phones: compact choices, one step a row, a quiet line down between the cards */
@media (max-width: 40rem) {
  .ways { gap: var(--space-xs); }
  .ways button { flex-direction: column; justify-content: center; gap: var(--space-xs); min-height: 88px; padding: var(--space-sm) var(--space-2xs); text-align: center; }
  .way-ico { width: 38px; height: 38px; }
  .way-ico svg { width: 20px; height: 20px; }
  .way-txt b { font-size: 13px; }
  .path .steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); --gap-cards: 24px; }
  .path .step { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto; column-gap: var(--space-sm); }
  .stop { flex-direction: column; justify-content: flex-start; align-self: stretch; gap: 0; height: auto; }
  .stop::before { display: none; }
  .stop::after { flex: 1; width: 1px; height: auto; margin: var(--space-xs) 0 calc(-1 * var(--space-lg)); }
  .path .step:nth-child(n) .stop::after { visibility: visible; }
  .path .step:last-child .stop::after { visibility: hidden; }
  .stop i { display: none; }
  .stop span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--way-a); color: var(--color-ink); }
  .step-card { padding: 8px 8px var(--space-lg); }
  .step-body { padding: 0 12px; }
  .step-body h3 { font-size: 1.375rem; }
  .then-bar { flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); }
  .then-bar p { flex-basis: 100%; }
  .then-k { min-width: 0; }
  .then-toggle { flex-wrap: wrap; row-gap: 2px; min-height: 64px; padding: var(--space-sm) var(--space-md); }
  .then-toggle > span { flex-basis: calc(100% - 60px); order: 1; font-size: var(--text-sm); }
  .then-ico { order: 0; }
  .then-toggle b { order: 2; margin-left: 30px; flex: 1; }
  .then-chev { order: 3; }
  .then-pad { padding: var(--space-2xs) var(--space-md) var(--space-md); }
}