/* For talent page only (join.html) */

/* Headings that receive focus after an in-page jump */
.join-hero [tabindex="-1"]:focus, main h2[tabindex="-1"]:focus { outline: none; }

/* ---------- Hero ---------- */
.join-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
.join-facts {
  display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--c-line-d);
}
.join-facts li { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #dfe6e2; }
.join-facts__ico { width: 30px; height: 30px; border-radius: 9px; background: rgba(200, 241, 105, 0.12); color: var(--c-lime); }
.join-facts__ico svg { width: 16px; height: 16px; }

.join-hero__media { aspect-ratio: 1 / 0.9; min-height: 480px; }
.join-hero__grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000, transparent); mask-image: radial-gradient(70% 70% at 60% 45%, #000, transparent);
}
.join-hero__orbit { position: absolute; left: 64%; top: 46%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.join-hero__ring {
  position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.16);
  transform: translate(-50%, -50%);
}
.join-hero__ring--1 { width: 210px; height: 210px; border-style: solid; border-color: rgba(200, 241, 105, 0.3); background: radial-gradient(closest-side, rgba(200, 241, 105, 0.12), transparent); }
.join-hero__ring--2 { width: 390px; height: 390px; animation: jh-spin 70s linear infinite; }
.join-hero__ring--3 { width: 590px; height: 590px; border-color: rgba(255, 255, 255, 0.08); animation: jh-spin 110s linear infinite reverse; }
.join-hero__ring--2::before, .join-hero__ring--2::after, .join-hero__ring--3::before {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--c-lime);
  box-shadow: 0 0 0 5px rgba(200, 241, 105, 0.16);
}
.join-hero__ring--2::before { top: -5px; left: 50%; margin-left: -4.5px; }
.join-hero__ring--2::after { bottom: 14.6%; left: 14.6%; margin: 0 0 -4.5px -4.5px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12); }
.join-hero__ring--3::before { top: 50%; right: -5px; margin-top: -4.5px; background: rgba(255, 255, 255, 0.7); box-shadow: none; }
@keyframes jh-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.join-hero__tiles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.join-hero__tiles > span {
  position: absolute; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.join-hero__tiles svg { width: 20px; height: 20px; stroke-width: 1.5; }
.join-hero__tiles > span:nth-child(1) { top: 8%; right: 8%; }
.join-hero__tiles > span:nth-child(2) { top: 23%; right: 25%; }
.join-hero__tiles > span:nth-child(3) { top: 6%; right: 37%; }
.join-hero__tiles > span:nth-child(4) { top: 31%; right: 6%; background: rgba(200, 241, 105, 0.92); color: var(--c-lime-ink); border-color: transparent; }
.join-hero__tiles > span:nth-child(5) { bottom: 30%; left: 7%; }
.join-hero__tiles > span:nth-child(6) { bottom: 24%; left: 33%; }

/* Floating profile card */
.join-hero__profile { top: 7%; left: 6%; width: 300px; z-index: 3; padding: 16px 18px 18px; }
.jh-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.jh-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--c-black); color: var(--c-lime); box-shadow: 0 0 0 3px var(--c-mint);
}
.jh-avatar svg { width: 22px; height: 22px; }
.jh-id { display: grid; gap: 2px; min-width: 0; flex: 1; }
.jh-id .ui-row__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh-head .chip { flex: none; padding: 0 8px; }
.jh-label { display: block; margin: 12px 0 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.jh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jh-split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; }
.jh-split .jh-label { margin: 0; }
.jh-value { font-size: 12.5px; font-weight: 600; }
.jh-bar { margin-top: 8px; }
.jh-bar > span { transform-origin: left center; animation: jh-grow 1.4s 0.9s var(--ease-out) both; }
@keyframes jh-grow { from { transform: scaleX(0); } }

/* Floating project-types card */
.join-hero__types { top: 40%; right: 5%; width: 262px; z-index: 4; }
.join-hero__types .ui-ico--dark { background: rgba(200, 241, 105, 0.12); color: var(--c-lime); }
.join-hero__types .ui-row__label { color: #eef2f0; }

/* Lime pill */
.join-hero__pill {
  left: 6%; bottom: 6%; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px;
  border-radius: 999px; background: var(--c-lime); color: var(--c-lime-ink); font-size: 13px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 18px 40px -16px rgba(5, 8, 7, 0.6); white-space: nowrap;
}
.join-hero__pill .ui-check { width: 22px; height: 22px; background: var(--c-lime-ink); color: var(--c-lime); }

/* ---------- Who can join ---------- */
/* The hidden panel is shifted sideways (below); clip it here so it never widens the page.
   `clip` (not `hidden`) leaves overflow-y visible and creates no scroll container. */
.join-who { overflow-x: clip; }
.who { display: grid; gap: 28px; }
.seg {
  position: relative; justify-self: start; display: inline-flex; gap: 4px; padding: 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--c-line); box-shadow: 0 14px 34px -26px rgba(5, 8, 7, 0.5); max-width: 100%;
}
.seg__ind {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--c-black); opacity: 0; pointer-events: none;
  will-change: transform; transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.2s;
}
.seg.is-ready .seg__ind { opacity: 1; }
.seg__btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px 0 8px;
  border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--c-muted); white-space: nowrap; transition: color 0.35s var(--ease);
}
.seg__ico { width: 36px; height: 36px; border-radius: 50%; background: var(--c-mist); color: var(--c-muted); transition: background-color 0.35s, color 0.35s; }
.seg__ico svg { width: 18px; height: 18px; }
.seg__btn:hover { color: var(--c-text); }
.seg__btn[aria-selected="true"] { color: #fff; }
.seg__btn[aria-selected="true"] .seg__ico { background: var(--c-lime); color: var(--c-lime-ink); }
.seg:not(.is-ready) .seg__btn[aria-selected="true"] { background: var(--c-black); }
.seg__btn:focus-visible { outline-offset: 2px; border-radius: 999px; }

.who__panels { display: grid; }
.who-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 20px; align-items: stretch;
  transition: opacity 0.5s var(--ease), transform 0.65s var(--ease-out), visibility 0s linear 0s;
}
html:not(.js) .who-panel { grid-area: auto; }
.js .who-panel:not(.is-active) {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(var(--who-x, 32px));
  transition: opacity 0.28s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.who-panel[data-who-panel="freelancer"] { --who-x: -32px; }
/* Browsers without overflow-x: clip (e.g. Safari before 16): no sideways offset at all. */
@supports not (overflow-x: clip) {
  .js .who-panel:not(.is-active) { transform: translateY(12px); }
}
.who-panel__types { display: grid; gap: 12px; align-content: start; }
.who-panel__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin: 2px 0 4px; }
.who-type {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 18px; align-items: center; padding: 20px 20px 20px 18px;
  border-radius: 18px; background: #fff; border: 1px solid var(--c-line); color: var(--c-text);
  transition: transform 0.35s var(--ease-out), border-color 0.25s, box-shadow 0.35s var(--ease-out);
}
.who-type:hover { transform: translateY(-3px); border-color: #c6d0c9; box-shadow: var(--shadow-soft); }
.who-type__ico { width: 56px; height: 56px; border-radius: 16px; background: var(--c-mint); color: var(--c-forest); transition: background-color 0.3s, color 0.3s; }
.who-type__ico svg { width: 26px; height: 26px; stroke-width: 1.5; }
.who-type:hover .who-type__ico { background: var(--c-black); color: var(--c-lime); }
.who-type__title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.who-type__desc { font-size: 14px; line-height: 1.5; color: var(--c-muted); margin-top: 4px; }
.who-type__arrow { width: 40px; height: 40px; border-radius: 12px; background: var(--c-mist); transition: background-color 0.2s, transform 0.3s var(--ease-out); }
.who-type__arrow svg { width: 16px; height: 16px; }
.who-type:hover .who-type__arrow { background: var(--c-lime); color: var(--c-lime-ink); transform: translateX(3px); }
.who-panel.is-active .who-type { animation: who-in 0.6s var(--ease-out) backwards; }
.who-panel.is-active .who-type:nth-of-type(2) { animation-delay: 0.06s; }
.who-panel.is-active .who-type:nth-of-type(3) { animation-delay: 0.12s; }
@keyframes who-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.who-info {
  position: relative; overflow: hidden; display: grid; gap: 24px; align-content: start; padding: clamp(24px, 3vw, 40px);
  border-radius: 22px; background: var(--c-black); color: var(--c-text-d);
}
.who-info::before {
  content: ""; position: absolute; right: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 241, 105, 0.2), transparent); pointer-events: none;
}
.who-info > * { position: relative; }
.who-info__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--c-lime); }
.who-info__label svg { width: 18px; height: 18px; }
.who-info .check-list li { font-size: 15.5px; color: #e6ebe8; }
.who-info__block + .who-info__block { padding-top: 24px; border-top: 1px solid var(--c-line-d); }
.who-info__cta { justify-self: start; margin-top: 4px; white-space: normal; text-align: left; }

/* ---------- Work explorer ---------- */
.jx-tabs {
  position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 5px 3px 7px; margin: -5px -3px 26px;
  overscroll-behavior-x: contain;
}
.jx-tabs::-webkit-scrollbar { display: none; }
.jx-tabs__ind {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 12px 34px -14px rgba(200, 241, 105, 0.45); will-change: transform;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.2s;
}
.jx-tabs.is-ready .jx-tabs__ind { opacity: 1; }
.jx-tab {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 7px;
  border-radius: 999px; border: 1px solid var(--c-line-d); background: rgba(255, 255, 255, 0.03); color: var(--c-muted-d);
  font-size: 15px; font-weight: 500; white-space: nowrap; transition: color 0.35s var(--ease), border-color 0.3s, background-color 0.3s;
}
.jx-tab__ico { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: #dfe6e2; transition: background-color 0.35s, color 0.35s; }
.jx-tab__ico svg { width: 18px; height: 18px; }
.jx-tab:hover { color: #fff; border-color: var(--c-line-d2); background: rgba(255, 255, 255, 0.06); }
.jx-tab[aria-selected="true"] { color: var(--c-text); border-color: transparent; background: transparent; }
.jx-tabs:not(.is-ready) .jx-tab[aria-selected="true"] { background: #fff; }
.jx-tab[aria-selected="true"] .jx-tab__ico { background: var(--c-lime); color: var(--c-lime-ink); }
.jx-tab:focus-visible { outline-offset: 2px; border-radius: 999px; }
.jx-tabs__sep {
  flex: none; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 2px 0 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); white-space: nowrap;
}
.jx-tabs__sep::before { content: ""; width: 1px; height: 26px; background: var(--c-line-d2); }

.jx-panel:focus-visible { outline-offset: 2px; border-radius: 14px; }
.jx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; margin-bottom: 22px; }
.jx-head__main { display: grid; gap: 6px; max-width: 640px; }
.jx-head__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-lime); }
.jx-head__kicker--support { color: var(--c-muted-d); }
.jx-head__main p { color: var(--c-muted-d); font-size: 15.5px; }
.jx-head__side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.jx-head__side .link-arrow { color: var(--c-lime); font-size: 14.5px; }
.jx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jx-role {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 228px; padding: 22px;
  border-radius: 18px; background: var(--c-panel); border: 1px solid var(--c-line-d);
  transition: transform 0.35s var(--ease-out), border-color 0.3s, background-color 0.3s;
}
.jx-role::before {
  content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 241, 105, 0.16), transparent); opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.jx-role > * { position: relative; }
.jx-role:hover { transform: translateY(-3px); border-color: rgba(200, 241, 105, 0.4); background: var(--c-panel-2); }
.jx-role:hover::before, .jx-role.is-added::before { opacity: 1; }
.jx-role.is-added { border-color: rgba(200, 241, 105, 0.75); }
.jx-role__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.jx-role__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(200, 241, 105, 0.1); color: var(--c-lime); flex: none; }
.jx-role__ico svg { width: 22px; height: 22px; }
.jx-team {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2;
  background: rgba(255, 255, 255, 0.07); color: #e6ebe8; border: 1px solid var(--c-line-d2); text-align: right;
}
.jx-team svg { width: 13px; height: 13px; color: var(--c-lime); flex: none; }
.jx-role__title { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }
.jx-role__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.jx-role__skills span { font-size: 12.5px; line-height: 1.3; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #cdd6d1; border: 1px solid var(--c-line-d); }
.jx-role__add {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px;
  padding: 0 8px 0 14px; border-radius: 12px; border: 1px solid var(--c-line-d2); color: #fff; font-size: 14px; font-weight: 600; text-align: left;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.jx-role__add-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); flex: none; transition: background-color 0.25s, color 0.25s; }
.jx-role__add-ico svg { width: 15px; height: 15px; }
.jx-role__add .i-check { display: none; }
.jx-role__add[aria-pressed="true"] .i-plus { display: none; }
.jx-role__add[aria-pressed="true"] .i-check { display: block; }
.jx-role__add:hover { border-color: #fff; }
.jx-role__add:hover .jx-role__add-ico { background: var(--c-lime); color: var(--c-lime-ink); }
.jx-role__add[aria-pressed="true"] { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-lime-ink); }
.jx-role__add[aria-pressed="true"] .jx-role__add-ico { background: var(--c-lime-ink); color: var(--c-lime); }
.jx-role__add.is-pop .jx-role__add-ico { animation: jx-pop 0.45s var(--ease-out); }
@keyframes jx-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.jx-tray { padding-top: 18px; }
.jx-tray__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: rgba(200, 241, 105, 0.08); border: 1px solid rgba(200, 241, 105, 0.32);
}
.jx-tray__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--c-lime); color: var(--c-lime-ink); }
.jx-tray__ico svg { width: 19px; height: 19px; }
.jx-tray__text { flex: 1 1 200px; font-size: 15px; font-weight: 600; color: #fff; }
.jx-help {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; padding: 18px 20px;
  border-radius: 16px; border: 1px dashed var(--c-line-d2);
}
.jx-help__ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--c-lime); }
.jx-help__ico svg { width: 19px; height: 19px; }
.jx-help p { flex: 1 1 280px; font-size: 16px; font-weight: 500; color: #e6ebe8; }

/* ---------- How it works ---------- */
.jsteps { position: relative; }
.jsteps__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jsteps__rail {
  position: absolute; left: 14px; right: calc((100% - 60px) / 4 - 14px); top: 13px; height: 2px; border-radius: 2px;
  background: #d5ddd7; overflow: hidden; z-index: 0;
}
.jsteps__fill {
  display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-lime));
  transform-origin: left center; transform: scaleX(var(--p, 0));
}
.jstep { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; gap: 22px; }
.jstep__node {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-mist);
  border: 2px solid #c3cdc6; color: transparent;
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s, transform 0.5s var(--ease-out);
}
.jstep__node svg { width: 14px; height: 14px; stroke-width: 2.6; }
.jstep.is-reached .jstep__node { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-lime-ink); box-shadow: 0 0 0 6px rgba(200, 241, 105, 0.3); transform: scale(1.08); }
.jstep__card {
  display: flex; flex-direction: column; gap: 12px; min-height: 340px; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid var(--c-line);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s;
}
.jstep__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: #c6d0c9; }
.jstep__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jstep__num { font-size: 52px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: #c3ccc6; transition: color 0.6s var(--ease); }
.jstep.is-reached .jstep__num { color: var(--c-text); }
.jstep__card .muted { font-size: 15px; }
.jstep__foot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13.5px; font-weight: 500; }
.jsteps__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 28px; max-width: 780px; font-size: 14.5px; color: var(--c-muted); }
.jsteps__note svg { width: 18px; height: 18px; margin-top: 2px; color: var(--c-teal); flex: none; }

/* ---------- Who handles what ---------- */
.duty { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.duty__col { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3.4vw, 48px); border-radius: var(--r-xl); }
.duty__col--ac { background: linear-gradient(160deg, #142219, var(--c-panel) 60%); border: 1px solid var(--c-line-d); color: var(--c-text-d); }
.duty__col--ac::before {
  content: ""; position: absolute; left: -160px; bottom: -200px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 241, 105, 0.14), transparent); pointer-events: none;
}
.duty__col > * { position: relative; }
.duty__col--you { background: #fff; color: var(--c-text); --tone-muted: var(--c-muted); --tone-line: var(--c-line); }
.duty__head { display: flex; align-items: center; gap: 16px; }
.duty__badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--c-lime); color: var(--c-lime-ink); }
.duty__badge .brand__mark { width: 30px; height: 15px; }
.duty__badge--you { background: var(--c-black); color: var(--c-lime); }
.duty__badge--you svg { width: 26px; height: 26px; }
.duty__list { display: grid; }
.duty__list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0;
  border-top: 1px solid var(--tone-line); transition: transform 0.35s var(--ease-out);
}
.duty__list li:hover { transform: translateX(4px); }
.duty__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; transition: background-color 0.25s, color 0.25s; }
.duty__ico svg { width: 21px; height: 21px; }
.duty__col--ac .duty__ico { background: rgba(200, 241, 105, 0.1); color: var(--c-lime); }
.duty__col--ac li:hover .duty__ico { background: var(--c-lime); color: var(--c-lime-ink); }
.duty__col--you .duty__ico { background: var(--c-mint); color: var(--c-forest); }
.duty__col--you li:hover .duty__ico { background: var(--c-black); color: var(--c-lime); }
.duty__list strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.duty__list p { margin-top: 3px; font-size: 14.5px; color: var(--tone-muted); }
.duty__note { margin-top: auto; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--c-mist); font-size: 14.5px; font-weight: 500; }
.duty__note svg { width: 20px; height: 20px; color: var(--c-teal); flex: none; margin-top: 1px; }
.duty__link {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-lime); color: var(--c-lime-ink); box-shadow: 0 0 0 8px var(--c-black);
}
.duty__link svg { width: 28px; height: 28px; }

.pb { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(340px, 0.98fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.pb__form { display: grid; gap: 20px; min-width: 0; }
.pb-step {
  display: grid; gap: 22px; padding: clamp(20px, 3vw, 34px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease-out);
}
.pb-step:focus-within { border-color: #c6d0c9; box-shadow: var(--shadow-soft); }
.pb-step__head { display: flex; align-items: flex-start; gap: 14px; }
.pb-step__head h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; padding-top: 4px; }
.pb-step__num {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--c-black); color: var(--c-lime); font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
.pb-step:focus-within .pb-step__num { background: var(--c-lime); color: var(--c-lime-ink); }
.pb-step__hint { font-size: 14px; color: var(--c-muted); margin-top: 2px; }
.pb-field { display: grid; gap: 10px; }
.pb-field__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pb-count, .pb-counter { font-family: var(--font-mono); font-size: 12px; color: var(--c-muted); transition: color 0.2s; }
.pb-counter.is-near { color: #b4540f; }
.pb .input::placeholder, .pb .textarea::placeholder { color: var(--c-muted); opacity: 1; }
.pb .textarea { min-height: 128px; }
.pb .pb-links { min-height: 80px; }
.pb #pb-notes { min-height: 96px; }

/* Joining-as cards */
.pb-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pb-type { position: relative; display: block; cursor: pointer; }
.pb-type input { position: absolute; opacity: 0; pointer-events: none; }
.pb-type__box {
  position: relative; display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 46px 16px 14px;
  border-radius: 16px; background: var(--c-mist); border: 1.5px solid transparent;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease-out);
}
.pb-type__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: #fff; color: var(--c-forest); transition: border-radius 0.4s var(--ease-out), background-color 0.25s, color 0.25s; }
.pb-type__ico svg { width: 22px; height: 22px; }
.pb-type__text { display: grid; gap: 2px; min-width: 0; }
.pb-type__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.pb-type__desc { font-size: 13px; line-height: 1.4; color: var(--c-muted); transition: color 0.25s; }
.pb-type__tick {
  position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  border: 1.5px solid #c3cdc6; color: transparent; display: grid; place-items: center; transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.pb-type__tick svg { width: 12px; height: 12px; stroke-width: 2.4; }
.pb-type:hover .pb-type__box { background: #fff; border-color: #c6d0c9; transform: translateY(-2px); }
.pb-type input:checked + .pb-type__box { background: var(--c-black); border-color: var(--c-black); color: #fff; transform: none; }
.pb-type input:checked + .pb-type__box .pb-type__desc { color: var(--c-muted-d); }
.pb-type input:checked + .pb-type__box .pb-type__ico { background: var(--c-lime); color: var(--c-lime-ink); }
.pb-type input:checked + .pb-type__box .pb-type__tick { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-lime-ink); }
.pb-type input:focus-visible + .pb-type__box { outline: 2px solid var(--c-teal); outline-offset: 3px; }

/* Area and role chips */
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chip { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.pb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pb-chip__box {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-text); font-size: 14px; font-weight: 500; line-height: 1.3;
  transition: background-color 0.22s, border-color 0.22s, color 0.22s, transform 0.25s var(--ease-out);
}
.pb-chip__ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--c-mist); color: var(--c-forest); transition: background-color 0.22s, color 0.22s; }
.pb-chip__ico svg { width: 16px; height: 16px; }
.pb-chip__tick {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid #c3cdc6; color: transparent;
  transition: background-color 0.22s, border-color 0.22s, color 0.22s, transform 0.3s var(--ease-out);
}
.pb-chip__tick svg { width: 11px; height: 11px; stroke-width: 2.6; }
.pb-chip:hover .pb-chip__box { border-color: #b4c0b8; transform: translateY(-1px); }
.pb-chip input:checked + .pb-chip__box { background: var(--c-black); border-color: var(--c-black); color: #fff; }
.pb-chip input:checked + .pb-chip__box .pb-chip__ico { background: var(--c-lime); color: var(--c-lime-ink); }
.pb-chip input:checked + .pb-chip__box .pb-chip__tick { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-lime-ink); transform: scale(1.06); }
.pb-chip input:focus-visible + .pb-chip__box { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pb-chip--role .pb-chip__box { min-height: 40px; padding: 8px 14px 8px 10px; font-size: 13.5px; background: #fff; }
.pb-chip__tag { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; background: var(--c-mint); color: var(--c-forest); }
.pb-chip input:checked + .pb-chip__box .pb-chip__tag { background: rgba(200, 241, 105, 0.18); color: var(--c-lime); }
.pb-chips__sep {
  flex: 1 1 100%; display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted);
}
.pb-chips__sep::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.pb-chip.is-locked { cursor: not-allowed; }
.pb-chip.is-locked .pb-chip__box { opacity: 0.55; border-style: dashed; background: transparent; transform: none; }

.pb-roles { display: grid; margin-bottom: -12px; }
.pb-rgroup-wrap { padding-bottom: 12px; }
.pb-rgroup { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--c-mist); }
.pb-rgroup__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--c-forest); }
.pb-rgroup__title svg { width: 16px; height: 16px; }
.pb-rgroup__note { font-size: 12.5px; color: var(--c-muted); }
.pb-empty {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 16px 18px; border-radius: 14px;
  border: 1px dashed #c3cdc6; color: var(--c-muted); font-size: 14.5px;
}
.pb-empty svg { width: 20px; height: 20px; color: var(--c-teal); flex: none; }

/* Option pills with a check ring */
.pb-pills .option span { gap: 8px; padding: 0 16px 0 10px; }
.pb-pills .option span::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1.5px solid #c3cdc6;
  transition: background-color 0.2s, border-color 0.2s;
}
.pb-pills .option:hover span { border-color: #b4c0b8; }
.pb-pills .option input:checked + span::before {
  border-color: var(--c-lime);
  background: var(--c-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230d1a06' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Live preview */
.pb__aside { position: sticky; top: calc(var(--header-h) + 20px); min-width: 0; }
.pv {
  position: relative; overflow: hidden; display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-lg);
  background: var(--c-black); color: var(--c-text-d); box-shadow: 0 40px 80px -48px rgba(5, 8, 7, 0.8);
  /* Fit the sticky panel in the window so the actions stay in view. Rows: bar, meter, body,
     actions, note; only the body row shrinks (and scrolls). The 560px floor is a little more
     than the panel needs with a 160px body, so very short windows never clip the actions. */
  max-height: max(560px, calc(100vh - var(--header-h) - 40px));
  max-height: max(560px, calc(100dvh - var(--header-h) - 40px));
  grid-template-rows: auto auto minmax(160px, 1fr) auto auto;
}
.pv::before {
  content: ""; position: absolute; right: -140px; top: -170px; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 241, 105, 0.2), transparent); pointer-events: none;
}
.pv > * { position: relative; }
.pv__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pv__bar-main { display: grid; gap: 4px; min-width: 0; }
.pv__title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-lime); }
.pv__progress { font-size: 14px; font-weight: 500; color: #e6ebe8; }
.pv__toggle {
  display: none; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 14px; font-weight: 600; transition: background-color 0.2s;
}
.pv__toggle:hover { background: rgba(255, 255, 255, 0.14); }
.pv__toggle svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.pv__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pv__meter { background: rgba(255, 255, 255, 0.1); }
.pv__meter > span { transition: width 0.55s var(--ease-out); }
.pv__body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; border-radius: 16px;
}
.pv-card { display: grid; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-line-d); }
.pv-id { display: flex; align-items: center; gap: 14px; padding: 2px 0 16px; border-radius: 12px; }
.pv-avatar {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--c-lime); color: var(--c-lime-ink); box-shadow: 0 0 0 4px rgba(200, 241, 105, 0.15);
  transition: border-radius 0.45s var(--ease-out);
}
.pv-avatar.is-company { border-radius: 16px; }
.pv-avatar svg { width: 26px; height: 26px; }
.pv-id__text { display: grid; gap: 6px; min-width: 0; }
.pv-name { font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pv-name.is-empty { color: var(--c-muted-d); font-weight: 500; }
.pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--c-muted-d); }
.pv-region { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.pv-region svg { width: 14px; height: 14px; flex: none; }
.pv-region.is-empty { color: var(--c-muted-d); }
.pb-contact-hint { font-size: 13px; line-height: 1.6; color: var(--tone-muted); }
.pb-contact-error { font-size: 13px; line-height: 1.5; color: #a1262e; }
.pb-contact-error[hidden] { display: none; }
.pb .input[aria-invalid="true"] { border-color: #a1262e; }
.pv-contact { display: grid; gap: 12px; min-width: 0; }
.pv-contact > div { display: grid; gap: 4px; min-width: 0; }
.pv-contact dt { font-size: 12px; color: var(--c-muted-d); }
.pv-contact dd { margin: 0; font-size: 14px; line-height: 1.5; color: #e3e9e6; overflow-wrap: anywhere; }
.pv-sec { display: grid; gap: 8px; margin: 0 -10px; padding: 14px 10px; border-top: 1px solid var(--c-line-d); border-radius: 10px; }
.pv-sec[hidden] { display: none; }
.pv-sec__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-chips .chip { height: auto; min-height: 26px; padding: 4px 10px; white-space: normal; line-height: 1.3; }
.pv-chips .chip svg { width: 13px; height: 13px; flex: none; }
.pv-text { font-size: 14px; line-height: 1.6; color: #e3e9e6; white-space: pre-line; overflow-wrap: anywhere; }
.pv-text--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.pv-empty { font-size: 13px; color: var(--c-muted-d); }
.pv-links { display: grid; gap: 6px; }
.pv-links li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.45; color: #e3e9e6; overflow-wrap: anywhere; }
.pv-links svg { width: 14px; height: 14px; margin-top: 2px; color: var(--c-lime); flex: none; }
.pv-avail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.pv-avail span {
  padding: 8px 4px; border-radius: 9px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--c-muted-d);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.pv-avail span.is-on { background: var(--c-lime); color: var(--c-lime-ink); }
.pv__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv__actions .btn { padding: 0 12px; }
.pv__actions .btn svg { width: 17px; height: 17px; }
.pv__clear {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; color: var(--c-muted-d); font-size: 14px; font-weight: 500;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.pv__clear svg { width: 15px; height: 15px; transition: transform 0.6s var(--ease-out); }
.pv__clear:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.pv__clear:hover svg { transform: rotate(-180deg); }
.pv__clear.is-confirm { color: #ffd9cc; background: rgba(255, 122, 82, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 140, 104, 0.5); }
.pv__note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--c-muted-d); }
.pv__note svg { width: 15px; height: 15px; margin-top: 2px; color: var(--c-lime); flex: none; }

/* ---------- FAQ ---------- */
.join-faq__grid { align-items: start; }
.join-faq .section-head { margin-bottom: 0; }
.join-faq .faq summary { transition: color 0.2s; }
.join-faq .faq summary:hover { color: var(--c-teal); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .join-hero__profile { width: 272px; }
  .join-hero__types { width: 240px; }
  .join-hero__pill { display: none; }
  .jsteps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jsteps__rail { display: none; }
  .jstep__card { min-height: 300px; }
}
@media (max-width: 1023px) {
  .join-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .join-hero__media { aspect-ratio: 4 / 3.3; min-height: 0; }
  .who-panel { grid-template-columns: minmax(0, 1fr); }
  .who-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .who-info__block + .who-info__block { padding-top: 0; border-top: 0; }
  .who-info__cta { grid-column: 1 / -1; }
  .jx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duty { grid-template-columns: minmax(0, 1fr); }
  /* the hand-off badge sits between the stacked columns */
  .duty__link { position: relative; left: auto; top: auto; margin: -42px auto; }
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pb__aside { position: static; }
  .pv__toggle { display: inline-flex; }
  .pv { max-height: none; grid-template-rows: none; }
  .pv__body { overflow: visible; }
}
@media (max-width: 760px) {
  .who-info { grid-template-columns: minmax(0, 1fr); }
  .who-info__block + .who-info__block { padding-top: 22px; border-top: 1px solid var(--c-line-d); }
}
@media (max-width: 640px) {
  .join-facts { gap: 10px 18px; }
  .join-facts li { font-size: 13.5px; }
  .join-hero__media { aspect-ratio: 4 / 5; }
  .join-hero__orbit { left: 58%; top: 52%; }
  .join-hero__ring--1 { width: 150px; height: 150px; }
  .join-hero__ring--2 { width: 280px; height: 280px; }
  .join-hero__ring--3 { width: 420px; height: 420px; }
  .join-hero__tiles > span { width: 40px; height: 40px; border-radius: 11px; }
  .join-hero__tiles svg { width: 18px; height: 18px; }
  .join-hero__tiles > span:nth-child(1) { top: 6%; right: 6%; }
  .join-hero__tiles > span:nth-child(2) { top: 46%; right: 9%; }
  .join-hero__tiles > span:nth-child(3), .join-hero__tiles > span:nth-child(5) { display: none; }
  .join-hero__tiles > span:nth-child(4) { top: 19%; right: 4%; }
  .join-hero__tiles > span:nth-child(6) { bottom: 33%; left: 8%; }
  .media .ui-card.join-hero__profile { top: 5%; left: 5%; width: 262px; transform-origin: left top; }
  .media .ui-card.join-hero__types { top: auto; bottom: 5%; right: 4%; width: 232px; transform-origin: right bottom; }
  .join-hero__pill { display: none; }
  .seg { justify-self: stretch; }
  .seg__btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 12px 6px 6px; font-size: 14.5px; gap: 8px; white-space: normal; line-height: 1.2; text-align: left; }
  .seg__ico { width: 32px; height: 32px; }
  .who-type { grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 14px; padding: 16px 14px; }
  .who-type__ico { width: 48px; height: 48px; border-radius: 14px; }
  .who-type__ico svg { width: 22px; height: 22px; }
  .who-type__arrow { width: 32px; height: 32px; border-radius: 10px; }
  .who-type__title { font-size: 16.5px; }
  .who-type__desc { font-size: 13.5px; }
  .who-info__cta { justify-self: stretch; justify-content: space-between; }
  .jx-role { min-height: 0; padding: 18px; }
  .jx-role__title { font-size: 17px; }
  .jsteps__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .jstep { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
  .jstep__node { margin-top: 22px; }
  .jstep:not(:last-child)::before {
    content: ""; position: absolute; left: 13px; top: 56px; bottom: -32px; width: 2px; border-radius: 2px;
    background: #d5ddd7; transition: background-color 0.5s var(--ease);
  }
  .jstep.is-reached:not(:last-child)::before { background: linear-gradient(180deg, var(--c-lime), #d5ddd7); }
  .jstep__card { min-height: 0; padding: 22px; }
  .jstep__num { font-size: 44px; }
  .duty__list li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .duty__ico { width: 40px; height: 40px; }
  .duty__head .h3 { font-size: 24px; }
  .pb-types { grid-template-columns: minmax(0, 1fr); }
  .pb-type__box { padding: 14px 44px 14px 12px; }
  .pv__actions { grid-template-columns: minmax(0, 1fr); }
  .jx-help .btn, .jx-tray .btn { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .jx-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Inline contact links */
.contact-link { color: inherit; font-weight: 600; border-bottom: 1px solid var(--c-lime); }
.contact-link:hover { border-bottom-color: currentColor; }

/* Country calling-code picker, kept inside the contact field on narrow screens. */
.pb-phone-field { min-width: 0; }
.pb-phone { position: relative; display: grid; grid-template-columns: minmax(120px, 46%) minmax(0, 1fr); gap: 8px; }
.pb-phone > .input { width: 100%; min-width: 0; }
.pb-dial-trigger { display: flex; align-items: center; gap: 7px; cursor: pointer; text-align: left; padding-inline: 12px; }
.pb-dial-trigger [data-dial-name] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.pb-dial-trigger [data-dial-code] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-dial-trigger[aria-expanded="true"] { border-color: #537943; }
.pb-dial-panel { position: absolute; z-index: 12; top: calc(100% + 8px); left: 0; width: 100%; padding: 12px; border: 1px solid #d7e0d9; border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(16, 35, 27, .15); color: #172a21; }
.pb-dial-panel[hidden], .pb-dial-empty[hidden] { display: none; }
.pb-dial-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.pb-dial-search { width: 100%; min-width: 0; font-size: 14px; }
.pb-dial-list { list-style: none; padding: 0; margin: 8px -4px -4px; max-height: min(240px, 38svh); overflow-y: auto; overscroll-behavior: contain; }
.pb-dial-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px; border-radius: 7px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.pb-dial-list li > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: #596c60; }
.pb-dial-list li[aria-selected="true"] { background: #e7f5c6; font-weight: 600; }
.pb-dial-list li:hover, .pb-dial-list li.is-active { box-shadow: inset 0 0 0 1px #8aab76; background: #f0f5e9; }
.pb-dial-empty { padding: 18px 6px 8px; font-size: 14px; color: #637467; }