/* How we work page only. Loaded via `extra: crm, p-how-we-work`. Every class is scoped with .pxhw- */

/* ---------- hero: copy + track switch | railway route map ---------- */
.pxhw-hero .pxhw-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; }
.pxhw-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 540px; margin-top: 26px; }
.pxhw-switch__b { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid #D5E4EE; background: #fff; text-align: left; cursor: pointer; font: inherit; color: #082238; box-shadow: 0 14px 28px -24px rgba(8,34,56,.6); transition: border-color .25s, box-shadow .25s, transform .25s, background .25s; }
.pxhw-switch__b:hover { border-color: #9FCFE6; transform: translateY(-2px); }
.pxhw-switch__b:focus-visible { outline: 3px solid #00A3D9; outline-offset: 3px; }
.pxhw-switch__b b { display: block; font: 800 16px/1.2 var(--f-display); }
.pxhw-switch__b em { display: block; margin-top: 2px; font: 600 12.5px/1.2 var(--f-body); font-style: normal; color: #64748B; }
.pxhw-switch__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #EEF5FA; }
.pxhw-switch__ico svg { width: 20px; height: 20px; fill: none; stroke: #0A6FA8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pxhw-switch__b[aria-pressed="true"] { border-color: #00A3D9; background: linear-gradient(135deg, #F2FAFE, #fff); box-shadow: 0 0 0 3px rgba(0,163,217,.16), 0 18px 34px -24px rgba(8,34,56,.6); }
.pxhw-switch__b[aria-pressed="true"] .pxhw-switch__ico { background: #00A3D9; }
.pxhw-switch__b[aria-pressed="true"] .pxhw-switch__ico svg { stroke: #fff; }
.pxhw-switch__b[data-hw-track="migration"][aria-pressed="true"] { border-color: #00B2A9; background: linear-gradient(135deg, #EFFAF8, #fff); box-shadow: 0 0 0 3px rgba(0,178,169,.18), 0 18px 34px -24px rgba(8,34,56,.6); }
.pxhw-switch__b[data-hw-track="migration"][aria-pressed="true"] .pxhw-switch__ico { background: #00B2A9; }
.pxhw-switch__say { min-height: 3em; margin: 12px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.5; color: #475569; }

.pxhw-rail { margin: 0; position: relative; }
.pxhw-rail::before { content: ""; position: absolute; inset: 34px -16px -16px 26px; z-index: -1; border-radius: 28px; background: linear-gradient(135deg, #1D3F8F, #00A3D9 45%, #00B2A9 75%, #3FB97A); opacity: .14; }
.pxhw-rail__card { padding: 18px 18px 14px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 50px 90px -48px rgba(8,34,56,.55); }
.pxhw-rail__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 4px 6px; }
.pxhw-rail__top span { font: 700 11.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #0A6FA8; }
.pxhw-rail__top em { font: 600 13px/1 var(--f-body); font-style: normal; color: #64748B; }
.pxhw-rail__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pxhw-rail__bed { fill: none; stroke: #E6EEF4; stroke-width: 16; stroke-linecap: round; }
.pxhw-rail__line { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .45s ease, opacity .45s ease; }
.pxhw-rail__line--a { stroke: url(#pxhwGa); }
.pxhw-rail__line--b { stroke: url(#pxhwGb); }
.pxhw-rail__lab { font: 800 15px var(--f-display); letter-spacing: -.01em; transition: opacity .45s; }
.pxhw-rail__lab--a { fill: #1D3F8F; } .pxhw-rail__lab--b { fill: #07605E; }
.pxhw-rail__st circle { fill: #fff; stroke-width: 4; transition: opacity .45s; }
.pxhw-rail__st--a circle { stroke: #00A3D9; } .pxhw-rail__st--b circle { stroke: #00B2A9; }
.pxhw-rail__st.is-x circle { stroke: #F0A400; stroke-width: 5; }
.pxhw-rail__st text { font: 700 14.5px var(--f-body); fill: #334155; transition: opacity .45s; }
.pxhw-rail__term rect { fill: #082238; }
.pxhw-rail__term--end rect { fill: #3FB97A; }
.pxhw-rail__term text { font: 800 14px var(--f-display); fill: #082238; }
.pxhw-rail__train circle { fill: #FFB81C; stroke: #082238; stroke-width: 3; }
.pxhw-rail__train .pxhw-rail__train-core { fill: #082238; stroke: none; }
.pxhw-rail[data-track="new-project"] .pxhw-rail__line--b, .pxhw-rail[data-track="migration"] .pxhw-rail__line--a { opacity: .22; stroke-width: 5; }
.pxhw-rail[data-track="new-project"] .pxhw-rail__lab--b, .pxhw-rail[data-track="migration"] .pxhw-rail__lab--a,
.pxhw-rail[data-track="new-project"] .pxhw-rail__st--b, .pxhw-rail[data-track="migration"] .pxhw-rail__st--a { opacity: .35; }
.pxhw-rail__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 4px 0; padding: 0; list-style: none; font: 600 12.5px/1.3 var(--f-body); color: #64748B; }
.pxhw-rail__key li { display: inline-flex; align-items: center; gap: 7px; }
.pxhw-rail__key i { width: 18px; height: 5px; border-radius: 3px; }
.pxhw-rail__key .k-a { background: linear-gradient(90deg, #1D3F8F, #00A3D9); }
.pxhw-rail__key .k-b { background: linear-gradient(90deg, #00B2A9, #3FB97A); }
.pxhw-rail__key .k-x { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #F0A400; }

/* ---------- toolbar: track + role filter ---------- */
.pxhw-steps { background: #F3F7F9; overflow-x: clip; }
.pxhw-bar { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 24px 50px -44px rgba(8,34,56,.6); }
.pxhw-bar .hp-kick { margin-bottom: 14px; }
.pxhw-bar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.pxhw-switch--mini { margin: 0; max-width: none; flex: 0 1 420px; }
.pxhw-switch--mini .pxhw-switch__b { min-height: 48px; padding: 9px 14px; border-radius: 12px; box-shadow: none; }
.pxhw-switch--mini .pxhw-switch__b > span { display: flex; align-items: baseline; gap: 8px; }
.pxhw-switch--mini .pxhw-switch__b b { font-size: 15px; }
.pxhw-switch--mini .pxhw-switch__b em { margin: 0; padding: 2px 7px; border-radius: 999px; background: #EEF5FA; font-size: 12px; }
.pxhw-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pxhw-roles__lab { margin-right: 4px; font: 700 13.5px/1.2 var(--f-body); color: #082238; }
.pxhw-role { padding: 9px 14px; border-radius: 999px; border: 1.5px solid #D5E4EE; background: #fff; font: 600 14px/1.1 var(--f-body); color: #334155; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.pxhw-role:hover { border-color: #9FCFE6; }
.pxhw-role:focus-visible { outline: 3px solid #00A3D9; outline-offset: 2px; }
.pxhw-role[aria-pressed="true"] { background: #082238; border-color: #082238; color: #fff; }
.pxhw-bar__status { margin: 14px 0 0; font: 600 14.5px/1.4 var(--f-body); color: #0A6FA8; }

/* ---------- metro line ---------- */
.pxhw-track { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: 96px; }
.pxhw-track__head { max-width: 780px; }
.pxhw-metro { position: relative; margin-top: 36px; padding-left: 78px; }
.pxhw-metro__rail { position: absolute; left: 25px; top: 30px; bottom: 40px; width: 10px; border-radius: 6px; background: #DCE7EF; }
.pxhw-metro__rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#1D3F8F, var(--lc) 45%, #00B2A9 80%, #3FB97A); transform-origin: top; transform: scaleY(1); }
.pxhw-js .pxhw-metro__rail i { transform: scaleY(0); }
.pxhw-metro__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pxhw-stop { position: relative; }
.pxhw-stop__zone { margin: 14px 0 10px; font: 800 12.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--zc) 55%, #082238); }
.pxhw-stop:first-child .pxhw-stop__zone { margin-top: 0; }
.pxhw-stop__dot { position: absolute; left: -67px; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 6px solid var(--zc); box-shadow: 0 0 0 5px #F3F7F9; transition: transform .35s cubic-bezier(.3,1.4,.5,1), background .35s; }
/* key stops have a 4px left border, so pull their dot back to the rail */
.pxhw-stop.is-key .pxhw-stop__dot { left: -70px; }
.pxhw-stop__dot--end { border-color: #3FB97A; background: #3FB97A; }
.pxhw-stop.is-mig .pxhw-stop__dot { border-color: #F0A400; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--zc), 0 0 0 12px #F3F7F9; }
.pxhw-stop.is-lit .pxhw-stop__dot { background: var(--zc); transform: scale(1.06); }
.pxhw-stop.is-mig.is-lit .pxhw-stop__dot { background: #FFB81C; }
.pxhw-stop__card { position: relative; display: grid; grid-template-columns: minmax(150px, .5fr) minmax(0, 2.5fr); gap: 4px 28px; padding: 20px 24px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 20px 40px -38px rgba(8,34,56,.6); transition: opacity .35s, box-shadow .35s, border-color .35s, transform .35s; }
.pxhw-stop.is-key .pxhw-stop__card { border-left: 4px solid var(--zc); }
.pxhw-stop.is-mig .pxhw-stop__card { background: linear-gradient(135deg, #FFFBF0, #fff 55%); border-color: #F6DFA4; }
.pxhw-stop__n { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.pxhw-stop__n b { margin-right: 4px; font: 800 26px/1 var(--f-display); letter-spacing: -.02em; color: color-mix(in srgb, var(--zc) 55%, #082238); font-variant-numeric: tabular-nums; }
.pxhw-stop__card h3 { grid-column: 1; margin: 6px 0 0; font: 800 19px/1.25 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxhw-stop__card dl { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; margin: 0; }
.pxhw-stop__card dl > div:first-child { grid-column: span 1; }
.pxhw-stop__card dt { margin-bottom: 4px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pxhw-stop__card dd { margin: 0; font-size: 15px; line-height: 1.55; color: #334155; }
.pxhw-stop__card dd strong { color: #082238; }
.pxhw-tag { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #EEF5FA; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .02em; color: #0A6FA8; white-space: nowrap; }
.pxhw-tag--free { background: #E7F7EE; color: #127A45; }
.pxhw-tag--sign { background: #082238; color: #fff; }
.pxhw-tag--mig { background: #FFF1CC; color: #8A5A00; }
.pxhw-you { position: absolute; right: 14px; top: -11px; padding: 4px 10px; border-radius: 999px; background: #FFB81C; font: 800 11.5px/1.2 var(--f-body); color: #082238; opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .3s, transform .3s; pointer-events: none; }
.pxhw-steps[data-role]:not([data-role="all"]) .pxhw-stop.is-you .pxhw-you { opacity: 1; transform: none; }
.pxhw-steps[data-role]:not([data-role="all"]) .pxhw-stop.is-you .pxhw-stop__card { border-color: #FFB81C; box-shadow: 0 0 0 3px rgba(255,184,28,.28), 0 24px 44px -34px rgba(8,34,56,.6); }
.pxhw-steps[data-role]:not([data-role="all"]) .pxhw-stop:not(.is-you) .pxhw-stop__card { opacity: .45; }
.pxhw-steps[data-role]:not([data-role="all"]) .pxhw-stop:not(.is-you) .pxhw-stop__dot { transform: scale(.7); }
.pxhw-track__more { margin: 26px 0 0 78px; font: 500 15.5px/1.5 var(--f-body); color: #475569; }
.pxhw-track__more a { font-weight: 700; color: #0A6FA8; text-decoration: none; }
.pxhw-track__more a:hover { text-decoration: underline; }

.pxhw-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font: 600 14px/1.3 var(--f-body); color: #334155; }
.pxhw-legend li { display: inline-flex; align-items: center; gap: 9px; }
.pxhw-legend i { width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.pxhw-legend__x { border: 4px solid #F0A400; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #00B2A9; }
.pxhw-legend__o { border: 4px solid #00B2A9; }

/* ---------- stopper date explainer ---------- */
.pxhw-stopper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px 40px; align-items: center; margin-top: 30px; padding: 26px 28px; border-radius: 22px; background: #082238; color: #CFE0EC; }
.pxhw-stopper h3 { margin: 0 0 8px; font: 800 21px/1.25 var(--f-display); color: #fff; }
.pxhw-stopper p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.pxhw-stopper__line { position: relative; height: 128px; }
.pxhw-stopper__bar { position: absolute; left: 0; right: 0; top: 70px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.pxhw-stopper__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; border-radius: inherit; background: linear-gradient(90deg, #00A3D9, #00B2A9); }
.pxhw-stopper__pin { position: absolute; left: var(--x); top: 64px; width: 2px; height: 20px; background: #9FC0D8; }
.pxhw-stopper__pin b { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 12.5px/1 var(--f-body); color: #CFE0EC; }
.pxhw-stopper__pin:first-of-type b { left: 0; transform: none; }
.pxhw-stopper__pin--end b { left: auto; right: 0; transform: none; }
.pxhw-stopper__pin--live { background: #3FB97A; } .pxhw-stopper__pin--live b { color: #8FE0B5; }
.pxhw-stopper__pin--stop { width: 4px; height: 30px; top: 59px; background: #FFB81C; } .pxhw-stopper__pin--stop b { bottom: 50px; color: #FFB81C; font-size: 13.5px; }
.pxhw-stopper__gap { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); top: 96px; padding-top: 8px; border-top: 2px dashed rgba(255,184,28,.6); text-align: center; font: 600 11.5px/1.2 var(--f-body); color: #9FC0D8; }
.pxhw-stopper__gap--n { border-top-color: rgba(159,192,216,.5); }

/* ---------- migration routes ---------- */
.pxhw-routes { margin: 34px 0 0 78px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px dashed #BFD8E6; }
.pxhw-routes__t { margin: 0 0 12px; font: 800 17px/1.3 var(--f-display); color: #082238; }
.pxhw-routes__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxhw-routes__list a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #EFFAF8; border: 1px solid #BFE7E2; font: 600 14px/1.2 var(--f-body); color: #07605E; text-decoration: none; transition: background .2s, border-color .2s; }
.pxhw-routes__list a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid #F0A400; background: #fff; }
.pxhw-routes__list a:hover { background: #fff; border-color: #00B2A9; }
.pxhw-routes .pg-link { margin-top: 14px; }

/* ---------- documents ---------- */
.pxhw-docs__head { max-width: 780px; }
.pxhw-docs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; margin: 44px 0 0; padding: 0; list-style: none; }
.pxhw-doc h3 { margin: 6px 0 6px; font: 800 18px/1.25 var(--f-display); color: #082238; }
.pxhw-doc > p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: #334155; }
.pxhw-doc__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; font: 600 13px/1.2 var(--f-body); color: #64748B; }
.pxhw-paper { position: relative; display: flex; flex-direction: column; gap: 8px; height: 210px; padding: 16px 16px 14px; border-radius: 6px 22px 6px 6px; background: #fff; border: 1px solid #DCE7EF; box-shadow: 0 1px 0 #fff, 6px 6px 0 -1px #F3F7F9, 6px 6px 0 0 #DCE7EF, 0 30px 50px -40px rgba(8,34,56,.6); transform: rotate(-1.2deg); transition: transform .35s cubic-bezier(.3,1.3,.5,1), box-shadow .35s; overflow: hidden; }
.pxhw-doc:nth-child(even) .pxhw-paper { transform: rotate(1deg); }
.pxhw-doc:hover .pxhw-paper { transform: rotate(0) translateY(-6px); box-shadow: 0 1px 0 #fff, 6px 6px 0 -1px #F3F7F9, 6px 6px 0 0 #DCE7EF, 0 40px 60px -36px rgba(8,34,56,.6); }
.pxhw-paper::after { content: ""; position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 0 0 0 8px; background: linear-gradient(225deg, #F3F7F9 50%, #DCE7EF 50%); }
.pxhw-paper__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 800 13px/1 var(--f-display); color: #082238; }
.pxhw-paper__hd i { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #1D3F8F, #00A3D9); }
.pxhw-doc[data-on="mig"] .pxhw-paper__hd i { background: linear-gradient(135deg, #00B2A9, #3FB97A); }
.pxhw-paper__ln { height: 6px; width: 92%; border-radius: 3px; background: #E6EEF4; }
.pxhw-paper__ln.s { width: 64%; }
.pxhw-paper__box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 8px; background: #F3F7F9; }
.pxhw-paper__box i { height: 22px; border-radius: 5px; background: #fff; border: 1px solid #DCE7EF; }
.pxhw-paper__fee { align-self: flex-start; margin-top: auto; padding: 4px 8px; border: 2px solid #3FB97A; border-radius: 6px; font: 800 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #127A45; transform: rotate(-4deg); }
.pxhw-paper__sig { position: absolute; right: 18px; bottom: 18px; width: 70px; height: 22px; border-bottom: 2px solid #94A3B8; }
.pxhw-paper__sig::before { content: ""; position: absolute; left: 6px; right: 10px; bottom: 4px; height: 14px; border: 2px solid #1D3F8F; border-color: #1D3F8F transparent transparent transparent; border-radius: 50% 50% 0 0; transform: skewX(-20deg); }
.pxhw-paper__row { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 6px; }
.pxhw-paper__row i { height: 16px; border-radius: 4px; background: #EEF5FA; border: 1px solid #DCE7EF; }
.pxhw-paper__row i:last-child { background: #EFFAF8; border-color: #BFE7E2; }
.pxhw-paper__row b { height: 2px; background: #00B2A9; position: relative; }
.pxhw-paper__row b::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: #00B2A9; border-right: 0; }
.pxhw-paper__flag { align-self: flex-start; margin-top: auto; padding: 4px 8px; border-radius: 6px; background: #FFF1CC; font: 800 11px/1 var(--f-body); color: #8A5A00; }
.pxhw-paper--gantt { gap: 10px; }
.pxhw-paper__bar { position: relative; height: 14px; border-radius: 4px; background: linear-gradient(#F3F7F9, #F3F7F9); }
.pxhw-paper__bar::after { content: ""; position: absolute; left: var(--a); width: var(--w); top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #00A3D9, #00B2A9); }
.pxhw-paper__today { position: absolute; left: 46%; top: 44px; bottom: 16px; width: 2px; background: #FFB81C; }
.pxhw-paper__who { display: grid; grid-template-columns: 16px 1fr 46px; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed #DCE7EF; }
.pxhw-paper__who i { width: 16px; height: 16px; border-radius: 4px; background: #3FB97A; position: relative; }
.pxhw-paper__who i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pxhw-paper__who b { height: 6px; border-radius: 3px; background: #E6EEF4; }
.pxhw-paper__who em { height: 12px; border-bottom: 2px solid #1D3F8F; border-radius: 0 0 40% 60%; }
.pxhw-paper__who.is-owner b { background: #CFE3EE; }
.pxhw-paper__who.is-owner i { background: #082238; }
.pxhw-paper__rec { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; background: #F7FAFC; border: 1px solid #E6EEF4; }
.pxhw-paper__rec i { width: 26px; height: 26px; border-radius: 50%; background: #E0F4FB; }
.pxhw-paper__rec b { height: 6px; width: 80%; border-radius: 3px; background: #DCE7EF; }
.pxhw-paper__ok { align-self: flex-end; margin-top: auto; padding: 4px 8px; border: 2px solid #3FB97A; border-radius: 6px; font: 800 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #127A45; transform: rotate(3deg); }
.pxhw-paper__cnt { display: grid; grid-template-columns: 1fr 28px 28px 16px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #EEF3F7; }
.pxhw-paper__cnt i { height: 6px; border-radius: 3px; background: #DCE7EF; }
.pxhw-paper__cnt b { height: 10px; border-radius: 3px; background: #CFE3EE; }
.pxhw-paper__cnt b + b { background: #BFE7E2; }
.pxhw-paper__cnt em { width: 16px; height: 16px; border-radius: 50%; background: #3FB97A; position: relative; }
.pxhw-paper__cnt em::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pxhw-paper__shot { height: 58px; border-radius: 8px; background: linear-gradient(135deg, #E0F4FB, #EFFAF8); border: 1px solid #DCE7EF; position: relative; }
.pxhw-paper__shot i { position: absolute; left: 10px; top: 10px; width: 40%; height: 8px; border-radius: 3px; background: #fff; }
.pxhw-paper__vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.pxhw-paper__vids i { position: relative; height: 32px; border-radius: 6px; background: #082238; }
.pxhw-paper__vids i::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border: 6px solid transparent; border-left: 9px solid #FFB81C; border-right: 0; }

/* ---------- who signs ---------- */
.pxhw-who__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .55fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-top: 40px; }
.pxhw-who__side { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 24px 44px -40px rgba(8,34,56,.6); }
.pxhw-who__side--us { background: linear-gradient(160deg, #F2FAFE, #fff 60%); }
.pxhw-who__side h3 { margin: 0 0 14px; font: 800 20px/1.2 var(--f-display); color: #082238; }
.pxhw-who__side ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pxhw-who__side li { display: grid; gap: 3px; padding-left: 16px; border-left: 3px solid #CFE3EE; }
.pxhw-who__side b { font: 700 16px/1.3 var(--f-display); color: #082238; }
.pxhw-who__side li > span:last-child { font-size: 15px; line-height: 1.55; color: #334155; }
.pxhw-who__faces { display: flex; margin-bottom: 6px; }
.pxhw-who__faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgba(8,34,56,.4); }
.pxhw-who__faces img + img { margin-left: -12px; }
.pxhw-who__mid { position: relative; display: grid; align-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pxhw-who__mid::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(#BFD8E6 0 6px, transparent 6px 12px); }
.pxhw-who__mid li { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 10px; border-radius: 16px; background: #F3F7F9; border: 1px solid #E2E8F0; text-align: center; }
.pxhw-who__mid i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #082238; font: 800 13px/1 var(--f-display); font-style: normal; color: #FFB81C; }
.pxhw-who__mid b { font: 800 15px/1.25 var(--f-display); color: #082238; }
.pxhw-who__mid span { font-size: 13px; line-height: 1.35; color: #5B6B7F; }

/* ---------- commitments: railway tickets ---------- */
.pxhw-tickets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 44px 0 0; padding: 0; list-style: none; }
.pxhw-ticket { --notch: 12px; --ny: 112px; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 18px 20px; border-radius: 14px; background: #F7FBFD; color: #334155;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--ny), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--ny), transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 var(--ny), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--ny), transparent 98%, #000) right / 51% 100% no-repeat; }
.pxhw-ticket::after { content: ""; position: absolute; left: 16px; right: 16px; top: calc(var(--ny) - 1px); border-top: 2px dashed #CFE0EA; }
.pxhw-ticket__no { font: 800 12px/1 var(--f-body); letter-spacing: .14em; color: #0A6FA8; }
.pxhw-ticket b { min-height: 2.5em; font: 800 18px/1.25 var(--f-display); color: #082238; }
.pxhw-ticket > span:last-child { margin-top: 30px; font-size: 14.5px; line-height: 1.5; }
.pxhw-ticket--mig { background: #FFF6DD; }
.pxhw-ticket--mig .pxhw-ticket__no { color: #8A5A00; }
.pxhw-ticket--mig::after { border-top-color: #F0D58C; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pxhw-stop__card { grid-template-columns: 1fr; }
  .pxhw-stop__card dl { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .pxhw-docs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pxhw-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pxhw-hero .pxhw-hero__grid { grid-template-columns: 1fr; }
  .pxhw-rail { max-width: 620px; }
  .pxhw-stopper { grid-template-columns: 1fr; }
  .pxhw-who__grid { grid-template-columns: 1fr; }
  .pxhw-who__mid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pxhw-who__mid::before { left: 4px; right: 4px; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; background: repeating-linear-gradient(90deg, #BFD8E6 0 6px, transparent 6px 12px); }
  .pxhw-docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pxhw-stop__card dl { grid-template-columns: 1fr; gap: 10px; }
  .pxhw-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxhw-who__mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxhw-who__mid::before { display: none; }
  .pxhw-bar { padding: 18px; }
  .pxhw-switch--mini { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .pxhw-switch { grid-template-columns: 1fr; }
  .pxhw-switch--mini { grid-template-columns: 1fr 1fr; }
  .pxhw-switch--mini .pxhw-switch__b > span { flex-direction: column; gap: 4px; }
  .pxhw-metro { padding-left: 46px; }
  .pxhw-metro__rail { left: 13px; width: 8px; }
  .pxhw-stop__dot { left: -43px; width: 26px; height: 26px; border-width: 5px; }
  .pxhw-stop.is-key .pxhw-stop__dot { left: -46px; }
  .pxhw-stop.is-mig .pxhw-stop__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--zc), 0 0 0 9px #F3F7F9; }
  .pxhw-stop__card { padding: 18px 16px; }
  .pxhw-track__more, .pxhw-routes { margin-left: 0; }
  .pxhw-docs__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; margin-right: -16px; padding: 10px 16px 18px 4px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .pxhw-doc { scroll-snap-align: start; }
  .pxhw-paper { height: 180px; }
  .pxhw-tickets { grid-template-columns: 1fr; }
  .pxhw-ticket { --ny: 80px; }
  .pxhw-ticket b { min-height: 0; }
  .pxhw-ticket > span:last-child { margin-top: 22px; }
  .pxhw-stopper { padding: 22px 18px; }
  .pxhw-stopper__pin b { font-size: 11px; }
  .pxhw-stopper__pin--stop b { font-size: 12px; }
  .pxhw-stopper__gap { font-size: 10.5px; }
  .pxhw-rail__card { padding: 14px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pxhw-switch__b, .pxhw-stop__dot, .pxhw-stop__card, .pxhw-paper, .pxhw-you, .pxhw-rail__line { transition: none; }
  .pxhw-js .pxhw-metro__rail i { transform: scaleY(1); }
}