/* ==========================================================================================================
   D-070 · For studios — the studio playbook (loaded by /for-studios/ only, after styles.css).
   Uses the site tokens (D-067 terminal palette). Colour grammar as elsewhere: gold = headline figure,
   mint = good, cyan = moderate / neutral, coral = worse, slate = no effect, violet = not settled.
   ========================================================================================================== */
.sx-page { --sx-card: linear-gradient(180deg, rgba(22, 26, 31, 0.72), rgba(12, 14, 17, 0.72));
  --sx-border: rgba(154, 166, 180, 0.14); --sx-slate: #8b96a3; }
.sx-sec { scroll-margin-top: 72px; }
.sx-page .px-sec { padding-top: clamp(40px, 5vw, 64px); }
.sx-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.sx-tab { position: relative; padding: 10px 18px; border: 0; background: none; font: inherit; font-family: var(--px); font-size: 1.3rem; letter-spacing: 0.04em;
  color: var(--muted); cursor: pointer; }
.sx-tab[aria-selected="true"] { color: var(--gold); }
.sx-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.sx-tab:hover { color: var(--text); }
.sx-tab:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 6px; }
html:not(.js) .sx-tabs { display: none; }
html:not(.js) .sx-tabpanel + .sx-tabpanel { margin-top: 40px; }
.sx-fig, .sx-hb-v, .sx-cb-v, .sx-route-count, .sx-node-n, .sx-dec-a b {
  font-family: var(--num); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em; }

/* ---------- hero: the two sources + jump links ---------- */
.sx-hero .hero-copy { padding-bottom: clamp(20px, 3vw, 30px); }
.sx-sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 860px; }
.sx-sources a { display: grid; gap: 4px; padding: 14px 18px 15px; height: 100%; box-sizing: border-box; text-decoration: none; color: var(--body);
  background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 12px; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.sx-sources a:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.sx-sources a:focus-visible { outline: none; box-shadow: var(--focus); }
.sx-sources b { font-family: var(--num); font-weight: 600; font-size: 1.08rem; color: var(--text); }
.sx-sources span:last-child { font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.sx-src-tag { justify-self: start; font-family: var(--px); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--gold); }
.sx-src-tag.is-ice { color: var(--ice); }
.sx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0 0 clamp(30px, 4vw, 48px); }
.sx-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--body); text-decoration: none; font-size: 0.9rem; background: rgba(5, 6, 8, 0.5); transition: border-color var(--dur-fast), color var(--dur-fast); }
.sx-jump a span { font-family: var(--px); font-size: 0.95rem; color: var(--gold); }
.sx-jump a:hover { border-color: var(--gold-soft); color: var(--text); }
.sx-jump a:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- 01 · the route ---------- */
.sx-route { --p: 0; position: relative; scroll-margin-top: 72px; }
.sx-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; }
.sx-rail::before, .sx-rail-fill { content: ""; position: absolute; top: 15px; left: calc(100% / 12); height: 2px; border-radius: 2px; }
.sx-rail::before { right: calc(100% / 12); background: var(--line); }
.sx-rail-fill { width: calc((100% - 100% / 6) * var(--p)); background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 14px rgba(246, 196, 83, 0.35); transition: width var(--dur) var(--ease); }
.sx-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 6px; margin: 0;
  background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-align: center; }
.sx-node i { display: block; width: 14px; height: 14px; margin: 9px 0 6px; background: var(--obsidian); border: 2px solid var(--steel-dim);
  transform: rotate(45deg); transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sx-node-n { font-size: 0.78rem; color: var(--muted-2); }
.sx-node-t { font-size: 0.9rem; line-height: 1.25; }
.sx-node:hover { color: var(--text); }
.sx-node:hover i { border-color: var(--gold-soft); }
.sx-node:focus-visible { outline: none; }
.sx-node:focus-visible i { box-shadow: var(--focus); }
.sx-node:focus-visible .sx-node-t { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.sx-node.is-done i { background: var(--gold); border-color: var(--gold); }
.sx-node[aria-selected="true"] { color: var(--text); }
.sx-node[aria-selected="true"] i { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 0 5px rgba(246, 196, 83, 0.16), 0 0 18px rgba(246, 196, 83, 0.5); }
.sx-node[aria-selected="true"] .sx-node-n { color: var(--gold); }
.sx-node.is-hot .sx-node-t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 2px; background: var(--crimson); border-radius: 1px; }

.sx-stop { padding: clamp(20px, 2.6vw, 32px); background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.26); }
.sx-stop + .sx-stop { margin-top: 16px; }
.sx-stop:focus-visible { outline: none; box-shadow: var(--focus); }
.sx-stop.is-enter { animation: sx-in 0.32s var(--ease-out); }
@keyframes sx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sx-stop-head { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.sx-stop-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: 0.9rem; color: var(--muted); }
.sx-stop-n { font-family: var(--px); font-size: 1rem; letter-spacing: 0.04em; color: var(--gold); }
.sx-hot { font-family: var(--px); font-size: 0.92rem; letter-spacing: 0.04em; padding: 1px 8px; border-radius: 6px; color: #fff; background: rgba(255, 92, 114, 0.22); border: 1px solid var(--crimson-soft); }
.sx-stop-h { margin: 0; max-width: 860px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.22;
  letter-spacing: -0.018em; color: var(--text); text-wrap: balance; }
.sx-stop-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); }
.sx-col-h, .sx-foot-h, .sx-move-tag { margin: 0 0 12px; font-family: var(--px); font-size: 1rem; letter-spacing: 0.04em; color: var(--muted); }

.sx-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sx-ev li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: start; padding: 0 0 14px; border-bottom: 1px solid var(--line-soft); }
.sx-ev li:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-ev p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--body); }
.sx-fig { font-weight: 600; font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.05; color: var(--tone, var(--gold)); text-shadow: 0 0 26px var(--tone-a, transparent); }
.tone-bad { --tone: var(--crimson); --tone-a: rgba(255, 92, 114, 0.2); }
.tone-good { --tone: var(--emerald); --tone-a: rgba(34, 227, 160, 0.18); }
.tone-gold { --tone: var(--gold); --tone-a: rgba(246, 196, 83, 0.2); }
.tone-ice { --tone: var(--ice); --tone-a: rgba(66, 198, 255, 0.18); }
.sx-cite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px !important; font-size: 0.82rem !important; }
.sx-cite a { color: var(--ice); text-underline-offset: 3px; }
.sx-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.76rem; line-height: 1.5; color: var(--muted); border: 1px solid var(--line); }
.sx-badge.is-strong { color: var(--gold); border-color: var(--gold-soft); }
.sx-badge.is-retest { color: var(--emerald); border-color: var(--emerald-soft); }

.sx-move { padding: 12px 16px; border-radius: 12px; background: rgba(5, 6, 8, 0.45); border: 1px solid var(--line-soft); border-left: 3px solid var(--mv); }
.sx-move + .sx-move { margin-top: 10px; }
.sx-move p { margin: 0; font-size: 0.95rem; line-height: 1.58; color: var(--body); }
.sx-move .sx-move-tag { margin-bottom: 6px; color: var(--mv); }
.sx-move.is-mkt { --mv: var(--gold); }
.sx-move.is-fb { --mv: var(--ice); }

.sx-stop-foot { margin-top: 18px; }
.sx-skip, .sx-watch { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); }
.sx-skip p, .sx-watch p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--body); }
.sx-skip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 16px; }
.sx-skip .sx-foot-h { margin: 0; white-space: nowrap; }
.sx-skip p:not(.sx-foot-h) { flex: 1 1 320px; }
.sx-skip .sx-foot-h { color: var(--sx-slate); }
.sx-skip .sx-foot-h::before { content: ""; display: inline-block; width: 12px; height: 2px; margin-right: 8px; vertical-align: 5px; background: var(--sx-slate); }
.sx-watch { border-style: solid; border-color: var(--ice-soft); background: rgba(66, 198, 255, 0.04); }
.sx-watch .sx-foot-h { color: var(--ice); }
.sx-skip a, .sx-watch a { color: var(--ice); text-underline-offset: 3px; white-space: nowrap; }

.sx-route-ctl { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sx-route.is-live .sx-route-ctl { display: flex; }
.sx-route-count { margin: 0; font-size: 0.9rem; color: var(--muted); }
.sx-route-count span { color: var(--gold); font-weight: 600; }
.sx-step-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.92rem;
  color: var(--text); background: rgba(12, 15, 18, 0.6); border: 1px solid var(--line); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.sx-step-btn:hover:not(:disabled) { border-color: var(--gold-soft); transform: translateY(-1px); }
.sx-step-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.sx-step-btn:disabled { opacity: 0.4; cursor: default; }
.sx-step-btn.is-next { color: #17120a; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.sx-step-btn.is-next:hover { background: var(--gold-bright); }
.sx-chev { width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.sx-chev.is-l { transform: rotate(-135deg); }
html:not(.js) .sx-rail { display: none; }   /* no script: the six stops simply print in order */

/* ---------- 02 · decision check ---------- */
.sx-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
html:not(.js) .sx-filter { display: none; }
.sx-chip { padding: 7px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.9rem; color: var(--body); background: rgba(12, 15, 18, 0.6); border: 1px solid var(--line); }
.sx-chip:hover { border-color: var(--gold-soft); color: var(--text); }
.sx-chip[aria-pressed="true"] { color: #17120a; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.sx-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.sx-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 18px; }
.sx-v { flex: none; display: inline-block; padding: 2px 9px; border-radius: 6px; font-family: var(--px); font-size: 0.92rem; letter-spacing: 0.03em; line-height: 1.3; white-space: nowrap; border: 1px solid; }
.sx-v.is-yes { color: var(--emerald); border-color: var(--emerald-soft); background: rgba(34, 227, 160, 0.08); }
.sx-v.is-no { color: var(--sx-slate); border-color: rgba(139, 150, 163, 0.35); background: rgba(139, 150, 163, 0.07); }
.sx-v.is-care { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-faint); }
.sx-v.is-open { color: var(--violet); border-color: var(--violet-soft); background: rgba(155, 140, 255, 0.08); }
.sx-decs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.sx-dec { background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 12px; transition: border-color var(--dur-fast); }
.sx-dec[hidden] { display: none; }
.sx-dec[open] { border-color: rgba(246, 196, 83, 0.28); }
.sx-dec summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) 12px; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.sx-dec summary::-webkit-details-marker { display: none; }
.sx-dec { margin-top: 0; }
.sx-dec summary::before { content: none; display: none; }   /* the site-wide drawer arrow; this card has its own chevron */
.sx-dec[open] summary { margin-bottom: 0; }
.sx-dec summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform var(--dur-fast); }
.sx-dec[open] summary::after { transform: rotate(225deg); }
.sx-dec summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }
.sx-dec summary:hover .sx-dec-q { color: var(--gold-bright); }
.sx-dec-q { font-weight: 600; font-size: 0.98rem; line-height: 1.35; color: var(--text); }
.sx-dec-a { padding: 0 16px 16px; }
.sx-dec-a p { margin: 0; font-size: 0.93rem; line-height: 1.58; color: var(--body); }
.sx-dec-a b { color: var(--gold); font-weight: 600; }
.sx-empty { color: var(--muted); }

/* ---------- 03 · genre profile ---------- */
.sx-gpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.sx-gbtn { padding: 6px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--body); background: rgba(12, 15, 18, 0.6); border: 1px solid var(--line); }
.sx-gbtn:hover { color: var(--text); border-color: var(--ice-soft); }
.sx-gbtn[aria-checked="true"] { color: #04121a; background: var(--ice); border-color: var(--ice); font-weight: 600; }
.sx-gbtn:focus-visible { outline: none; box-shadow: var(--focus); }
.sx-gpanel:empty { display: none; }
.sx-gpanel { padding: clamp(18px, 2.4vw, 28px); background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 16px; }
.sx-gp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 18px; }
.sx-gp-head h3 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -0.015em; color: var(--text); }
.sx-gp-head p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.sx-gp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.sx-gp-block { margin: 0; padding: 16px 18px; border-radius: 12px; background: rgba(5, 6, 8, 0.45); border: 1px solid var(--line-soft); }
.sx-gp-block figcaption { margin: 0 0 14px; font-family: var(--px); font-size: 1rem; letter-spacing: 0.04em; color: var(--muted); }
.sx-hb { display: grid; grid-template-columns: 112px minmax(0, 1fr) 128px; align-items: center; gap: 12px; padding: 7px 0; }
.sx-hb-l { font-size: 0.9rem; color: var(--text); line-height: 1.2; }
.sx-hb-l small { display: block; font-size: 0.75rem; color: var(--muted-2); }
.sx-hb-t { position: relative; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); }
.sx-hb-f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ice); transition: width var(--dur) var(--ease); }
.sx-hb-f.is-hot { background: var(--crimson); }
.sx-hb-f.is-cool { background: var(--emerald); }
.sx-hb-ref, .sx-key-ref { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 8px rgba(246, 196, 83, 0.5); }
.sx-hb-v { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; font-weight: 600; font-size: 1.05rem; color: var(--text); white-space: nowrap; }
.sx-hb.is-na { grid-template-columns: 112px minmax(0, 1fr); }
.sx-hb-na { font-size: 0.85rem; color: var(--muted-2); }
.sx-delta { font-family: var(--num); font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.sx-delta.is-up, .sx-delta.is-bad { color: var(--crimson); }
.sx-delta.is-down, .sx-delta.is-good { color: var(--emerald); }
.sx-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sx-col-b { display: grid; grid-template-rows: auto 120px auto auto; gap: 6px; text-align: center; }
.sx-cb-v { font-weight: 600; font-size: 1rem; color: var(--text); }
.sx-cb-t { position: relative; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--line); overflow: hidden; }
.sx-cb-f { position: absolute; left: 18%; right: 18%; bottom: 0; border-radius: 3px 3px 0 0; background: rgba(66, 198, 255, 0.55); transition: height var(--dur) var(--ease); }
.sx-col-b.is-peak .sx-cb-f { background: var(--crimson); box-shadow: 0 0 16px rgba(255, 92, 114, 0.4); }
.sx-col-b.is-peak .sx-cb-v { color: var(--crimson); }
.sx-col-b.is-flag .sx-cb-f, .sx-col-b.is-thin .sx-cb-f { background: repeating-linear-gradient(135deg, rgba(154, 166, 180, 0.45) 0 5px, transparent 5px 9px); }
.sx-col-b.is-flag .sx-cb-v, .sx-col-b.is-thin .sx-cb-v, .sx-col-b.is-none .sx-cb-v { color: var(--muted); }
.sx-cb-ref { position: absolute; left: 6%; right: 6%; height: 2px; margin-bottom: -1px; background: var(--gold); box-shadow: 0 0 8px rgba(246, 196, 83, 0.5); }
.sx-cb-clip { position: absolute; left: 18%; right: 18%; top: 6px; height: 4px; border-top: 2px dashed var(--obsidian); }
.sx-cb-l { font-size: 0.8rem; color: var(--body); line-height: 1.25; }
.sx-cb-n { font-size: 0.72rem; color: var(--muted-2); }
.sx-gp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 0.78rem; color: var(--muted); }
.sx-key-ref { position: relative; display: inline-block; top: 0; bottom: 0; width: 14px; height: 2px; margin: 0 2px 0 0; }
.sx-key-peak { display: inline-block; width: 10px; height: 10px; margin: 0 2px 0 10px; border-radius: 2px; background: var(--crimson); }
.sx-gp-first { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; padding: 12px 18px; border-radius: 12px; background: var(--gold-faint); border: 1px solid var(--gold-soft); }
.sx-gp-first .sx-move-tag { color: var(--gold); margin: 0; }
.sx-gp-first > div { flex: 1 1 360px; }
.sx-gp-first h4 { margin: 0 0 2px; font-family: var(--serif); font-size: 1.15rem; color: var(--text); }
.sx-gp-first p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--body); }
.sx-gp-extra { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--violet-soft); font-size: 0.88rem; line-height: 1.55; color: var(--body); }
.sx-gp-extra a { color: var(--ice); }
.sx-gtable-wrap { margin-top: 14px; max-width: 100%; }
.sx-gtable-wrap:not([open]) > .sx-scroll { display: none; }   /* a closed details still lays out its content in Chromium and widened the page */
.sx-gtable-wrap summary { cursor: pointer; color: var(--ice); font-size: 0.92rem; width: max-content; max-width: 100%; }
.sx-gtable-wrap summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
html:not(.js) .sx-gtable-wrap > summary { display: none; }
.sx-scroll { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; }
.sx-gtable, .sx-rule { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.sx-gtable caption, .sx-rule caption { caption-side: top; text-align: left; padding: 10px 14px; color: var(--muted); font-size: 0.8rem; }
.sx-gtable th, .sx-gtable td { padding: 8px 12px; text-align: right; border-top: 1px solid var(--line-soft); white-space: nowrap; color: var(--body); }
.sx-gtable th[scope="row"], .sx-gtable thead th:first-child { text-align: left; color: var(--text); font-weight: 500; }
.sx-gtable thead th { color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.sx-gtable tfoot th, .sx-gtable tfoot td { color: var(--gold); border-top: 1px solid var(--line); }

/* ---------- 04 · research for your team ---------- */
.sx-offer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.sx-offer-col { padding: 18px 22px; background: var(--sx-card); border: 1px solid var(--sx-border); border-radius: 16px; }
.sx-offer-col.is-pub { border-color: var(--gold-soft); box-shadow: inset 0 2px 0 var(--gold); }
.sx-offer-col.is-dev { box-shadow: inset 0 2px 0 var(--ice); }
.sx-offer-h { margin: 0 0 8px; font-family: var(--px); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.04em; color: var(--gold); }
.sx-offer-col.is-dev .sx-offer-h { color: var(--ice); }
.sx-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sx-offer-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.sx-offer-list li:first-child { border-top: 0; padding-top: 0; }
.sx-offer-list b { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--text); }
.sx-offer-list span { font-size: 0.9rem; line-height: 1.5; color: var(--body); }
.sx-dispatch { margin-top: clamp(24px, 3vw, 36px); }
.sx-flow { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-flow li { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; color: var(--text); background: rgba(5, 6, 8, 0.45); }
.sx-flow li + li::before { content: "\2192"; margin-right: 8px; margin-left: -2px; color: var(--gold); }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sx-stop-grid, .sx-gp-grid,   .sx-decs { grid-template-columns: minmax(0, 1fr); }
  .sx-offer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sx-sources { grid-template-columns: minmax(0, 1fr); }
  .sx-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sx-node-t { display: none; }
  .sx-node[aria-selected="true"] .sx-node-t { display: none; }
  .sx-stop-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sx-ev li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sx-hb { grid-template-columns: 92px minmax(0, 1fr); row-gap: 4px; }
  .sx-hb-v { grid-column: 2; justify-content: flex-start; }
  .sx-hb.is-na { grid-template-columns: 92px minmax(0, 1fr); }
  .sx-cols { gap: 6px; }
  .sx-col-b { grid-template-rows: auto 100px auto auto; }
  .sx-dec summary { grid-template-columns: minmax(0, 1fr) 12px; row-gap: 8px; }
  .sx-dec summary .sx-v { grid-column: 1; justify-self: start; }
  .sx-dec summary .sx-dec-q { grid-column: 1; }
  .sx-dec summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .sx-step-btn { padding: 10px 12px; }
  .sx-route-ctl .sx-step-btn:first-child { font-size: 0; gap: 0; }
  .sx-route-ctl .sx-step-btn:first-child .sx-chev { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-stop.is-enter { animation: none; }
  .sx-rail-fill, .sx-hb-f, .sx-cb-f, .sx-sources a { transition: none; }
}