/* Section 3: How it works. Steps left with the orbit line as the rail, one lit stage right where
   each "what you receive" deliverable slides up over the last. Both site themes come from the
   tokens in base.css: black ground and a dark blue stage, or white ground and a light blue stage.
   The deliverables are paper documents in both themes, like the opening's assistant panel. */

#journey {
  --j-shade: #0B0C0F;            /* what a covered card sinks into */
  --j-shade-max: .68;
  --j-grid: rgb(var(--fg-rgb) / .045);
  --j-paper: #FCFCFA;
  --j-ink: #17171A;
  --j-mute: rgba(10, 10, 11, .56);
  --j-hair: rgba(10, 10, 11, .07);
  --j-amber: #B7791F; --j-amber-bg: #FFF1DA; --j-amber-fg: #8A5A00;
  --j-red: #D2553A; --j-red-bg: #FDE6E0; --j-red-fg: #A23A22;
  --j-green: #1F8A4C;
  position: relative; z-index: 16;
  min-height: 0; background: var(--bg); color: var(--fg);
}
html[data-scheme="light"] #journey { --j-shade: #6F7FA8; --j-shade-max: .42; --j-grid: rgb(11 30 91 / .06); }

.j-pin {
  position: relative; height: 100svh; min-height: 680px; overflow: hidden;
  padding: calc(var(--header-h) + 28px) var(--gutter) 36px;
}
.j-bg { position: absolute; inset: 0; pointer-events: none; }
.j-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-scheme="light"] .j-bg::after { opacity: .25; mix-blend-mode: multiply; }

.j-grid {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 88px);
  align-items: center; width: min(1320px, 100%); margin: 0 auto;
}
.j-side { display: flex; flex-direction: column; min-height: 0; }
.j-eyebrow { margin: 0 0 14px; font-size: .8125rem; font-weight: 500; color: var(--fg-2); letter-spacing: .01em; }
.j-h2 { margin: 0 0 34px; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -0.034em; line-height: 1.02; text-wrap: balance; color: var(--fg); }

/* steps and the rail */
.j-list { position: relative; }
.j-steps { list-style: none; margin: 0; padding: 0; }
.j-rail { position: absolute; left: 9px; width: 1px; margin-left: -.5px; background: rgb(var(--fg-rgb) / .14); }
.j-rail-fill { position: absolute; left: 0; top: 0; width: 1px; background: rgb(var(--fg-rgb) / .7); }
.j-step { --open: 0; position: relative; border-top: 1px solid var(--line); }
.j-step:last-child { border-bottom: 1px solid var(--line); }
.j-head {
  display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); align-items: center; gap: 0 14px;
  width: 100%; min-height: 60px; padding: 14px 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: rgb(var(--fg-rgb) / calc(.46 + .54 * var(--open)));
  transition: color .25s var(--ease);
}
.j-head:hover { color: var(--fg); }
.j-head:active .j-title { transform: translateX(2px); }
.j-title { transition: transform .2s var(--ease); }
.j-head:hover .j-title { text-decoration: underline; text-decoration-color: rgb(var(--fg-rgb) / .3); text-underline-offset: 5px; }
.j-head:focus-visible { outline-offset: 2px; border-radius: 10px; }
.j-marker {
  position: relative; z-index: 1; justify-self: center;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid rgb(var(--fg-rgb) / .32);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.j-marker.is-on { border-color: var(--blue); }
.j-num { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: rgb(var(--fg-rgb) / .45); transition: color .3s var(--ease); }
/* the step in play carries its number on a blue chip, and the card for it matches (audit D18; blue,
   not coral: Josh, 11 Nov 2026); a ring, not padding, so the number never moves */
.j-head[aria-current] .j-num { justify-self: start; color: #fff; background: var(--blue); border-radius: 4px; box-shadow: 0 0 0 4px var(--blue); }
.j-title { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
/* the step in play keeps the section's one warm touch now its number is blue (Josh, 11 Nov 2026):
   the opening's apricot marker under its title, drawn in as the step opens */
.j-title { justify-self: start; width: fit-content; background: linear-gradient(var(--apricot), var(--apricot)) no-repeat 0 92% / 0% 46%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s var(--ease); }
.j-head[aria-current] .j-title { background-size: 100% 46%; }
.j-body { height: 0; overflow: hidden; }
.j-body-in { padding: 0 0 20px 66px; }
.j-body-in p { margin: 0 0 10px; max-width: 34em; color: rgb(var(--fg-rgb) / .7); font-size: .9688rem; line-height: 1.5; }
.j-body-in .j-get {
  display: flex; gap: 10px; align-items: baseline; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px dashed rgb(var(--fg-rgb) / .16); color: var(--fg);
}
.j-get span { flex: none; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.j-note { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: 28px; font-size: .875rem; color: var(--fg-2); }
.j-note span { width: 18px; height: 1px; background: rgb(var(--fg-rgb) / .35); }

/* phone bar (desktop uses the vertical rail) */
.j-bar { display: none; }

/* ---------- the stage: no box of its own (Josh, 11 Nov 2026). It is exactly the card's size
   (js/journey.js size) and clips the next card as it comes up over the last. ---------- */
.j-stage { position: relative; align-self: center; margin-inline: auto; min-height: 0; overflow: hidden; isolation: isolate; background: none;
  /* the card's own edge and shadow, drawn by the stage that clips it */
  box-shadow: 0 0 0 1px rgb(11 30 91 / .09), 0 2px 4px rgb(11 30 91 / .06), 0 36px 70px -30px rgb(11 30 91 / .38); }
.j-cards { position: absolute; inset: 0; z-index: 1; }

/* ---------- the four panels (Josh, 11 Nov 2026, evening): product UI quality ----------
   One system for all four: an 8px grid, one type scale (11 meta, 12 to 13 body, 14 title, 28 the
   hero number), one hero number or verdict per panel, layered surfaces with fine borders and soft
   inner light, one drawn icon set, status colours muted to sit with the blues, coral at most once.
   Cards lay out at a design width (js/journey.js) and scale as a whole to fill their column. */
#journey {
  --c-ink: #0F1729; --c-2: #475266; --c-3: #8590A2; --c-line: rgb(15 23 42 / .08); --c-line-2: rgb(15 23 42 / .05);
  --c-sunk: #F7F8FA; --c-raise: #FFFFFF;
  --ok: #2B7A57; --ok-bg: #EBF5F0; --ok-line: rgb(43 122 87 / .2);
  --warn: #8F5F06; --warn-bg: #FBF3E2; --warn-line: rgb(143 95 6 / .2);
  --bad: #A8373A; --bad-bg: #FBEEEE; --bad-line: rgb(168 55 58 / .18);
  --b-ink: #1550C7; --b-bg: #EEF3FF; --b-line: rgb(31 111 255 / .22);
}
.j-card {
  --cover: 0;
  position: absolute; top: 0; left: 50%; right: auto; width: var(--jc-w, 100%); translate: -50% 0;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--c-raise); color: var(--c-ink); transform-origin: 50% 0;
  font-size: 13px; line-height: 1.45; font-feature-settings: 'tnum' 0;
  will-change: transform;
}
/* a covered card sinks into shadow (depth), it does not fade: the sheet stays, its print goes quiet */
.j-card > * { opacity: calc(1 - var(--cover)); }
.j-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--j-shade); opacity: calc(var(--cover) * var(--j-shade-max)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* head: badge, title, a quiet context line */
.jc-head {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px;
  border-bottom: 1px solid var(--c-line); background: linear-gradient(180deg, #FFFFFF, #FBFBFC);
}
.jc-num {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(31 111 255 / .35);
}
.jc-title { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; }
.jc-for { margin-left: auto; font-size: 11.5px; color: var(--c-3); text-align: right; }
.jc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 10px 20px; border-top: 1px solid var(--c-line-2); font-size: 11px; color: var(--c-3); }
.jc-illus { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.jc-illus::before { content: ''; width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; }
.jc-illus--head { display: none; }

/* the hero: one number or verdict, on a sunk surface */
.jc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 20px 0; padding: 12px 16px;
  border-radius: 12px; background: var(--c-sunk); box-shadow: inset 0 0 0 1px var(--c-line-2), inset 0 1px 2px rgb(15 23 42 / .04);
}
.jc-big { margin: 0; display: flex; align-items: baseline; gap: 2px; font-size: 13px; font-weight: 500; color: var(--c-2); font-variant-numeric: tabular-nums; }
.jc-big b { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--c-ink); margin-right: 2px; }
/* each piece lands in turn as its card arrives (--in from js/journey.js, 1 when settled or still) */
.jc-hero, .jq-chat, .jb-q { --show: clamp(0, calc((var(--in, 1) - .5 - var(--k, 0) * .1) * 5), 1); opacity: var(--show); transform: translateY(calc((1 - var(--show)) * 8px)); }
.jc-hero { --k: -1; }

/* a status chip: muted tint, fine border, a drawn icon */
.jq-verdict, .jb-mark, .jf-live {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .005em;
  color: var(--v); background: var(--v-bg); box-shadow: inset 0 0 0 1px var(--v-line);
}
.jq-verdict svg { width: 12px; height: 12px; }
#journey [data-s="ok"] { --v: var(--ok); --v-bg: var(--ok-bg); --v-line: var(--ok-line); }
#journey :is([data-s="other"], [data-s="mixed"]) { --v: var(--warn); --v-bg: var(--warn-bg); --v-line: var(--warn-line); }
#journey :is([data-s="wrong"], [data-s="off"]) { --v: var(--bad); --v-bg: var(--bad-bg); --v-line: var(--bad-line); }

/* 1: three small AI chats, each in its engine's look, a verdict chip in its bar */
.jq-key { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--c-3); }
.jq-key li { display: inline-flex; align-items: center; gap: 5px; }
.jq-key i { width: 6px; height: 6px; border-radius: 2px; background: var(--v); }
.jq-chats { flex: 1; display: grid; align-content: start; gap: 8px; list-style: none; margin: 0; padding: 12px 20px 16px; }
.jq-chat {
  display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: 12px;
  background: var(--c-raise); box-shadow: inset 0 0 0 1px var(--c-line), 0 1px 2px rgb(15 23 42 / .04);
}
.jq-chat p { margin: 0; min-width: 0; }
.jq-app { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line-2); }
.jq-logo svg { display: block; width: 14px; height: 14px; }
.jq-eng-name { font-size: 12px; font-weight: 600; color: var(--c-2); }
.jq-verdict { margin-left: auto; }
.jq-user { justify-self: end; max-width: 86%; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: #F1F2F4; font-size: 12.5px; line-height: 1.4; color: var(--c-ink); }
.jq-ai { justify-self: start; max-width: 96%; font-size: 12.5px; line-height: 1.5; color: #2C3547; }
.jq-name { font-weight: 600; }
/* the business itself carries the opening's marker: the one warm touch in this panel */
.jq-name--you { color: var(--c-ink); background: linear-gradient(var(--apricot), var(--apricot)) no-repeat 0 92% / 100% 40%; }
.jq-name--other { color: var(--warn); }
.jq-wrong { color: var(--bad); text-decoration: underline wavy rgb(168 55 58 / .55); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jq-fix { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.jq-fix::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the engines' own looks */
.jq-chat[data-eng="gemini"] .jq-user { background: #E9EEF8; border-radius: 16px 4px 16px 16px; }
.jq-chat[data-eng="perplexity"] .jq-user { justify-self: start; max-width: none; padding: 0; background: transparent; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.jq-chat[data-eng="perplexity"] .jq-ai { padding: 6px 10px; border-radius: 8px; background: #F2F7F7; box-shadow: inset 2px 0 0 #2B7F86; }

/* 2: where you stand: the score, then the three checks as one list */
.jb-score-r { display: grid; justify-items: end; gap: 6px; }
.jb-score-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-3); }
.jb-pips { display: inline-flex; gap: 4px; }
.jb-pips i { width: 28px; height: 6px; border-radius: 3px; background: rgb(15 23 42 / .1); transform-origin: left; }
.jb-pips i[data-s="ok"] { background: var(--ok); transform: scaleX(clamp(0, calc((var(--in, 1) - .6) * 4), 1)); }
.jb-qs { list-style: none; display: grid; gap: 0; margin: 16px 20px 0; padding: 0; border-radius: 12px; background: var(--c-raise); box-shadow: inset 0 0 0 1px var(--c-line); }
.jb-q { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 16px; }
.jb-q + .jb-q { border-top: 1px solid var(--c-line-2); }
.jb-q-h { margin: 2px 0 0; font-size: 13px; font-weight: 600; letter-spacing: -0.008em; color: var(--c-ink); }
.jb-q-a { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--c-2); }
.jb-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--v); background: var(--v-bg); box-shadow: inset 0 0 0 1px var(--v-line); }
.jb-ico svg { width: 14px; height: 14px; }
.jb-mark { margin-top: 2px; }
.jb-facts { grid-column: 2 / -1; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; border-radius: 8px; background: var(--c-sunk); box-shadow: inset 0 0 0 1px var(--c-line-2); table-layout: fixed; }
.jb-facts th, .jb-facts td { padding: 6px 10px; text-align: left; vertical-align: middle; }
.jb-facts tbody tr > * { border-top: 1px solid var(--c-line-2); }
.jb-facts thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-3); }
.jb-facts thead th:first-child { width: 22%; }
.jb-facts th[scope="row"] { font-weight: 600; color: var(--c-ink); }
.jb-facts td.is-ok { color: var(--ok); }
.jb-facts td.is-ok svg { width: 14px; height: 14px; vertical-align: middle; }
.jb-facts td.is-na { color: var(--c-3); }
.jb-flag { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.jb-flag.is-missing { color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.jb-note { display: flex; align-items: center; gap: 8px; margin: 16px 20px 20px; font-size: 12px; color: var(--c-2); }
.jb-note svg { width: 14px; height: 14px; flex: none; color: var(--blue); }
.jb-note b { color: var(--c-ink); font-weight: 600; }

/* 3: the fix list: a big count, a segmented bar, the fixes ticking live in turn */
.jf-bar { position: relative; width: 44%; height: 6px; border-radius: 3px; background: rgb(15 23 42 / .08); overflow: hidden; }
.jf-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--blue); transition: width .45s var(--ease); }
.jf-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n, 9) - 2px), var(--c-sunk) 0 calc(100% / var(--n, 9))); }
#journey.is-static .jf-prog { display: none; }
#journey.is-static .jf-bar i { width: 100%; }
.jf-cols { display: grid; gap: 12px; padding: 12px 20px 16px; }
.jf-col { display: grid; gap: 4px; }
.jf-col h4 { margin: 0 0 2px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-3); }
.jf-col ul { list-style: none; display: grid; margin: 0; padding: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--c-line); background: var(--c-raise); }
.jf-col li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 34px; padding: 0 12px; font-size: 12.5px; line-height: 1.3; color: var(--c-3);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.jf-col li + li { border-top: 1px solid var(--c-line-2); }
.jf-col li i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed rgb(15 23 42 / .22); color: #fff; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.jf-col li i svg { width: 11px; height: 11px; transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.jf-col li.is-done { color: var(--c-ink); }
.jf-col li.is-done i { background: var(--blue); border: 1.5px solid var(--blue); }
.jf-col li.is-done i svg { transform: none; }
.jf-col li.is-current { color: var(--c-ink); background: var(--b-bg); }
.jf-col li.is-current i { border: 1.5px solid var(--blue); box-shadow: 0 0 0 3px rgb(31 111 255 / .14); }
.jf-s { font-style: normal; font-size: 11px; font-weight: 600; }
.jf-s > span { display: none; }
.jf-col li:not(.is-done):not(.is-current) .jf-s-q { display: inline; color: var(--c-3); font-weight: 500; }
.jf-col li.is-current .jf-s-n { display: inline; color: var(--b-ink); }
.jf-col li.is-done .jf-s-l { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
#journey.is-static .jf-col li .jf-s > span { display: none; }
#journey.is-static .jf-col li .jf-s .jf-s-l { display: inline-flex; color: var(--ok); }

/* 4: the opening's assistant panel, the same question again; before and after first */
.j-card--panel { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 120px), #FBFBF9; font-size: 13px; }
.jp-top { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--c-line); background: linear-gradient(180deg, #FFFFFF, #FBFBFC); }
.jp-title { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.012em; }
.jp-later { display: inline-flex; align-items: center; gap: 5px; height: 22px; margin-left: auto; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--c-2); background: var(--c-sunk); box-shadow: inset 0 0 0 1px var(--c-line); }
.jp-later svg { width: 11px; height: 11px; color: var(--blue); }
.jp-compare { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 20px 0; }
.jp-compare > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--c-sunk); box-shadow: inset 0 0 0 1px var(--c-line-2); }
.jp-compare > div.is-now { background: var(--c-raise); box-shadow: inset 0 0 0 1px var(--b-line), 0 1px 2px rgb(31 111 255 / .08), 0 8px 20px -12px rgb(31 111 255 / .35); }
.jp-compare span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-3); }
.jp-compare .is-now span { color: var(--b-ink); }
.jp-compare b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-3); }
.jp-compare .is-now b { color: var(--c-ink); }
.jp-compare small { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--c-2); }
.jp-arrow { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: 0 0 0 1px var(--c-line), 0 2px 6px -2px rgb(15 23 42 / .2); }
.jp-arrow svg { width: 12px; height: 12px; }
.jp-meter { display: inline-flex; gap: 3px; }
.jp-meter i { position: relative; width: 14px; height: 4px; border-radius: 2px; background: rgb(15 23 42 / .1); overflow: hidden; }
.jp-meter i.on { background: rgb(15 23 42 / .35); }
.is-now .jp-meter i.on { background: rgb(31 111 255 / .18); }
.is-now .jp-meter i.on::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(clamp(0, calc((var(--in, 1) - .55 - var(--k) * .08) * 5), 1)); }
.jp-body { padding: 16px 20px 12px; }
.jp-q { margin: 0 0 0 auto; width: fit-content; max-width: 84%; padding: 8px 14px; border-radius: 16px 16px 4px 16px; background: #EFEEEA; font-size: 13px; line-height: 1.4; }
.jp-checked { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; font-size: 11.5px; }
.jp-checked-k { margin-right: 2px; color: var(--c-3); }
.jp-src { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 4px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-2); }
.jp-src svg { width: 12px; height: 12px; margin-left: 3px; }
.jp-src-img { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; }
.jp-intro { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #2C3547; }
.jp-rec { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line), 0 6px 16px -12px rgb(15 23 42 / .3); }
.jp-rec-img { width: 88px; height: 60px; flex: none; border-radius: 8px; object-fit: cover; }
.jp-kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--coral-ink); }
/* the panel's one coral: Recommended, as in the opening */
.jp-kdot { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--coral); }
.jp-name { margin: 2px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.jp-sub { margin: 1px 0 0; font-size: 12px; color: var(--c-3); }
.jp-reasons { display: grid; gap: 0; margin: 10px 0 0; padding: 0; }
.jp-reasons div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 4px; }
.jp-reasons div + div { border-top: 1px solid var(--c-line-2); }
.jp-reasons dt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.jp-reasons dt i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 2px solid var(--blue); }
.jp-reasons dd { margin: 0; font-size: 12.5px; color: var(--c-2); }
.jp-actions { display: flex; gap: 12px; margin: 10px 0 0 4px; color: var(--c-3); }
.jp-actions svg { width: 14px; height: 14px; }

/* reduced motion: four blocks in reading order, each with its card */
#journey.is-static .j-pin { height: auto; min-height: 0; overflow: visible; padding-bottom: 96px; }
#journey.is-static .j-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
#journey.is-static .j-stage { display: none; }
#journey.is-static .j-body { height: auto; }
#journey.is-static .j-step { --open: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(40px, 5vw, 88px); align-items: start; padding-bottom: 32px; }
#journey.is-static .j-step > .j-card { position: relative; left: auto; width: auto; translate: none; grid-row: span 2; grid-column: 2; margin-top: 18px; }
#journey.is-static .j-rail { top: 30px; bottom: 30px; }
#journey.is-static .j-marker { border-color: var(--blue); }
#journey.is-static .j-head { cursor: default; }
#journey.is-static .jf-col li i { background: var(--blue); border: 1.5px solid var(--blue); }
#journey.is-static .jf-col li i svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .jq-typing i { animation: none; } }

@media (max-width: 819.98px) {
  .j-pin { padding: calc(var(--header-h) + 14px) var(--gutter) 18px; min-height: 0; }
  .j-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 12px; align-items: start; }
  .j-side { display: contents; }
  .j-eyebrow { display: none; }
  .j-h2 { order: 1; margin: 0; font-size: 1.5rem; letter-spacing: -0.03em; }
  .j-bar { order: 2; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; position: relative; height: 14px; }
  .j-bar-line { position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgb(var(--fg-rgb) / .16); grid-column: 1 / -1; }
  .j-bar-fill { position: absolute; inset: 0; background: rgb(var(--fg-rgb) / .7); transform-origin: left; transform: scaleX(0); }
  .j-bar i { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid rgb(var(--fg-rgb) / .32); justify-self: start; }
  .j-bar i:nth-of-type(2) { justify-self: start; margin-left: 33%; }
  .j-bar i:nth-of-type(3) { justify-self: end; margin-right: 33%; }
  .j-bar i:last-of-type { justify-self: end; }
  .j-bar i.is-on { border-color: var(--blue); }
  /* the step text first, then the deliverable under it */
  .j-list { order: 3; position: relative; height: 200px; overflow: hidden; }
  .j-stage { order: 4; min-height: 0; align-self: start; height: 100%; }
  /* the side note would sit under the floating contact pill here; it shows in the reduced motion layout */
  .j-note { display: none; }
  .j-rail { display: none; }
  .j-step { position: absolute; left: 0; right: 0; top: 0; border: 0 !important; }
  .j-head { grid-template-columns: 34px minmax(0, 1fr); min-height: 0; padding: 4px 0 8px; }
  .j-marker { display: none; }
  .j-title { font-size: 1.125rem; }
  .j-body { height: auto !important; }
  .j-body-in { padding: 0 0 0 48px; }
  .j-body-in p { font-size: .875rem; margin-bottom: 6px; }
  .j-body-in .j-get { margin-top: 8px; padding-top: 8px; font-size: .875rem; }

  /* phones: the same system on a 320 wide card, tighter, nothing under 11px */
  .j-card { border-radius: 14px; font-size: 12px; }
  .jc-head, .jp-top { min-height: 44px; padding: 0 12px; gap: 8px; }
  .jc-title, .jp-title { font-size: 13px; }
  .jp-title { gap: 8px; }
  .jc-num { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
  .jc-head { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .jc-for, .jc-foot, .jp-later { display: none; }
  .jc-illus--head { display: inline-flex; font-size: 11px; color: var(--c-3); }
  .jc-hero { margin: 8px 12px 0; padding: 6px 12px; gap: 8px; border-radius: 10px; }
  .jc-big { font-size: 12px; }
  .jc-big b { font-size: 20px; }
  .jq-key { gap: 8px; }
  .jq-key li { gap: 4px; }
  .jq-key { display: none; }
  .jq-chats { gap: 6px; padding: 8px 12px 8px; }
  .jq-chat { gap: 4px; padding: 5px 10px 6px; border-radius: 10px; }
  .jq-app { gap: 6px; padding-bottom: 3px; border-bottom: 0; }
  .jq-logo svg { width: 13px; height: 13px; }
  .jq-eng-name { font-size: 11.5px; }
  .jq-verdict, .jb-mark { height: 18px; padding: 0 6px; gap: 4px; font-size: 11px; }
  .jq-verdict svg { width: 11px; height: 11px; }
  .jq-user { padding: 3px 9px; font-size: 11.5px; line-height: 1.3; max-width: 94%; }
  .jq-ai { font-size: 11.5px; line-height: 1.35; }
  .jq-chat[data-eng="perplexity"] .jq-user { font-size: 11.5px; }
  .jq-chat[data-eng="perplexity"] .jq-ai { padding: 4px 8px; }
  .jq-fix { font-size: 11px; gap: 5px; }
  .jq-fix::before { width: 12px; height: 12px; }
  .jb-score-k { font-size: 11px; letter-spacing: .03em; }
  .jb-pips i { width: 18px; height: 5px; }
  .jb-score { flex-wrap: nowrap; }
  .jb-qs { margin: 8px 12px 0; border-radius: 10px; }
  .jb-q { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 10px; }
  .jb-ico { width: 20px; height: 20px; border-radius: 6px; }
  .jb-ico svg { width: 12px; height: 12px; }
  .jb-q-h { font-size: 12.5px; margin-top: 1px; }
  .jb-q-a { font-size: 11px; margin-top: 1px; }
  .jb-facts { grid-column: 1 / -1; font-size: 11px; }
  .jb-facts th, .jb-facts td { padding: 4px 6px; }
  .jb-facts thead th { font-size: 11px; letter-spacing: 0; text-transform: none; }
  .jb-flag { padding: 1px 5px; font-size: 11px; }
  .jb-note { margin: 8px 12px 10px; font-size: 11px; gap: 6px; }
  .jb-note svg { width: 12px; height: 12px; }
  .jf-bar { width: 40%; height: 5px; }
  .jf-cols { gap: 6px; padding: 8px 12px 10px; }
  .jf-col { gap: 3px; }
  .jf-col h4 { font-size: 11px; letter-spacing: .03em; }
  .jf-col li { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; min-height: 26px; padding: 3px 8px; font-size: 11.5px; }
  .jf-col li i { width: 16px; height: 16px; }
  .jf-col li i svg { width: 10px; height: 10px; }
  .jf-s { font-size: 11px; }
  .jf-col li.is-done .jf-s-l { height: 16px; padding: 0 5px; }
  .j-card--panel { font-size: 12px; }
  .jp-compare { gap: 6px; margin: 8px 12px 0; }
  .jp-compare > div { padding: 8px 10px; border-radius: 10px; gap: 2px; }
  .jp-compare span { font-size: 11px; letter-spacing: .02em; }
  .jp-compare b { font-size: 12px; }
  .jp-compare small { font-size: 11px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .jp-meter i { width: 9px; }
  .jp-arrow { width: 20px; height: 20px; }
  .jp-arrow svg { width: 10px; height: 10px; }
  .jp-body { padding: 8px 12px 8px; }
  .jp-q { font-size: 12px; padding: 6px 10px; }
  .jp-checked { margin: 8px 0 6px; font-size: 11px; gap: 4px; }
  .jp-src { height: 20px; padding: 0 6px 0 3px; }
  .jp-intro, .jp-actions { display: none; }
  .jp-rec { gap: 10px; padding: 6px; border-radius: 10px; }
  .jp-rec-img { width: 64px; height: 46px; }
  .jp-kicker { font-size: 11px; }
  .jp-name { font-size: 14px; }
  .jp-sub { font-size: 11px; }
  .jp-reasons { margin-top: 6px; }
  .jp-reasons div { grid-template-columns: 92px minmax(0, 1fr); gap: 6px; padding: 3px 2px; }
  .jp-reasons dt, .jp-reasons dd { font-size: 11px; }

  #journey.is-static .j-list { height: auto; overflow: visible; }
  #journey.is-static .j-step { position: relative; display: block; }
  #journey.is-static .j-step > .j-card { margin: 12px 0 0; }
  #journey.is-static .j-note { display: flex; padding-top: 8px; font-size: .75rem; }
}