/* Real estate industry landing only. Every class is scoped with .pir- (loaded via extra: crm, p-ind-real-estate). */
:root { --pir-ink: #082238; --pir-body: #334155; --pir-muted: #64748B; --pir-line: #E2E8F0; --pir-paper: #F3F7F9; --pir-blue: #00A3D9; --pir-link: #0A6FA8; --pir-green: #1E9E62; --pir-amber: #FFB81C; }
.pir-replay:focus-visible, .pir-st:focus-visible, .pir-seg input:focus-visible + span, .pir-calc__grp button:focus-visible, .pir-who__list a:focus-visible { outline: 2px solid var(--pir-blue); outline-offset: 2px; }

/* ---------- 1. hero: street of house cards ---------- */
.pir-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.pir-hero .pg-h1 { max-width: 19ch; font-size: clamp(34px, 1.1rem + 2.5vw, 52px); }
.pir-hero .pg-lead { font-size: 17px; }
.pir-street { position: relative; margin: 0; padding: 20px; border-radius: 26px; background: rgba(255,255,255,.88); border: 1px solid var(--pir-line); box-shadow: 0 50px 90px -50px rgba(8,34,56,.5), 0 14px 30px -24px rgba(8,34,56,.3); }
.pir-street__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 0 4px 14px; border-bottom: 1px solid var(--pir-line); }
.pir-street__top b { font: 800 15px/1.2 var(--f-display); color: var(--pir-ink); }
.pir-street__top span { font-size: 12.5px; color: var(--pir-muted); }
.pir-street__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; }
.pir-street__road { position: relative; isolation: isolate; margin-top: 16px; padding-top: 46px; }
.pir-street__road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 12px; border-radius: 6px; z-index: -1;
  background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 26px) 0 50% / 100% 2px no-repeat, #CBD5E1; }
.pir-lots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 0 34px; list-style: none; }
.pir-lot { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 14px; background: var(--pir-paper); transition: background-color .5s, box-shadow .5s, transform .5s; }
.pir-lot span { font: 700 11.5px/1.15 var(--f-body); color: var(--pir-muted); text-align: center; letter-spacing: .01em; }
.pir-house { width: 100%; max-width: 64px; height: auto; }
.pir-house .r { fill: none; stroke: #94A3B8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.pir-house .b { fill: #fff; stroke: #CBD5E1; stroke-width: 1.5; transition: fill .5s, stroke .5s; }
.pir-house .d { fill: #CBD5E1; transition: fill .5s; }
.pir-house .w { fill: #E2E8F0; transition: fill .5s; }
.pir-lot.is-done { background: color-mix(in srgb, var(--c) 8%, #fff); }
.pir-lot.is-done .r { stroke: color-mix(in srgb, var(--c) 55%, #94A3B8); }
.pir-lot.is-live { background: #fff; box-shadow: inset 0 0 0 2px var(--c), 0 18px 30px -20px rgba(8,34,56,.6); transform: translateY(-3px); }
.pir-lot.is-live span, .pir-lot.is-done span { color: var(--pir-ink); }
.pir-lot.is-live .r { stroke: var(--c); }
.pir-lot.is-live .b { stroke: var(--c); }
.pir-lot.is-live .d { fill: var(--c); }
.pir-lot.is-live .w { fill: #FFE6A6; }
.pir-tag { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; border-radius: 10px; background: var(--pir-ink); color: #fff; box-shadow: 0 16px 30px -14px rgba(8,34,56,.8);
  transform: translate3d(var(--x, 0px), 0, 0); transition: transform .9s cubic-bezier(.55,.05,.3,1); will-change: transform; white-space: nowrap; pointer-events: none; }
.pir-tag i { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--pir-amber)); box-shadow: 0 0 0 3px rgba(255,255,255,.18); transition: background-color .5s; }
.pir-tag b { font: 700 12.5px/1 var(--f-display); }
.pir-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--pir-ink); transform: rotate(45deg); z-index: -1; }
.pir-card { margin-top: 4px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--pir-line); box-shadow: 0 24px 40px -30px rgba(8,34,56,.5); }
.pir-card__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--pir-ink); }
.pir-card__head img { flex: none; }
.pir-card__head p { flex: 1; min-width: 0; margin: 0; }
.pir-card__head p b { display: block; font: 800 14.5px/1.2 var(--f-display); color: var(--pir-ink); }
.pir-card__head p span { display: block; font-size: 12px; color: var(--pir-muted); }
.pir-card__leads { flex: none; display: grid; justify-items: center; padding: 6px 10px; border-radius: 12px; background: #E6F3FB; font: 600 10.5px/1 var(--f-body); color: var(--pir-link); text-transform: uppercase; letter-spacing: .06em; }
.pir-card__leads b { font: 800 20px/1.05 var(--f-display); color: var(--pir-ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pir-feed { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pir-feed li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--pir-paper); font-size: 12.5px; line-height: 1.3; color: var(--pir-body); transition: opacity .5s, transform .5s; }
.pir-feed li span { flex: 1; min-width: 0; }
.pir-feed li em { flex: none; font: 700 11.5px/1 var(--f-body); font-style: normal; color: var(--pir-green); }
.pir-js .pir-feed li { opacity: .22; transform: translateX(10px); }
.pir-js .pir-feed li.is-on { opacity: 1; transform: none; }
.pir-street.is-closed .pir-feed li:last-child { background: #E9F7EF; }
.pir-replay { margin-top: 12px; padding: 8px 14px; border: 1px solid var(--pir-line); border-radius: 99px; background: #fff; font: 600 13px/1 var(--f-body); color: var(--pir-link); cursor: pointer; }
.pir-replay:hover { border-color: var(--pir-blue); }

/* ---------- 2. which one are you ---------- */
.pir-who__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.pir-who__list a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--pir-line); text-decoration: none; color: var(--pir-body); box-shadow: 0 24px 50px -44px rgba(8,34,56,.55); transition: transform .25s, box-shadow .25s, border-color .25s; }
.pir-who__list 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,.55); }
.pir-who__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--bg); color: var(--c); }
.pir-who__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pir-who__list b { font: 700 18px/1.25 var(--f-display); color: var(--pir-ink); }
.pir-who__list a > span:not(.pir-who__ic) { font-size: 15px; line-height: 1.55; }
.pir-who__list em { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--pir-line); font: 600 12.5px/1.4 var(--f-body); font-style: normal; color: var(--c); }

/* ---------- 3. sale timeline ---------- */
.pir-journey { background: linear-gradient(180deg, #fff, var(--pir-paper)); }
.pir-tl { margin-top: 40px; }
.pir-tl__ruler { position: relative; height: 74px; margin: 0 26px 24px; }
.pir-tl__bar { position: absolute; left: 0; right: 0; top: 36px; height: 6px; border-radius: 3px; background: #DCE7EF; }
.pir-tl__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); transition: width .6s cubic-bezier(.2,.7,.1,1); }
.pir-tl__pin { position: absolute; left: var(--x); top: 31px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid #B8C9D6; transition: border-color .3s, transform .3s, background-color .3s; }
.pir-tl__pin b { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 700 12px/1 var(--f-body); color: var(--pir-muted); white-space: nowrap; }
.pir-tl__pin:nth-child(odd) b { bottom: auto; top: 22px; }
.pir-tl__pin.is-past { border-color: #00A3D9; background: #E6F3FB; }
.pir-tl__pin.is-on { border-color: var(--pir-ink); background: var(--pir-amber); transform: scale(1.25); }
.pir-tl__pin.is-on b { color: var(--pir-ink); }
.pir-tl__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pir-st { position: relative; padding: 20px 20px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--pir-line); border-top: 4px solid var(--c); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.pir-st.is-on { transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(8,34,56,.6); }
.pir-st__when { margin: 0 0 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.pir-st h3 { margin: 0 0 8px; font: 700 17px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-st p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.pir-st__apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.pir-st__apps a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: var(--pir-paper); font: 600 12.5px/1 var(--f-body); color: var(--pir-ink); text-decoration: none; }
.pir-st__apps a:hover { background: #E6F3FB; color: var(--pir-link); }
.pir-tl__note { margin: 18px 0 0; font-size: 14px; color: var(--pir-muted); }

/* ---------- 4. router (dark band) ---------- */
.pir-router__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 3.5vw, 48px); margin-top: 40px; align-items: start; }
.pir-router__form { display: grid; gap: 22px; padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pir-seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.pir-seg legend { margin-bottom: 10px; font: 700 15px/1.3 var(--f-display); color: #fff; }
.pir-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pir-seg label { position: relative; }
.pir-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pir-seg span { display: inline-block; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); font: 600 14px/1.2 var(--f-body); color: #DCEAF4; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.pir-seg label:hover span { border-color: rgba(255,255,255,.45); }
.pir-seg input:checked + span { background: #fff; border-color: #fff; color: var(--pir-ink); }
.pir-router__out { position: relative; padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; background: #fff; color: var(--pir-body); box-shadow: 0 40px 70px -40px rgba(0,0,0,.7); }
.pir-router__out.is-flash { animation: pirFlash .6s ease; }
@keyframes pirFlash { 0% { box-shadow: 0 0 0 0 rgba(255,184,28,.5), 0 40px 70px -40px rgba(0,0,0,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,184,28,0), 0 40px 70px -40px rgba(0,0,0,.7); } }
.pir-router__flag { position: absolute; right: 18px; top: 16px; margin: 0; padding: 3px 8px; border-radius: 99px; background: #FFF4D6; color: #8A5A00; font: 700 11px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.pir-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 26px 0 0; padding: 0; list-style: none; }
.pir-path__n { position: relative; padding: 12px; border-radius: 14px; background: var(--pir-paper); border-left: 4px solid var(--c); }
.pir-path__n:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2.5px solid #94A3B8; border-right: 2.5px solid #94A3B8; transform: rotate(45deg); }
.pir-path__n small { display: block; font: 700 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pir-muted); }
.pir-path__n b { display: block; margin-top: 4px; font: 700 14.5px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-router__first { display: grid; gap: 4px; margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: #FFF8E6; border: 1px solid #FBE3A8; }
.pir-router__first span { font: 700 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #8A5A00; }
.pir-router__first b { font: 600 15px/1.5 var(--f-body); color: var(--pir-ink); }
.pir-router__h { margin: 18px 0 8px; font: 700 13px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--pir-muted); }
.pir-router__plan ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pir-router__plan li { display: grid; grid-template-columns: 74px 18px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pir-line); font-size: 14px; }
.pir-router__plan li span { font: 700 12.5px/1 var(--f-display); color: var(--pir-link); }
.pir-router__plan li em { font-style: normal; line-height: 1.4; }
.pir-router__apps ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pir-router__apps li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 99px; background: var(--pir-paper); font: 600 13.5px/1 var(--f-body); color: var(--pir-ink); }
.pir-router__send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.pir-router__send span { font-size: 13.5px; color: var(--pir-muted); }

/* ---------- 5. stack by size ---------- */
.pir-stack__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; align-items: start; }
.pir-stack__col { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--pir-line); box-shadow: 0 24px 50px -44px rgba(8,34,56,.55); }
.pir-stack__col.is-pick { border: 2px solid var(--pir-blue); }
.pir-stack__size { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 12.5px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--pir-link); }
.pir-stack__size span { display: inline-flex; gap: 3px; align-items: flex-end; }
.pir-stack__size i { width: 10px; height: 14px; border-radius: 2px 2px 0 0; background: var(--pir-blue); }
.pir-stack__size i:nth-child(2) { height: 18px; background: #00B2A9; }
.pir-stack__size i:nth-child(3) { height: 22px; background: #3FB97A; }
.pir-stack__col h3 { margin: 0 0 14px; font: 700 18px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-stack__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pir-stack__col li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--pir-paper); text-decoration: none; color: var(--pir-body); transition: background-color .2s; }
.pir-stack__col li a:hover { background: #E6F3FB; }
.pir-stack__col li img { flex: none; }
.pir-stack__col li span { font-size: 13.5px; line-height: 1.4; }
.pir-stack__col li b { display: block; font: 700 14.5px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-stack__alt { margin: 14px 0 0; font-size: 14px; color: var(--pir-muted); }
.pir-stack__alt a { color: var(--pir-link); font-weight: 600; }

/* ---------- 6. compliance ---------- */
.pir-law { background: var(--pir-paper); }
.pir-law__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pir-law__item { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--pir-line); }
.pir-law__item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 17px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-law__item h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--pir-blue); }
.pir-law__item p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- 7. moving from ---------- */
.pir-move__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.pir-move__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--pir-line); }
.pir-move__mark { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pir-paper); border: 1px solid var(--pir-line); }
.pir-move__mark img { width: 30px; height: 30px; object-fit: contain; }
.pir-move__mark.is-name { padding: 4px; font: 800 9.5px/1.1 var(--f-display); color: var(--pir-ink); text-align: center; letter-spacing: -.01em; }
.pir-move__list h3 { margin: 2px 0 6px; font: 700 16.5px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-move__list p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.pir-move__list p a { color: var(--pir-link); font-weight: 600; }

/* ---------- 8. licence calculator ---------- */
.pir-cost { background: linear-gradient(180deg, var(--pir-paper), #fff); }
.pir-calc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); margin-top: 36px; padding: clamp(18px, 2.6vw, 32px); border-radius: 26px; background: #fff; border: 1px solid var(--pir-line); box-shadow: 0 34px 70px -56px rgba(8,34,56,.6); }
.pir-calc__in { display: grid; gap: 20px; align-content: start; }
.pir-field { display: grid; gap: 10px; }
.pir-field > span { display: flex; justify-content: space-between; font: 700 15px/1.2 var(--f-display); color: var(--pir-ink); }
.pir-field output { font: 800 18px/1 var(--f-display); color: var(--pir-link); }
.pir-field input[type="range"] { width: 100%; accent-color: var(--pir-blue); }
.pir-calc__grp { display: flex; flex-wrap: wrap; gap: 8px; }
.pir-calc__grp p { flex-basis: 100%; margin: 0; font: 700 14px/1.2 var(--f-display); color: var(--pir-ink); }
.pir-calc__grp button { padding: 9px 13px; border: 1.5px solid var(--pir-line); border-radius: 11px; background: #fff; font: 600 13.5px/1.2 var(--f-body); color: var(--pir-body); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.pir-calc__grp button:hover { border-color: #9DD3EC; }
.pir-calc__grp button[aria-pressed="true"] { border-color: var(--pir-ink); background: var(--pir-ink); color: #fff; }
.pir-calc__grp--apps button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 8px; height: 5px; margin: 0 7px 2px 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.pir-calc__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.pir-calc__col { position: relative; padding: 18px; border-radius: 18px; background: var(--pir-paper); border: 2px solid transparent; transition: border-color .3s, background-color .3s; }
.pir-calc__col.is-win { border-color: var(--pir-green); background: #F1FAF5; }
.pir-calc__h { margin: 0 0 10px; font: 700 15px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-calc__col ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pir-calc__col li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.35; }
.pir-calc__col li b { flex: none; color: var(--pir-ink); font-variant-numeric: tabular-nums; }
.pir-calc__col li.is-inc { color: var(--pir-muted); }
.pir-calc__col li.is-inc b { color: var(--pir-green); }
.pir-calc__tot { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--pir-line); }
.pir-calc__tot b { font: 800 28px/1 var(--f-display); color: var(--pir-ink); font-variant-numeric: tabular-nums; }
.pir-calc__tot span { font-size: 13px; color: var(--pir-muted); }
.pir-calc__yr { margin: 4px 0 0; font-size: 12.5px; color: var(--pir-muted); }
.pir-calc__col em { position: absolute; right: 12px; top: -11px; padding: 3px 9px; border-radius: 99px; background: var(--pir-green); color: #fff; font: 700 11px/1.3 var(--f-body); font-style: normal; letter-spacing: .04em; opacity: 0; transition: opacity .3s; }
.pir-calc__col.is-win em { opacity: 1; }
.pir-calc__note { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--pir-body); }

/* ---------- 9. packages ---------- */
.pir-pk__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.pir-pk__card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--pir-line); box-shadow: 0 24px 50px -44px rgba(8,34,56,.55); }
.pir-pk__card.is-pick { border: 2px solid var(--pir-amber); }
.pir-pk__flag { position: absolute; left: 22px; top: -12px; margin: 0; padding: 4px 10px; border-radius: 99px; background: var(--pir-amber); color: var(--pir-ink); font: 700 11.5px/1.2 var(--f-body); }
.pir-pk__sign { align-self: flex-start; margin: 0 0 14px; padding: 6px 12px; border-radius: 6px; background: var(--pir-ink); color: #fff; font: 800 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 0 -4px #B8C9D6; }
.pir-pk__card h3 { margin: 0 0 6px; font: 700 20px/1.25 var(--f-display); color: var(--pir-ink); }
.pir-pk__for { margin: 0 0 14px; font-size: 14.5px; color: var(--pir-muted); }
.pir-pk__card ul { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.pir-pk__card li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.pir-pk__card li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 5px; border-left: 2px solid var(--pir-green); border-bottom: 2px solid var(--pir-green); transform: rotate(-45deg); }
.pir-pk__fee { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--pir-line); font: 600 14px/1.5 var(--f-body); color: var(--pir-ink); }

/* ---------- 10. rollout ---------- */
.pir-roll { background: var(--pir-paper); }
.pir-roll__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: pirroll; }
.pir-roll__list li { position: relative; display: grid; gap: 6px; padding: 52px 20px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--pir-line); counter-increment: pirroll; }
.pir-roll__list li::before { content: counter(pirroll); position: absolute; left: 20px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pir-ink); color: #fff; font: 700 13px/1 var(--f-display); }
.pir-roll__list b { font: 700 16.5px/1.3 var(--f-display); color: var(--pir-ink); }
.pir-roll__list span { font-size: 14.5px; line-height: 1.55; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pir-tl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pir-who__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pir-hero__grid, .pir-router__grid, .pir-calc { grid-template-columns: minmax(0, 1fr); }
  .pir-stack__grid, .pir-pk__list { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .pir-law__grid, .pir-move__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pir-roll__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pir-tl__ruler { position: sticky; top: 76px; z-index: 3; margin: 0 16px 22px; height: 60px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 14px #fff, 0 14px 30px -10px rgba(8,34,56,.45); }
  .pir-tl__ruler .pir-tl__bar { top: 27px; }
  .pir-tl__ruler .pir-tl__pin { top: 22px; }
  .pir-tl__pin b { display: none; }
  .pir-tl__pin.is-on b { display: block; }
  .pir-tl__list { grid-template-columns: minmax(0, 1fr); }
  .pir-path { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pir-path__n:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -11px; transform: rotate(135deg); }
}
@media (max-width: 620px) {
  .pir-who__list, .pir-law__grid, .pir-move__list, .pir-roll__list, .pir-calc__out { grid-template-columns: minmax(0, 1fr); }
  .pir-street { padding: 14px; }
  .pir-lots { gap: 4px; }
  .pir-lot { padding: 8px 2px 6px; }
  .pir-lot span { font-size: 10px; }
  .pir-router__plan li { grid-template-columns: 62px 18px minmax(0, 1fr); gap: 8px; }
  .pir-router__flag { position: static; display: inline-block; }
  .pir-path { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pir-tag, .pir-lot, .pir-feed li, .pir-tl__bar i, .pir-tl__pin, .pir-st, .pir-who__list a { transition: none !important; }
  .pir-router__out.is-flash { animation: none; }
}