/* Utility-scale solar (/solar/utility-scale/). Every class is scoped with .pss-uti- (extra: crm, mid, p-solar-utility-scale). */
.pss-uti { --pu-ink: #082238; --pu-body: #334155; --pu-muted: #526072; --pu-line: #E2E8F0; --pu-paper: #F3F7F9; --pu-link: #0A6FA8; --pu-amber: #FFB81C; --pu-amber-ink: #7A4100; --pu-green: #166534; }

/* ---------- 1. hero: parcel map ---------- */
.pss-uti-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.pss-uti-map { margin: 0; position: relative; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -40px rgba(8,34,56,.45), 0 0 0 1px rgba(8,34,56,.05); }
.pss-uti-map__bar { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; border-bottom: 1px solid var(--pu-line); font: 700 13.5px/1.2 var(--f-body); color: var(--pu-ink); }
.pss-uti-map__bar em { margin-left: auto; font: 700 11px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; font-style: normal; color: var(--pu-amber-ink); background: #FFF4D6; padding: 4px 8px; border-radius: 99px; }
.pss-uti-map__box { position: relative; margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--pu-line); }
.pss-uti-map__svg { display: block; width: 100%; height: auto; }
.pss-uti-map__road { fill: none; stroke: #CBD5E1; stroke-width: 7; stroke-linecap: round; }
.pss-uti-map__parcel { fill: #FFFFFF; fill-opacity: .7; stroke: #8796A8; stroke-width: 1.6; stroke-dasharray: 5 4; transition: fill .5s, stroke .5s; }
.pss-uti-map__parcel.is-opt, .pss-uti-map:not(.pss-uti-map--play) .pss-uti-map__parcel:not([data-p="C"]) { fill: #FFF1CC; fill-opacity: 1; stroke: #B7791F; stroke-dasharray: none; }
.pss-uti-map__parcel.is-x, .pss-uti-map:not(.pss-uti-map--play) .pss-uti-map__parcel[data-p="C"] { fill: #EEF2F6; stroke: #8796A8; }
.pss-uti-map__buffer { fill: url(#pssUtiHatch); opacity: .55; transition: opacity .5s; }
.pss-uti-map__creek { fill: none; stroke: #2B8CC4; stroke-width: 3; stroke-linecap: round; }
.pss-uti-map__setback { fill: none; stroke: #B7791F; stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .5s; }
.pss-uti-map__rows rect { fill: #1D3F8F; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; transform-box: fill-box; transform-origin: left center; }
.pss-uti-map__rows rect:nth-child(even) { fill: #0A6FA8; }
.pss-uti-map__tie { fill: none; stroke: #0F766E; stroke-width: 2.4; stroke-dasharray: 6 4; transition: opacity .5s; }
.pss-uti-map__sub rect { fill: #082238; } .pss-uti-map__sub path { fill: none; stroke: #FFB81C; stroke-width: 2; stroke-linejoin: round; }
.pss-uti-map__lbl { font: 700 11px/1 var(--f-body, Inter, sans-serif); fill: #3B4A5C; }
.pss-uti-map__lbl--x { fill: #0B5583; }
.pss-uti-map__chip { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px 12px; border-radius: 12px; background: #082238; color: #fff; font: 600 12.5px/1.3 var(--f-body); box-shadow: 0 14px 26px -16px rgba(8,34,56,.8); max-width: calc(100% - 24px); }
.pss-uti-map__chip > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--pu-amber); box-shadow: 0 0 0 4px rgba(255,184,28,.25); }
.pss-uti-map__chip b { display: block; font: 700 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #FFD979; }
.pss-uti-map__chip.is-tick > i { animation: pssUtiPing .6s ease-out; }
@keyframes pssUtiPing { 0% { box-shadow: 0 0 0 0 rgba(255,184,28,.7); } 100% { box-shadow: 0 0 0 12px rgba(255,184,28,0); } }
.pss-uti-map__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; padding: 0; font: 600 12.5px/1.3 var(--f-body); color: var(--pu-body); }
.pss-uti-map__legend li { display: flex; align-items: center; gap: 6px; transition: opacity .4s; }
.pss-uti-map__legend i { width: 12px; height: 12px; border-radius: 3px; }
.pss-uti-map__legend .is-opt { background: #FFF1CC; border: 1.5px solid #B7791F; }
.pss-uti-map__legend .is-x { background: #EEF2F6; border: 1.5px solid #8796A8; }
.pss-uti-map__legend .is-row { background: #1D3F8F; }
.pss-uti-map__foot { display: flex; align-items: center; gap: 7px; margin: 10px 2px 0; padding-top: 10px; border-top: 1px solid var(--pu-line); font: 600 13px/1.3 var(--f-body); color: var(--pu-ink); }
.pss-uti-map__foot span { flex: 1; min-width: 0; }
.pss-uti-map__replay { flex: none; min-height: 32px; padding: 6px 12px; border: 1px solid #A8B8C6; border-radius: 99px; background: #fff; font: 600 12.5px/1 var(--f-body); color: var(--pu-ink); cursor: pointer; }
.pss-uti-map__replay:hover { border-color: var(--pu-link); }
.pss-uti-map__replay:focus-visible { outline: 2px solid var(--pu-link); outline-offset: 2px; }
/* play mode: pieces wait for their stage */
.pss-uti-map--play .pss-uti-map__setback, .pss-uti-map--play .pss-uti-map__tie, .pss-uti-map--play .pss-uti-map__buffer { opacity: 0; }
.pss-uti-map--play .pss-uti-map__rows rect { transform: scaleX(0); }
.pss-uti-map--play .pss-uti-map__legend li { opacity: .3; }
.pss-uti-map--play.is-s1 .pss-uti-map__legend li[data-s="1"],
.pss-uti-map--play.is-s2 .pss-uti-map__legend li[data-s="2"],
.pss-uti-map--play.is-s3 .pss-uti-map__legend li[data-s="3"] { opacity: 1; }
.pss-uti-map--play.is-s2 .pss-uti-map__setback { opacity: 1; }
.pss-uti-map--play.is-s2 .pss-uti-map__buffer { opacity: .55; }
.pss-uti-map--play.is-s3 .pss-uti-map__rows rect { transform: none; }
.pss-uti-map--play.is-s4 .pss-uti-map__tie { opacity: 1; }
.pss-uti-map__rows rect:nth-child(2) { transition-delay: .06s; } .pss-uti-map__rows rect:nth-child(3) { transition-delay: .12s; } .pss-uti-map__rows rect:nth-child(4) { transition-delay: .18s; } .pss-uti-map__rows rect:nth-child(5) { transition-delay: .24s; } .pss-uti-map__rows rect:nth-child(6) { transition-delay: .3s; } .pss-uti-map__rows rect:nth-child(7) { transition-delay: .36s; }
@media (max-width: 980px) { .pss-uti-hero__grid { grid-template-columns: 1fr; } .pss-uti-map { max-width: 620px; } }
@media (max-width: 480px) { .pss-uti-map { padding: 10px; } .pss-uti-map__chip { font-size: 12px; padding: 6px 10px; } }

/* ---------- 2. covers ---------- */
.pss-uti-cov__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pss-uti-facts { margin: 0; padding: 6px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--pu-line); box-shadow: 0 30px 60px -48px rgba(8,34,56,.5); }
.pss-uti-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pu-line); }
.pss-uti-facts > div:last-child { border-bottom: 0; }
.pss-uti-facts dt { font: 700 12px/1.4 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pu-link); }
.pss-uti-facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--pu-body); }
@media (max-width: 900px) { .pss-uti-cov__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pss-uti-facts { padding: 4px 16px; } .pss-uti-facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 3. scoreboard tweaks ---------- */
.pss-uti-score { margin-top: 28px; }

/* ---------- 4. J7 route line scroll-story ---------- */
.pss-uti-rt { padding: 0; overflow-x: clip; }
.pss-uti-rt__stage { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.pss-uti-rt__head .pg-answer { margin-bottom: 0; }
.pss-uti-rt__steps, .pss-uti-rt__bar { display: none; }
.pss-uti-rt__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 32px; }
.pss-uti-rt__mapbox { position: sticky; top: 104px; margin: 0; }
.pss-uti-rt__svg { display: block; width: 100%; height: auto; border-radius: 22px; background: #F4F8F3; box-shadow: 0 30px 60px -44px rgba(8,34,56,.5), 0 0 0 1px rgba(8,34,56,.06); }
.pss-uti-rt__topo { fill: none; stroke: #D5E3D2; stroke-width: 1.4; }
.pss-uti-rt__river { fill: none; stroke: #BFDDF0; stroke-width: 8; stroke-linecap: round; }
.pss-uti-rt__base { fill: none; stroke: #C9D3CF; stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; }
.pss-uti-rt__seg { fill: none; stroke: #0A6FA8; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); }
.pss-uti-rt__stop circle { fill: #082238; stroke: #fff; stroke-width: 3; transition: fill .4s, r .4s; }
.pss-uti-rt__stop text { font: 800 13px/1 var(--f-display, Manrope, sans-serif); fill: #fff; text-anchor: middle; }
.pss-uti-rt__name { font: 700 13px/1 var(--f-body, Inter, sans-serif); fill: #1E293B; text-anchor: middle; paint-order: stroke; stroke: #F4F8F3; stroke-width: 4px; stroke-linejoin: round; }
.pss-uti-rt__art .lnd { fill: #E7DCC0; } .pss-uti-rt__art .pole { stroke: #475569; stroke-width: 2.5; fill: none; }
.pss-uti-rt__art .flag { fill: #FFB81C; } .pss-uti-rt__art .ntp { fill: #15803D; } .pss-uti-rt__art .ntpt { font: 800 9px/1 var(--f-body, Inter, sans-serif); fill: #fff; }
.pss-uti-rt__art .doc { fill: #fff; stroke: #64748B; stroke-width: 1.5; } .pss-uti-rt__art .ln { stroke: #94A3B8; stroke-width: 2; fill: none; }
.pss-uti-rt__art .stamp { fill: none; stroke: #B42318; stroke-width: 3; } .pss-uti-rt__art .tick { fill: none; stroke: #B42318; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pss-uti-rt__art .crane { fill: none; stroke: #B7791F; stroke-width: 3.5; stroke-linecap: round; }
.pss-uti-rt__art .row { fill: #1D3F8F; } .pss-uti-rt__art .tower { fill: none; stroke: #475569; stroke-width: 2.5; } .pss-uti-rt__art .wire { fill: none; stroke: #475569; stroke-width: 1.5; }
.pss-uti-rt__art .glow { fill: rgba(255,184,28,.22); }
.pss-uti-rt__art { transition: opacity .5s, transform .5s cubic-bezier(.3,1.5,.5,1); transform-box: fill-box; transform-origin: center bottom; }
.pss-uti-rt__tag { position: absolute; right: 14px; top: 12px; margin: 0; padding: 4px 9px; border-radius: 99px; background: #FFF4D6; font: 700 11px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pu-amber-ink); }
.pss-uti-rt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pss-uti-rt__st { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 30px 60px -46px rgba(8,34,56,.45); border-left: 5px solid #0A6FA8; }
.pss-uti-rt__k { margin: 0 0 6px; font: 700 12px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: #0A6FA8; }
.pss-uti-rt__st h3 { margin: 0 0 10px; font: 700 clamp(20px, 1rem + .6vw, 24px)/1.22 var(--f-display); letter-spacing: -.02em; color: var(--pu-ink); }
.pss-uti-rt__st > p:not([class]) { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--pu-body); }
.pss-uti-rt__st > p:not([class]) b { display: block; margin-bottom: 2px; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pu-muted); }
.pss-uti-rt__apps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.pss-uti-rt__apps a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 11px 6px 7px; border-radius: 99px; background: var(--pu-paper); border: 1px solid var(--pu-line); font: 600 13px/1 var(--f-body); color: var(--pu-ink); text-decoration: none; transition: border-color .2s, background-color .2s; }
.pss-uti-rt__apps a:hover { border-color: #0A6FA8; background: #fff; }
.pss-uti-rt__apps a:focus-visible, .pss-uti-rt__steps button:focus-visible { outline: 2px solid #0A6FA8; outline-offset: 2px; }
.pss-uti-rt__note { color: var(--pu-muted); }
@media (max-width: 900px) { .pss-uti-rt__grid { grid-template-columns: 1fr; } .pss-uti-rt__mapbox { position: relative; top: 0; } }
/* live mode (JS adds .pss-uti-rt--live at >= 900 x 600 without reduced motion) */
.pss-uti-rt--live .pss-uti-rt__track { height: calc(100vh + 6 * 52vh); position: relative; }
.pss-uti-rt--live .pss-uti-rt__stage { position: sticky; top: 0; height: 100vh; min-height: 600px; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; padding-bottom: 20px; }
.pss-uti-rt--live .pg-h2 { font-size: clamp(26px, 1rem + 1.2vw, 36px); margin-bottom: 8px; max-width: none; }
.pss-uti-rt--live .pss-uti-rt__head .hp-kick { margin-bottom: 8px; }
.pss-uti-rt--live .pg-answer { font-size: 16px; line-height: 1.55; max-width: 96ch; }
.pss-uti-rt--live .pss-uti-rt__steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.pss-uti-rt__steps button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px 4px 4px; border: 1px solid #C5D3DE; border-radius: 99px; background: #fff; font: 600 13px/1.2 var(--f-body); white-space: nowrap; color: var(--pu-ink); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.pss-uti-rt__steps button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pu-paper); font: 800 12px/1 var(--f-display); color: var(--pu-ink); }
.pss-uti-rt__steps button.is-past span { background: #0A6FA8; color: #fff; }
.pss-uti-rt__steps button[aria-current="step"] { background: var(--pu-ink); border-color: var(--pu-ink); color: #fff; }
.pss-uti-rt__steps button[aria-current="step"] span { background: var(--pu-amber); color: var(--pu-ink); }
.pss-uti-rt--live .pss-uti-rt__grid { margin-top: 16px; align-items: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.pss-uti-rt--live .pss-uti-rt__mapbox { position: relative; top: auto; }
.pss-uti-rt--live .pss-uti-rt__svg { max-height: calc(100vh - 380px); min-height: 220px; width: 100%; }
.pss-uti-rt--live .pss-uti-rt__list { display: grid; }
.pss-uti-rt--live .pss-uti-rt__st { grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .2s, transform .2s; }
.pss-uti-rt--live .pss-uti-rt__st.is-on { opacity: 1; pointer-events: auto; transform: none; transition: opacity .35s .2s, transform .4s .2s cubic-bezier(.2,.8,.2,1); }
.pss-uti-rt--live .pss-uti-rt__seg { stroke-dashoffset: 1; }
.pss-uti-rt--live .pss-uti-rt__seg.is-done { stroke-dashoffset: 0; }
.pss-uti-rt--live .pss-uti-rt__art { opacity: 0; transform: translateY(8px) scale(.85); }
.pss-uti-rt--live .pss-uti-rt__art.is-done { opacity: 1; transform: none; }
.pss-uti-rt--live .pss-uti-rt__stop circle { fill: #A3B1BF; }
.pss-uti-rt--live .pss-uti-rt__stop.is-done circle { fill: #0A6FA8; }
.pss-uti-rt--live .pss-uti-rt__stop.is-on circle { fill: #082238; stroke: #FFB81C; stroke-width: 4; }
.pss-uti-rt--live .pss-uti-rt__stop text { fill: #082238; } .pss-uti-rt--live .pss-uti-rt__stop.is-done text, .pss-uti-rt--live .pss-uti-rt__stop.is-on text { fill: #fff; }
.pss-uti-rt--live .pss-uti-rt__foot { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.pss-uti-rt--live .pss-uti-rt__bar { display: flex; gap: 4px; flex: none; width: min(320px, 34%); }
.pss-uti-rt__bar i { flex: 1; height: 5px; border-radius: 99px; background: #D5DEE6; transition: background-color .3s; }
.pss-uti-rt__bar i.on { background: #0A6FA8; }
.pss-uti-rt--live .pss-uti-rt__note { margin: 0; font-size: 13.5px; }
@media (max-height: 780px) {
  .pss-uti-rt--live .pss-uti-rt__head .hp-kick { display: none; }
  .pss-uti-rt--live .pg-h2 { font-size: clamp(24px, 1rem + 1vw, 30px); }
  .pss-uti-rt--live .pg-answer { font-size: 15px; }
  .pss-uti-rt--live .pss-uti-rt__steps { margin-top: 10px; }
  .pss-uti-rt--live .pss-uti-rt__grid { margin-top: 10px; }
  .pss-uti-rt--live .pss-uti-rt__svg { max-height: 38vh; }
  .pss-uti-rt--live .pss-uti-rt__st { padding: 16px 18px; }
  .pss-uti-rt--live .pss-uti-rt__st > p:not([class]) { font-size: 14.5px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pss-uti-rt__seg, .pss-uti-rt__art, .pss-uti-rt__st, .pss-uti-map *, .pss-uti-gate__card { transition: none !important; animation: none !important; } }

/* ---------- 5. apps ---------- */
.pss-uti-apps__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.pss-uti-apps__col { padding: 22px; border-radius: 22px; background: var(--pu-paper); border: 1px solid var(--pu-line); }
.pss-uti-apps__h { margin: 0 0 14px; font: 700 12.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pu-link); }
.pss-uti-apps__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pss-uti-apps__col li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 34px -30px rgba(8,34,56,.5); scroll-margin-top: 110px; }
.pss-uti-apps__col h3 { margin: 0 0 4px; font: 700 17px/1.3 var(--f-display); color: var(--pu-ink); }
.pss-uti-apps__col h3 a { color: inherit; text-decoration: none; background: linear-gradient(var(--pu-amber), var(--pu-amber)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.pss-uti-apps__col h3 a:hover, .pss-uti-apps__col h3 a:focus-visible { background-size: 100% 2px; }
.pss-uti-apps__col p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pu-body); }
@media (max-width: 860px) { .pss-uti-apps__cols { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pss-uti-apps__col { padding: 14px; } }

/* ---------- 6. stage-gate board (dark band) ---------- */
.pss-uti-gate__ui { margin-top: 30px; padding: clamp(16px, 2.4vw, 28px); border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pss-uti-gate__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.pss-uti-gate__role { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.pss-uti-gate__role legend { width: 100%; margin-bottom: 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: #CFE0EC; }
.pss-uti-gate__role label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); font: 600 14px/1.2 var(--f-body); color: #fff; cursor: pointer; }
.pss-uti-gate__role input { width: 22px; height: 22px; margin: 0; accent-color: #FFB81C; }
.pss-uti-gate__role label:has(input:checked) { background: #fff; color: #082238; border-color: #fff; }
.pss-uti-gate__nav { display: flex; gap: 8px; }
.pss-uti-gate__btn { min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font: 600 14px/1 var(--f-body); cursor: pointer; }
.pss-uti-gate__btn:hover { background: rgba(255,255,255,.1); }
.pss-uti-gate__btn:disabled { opacity: .45; cursor: default; }
.pss-uti-gate__btn:focus-visible, .pss-uti-gate__col:focus-visible, .pss-uti-gate__card:focus-visible, .pss-uti-gate__role label:has(input:focus-visible) { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pss-uti-gate__cols { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.pss-uti-gate__col { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.04); color: #E2EDF5; font: 700 14px/1.2 var(--f-body); text-align: left; cursor: pointer; transition: background-color .3s, border-color .3s; }
.pss-uti-gate__col span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); font: 800 12.5px/1 var(--f-display); color: #fff; }
.pss-uti-gate__cols li.is-past .pss-uti-gate__col { border-style: solid; border-color: rgba(95,211,243,.45); }
.pss-uti-gate__cols li.is-past .pss-uti-gate__col span { background: #5FD3F3; color: #082238; }
.pss-uti-gate__cols li.is-here .pss-uti-gate__col { border-style: solid; border-color: #FFB81C; background: rgba(255,184,28,.12); color: #fff; }
.pss-uti-gate__cols li.is-here .pss-uti-gate__col span { background: #FFB81C; color: #082238; }
.pss-uti-gate__cols li.is-over .pss-uti-gate__col { background: rgba(255,184,28,.2); }
.pss-uti-gate__lane { position: relative; height: 88px; margin: 8px 0 18px; border-radius: 16px; background: rgba(255,255,255,.04); }
.pss-uti-gate__card { --g: 0; position: absolute; top: 6px; left: calc(var(--g) * (100% + 8px) / 6); width: calc((100% - 40px) / 6); min-height: 76px; box-sizing: border-box; padding: 10px 12px 10px 22px; border-radius: 14px; background: #fff; color: #082238; box-shadow: 0 20px 34px -18px rgba(0,0,0,.6); cursor: grab; touch-action: none; user-select: none; transition: left .4s cubic-bezier(.2,.8,.2,1), transform .2s; }
.pss-uti-gate__card.is-drag { cursor: grabbing; transition: none; transform: rotate(-2deg) scale(1.03); z-index: 2; }
.pss-uti-gate__grip { position: absolute; left: 8px; top: 12px; bottom: 12px; width: 6px; background: radial-gradient(circle, #8796A8 1.3px, transparent 1.6px) 0 0 / 6px 6px; }
.pss-uti-gate__card b { display: block; font: 800 13.5px/1.25 var(--f-display); }
.pss-uti-gate__card small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--f-body); color: var(--pu-muted); }
.pss-uti-gate__card em { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 99px; background: #FFF4D6; font: 700 11px/1.3 var(--f-body); font-style: normal; color: var(--pu-amber-ink); }
.pss-uti-gate__out { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px 28px; padding: 22px; border-radius: 20px; background: #fff; color: var(--pu-body); }
.pss-uti-gate__flag { grid-column: 1 / -1; margin: 0; font: 700 11px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pu-amber-ink); }
.pss-uti-gate__h { grid-column: 1 / -1; margin: 4px 0 8px; font: 700 20px/1.25 var(--f-display); color: var(--pu-ink); }
.pss-uti-gate__docs { grid-column: 1; grid-row: 3 / span 4; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.pss-uti-gate__docs label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--pu-paper); border: 1px solid var(--pu-line); font: 500 15px/1.4 var(--f-body); color: var(--pu-ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
.pss-uti-gate__docs input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: #0A6FA8; }
.pss-uti-gate__docs label:has(input:checked) { background: #E8F5FC; border-color: #9FD8EE; }
.pss-uti-gate__docs label:has(input:focus-visible) { outline: 2px solid #0A6FA8; outline-offset: 2px; }
.pss-uti-gate__state { grid-column: 2; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--pu-paper); font: 600 14.5px/1.45 var(--f-body); color: var(--pu-ink); }
.pss-uti-gate__state.is-ready { background: #DCFCE7; color: #14532D; }
.pss-uti-gate__warn { grid-column: 2; margin: 0; padding: 10px 14px; border-radius: 12px; background: #FFF4D6; font: 500 14px/1.45 var(--f-body); color: #5B3A00; }
.pss-uti-gate__warn[hidden] { display: none; }
.pss-uti-gate__apps { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pss-uti-gate__apps span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: var(--pu-paper); border: 1px solid var(--pu-line); font: 600 13px/1 var(--f-body); color: var(--pu-ink); }
.pss-uti-gate__send { grid-column: 2; display: grid; gap: 8px; align-content: start; }
.pss-uti-gate__send .btn { justify-self: start; }
.pss-uti-gate__send > span { font-size: 13.5px; line-height: 1.45; color: var(--pu-muted); }
@media (max-width: 960px) {
  .pss-uti-gate__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pss-uti-gate__lane { height: auto; background: none; margin: 12px 0 16px; }
  .pss-uti-gate__card { position: relative; top: 0; left: 0 !important; width: 100%; cursor: default; }
  .pss-uti-gate__out { grid-template-columns: 1fr; }
  .pss-uti-gate__docs, .pss-uti-gate__state, .pss-uti-gate__warn, .pss-uti-gate__apps, .pss-uti-gate__send { grid-column: 1; grid-row: auto; }
  .pss-uti-gate__docs { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .pss-uti-gate__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pss-uti-gate__col { font-size: 13px; padding: 8px; }
  .pss-uti-gate__nav { width: 100%; } .pss-uti-gate__btn { flex: 1; padding: 8px 10px; }
  .pss-uti-gate__out { padding: 16px; }
}

/* ---------- 7. records ---------- */
.pss-uti-rec__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pss-uti-rec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pss-uti-rec__list li { display: grid; grid-template-columns: 170px 90px minmax(0, 1fr); gap: 4px 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--pu-line); }
.pss-uti-rec__list h3 { grid-row: span 2; margin: 0; font: 700 17px/1.3 var(--f-display); color: var(--pu-ink); }
.pss-uti-rec__list p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pu-body); }
.pss-uti-rec__k { font: 700 11.5px/1.5 var(--f-body) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--pu-muted) !important; padding-top: 1px; }
@media (max-width: 1100px) { .pss-uti-rec__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pss-uti-rec__list li { grid-template-columns: 1fr; } .pss-uti-rec__list h3 { grid-row: auto; margin-bottom: 4px; } .pss-uti-rec__k { padding-top: 6px; } }

/* ---------- 8. road ---------- */
.pss-uti-road { margin-top: 30px; }

/* ---------- 9. licence ---------- */
.pss-uti-lic__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pss-uti-lic__sheet { padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--pu-line); box-shadow: 0 30px 60px -46px rgba(8,34,56,.5); }
.pss-uti-lic__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--pu-ink); }
.pss-uti-lic__h b { font: 800 17px/1.2 var(--f-display); color: var(--pu-ink); }
.pss-uti-lic__h span { font: 600 12.5px/1.2 var(--f-body); color: var(--pu-muted); }
.pss-uti-lic__sheet ul { list-style: none; margin: 0; padding: 0; }
.pss-uti-lic__sheet li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--pu-line); font-size: 15px; color: var(--pu-body); }
.pss-uti-lic__sheet li:last-child { border-bottom: 0; }
.pss-uti-lic__sheet li b { font: 700 15px/1.2 var(--f-body); color: var(--pu-ink); white-space: nowrap; }
.pss-uti-lic__sheet li.is-one { background: #F0F8FC; margin: 0 -10px; padding: 10px; border-radius: 10px; border-bottom: 0; }
.pss-uti-lic__sheet li.is-one + li.is-one { margin-top: 4px; }
@media (max-width: 900px) { .pss-uti-lic__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .pss-uti-lic__sheet { padding: 16px; } .pss-uti-lic__sheet li { grid-template-columns: 24px minmax(0, 1fr); } .pss-uti-lic__sheet li b { grid-column: 2; } }

/* ---------- 10. packages + start ---------- */
.pss-uti-pk__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pss-uti-pk__card { position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--pu-line); box-shadow: 0 30px 60px -48px rgba(8,34,56,.5); }
.pss-uti-pk__card.is-pick { border: 2px solid #0A6FA8; }
.pss-uti-pk__flag { position: absolute; top: -13px; left: 20px; margin: 0; padding: 5px 11px; border-radius: 99px; background: var(--pu-amber); font: 700 12px/1 var(--f-body); color: var(--pu-ink); }
.pss-uti-pk__gates { display: flex; gap: 4px; margin: 0 0 14px; }
.pss-uti-pk__gates i { flex: 1; height: 7px; border-radius: 99px; background: #E2E8F0; }
.pss-uti-pk__gates i.on { background: linear-gradient(90deg, #1D3F8F, #00A3D9); }
.pss-uti-pk__card h3 { margin: 0 0 4px; font: 700 21px/1.25 var(--f-display); color: var(--pu-ink); }
.pss-uti-pk__for { margin: 0 0 12px; font: 600 14px/1.45 var(--f-body); color: var(--pu-link); }
.pss-uti-pk__card ul { margin: 0 0 14px; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--pu-body); }
.pss-uti-pk__fee { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--pu-line); font-size: 14px; line-height: 1.5; color: var(--pu-muted); }
.pss-uti-start { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 48px); margin-top: 44px; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--pu-paper); }
.pss-uti-start .pg-h3 { margin: 0 0 8px; }
.pss-uti-start p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--pu-body); }
.pss-uti-start__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pss-uti-start__list li { padding: 16px; border-radius: 16px; background: #fff; }
.pss-uti-start__list span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; background: var(--pu-ink); color: #fff; font: 800 13px/1 var(--f-display); }
.pss-uti-start__list b { display: block; margin-bottom: 4px; font: 700 16px/1.3 var(--f-display); color: var(--pu-ink); }
.pss-uti-start__list p { margin: 0; font-size: 14.5px; }
@media (max-width: 980px) { .pss-uti-pk__list { grid-template-columns: 1fr; gap: 24px; } .pss-uti-start { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pss-uti-start__list { grid-template-columns: 1fr; } }

/* ---------- 11. proof ---------- */
.pss-uti-proof__card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(20px, 3vw, 34px); border-radius: 24px; background: #fff; border: 1px solid var(--pu-line); box-shadow: 0 30px 60px -48px rgba(8,34,56,.5); }
.pss-uti-proof__logo { width: 100%; max-width: 200px; height: auto; }
.pss-uti-proof__k { margin: 0 0 6px; font: 700 12px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pu-link); }
.pss-uti-proof__card .pg-h3 { margin: 0 0 8px; }
.pss-uti-proof__card p:not([class]) { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--pu-body); }
.pss-uti-proof__card .pg-link { display: inline-block; margin-top: 14px; }
@media (max-width: 640px) { .pss-uti-proof__card { grid-template-columns: 1fr; } .pss-uti-proof__logo { max-width: 150px; } }