/* Construction & home services industry landing only. Every class is scoped with .pic- (loaded via extra: crm, p-ind-construction-home-services). */
:root { --pic-ink: #082238; --pic-body: #334155; --pic-muted: #64748B; --pic-line: #E2E8F0; --pic-paper: #F3F7F9; --pic-link: #0A6FA8; --pic-orange: #C2410C; --pic-amber: #FFB81C; --pic-green: #1E9E62; --pic-kraft: #FBF6EC; }

/* ---------- 1. hero: service map + flipping cards ---------- */
.pic-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.pic-hero .pg-h1 { max-width: 19ch; font-size: clamp(34px, 1.1rem + 2.5vw, 52px); }
.pic-hero .pg-lead { font-size: 17px; }

.pic-map { position: relative; margin: 0; padding: 18px; border-radius: 26px; background: rgba(255,255,255,.88); border: 1px solid var(--pic-line); box-shadow: 0 50px 90px -50px rgba(8,34,56,.5), 0 14px 30px -24px rgba(8,34,56,.3); }
.pic-map__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 4px 12px; }
.pic-map__top b { font: 800 15px/1.2 var(--f-display); color: var(--pic-ink); }
.pic-map__top span { font-size: 12.5px; color: var(--pic-muted); }
.pic-map__top em, .pic-ticket__tag, .pic-board__top em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: #FFF4D6; color: #8A5A00; }
.pic-map__canvas { position: relative; border-radius: 18px; overflow: hidden; background: #EEF3F1; box-shadow: inset 0 0 0 1px #DCE6E2; }
.pic-map__svg { display: block; width: 100%; height: auto; }
.pic-map__blocks rect { fill: #fff; stroke: #DCE6E2; stroke-width: 1; }
.pic-map__park { fill: #DDF1E4; }
.pic-map__roads path { fill: none; stroke: #CBD8DE; stroke-width: 7; stroke-linecap: round; }
.pic-map__route { fill: none; stroke: var(--pic-ink); stroke-width: 2.4; stroke-dasharray: 5 6; stroke-linecap: round; stroke-linejoin: round; opacity: .18; transition: opacity .4s; }
.pic-map__route.is-live { opacity: .65; }
.pic-map__yard rect { fill: var(--pic-ink); }
.pic-map__yard text { fill: #fff; font: 800 8px/1 var(--f-body, sans-serif); letter-spacing: .08em; text-anchor: middle; }
.pic-pin__dot { fill: #94A3B8; transition: fill .4s; }
.pic-pin__ring { fill: none; stroke: #94A3B8; stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; }
.pic-pin.is-done .pic-pin__dot { fill: var(--pic-green); }
.pic-pin.is-done .pic-pin__ring { stroke: var(--pic-green); animation: pic-ping 1.6s ease-out 2; }
@keyframes pic-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.pic-van rect { fill: var(--c); stroke: #fff; stroke-width: 1.6; }
.pic-van text { fill: #fff; font: 800 8.5px/1 var(--f-body, sans-serif); text-anchor: middle; }
.pic-map__lbl { position: absolute; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.92); font: 600 11px/1.4 var(--f-body); color: var(--pic-muted); white-space: nowrap; pointer-events: none; }

.pic-flip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; perspective: 900px; }
.pic-flip__card { min-width: 0; }
.pic-flip__in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.5,.05,.25,1); }
.pic-flip__card.is-flipped .pic-flip__in { transform: rotateY(180deg); }
.pic-flip__face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: 14px; background: #fff; border: 1px solid var(--pic-line); border-top: 3px solid var(--c); backface-visibility: hidden; -webkit-backface-visibility: hidden; min-width: 0; box-shadow: 0 16px 30px -24px rgba(8,34,56,.55); }
.pic-flip__face--back { transform: rotateY(180deg); background: #F2FBF6; border-top-color: var(--pic-green); }
.pic-flip__face small { font-size: 10.5px; color: var(--pic-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pic-flip__face b { font: 700 13px/1.25 var(--f-display); color: var(--pic-ink); }
.pic-flip__amt { font: 800 17px/1.2 var(--f-display); color: var(--pic-ink); font-variant-numeric: tabular-nums; }
.pic-flip__amt em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--pic-muted); }
.pic-flip__face i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--c); }
.pic-flip__face--back i { color: var(--pic-green); }
.pic-replay { margin-top: 12px; padding: 7px 12px; border: 1px solid var(--pic-line); border-radius: 99px; background: #fff; font: 600 12.5px/1 var(--f-body); color: var(--pic-link); cursor: pointer; }
.pic-replay:hover { border-color: #00A3D9; }

/* ---------- 2. which one are you ---------- */
.pic-who__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.pic-who__card a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--pic-line); text-decoration: none; color: var(--pic-body); transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; }
.pic-who__card a::after { content: "→"; position: absolute; right: 22px; top: 24px; font: 700 18px/1 var(--f-display); color: var(--c); transition: transform .25s; }
.pic-who__card a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: 0 30px 50px -36px rgba(8,34,56,.5); }
.pic-who__card a:hover::after { transform: translateX(4px); }
.pic-who__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bg); }
.pic-who__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pic-who__card b { font: 700 19px/1.25 var(--f-display); color: var(--pic-ink); padding-right: 24px; }
.pic-who__card span { font-size: 15.5px; line-height: 1.55; }
.pic-who__card em { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--pic-line); font-style: normal; font-size: 13px; color: var(--pic-muted); }
.pic-who__more { margin: 22px 0 0; font-size: 15px; color: var(--pic-muted); }
.pic-who__more a { color: var(--pic-link); font-weight: 600; }

/* ---------- 3. journey: the job ticket ---------- */
.pic-job { background: var(--pic-paper); }
.pic-ticket { position: relative; max-width: 1040px; margin: 40px auto 0; border-radius: 20px; background: var(--pic-kraft); box-shadow: 0 40px 80px -50px rgba(8,34,56,.45), 0 0 0 1px #EADFC8; overflow: hidden; }
.pic-ticket__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 18px 24px; background: var(--pic-ink); color: #fff; }
.pic-ticket__no { margin: 0; font: 600 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #9FC0D8; }
.pic-ticket__no b { display: block; font: 800 22px/1.1 var(--f-display); letter-spacing: 0; color: #fff; }
.pic-ticket__what { margin: 0; display: flex; flex-direction: column; }
.pic-ticket__what b { font: 700 17px/1.2 var(--f-display); }
.pic-ticket__what span { font-size: 13.5px; color: #BFD3E2; }
.pic-ticket__rows { margin: 0; padding: 0; list-style: none; }
.pic-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 230px; align-items: center; gap: 0 22px; padding: 18px 24px 18px 0; border-bottom: 1px dashed #DCCFB2; }
.pic-row__stub { align-self: stretch; display: grid; place-items: center; font: 800 20px/1 var(--f-display); color: #B49A68; border-right: 2px dotted #D6C6A3; transition: color .4s; }
.pic-row__body h3 { margin: 0; font: 700 18px/1.3 var(--f-display); color: var(--pic-ink); }
.pic-row__body p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--pic-body); max-width: 62ch; }
.pic-row__apps { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pic-row__apps a { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 5px 10px 5px 6px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #E8DCC2; font: 600 13px/1.2 var(--f-body); color: var(--pic-ink); text-decoration: none; }
.pic-row__apps a:hover { box-shadow: 0 0 0 1.5px #00A3D9; color: var(--pic-link); }
.pic-row__apps img { width: 22px; height: 22px; }
.pic-row__stamp { position: absolute; right: 250px; top: 14px; padding: 4px 10px; border: 2.5px solid var(--pic-green); border-radius: 8px; font: 800 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pic-green); transform: rotate(-8deg) scale(1); opacity: .9; pointer-events: none; }
.pic-js .pic-row__stamp { opacity: 0; transform: rotate(-8deg) scale(1.8); transition: opacity .35s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.pic-js .pic-row.is-stamped .pic-row__stamp { opacity: .9; transform: rotate(-8deg) scale(1); }
.pic-row.is-stamped .pic-row__stub, .pic-row__stub { color: #B49A68; }
.pic-js .pic-row.is-stamped .pic-row__stub { color: var(--pic-green); }
.pic-ticket__sum { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 28px; align-items: end; padding: 20px 24px 22px 96px; }
.pic-ticket__sum dl { margin: 0; font-variant-numeric: tabular-nums; }
.pic-ticket__sum dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #DCCFB2; font-size: 14.5px; }
.pic-ticket__sum dt { color: var(--pic-body); }
.pic-ticket__sum dd { margin: 0; font-weight: 700; color: var(--pic-ink); }
.pic-ticket__sum .is-due { border-bottom: 0; border-top: 2px solid var(--pic-ink); margin-top: 4px; padding-top: 8px; }
.pic-ticket__sum .is-due dt, .pic-ticket__sum .is-due dd { font: 800 17px/1.2 var(--f-display); color: var(--pic-ink); }
.pic-ticket__sum p { margin: 0; font-size: 13.5px; color: var(--pic-muted); }

/* ---------- 4. dispatch board (dark band) ---------- */
.pic-disp__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(22px, 3vw, 40px); margin-top: 40px; align-items: start; }
.pic-disp__form { display: grid; gap: 18px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.pic-seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.pic-seg legend { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 700 14px/1.2 var(--f-display); color: #fff; }
.pic-seg legend span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pic-amber); color: var(--pic-ink); font-size: 12px; }
.pic-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pic-seg legend { width: 100%; }
.pic-seg label { position: relative; cursor: pointer; }
.pic-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pic-seg label span { display: inline-block; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font: 600 13.5px/1.2 var(--f-body); color: #DCE8F1; transition: background .2s, border-color .2s, color .2s; }
.pic-seg label:hover span { border-color: rgba(255,255,255,.4); }
.pic-seg input:checked + span { background: #fff; border-color: #fff; color: var(--pic-ink); }
.pic-seg--skills input:checked + span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--pic-green); vertical-align: 1px; }
.pic-seg input:focus-visible + span { outline: 2px solid var(--pic-amber); outline-offset: 2px; }

.pic-board { border-radius: 22px; background: #fff; color: var(--pic-body); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); overflow: hidden; }
.pic-board__top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--pic-line); }
.pic-board__top p { margin: 0; font: 800 15px/1.2 var(--f-display); color: var(--pic-ink); }
.pic-board__cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; min-height: 128px; background: var(--pic-paper); }
.pic-board__col { position: relative; padding: 8px; border-radius: 12px; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(8,34,56,.04) 22px 23px), #fff; border: 1px solid var(--pic-line); transition: box-shadow .3s, border-color .3s; }
.pic-board__col p { margin: 0; font: 700 11px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--pic-muted); }
.pic-board__col.is-on { border-color: var(--c, #00A3D9); box-shadow: inset 0 0 0 1px var(--c, #00A3D9); }
.pic-board__col[data-col="wait"] { --c: #C2410C; }
.pic-board__col[data-col="now"] { --c: #E8590C; }
.pic-board__col[data-col="sched"] { --c: #0A6FA8; }
.pic-board__col[data-col="plan"] { --c: #1E9E62; }
.pic-board__job { position: absolute; left: 0; top: 0; width: var(--w, 120px); padding: 8px 10px; border-radius: 10px; background: var(--pic-ink); color: #fff; box-shadow: 0 14px 24px -14px rgba(8,34,56,.8); transform: translate3d(var(--x, 22px), var(--y, 46px), 0); transition: transform .7s cubic-bezier(.55,.05,.3,1), background .3s; pointer-events: none; }
.pic-board__job b { display: block; font: 700 12.5px/1.25 var(--f-display); }
.pic-board__job span { display: block; margin-top: 2px; font-size: 11px; color: #BFD3E2; line-height: 1.3; }
.pic-board__job.is-wait { background: #9A3412; }
.pic-board__out { padding: 16px 18px 18px; }
.pic-board__say { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pic-ink); }
.pic-board__say b { font-weight: 700; }
.pic-board__split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pic-line); }
.pic-board__h { margin: 0 0 6px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pic-muted); }
.pic-board__h + p + .pic-board__h { margin-top: 14px; }
.pic-board__app { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pic-board__app a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 99px; background: var(--pic-paper); font: 600 13px/1.2 var(--f-body); color: var(--pic-ink); text-decoration: none; }
.pic-board__app a:hover { color: var(--pic-link); }
.pic-board__app img { width: 20px; height: 20px; }
.pic-board__bill { margin: 0; font-size: 14px; line-height: 1.5; }
.pic-board__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pic-board__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; }
.pic-board__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 4px; border: 1.6px solid #94A3B8; }
.pic-board__list li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 6px; height: 4px; border-left: 2px solid var(--pic-green); border-bottom: 2px solid var(--pic-green); transform: rotate(-45deg); }
.pic-board__send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pic-line); }
.pic-board__send span { font-size: 13px; color: var(--pic-muted); }

/* ---------- 5. stack by size: buildings ---------- */
.pic-stack__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; align-items: end; }
.pic-bld { position: relative; display: flex; flex-direction: column; border-radius: 22px 22px 8px 8px; background: #fff; border: 1px solid var(--pic-line); overflow: hidden; }
.pic-bld.is-pick { border-color: #F5C25A; box-shadow: 0 30px 60px -40px rgba(138,90,0,.5); }
.pic-bld__flag { margin: 0; padding: 6px 14px; background: #FFF4D6; font: 700 12px/1.3 var(--f-body); color: #8A5A00; }
.pic-bld header { padding: 18px 20px 14px; }
.pic-bld__size { margin: 0; font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pic-orange); }
.pic-bld h3 { margin: 6px 0 0; font: 700 19px/1.25 var(--f-display); color: var(--pic-ink); }
.pic-bld header p:last-child { margin: 6px 0 0; font-size: 14px; color: var(--pic-muted); }
.pic-bld__floors { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 12px 12px; list-style: none; background: linear-gradient(#F3F7F9, #E9EFF3); border-top: 3px solid var(--pic-ink); }
.pic-bld__floors a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 9px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 #D5DEE5; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.pic-bld__floors a:hover { transform: translateX(3px); box-shadow: 0 0 0 1.5px #00A3D9; }
.pic-bld__floors img { grid-row: span 2; width: 24px; height: 24px; }
.pic-bld__floors b { font: 700 14px/1.25 var(--f-display); color: var(--pic-ink); }
.pic-bld__floors span { font-size: 12.5px; color: var(--pic-muted); line-height: 1.35; }
.pic-bld__floors .is-base a { background: var(--pic-ink); box-shadow: none; }
.pic-bld__floors .is-base b { color: #fff; }
.pic-bld__floors .is-base span { color: #BFD3E2; }
.pic-bld__floors li { opacity: 1; }
.pic-js .pic-bld__floors li { opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.pic-js .pic-bld.is-up .pic-bld__floors li { opacity: 1; transform: none; }

/* ---------- 6. compliance ---------- */
.pic-law__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: piclaw; }
.pic-law__grid li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--pic-line); border-left: 4px solid var(--pic-orange); counter-increment: piclaw; }
.pic-law__grid h3 { margin: 0; font: 700 17px/1.3 var(--f-display); color: var(--pic-ink); }
.pic-law__grid h3::before { content: counter(piclaw, decimal-leading-zero); display: block; margin-bottom: 4px; font: 700 12px/1 var(--f-body); color: var(--pic-orange); letter-spacing: .06em; }
.pic-law__grid p { margin: 0; font-size: 15px; line-height: 1.6; }
.pic-law__app { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--pic-link); }

/* ---------- 7. moving from ---------- */
.pic-move { background: var(--pic-paper); }
.pic-move__box { margin-top: 34px; border-radius: 22px; background: #fff; border: 1px solid var(--pic-line); overflow: hidden; }
.pic-move__bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-bottom: 1px solid var(--pic-line); background: #FAFCFD; }
.pic-move__bar button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--pic-line); background: #fff; font: 600 14px/1.2 var(--f-body); color: var(--pic-ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.pic-move__bar button img { width: 20px; height: 20px; }
.pic-move__name { display: inline-block; }
.pic-move__bar button:hover { border-color: #9FC0D8; }
.pic-move__bar button[aria-selected="true"] { background: var(--pic-ink); border-color: var(--pic-ink); color: #fff; }
.pic-move__bar button[aria-selected="true"] img { filter: brightness(0) invert(1); }
.pic-move__p { padding: 22px 24px 24px; }
.pic-move__route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.pic-move__route li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 28px 16px 18px; border-radius: 14px; background: var(--pic-paper); margin-right: 18px; }
.pic-move__route li:last-child { margin-right: 0; background: #FFF6EC; }
.pic-move__route li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 2.5px solid var(--pic-orange); border-right: 2.5px solid var(--pic-orange); transform: rotate(45deg); }
.pic-move__route b { font: 700 12px/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pic-orange); }
.pic-move__route span { font-size: 15px; line-height: 1.55; color: var(--pic-ink); }

/* ---------- 8. licence calculator ---------- */
.pic-calc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; margin-top: 36px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--pic-line); box-shadow: 0 40px 80px -60px rgba(8,34,56,.5); }
.pic-calc__in { display: grid; gap: 18px; align-content: start; }
.pic-field { display: grid; gap: 8px; }
.pic-field span { display: flex; justify-content: space-between; font: 600 14.5px/1.2 var(--f-body); color: var(--pic-ink); }
.pic-field output { font: 800 16px/1 var(--f-display); color: var(--pic-link); font-variant-numeric: tabular-nums; }
.pic-field input[type="range"] { width: 100%; accent-color: #00A3D9; }
.pic-sw { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px; background: var(--pic-paper); }
.pic-sw button { flex: 1 1 auto; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; font: 600 13.5px/1.2 var(--f-body); color: var(--pic-body); cursor: pointer; }
.pic-sw button[aria-pressed="true"] { background: #fff; color: var(--pic-ink); box-shadow: 0 4px 10px -6px rgba(8,34,56,.4); }
.pic-calc__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.pic-calc__col { position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: 18px; background: var(--pic-paper); border: 1.5px solid transparent; transition: border-color .3s, background .3s; }
.pic-calc__col.is-win { border-color: var(--pic-green); background: #F2FBF6; }
.pic-calc__h { margin: 0 0 10px; font: 700 15px/1.25 var(--f-display); color: var(--pic-ink); }
.pic-calc__col ul { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13.5px; }
.pic-calc__col li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed #D5DEE5; }
.pic-calc__col li b { font-weight: 700; color: var(--pic-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pic-calc__tot { margin: auto 0 0; display: flex; align-items: baseline; gap: 6px; }
.pic-calc__tot b { font: 800 30px/1 var(--f-display); color: var(--pic-ink); font-variant-numeric: tabular-nums; }
.pic-calc__tot span { font-size: 13px; color: var(--pic-muted); }
.pic-calc__yr { margin: 6px 0 0; font-size: 13px; color: var(--pic-muted); }
.pic-calc__win { position: absolute; right: 12px; top: -10px; padding: 3px 9px; border-radius: 99px; background: var(--pic-green); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; opacity: 0; transition: opacity .3s; }
.pic-calc__col.is-win .pic-calc__win { opacity: 1; }
.pic-calc__note { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--pic-body); }

/* ---------- 9. packages ---------- */
.pic-pk__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.pic-pk__card { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--pic-line); }
.pic-pk__card.is-pick { border-color: #F5C25A; box-shadow: 0 30px 60px -40px rgba(138,90,0,.5); }
.pic-pk__flag { position: absolute; top: -12px; left: 22px; margin: 0; padding: 4px 10px; border-radius: 99px; background: var(--pic-amber); font: 700 12px/1.2 var(--f-body); color: var(--pic-ink); }
.pic-pk__bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 16px; }
.pic-pk__bar i { height: 6px; border-radius: 3px; background: var(--pic-line); }
.pic-pk__bar i.is-on { background: var(--pic-orange); }
.pic-pk__card h3 { margin: 0; font: 700 21px/1.2 var(--f-display); color: var(--pic-ink); }
.pic-pk__for { margin: 6px 0 14px; font-size: 14.5px; color: var(--pic-muted); }
.pic-pk__card ul { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.pic-pk__card li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.pic-pk__card li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--pic-orange); }
.pic-pk__fee { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--pic-line); font-size: 14px; font-weight: 600; color: var(--pic-ink); }

/* ---------- 10. rollout ---------- */
.pic-roll__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; counter-reset: picr; }
.pic-roll__list li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 52px 18px 18px; border-radius: 18px; background: var(--pic-paper); counter-increment: picr; }
.pic-roll__list li::before { content: counter(picr); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--pic-ink); color: #fff; font: 800 13px/1 var(--f-display); }
.pic-roll__list b { font: 700 16.5px/1.3 var(--f-display); color: var(--pic-ink); }
.pic-roll__list span { font-size: 14.5px; line-height: 1.55; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pic-row { grid-template-columns: 60px minmax(0, 1fr) 190px; }
  .pic-row__stamp { right: 206px; }
  .pic-calc { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .pic-hero__grid { grid-template-columns: 1fr; }
  .pic-disp__grid { grid-template-columns: 1fr; }
  .pic-who__list, .pic-pk__list, .pic-stack__row { grid-template-columns: 1fr; max-width: 620px; }
  .pic-pk__list { gap: 26px; }
  .pic-law__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pic-roll__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pic-move__route { grid-template-columns: 1fr; }
  .pic-move__route li { margin: 0 0 18px; }
  .pic-move__route li:last-child { margin: 0; }
  .pic-move__route li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -13px; margin: 0 0 0 -5px; transform: rotate(135deg); }
}
@media (max-width: 720px) {
  .pic-row { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 16px 16px 0; gap: 0 14px; }
  .pic-row__stub { grid-row: span 2; font-size: 16px; }
  .pic-row__apps { flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
  .pic-row__stamp { right: 12px; top: 12px; font-size: 10.5px; }
  .pic-row__body h3 { padding-right: 84px; font-size: 16.5px; }
  .pic-ticket__head { padding: 16px; }
  .pic-ticket__sum { grid-template-columns: 1fr; padding: 18px 16px 20px 58px; }
  .pic-calc { padding: 16px; }
  .pic-calc__out { grid-template-columns: 1fr; }
  .pic-board__split { grid-template-columns: 1fr; }
  .pic-board__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .pic-board__col { min-height: 66px; }
}
@media (max-width: 560px) {
  .pic-law__grid, .pic-roll__list { grid-template-columns: 1fr; }
  .pic-map { padding: 12px; border-radius: 20px; }
  .pic-flip { gap: 6px; }
  .pic-flip__face { padding: 8px; border-radius: 11px; }
  .pic-flip__face small { font-size: 9.5px; }
  .pic-flip__face b { font-size: 11.5px; }
  .pic-flip__amt { font-size: 14px; }
  .pic-flip__face i { font-size: 10.5px; }
  .pic-disp__form { padding: 16px; }
  .pic-move__p { padding: 18px 16px; }
  .pic-map__lbl { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pic-flip__in, .pic-board__job, .pic-js .pic-row__stamp, .pic-js .pic-bld__floors li, .pic-who__card a { transition: none !important; }
  .pic-pin.is-done .pic-pin__ring { animation: none; }
}