/* Reintech — Landing page (sections + shared web components) */

/* ─────────────── Nav ─────────────── */
.web-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Desktop only: allow a softly translucent blur. On mobile the blur is the
   single most expensive scroll-time paint and is dropped entirely. */
@media (min-width: 961px) {
  .web-nav {
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.web-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.web-nav-brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
/* Original reintech.io lockup — wordmark inherits text color, icon keeps
   its brand swoosh colors. `display:block` kills inline-SVG baseline gap. */
.web-brand-logo { display: block; }
.web-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.web-body .web-nav-link {
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: color 0.2s;
}
.web-body .web-nav-link.active,
.web-body .web-nav-link:hover {
  color: var(--ink);
}
.web-body .web-nav-link.active {
  border-bottom-color: var(--ink);
}
.web-nav-cta { margin-left: 12px; }

/* Hamburger toggle — visible on mobile only. */
.web-nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 0;
}
.web-nav-toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s, opacity 0.2s;
}
.web-nav.is-open .web-nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.web-nav.is-open .web-nav-toggle-bar:nth-child(2) { opacity: 0; }
.web-nav.is-open .web-nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .web-nav-toggle { display: inline-flex; }
  .web-nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s, padding 0.25s;
  }
  .web-nav.is-open .web-nav-links {
    max-height: 340px;
    opacity: 1;
  }
  .web-body .web-nav-link {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .web-body .web-nav-link.active { border-bottom-color: var(--border); color: var(--ink); }
  .web-nav-cta { margin-left: 0; margin-top: 16px; justify-content: center; }
}

/* ─────────────── Footer ─────────────── */
.web-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
  margin-top: 72px;
}
.web-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.web-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.web-footer-tagline {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 320px;
  line-height: 1.55;
}
.web-footer-col-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.web-body .web-footer-col-link,
.web-body .web-footer-col-link a {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.web-body .web-footer-col-link a:hover { color: var(--ink); }
.web-footer-legal {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--f-mono);
}
@media (max-width: 768px) {
  .web-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ─────────────── Hero ─────────────── */
.web-hero { padding: 36px 0 84px; border-bottom: 1px solid var(--border); }
.web-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.web-hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.web-hero-title-muted {
  color: var(--ink-3);
  font-style: italic;
}
.web-hero-sub {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 540px;
  line-height: 1.55;
  text-wrap: pretty;
  margin-bottom: 32px;
}
.web-hero-sub em { font-style: italic; }
.web-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero spectrum card */
.web-hero-card {
  padding: 32px 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.web-hero-card-title-wrap {
  margin-bottom: 24px;
  /* Reserve one line of the name so the cycling animation never shifts the
     spectrum below. On narrow screens the name may shrink but the height
     stays pinned. */
  min-height: 40px;
}
.web-hero-card-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  height: 38px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 400ms;
}
@media (max-width: 640px) {
  .web-hero-card-title-wrap { min-height: 34px; }
  .web-hero-card-name { font-size: 26px; height: 32px; }
}
.web-hero-card-name-muted {
  color: var(--ink-3);
  font-style: italic;
}
/* "profile" is an inline cycle action — dotted underline marks it as a link,
   hover / focus brightens it to full ink. Uses inherit so the fade animation
   on the parent .web-hero-card-name sweeps it through unchanged. */
.web-body .web-hero-card-cycle {
  font: inherit;
  color: var(--ink-3);
  font-style: italic;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--ink-3);
  border-radius: 0;
  line-height: inherit;
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s;
}
.web-body .web-hero-card-cycle:hover,
.web-body .web-hero-card-cycle:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
  outline: none;
}
.web-hero-card-pager {
  margin-top: 24px;
  display: flex;
  gap: 6px;
}
.web-hero-card-pager-dot {
  flex: 1;
  height: 2px;
  background: var(--border);
  transition: background 300ms;
}
.web-hero-card-pager-dot.active { background: var(--ink); }

@media (max-width: 960px) {
  .web-hero { padding: 28px 0 56px; }
  .web-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ─────────────── Section headers ─────────────── */
.web-section {
  padding: 84px 0;
  border-bottom: 1px solid var(--border);
}
.web-section-surface { background: var(--surface); }
.web-section-tight-bottom { padding-bottom: 40px; }
.web-section-tight-top { padding-top: 40px; }
@media (max-width: 640px) {
  .web-section-tight-bottom { padding-bottom: 28px; }
  .web-section-tight-top { padding-top: 28px; }
}
.web-section-header {
  max-width: 720px;
  margin-bottom: 40px;
}
.web-section-header-eyebrow { margin-bottom: 14px; }
.web-section-header-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.web-section-header-sub {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.web-section-header-sub em { font-style: italic; }
@media (max-width: 640px) {
  .web-section { padding: 60px 0; }
  .web-section-header { margin-bottom: 32px; }
}

/* ─────────────── §01 The problem ─────────────── */
.web-problem {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.web-problem-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.web-problem-row:first-child { border-top: none; }
.web-problem-index {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  padding-top: 12px;
}
.web-problem-body {
  max-width: 880px;
}
.web-problem-old {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
  margin-bottom: 14px;
}
.web-problem-new {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.web-problem-coda {
  margin-top: 48px;
  max-width: 640px;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.web-problem-coda em { font-style: italic; }
@media (max-width: 640px) {
  .web-problem-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 0;
  }
  .web-problem-index { padding-top: 0; font-size: 10px; }
  .web-problem-old { margin-bottom: 10px; font-size: 11.5px; }
}

/* ─────────────── §02 Six axes ─────────────── */
.web-axes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-axes-grid > .web-axis-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.web-axes-grid > .web-axis-cell:nth-child(3n) { border-right: none; }
.web-axes-grid > .web-axis-cell:nth-last-child(-n + 3) { border-bottom: none; }
@media (max-width: 960px) {
  .web-axes-grid { grid-template-columns: repeat(2, 1fr); }
  .web-axes-grid > .web-axis-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .web-axes-grid > .web-axis-cell:nth-child(2n) { border-right: none; }
  .web-axes-grid > .web-axis-cell:nth-child(3n) { border-right: 1px solid var(--border); }
  .web-axes-grid > .web-axis-cell:nth-last-child(-n + 3) { border-bottom: 1px solid var(--border); }
  .web-axes-grid > .web-axis-cell:nth-last-child(-n + 2) { border-bottom: none; }
}
@media (max-width: 560px) {
  .web-axes-grid { grid-template-columns: 1fr; }
  .web-axes-grid > .web-axis-cell { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .web-axes-grid > .web-axis-cell:last-child { border-bottom: none !important; }
}

.web-axis-card {
  padding: 28px 28px 32px;
  background: var(--bg);
  border-radius: 2px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.web-axis-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.web-axis-card-num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.web-axis-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.web-axis-card-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.web-axis-card-blurb {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  flex: 1;
}
.web-axis-card-rail {
  margin-top: 20px;
  height: 2px;
  width: 100%;
  background: var(--surface-2);
  border-radius: 1px;
  overflow: hidden;
}
.web-axis-card-rail-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
}

/* ─────────────── §03 Level ladder ─────────────── */
.web-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.web-ladder-step {
  padding: 18px 16px 16px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  position: relative;
}
.web-ladder-step:last-child { border-right: none; }
.web-ladder-step-num {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 8px;
  letter-spacing: 0.08em;
}
.web-ladder-step-label {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.web-ladder-step-blurb {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
  min-height: 48px;
}
.web-ladder-step-bars {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
}
.web-ladder-step-bar {
  flex: 1;
  background: var(--border);
  border-radius: 1px 1px 0 0;
  transition: background-color 400ms;
}
.web-ladder-step-bar.filled { background: var(--ink); }


/* Tablet and below: single-column vertical list. Each row is a horizontal
   strip with num / label+blurb / mini-bars, so all five fit densely without
   wrapping to grid. */
@media (max-width: 960px) {
  .web-ladder { grid-template-columns: 1fr; }
  .web-ladder-step {
    display: grid;
    grid-template-columns: 40px 1fr 72px;
    column-gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .web-ladder-step:last-child { border-bottom: none; }
  .web-ladder-step-num { margin-bottom: 0; text-align: left; font-size: 10px; }
  .web-ladder-step-label {
    grid-column: 2;
    font-size: 16px;
    margin-bottom: 2px;
  }
  .web-ladder-step-blurb {
    grid-column: 2;
    min-height: 0;
    font-size: 12px;
    line-height: 1.4;
    /* Let long blurbs wrap to 2 lines max. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .web-ladder-step-bars {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
    height: 24px;
    align-self: center;
  }
}
@media (max-width: 560px) {
  .web-ladder-step { grid-template-columns: 28px 1fr 56px; column-gap: 10px; padding: 10px 12px; }
  .web-ladder-step-label { font-size: 15px; }
  .web-ladder-step-blurb { font-size: 11.5px; -webkit-line-clamp: 2; }
  .web-ladder-step-bars { height: 20px; }
}

/* ─────────────── §04 Playground ─────────────── */
.web-playground {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.web-playground-eyebrow {
  margin-bottom: 14px;
}

/* Level selector — editorial "index tabs". No longer used by the landing
   playground (which switched to the two-step scope list below), but still
   used by the candidate-scope picker on the apply pages
   (web/jobs/apply, recruiters/job_applications/new). Kept here as a shared
   `web-` component. */
.web-level-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.web-body .web-level-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 4px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--ink-3);
  font-family: var(--f-mono);
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
  line-height: 1.2;
  min-width: 0;
  position: relative;
  cursor: pointer;
}
.web-level-btn::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color 0.2s;
}
.web-level-btn:hover { color: var(--ink-2); }
.web-level-btn.active { color: var(--ink); }
.web-level-btn.active::after { background: var(--ink); }

.web-level-btn-num {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  transition: color 0.2s;
}
.web-level-btn.active .web-level-btn-num { color: var(--ink-3); }

.web-level-btn-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

@media (max-width: 640px) {
  .web-level-selector { gap: 0; }
  .web-body .web-level-btn { padding: 4px 2px 6px; gap: 4px; }
  .web-level-btn-num { font-size: 9px; }
  .web-level-btn-label { font-size: 10px; letter-spacing: 0.02em; }
}
@media (max-width: 380px) {
  .web-body .web-level-btn { padding: 4px 1px 6px; }
  .web-level-btn-label { font-size: 9px; letter-spacing: 0; }
}

/* ─── Two-step builder ─── */
.web-builder {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* A step is either editing (full body) or summary (one line). The step head
   stays visible in both. Locked Step 2 dims and disables interaction until a
   scope is chosen. */
.web-step {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}
.web-step:first-child { border-top: none; padding-top: 0; }

.web-step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.web-step-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.web-step-title {
  font-family: var(--f-display);
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
  flex: 1;
}
.web-body .web-step-edit {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--ink-4);
  border-radius: 0;
  padding: 0 0 1px;
  transition: color 0.2s, border-color 0.2s;
}
.web-body .web-step-edit:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Edit body vs. summary line — visibility driven by step state classes. */
.web-step-edit-body { display: none; }
.web-step.is-editing .web-step-edit-body { display: block; }
.web-step-summary { display: none; }
.web-step.is-summary .web-step-summary { display: block; }

/* The Edit button only appears once the step has a committed value AND the
   step is collapsed (so the open step doesn't show a redundant Edit). */
.web-step-edit { visibility: hidden; }
.web-step.is-summary.is-chosen .web-step-edit { visibility: visible; }
.web-step--spectrum.is-summary .web-step-edit { visibility: visible; }

/* Locked Step 2 — greyed, head muted, no Edit. */
.web-step--spectrum.is-locked { opacity: 0.45; pointer-events: none; }
.web-step--spectrum.is-locked .web-step-title { color: var(--ink-3); }

.web-step-summary-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.web-step-summary-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.web-step-summary-value {
  font-size: 15px;
  color: var(--ink-2);
  font-family: var(--f-display);
  font-style: italic;
}

.web-step-hint {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 18px;
  text-wrap: pretty;
}

/* ─── Step 1 · Scope list ─── */
.web-scope-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.web-scope-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.2s;
}
.web-scope-row.is-selected .web-scope-row-name { color: var(--ink); }
.web-scope-row-num {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.web-scope-row-name {
  font-family: var(--f-display);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.web-scope-row-blurb {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
  text-wrap: pretty;
}
.web-scope-row-choose { flex-shrink: 0; }

@media (max-width: 480px) {
  .web-scope-row {
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "num  body"
      ".    choose";
    gap: 8px 12px;
  }
  .web-scope-row-num { grid-area: num; }
  .web-scope-row-body { grid-area: body; }
  .web-scope-row-choose { grid-area: choose; justify-self: start; }
}

/* ─── Selected-level visual (right panel) ─── */
.web-level-viz {
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.web-level-viz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
/* The right-panel "Edit" link reuses .web-step-edit; it only shows once a
   scope has been chosen (controller toggles .is-chosen on the wrap). */
.web-level-viz-edit { visibility: hidden; }
.web-level-viz.is-chosen .web-level-viz-edit { visibility: visible; }
.web-level-viz-name {
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.web-level-viz-name:empty { margin-bottom: 0; }
.web-level-viz-rungs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 48px;
  margin-bottom: 10px;
}
.web-level-viz-rung {
  flex: 1;
  background: var(--surface-2);
  border-radius: 1px;
  transition: background-color 0.25s;
}
.web-level-viz-rung.filled { background: var(--ink-3); }
.web-level-viz-rung.is-current { background: var(--ink); }
.web-level-viz-blurb {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  font-style: italic;
  font-family: var(--f-display);
  text-wrap: pretty;
}

/* Axis sliders */
.web-slider-list {
  border-top: 1px solid var(--border);
}
.web-slider-row {
  display: grid;
  grid-template-columns: 180px 1fr 52px;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
/* Landing playground drops the numeric value column — the spectrum is about
   relative importance, not a score, so only the colored fill is shown. */
.web-builder .web-slider-row { grid-template-columns: 180px 1fr; }

/* Per-axis hint "?" + popup (apply page self-rating). Uses the shared
   floating-tooltip controller, which positions the popup with position:fixed. */
.web-axis-hint { position: relative; display: inline-flex; }
.web-body .web-axis-hint-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-family: var(--f-mono);
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}
.web-body .web-axis-hint-trigger:hover,
.web-body .web-axis-hint-trigger:focus-visible {
  color: var(--ink);
  border-color: var(--ink-3);
  outline: none;
}
.web-axis-hint-popup {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 1000;
}
.web-axis-hint-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.web-axis-hint-title {
  display: block;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.web-axis-hint-body {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.web-slider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.web-slider-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.web-slider-track-zone {
  position: relative;
  height: 36px;
  cursor: pointer;
  padding: 14px 0;
  touch-action: none;
}
.web-slider-track {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 1px;
  overflow: visible;
}
.web-slider-tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 14px;
  background: var(--border-2);
  transform: translateX(-0.5px);
}
.web-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.75;
  border-radius: 1px;
  transition: width 140ms;
}

/* Landing playground sliders — the selected part is the bright colored fill.
   The unselected remainder is a rounded "groove" (a fill-surface tone, 3px,
   pill-shaped) so it reads clearly as track — distinct from the 1px hairline
   row/section borders, which previously looked identical to it. */
.web-builder .web-slider-track {
  background: transparent;
}
.web-builder .web-slider-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--border-2);
  border-radius: 999px;
}
.web-builder .web-slider-fill {
  opacity: 1;
  z-index: 1;
}
.web-slider-fill.dragging { transition: none; }
.web-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: left 140ms;
}
.web-slider-handle.dragging { transition: none; }
/* Numeric value — used by the apply / recruiter forms. The landing playground
   omits the value element entirely (relative importance, not a score). */
.web-slider-value {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.web-slider-blurb {
  /* Hidden on desktop — the side panel carries this content.
     Revealed in the mobile grid re-layout below. */
  display: none;
}

/* Footer always stacks message above presets — message length varies
   ("Strongest priority: Orientation." vs. "Leaning: Systems Thinking + AI
   Symbiosis.") and a flex row would randomly shove presets back and forth
   or wrap them mid-line. */
.web-playground-footer {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.web-playground-message {
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--f-display);
}
.web-playground-presets {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
}
.web-body .web-playground-preset {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 1px;
  border: none;
  border-bottom: 1px dashed var(--border-2);
  border-radius: 0;
  color: var(--ink-3);
  background: transparent;
  transition: color 0.2s, border-bottom-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.web-body .web-playground-preset:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.web-body .web-playground-preset.is-reset {
  color: var(--ink-4);
  border-bottom-style: dotted;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  margin-right: 4px;
}
.web-body .web-playground-preset.is-reset::before {
  content: "↺ ";
  font-style: normal;
  margin-right: 2px;
}
.web-body .web-playground-preset.is-reset:hover {
  color: var(--ink-2);
  border-bottom-color: var(--ink-2);
}

/* Mobile: keep presets in a single horizontally-scrollable row. The footer
   already stacks on all breakpoints; here we just tighten spacing. */
@media (max-width: 640px) {
  .web-playground-footer {
    gap: 14px;
    margin-top: 20px;
  }
  .web-playground-presets {
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .web-playground-presets::-webkit-scrollbar { display: none; }
  .web-body .web-playground-preset {
    font-size: 11px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }
  .web-body .web-playground-preset.is-reset { margin-right: 2px; }
}

/* Axis descriptions panel (right side of playground) */
.web-axes-panel {
  position: sticky;
  top: 96px;
}
.web-axes-panel-card {
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-axes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.web-axes-panel-level {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.web-axes-panel-list {
  display: flex;
  flex-direction: column;
}
.web-axes-panel-item {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: start;
  transition: opacity 300ms;
}
.web-axes-panel-item:first-child { border-top: none; }
.web-axes-panel-item.faded { opacity: 0.45; }
.web-axes-panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 5px;
}
.web-axes-panel-item.leading .web-axes-panel-dot {
  width: 9px;
  height: 9px;
  margin-top: 4px;
}
/* Hot — > 80% — accumulates on top of .leading: bigger, glowing dot,
   coloured title, slim accent stripe on the left of the row. */
.web-axes-panel-item.hot {
  position: relative;
  padding-left: 10px;
}
.web-axes-panel-item.hot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.6;
}
.web-axes-panel-item.hot .web-axes-panel-dot {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  box-shadow: 0 0 10px 1px currentColor;
}
.web-axes-panel-title {
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.web-axes-panel-item.leading .web-axes-panel-title { font-weight: 600; }
.web-axes-panel-item.hot .web-axes-panel-title {
  color: currentColor;
  font-weight: 700;
}
.web-axes-panel-blurb {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Attach-to-role footer (inside playground sticky) */
.web-attach {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.web-attach-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.web-attach-viz {
  width: 64px;
  height: 40px;
  flex-shrink: 0;
}
.web-attach-title {
  font-size: 13px;
  color: var(--ink);
}
.web-attach-sub {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

@media (max-width: 960px) {
  .web-playground { grid-template-columns: 1fr; gap: 40px; }
  /* The "six axes, explained" side panel is the first casualty on mobile —
     its content is now inlined next to each slider. Hide the card and the
     attach-to-role footer stays visible since it still wraps the continue
     CTA. */
  .web-axes-panel-card { display: none; }

  /* Slider row re-layouts into a three-row stack:
       · label row  (axis title + current value)
       · track row  (full-width slider)
       · blurb row  (inline description) */
  .web-slider-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "track track"
      "blurb blurb";
    gap: 6px 12px;
    padding: 14px 0;
  }
  /* Landing playground has no value cell — single column stack. */
  .web-builder .web-slider-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "track"
      "blurb";
  }
  .web-slider-label {
    grid-area: label;
    font-size: 13px;
    color: var(--ink);
  }
  .web-slider-value {
    grid-area: value;
  }
  .web-slider-track-zone {
    grid-area: track;
  }
  .web-slider-blurb {
    grid-area: blurb;
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-3);
    text-wrap: pretty;
  }
}

/* ─────────────── Voices ───────────────
   A voice is an editorial pull-quote: a hanging open-quote glyph, the words in
   display serif, then a hairline-topped footer with avatar · author · year ·
   source. Two surfaces share the same .web-voice: the landing feature row
   (3 large, side by side) and the /voices wall (a masonry of columns). */
.web-voice {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.web-voice-quote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
  flex: 1;
}
/* The text is author-authored Markdown, so it arrives as <p>/lists/inline
   formatting. Flatten the block margins and keep inline marks on-brand. */
.web-voice-quote > :first-child { margin-top: 0; }
.web-voice-quote > :last-child { margin-bottom: 0; }
.web-voice-quote p { margin: 0 0 0.7em; }
.web-voice-quote strong { font-weight: 600; color: var(--ink); }
.web-voice-quote em { font-style: italic; }
.web-voice-quote a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 2px;
}
.web-voice-quote a:hover { text-decoration-color: var(--ink); }
.web-voice-quote code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.web-voice-quote ul, .web-voice-quote ol { margin: 0.5em 0; padding-left: 1.3em; }
.web-voice-quote li { margin: 0.2em 0; }
/* Hanging decorative open-quote, set in the display face, tucked into the left
   margin so the quote text stays optically flush. */
.web-voice-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 0.6;
  color: var(--ink-4);
  margin-bottom: 8px;
}

.web-voice-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.web-voice-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.web-voice-avatar--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-transform: uppercase;
  border: 1px solid var(--border-2);
}
.web-voice-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.web-voice-author {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}
.web-voice-role {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.35;
  margin-top: 2px;
  /* keep long affiliations to one tidy line */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-voice-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.web-voice-source {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.web-voice-source:hover { color: var(--ink); }

/* ── Landing: a horizontal scroll rail of featured voices ──
   The RAIL scrolls, never the page, so quotes of any length and any viewport
   are overflow-safe. It bleeds full-width; padding-inline aligns the first
   card to the .web-container gutter (max(32px, centered margin)) and lets the
   last card scroll fully into view. Scroll-snap gives a tidy swipe on touch. */
.web-voices-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(32px, calc((100vw - 1240px) / 2 + 32px));
  padding-inline: max(32px, calc((100vw - 1240px) / 2 + 32px));
  padding-block: 4px 8px;
  /* hide the scrollbar chrome but keep the behavior */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.web-voices-rail::-webkit-scrollbar { display: none; }
.web-voice-railitem {
  flex: 0 0 auto;
  width: 380px;
  max-width: 82vw;
  scroll-snap-align: start;
}
.web-voice-railitem > .web-voice {
  height: 100%;
  padding: 30px 28px 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}
/* Keep rail cards a consistent, scannable height: clamp the quote body to a
   few lines (the full text lives on /voices and behind the source link). The
   clamp is on the inner block so the decorative ::before glyph isn't counted. */
.web-voice-railitem .web-voice-quote > * {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.web-voice--lg .web-voice-quote { font-size: 19px; line-height: 1.42; }
@media (max-width: 640px) {
  .web-voices-rail {
    gap: 16px;
    scroll-padding-left: 20px;
    padding-inline: 20px;
  }
  .web-voice-railitem { width: 300px; max-width: 84vw; }
}

/* ── /voices wall: masonry columns; quotes flow and break naturally ── */
.web-voices-wall {
  columns: 3;
  column-gap: 28px;
}
.web-voices-wall > .web-voice {
  break-inside: avoid;
  margin-bottom: 28px;
  padding: 26px 26px 22px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}
.web-voices-wall > .web-voice .web-voice-quote { font-size: 17px; }
.web-voices-wall > .web-voice .web-voice-quote::before { font-size: 44px; }
@media (max-width: 960px) { .web-voices-wall { columns: 2; } }
@media (max-width: 600px) { .web-voices-wall { columns: 1; } }

.web-voices-more {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.web-voices-empty {
  padding: 64px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
  border: 1px dashed var(--border);
  border-radius: 3px;
}

/* ─────────────── §05 Submit a role teaser ─────────────── */
.web-submit-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 960px) {
  .web-submit-teaser { grid-template-columns: 1fr; gap: 40px; }
}

/* Mini spectrum card (companion sidebar) */
.web-mini-spectrum {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-mini-spectrum-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.web-body .web-mini-spectrum-edit {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.web-body .web-mini-spectrum-edit:hover { color: var(--ink); }
.web-mini-spectrum-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
}
.web-mini-spectrum-foot-label { color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.web-mini-spectrum-foot-value { color: var(--ink); }

/* ─────────────── §06 Engineer waitlist ─────────────── */
.web-waitlist {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.web-waitlist-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: transparent;
  border: none;
  text-align: left;
}
.web-waitlist-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.web-waitlist-head-label {
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: -0.01em;
}
.web-waitlist-toggle-state {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.web-waitlist-body {
  display: none;
  padding-top: 20px;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.web-waitlist-body.open { display: grid; }
.web-waitlist-copy {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
.web-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.web-waitlist-confirmation {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink);
}
@media (max-width: 640px) {
  .web-waitlist-body { grid-template-columns: 1fr; }
}

/* ─────────────── SpectrumBars (horizontal) ─────────────── */
.web-spectrum-bars { width: 100%; }
.web-spectrum-bar-row {
  display: grid;
  align-items: center;
  gap: 12px;
}
.web-spectrum-bar-row[data-size="standard"] {
  grid-template-columns: 170px 1fr 48px;
  height: 40px;
}
.web-spectrum-bar-row[data-size="compact"] {
  grid-template-columns: 110px 1fr 40px;
  height: 24px;
}
.web-spectrum-bar-row[data-size="mini"] {
  grid-template-columns: 1fr;
  height: 16px;
}
/* No numeric value column — drop the reserved value track so the bar uses
   the full width (hero + /submit "designed spectrum"). */
.web-spectrum-bar-row.no-values[data-size="standard"] { grid-template-columns: 170px 1fr; }
.web-spectrum-bar-row.no-values[data-size="compact"] { grid-template-columns: 110px 1fr; }
.web-spectrum-bar-label {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.web-spectrum-bar-row[data-size="compact"] .web-spectrum-bar-label { font-size: 11px; }
.web-spectrum-bar-track {
  position: relative;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: visible;
  height: var(--web-bar-h, 10px);
}
.web-spectrum-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  /* No box-shadow — glow halos are the most expensive paint under animation
     (hero cycles six bars every 5s) and compound across mobile GPUs.
     The coloured bar carries the signal alone. */
  transition: width 900ms cubic-bezier(.4,.1,.25,1);
  width: var(--web-bar-v, 0%);
  background: var(--web-bar-color, var(--ink));
  opacity: var(--web-bar-opacity, 0.62);
}
.web-spectrum-bar-value {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.web-spectrum-bar-row[data-size="compact"] .web-spectrum-bar-value { font-size: 11px; }

@media (max-width: 560px) {
  .web-spectrum-bar-row[data-size="standard"] {
    grid-template-columns: 120px 1fr 40px;
    height: 36px;
  }
  .web-spectrum-bar-row.no-values[data-size="standard"] { grid-template-columns: 120px 1fr; }
  .web-spectrum-bar-label { font-size: 12px; }
}

/* ─────────────── /jobs index ─────────────── */
.web-jobs-header {
  padding: 36px 0 24px;
  border-bottom: 1px solid var(--border);
}
.web-jobs-header-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.web-jobs-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.web-jobs-count {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Filters — level + work-arrangement chip rows. */
.web-jobs-filters {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.web-jobs-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.web-jobs-filter-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 44px;
  flex-shrink: 0;
}
.web-body .web-jobs-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: transparent;
  font-size: 12px;
  color: var(--ink-2);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.web-body .web-jobs-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.web-body .web-jobs-chip.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.web-body .web-jobs-chip.is-disabled {
  color: var(--ink-4);
  border-color: var(--border);
  cursor: default;
  pointer-events: none;
}
/* Level chip — scope-bars + label. */
.web-jobs-chip--level { gap: 7px; padding-left: 10px; }
/* On the active (light) chip, flip the scope bars so they read on dark text. */
.web-jobs-chip.is-active .web-scope-bar { background: color-mix(in oklab, var(--bg) 35%, transparent); }
.web-jobs-chip.is-active .web-scope-bar.filled { background: var(--bg); }

/* Pagination row. */
.web-jobs-pagination {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.web-jobs-page-status {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.web-jobs-section { padding: 28px 0 72px; }
.web-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card. The whole row is a single anchor for accessibility — clicking
   anywhere opens the role. */
.web-body .web-job-card {
  display: block;
  padding: 28px 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background-color 0.2s;
}
.web-body .web-job-card:hover {
  border-color: var(--ink);
}
.web-job-card-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.web-job-card-body { min-width: 0; }
.web-job-card-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.web-job-card-company {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.web-job-card-sep { font-size: 11px; color: var(--ink-4); }
.web-job-card-scope,
.web-job-card-team {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-job-card-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  line-height: 1.15;
  color: var(--ink);
}
.web-job-card-snippet {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 560px;
}
.web-job-card-spectrum {
  /* Compact spectrum on the right — let it breathe a little. */
  padding-top: 4px;
}

@media (max-width: 800px) {
  .web-job-card-grid { grid-template-columns: 1fr; gap: 24px; }
  .web-body .web-job-card { padding: 22px 20px; }
}

/* Empty state */
.web-jobs-empty {
  padding: 56px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.web-jobs-empty-title {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.web-jobs-empty-copy {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 24px;
}
.web-jobs-empty-cta { margin-top: 20px; }

/* ─────────────── /jobs/:slug detail ─────────────── */

/* Back-link strip — slim row, leaves padding for the hero below. */
.web-job-detail-back {
  padding: 20px 0 12px;
  border-bottom: 1px solid var(--border);
}
.web-body .web-job-detail-back-link {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.web-body .web-job-detail-back-link:hover { color: var(--ink); }

.web-job-detail-flash {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink);
}
.web-job-detail-flash-alert { border-color: var(--ax-antifragility); }

/* Hero section — title and apply on the left, sticky shape on the right.
   Roughly 3:1 split — shape sidebar ~25% as discussed. */
.web-job-detail-hero {
  padding: 40px 0 36px;
}
.web-job-detail-hero-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 56px;
  align-items: start;
}

.web-job-detail-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.web-job-detail-company {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.web-job-detail-sep { font-size: 12px; color: var(--ink-4); }
.web-job-detail-scope,
.web-job-detail-team {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.web-job-detail-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--ink);
}

.web-job-detail-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.web-body .web-job-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.web-body .web-job-detail-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.web-job-detail-timeline {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.web-job-detail-timeline-label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.web-job-detail-timeline-value {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-2);
}

.web-job-detail-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.web-job-detail-note {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.web-job-detail-note-prefix {
  color: var(--ink-2);
  margin-right: 6px;
}

/* Sticky shape sidebar */
.web-job-detail-shape {
  padding: 20px 20px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  position: sticky;
  top: 88px;
}
.web-job-detail-shape-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.web-job-detail-shape-eyebrow { font-size: 10px; }
.web-job-detail-shape-scope {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-job-detail-shape-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.web-job-detail-shape-strongest {
  display: block;
  font-size: 10px;
  margin-bottom: 8px;
}
.web-job-detail-shape-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.web-job-detail-shape-pill {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.web-job-detail-shape-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Why-this-spectrum block inside the sticky shape box. */
.web-job-detail-shape-why {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.web-job-detail-shape-why .web-job-detail-shape-eyebrow {
  display: block;
  margin-bottom: 10px;
}
.web-job-detail-shape-why .web-job-detail-why { margin: 0; }

/* Apply CTA below the spectrum — full width inside the box. */
/* Sticky-box CTAs — Claim (primary) above Apply (secondary). */
.web-job-detail-shape-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.web-body .web-job-detail-shape-claim,
.web-body .web-job-detail-shape-apply {
  display: flex;
  width: 100%;
  justify-content: center;
}
/* Standalone apply button (normal job page) keeps its own top gap; inside
   .web-job-detail-shape-actions the wrapper's margin + gap handle spacing. */
.web-body .web-job-detail-shape-apply { margin-top: 16px; }
.web-job-detail-shape-actions .web-body .web-job-detail-shape-apply,
.web-body .web-job-detail-shape-actions .web-job-detail-shape-apply { margin-top: 0; }

/* Model-framing line below the CTAs. */
.web-job-detail-shape-context {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.web-body .web-job-detail-shape-context a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.web-body .web-job-detail-shape-context a:hover { color: var(--ink); }

/* The work description sits a bit below the title/meta. */
.web-job-detail-work-copy { margin-top: 24px; }

/* Mobile sticky bottom apply bar — hidden on desktop. */
.web-job-detail-apply-bar { display: none; }

@media (max-width: 960px) {
  .web-job-detail-hero { padding: 40px 0 36px; }
  .web-job-detail-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .web-job-detail-shape { position: static; }
  /* In-box CTAs are redundant once the bottom bar shows; keep the secondary
     "Apply as an engineer" reachable but drop the duplicate primary Claim. */
  .web-body .web-job-detail-shape-claim { display: none; }
  .web-job-detail-shape-actions { margin-top: 16px; }

  /* Fixed bottom apply bar. */
  .web-job-detail-apply-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
  }
  .web-body .web-job-detail-apply-bar .web-btn { width: 100%; justify-content: center; }
  /* Keep page content clear of the fixed bar. */
  .web-job-detail-body { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .web-job-detail-back { padding: 24px 0 12px; }
}

/* Body — description, notes, why-this-shape sidebar. */
.web-job-detail-body {
  padding: 48px 0 72px;
}
.web-job-detail-body-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 72px;
  align-items: start;
}
.web-job-detail-body-eyebrow {
  margin-bottom: 18px;
}
.web-job-detail-body-copy {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 32px;
  text-wrap: pretty;
}
/* simple_format wraps each paragraph in its own <p>; carry the styling
   onto each inner paragraph and add real spacing between them. */
.web-job-detail-body-copy p {
  margin: 0 0 16px;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.web-job-detail-body-copy p:last-child { margin-bottom: 0; }

.web-job-detail-body-eyebrow-notes { margin-top: 8px; }
.web-job-detail-body-notes {
  padding: 18px 20px;
  border-left: 2px solid var(--border-2);
  background: var(--surface);
  border-radius: 0 2px 2px 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.web-job-detail-body-notes p {
  margin: 0 0 12px;
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  color: inherit;
  line-height: inherit;
}
.web-job-detail-body-notes p:last-child { margin-bottom: 0; }

/* The existing team — two labeled sub-fields (size & structure / strengths &
   constraints) grouped under one heading. */
.web-job-detail-team-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.web-job-detail-team-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
/* Inside the grouped block the notes read as plain prose, not the big italic
   pull-quote (which would be too heavy stacked twice). */
.web-job-detail-team-item .web-job-detail-body-notes {
  padding: 0;
  border-left: none;
  background: transparent;
  border-radius: 0;
  font-family: var(--f-body);
  font-style: normal;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* "Why this shape" list */
.web-job-detail-why {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.web-job-detail-why-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 12px;
  align-items: baseline;
}
.web-job-detail-why-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.web-job-detail-why-title {
  font-size: 12px;
  color: var(--ink);
}
.web-job-detail-why-value { color: var(--ink-3); }
.web-job-detail-why-blurb {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Description tabs — Reintech / Original JD (public marketing job page) */
.web-job-detail-tabs {
  display: flex;
  gap: 4px;
  margin-top: 24px;
  border-bottom: 1px solid var(--border);
}
.web-body .web-job-detail-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.web-body .web-job-detail-tab:hover { color: var(--ink-2); }
.web-body .web-job-detail-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
/* The tab panel sits right under the tabs; reset the hero copy's top margin. */
.web-job-detail-tabs + .web-job-detail-work-copy { margin-top: 24px; }

/* Why this spectrum — full per-axis rationale list (below the hero) */
.web-job-detail-rationales {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 20px;
}
.web-job-detail-rationale {
  border-left: 3px solid var(--border-2);
  padding-left: 16px;
}
.web-job-detail-rationale-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.web-job-detail-rationale-head strong {
  font-size: 15px;
  color: var(--ink);
}
.web-job-detail-rationale-pct {
  font-size: 13px;
  color: var(--ink-3);
}
.web-job-detail-rationale-body {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.web-job-detail-rationale-body p { margin: 0 0 10px; }
.web-job-detail-rationale-body p:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
  .web-job-detail-body { padding: 56px 0 72px; }
  .web-job-detail-body-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ─────────────── /jobs/:slug/apply ─────────────── */

/* Header strip — title, lead, step pills */
.web-apply-header {
  padding: 40px 0 24px;
  border-bottom: 1px solid var(--border);
}
.web-apply-header-eyebrow { margin-bottom: 14px; }
.web-apply-header-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 16px;
  color: var(--ink);
}
/* Title links back to the job detail page. */
.web-body .web-apply-header-title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}
.web-body .web-apply-header-title-link:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 4px; }
.web-apply-header-sub {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.55;
  text-wrap: pretty;
}

.web-apply-steps {
  margin-top: 28px;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.web-body .web-apply-step {
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-3);
  border-right: 1px solid var(--border);
  border-radius: 0;
  cursor: default;
  user-select: none;
  transition: background-color 0.2s, color 0.2s;
}
.web-body .web-apply-step:last-child { border-right: none; }
.web-body .web-apply-step.is-active {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 480px) {
  .web-body .web-apply-step { padding: 8px 14px; font-size: 11px; letter-spacing: 0.04em; }
}

/* Errors banner */
.web-apply-errors-section { padding: 24px 0 0; }
.web-apply-errors {
  padding: 16px 20px;
  border: 1px solid var(--ax-antifragility);
  background: color-mix(in oklab, var(--ax-antifragility) 12%, var(--bg));
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink);
}
.web-apply-errors-title { font-weight: 500; margin-bottom: 8px; }
.web-apply-errors ul { padding-left: 20px; margin: 0; }

/* Step pane visibility */
.web-apply-step-pane { padding: 56px 0 80px; }
.web-apply-step-pane.is-hidden { display: none; }

.web-apply-eyebrow { margin-bottom: 14px; }
.web-apply-eyebrow-spacer { margin-top: 36px; }

/* Step 1 — shape comparison layout */
.web-apply-shape-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Comparison sidebar is only relevant once the candidate is building the
   spectrum — hide it during the level-pick sub-step and let the builder span
   full width. The controller toggles is-on-spectrum / is-on-scope on its root. */
.is-on-scope .web-apply-shape-grid { grid-template-columns: 1fr; }
.is-on-scope .web-apply-compare { display: none; }
/* Keep the level picker a comfortable reading width, not full-page. */
.is-on-scope .web-builder { max-width: 620px; }

/* Continue gate hint. */
.web-apply-continue-hint {
  display: inline-block;
  margin-left: 14px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--f-mono);
}
.web-apply-shape-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--f-display);
  font-style: italic;
  max-width: 520px;
  line-height: 1.5;
}

/* Sticky comparison sidebar */
.web-apply-compare {
  position: sticky;
  top: 88px;
}
.web-apply-compare-card {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-apply-compare-eyebrow { margin-bottom: 16px; }

.web-apply-compare-match {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.web-apply-compare-pct {
  font-family: var(--f-display);
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.web-apply-compare-pct::after {
  content: "%";
  font-size: 20px;
  color: var(--ink-3);
  margin-left: 2px;
}
.web-apply-compare-label {
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.web-apply-compare-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.web-apply-compare-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px;
  align-items: center;
}
.web-apply-compare-axis {
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.web-apply-compare-track {
  position: relative;
  height: 16px;
}
.web-apply-compare-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
.web-apply-compare-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 1px;
  opacity: 0.55;
  transition: left 200ms, width 200ms;
  pointer-events: none;
}
.web-apply-compare-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.web-apply-compare-dot.is-role {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
  background: var(--bg);
}
.web-apply-compare-dot.is-you {
  width: 8px;
  height: 8px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--bg);
  transition: left 200ms;
}

.web-apply-compare-legend {
  margin-top: 16px;
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--ink-3);
}
.web-apply-compare-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.web-apply-compare-legend-dot.is-you { background: var(--ink); }
.web-apply-compare-legend-dot.is-role {
  border: 1.5px solid var(--ink);
  background: var(--bg);
}

.web-apply-compare-scope {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.web-apply-compare-scope-label {
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.web-apply-compare-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.web-apply-compare-scope-side {
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-apply-compare-scope-value {
  font-size: 13px;
  color: var(--ink);
}

.web-apply-compare-message {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Step 1 → continue actions footer */
.web-apply-step-actions {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Claim this role (public marketing job) — minimal name+email form ── */
.web-claim-container { max-width: 520px; }
.web-claim-form { margin-top: 8px; }
.web-field-hint {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.web-claim-done {
  padding: 24px 0;
  font-size: 17px;
  color: var(--ink-2);
}
.web-claim-done .web-apply-header-sub { margin-top: 10px; }
.web-apply-step-hint {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Step 2 — details layout */
.web-apply-details-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.web-apply-details-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.web-apply-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.web-apply-pledge {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.web-apply-pledge-tick {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.web-apply-pledge-copy {
  flex: 1;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.web-apply-pledge-copy strong { color: var(--ink); font-weight: 500; }

/* Step 2 — sticky summary sidebar */
.web-apply-summary {
  position: sticky;
  top: 88px;
  height: fit-content;
}
.web-apply-summary-card {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-apply-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.web-body .web-apply-summary-edit {
  font-size: 10px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.web-body .web-apply-summary-edit:hover { color: var(--ink); }
.web-apply-summary-title {
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--ink);
}
.web-apply-summary-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-apply-summary-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.web-apply-summary-foot-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.web-apply-summary-foot-pct {
  font-family: var(--f-display);
  font-size: 22px;
}
.web-apply-summary-foot-pct::after {
  content: "%";
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 2px;
}

/* Mobile */
@media (max-width: 960px) {
  .web-apply-shape-grid,
  .web-apply-details-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .web-apply-compare,
  .web-apply-summary { position: static; }
}
@media (max-width: 640px) {
  .web-apply-step-pane { padding: 40px 0 64px; }
  .web-apply-grid-two { grid-template-columns: 1fr; gap: 16px; }
  .web-apply-step-actions { flex-direction: column; align-items: stretch; gap: 14px; }
}

/* ─────────────── /apply tweaks (Phase 1.3b polish) ─────────────── */

/* Show the per-axis blurb on every viewport when we're on the apply page.
   The same partial is used on the landing playground where the blurb is
   redundant with the side panel — there it stays hidden on desktop. */
.web-apply-page .web-slider-row {
  grid-template-columns: 180px 1fr 52px;
  grid-template-areas:
    "label track value"
    ".     blurb blurb";
  row-gap: 4px;
  padding: 14px 0;
}
.web-apply-page .web-slider-label  { grid-area: label; }
.web-apply-page .web-slider-track-zone { grid-area: track; }
.web-apply-page .web-slider-value  { grid-area: value; }
.web-apply-page .web-slider-blurb {
  grid-area: blurb;
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .web-apply-page .web-slider-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "track track"
      "blurb blurb";
    gap: 6px 12px;
  }
}

/* Level scope blurb under the selector — single line, fixed height so the
   layout doesn't shift when the user toggles between scopes. */
.web-apply-level-blurb-wrap {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 22px;
  overflow: hidden;
}
.web-apply-level-blurb-prefix {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
.web-apply-level-blurb {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: pretty;
}

/* ─────────────── /submit ─────────────── */

.web-submit-header {
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--border);
}
.web-submit-header-eyebrow { margin-bottom: 12px; }
.web-submit-header-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 12px;
  color: var(--ink);
}
.web-submit-header-sub {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.55;
  text-wrap: pretty;
}

.web-submit-form-section {
  padding: 32px 0 64px;
}
.web-submit-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.web-submit-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Higher-contrast form on /submit — brighter field labels, more visible
   input borders + placeholders than the shared defaults. Scoped here so the
   apply form keeps its quieter treatment. */
.web-submit-form-fields .web-field label { color: var(--ink-2); }
.web-submit-form-fields .web-input,
.web-submit-form-fields .web-textarea,
.web-submit-form-fields .web-select { border-color: var(--ink-4); color: var(--ink); }
.web-submit-form-fields .web-input::placeholder,
.web-submit-form-fields .web-textarea::placeholder { color: var(--ink-3); }
.web-submit-form-fields .web-input:focus,
.web-submit-form-fields .web-textarea:focus,
.web-submit-form-fields .web-select:focus { border-color: var(--ink); }

/* Segmented radio group (e.g. Work setup: Remote / Hybrid / On-site).
   `align-self: start` keeps the bordered box hugging its three options —
   otherwise the flex-column .web-field stretches it full-width, leaving dead
   space to the right of the last option. */
.web-segmented {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.web-segmented-option {
  position: relative;
  display: inline-flex;
}
/* The label fills its option so the highlight covers the whole clickable
   cell, never just the text width. */
.web-segmented-option .web-segmented-label { flex: 1; justify-content: center; }
.web-segmented-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.web-segmented-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-2);
  border-left: 1px solid var(--border-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.web-segmented-option:first-child .web-segmented-label { border-left: none; }
.web-segmented-label:hover { color: var(--ink); background: var(--surface); }
.web-segmented-input:checked + .web-segmented-label {
  background: var(--ink);
  color: var(--bg);
}
.web-segmented-input:focus-visible + .web-segmented-label {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* Sticky locked-shape sidebar */
.web-submit-shape {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.web-submit-shape-card {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-submit-shape-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.web-body .web-submit-shape-edit {
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.web-body .web-submit-shape-edit:hover { color: var(--ink); }

.web-submit-shape-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.web-submit-shape-foot-label {
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-submit-shape-foot-value {
  font-size: 13px;
  color: var(--ink);
}
.web-submit-shape-foot-value .web-scope-bars {
  margin-right: 8px;
}

.web-submit-shape-note {
  padding: 16px 18px;
  background: var(--bg);
  border: 1px dashed var(--border-2);
  border-radius: 2px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.web-submit-shape-note ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.web-submit-shape-note li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.web-submit-shape-note li .mono { font-size: 10px; color: var(--ink-4); }

/* Pledge block (5% on hire) */
.web-submit-pledge {
  margin-top: 8px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.web-submit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 960px) {
  .web-submit-grid { grid-template-columns: 1fr; gap: 32px; }
  .web-submit-shape { position: static; }
}
@media (max-width: 640px) {
  .web-submit-form-section { padding: 40px 0 64px; }
  .web-submit-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ─────────────── /submit confirmation ─────────────── */
.web-submit-done {
  padding: 36px 0 72px;
}
.web-submit-done-card {
  padding: 56px 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-align: center;
}
.web-submit-done-tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-submit-done-title {
  font-family: var(--f-display);
  font-size: 36px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--ink);
}
.web-submit-done-copy {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.55;
  text-wrap: pretty;
}
.web-submit-done-ref {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.web-submit-done-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
@media (max-width: 640px) {
  .web-submit-done-card { padding: 40px 24px; }
}

/* ─────────────── Submitted · account funnel ─────────────── */
/* Compact "role received" confirmation that sits above the account card. */
.web-funnel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.web-funnel-tick {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.web-funnel-title {
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
.web-funnel-sub {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.web-funnel-ref {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* The main event — the account-creation card. */
.web-funnel-card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}
.web-funnel-card-head { margin-bottom: 24px; }
.web-funnel-card-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.5vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 10px;
  line-height: 1.1;
}
.web-funnel-card-lead {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.web-funnel-form { margin: 0; }
.web-funnel-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.web-funnel-fields .web-field label { color: var(--ink-2); }
.web-funnel-fields .web-input { border-color: var(--ink-4); }
.web-funnel-fields .web-input:focus { border-color: var(--ink); }
@media (max-width: 560px) {
  .web-funnel-fields { grid-template-columns: 1fr; }
}

/* Locked email row — reads as confirmed identity, not an input. */
.web-funnel-field--locked .web-funnel-locked-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 15px;
  color: var(--ink);
}
.web-funnel-locked-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.web-body .web-funnel-change-link {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--ink-4);
  border-radius: 0;
  padding: 0 0 1px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.web-body .web-funnel-change-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.web-funnel-field-hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.web-funnel-bullets {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.web-funnel-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.web-funnel-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ax-reciprocity-soft);
  border: 1px solid var(--ax-reciprocity);
}
.web-funnel-bullets li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 4px;
  border-left: 1.5px solid var(--ax-reciprocity);
  border-bottom: 1.5px solid var(--ax-reciprocity);
  transform: rotate(-45deg);
}

.web-funnel-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.web-funnel-fineprint {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .web-funnel-card { padding: 24px 20px; }
}

/* ─────────────── /manifesto ─────────────── */

/* Long-form editorial layout — narrow column, generous prose, axis sub-grid. */

.web-manifesto-eyebrow { margin-bottom: 16px; }

.web-manifesto-hero {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--border);
}
.web-manifesto-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 14px 0 28px;
}
.web-manifesto-lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 720px;
}
.web-manifesto-lede em { font-style: italic; color: var(--ink); }

.web-manifesto-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.web-manifesto-section-surface { background: var(--surface); }
.web-manifesto-section-eyebrow { margin-bottom: 14px; }
.web-manifesto-h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 8px 0 32px;
  text-wrap: balance;
}

.web-manifesto-prose {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  text-wrap: pretty;
}
.web-manifesto-prose p { margin: 0 0 18px; }
.web-manifesto-prose p:last-child { margin-bottom: 0; }
.web-manifesto-prose strong { color: var(--ink); font-weight: 500; }
.web-manifesto-prose em { font-style: italic; }

/* § 03 — Beliefs */
.web-manifesto-beliefs {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.web-manifesto-belief {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
}
.web-manifesto-belief-num {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  padding-top: 8px;
}
.web-manifesto-belief-claim {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.web-manifesto-belief-body p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  text-wrap: pretty;
  margin: 0;
}
@media (max-width: 640px) {
  .web-manifesto-belief { grid-template-columns: 1fr; gap: 8px; }
  .web-manifesto-belief-num { padding-top: 0; }
}

/* § 04 — Six axes */
.web-manifesto-axes-intro { margin-bottom: 56px; padding: 0; }
.web-manifesto-axes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.web-manifesto-axis {
  padding: 32px 32px 36px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.web-manifesto-axis:nth-child(2n)         { border-right: none; }
.web-manifesto-axis:nth-last-child(-n+2)  { border-bottom: none; }
.web-manifesto-axis:nth-last-child(1):nth-child(odd) { border-right: none; }

.web-manifesto-axis-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.web-manifesto-axis-num {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.web-manifesto-axis-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.web-manifesto-axis-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.web-manifesto-axis-tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.web-manifesto-axis-blurb {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 800px) {
  .web-manifesto-axes { grid-template-columns: 1fr; }
  .web-manifesto-axis {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .web-manifesto-axis:last-child { border-bottom: none; }
}

/* § 05 — What we don't do */
.web-manifesto-dont {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.web-manifesto-dont-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.web-manifesto-dont-row:first-child { border-top: none; padding-top: 0; }
.web-manifesto-dont-label {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-manifesto-dont-copy {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .web-manifesto-dont-row { grid-template-columns: 1fr; gap: 8px; }
}

/* § 06 — Slogans + CTA */
.web-manifesto-slogans {
  margin-top: 40px;
  padding: 24px 28px;
  border-left: 2px solid var(--border-2);
  background: var(--bg);
  border-radius: 0 2px 2px 0;
}
.web-manifesto-slogans p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0 0 8px;
}
.web-manifesto-slogans p:last-child { margin-bottom: 0; }

.web-manifesto-cta {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .web-manifesto-section { padding: 56px 0; }
  .web-manifesto-hero { padding: 56px 0 40px; }
  .web-manifesto-cta { flex-direction: column; align-items: stretch; }
}

/* Lighter form labels on the public-facing submit + apply forms.
   Slightly tighter letter-spacing too — feels less shouty next to the
   dark inputs. */
.web-apply-page .web-field label,
.web-submit-form .web-field label {
  color: var(--ink-4);
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* ─────────────── Mini scope bars (inline, reusable) ───────────────
   Same climbing-stair visual as the §03 ladder on the landing page,
   scaled down for inline use in job lists, job detail, apply page.
   Baseline is anchored by `vertical-align: text-bottom` so the bars
   sit on the same line as surrounding text glyphs. */
.web-scope-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  vertical-align: text-bottom;
  line-height: 1;
}
.web-scope-bar {
  flex: 0 0 auto;
  background: var(--border, rgba(15, 23, 42, 0.18));
  border-radius: 1px 1px 0 0;
}
.web-scope-bar.filled { background: var(--ink, rgb(15, 23, 42)); }

.web-scope-bars--xs { height: 11px; gap: 1.5px; }
.web-scope-bars--xs .web-scope-bar { width: 2.5px; }

.web-scope-bars--sm { height: 14px; gap: 2px; }
.web-scope-bars--sm .web-scope-bar { width: 3.5px; }

.web-scope-bars--md { height: 22px; gap: 2px; }
.web-scope-bars--md .web-scope-bar { width: 5px; }

/* Sidebar Spectrum head wrapper: bars + level label on one line. */
.web-job-detail-shape-scope-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Apply-page Scope alignment row: bars + level name on one line. */
.web-apply-compare-scope-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

/* ─────────────── Spectrum explainer (reusable popover) ───────────────
   Native <details>/<summary> — no JS. The trigger sits inline with the
   eyebrow above the sliders; expanded body is a soft card that pushes
   content down without overlay or focus trapping. */
.web-apply-rate-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 4px;
}
/* `display: contents` lets the trigger sit inside the flex header row
   while the expanded body falls into normal block flow below the row,
   so opening it does not push the trigger up or down. */
.web-spectrum-explainer { display: contents; }
.web-spectrum-explainer-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 2px;
}
.web-spectrum-explainer-trigger::-webkit-details-marker { display: none; }
.web-spectrum-explainer-trigger:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-3);
}
.web-spectrum-explainer-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  line-height: 1;
}
.web-spectrum-explainer[open] .web-spectrum-explainer-trigger {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.web-spectrum-explainer-body {
  flex-basis: 100%;
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--surface, #f7f6f2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2, var(--ink));
  max-width: 640px;
}
.web-spectrum-explainer-body p { margin: 0 0 10px; }
.web-spectrum-explainer-body p:last-child { margin: 0; }
.web-spectrum-explainer-body strong { color: var(--ink); font-weight: 600; }
.web-spectrum-explainer-coda {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 12.5px;
}