/* LeanScale GTM Ops Jobs — project layer. Loaded last, tokens only. */

/* The kit's highlighter sits at z-index -1; without its own stacking context it paints
   behind the section background once the reveal transform is gone. */
.ls-mark { isolation: isolate; }

/* The kit sets display on .ls-hero-actions, cards and friends, which beats the UA's [hidden]. */
[hidden] { display: none !important; }

/* ── nav ───────────────────────────────────────────────────────────────── */
.ls-brand { display: inline-flex; align-items: center; gap: 10px; }
.jb-brand-tag {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase;
  color: var(--m-purple-600); background: var(--m-lavender-wash); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 4px 9px;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.jb-h1 { font-size: clamp(44px, 6vw, 80px) !important; line-height: 1.02; letter-spacing: -0.045em; margin-top: 28px !important; max-width: 13ch !important; }
.jb-lead { font-size: 19px !important; max-width: 56ch !important; }
.jb-hero-card { max-width: 380px; justify-self: end; }
.jb-card-label { color: var(--ls-lime); }
.jb-hero-card-lead { font-size: 15px; line-height: 1.6; color: var(--fg-on-dark-a86); margin: 12px 0 0; }
.jb-hero-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.jb-hero-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--fg-on-dark); }
.jb-hero-card .m-btn { width: 100%; }

.jb-hero-compact { padding: 44px 0 40px !important; }
.jb-crumbs { display: flex; gap: 10px; font-size: 13px; color: var(--fg-on-dark-3); margin-bottom: 26px; position: relative; z-index: 2; }
.jb-crumbs a { color: var(--fg-on-dark-2); text-decoration: none; }
.jb-crumbs a:hover { color: var(--ls-lime); }
.jb-job-head { display: flex; gap: 22px; align-items: flex-start; position: relative; z-index: 2; }
.jb-head-company { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-on-dark-2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jb-head-company a { color: var(--fg-on-dark); text-decoration: none; }
.jb-job-h1 { font-size: clamp(30px, 4vw, 50px) !important; line-height: 1.08; letter-spacing: var(--tracking-xtight); margin: 8px 0 0 !important; max-width: 22ch !important; }
.jb-hero-compact .ls-hero-actions { margin-top: 30px; position: relative; z-index: 2; }

/* ── logos ─────────────────────────────────────────────────────────────── */
.jb-logo {
  flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--bg-card);
  border: 1px solid var(--border-subtle); display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.jb-logo img { width: 30px; height: 30px; object-fit: contain; }
.jb-logo-letter { font-weight: var(--fw-bold); font-size: 19px; color: var(--m-purple-600); background: var(--m-lavender-wash); }
.jb-logo-lg { width: 76px; height: 76px; border-radius: 20px; }
.jb-logo-lg img { width: 48px; height: 48px; }
.jb-logo-lg.jb-logo-letter { font-size: 30px; }

.jb-logos-band { padding-top: 36px !important; padding-bottom: 36px !important; }
.jb-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.jb-logo-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-ink); text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jb-logo-chip .jb-logo { width: 32px; height: 32px; border-radius: 50%; box-shadow: none; }
.jb-logo-chip .jb-logo img { width: 20px; height: 20px; }
.jb-logo-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--m-purple-300); }

/* ── filters ───────────────────────────────────────────────────────────── */
/* The kit clips sections (for the auras), so the board section opts out to let the bar stick. */
.jb-board { overflow: visible; }
.jb-filters {
  position: sticky; top: 80px; z-index: 20;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle); border-radius: 24px; box-shadow: var(--shadow-lg);
  padding: 16px; display: grid; gap: 12px; margin-bottom: 22px;
}
/* Once stuck under the nav, the bar shrinks to search + practices; the rest returns on scroll-up. */
.jb-filters.is-stuck { padding: 10px 12px; gap: 8px; border-radius: 20px; }
.jb-filters.is-stuck .jb-selects, .jb-filters.is-stuck .jb-match-hint, .jb-filters.is-stuck .jb-sort { display: none; }
.jb-filters.is-stuck .jb-search input { padding-top: 10px; padding-bottom: 10px; }
.jb-filters.is-stuck .jb-pchip { padding: 6px 12px; }
.jb-search { position: relative; }
.jb-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--m-ink-faint); }
.jb-search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--m-ink); background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 13px 18px 13px 46px;
}
.jb-search input:focus { outline: none; border-color: var(--m-purple-400); box-shadow: 0 0 0 4px var(--accent-a14); }
.jb-practices { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-pchip {
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer;
  background: var(--bg-card); color: var(--m-ink-soft); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 8px 14px; display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.jb-pchip b { font-weight: var(--fw-bold); font-size: 11.5px; color: var(--m-ink-faint); }
.jb-pchip:hover { border-color: var(--m-purple-300); color: var(--m-ink); }
.jb-pchip[aria-pressed="true"] { background: var(--m-ink); color: var(--fg-on-dark); border-color: var(--m-ink); }
.jb-pchip[aria-pressed="true"] b { color: var(--ls-lime); }
.jb-selects { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jb-selects select { min-width: 150px; border-radius: var(--radius-pill); padding: 9px 14px; font-size: 13.5px; }
.jb-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-ink-soft); padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--bg-card); cursor: pointer; }
.jb-toggle input { accent-color: var(--m-purple-600); width: 16px; height: 16px; }
.jb-filter-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.jb-count { font-weight: var(--fw-bold); color: var(--m-ink); }
.jb-reset, .jb-reset-inline { font: inherit; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-purple-600); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jb-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--m-ink-faint); font-weight: var(--fw-semibold); }
.jb-sort select { border-radius: var(--radius-pill); padding: 6px 12px; font-size: 13px; }

/* ── job cards ─────────────────────────────────────────────────────────── */
.jb-list { display: grid; gap: 12px; }
.jb-job {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jb-job:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.jb-job[hidden] { display: none; }
.jb-job-featured { border-color: var(--m-purple-300); background: linear-gradient(120deg, var(--m-lime-wash), var(--bg-card) 42%); }
.jb-job-main { min-width: 0; }
.jb-job-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jb-company { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-ink-soft); text-decoration: none; }
.jb-company:hover { color: var(--m-purple-600); }
.jb-title { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; margin: 3px 0 0; }
.jb-title a { color: var(--m-ink); text-decoration: none; }
.jb-title a:hover { color: var(--m-purple-600); }
.jb-title a::after { content: ""; position: absolute; inset: 0; } /* whole card opens the role */
.jb-job { position: relative; }
.jb-job a:not(.jb-title a), .jb-job .jb-apply { position: relative; z-index: 2; }
.jb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 7px; font-size: 13.5px; color: var(--m-ink-soft); }
.jb-meta > span:not(:first-child)::before { content: "·"; margin-right: 14px; color: var(--m-ink-faint); }
.jb-meta > .jb-flag::before, .jb-meta > .jb-pay::before { content: none !important; margin: 0 !important; }
.jb-flag { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--m-purple-700); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 3px 9px; }
.jb-pay { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-lime-ink); background: var(--m-lime-wash); border-radius: var(--radius-pill); padding: 3px 10px; }
.jb-meta-dark { color: var(--fg-on-dark-2); margin-top: 14px; }
.jb-meta-dark > span:not(:first-child)::before { color: var(--fg-on-dark-3); }
.jb-meta-dark .jb-flag { background: rgba(255,251,255,0.12); color: var(--fg-on-dark); }
.jb-meta-dark .jb-pay { background: var(--ls-lime); color: var(--m-ink); }

.jb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.jb-practice, .jb-level, .jb-tool {
  font-size: 11.5px; font-weight: var(--fw-semibold); border-radius: var(--radius-pill); padding: 4px 10px;
  border: 1px solid var(--border-subtle); color: var(--m-ink-soft); background: var(--m-surface); text-decoration: none; white-space: nowrap;
}
.jb-practice { font-weight: var(--fw-bold); border-color: transparent; }
.jb-p-revops.jb-practice { background: var(--m-lavender-wash); color: var(--m-purple-700); }
.jb-p-marketing-ops.jb-practice { background: var(--m-pink-wash); color: var(--m-pink-ink); }
.jb-p-gtm-engineering.jb-practice { background: var(--m-lime-wash); color: var(--m-lime-ink); }
.jb-p-finops.jb-practice { background: var(--m-surface-3); color: var(--m-ink); }
a.jb-tool { color: var(--m-purple-700); border-color: var(--m-purple-300); background: var(--bg-card); }
a.jb-tool::after { content: " →"; color: var(--m-purple-400); }
a.jb-tool:hover { border-color: var(--m-purple-300); color: var(--m-purple-600); }
.jb-tool-more { color: var(--m-ink-faint); }
.jb-tags-lg .jb-practice, .jb-tags-lg .jb-level, .jb-tags-lg .jb-tool { font-size: 13px; padding: 6px 13px; }

.jb-badge {
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase;
  color: var(--m-purple-700); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 3px 9px;
}
.jb-badge-hiring { background: var(--ls-lime); color: var(--m-ink); }
.jb-badge-dark { background: rgba(232,255,207,0.16); color: var(--ls-lime); }

.jb-job-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.jb-posted { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--m-ink-faint); white-space: nowrap; }
.jb-posted.jb-new { color: var(--m-lime-ink); background: var(--m-lime-wash); border-radius: var(--radius-pill); padding: 3px 9px; }
.jb-apply { padding: 9px 16px; }

.jb-empty { text-align: center; padding: 60px 20px; background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); }
.jb-empty h3 { font-size: 22px; margin: 0 0 8px; }
.jb-empty p { color: var(--m-ink-soft); margin: 0; }

/* ── partners ──────────────────────────────────────────────────────────── */
.jb-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.jb-partner {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  padding: 14px 16px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jb-partner .jb-logo { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; }
.jb-partner .jb-logo img { width: 26px; height: 26px; }
.jb-partner-name { font-weight: var(--fw-bold); color: var(--m-ink); font-size: 15px; }
.jb-partner-n { font-size: 12.5px; color: var(--m-ink-faint); font-weight: var(--fw-semibold); }
.jb-partner:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }

/* ── hiring teams ──────────────────────────────────────────────────────── */
.jb-hiring { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: start; }
.jb-offers { display: grid; gap: 14px; }
.jb-offer { padding: 24px 26px; }
.jb-offer-n { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); color: var(--m-purple-500); }
.jb-offer h3 { font-size: 21px; margin: 6px 0 8px; }
.jb-offer p { margin: 0; color: var(--m-ink-soft); line-height: 1.6; font-size: 15px; }
.jb-form-card { padding: 30px; }
.jb-form-card h3 { font-size: 24px; margin: 0 0 18px; }
.jb-form { display: grid; gap: 14px; }
.jb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jb-form label > span { display: block; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-ink-soft); margin-bottom: 6px; }
.jb-form .m-input { width: 100%; font-size: 16px; }
.jb-form textarea { resize: vertical; }
.jb-checks { border: 0; padding: 0; margin: 2px 0; display: grid; gap: 8px; }
.jb-checks legend { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-ink-soft); margin-bottom: 8px; padding: 0; }
.jb-checks label { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--m-ink); cursor: pointer; }
.jb-checks input { accent-color: var(--m-purple-600); width: 17px; height: 17px; }
.jb-form button { justify-self: start; }

/* ── alerts CTA ────────────────────────────────────────────────────────── */
.jb-alerts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px auto 0; max-width: 680px; position: relative; z-index: 2; }
.jb-alerts .m-input { font-size: 16px; border-radius: var(--radius-pill); padding: 12px 18px; }
.jb-alerts input[type="email"] { flex: 1 1 240px; }
.jb-alerts select { flex: 0 1 220px; }
.jb-side-card .jb-alerts { margin: 14px 0 0; flex-direction: column; }
.jb-side-card .jb-alerts select, .jb-side-card .jb-alerts input { flex: none; width: 100%; }

/* ── role + company pages ──────────────────────────────────────────────── */
.jb-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.jb-detail-main > .jb-tags:first-child { margin-top: 0; }
.jb-h2 { font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 12px; }
.jb-sub { color: var(--m-ink-soft); margin: -4px 0 4px; font-size: 14.5px; }
.jb-excerpt { font-size: 17px; line-height: 1.7; color: var(--m-ink); margin: 0 0 12px; max-width: 68ch; }
.jb-readmore { font-weight: var(--fw-bold); color: var(--m-purple-600); }
.jb-list-tight .jb-job { padding: 16px 18px; }
.jb-detail-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.jb-side-card { padding: 24px; }
.jb-side-card h3 { font-size: 20px; margin: 8px 0 8px; }
.jb-side-card p { margin: 0 0 16px; color: var(--m-ink-soft); line-height: 1.6; font-size: 14.5px; }
.jb-side-card .m-btn { width: 100%; }
.jb-side-quiet { background: var(--m-surface); box-shadow: none; }
.jb-side-quiet .m-btn-lime { background: var(--m-ink); color: var(--fg-on-dark) !important; }
.jb-thanks-h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: var(--tracking-xtight); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .jb-hero-card { justify-self: stretch; max-width: none; }
  .jb-hiring, .jb-detail { grid-template-columns: 1fr; }
  .jb-detail-side { position: static; }
  .jb-filters { top: 68px; }
}
@media (max-width: 640px) {
  .ls-nav .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; }
  .jb-navlinks { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; gap: 18px; }
  .ls-nav-cta { padding: 8px 14px; }
  .jb-selects { display: none; }
  .jb-filters.is-open .jb-selects { display: flex; }
  .jb-filters-toggle { display: inline-flex; }
  .jb-filters { position: static; padding: 12px; border-radius: 20px; }
  .jb-practices { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .jb-pchip { flex: none; }
  .jb-selects > label:not(.jb-toggle) { flex: 1 1 45%; min-width: 0; }
  .jb-selects select { width: 100%; min-width: 0; font-size: 16px; }
  .jb-toggle { flex: 1 1 40%; justify-content: center; }
  .jb-sort { margin-left: 0; }
  .jb-sort select { font-size: 16px; }
  .jb-job { grid-template-columns: auto 1fr; padding: 16px; gap: 14px; }
  .jb-job .jb-logo { width: 40px; height: 40px; border-radius: 12px; }
  .jb-job .jb-logo img { width: 24px; height: 24px; }
  .jb-job-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .jb-title { font-size: 16.5px; }
  .jb-form-row { grid-template-columns: 1fr; }
  .jb-job-head { flex-direction: column; gap: 16px; }
  .jb-logo-lg { width: 60px; height: 60px; border-radius: 16px; }
  .jb-logo-lg img { width: 38px; height: 38px; }
  .jb-logo-row .jb-logo-chip:nth-child(n+9) { display: none; }
  .jb-alerts select { flex: 1 1 100%; }
  .jb-hero-compact .ls-hero-actions .m-btn { flex: 1 1 auto; }
}

/* ══ Operator cards ═══════════════════════════════════════════════════════ */

/* board band */
.op-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 32px; padding: 28px;
  box-shadow: var(--shadow-lg); text-decoration: none; color: var(--m-ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.op-band:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.op-band img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-dark); }
.op-band h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 10px 0 12px; letter-spacing: var(--tracking-xtight); }
.op-band p { color: var(--m-ink-soft); line-height: 1.65; margin: 0 0 20px; font-size: 16px; }

/* builder hero */
.op-hero-card img { width: 100%; max-width: 560px; height: auto; border-radius: 22px; box-shadow: 0 32px 80px rgba(10,3,14,0.55); transform: rotate(-2deg); animation: lsFloatY 9s ease-in-out infinite; }
.op-hero-card { display: flex; justify-content: flex-end; }
.op-values { grid-template-columns: repeat(3, 1fr); }

/* builder layout */
.op-builder { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; align-items: start; }
.op-build { overflow: visible; }
.op-form { display: grid; gap: 16px; }
.op-step { border: 1px solid var(--border-subtle); padding: 26px 26px 24px; margin: 0; display: grid; gap: 14px; min-width: 0; }
.op-step legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 21px; font-weight: var(--fw-bold); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }
.op-step legend span { width: 30px; height: 30px; border-radius: 50%; background: var(--m-ink); color: var(--ls-lime); display: grid; place-items: center; font-size: 14px; }
.op-step legend em { font-style: normal; font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--m-purple-700); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 4px 10px; margin-left: 4px; }
.op-step .jb-sub { margin: 0; }
.op-form label > span { display: block; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-ink-soft); margin-bottom: 6px; }
.op-form label > span small { font-weight: var(--fw-semibold); color: var(--m-ink-faint); }
.op-form .m-input { width: 100%; font-size: 16px; }
.op-form textarea { resize: vertical; }
.op-row-3 { grid-template-columns: 1fr 1fr 140px; }
.op-inline { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--m-ink); line-height: 1.5; cursor: pointer; }
.op-inline input { accent-color: var(--m-purple-600); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.op-inline input:disabled + * , .op-inline:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.op-consent { padding: 4px 6px; font-weight: var(--fw-semibold); }
.op-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.op-errors { background: var(--m-pink-wash); color: var(--m-ink); border: 1px solid var(--m-pink-ink); border-radius: var(--radius-card); padding: 16px 20px; font-size: 14.5px; }
.op-errors ul { margin: 6px 0 0; padding-left: 18px; }
.op-invalid { border-color: var(--m-pink-ink) !important; box-shadow: 0 0 0 3px rgba(176,86,143,0.15) !important; }

/* stack picker */
.op-picked { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 36px; }
.op-empty { color: var(--m-ink-faint) !important; }
.op-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: var(--fw-semibold); background: var(--m-ink); color: var(--fg-on-dark); border-radius: var(--radius-pill); padding: 4px 6px 4px 4px; }
.op-chip-driver { box-shadow: 0 0 0 2px var(--ls-lime), 0 0 14px rgba(200,232,158,0.5); }
.op-star, .op-x { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.op-star { color: var(--ls-lime); }
.op-star:hover, .op-x:hover { background: rgba(255,255,255,0.14); }
.op-picked-n { margin-left: 4px !important; font-size: 12.5px; }
.op-tool-search input { padding-top: 11px; padding-bottom: 11px; }
.op-tool-tabs { margin-top: -2px; }
.op-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px 4px 4px 0; overscroll-behavior: contain; }
.op-pick {
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-ink); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.op-pick img { width: 28px; height: 20px; object-fit: contain; flex: none; }
.op-pick span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-pick:hover { border-color: var(--m-purple-300); transform: translateY(-1px); }
.op-pick[aria-pressed="true"] { background: var(--m-lavender-wash); border-color: var(--m-purple-500); box-shadow: inset 0 0 0 1px var(--m-purple-500); }
.op-tool-letter { width: 28px; height: 20px; flex: none; display: grid; place-items: center; font-weight: var(--fw-bold); color: var(--m-purple-600); background: var(--m-lavender-wash); border-radius: 6px; font-size: 12px; }

/* builds */
.op-build-groups { display: grid; gap: 8px; }
.op-build-group { border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--m-surface); }
.op-build-group summary { cursor: pointer; padding: 12px 16px; font-weight: var(--fw-bold); font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 8px; }
.op-build-group summary::-webkit-details-marker { display: none; }
.op-build-group summary::after { content: "+"; margin-left: auto; color: var(--m-ink-faint); font-weight: var(--fw-semibold); }
.op-build-group[open] summary::after { content: "–"; }
.op-build-group summary b { font-size: 11.5px; background: var(--m-ink); color: var(--ls-lime); border-radius: var(--radius-pill); padding: 2px 8px; }
.op-build-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.op-bpick { font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--bg-card); color: var(--m-ink-soft); border: 1px solid var(--border-subtle); }
.op-bpick:hover { border-color: var(--m-purple-300); color: var(--m-ink); }
.op-bpick[aria-pressed="true"] { background: var(--m-ink); color: var(--fg-on-dark); border-color: var(--m-ink); }
.op-bpick[aria-pressed="true"]::before { content: "✓ "; color: var(--ls-lime); }

/* status */
.op-private { background: linear-gradient(160deg, var(--m-lavender-wash), var(--bg-card) 55%); }
.op-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-radio { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 40px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-card); cursor: pointer; }
.op-radio input { position: absolute; left: 14px; top: 15px; accent-color: var(--m-purple-600); width: 16px; height: 16px; }
.op-radio b { font-size: 14px; }
.op-radio small { color: var(--m-ink-soft); font-size: 12.5px; }
.op-radio:has(input:checked) { border-color: var(--m-purple-500); box-shadow: inset 0 0 0 1px var(--m-purple-500); }
.op-count { font-size: 12.5px !important; }

/* sticky preview + read */
.op-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.op-mini {
  border-radius: 20px; padding: 18px 20px; color: var(--fg-on-dark); aspect-ratio: 1200 / 630; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(circle at 8% 112%, rgba(176,87,216,0.6), transparent 48%), radial-gradient(circle at 96% -12%, rgba(107,78,160,0.65), transparent 52%), linear-gradient(150deg, #3A1F40, #241228 62%, #1A0D1E);
  box-shadow: var(--shadow-dark);
}
.op-mini-top { display: flex; align-items: center; gap: 6px; font-size: 7.5px; font-weight: var(--fw-bold); letter-spacing: .16em; color: var(--fg-on-dark-2); }
.op-mini-top img { height: 12px; }
.op-mini-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; flex: 1; margin-top: 10px; min-height: 0; }
.op-mini-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-mini-name { font-size: 22px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; overflow-wrap: anywhere; }
.op-mini-head { font-size: 10.5px; color: var(--fg-on-dark-a86); line-height: 1.35; }
.op-mini-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.op-mini-chips span { font-size: 8px; font-weight: var(--fw-bold); border: 1px solid var(--border-on-dark); background: rgba(251,248,252,0.08); border-radius: 99px; padding: 2px 7px; }
.op-mini-chips .op-mini-status { background: var(--ls-lime); color: var(--m-ink); border-color: transparent; }
.op-mini-quote { border-left: 2px solid var(--ls-lime); padding-left: 7px; font-size: 9px; line-height: 1.4; color: var(--fg-on-dark-a86); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.op-mini-right { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.op-mini-label { font-size: 6.5px; font-weight: var(--fw-bold); letter-spacing: .16em; color: var(--ls-lime); }
.op-mini-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.op-mini-logos span { background: #fff; border-radius: 6px; height: 22px; display: grid; place-items: center; font-size: 6px; font-weight: 800; color: var(--m-purple-600); border: 1.5px solid transparent; overflow: hidden; }
.op-mini-logos span.on { border-color: var(--ls-lime); box-shadow: 0 0 6px rgba(232,255,207,0.6); }
.op-mini-logos img { max-width: 80%; max-height: 13px; object-fit: contain; }
.op-mini-logos em { grid-column: 1 / -1; font-size: 9px; color: var(--fg-on-dark-3); font-style: normal; }
.op-mini-builds { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.op-mini-builds li { font-size: 8.5px; font-weight: var(--fw-bold); display: flex; gap: 5px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-mini-builds li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ls-lime); flex: none; }
.op-mini-builds li.more { color: var(--fg-on-dark-3); }
.op-mini-builds li.more::before { display: none; }
.op-read-card { padding: 22px; }

/* market read */
.op-read { display: grid; gap: 14px; margin-top: 10px; }
.op-read-hero { display: flex; gap: 14px; align-items: center; }
.op-read-hero b { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; color: var(--m-purple-600); line-height: 1; }
.op-read-hero span { font-size: 14px; color: var(--m-ink-soft); line-height: 1.45; }
.op-read-bars { display: grid; gap: 7px; }
.op-bar { display: grid; grid-template-columns: 110px 1fr 28px; gap: 10px; align-items: center; font-size: 13px; text-decoration: none; color: var(--m-ink); }
.op-bar-name { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-bar-track { height: 8px; background: var(--m-surface-2); border-radius: 99px; overflow: hidden; }
.op-bar-track i { display: block; height: 100%; background: var(--m-purple-600); border-radius: 99px; }
.op-bar b { text-align: right; font-size: 12.5px; }
.op-bar:hover .op-bar-track i { background: var(--m-purple-500); }
.op-read-note { font-size: 12.5px !important; }
.op-read-pay { display: grid; gap: 4px; background: var(--m-lime-wash); border-radius: 16px; padding: 14px 16px; }
.op-read-pay b { font-size: 24px; letter-spacing: -0.02em; color: var(--m-ink); }
.op-read-pay span:last-child { font-size: 12.5px; color: var(--m-ink-soft); }
.op-read-label { margin-bottom: -6px; }
.op-read-matches, .op-matches { display: grid; gap: 6px; }
.op-read-matches a, .op-match { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--m-surface); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--m-ink); }
.op-read-matches a:hover, .op-match:hover { border-color: var(--m-purple-300); }
.op-read-matches b, .op-match b { font-size: 13.5px; }
.op-read-matches span, .op-match span { font-size: 12px; color: var(--m-ink-soft); }
.op-matches { margin-top: 10px; }
.op-matches .jb-readmore { font-size: 13.5px; margin-top: 4px; }

/* card page */
.op-hero .wrap { position: relative; z-index: 2; }
.op-card-wrap { max-width: 900px; }
.op-card-img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 32px 80px rgba(10,3,14,0.55); border: 1px solid rgba(255,255,255,0.12); background: #241228; }
.op-actions { margin-top: 26px; }
.op-owner { padding: 26px; margin-bottom: 10px; border-color: var(--m-purple-300); }
.op-owner .jb-h2 { margin-top: 6px; }
.op-owner-foot { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.op-headline { font-size: 18px; color: var(--m-ink-soft); margin: 0 0 4px; }
.op-headline b { color: var(--m-ink); }
.op-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.op-tool { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--m-ink); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.op-tool img, .op-tool .op-tool-letter { grid-row: span 2; width: 36px; height: 28px; object-fit: contain; }
.op-tool span:not(.op-tool-letter) { font-weight: var(--fw-bold); font-size: 14.5px; }
.op-tool b { font-size: 12px; font-weight: var(--fw-semibold); color: var(--m-ink-faint); }
.op-tool:hover { transform: translateY(-3px); border-color: var(--m-purple-300); box-shadow: var(--shadow-md); }
.op-tool-driver { border-color: var(--m-purple-500); box-shadow: inset 0 0 0 1px var(--m-purple-500); }
.op-builds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-builds li { display: grid; gap: 2px; padding: 12px 14px 12px 34px; position: relative; border-radius: 14px; background: var(--m-surface-2); }
.op-builds li::before { content: ""; position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-purple-600); }
.op-builds span { font-weight: var(--fw-bold); font-size: 14.5px; }
.op-builds small { color: var(--m-ink-faint); font-size: 12px; }
.op-quote { margin: 0; font-size: 20px; line-height: 1.5; padding: 4px 0 4px 20px; border-left: 4px solid var(--ls-lime); color: var(--m-ink); font-weight: var(--fw-semibold); max-width: 60ch; }
.op-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--m-ink); color: var(--fg-on-dark); padding: 14px 20px; border-radius: 16px; box-shadow: var(--shadow-xl); font-size: 14.5px; max-width: min(560px, calc(100vw - 32px)); transition: opacity 400ms ease, transform 400ms ease; }
.op-toast b { color: var(--ls-lime); }
.op-toast-out { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

@media (max-width: 1100px) {
  .op-builder { grid-template-columns: 1fr; }
  .op-side { position: static; order: 0; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 960px) {
  .op-band { grid-template-columns: 1fr; gap: 20px; }
  .op-values { grid-template-columns: 1fr; }
  .op-hero-card { justify-content: center; margin-top: 10px; }
}
@media (max-width: 640px) {
  .op-side { grid-template-columns: 1fr; }
  .op-row-3, .op-status, .op-builds { grid-template-columns: 1fr; }
  .op-step { padding: 20px 16px; }
  .op-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 300px; }
  .op-mini-name { font-size: 18px; }
  .op-band { padding: 18px; border-radius: 24px; }
}

/* ══ The operator gallery ═════════════════════════════════════════════════ */
.gl { overflow: visible; }
.gl-h1 { max-width: 16ch !important; }
.gl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.gl-tabs { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 4px; box-shadow: var(--shadow-xs); }
.gl-tab { font: inherit; font-size: 14px; font-weight: var(--fw-bold); cursor: pointer; border: 0; background: none; color: var(--m-ink-soft); padding: 9px 18px; border-radius: var(--radius-pill); display: inline-flex; gap: 8px; align-items: center; }
.gl-tab b { font-size: 11.5px; color: var(--m-ink-faint); }
.gl-tab[aria-selected="true"] { background: var(--m-ink); color: var(--fg-on-dark); }
.gl-tab[aria-selected="true"] b { color: var(--ls-lime); }
.gl-search { flex: 1 1 260px; }
.gl-search input { padding-top: 11px; padding-bottom: 11px; }
.gl-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gl-controls select { border-radius: var(--radius-pill); padding: 9px 14px; font-size: 13.5px; min-width: 140px; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 22px; }
.gl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-grid-ops { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* a build tile: the shot is the hero, everything else is quiet */
.gl-tile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--m-ink); min-width: 0; }
.gl-thumb { position: relative; display: block; aspect-ratio: 1200 / 630; border-radius: 18px; overflow: hidden; background: #241228; box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gl-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px 18px; color: var(--fg-on-dark);
  background: linear-gradient(to top, rgba(26,13,30,0.92), rgba(26,13,30,0.35) 55%, transparent); opacity: 0; transition: opacity var(--dur) var(--ease); }
.gl-hover b { font-size: 16px; color: var(--ls-lime); line-height: 1.3; }
.gl-hover span { font-size: 12px; font-weight: var(--fw-semibold); color: var(--fg-on-dark-2); }
.gl-tile:hover .gl-thumb { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.gl-tile:hover .gl-hover, .gl-tile:focus-visible .gl-hover { opacity: 1; }
.gl-tile-title { font-size: 15.5px; font-weight: var(--fw-bold); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-tile-outcome { font-size: 13px; color: var(--m-lime-ink); font-weight: var(--fw-bold); margin-top: -4px; }
.gl-tile-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--m-ink-soft); min-width: 0; }
.gl-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--m-ink); color: var(--ls-lime); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; flex: none; }
.gl-by { font-weight: var(--fw-semibold); color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-star { color: var(--m-purple-500); font-size: 12px; }
.gl-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.gl-tools img { width: 22px; height: 16px; object-fit: contain; filter: saturate(0.9); }
.gl-props { font-weight: var(--fw-bold); color: var(--m-ink-faint); white-space: nowrap; }

/* an operator tile */
.gl-op { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--m-ink); padding: 12px 12px 16px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.gl-op:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.gl-op-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 14px; background: #241228; }
.gl-op-row { display: flex; gap: 10px; align-items: center; padding: 0 4px; }
.gl-op-who { display: grid; min-width: 0; }
.gl-op-who b { font-size: 15.5px; }
.gl-op-who small { font-size: 12.5px; color: var(--m-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-op-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.bd-founding-badge { background: var(--m-ink); color: var(--ls-lime); }

/* founding empty state */
.gl-founding { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 32px; padding: 36px; box-shadow: var(--shadow-lg); }
.gl-founding h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 10px 0 12px; letter-spacing: var(--tracking-xtight); }
.gl-founding p { color: var(--m-ink-soft); line-height: 1.65; margin: 0 0 22px; }
.gl-ghosts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gl-ghost { aspect-ratio: 1200 / 630; border-radius: 16px; border: 2px dashed var(--m-purple-300); background: repeating-linear-gradient(135deg, var(--m-surface), var(--m-surface) 10px, var(--m-surface-2) 10px, var(--m-surface-2) 20px); display: grid; place-items: center; padding: 14px; text-align: center; }
.gl-ghost span { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--m-purple-700); background: var(--bg-card); border-radius: var(--radius-pill); padding: 6px 12px; box-shadow: var(--shadow-xs); }

/* ══ A build page ═════════════════════════════════════════════════════════ */
.bd-hero .wrap { position: relative; z-index: 2; }
.bd-type { display: inline-block; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--ls-lime); }
.bd-title { margin-top: 8px !important; max-width: 24ch !important; }
.bd-outcome { font-size: clamp(20px, 2.2vw, 26px); font-weight: var(--fw-bold); color: var(--ls-lime); margin: 12px 0 0; text-shadow: 0 0 24px rgba(200,232,158,0.4); }
.bd-by { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--fg-on-dark); text-decoration: none; }
.bd-by > span:last-child { display: grid; }
.bd-by b { font-size: 16px; }
.bd-by-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-by small { font-size: 13.5px; color: var(--fg-on-dark-2); }
.bd-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ls-lime); color: var(--m-ink); display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.bd-founding { font-style: normal; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--ls-lime); background: rgba(232,255,207,0.14); border-radius: var(--radius-pill); padding: 3px 8px; }
.bd-actions { margin-top: 26px; }
.bd-props { gap: 8px; }
.bd-props b { font-weight: 800; }
.bd-props.is-on { background: var(--m-ink); color: var(--ls-lime) !important; box-shadow: inset 0 0 0 1px var(--ls-lime); }
.bd-props.is-pop span { animation: bdPop 500ms var(--ease-rise); display: inline-block; }
@keyframes bdPop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.bd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.bd-main { min-width: 0; }
.bd-shot { margin: 0 0 18px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); background: var(--bg-card); }
.bd-shot img { display: block; width: 100%; height: auto; }
.bd-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 18px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.bd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bd-prose p { font-size: 17px; line-height: 1.75; color: var(--m-ink); margin: 0 0 14px; max-width: 68ch; }
.bd-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.bd-stack { display: grid; gap: 8px; margin: 12px 0 14px; }
.bd-tool { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--m-ink); font-weight: var(--fw-bold); font-size: 14px; }
.bd-tool img { width: 32px; height: 22px; object-fit: contain; }
.bd-tool:hover { border-color: var(--m-purple-300); }
.bd-roles { font-size: 13.5px; }
.bd-maker { display: grid; gap: 10px; text-decoration: none; color: var(--m-ink); }
.bd-maker img { width: 100%; height: auto; border-radius: 12px; }
.bd-report { margin: 0; text-align: center; font-size: 13px; }
.bd-cta { margin-top: 48px; grid-template-columns: 1fr; }

/* ══ Post a build ═════════════════════════════════════════════════════════ */
.bf-gate { padding: 40px; text-align: center; max-width: 640px; margin: 0 auto; }
.bf-gate h2 { font-size: 30px; margin: 0 0 12px; }
.bf-gate p { color: var(--m-ink-soft); line-height: 1.6; margin: 0 0 22px; }
.bf-drop { display: grid !important; place-items: center; gap: 4px; text-align: center; padding: 30px 20px; border: 2px dashed var(--m-purple-300); border-radius: 18px; background: var(--m-surface); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.bf-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bf-drop b { font-size: 16px; color: var(--m-ink); }
.bf-drop span { font-size: 13px !important; color: var(--m-ink-soft) !important; font-weight: var(--fw-semibold) !important; margin: 0 !important; }
.bf-drop.on, .bf-drop:hover { background: var(--m-lavender-wash); border-color: var(--m-purple-500); }
.bf-drop:focus-within { box-shadow: 0 0 0 4px var(--accent-a14); }
.bf-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bf-shots:empty { display: none; }
.bf-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-subtle); background: var(--m-surface); aspect-ratio: 16 / 10; }
.bf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-cover { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; background: var(--ls-lime); color: var(--m-ink); border-radius: var(--radius-pill); padding: 3px 8px; }
.bf-shot-actions { position: absolute; inset: auto 0 0 0; display: flex; gap: 6px; justify-content: flex-end; padding: 8px; background: linear-gradient(to top, rgba(26,13,30,0.7), transparent); }
.bf-shot-actions button { font: inherit; font-size: 11.5px; font-weight: var(--fw-bold); cursor: pointer; border: 0; border-radius: var(--radius-pill); padding: 4px 9px; background: rgba(255,255,255,0.92); color: var(--m-ink); }
.bf-safety { background: var(--m-lime-wash); border: 1px solid rgba(74,138,46,0.25); border-radius: var(--radius-card); padding: 18px 20px; display: grid; gap: 8px; }
.bf-safety b { font-size: 15px; }
.bf-safety p { margin: 0; font-size: 14px; color: var(--m-ink-soft); line-height: 1.55; }
.gl-tile-preview { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 22px; padding: 14px 14px 16px; box-shadow: var(--shadow-lg); }
.gl-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-on-dark-3); font-weight: var(--fw-bold); font-size: 14px; }
.gl-thumb-stack { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 18px; background: radial-gradient(circle at 10% 110%, rgba(176,87,216,0.6), transparent 50%), linear-gradient(150deg, #3A1F40, #1A0D1E); }
.gl-thumb-stack span { width: 30%; height: 38%; background: #fff; border-radius: 12px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--m-purple-600); }
.gl-thumb-stack img { max-width: 70%; max-height: 55%; object-fit: contain; }
.bf-tips { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--m-ink-soft); line-height: 1.5; }
.bf-tips b { color: var(--m-ink); }
.op-post-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; margin-top: 18px; border-color: var(--m-purple-300); }
.op-post-cta > div { display: grid; gap: 2px; }
.op-post-cta span { font-size: 14px; color: var(--m-ink-soft); }
.op-post-cta .m-btn { white-space: nowrap; flex: none; }

@media (max-width: 1100px) {
  .bd-layout { grid-template-columns: 1fr; }
  .bd-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .gl-founding { grid-template-columns: 1fr; padding: 24px; }
  .gl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gl-grid, .gl-grid-2, .gl-grid-3, .gl-grid-ops { grid-template-columns: 1fr; }
  .gl-tabs { width: 100%; }
  .gl-tab { flex: 1; justify-content: center; }
  .gl-controls { width: 100%; }
  .gl-controls > label { flex: 1 1 45%; }
  .gl-controls select { width: 100%; min-width: 0; font-size: 16px; }
  .gl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 0 16px 2px; scrollbar-width: none; }
  .gl-chips .jb-pchip { flex: none; }
  .gl-hover { opacity: 1; background: linear-gradient(to top, rgba(26,13,30,0.85), transparent 60%); }
  .gl-hover span { display: none; }
  .bd-side { grid-template-columns: 1fr; }
  .op-post-cta { flex-direction: column; align-items: stretch; }
}

/* ══ Plays ════════════════════════════════════════════════════════════════ */
.gl-avatar.is-team, .bd-avatar.is-team { background: var(--ls-dark-purple); border: 2px solid var(--ls-lime); overflow: hidden; }
.gl-avatar.is-team img { width: 70%; height: auto; }
.bd-avatar.is-team img { width: 72%; height: auto; }
.gl-tile-kicker { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-purple-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-tile-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: -4px; }
.gl-by-filter { margin: -6px 0 18px; font-size: 14px; color: var(--m-ink-soft); }

/* people tiles: what they run and the best thing they moved, not a picture */
.gl-person { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--m-ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.gl-person:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.gl-person.is-team { background: linear-gradient(150deg, var(--m-lavender-wash), var(--bg-card) 60%); }
.gl-person-top { display: flex; gap: 12px; align-items: center; }
.gl-avatar-lg { width: 46px; height: 46px; font-size: 16px; }
.gl-person-stack { display: flex; gap: 6px; flex-wrap: wrap; }
.gl-person-stack img { width: 44px; height: 30px; object-fit: contain; background: var(--m-surface); border: 1px solid var(--border-subtle); border-radius: 9px; padding: 4px 6px; }
.gl-person-best { display: grid; gap: 2px; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--m-ink); line-height: 1.35; }
.gl-person-best span { font-size: 10.5px; letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--m-lime-ink); }
.gl-join { justify-content: center; align-items: flex-start; border: 2px dashed var(--m-purple-300); background: var(--m-surface); box-shadow: none; }
.gl-join b { font-size: 18px; }
.gl-join > span:not(.m-btn) { font-size: 14px; color: var(--m-ink-soft); line-height: 1.5; }

/* the play page */
.pl-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pl-ctx { font-size: 12px; font-weight: var(--fw-bold); color: var(--fg-on-dark-2); border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: 3px 10px; }
.pl-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 24px; }
.pl-node { width: 84px; height: 56px; border-radius: 14px; background: #fff; display: grid; place-items: center; border: 3px solid transparent; box-shadow: 0 10px 24px rgba(5,0,8,0.35); }
.pl-node.is-first { border-color: var(--ls-lime); box-shadow: 0 0 20px rgba(232,255,207,0.45); }
.pl-node img { max-width: 64%; max-height: 52%; object-fit: contain; }
.pl-node b { font-size: 10px; color: var(--m-purple-600); text-align: center; padding: 0 6px; }
.pl-arrow { width: 34px; height: 3px; background: var(--ls-lime); position: relative; margin-right: 8px; }
.pl-arrow::after { content: ""; position: absolute; right: -8px; top: -5px; border-left: 9px solid var(--ls-lime); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.pl-first { margin-top: 0; }
.pl-steps { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 0; counter-reset: none; }
.pl-steps > li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; position: relative; padding-bottom: 22px; }
.pl-steps > li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: linear-gradient(var(--m-purple-300), var(--m-purple-300) 60%, transparent); }
.pl-n { width: 36px; height: 36px; border-radius: 50%; background: var(--m-ink); color: var(--ls-lime); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; position: relative; z-index: 1; }
.pl-steps b { display: block; font-size: 17px; line-height: 1.35; padding-top: 6px; }
.pl-steps p { margin: 6px 0 0; color: var(--m-ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 66ch; }
.pl-tool { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--m-purple-700); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 4px 10px 4px 6px; }
.pl-tool img { width: 26px; height: 16px; object-fit: contain; background: #fff; border-radius: 5px; padding: 1px 2px; }
.pl-lessons { border-left: 4px solid var(--ls-lime); padding-left: 18px; }
.pl-source { display: grid; gap: 4px; margin-top: 30px; padding: 18px 22px; border-radius: var(--radius-card); background: var(--m-surface-2); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--m-ink); }
.pl-source b { color: var(--m-purple-600); }
.pl-source:hover { border-color: var(--m-purple-300); }
.op-count-n { font-size: 15px; color: var(--m-ink-faint); font-weight: var(--fw-bold); margin-left: 6px; }

/* the step builder */
.bf-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bf-step { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: 16px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.bf-step-body { display: grid; gap: 8px; min-width: 0; }
.bf-step-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px; }
.bf-step textarea { font-size: 14.5px !important; }
.bf-step-ctl { display: flex; flex-direction: column; gap: 4px; }
.bf-step-ctl button { font: inherit; width: 30px; height: 28px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-card); cursor: pointer; color: var(--m-ink-soft); }
.bf-step-ctl button:hover:not(:disabled) { border-color: var(--m-purple-300); color: var(--m-ink); }
.bf-step-ctl button:disabled { opacity: 0.35; cursor: default; }
.bf-add { justify-self: start; }
.bf-extra { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.bf-extra summary { cursor: pointer; font-weight: var(--fw-bold); font-size: 14px; color: var(--m-purple-700); }
.bf-extra[open] summary { margin-bottom: 12px; }
.bf-extra .op-picked { margin-bottom: 10px; }
.pl-preview { display: grid; gap: 10px; padding: 22px; border-radius: 22px; color: var(--fg-on-dark); box-shadow: var(--shadow-dark);
  background: radial-gradient(circle at 8% 112%, rgba(176,87,216,0.6), transparent 48%), linear-gradient(150deg, #3A1F40, #241228 62%, #1A0D1E); }
.pl-preview .ls-label { color: var(--ls-lime); }
.pl-preview-title { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.pl-preview-outcome { color: var(--ls-lime); font-weight: var(--fw-bold); font-size: 15px; }
.pl-chain-sm { margin-top: 4px; }
.pl-chain-sm .pl-node { width: 58px; height: 40px; border-radius: 10px; }
.pl-chain-sm .pl-arrow { width: 18px; margin-right: 6px; }
.pl-steps-sm > li { grid-template-columns: 26px 1fr; gap: 10px; padding-bottom: 10px; }
.pl-steps-sm > li:not(:last-child)::before { left: 12px; top: 26px; background: rgba(251,248,252,0.25); }
.pl-steps-sm .pl-n { width: 26px; height: 26px; font-size: 12px; background: var(--ls-lime); color: var(--m-ink); }
.pl-steps-sm b { font-size: 13.5px; padding-top: 3px; color: var(--fg-on-dark); }
.pl-steps-sm .pl-tool { font-size: 11px; margin-top: 4px; background: rgba(251,248,252,0.12); color: var(--fg-on-dark-a86); }
.pl-preview .gl-tile-meta { color: var(--fg-on-dark-2); }

@media (max-width: 640px) {
  .bf-step { grid-template-columns: 30px minmax(0, 1fr); }
  .bf-step-ctl { grid-column: 2; flex-direction: row; }
  .bf-step-row { grid-template-columns: 1fr; }
  .pl-node { width: 64px; height: 44px; }
  .pl-arrow { width: 18px; }
}

/* ── v3: the market check, the board's match, posting a role, people ─────────── */
/* home: the GTM engineering teaser in the hero */
.ck-teaser { display: grid; gap: 14px; }
.ck-teaser-top { display: flex; align-items: center; gap: 14px; }
.ck-teaser-top b { font-size: 58px; line-height: 1; letter-spacing: -0.04em; color: var(--ls-lime); }
.ck-teaser-top span { font-size: 14px; color: var(--fg-on-dark-2); line-height: 1.45; }
.ck-teaser-top em { font-style: normal; color: var(--fg-on-dark); font-weight: var(--fw-bold); }
.ck-teaser-bars { display: grid; gap: 8px; }
.ck-teaser-bars div { display: grid; grid-template-columns: 112px 1fr 38px; gap: 10px; align-items: center; font-size: 13px; color: var(--fg-on-dark); }
.ck-teaser-bars div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.ck-teaser-bars i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--ls-lime), #C8E89E); min-width: 4px; }
.ck-teaser-bars b { text-align: right; font-size: 12.5px; color: var(--fg-on-dark-2); }
.ck-teaser-note { margin: 0; font-size: 12px; color: var(--fg-on-dark-2); }
.ck-teaser .m-btn { justify-self: start; }
.hm-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-card { display: grid; gap: 8px; align-content: start; padding: 26px; text-decoration: none; color: var(--m-ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.hm-card h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -0.01em; }
.hm-card p { margin: 0; color: var(--m-ink-soft); line-height: 1.6; font-size: 15px; }
.hm-card .jb-readmore { margin-top: 6px; }

/* the board: your match on every role */
.jb-match { font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap; }
.jb-match.is-high { background: var(--ls-lime); color: var(--m-ink); box-shadow: 0 0 0 1px #C8E89E inset; }
.jb-match.is-mid { background: var(--m-lavender-wash); color: var(--m-purple-700); }
.jb-match.is-low { background: var(--m-surface-2); color: var(--m-ink-faint); }
.jb-match-hint { font-size: 13px; color: var(--m-ink-soft); }
.jb-match-hint a { font-weight: var(--fw-bold); color: var(--m-purple-600); }
.jb-job-posted { border-color: var(--m-purple-300); }

/* the market check */
.ck-h1 { max-width: 15ch !important; }
.ck-builder { grid-template-columns: minmax(0, 1fr) 420px; }
.ck-mine { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--m-lavender-wash); }
.ck-mine a { font-weight: var(--fw-bold); }
.ck-step { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.ck-step span { width: 30px; height: 30px; border-radius: 50%; background: var(--m-ink); color: var(--ls-lime); display: grid; place-items: center; font-size: 14px; flex: none; }
.ck-step small { margin-left: auto; font-size: 12.5px; color: var(--m-purple-600); font-weight: var(--fw-bold); }
.ck-sub-label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--m-ink-faint); margin-top: 4px; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ck-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ck-pick { position: relative; }
.ck-pick small { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--m-ink-faint); background: var(--m-surface-2); border-radius: 99px; padding: 1px 7px; flex: none; }
.ck-pick span:not(.op-tool-letter) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-pick[aria-pressed="true"] small { background: var(--ls-lime); color: var(--m-ink); }
.ck-more { grid-column: 1 / -1; margin: 4px 0 0 !important; font-size: 13px; }
.ck-skill b { font-size: 11px; color: var(--m-ink-faint); margin-left: 2px; }
.ck-skill[aria-pressed="true"] b { color: var(--ls-lime); }
.ck-side { gap: 14px; }
.ck-result { padding: 24px; display: grid; gap: 18px; }
.ck-empty { display: grid; gap: 6px; text-align: center; padding: 26px 8px; color: var(--m-ink-soft); }
.ck-empty b { font-size: 18px; color: var(--m-ink); }
.ck-score { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; }
.ck-score h3 { margin: 4px 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.ck-score p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--m-ink-soft); }
.ck-dial { --v: 0; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--m-purple-600) calc(var(--v) * 1%), var(--m-surface-2) 0); }
.ck-dial::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg-card); }
.ck-dial b, .ck-dial span { position: relative; }
.ck-dial b { font-size: 36px; line-height: 1; letter-spacing: -0.03em; }
.ck-dial span { font-size: 11px; color: var(--m-ink-faint); font-weight: var(--fw-bold); }
.ck-block { display: grid; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.ck-block .jb-sub { margin: 0; font-size: 12px; }
.ck-unlock { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.ck-unlock b { font-size: 14.5px; }
.ck-unlock span { font-size: 13px; font-weight: var(--fw-bold); color: var(--m-lime-ink); grid-row: span 2; align-self: center; }
.ck-unlock small { font-size: 12px; color: var(--m-ink-faint); }
.ck-pay b { font-size: 26px; letter-spacing: -0.02em; }
.ck-pay span:last-child { font-size: 12.5px; color: var(--m-ink-soft); }
.ck-bars { display: grid; gap: 8px; }
.ck-pct { font-style: normal; font-weight: var(--fw-bold); color: var(--m-purple-600); }
.ck-other { margin: 0 !important; font-size: 13px; }
.ck-save { padding: 22px; display: grid; gap: 14px; }
.ck-save h3 { margin: 0; font-size: 18px; }
.ck-modes { width: 100%; }
.ck-modes .gl-tab { flex: 1; }
.gl-tab[aria-pressed="true"] { background: var(--m-ink); color: var(--fg-on-dark); }
#ck-form { display: grid; gap: 12px; }
#ck-form label:not(.op-inline) { display: grid; gap: 6px; font-size: 13.5px; font-weight: var(--fw-semibold); }
#ck-form small { font-weight: 400; color: var(--m-ink-faint); }
.ck-done { display: grid; gap: 8px; }
.ck-done b { font-size: 18px; }
.ck-done span { color: var(--m-ink-soft); font-size: 14px; line-height: 1.55; }

/* posting a role */
.hr-remote { align-self: end; padding-bottom: 12px; }
.hr-bench { margin: -4px 0 0 !important; font-size: 13px; color: var(--m-purple-700) !important; font-weight: var(--fw-semibold); }
.hr-bench:empty { display: none; }
.hr-suggest { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.hr-suggest:empty { display: none; }
#hr-form label:not(.op-inline) { display: grid; gap: 6px; font-size: 13.5px; font-weight: var(--fw-semibold); }
.hr-help { padding: 32px; display: grid; gap: 16px; grid-column: 1; }
.hr-help h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; }
.hr-help > p { margin: 0; color: var(--m-ink-soft); line-height: 1.65; max-width: 62ch; }
.hr-help .ls-eyebrow a { color: inherit; }
.hr-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hr-answer { font: inherit; text-align: left; display: grid; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--m-surface); cursor: pointer; color: var(--m-ink); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hr-answer b { font-size: 16px; }
.hr-answer span { font-size: 13px; color: var(--m-ink-soft); }
.hr-answer:hover:not(:disabled) { border-color: var(--m-purple-300); transform: translateY(-2px); }
.hr-answer[data-help="yes"] { background: var(--m-ink); color: var(--fg-on-dark); border-color: var(--m-ink); }
.hr-answer[data-help="yes"] span { color: var(--fg-on-dark-2); }
.hr-answer[data-help="yes"] b { color: var(--ls-lime); }
.hr-answer:disabled { cursor: default; opacity: 0.45; }
.hr-answer[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--ls-lime); }
.hr-note { display: grid; gap: 6px; font-size: 13.5px; font-weight: var(--fw-semibold); }
.hr-done p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }

/* people: photos, skills */
.gl-avatar.has-photo, .bd-avatar.has-photo { background: var(--m-surface-2); padding: 0; overflow: hidden; }
.gl-avatar.has-photo img, .bd-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-person .gl-avatar-lg { width: 56px; height: 56px; }
.gl-person.is-team .gl-avatar.has-photo { box-shadow: 0 0 0 2px var(--ls-lime); }
.gl-by small { font-weight: 400; color: var(--m-ink-faint); }
.gl-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-skill { font-size: 12px; font-weight: var(--fw-semibold); color: var(--m-purple-700); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 3px 10px; }
.gl-who .gl-tab { padding: 8px 14px; font-size: 13.5px; }
.gl-by-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-by-filter a { font-weight: var(--fw-bold); }
.pl-also { display: grid; gap: 8px; margin-top: 8px; }
.pl-also a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--m-ink); font-weight: var(--fw-semibold); padding: 6px 8px; border-radius: 12px; }
.pl-also a:hover { background: var(--m-surface); }
.pl-also img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

@media (max-width: 1100px) {
  .ck-builder { grid-template-columns: 1fr; }
  .ck-side { position: static; order: 0; grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hm-trio { grid-template-columns: 1fr; }
  .hr-answers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ck-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-score { grid-template-columns: 88px 1fr; }
  .ck-dial { width: 88px; height: 88px; }
  .ck-dial b { font-size: 28px; }
  .ck-teaser-top b { font-size: 46px; }
  .hr-help { padding: 22px 16px; }
}

/* ── v4: community-first people, HTML play tiles, the richer card page ─────────── */
/* avatars: a photo, or initials on a colour that's stable per name */
.av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; letter-spacing: -0.02em; width: 40px; height: 40px; font-size: 15px; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.has-photo { background: var(--m-surface-2); }
.av-g0 { background: linear-gradient(135deg, #7B33A3, #B057D8); }
.av-g1 { background: linear-gradient(135deg, #301934, #642585); }
.av-g2 { background: linear-gradient(135deg, #4A8A2E, #8CC56A); }
.av-g3 { background: linear-gradient(135deg, #B0457A, #E07BA8); }
.av-g4 { background: linear-gradient(135deg, #2F5E8C, #5FA3D6); }
.av-g5 { background: linear-gradient(135deg, #8A5A1E, #D9A35B); }
.av-sm { width: 26px; height: 26px; font-size: 10.5px; }
.av-md { width: 40px; height: 40px; font-size: 15px; }
.av-lg { width: 64px; height: 64px; font-size: 22px; }
.av-xl { width: 128px; height: 128px; font-size: 44px; box-shadow: 0 0 0 4px var(--ls-lime), 0 18px 40px rgba(5,0,8,0.45); }

.sample-pill { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5C4A12; background: #FFE9A8; border-radius: var(--radius-pill); padding: 3px 9px; }
.sample-note { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: rgba(255,233,168,0.14); border: 1px solid rgba(255,233,168,0.35); color: var(--fg-on-dark); font-size: 14px; max-width: 760px; }
.sample-note b { color: #FFE9A8; }
.sample-note a { color: var(--ls-lime); font-weight: var(--fw-bold); }

/* play tiles: drawn in HTML, so every one is crisp and none is ever empty */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.pt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--m-ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pt:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.pt-band { display: grid; gap: 16px; padding: 16px 18px 14px; color: var(--fg-on-dark);
  background: radial-gradient(circle at 6% 120%, rgba(176,87,216,0.55), transparent 50%), radial-gradient(circle at 100% -20%, rgba(107,78,160,0.6), transparent 55%), linear-gradient(150deg, #3A1F40, #241228 62%, #1A0D1E); }
.pt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.pt-top b { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ls-lime); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chain { display: flex; align-items: center; gap: 0; min-height: 50px; }
.pt-node { flex: 1 1 0; max-width: 92px; min-width: 0; height: 48px; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 0 6px; box-shadow: 0 8px 18px rgba(5,0,8,0.35); }
.pt-node:first-child { box-shadow: 0 0 0 3px var(--ls-lime), 0 0 18px rgba(232,255,207,0.4); }
.pt-node img { max-width: 100%; max-height: 24px; object-fit: contain; }
.pt-node b { font-size: 10.5px; color: var(--m-purple-700); text-align: center; line-height: 1.15; overflow: hidden; }
.pt-arrow { flex: 0 0 22px; height: 2px; background: var(--ls-lime); position: relative; margin: 0 6px 0 2px; }
.pt-arrow::after { content: ""; position: absolute; right: -5px; top: -4px; border-left: 6px solid var(--ls-lime); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pt-more { margin-left: 8px; font-size: 13px; font-weight: 800; color: var(--fg-on-dark-2); }
.pt-foot { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--fg-on-dark-2); }
.pt-foot span { margin-left: 6px; }
.pt-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(251,248,252,0.32); }
.pt-dot.is-on { background: var(--ls-lime); }
.pt-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px; flex: 1; }
.pt-title { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-outcome { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--m-lime-ink); line-height: 1.35; }
.pt-by { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: 13px; }
.pt-by > span:not(.av):not(.pt-props) { display: grid; min-width: 0; }
.pt-by b { font-weight: var(--fw-bold); }
.pt-by small { color: var(--m-ink-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-props { margin-left: auto; font-weight: var(--fw-bold); color: var(--m-purple-600); white-space: nowrap; }

/* person cards */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.pc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 20px 18px; border-radius: 22px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--m-ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pc:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--m-purple-300); }
.pc-band { align-self: stretch; margin: 0 -20px; height: 74px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--m-grad-aubergine); }
.pc-b-revops { background: linear-gradient(135deg, #47225A, #7B33A3); }
.pc-b-marketing-ops { background: linear-gradient(135deg, #5A2245, #B0457A); }
.pc-b-growth-ops { background: linear-gradient(135deg, #2E4A22, #4A8A2E); }
.pc-b-finops { background: linear-gradient(135deg, #22354A, #2F5E8C); }
.pc-b-data-ai { background: linear-gradient(135deg, #1E0D26, #642585 60%, #2F5E8C); }
.pc-team, .pc-practice, .pc-status { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 3px 9px; }
.pc-team, .pc-practice { color: var(--fg-on-dark); background: rgba(251,248,252,0.14); }
.pc-status { margin-left: auto; color: var(--m-ink); background: var(--ls-lime); }
.pc-av { margin-top: -34px; border: 4px solid var(--bg-card); box-sizing: content-box; }
.pc-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; }
.pc-where { font-size: 14px; color: var(--m-ink-soft); line-height: 1.35; }
.pc-loc { font-size: 12.5px; color: var(--m-ink-faint); }
.pc-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-logo { width: 52px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--border-subtle); display: grid; place-items: center; padding: 0 6px; }
.pc-logo img { max-width: 100%; max-height: 18px; object-fit: contain; }
.pc-logo b { font-size: 9.5px; color: var(--m-purple-700); text-align: center; line-height: 1.1; overflow: hidden; }
.pc-more { font-size: 12px; font-weight: 800; color: var(--m-ink-faint); background: var(--m-surface); }
.pc-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pc-skill { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--m-purple-700); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 2px 9px; }
.pc-foot { align-self: stretch; display: flex; gap: 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--m-ink-soft); }
.pc-foot b { color: var(--m-ink); font-size: 15px; }
.pc-foot span:first-child b { color: var(--m-lime-ink); }
.pc-join { justify-content: center; gap: 12px; padding: 24px; border: 2px dashed var(--m-purple-300); background: var(--m-surface); box-shadow: none; }
.pc-join b { font-size: 19px; }
.pc-join > span:not(.m-btn) { font-size: 14px; color: var(--m-ink-soft); line-height: 1.55; }
.gl-team-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px; }
.gl-team-strip > div:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 220px; }
.gl-team-strip > div:nth-child(2) span { color: var(--m-ink-soft); font-size: 14px; }
.gl-team-faces { display: flex; }
.gl-team-faces .av { border: 3px solid var(--bg-card); margin-left: -12px; }
.gl-team-faces .av:first-child { margin-left: 0; }
.gl-who { flex: none; }

/* the card page */
.op2-hero { padding-bottom: 34px; }
.op2-head { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: center; margin-top: 8px; }
.op2-id { display: flex; gap: 28px; align-items: center; min-width: 0; }
.op2-who { display: grid; gap: 8px; min-width: 0; }
.op2-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.op2-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-on-dark); border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: 4px 11px; }
.op2-tag.is-team { background: rgba(251,248,252,0.12); }
.op2-tag.is-status { background: var(--ls-lime); color: var(--m-ink); border-color: var(--ls-lime); }
.op2-name { margin: 2px 0 0; font-size: clamp(38px, 5vw, 60px); line-height: 1; letter-spacing: -0.03em; color: var(--fg-on-dark); }
.op2-where { margin: 0; font-size: 19px; color: var(--fg-on-dark); font-weight: var(--fw-semibold); }
.op2-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--fg-on-dark-2); }
.op2-meta span:not(:last-child)::after { content: "·"; margin-left: 14px; opacity: 0.6; }
.op2-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.op2-value { border-radius: 22px; padding: 20px 22px; display: grid; gap: 14px; background: rgba(251,248,252,0.07); border: 1px solid var(--border-on-dark); backdrop-filter: blur(8px); color: var(--fg-on-dark); }
.op2-value-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ls-lime); }
.op2-value-body { display: grid; gap: 12px; }
.op2-skel { height: 22px; border-radius: 8px; background: rgba(251,248,252,0.1); }
.op2-skel:first-child { height: 92px; }
.op2-dial-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.op2-dial { width: 96px; height: 96px; background: conic-gradient(var(--ls-lime) calc(var(--v) * 1%), rgba(251,248,252,0.14) 0); }
.op2-dial::before { background: #2A1430; }
.op2-dial b { font-size: 30px; color: var(--fg-on-dark); }
.op2-dial span { color: var(--fg-on-dark-2); }
.op2-verdict { font-size: 24px; letter-spacing: -0.02em; }
.op2-dial-row p { margin: 4px 0 0; font-size: 14px; color: var(--fg-on-dark-2); line-height: 1.45; }
.op2-dial-row p b { color: var(--fg-on-dark); }
.op2-value-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-on-dark); font-size: 13.5px; color: var(--fg-on-dark-2); }
.op2-value-row b { color: var(--fg-on-dark); font-size: 15px; text-align: right; }
.op2-value-row em { font-style: normal; color: var(--ls-lime); font-weight: var(--fw-semibold); font-size: 13px; }
.op2-value-cta { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ls-lime); text-decoration: none; }
.op2-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-on-dark); }
.op2-stats div { display: grid; gap: 2px; }
.op2-stats b { font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--fg-on-dark); }
.op2-stats b small { font-size: 16px; color: var(--fg-on-dark-2); }
.op2-stats span { font-size: 13px; color: var(--fg-on-dark-2); }
.op2-sec-head { margin: 40px 0 16px; }
.op2-sec-head:first-child { margin-top: 0; }
.op2-sec-head .jb-h2 { margin: 0 0 4px; }
.op2-sec-head .jb-sub { margin: 0; }
.op2-quote { margin: 0 0 8px; padding: 24px 26px; border-radius: 20px; background: var(--m-grad-dawn); border: 1px solid var(--border-subtle); }
.op2-quote blockquote { margin: 0; font-size: 21px; line-height: 1.4; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.op2-quote blockquote::before { content: "“"; color: var(--m-purple-500); }
.op2-quote blockquote::after { content: "”"; color: var(--m-purple-500); }
.op2-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--m-ink-soft); }

/* the stack as a flow: find → model → automate → record → engage → measure */
.sf { display: grid; grid-template-columns: repeat(min(var(--sf-cols, 6), 6), minmax(0, 1fr)); gap: 10px; }
.sf-layer { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); min-width: 0; }
.sf-layer:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 26px; width: 8px; height: 2px; background: var(--m-purple-300); }
.sf-layer.is-empty { background: transparent; border-style: dashed; }
.sf-head { display: grid; gap: 1px; }
.sf-n { font-size: 11px; font-weight: 800; color: var(--m-purple-500); }
.sf-head b { font-size: 15px; }
.sf-head small { font-size: 11.5px; color: var(--m-ink-faint); line-height: 1.3; }
.sf-tools { display: grid; gap: 6px; }
.sf-tools-row { display: flex; flex-wrap: wrap; }
.sf-tool { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 8px 6px 6px; border-radius: 12px; background: var(--m-surface); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--m-ink); position: relative; transition: border-color var(--dur) var(--ease); }
.sf-tool:hover { border-color: var(--m-purple-300); }
.sf-tool.is-driver { box-shadow: 0 0 0 2px var(--ls-lime); background: #fff; }
.sf-logo { height: 22px; display: grid; place-items: center; }
.sf-logo img { max-width: 72px; max-height: 20px; object-fit: contain; }
.sf-logo b { width: 22px; height: 22px; border-radius: 6px; background: var(--m-lavender-wash); color: var(--m-purple-700); display: grid; place-items: center; font-size: 12px; }
.sf-name { font-size: 11.5px; font-weight: var(--fw-semibold); text-align: center; line-height: 1.2; }
.sf-tool small { position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--m-ink); color: var(--ls-lime); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.sf-tool small:empty { display: none; }
.sf-tools-row .sf-tool { width: 104px; }
.sf-none { font-size: 12px; color: var(--m-ink-faint); }
.sf-other { margin-top: 14px; display: grid; gap: 8px; }
.op2-skills { display: grid; gap: 10px; }
.op2-skill { display: grid; grid-template-columns: 210px 1fr 44px; gap: 14px; align-items: center; font-size: 14.5px; font-weight: var(--fw-semibold); }
.op2-skill-track { height: 10px; border-radius: 99px; background: var(--m-surface-2); overflow: hidden; }
.op2-skill-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--m-grad-purple); transition: width 600ms var(--ease); }
.op2-skill b { text-align: right; font-size: 13px; color: var(--m-ink-soft); }
.op2-built { display: flex; flex-wrap: wrap; gap: 8px; }
.op2-built a { display: grid; gap: 1px; padding: 10px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--m-ink); }
.op2-built a:hover { border-color: var(--m-purple-300); }
.op2-built b { font-size: 14px; }
.op2-built small { font-size: 12px; color: var(--m-ink-faint); }
.op2-hire { background: var(--m-grad-dawn); }
.op-match { position: relative; }
.op-match em { position: absolute; top: 10px; right: 10px; font-style: normal; }
.op-match b { padding-right: 84px; }
.bd-maker-who { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.bd-maker-who > span:last-child { display: grid; }
.bd-maker-who small { color: var(--m-ink-soft); font-size: 13px; }
.bd-maker-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bd-by .av { border: 2px solid var(--ls-lime); }

@media (max-width: 1100px) {
  .sf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-layer:nth-child(3)::after { display: none; }
}
@media (max-width: 900px) {
  .op2-head { grid-template-columns: 1fr; }
  .pt-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .op2-id { flex-direction: column; align-items: flex-start; gap: 18px; }
  .av-xl { width: 96px; height: 96px; font-size: 34px; }
  .sf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-layer::after { display: none; }
  .op2-skill { grid-template-columns: 1fr 44px; }
  .op2-skill-track { grid-column: 1 / -1; grid-row: 2; }
  .op2-stats { gap: 14px 26px; }
  .op2-stats b { font-size: 24px; }
  .pt-grid, .pc-grid { grid-template-columns: 1fr; }
}

/* ── v5: practice-first plays and team, static pages ─────────────────────────── */
.pl-practices { margin-bottom: 10px; }
.pl-practices .jb-pchip { font-size: 14.5px; padding: 9px 16px; }
.pl-scope { margin: 0 0 18px; font-size: 14.5px; color: var(--m-ink-soft); max-width: 72ch; }
.pl-scope b { color: var(--m-ink); }
.pl-count { margin: 0 0 14px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-ink-faint); }
.pl-chain.is-set { gap: 10px; }
.pl-moved { font-weight: var(--fw-bold); color: var(--m-lime-ink); }
.sf-missing { margin: 10px 0 0; font-size: 13px; color: var(--m-ink-faint); }
.op2-best b { color: var(--ls-lime); text-align: right; }
.op2-spread { display: grid; gap: 10px; }
.op2-spread-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 14px; align-items: center; font-size: 14.5px; font-weight: var(--fw-semibold); }
.op2-spread-row b { text-align: right; font-size: 13px; color: var(--m-ink-soft); }
.op2-spread-row.is-zero span:first-child, .op2-spread-row.is-zero b { color: var(--m-ink-faint); }
.team-practice { margin-top: 34px; }
.team-practice:first-of-type { margin-top: 8px; }
.team-practice-head { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.team-practice-head h3 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.team-practice-head p { margin: 0; flex: 1; min-width: 240px; font-size: 14px; color: var(--m-ink-soft); }
.team-rest { margin-top: 34px; }
.team-rest .gl-team-faces { flex-wrap: wrap; gap: 10px; }
.team-face { display: grid; justify-items: center; gap: 4px; }
.team-face small { font-size: 11.5px; color: var(--m-ink-soft); }
.team-rest .gl-team-faces .av { margin-left: 0; border: 0; }
.pl-also a > span:last-child { display: grid; }
.pl-also small { font-size: 12px; color: var(--m-ink-faint); font-weight: 400; }
@media (max-width: 640px) {
  .op2-spread-row { grid-template-columns: 1fr 90px; }
  .op2-spread-row .op2-skill-track { grid-column: 1 / -1; grid-row: 2; }
}
.ck-mode-note { margin: -4px 0 0; font-size: 13px; color: var(--m-ink-soft); }
.hr-claim { padding: 32px; display: grid; gap: 14px; grid-column: 1; }
.hr-claim h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; }
.hr-claim > p { margin: 0; color: var(--m-ink-soft); line-height: 1.6; }
#hr-claim-form { display: grid; gap: 12px; }
#hr-claim-form label:not(.op-inline) { display: grid; gap: 6px; font-size: 13.5px; font-weight: var(--fw-semibold); }
@media (max-width: 640px) { .hr-claim { padding: 22px 16px; } }

/* ── v6: practice-first board and home, nav, market check, role pages ─────────── */
.jb-navlinks { display: flex; align-items: center; gap: 26px; min-width: 0; }
.ls-navlink[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.ls-nav-cta { white-space: nowrap; }
.jb-foot-brand { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.jb-foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 6px; }
.jb-foot-links a { color: var(--fg-on-dark); font-weight: var(--fw-semibold); font-size: 14px; }
.ls-hero-dark :focus-visible, .ls-footer :focus-visible { outline: 3px solid var(--ls-lime); outline-offset: 3px; }
.jb-pchip:focus-visible, .pt:focus-visible, .pc:focus-visible, .pb-card:focus-visible, .op-pick:focus-visible { outline: 3px solid var(--m-purple-500); outline-offset: 2px; }

/* home hero */
.jb-hero-home { padding-top: 64px; padding-bottom: 56px; }
.jb-hero-home .jb-h1 { font-size: clamp(38px, 5.2vw, 64px); }
.jb-hero-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.jb-hero-logos > span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-on-dark-2); margin-right: 4px; }
.jb-hero-logos .jb-logo { width: 34px; height: 34px; border-radius: 10px; }
.ck-teaser-note a { color: var(--ls-lime); font-weight: var(--fw-bold); }

/* the four-practice band */
.jb-pband { padding-top: 48px; padding-bottom: 8px; }
.pb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.pb-head h2 { margin: 8px 0 0; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; }
.pb-head p { margin: 0; max-width: 44ch; font-size: 16px; color: var(--m-ink-soft); line-height: 1.55; }
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pb-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--m-ink); border-top: 5px solid var(--m-purple-500); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pb-revops { border-top-color: #7B33A3; } .pb-marketing-ops { border-top-color: #B0457A; } .pb-growth-ops { border-top-color: #4A8A2E; } .pb-finops { border-top-color: #2F5E8C; }
.pb-name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.pb-scope { font-size: 13.5px; color: var(--m-ink-soft); line-height: 1.5; }
.pb-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--m-ink-soft); }
.pb-stats b { color: var(--m-ink); }
.pb-tools { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.pb-go { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--m-purple-600); }

/* the board */
.jb-board-h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; }
.jb-filter-top { display: flex; gap: 10px; align-items: center; }
.jb-filter-top .jb-search { flex: 1; }
.jb-filters-toggle { display: none; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: var(--fw-bold); padding: 10px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--m-ink); cursor: pointer; }
.jb-filters-toggle b { background: var(--m-ink); color: var(--ls-lime); border-radius: 99px; font-size: 11px; padding: 1px 7px; }
.jb-pchip-sep { width: 1px; align-self: stretch; background: var(--border-subtle); margin: 4px 4px; flex: none; }
.jb-gtme-chip[aria-pressed="true"] { background: var(--ls-lime); color: var(--m-ink); border-color: #C8E89E; }
.jb-active { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.jb-active:empty { display: none; }
.jb-active-chip { font: inherit; font-size: 12.5px; font-weight: var(--fw-semibold); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--m-purple-300); background: var(--m-lavender-wash); color: var(--m-purple-700); cursor: pointer; }
.jb-show-all { text-align: center; margin: 22px 0 0; }
.jb-show-all:has(> [hidden]) { display: none; }
.jb-p-growth-ops.jb-practice { background: #EAF5E2; color: #3B6F24; }
.jb-badge.jb-gtme { background: var(--m-ink); color: var(--ls-lime); }
.jb-spans { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--m-ink-soft); }
.jb-spans-bar { display: inline-flex; gap: 2px; }
.jb-spans-bar i { width: 10px; height: 6px; border-radius: 2px; background: var(--m-surface-2); }
.jb-spans-bar i.on { background: var(--m-purple-500); }
.jb-spans-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; font-size: 14px; color: var(--m-ink-soft); }
.jb-role-match { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.jb-role-match .jb-match { font-size: 13px; padding: 5px 12px; }
.jb-match-cta { font-size: 14px; font-weight: var(--fw-bold); color: var(--ls-lime); }
.jb-side-employer { text-decoration: none; color: var(--m-ink); }
.jb-side-employer p { margin: 6px 0 8px; }

/* market check */
.ck-picked:empty { display: none; }
.ck-practices { display: grid; gap: 8px; }
.op-bar.is-zero .op-bar-name, .op-bar.is-zero b { color: var(--m-ink-faint); }
.ck-bar { display: none; }
@media (max-width: 1100px) {
  .ck-bar:not([hidden]) { display: flex; position: sticky; bottom: 12px; z-index: 30; margin: 16px auto 0; max-width: 560px; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--m-ink); color: var(--fg-on-dark); box-shadow: var(--shadow-dark); }
  .ck-bar b { font-size: 22px; color: var(--ls-lime); }
  .ck-bar span { font-size: 14px; flex: 1; }
  .ck-bar a { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ls-lime); }
}

/* the team by practice */
.tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tp-col { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-top: 5px solid var(--m-purple-500); }
.tp-revops { border-top-color: #7B33A3; } .tp-marketing-ops { border-top-color: #B0457A; } .tp-growth-ops { border-top-color: #4A8A2E; } .tp-finops { border-top-color: #2F5E8C; }
.tp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tp-head h3 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.tp-head span { font-size: 13px; font-weight: var(--fw-bold); color: var(--m-ink-faint); }
.tp-scope { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--m-ink-soft); }
.tp-people { display: grid; gap: 4px; }
.tp-person { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--m-ink); }
.tp-person:hover { background: var(--m-surface); }
.tp-person > span:last-child { display: grid; }
.tp-person small { font-size: 12px; color: var(--m-ink-faint); }
.tp-col .jb-readmore { margin-top: auto; }
.tp-under { margin: 18px 0 0; font-size: 14.5px; color: var(--m-ink-soft); }
.tp-under a { font-weight: var(--fw-bold); }
.pl-under { color: var(--m-ink-soft); }

@media (max-width: 1100px) { .pb-grid, .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pb-grid, .tp-grid { grid-template-columns: 1fr; } .jb-hero-home { padding-top: 40px; } }
.jb-compare { padding: 18px 20px; margin: 22px 0 6px; display: grid; gap: 8px; background: var(--m-grad-dawn); }
.jb-compare ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.55; color: var(--m-ink-soft); }
.jb-compare b { color: var(--m-ink); }
.jb-full { margin: 12px 0 8px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-card); }
.jb-full summary { cursor: pointer; padding: 12px 16px; font-weight: var(--fw-bold); color: var(--m-purple-700); }
.jb-full .bd-prose { padding: 0 16px 8px; max-height: 520px; overflow: auto; font-size: 14.5px; }
/* growth pages: hubs, salaries, tools */
.gp-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 26px; }
.gp-stats div { display: grid; gap: 2px; }
.gp-stats b { font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--fg-on-dark); }
.gp-stats span { font-size: 13px; color: var(--fg-on-dark-2); }
.gp-asks { display: grid; gap: 8px; max-width: 620px; }
.gp-salary { padding: 22px 24px; display: grid; gap: 8px; margin-bottom: 8px; }
.gp-salary > b { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; }
.gp-salary > span { color: var(--m-ink-soft); font-size: 14px; line-height: 1.55; }
.gp-levels { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14.5px; }
.gp-levels th, .gp-levels td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--border-subtle); }
.gp-levels th { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-ink-faint); }
.gp-levels td:last-child { text-align: right; font-weight: var(--fw-bold); }
.gp-split { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-split a { text-decoration: none; }
.jb-foot-browse a { font-weight: 400; color: var(--fg-on-dark-2); font-size: 13px; }
.ck-market { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ck-market-card { padding: 20px; display: grid; gap: 10px; align-content: start; }
.ck-market-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--m-ink-soft); }
@media (max-width: 960px) { .ck-market { grid-template-columns: 1fr; } }

/* ── /hiring/<slug>/: the page the outreach links to ───────────────────── */
.jb-badge-spot { background: var(--ls-lime); color: var(--m-ink); }
.jb-job-spot { border-color: var(--m-purple-300); }
.hp-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--fg-on-dark-2); position: relative; z-index: 2; }
.jb-logo-sm { width: 34px; height: 34px; border-radius: 10px; }
.jb-logo-sm img { width: 22px; height: 22px; }
.jb-logo-sm.jb-logo-letter { font-size: 15px; }
.hp-h1 { max-width: 24ch !important; }
.hp-lead { margin-top: 16px; max-width: 62ch; }
.hp-actions { align-items: center; gap: 18px; }
.hp-quiet { color: var(--fg-on-dark-2); font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.hp-quiet:hover { color: var(--ls-lime); }
.hp-proof { margin: 18px 0 0; font-size: 15px; color: var(--fg-on-dark); font-weight: var(--fw-semibold); position: relative; z-index: 2; }
.hp-detail .jb-detail-main > .jb-h2:first-child { margin-top: 0; }
.hp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.hp-stat { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.hp-stat b { font-size: 28px; letter-spacing: -0.02em; color: var(--m-ink); }
.hp-stat span { font-size: 13.5px; color: var(--m-ink-soft); line-height: 1.45; }
.hp-stat small { font-size: 13px; color: var(--m-ink); font-weight: var(--fw-semibold); }
.hp-strip { position: relative; height: 34px; margin: 18px 0 6px; background: var(--m-surface-2); border-radius: var(--radius-pill); }
.hp-strip { background: linear-gradient(90deg, var(--m-lavender-wash), var(--m-surface-3)); }
.hp-strip-mid { position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--m-purple-600); }
.hp-strip-you { position: absolute; top: 6px; bottom: 6px; min-width: 6px; border-radius: var(--radius-pill); background: rgba(100, 37, 133, 0.18); border: 2px solid var(--m-purple-600); }
.hp-strip-legend { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 12.5px; color: var(--m-ink-faint); }
.hp-h3 { font-size: 17px; margin: 30px 0 10px; }
.hp-tools { display: grid; gap: 8px; }
.hp-tool { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; align-items: center; gap: 12px; font-size: 14px; }
.hp-tool b { font-size: 13px; color: var(--m-ink-soft); text-align: right; font-weight: var(--fw-semibold); }
.hp-bar { height: 8px; background: var(--m-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.hp-bar i { display: block; height: 100%; background: var(--m-purple-400); border-radius: var(--radius-pill); }
.hp-more { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.hp-more em, .hp-roles em { font-style: normal; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--m-purple-600); background: var(--m-lavender-wash); border-radius: var(--radius-pill); padding: 2px 8px; margin-left: 6px; }
.hp-claim, .hp-post { padding: 24px; display: grid; gap: 12px; }
.hp-claim form, .hp-post form { display: grid; gap: 12px; }
.hp-claim label > span, .hp-post label > span { display: block; font-size: 13px; font-weight: var(--fw-semibold); margin-bottom: 6px; }
.hp-free { margin: 0; font-size: 14px; color: var(--m-ink-soft); line-height: 1.5; }
.hp-note { margin: -4px 0 0; font-size: 13.5px; color: var(--m-ink-soft); line-height: 1.5; }
.hp-link { font: inherit; font-weight: var(--fw-semibold); color: var(--m-purple-600); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hp-link:hover { color: var(--m-ink); }
.hp-link:focus-visible { outline: 2px solid var(--m-purple-400); outline-offset: 2px; border-radius: 4px; }
.hp-roles { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 10px 14px; margin: 0; display: grid; gap: 6px; }
.hp-roles legend { font-size: 13px; font-weight: var(--fw-semibold); padding: 0 4px; }
.hp-roles label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.hp-roles label > span { display: inline; font-weight: var(--fw-regular, 400); margin: 0; }
.hp-help { display: flex !important; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--m-ink-soft); line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.hp-help > span { display: inline !important; font-weight: var(--fw-regular, 400) !important; margin: 0 !important; }
.hp-help input { margin-top: 3px; }
.hp-done p { margin: 0 0 10px; line-height: 1.55; }
.hp-done-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hp-found-line { margin: 0; font-size: 15px; line-height: 1.55; }
.hp-fix summary { cursor: pointer; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-purple-600); }
.hp-fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.hp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.hp-foot p { margin: 0; color: var(--m-ink-soft); }
@media (max-width: 960px) {
  .hp-stats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hp-tool { grid-template-columns: 110px minmax(0, 1fr) 84px; gap: 8px; font-size: 13px; }
  .hp-fix-grid { grid-template-columns: 1fr; }
  .hp-actions { flex-direction: column; align-items: flex-start; }
}
.hp-claim .m-input, .hp-post .m-input { width: 100%; box-sizing: border-box; }
.hp-claim .m-btn, .hp-post .m-btn { width: 100%; justify-content: center; }
.hp-done-actions .m-btn { width: auto; }
.hp-done { overflow-wrap: anywhere; }
.hp-done:focus { outline: none; }

/* ── the stack filter: several systems, any or all ─────────────────────── */
.sp { position: relative; }
.sp-toggle { font: inherit; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-ink); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.sp-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--m-ink-faint); border-bottom: 2px solid var(--m-ink-faint); transform: rotate(45deg) translateY(-2px); margin-left: auto; }
.sp-toggle:hover, .sp-toggle[aria-expanded="true"] { border-color: var(--m-purple-300); }
.sp-toggle.is-on { background: var(--m-ink); color: var(--fg-on-dark); border-color: var(--m-ink); }
.sp-toggle.is-on::after { border-color: var(--ls-lime); }
.sp-n { font-size: 11.5px; background: var(--ls-lime); color: var(--m-ink); border-radius: var(--radius-pill); padding: 1px 7px; }
.sp-panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(720px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 18px 20px 0; }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.sp-title { margin: 0; font-weight: var(--fw-semibold); font-size: 14.5px; }
.sp-mode { display: inline-flex; background: var(--m-surface-2); border-radius: var(--radius-pill); padding: 3px; }
.sp-mode button { font: inherit; font-size: 12.5px; font-weight: var(--fw-semibold); border: 0; background: none; color: var(--m-ink-soft); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; }
.sp-mode button[aria-pressed="true"] { background: var(--bg-card); color: var(--m-ink); box-shadow: var(--shadow-xs); }
.sp-mine { margin-left: auto; font: inherit; font-size: 13px; font-weight: var(--fw-semibold); color: var(--m-purple-600); background: var(--m-lavender-wash); border: 0; border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; }
.sp-group { padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.sp-group-name { margin: 0 0 8px; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--m-ink-faint); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; background: var(--bg-card); color: var(--m-ink); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); cursor: pointer; }
.sp-chip img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.sp-chip b { font-size: 11px; color: var(--m-ink-faint); font-weight: var(--fw-semibold); }
.sp-chip:hover { border-color: var(--m-purple-300); }
.sp-chip[aria-pressed="true"] { background: var(--m-ink); color: var(--fg-on-dark); border-color: var(--m-ink); }
.sp-chip[aria-pressed="true"] b { color: var(--ls-lime); }
.sp-chip:focus-visible, .sp-toggle:focus-visible, .sp-mode button:focus-visible { outline: 2px solid var(--m-purple-400); outline-offset: 2px; }
.sp-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 12px 0 16px; background: var(--bg-card); border-top: 1px solid var(--border-subtle); }
.sp-foot .m-btn { width: auto; }
/* Phones: full width under the button. (Not a fixed bottom sheet: the filter bar's backdrop blur
   makes it the containing block for fixed children, so "fixed" would pin it to the bar.) */
@media (max-width: 640px) {
  .sp { width: 100%; }
  .sp-toggle { width: 100%; font-size: 16px; }
  .sp-panel { left: 0; right: 0; width: auto; max-height: 64vh; padding: 14px 14px 0; }
  .sp-mine { margin-left: 0; }
}

/* ── founding roles, a company's stack, what a system pays ─────────────── */
.jb-founding { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--m-ink); background: var(--ls-lime); border-radius: var(--radius-pill); padding: 4px 9px; }
.jb-founding::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-purple-600); }
.jb-founding-card { padding: 18px 20px; margin: 18px 0 0; border-color: var(--m-purple-300); background: linear-gradient(120deg, var(--m-lime-wash), var(--bg-card) 55%); }
.jb-founding-card p { margin: 10px 0 6px; color: var(--m-ink-soft); font-size: 14.5px; }
.jb-founding-card blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--m-purple-400); font-size: 15px; line-height: 1.55; color: var(--m-ink); }
.cs-groups { display: grid; gap: 10px; margin-top: 12px; }
.cs-group { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.cs-group > span { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--m-ink-faint); padding-top: 7px; }
.cs-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tool { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--m-ink); text-decoration: none; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 5px 11px 5px 6px; }
.cs-tool img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.cs-tool:hover { border-color: var(--m-purple-300); }
.gp-worth { padding: 16px 20px; margin: 0 0 14px; }
.gp-worth p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--m-ink-soft); }
.gp-worth b { color: var(--m-ink); }
@media (max-width: 640px) { .cs-group { grid-template-columns: 1fr; gap: 6px; } .cs-group > span { padding-top: 0; } }
.tw .jb-h2:first-child { margin-top: 0; }
.tw p { font-size: 16px; line-height: 1.65; color: var(--m-ink-soft); }
.tw-list { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.55; color: var(--m-ink-soft); }
.tw-list b { color: var(--m-ink); }
.tw-list blockquote { margin: 6px 0 0; padding-left: 12px; border-left: 3px solid var(--m-purple-300); font-size: 14px; color: var(--m-ink-soft); }