/* Solutions surface (/solutions hub + /solutions/<slug> pillars).
   Loaded AFTER site.css. Two halves:
     1. B2B section primitives (hero grid, teamcard, quote/tag, studio split,
        mock window, chips) — formerly teams.css; the hub absorbed the retired
        /teams page and the pillars reuse the same primitives.
     2. Pillar-specific sections (trigger strip, baseline, scenarios,
        checklist) — the sol-* classes.
   Colors use --semantic-*/--base-* tokens so dark mode flips for free. */

/* ── 1. B2B section primitives ─────────────────────────────────────────── */

/* Hero (shared 2-col shape with Home). */
.pub-hero { padding-block: 4rem 3rem; }
.pub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3rem; align-items: center; }
.pub-hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.pub-hero__sub { margin: 0; max-width: 34rem; color: var(--semantic-text-text-secondary); font-size: 1.1rem; line-height: 1.6; }
.pub-hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Team-progress preview card. */
.pub-teamcard { background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-subtle); border-radius: 1.25rem; box-shadow: 0 20px 50px -24px rgba(20,20,40,.25); padding: 1.25rem 1.4rem; }
.pub-teamcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pub-teamcard__title { font-weight: 600; font-size: 0.95rem; }
.pub-teamcard__sub { font-size: 0.8rem; color: var(--semantic-text-text-tertiary); margin-top: 0.15rem; }
.pub-teamcard__pill { flex: none; font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--pub-radius-pill); background: var(--semantic-background-bg-success); color: var(--semantic-text-text-success); }
.pub-teamcard__divider { height: 1px; background: var(--semantic-border-border-subtle); margin: 0.9rem 0; }
.pub-person { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; }
.pub-person__avatar { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 600; background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); }
.dark .pub-person__avatar { background: color-mix(in srgb, var(--base-primary-primary-500) 22%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-200); }
.pub-person__name { font-size: 0.85rem; width: 4.5rem; flex: none; }
.pub-person__bar { flex: 1; height: 0.375rem; border-radius: var(--pub-radius-pill); background: var(--semantic-border-border-subtle); overflow: hidden; }
.pub-person__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--base-primary-primary-500); }
.pub-person__status { flex: none; width: 3rem; text-align: right; font-size: 0.78rem; color: var(--semantic-text-text-secondary); }
.pub-person__status--ready { color: var(--semantic-text-text-success); font-weight: 600; }
.pub-teamcard__next { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--semantic-text-text-secondary); }
.pub-teamcard__next::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--base-accent-accent-500); }

/* Quote cards (pain sections). */
.pub-quote__title { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 600; }
.pub-quote__text { margin: 0; color: var(--semantic-text-text-secondary); font-size: 0.95rem; line-height: 1.55; }

/* What-you-get tags. */
.pub-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; padding: 0.18rem 0.5rem; border-radius: var(--pub-radius-pill); background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); margin-bottom: 0.9rem; }
.dark .pub-tag { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.pub-tags-row { display: inline-flex; gap: 0.4rem; }

/* Studio split. */
.pub-studio__grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3rem; align-items: center; }
.pub-studio__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.pub-studio__checklist { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.pub-check { display: flex; gap: 0.75rem; }
.pub-check__icon { flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--pub-radius-sm); display: grid; place-items: center; background: var(--base-primary-primary-50); color: var(--base-primary-primary-600); }
.dark .pub-check__icon { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.pub-check__icon .pub-icon { width: 0.9rem; height: 0.9rem; }
.pub-check__title { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 600; }
.pub-check__text { margin: 0; font-size: 0.88rem; color: var(--semantic-text-text-secondary); line-height: 1.5; }

/* Studio mock window. */
.pub-mock { border: 1px solid var(--semantic-border-border-default); border-radius: var(--pub-radius); overflow: hidden; background: var(--semantic-background-bg-surface); box-shadow: 0 24px 60px -30px rgba(20,20,40,.3); }
.pub-mock__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--semantic-border-border-subtle); background: var(--semantic-background-bg-page); }
.pub-mock__bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--semantic-border-border-strong); display: inline-block; }
.pub-mock__bar span { margin-left: 0.5rem; font-size: 0.78rem; color: var(--semantic-text-text-tertiary); }
.pub-mock__body { display: grid; grid-template-columns: 9.5rem 1fr; }
.pub-mock__rail { border-right: 1px solid var(--semantic-border-border-subtle); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; }
.pub-mock__rail a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: var(--pub-radius-sm); font-size: 0.82rem; color: var(--semantic-text-text-secondary); }
.pub-mock__rail a.is-active { background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); font-weight: 600; }
.dark .pub-mock__rail a.is-active { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-200); }
.pub-mock__rail .pub-icon { width: 0.95rem; height: 0.95rem; }
.pub-mock__main { padding: 1.1rem; }
.pub-mock__h { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 600; }
.pub-mock__stats { display: flex; gap: 1.75rem; margin-bottom: 1.1rem; }
.pub-mock__stat b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.pub-mock__stat span { font-size: 0.75rem; color: var(--semantic-text-text-tertiary); }
.pub-mock__progs { display: flex; flex-direction: column; gap: 0.5rem; }
.pub-mock__prog { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; border: 1px solid var(--semantic-border-border-subtle); border-radius: var(--pub-radius-sm); font-size: 0.85rem; }
.pub-status { font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: var(--pub-radius-pill); }
.pub-status--published { background: var(--semantic-background-bg-success); color: var(--semantic-text-text-success); }
.pub-status--review { background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); }
.dark .pub-status--review { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }

/* Chips + scale note. */
.pub-bigchips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 2.5rem; }
.pub-bigchip { padding: 0.55rem 1.1rem; border-radius: var(--pub-radius-pill); border: 1px solid var(--semantic-border-border-default); background: var(--semantic-background-bg-surface); font-size: 0.92rem; font-weight: 500; }
.pub-scale-note { max-width: 46rem; margin: 2.25rem auto 0; text-align: center; color: var(--semantic-text-text-secondary); font-size: 1rem; line-height: 1.65; }

/* ── 2. Pillar-specific sections (sol-*) ───────────────────────────────── */

/* Hero readiness card: wider name column for role labels (Engineering, …). */
.sol-readycard .pub-person__name { width: 5.5rem; }

/* Regulatory trigger strip. */
.sol-trigger {
  background: var(--semantic-background-bg-surface);
  border-block: 1px solid var(--semantic-border-border-subtle);
  padding-block: 2rem;
}
.sol-trigger .pub-container { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.sol-trigger__line {
  margin: 0; display: inline-flex; align-items: center; gap: 0.6rem;
  max-width: 52rem; text-align: center;
  color: var(--semantic-text-text-secondary); font-size: 1.02rem; font-weight: 500; line-height: 1.5;
}
.sol-trigger__line .pub-icon { flex: none; color: var(--base-primary-primary-500); width: 1.25rem; height: 1.25rem; }

/* Baseline (all-employees) card — full-width, tinted. */
.sol-baseline {
  display: flex; align-items: center; gap: 1.1rem; margin-top: 2.5rem;
  padding: 1.35rem 1.5rem; border-radius: var(--pub-radius);
  background: var(--base-primary-primary-50); border: 1px solid var(--base-primary-primary-100);
}
.dark .sol-baseline {
  background: color-mix(in srgb, var(--base-primary-primary-500) 14%, var(--base-neutral-neutral-800));
  border-color: color-mix(in srgb, var(--base-primary-primary-500) 28%, var(--base-neutral-neutral-800));
}
.sol-baseline__chip {
  flex: none; width: 3rem; height: 3rem; border-radius: var(--pub-radius-sm);
  display: grid; place-items: center;
  background: var(--semantic-background-bg-surface); color: var(--base-primary-primary-600);
}
.dark .sol-baseline__chip { color: var(--base-primary-primary-300); }
.sol-baseline__chip .pub-icon { width: 1.5rem; height: 1.5rem; }
.sol-baseline__body { display: flex; flex-direction: column; gap: 0.3rem; }
.sol-baseline__row { display: flex; align-items: center; gap: 0.7rem; }
.sol-baseline__title { margin: 0; font-size: 1.1rem; font-weight: 600; }

/* Role grid sits tight under the baseline card. */
.sol-roles__grid { margin-top: 1rem; }

/* Scenario cards. */
.sol-scenarios { margin-top: 3rem; }
.sol-scenario {
  background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-default);
  border-radius: var(--pub-radius); padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.sol-scenario__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sol-scenario__icon {
  width: 2.25rem; height: 2.25rem; border-radius: var(--pub-radius-sm); display: grid; place-items: center;
  background: var(--base-primary-primary-50); color: var(--base-primary-primary-600);
}
.dark .sol-scenario__icon { background: color-mix(in srgb, var(--base-primary-primary-500) 16%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.sol-scenario__icon .pub-icon { width: 1.2rem; height: 1.2rem; }
.sol-scenario__role {
  font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: var(--pub-radius-pill);
  background: var(--base-primary-primary-50); color: var(--base-primary-primary-700);
}
.dark .sol-scenario__role { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.sol-scenario__q { margin: 0; font-size: 1.12rem; font-weight: 500; line-height: 1.45; color: var(--semantic-text-text-primary); }

.sol-note { max-width: 44rem; margin: 1.75rem auto 0; text-align: center; color: var(--semantic-text-text-tertiary); font-size: 0.98rem; }

/* What's-inside 2-column checklist. */
.sol-checklist {
  list-style: none; margin: 3rem auto 0; padding: 0; max-width: 56rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2.5rem;
}
.sol-checklist li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; line-height: 1.5; }
.sol-checklist .pub-icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; color: var(--semantic-text-text-success); }

/* "From the blog" card date line (cluster links down to posts). */
.sol-post-date { display: block; margin-bottom: 0.5rem; font-size: 0.82rem; color: var(--semantic-text-text-tertiary); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .pub-hero__grid, .pub-studio__grid { grid-template-columns: 1fr; }
  .sol-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .pub-mock__body { grid-template-columns: 1fr; }
  .pub-mock__rail { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--semantic-border-border-subtle); }
  .sol-baseline { flex-direction: column; align-items: flex-start; }
}