/* State hubs v2: shared components for BOTH hub families (Hub A = p-loc-hub, Hub B = p-loc-hub2). Prefix phx-.
   Independent of plh-/plh2- styles; needs only page.css + mid.css. Behaviour: p-loc-hubx.js (data attributes only).
   Components: hero value line + "Popular in" chips, answer box + facts strip, service finder + tiles, metro/region switcher,
   department shelf (mid kit I skin), bundles, industry cards, differentiators, 3-way versus stepper (mid kit N + side c),
   engagement cards, migration chips, start-steps link, licence bill, "Last reviewed" line. */
:root { --phx-ink: #082238; --phx-body: #334155; --phx-muted: #475569; --phx-line: #E2E8F0; --phx-link: #0A5C8C; --phx-paper: #F3F7F9; --phx-amber: #FFB81C; --phx-blue: #0A6FA8; }
[class^="phx-"] a:focus-visible, [class*=" phx-"] a:focus-visible, [class^="phx-"] button:focus-visible, [class*=" phx-"] button:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.phx-sub { margin: 40px 0 16px; font: 700 21px/1.3 var(--f-display); color: var(--phx-ink); letter-spacing: -.01em; }

/* ---------- 1. Hero additions ---------- */
.phx-value { margin: 14px 0 0; padding-left: 14px; border-left: 4px solid var(--phx-amber); font: 600 16px/1.5 var(--f-body); color: var(--phx-ink); max-width: 52ch; }
.phx-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.phx-pop__t { margin: 0; font: 700 12px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--phx-muted); }
.phx-pop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.phx-pop__chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid #BFDDEE; color: var(--phx-link); font: 600 14px/1.3 var(--f-body); text-decoration: none; transition: background-color .25s, border-color .25s; }
.phx-pop__chip:hover { background: #E8F5FC; border-color: #7CC7E8; }

/* ---------- 2. Answer box + facts strip ---------- */
.phx-answer__box { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 22px; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: #fff; border: 1px solid var(--phx-line); box-shadow: 0 30px 60px -48px rgba(8,34,56,.6); }
.phx-answer__text { margin: 0; font: 500 clamp(17px, 1rem + .25vw, 19px)/1.65 var(--f-body); color: var(--phx-ink); }
.phx-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.phx-facts > div { padding: 12px 14px; border-radius: 16px; background: var(--phx-paper); border: 1px solid var(--phx-line); }
.phx-facts__wide { grid-column: 1 / -1; }
.phx-facts dt { font: 700 11.5px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--phx-muted); }
.phx-facts dd { margin: 4px 0 0; font: 700 15px/1.4 var(--f-body); color: var(--phx-ink); }
.phx-facts dd a { color: var(--phx-link); display: inline-block; min-height: 24px; }

/* ---------- 3. Service finder + tiles ---------- */
.phx-finder { margin-top: 26px; }
.phx-finder__ui { padding: 20px; border-radius: 22px; background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); color: #fff; margin-bottom: 20px; }
.phx-finder__ui[hidden] { display: none; }
.phx-finder__q { margin: 0 0 12px; font: 700 18px/1.3 var(--f-display); color: #fff; }
.phx-finder__goals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.phx-goal { min-height: 40px; padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font: 600 14.5px/1.3 var(--f-body); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.phx-goal:hover { background: rgba(255,255,255,.16); }
.phx-goal[aria-pressed="true"] { background: var(--phx-amber); border-color: var(--phx-amber); color: var(--phx-ink); }
.phx-finder__out { margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; color: #E2EEF6; min-height: 1.55em; }
.phx-finder__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.phx-finder__send { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 0; background: var(--phx-amber); color: var(--phx-ink); font: 700 15px/1.2 var(--f-body); cursor: pointer; transition: background-color .25s; }
.phx-finder__send:hover { background: #F0A400; }
.phx-finder__status { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: #FFE3A3; }
.phx-finder__status:empty { display: none; }

.phx-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.phx-tile { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 20px; background: #fff; border: 2px solid var(--phx-line); transition: border-color .3s, background-color .3s, transform .3s, box-shadow .3s; }
.phx-tile__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg, #E8F5FC); color: var(--c, #0A6FA8); margin-bottom: 12px; }
.phx-tile__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phx-tile h3 { margin: 0 0 8px; font: 700 17.5px/1.3 var(--f-display); color: var(--phx-ink); }
.phx-tile p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--phx-body); }
.phx-tile__links { margin: auto 0 0 !important; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.phx-tile__links a { display: inline-flex; align-items: center; min-height: 28px; font: 700 14px/1.3 var(--f-body); color: var(--phx-link); }
.phx-tile__match { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 99px; background: var(--phx-amber); color: var(--phx-ink); font: 700 12px/1.3 var(--f-body); }
.phx-tile.is-match { border-color: var(--c, #0A6FA8); background: #fff; transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(8,34,56,.6); }
.phx-tile.is-other { background: var(--phx-paper); border-color: var(--phx-line); }

/* ---------- 4a. Metro / region switcher ---------- */
.phx-metro { margin-top: 26px; }
.phx-metro__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--phx-line); width: fit-content; max-width: 100%; margin-bottom: 14px; }
.phx-metro__tabs[hidden] { display: none; }
.phx-metro__tabs button { min-height: 40px; padding: 8px 16px; border-radius: 12px; border: 0; background: transparent; color: var(--phx-ink); font: 600 14.5px/1.3 var(--f-body); cursor: pointer; transition: background-color .25s, color .25s; }
.phx-metro__tabs button:hover { background: var(--phx-paper); }
.phx-metro__tabs button[aria-selected="true"] { background: #082238; color: #fff; }
.phx-metro:not(.is-ready) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.phx-metro__panel { padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--phx-line); border-left: 6px solid var(--phx-amber); }
.phx-metro.is-ready .phx-metro__panel { animation: phxFade .35s ease both; }
.phx-metro__h { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: var(--phx-ink); }
.phx-metro__panel > p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--phx-body); max-width: 80ch; }
.phx-mix { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.phx-mix a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 99px; background: var(--phx-paper); border: 1px solid var(--phx-line); color: var(--phx-ink); font: 600 14px/1.3 var(--f-body); text-decoration: none; transition: border-color .25s, background-color .25s; }
.phx-mix a:hover { border-color: #7CC7E8; background: #E8F5FC; }
.phx-mix img { width: 28px; height: 28px; }

/* ---------- 4b. Department shelf (mid kit I skin: pills hidden, app list inside each panel) ---------- */
.phx-shelf .mk-pill { display: none; }
.phx-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.phx-app { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--phx-paper); border: 2px solid transparent; transition: border-color .3s, background-color .3s; }
.phx-app img { flex: 0 0 36px; width: 36px; height: 36px; }
.phx-app a { display: inline-flex; align-items: center; min-height: 26px; font: 700 15.5px/1.3 var(--f-body); color: var(--phx-link); }
.phx-app p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--phx-body); }
.phx-app__badge { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 99px; background: var(--phx-amber); color: var(--phx-ink); font: 700 12px/1.3 var(--f-body); }
.phx-app__badge:empty { display: none; }
.phx-app.is-metro { border-color: var(--phx-amber); background: #FFFBEB; }

/* ---------- 4c. Bundles ---------- */
.phx-bundles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.phx-bundles li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--phx-line); }
.phx-bundles img { flex: 0 0 40px; width: 40px; height: 40px; }
.phx-bundles a { display: inline-flex; align-items: center; min-height: 26px; font: 700 16px/1.3 var(--f-display); color: var(--phx-link); }
.phx-bundles p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--phx-body); }

/* ---------- 5. Industry cards ---------- */
.phx-inds { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.phx-ind { display: flex; flex-direction: column; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--phx-line); border-top: 5px solid var(--c, #0A6FA8); }
.phx-ind__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bg, #E8F5FC); color: var(--c, #0A6FA8); margin-bottom: 12px; }
.phx-ind__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phx-ind h3 { margin: 0 0 8px; font: 700 18px/1.3 var(--f-display); color: var(--phx-ink); }
.phx-ind p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--phx-body); }
.phx-ind__go { margin: auto 0 0 !important; display: grid; gap: 2px; }
.phx-ind__go a { display: inline-flex; align-items: center; min-height: 28px; font: 700 14px/1.3 var(--f-body); color: var(--phx-link); }
.phx-ind__go a::after { content: " →"; white-space: pre; }
.phx-ind__more { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--phx-body); max-width: 80ch; }
.phx-ind__more a { color: var(--phx-link); font-weight: 700; }

/* ---------- 9. Differentiators + 3-way versus stepper ---------- */
.phx-diff { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.phx-diff li { position: relative; padding: 18px 18px 16px 20px; border-radius: 18px; background: var(--phx-paper); border: 1px solid var(--phx-line); }
.phx-diff li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #1D3F8F, #00A3D9, #3FB97A); }
.phx-diff b { display: block; font: 700 16.5px/1.3 var(--f-display); color: var(--phx-ink); }
.phx-diff p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--phx-body); }
.phx-vs .mk-versus__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phx-vs .mk-versus__card--c { background: #F1F5F9; }
.phx-vs .mk-versus__card--c b { color: #334155; }
.phx-vs:not(.mk-ready) .mk-versus__item p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--phx-body); }
.phx-vs:not(.mk-ready) .mk-versus__b::before { content: "Elite Tech Global: "; font-weight: 700; color: #0B5E8C; }
.phx-vs:not(.mk-ready) .mk-versus__a::before { content: "A solo freelancer: "; font-weight: 700; color: #B2401E; }
.phx-vs:not(.mk-ready) .mk-versus__c::before { content: "A large integrator: "; font-weight: 700; color: #334155; }
.phx-vs.mk-ready .mk-versus__c { display: none; }
.phx-why__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 18px 0 0; }
.phx-why__links .pg-link, .phx-migs__more .pg-link, .phx-steps__link .pg-link { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- 10. Engagement cards ---------- */
.phx-ways__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.phx-way { display: flex; flex-direction: column; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--phx-line); box-shadow: 0 20px 34px -32px rgba(8,34,56,.6); }
.phx-way__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #082238; color: #fff; font: 800 15px/1 var(--f-display); margin-bottom: 12px; }
.phx-way h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: var(--phx-ink); }
.phx-way p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--phx-body); }
.phx-way a { margin-top: auto; display: inline-flex; align-items: center; min-height: 32px; font: 700 14.5px/1.3 var(--f-body); color: var(--phx-link); }

/* ---------- 11. Migration chips ---------- */
.phx-migs__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.phx-mig { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--phx-line); text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
.phx-mig:hover { border-color: #7CC7E8; transform: translateY(-2px); box-shadow: 0 18px 30px -26px rgba(0,163,217,.6); }
.phx-mig img { flex: 0 0 auto; width: auto; height: 28px; max-width: 40px; }
.phx-mig span { display: block; font-size: 14px; line-height: 1.45; color: var(--phx-body); }
.phx-mig b { display: block; font: 700 15.5px/1.3 var(--f-body); color: var(--phx-link); margin-bottom: 2px; }
.phx-migs__more { margin: 16px 0 0; }

/* ---------- 12. Start steps link ---------- */
.phx-sub--steps { margin-top: 44px; }
.phx-steps__link { margin: 10px 0 0; }

/* ---------- 13. Licence bill ---------- */
.phx-cost__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.phx-cost__eds { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.phx-cost__eds li { padding: 12px 10px; border-radius: 14px; background: var(--phx-paper); border: 1px solid var(--phx-line); font: 600 13px/1.35 var(--f-body); color: var(--phx-muted); text-align: center; }
.phx-cost__eds b { display: block; font: 800 22px/1.2 var(--f-display); color: var(--phx-ink); }
.phx-cost__note { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--phx-muted); }
.phx-cost__note a { color: var(--phx-link); font-weight: 700; }
.phx-bill { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--phx-line); box-shadow: 0 40px 70px -50px rgba(8,34,56,.65); position: relative; }
.phx-bill::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); }
.phx-bill__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 4px 0 12px; }
.phx-bill__top b { font: 800 18px/1.3 var(--f-display); color: var(--phx-ink); }
.phx-bill__top span { font: 700 12px/1.6 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--phx-muted); }
.phx-bill__lines { list-style: none; margin: 0; padding: 0; }
.phx-bill__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #CBD5E1; }
.phx-bill__lines span { font: 600 15px/1.35 var(--f-body); color: var(--phx-ink); }
.phx-bill__lines small { display: block; margin-top: 2px; font: 500 13.5px/1.4 var(--f-body); color: var(--phx-muted); }
.phx-bill__lines b, .phx-bill__total b { font: 800 17px/1.3 var(--f-display); color: var(--phx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.phx-bill__total { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #082238; }
.phx-bill__total span { font: 700 15px/1.3 var(--f-body); color: #fff; }
.phx-bill__total b { color: #FFD27A; font-size: 20px; }
.phx-bill__alt { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #FFF8E6; border: 1px solid #FFE3A3; }
.phx-bill__alt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--phx-body); }
.phx-bill__alt b { color: var(--phx-ink); }
.phx-bill__foot { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--phx-muted); }

/* ---------- 14. Last reviewed ---------- */
.phx-reviewed { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--phx-line); font-size: 14px; line-height: 1.5; color: var(--phx-muted); }

@keyframes phxFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .phx-ways__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phx-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .phx-answer__box, .phx-cost__grid { grid-template-columns: minmax(0, 1fr); }
  .phx-bundles { grid-template-columns: minmax(0, 1fr); }
  .phx-vs .mk-versus__cards { grid-template-columns: minmax(0, 1fr); }
  .phx-vs .mk-versus__card { min-height: 0; }
}
@media (max-width: 640px) {
  .phx-metro:not(.is-ready) { grid-template-columns: minmax(0, 1fr); }
  .phx-metro__tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .phx-diff, .phx-ways__list { grid-template-columns: minmax(0, 1fr); }
  .phx-tiles, .phx-inds, .phx-migs__list, .phx-apps { grid-template-columns: minmax(0, 1fr); }
  .phx-cost__eds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phx-facts { grid-template-columns: minmax(0, 1fr); }
  .phx-finder__ui { padding: 16px; }
  .phx-tile.is-other p:not(.phx-tile__links) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phx-tile, .phx-mig, .phx-app, .phx-goal, .phx-pop__chip { transition: none; }
  .phx-tile.is-match, .phx-mig:hover { transform: none; }
  .phx-metro.is-ready .phx-metro__panel { animation: none; }
}