/* ═══════════════════════════════════════════════════════════════
   Homepage (reposition, Oct 2026; review rounds 1 + 2)
   Content: Rakesh's "Homepage - Positioning ReWrite" doc.
   Layout:  docs/homepage-reposition-spec.md + docs/homepage-review-{1,2}-prompt.md
   Rules:   design-system.css tokens only (no raw colours); every class is
            prefixed hp- so nothing collides with the shared styles.css.
            Each section is exactly one screen on desktop: at least the viewport
            height below the 72px nav, content centred, and its content fits
            inside it. --yellow inside content means one thing: a gate.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section shell ─────────────────────────────────────────────── */
.hp-sec { padding: clamp(40px, 7vh, 64px) 0; border-top: 1px solid var(--border-mid); background: var(--white); }
.hp-sec--off { background: var(--off); }
.hp-sec .section-kicker { margin-bottom: 10px; color: var(--blue); }
main .section-kicker { font-size: .9rem; }
.hp-sec .section-h { font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
.hp-head { max-width: 860px; margin-bottom: clamp(24px, 4vh, 40px); }
.hp-head .section-lead { margin: 12px 0 0; max-width: 760px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.hp-head .section-lead strong, .hp-lead-lines strong { color: var(--navy); }
.hp-head--wide { max-width: none; }
.hp-head--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: end; }
.hp-head--split > .section-lead { margin-top: 0; }
.hp-lead-lines { font-size: 1rem; line-height: 1.55; color: var(--mid); }
.hp-lead-lines > span { display: block; }
.hp-lead-lines small { font-size: .85em; color: var(--muted); }
.hp-h2-lines > span { display: block; }
.hp-h3 { font-family: var(--fh); font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: var(--ink); letter-spacing: -.015em; margin-bottom: 12px; }

.hp-nw { white-space: nowrap; }

.hp-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hp-label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hp-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 500; color: var(--blue-deep);
  border-bottom: 1.5px solid var(--border-mid); padding-bottom: 2px; transition: border-color var(--dur-fast);
}
.hp-link:hover { border-color: var(--blue); }

/* Icons: pastel circle (hp-ico) and small inline (hp-ico--sm) */
.hp-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%; background: var(--purple-pale); color: var(--navy);
}
.hp-ico svg { width: 14px; height: 14px; display: block; }
.hp-ico--sm { width: auto; height: auto; background: none; border-radius: 0; color: inherit; vertical-align: -3px; }
.hp-ico--sm svg { width: 16px; height: 16px; }

/* Bee name chips inside running copy; persona tags */

.hp-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--mid);
  border: 1px solid var(--border-mid); border-radius: var(--r-pill); padding: 2px 9px; background: var(--white);
}

/* ── S1. Hero: one centred column (badge, headline, description, checks, CTA, install) ── */
.hp-hero { padding: calc(72px + clamp(32px, 5vh, 56px)) 0 clamp(32px, 5vh, 56px); background: var(--white); }
.hp-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-hero-badge {
  display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 12px 22px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--white)); border-radius: var(--r-pill); background: var(--purple-pale);
  font-family: var(--fb); font-weight: 600; font-size: clamp(.9rem, 1.1vw, 1.05rem); line-height: 1.35; color: var(--navy);
}
.hp-badge-logo { flex: 0 0 auto; height: 20px; width: auto; display: block; }
.hp-h1 {
  font-family: var(--fh); font-weight: 800; font-size: clamp(2rem, min(3.7vw, 7vh), 4rem); line-height: 1.08;
  letter-spacing: -.045em; color: var(--navy); margin-top: clamp(36px, 5.6vh, 60px);
}
.hp-h1 > span { display: block; }
@media (min-width: 1024px) { .hp-h1 > span { white-space: nowrap; } }
.hp-h1 .hp-h1-2 { color: var(--muted-soft); }
.hp-hero-sub { max-width: 720px; font-size: .875rem; line-height: 1.7; color: var(--ink-light); margin-top: clamp(16px, 2.5vh, 28px); }
.hp-hero-checks { list-style: none; width: fit-content; max-width: 100%; margin: clamp(20px, 3.4vh, 36px) auto 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.hp-hero-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem; line-height: 1.5; color: var(--mid); }
.hp-hero-checks .hp-ico--sm { flex: 0 0 auto; margin-top: 2px; color: var(--blue-deep); }
.hp-hero-checks .hp-ico--sm svg { width: 14px; height: 14px; }
.hp-hero .hp-actions { justify-content: center; margin-top: clamp(22px, 3.4vh, 36px); }
.hp-hero-install { width: 100%; max-width: 790px; margin-top: clamp(28px, 4.5vh, 56px); text-align: left; }
.hp-install-label { font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.hp-install-box {
  display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 8px 8px 8px 18px;
  background: var(--white); border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--white)); border-radius: var(--r-sm);
}
.hp-install-prompt, .hp-install-box code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.hp-install-prompt { color: var(--muted); }
.hp-install-box code { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md); margin-top: 24px; }
.hp-actions .btn-outline { gap: 8px; }
.hp-copy {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--navy);
  background: var(--white); border: 1px solid var(--border-mid); border-radius: var(--r-sm); padding: 6px 10px;
}
.hp-copy svg { width: 14px; height: 14px; }
.hp-copy:hover { border-color: var(--blue); }
.hp-install-box .hp-copy { flex: 0 0 auto; background: var(--off); border-color: color-mix(in srgb, var(--navy) 18%, var(--white)); border-radius: 6px; font-weight: 600; font-size: .8rem; }

/* ── S2. Published customer results (four metrics, 2×2, natural height) ─── */
.hp-results { padding: clamp(48px, 8vh, 72px) 0; }
.hp-results .hp-head { margin-bottom: 8px; }
.hp-results .hp-stat-n { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.hp-results .hp-stat-l { font-size: 1.05rem; }
.hp-results .hp-stat-m { font-size: .88rem; }
.hp-results .hp-stats { grid-template-columns: repeat(2, 1fr); }
.hp-results .hp-stat { padding: 28px 32px; }
.hp-results .hp-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.hp-results .hp-stat:nth-child(even) { border-left: 1px solid var(--border-mid); }
.hp-results .hp-stat:nth-child(n+3) { border-top: 1px solid var(--border-mid); }
@media (min-width: 1024px) {
  /* Horizontal cells: icon + number in a fixed block, label + mechanism to the right (same x in both rows) */
  .hp-results .hp-stat { grid-template-columns: 31px 190px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; }
  .hp-results .hp-stat .hp-ico { grid-column: 1; grid-row: 1 / span 2; }
  .hp-results .hp-stat-n { grid-column: 2; grid-row: 1 / span 2; }
  .hp-results .hp-stat-l { grid-column: 3; grid-row: 1; align-self: end; margin-top: 0; }
  .hp-results .hp-stat-m { grid-column: 3; grid-row: 2; align-self: start; margin-top: 0; }
}
.hp-results .hp-ico { width: 31px; height: 31px; }
.hp-results .hp-ico svg { width: 15px; height: 15px; }
.hp-results .hp-attrib { margin-top: 20px; font-size: .86rem; }

.hp-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(16px, 3vh, 28px); border-top: 1px solid var(--border-mid); }
.hp-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px 16px 4px 0; }
.hp-stat + .hp-stat { padding-left: 16px; border-left: 1px solid var(--border-mid); }
.hp-stat .hp-ico { grid-row: 1; }
.hp-stat-l, .hp-stat-m { grid-column: 1 / -1; }
.hp-stat-n { font-family: var(--fh); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.04em; color: var(--navy); line-height: 1; }
.hp-stat-l { font-family: var(--fh); font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--ink); margin-top: 4px; }
.hp-stat-m { font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.hp-attrib { font-size: .8rem; color: var(--muted); margin-top: 10px; }

/* ── S3. Testimonial ───────────────────────────────────────────── */
.hp-voice { padding: clamp(48px, 9vh, 96px) 0; }
.hp-voice-fig { max-width: 900px; margin: 0 auto; text-align: center; }
.hp-voice-fig blockquote {
  position: relative; font-family: var(--fh); font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.45;
  letter-spacing: -.015em; color: var(--ink);
}
.hp-voice-fig blockquote::before { content: "\201C"; display: block; font-size: 3.2rem; line-height: .6; color: var(--blue); margin-bottom: 14px; }
.hp-voice-fig figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; text-align: left; }
.hp-voice-fig img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.hp-voice-fig cite { font-style: normal; font-size: .9rem; line-height: 1.4; }
.hp-voice-fig cite a { font-weight: 700; color: var(--ink); display: block; }
.hp-voice-fig cite span { color: var(--muted); }

/* ── S4. Three-pillar band ─────────────────────────────────────── */

/* Small rounded-square bullet, centred on the first line */

/* ── S5. Problem section ───────────────────────────────────────── */
#toil .section-h { font-size: clamp(1.6rem, 2.45vw, 2.2rem); }
.hp-red { text-decoration: underline; text-decoration-color: var(--red-soft); text-decoration-thickness: 2px; text-underline-offset: 7px; }

/* ── S6. Trust model ───────────────────────────────────────────── */
.hp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hp-table th, .hp-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--border-mid); line-height: 1.5; }
.hp-table thead th { font-family: var(--fh); font-size: .95rem; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--navy); vertical-align: bottom; }
.hp-table tbody th { font-weight: 600; color: var(--muted); }
.hp-table td { color: var(--mid); }
.hp-th-sub { display: block; margin-top: 3px; font-family: var(--fb); font-size: .76rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hp-table--eq { table-layout: fixed; }
#build .hp-table thead th { vertical-align: top; }
.hp-table--eq col.c-label { width: 18%; }
.hp-table--compact th, .hp-table--compact td { padding: 10px 12px; font-size: .84rem; line-height: 1.45; }
.hp-table--compact thead th { font-size: .88rem; }

/* ── S7. Role paths / shared card ──────────────────────────────── */
.hp-cards { display: grid; gap: 16px; }
.hp-cards--5 { grid-template-columns: repeat(5, 1fr); }
.hp-cards--3 { grid-template-columns: repeat(3, 1fr); }

.hp-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--white); }
.hp-card-top { display: flex; align-items: center; gap: 10px; }
.hp-card h3 { font-family: var(--fh); font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.hp-card > p { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.hp-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-card .hp-card-num { display: flex; gap: 8px; align-items: flex-start; font-family: var(--fh); font-weight: 700; font-size: .92rem; line-height: 1.35; color: var(--navy); padding-top: 10px; border-top: 1px solid var(--border-mid); margin-top: auto; }
.hp-card-num .hp-ico--sm { color: var(--blue); margin-top: 1px; }
.hp-card .hp-link { align-self: flex-start; }
/* Role paths: each card is a 5-row subgrid (icon, title, pain, tags, outcome) so rows line up across cards */
#roles .hp-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; padding: 22px; }
#roles .hp-card > .hp-ico { justify-self: start; }
#roles .hp-card h3 { font-size: 1.1rem; line-height: 1.25; }
.hp-role-level { display: block; margin-bottom: 3px; font-family: var(--fb); font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
#roles .hp-card-tags { gap: 4px; align-self: start; }
#roles .hp-tag { padding: 2px 8px; white-space: nowrap; }
#roles .hp-card .hp-card-num { display: block; margin-top: 0; align-self: start; font-weight: 700; font-size: 1rem; line-height: 1.35; }
@media (min-width: 1024px) { #roles .hp-card-tags { flex-wrap: nowrap; } }

/* ── S8. Runs where you run + regulator Q&A ────────────────────── */

.hp-badges { display: inline-flex; gap: 8px; vertical-align: middle; margin-left: 8px; }
.hp-badges img { height: 30px; width: auto; border-radius: 4px; border: 1px solid var(--border-mid); background: var(--white); }

/* ── S9. bCortex (Rakesh's design): claim + number, then layers + an example of the context an agent receives ── */
.hp-bc-row1, .hp-bc-row2 { display: grid; gap: 40px; }
.hp-bc-row1 { grid-template-columns: 7fr 5fr; align-items: end; }
.hp-bc-row2 { grid-template-columns: 5fr 7fr; align-items: stretch; margin-top: clamp(18px, 3vh, 28px); }
.hp-bc-row1 > *, .hp-bc-row2 > * { min-width: 0; }
.hp-bc-brand { display: flex; align-items: center; gap: 12px; }
.hp-bc-logo { flex: none; }
.hp-bc-logo .ink { stroke: var(--navy); }
.hp-bc-logo .hive { stroke: var(--blue-deep); }
.hp-bc-logo .cell { fill: var(--yellow); stroke: var(--blue-deep); }
.hp-bc-brand b { font-family: var(--fh); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--navy); }
.hp-bc-brand > span:not(.hp-bc-mark) { font-size: .95rem; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--border-mid); line-height: 1.2; }
.hp-bc .section-h { margin-top: 12px; font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.12; }
.hp-bc-rule { display: block; width: 48px; height: 4px; margin: 12px 0; background: var(--yellow); border-radius: 2px; }
.hp-bc-lead { max-width: 58ch; font-size: .98rem; line-height: 1.6; color: var(--muted); }
.hp-bc-lead strong { color: var(--navy); font-weight: 600; }
.hp-bc-stat { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px 20px; border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--white); }
.hp-bc-n { font-family: var(--fh); font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-bc-n span { box-shadow: inset 0 -7px 0 var(--yellow); }
.hp-bc-stat p:last-child { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.hp-bc-stat strong { display: block; margin-bottom: 2px; font-size: .95rem; font-weight: 600; color: var(--navy); }
.hp-bc-stat small { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.hp-bc-layers { list-style: none; display: grid; border-top: 1px solid var(--border-mid); align-content: start; }
.hp-bc-layers li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-mid); }
.hp-bc-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--off); color: var(--navy); }
.hp-bc-ico .hp-ico--sm svg { width: 18px; height: 18px; }
.hp-bc-layers h3 { font-family: var(--fh); font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--navy); }
.hp-bc-layers p { margin-top: 1px; font-size: .84rem; line-height: 1.4; color: var(--muted); }
.hp-bc-own { margin-top: 12px; font-size: .84rem; color: var(--muted); }
.hp-bc-own strong { color: var(--navy); font-weight: 600; }
.hp-bc-frame { margin: 0; padding: 14px; background: var(--off); border-radius: var(--r-md); }
.hp-bc-ui { overflow: hidden; background: var(--white); border: 1px solid var(--border-mid); border-radius: 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--navy) 6%, transparent); }
.hp-bc-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 9px 14px; border-bottom: 1px solid var(--border-mid); font-size: .82rem; }
.hp-bc-top .t { font-weight: 600; color: var(--navy); }
.hp-bc-top .m { color: var(--muted); }
.hp-bc-eg { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--border-mid); border-radius: var(--r-pill); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); vertical-align: 1px; }
.hp-bc-r { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--border-mid); font-size: .84rem; line-height: 1.4; color: var(--navy); }
.hp-bc-r:last-child { border-bottom: 0; }
.hp-bc-r .k { padding-top: 1px; font-size: .78rem; color: var(--muted); }
.hp-bc-r .v { min-width: 0; }
.hp-bc-r .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; }
.hp-bc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.hp-bc-path .arr { color: var(--muted-soft); }
.hp-bc-path .own { margin-left: 4px; font-size: .78rem; color: var(--muted); }
.hp-bc-mem { background: linear-gradient(90deg, color-mix(in srgb, var(--yellow) 24%, var(--white)), var(--white) 75%); }
.hp-bc-mem .who { display: block; font-size: .75rem; color: var(--muted); }
.hp-bc-chip { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--off); font-size: .75rem; font-weight: 500; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.hp-bc-chip--on { background: var(--purple-pale); color: var(--blue-deep); }
.hp-bc-reuse { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 10px; }
.hp-bc-reuse .from { max-width: 15ch; font-size: .8rem; line-height: 1.3; color: var(--muted); }
.hp-bc-reuse svg { width: 100%; height: 32px; overflow: visible; }
.hp-bc-reuse .flight { fill: none; stroke: var(--blue-deep); stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 6 4; stroke-linecap: round; }
.hp-bc-reuse .landing { fill: var(--yellow); }
.hp-bc-reuse .agents { display: flex; flex-wrap: wrap; gap: 5px; max-width: 330px; }
.hp-bc-insight { margin-top: clamp(16px, 2.6vh, 24px); padding-top: 14px; border-top: 1px solid var(--border-mid); font-size: .95rem; font-weight: 500; color: var(--navy); }
/* S9b. DAIR: the model side of the pair (same brand row as bCortex) */
.hp-bc-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: var(--r-sm); background: var(--purple-pale); color: var(--blue-deep); }
.hp-bc-mark .hp-ico--sm svg { width: 22px; height: 22px; }
#daim .hp-bc-brand { margin-bottom: 4px; }
#daim .section-h { margin-top: 12px; }

/* The pair shares the grey band; white panels keep their edge on it */
.hp-sec--off .hp-bc-frame { background: var(--white); border: 1px solid var(--border-mid); }

/* ── S10. Three doors ──────────────────────────────────────────── */

/* ── S11. Four personas (clickable cards, image at the bottom) ─── */
.hp-persona { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; color: inherit; transition: transform .2s var(--ease-out-expo), border-color .2s, box-shadow .2s; }
/* Six rows (title, beside, what it does, Task Bees, result, link) line up across the five cards */
.hp-persona > .hp-card-top { margin-bottom: 4px; }
a.hp-persona:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--navy) 45%, transparent); }
.hp-persona:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hp-persona .beside { padding-bottom: 12px; font-size: .82rem; color: var(--muted); }
.hp-persona-sec { padding: 10px 0; border-top: 1px solid var(--border); }
.hp-persona-sec .hp-label { margin-bottom: 7px; }
.hp-persona-does { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.hp-persona-does li { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.hp-persona-does .hp-ico--sm { margin-top: 3px; color: var(--blue); }
.hp-persona-does .hp-ico--sm svg { width: 13px; height: 13px; }
.hp-persona-bees { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.hp-persona-bees li { padding: 2px 7px; border-radius: 6px; background: var(--purple-pale); color: var(--blue-deep); font-size: .74rem; font-weight: 600; line-height: 1.35; white-space: nowrap; }
/* Result one size down; the link at a real 500 weight (the body font ships 400-600) */
.hp-persona .hp-card-num { display: block; align-self: start; margin-top: 0; padding-top: 10px; font-weight: 600; font-size: .85rem; line-height: 1.4; }
.hp-explore { display: inline-flex; align-items: center; gap: 6px; align-self: end; margin-top: 10px; font-size: .84rem; font-weight: 500; color: var(--blue-deep); }
.hp-persona:hover .hp-explore { text-decoration: underline; text-underline-offset: 3px; }

.hp-pilot-note { display: block; margin-top: 3px; font-family: var(--fb); font-size: .75rem; font-weight: 500; color: var(--muted); }
.hp-persona-line { margin-top: 16px; font-size: .95rem; color: var(--mid); text-align: center; }

/* ── S12. Build ────────────────────────────────────────────────── */

 /* the demo iframe is a fixed 1280px, scaled by JS; don't let it widen the grid */

 #how-to-build .wfb-demo-frame { box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--navy) 35%, transparent); }

/* ── S13. Under the hood (carried-over sections: spacing/size only) ─ */
.hp-divider { display: flex; align-items: center; gap: var(--sp-lg); padding-top: 0; padding-bottom: 0; margin-bottom: clamp(20px, 3.5vh, 32px); }
.hp-divider::before, .hp-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-mid); }
.hp-divider span { font-family: var(--fh); font-size: .9rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#under-the-hood .section-h .acc { color: var(--blue); }  /* one accent: yellow means a gate */
#under-the-hood .section-h { font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
/* ── System Agents (System Bees): copy + call flow, all 48 as logo chips in three moving rows (sb-) ── */
#under-the-hood #agents { padding: clamp(32px, 5vh, 48px) 0; background: var(--white); border-top: 1px solid var(--border-mid); }
.sb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 48px; align-items: end; margin-bottom: 22px; }
.sb-head .sb-lead { max-width: 640px; }
.sb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sb-head .section-kicker { margin-bottom: 10px; }
#under-the-hood #agents .section-h { font-size: clamp(1.45rem, 2.1vw, 1.9rem); }
.sb-lead { margin-top: 12px; font-size: .95rem; line-height: 1.6; color: var(--mid); }
.sb-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sb-node { padding: 3px 9px; border: 1px solid var(--border-mid); border-radius: 8px; background: var(--white); font-size: .78rem; font-weight: 600; color: var(--mid); }
.sb-node.is-sys { border-color: var(--navy); background: var(--navy); color: var(--white); }
.sb-node.is-tool { border-style: dashed; color: var(--muted); }
.sb-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--muted-soft); }
.sb-arrow::after { content: "→"; font-size: .9rem; color: var(--blue); }
.sb-side .btn-view-agents { padding: 9px 18px; font-size: .84rem; font-weight: 600; }
.sb-rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sb-row { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 12px; }
.sb-row-h { display: flex; align-items: center; gap: 6px; font: 700 .66rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sb-row-h small { padding: 0 6px; border-radius: var(--r-pill); background: var(--off); font-size: .64rem; letter-spacing: 0; color: var(--muted-soft); }
#agents .agents-marquee { margin-bottom: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
#agents .agents-track { list-style: none; gap: 8px; }
#agents .sb-row:hover .agents-track { animation-play-state: paused; }
.sb-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 5px; border: 1px solid var(--border-mid); border-radius: 9px; background: var(--white); font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.sb-chip:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(56,162,255,.12); }
.sb-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--off); color: var(--blue-deep); }
.sb-mark img { width: 15px; height: 15px; object-fit: contain; }
.sb-mark svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  #agents .agents-track { animation: none; }
  #agents .agents-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 1023px) {
  .sb-head { grid-template-columns: 1fr; }
  .sb-side { align-items: flex-start; }
}
@media (max-width: 767px) {
  .sb-row { grid-template-columns: 1fr; gap: 6px; }
}
#under-the-hood #integrations { padding: clamp(40px, 5vh, 48px) 0; }
#under-the-hood .integ-head .section-lead { max-width: 860px; }
#under-the-hood .integ-tree-svg { height: 40px; }
#under-the-hood .integ-tree-col { gap: 6px; }
#under-the-hood .integ-cat-banner { padding: 8px 12px; line-height: 1.4; }
#under-the-hood .integ-sub-card { padding: 9px 12px; border-radius: 10px; }
#under-the-hood .integ-sub-title { margin-bottom: 5px; font-size: .8rem; }
#under-the-hood .integ-logos-row { gap: 5px 12px; }
#under-the-hood .integ-footer { margin-top: 14px; }
#under-the-hood .integ-cta { margin-top: 8px; }
@media (min-width: 1024px) {
  /* logo tree at 90% so the section fits one screen; footer note + "Request Integration" share one row */
  #under-the-hood .integ-tree-grid { zoom: .9; }
  #under-the-hood #integrations > .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 20px; }
  #under-the-hood #integrations > .wrap > * { flex: 0 0 100%; }
  #under-the-hood #integrations > .wrap > .integ-footer, #under-the-hood #integrations > .wrap > .integ-cta { flex: 0 0 auto; margin-top: 14px; }
  /* the "Under the hood" divider also carries .wrap; keep it one row */
  #under-the-hood #integrations > .hp-divider { flex-wrap: nowrap; justify-content: normal; column-gap: var(--sp-lg); margin-bottom: 14px; }
  #under-the-hood #integrations > .hp-divider > span { flex: 0 0 auto; }
}
#under-the-hood .integ-head { margin-bottom: 12px; }
#under-the-hood .integ-hub-wrap { margin-top: 12px; }
#under-the-hood .integ-hub-node { width: 40px; height: 40px; border-radius: 12px; }
#under-the-hood .integ-hub-node img { width: 26px; height: 26px; }
.hp-pilot #oss-strip { margin: 20px auto 0; max-width: 980px; text-align: left; }

/* ── Pilot CTA ─────────────────────────────────────────────────── */
.hp-pilot { text-align: center; }
.hp-pilot-bee { width: 56px; height: auto; margin: 0 auto 12px; }
.hp-timeline { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: left; margin: clamp(18px, 3.5vh, 32px) 0 18px; position: relative; }
.hp-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--border-mid); }
.hp-timeline li { position: relative; padding-top: 28px; font-size: .92rem; line-height: 1.6; color: var(--mid); }
.hp-timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--blue); }
.hp-timeline li strong { display: block; font-family: var(--fh); font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
.hp-fromyou { display: inline-block; max-width: 760px; font-size: .92rem; color: var(--mid); background: var(--white); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: 12px 18px; }
.hp-pilot .hp-actions { justify-content: center; margin-top: 20px; }
.hp-secondary { margin-top: 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-lg); font-size: .9rem; }

/* ── FAQ (shared accordion; spacing only) ──────────────────────── */
#faq { padding-top: clamp(40px, 7vh, 64px); padding-bottom: clamp(40px, 7vh, 64px); }
#faq .faq-list { gap: 6px; }
#faq .faq-q { padding: 13px 18px; }
@media (min-width: 1200px) {
  #faq .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: start; }
}
#faq .faq-a.open { max-height: 420px; }
#faq .faq-list[hidden] { display: none; }
.hp-tabs { display: inline-flex; gap: 4px; margin-bottom: 16px; padding: 4px; border: 1px solid var(--border-mid); border-radius: var(--r-pill); background: var(--off); }
.hp-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: var(--r-pill); background: none; font-family: var(--fh); font-size: .92rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.hp-tab:hover { color: var(--navy); }
.hp-tab[aria-selected="true"] { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px color-mix(in srgb, var(--navy) 14%, transparent); }
.hp-tab:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.hp-tab-n { min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--purple-pale); font-family: var(--fb); font-size: .75rem; font-weight: 600; color: var(--blue-deep); text-align: center; }

/* ── Rule R: one section = one screen (desktop) ────────────────── */
/* Content sections fill one screen so the next one never peeks in. Short strips (.hp-sec--natural:
   the metrics and the testimonial) and the closing FAQ keep their natural height instead. */
main > section, #under-the-hood > section { scroll-margin-top: 72px; }
@media (min-width: 1024px) and (min-height: 640px) {
  .hp-sec:not(.hp-sec--natural), #under-the-hood > section:not(#agents) {
    min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  }
  .hp-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .hp-sec > .wrap, #under-the-hood > section > .wrap { width: 100%; }
}

/* Short desktop screens (≈1366x768): only the four densest sections are tightened, so their content still fits one screen */
@media (min-width: 1024px) and (max-height: 820px) {
  #trust { padding-top: 32px; padding-bottom: 32px; }
  #trust .hp-head { margin-bottom: 12px; }
  #trust .section-h { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
  #trust .dl-mode { padding: 7px 12px; }
  .hp-hero { padding-top: calc(72px + 24px); padding-bottom: 24px; }
  .hp-h1 { margin-top: 32px; }
  .hp-hero-sub { margin-top: 12px; line-height: 1.6; }
  .hp-hero-checks { gap: 8px; margin-top: 20px; }
  .hp-hero-install { margin-top: 24px; }
  #toil, #build { padding-top: 40px; padding-bottom: 40px; }
  #toil .hp-head, #build .hp-head { margin-bottom: 20px; }
  #toil .section-h { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  #toil .section-lead { font-size: .95rem; }

  #build .section-h { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  #build .section-lead { font-size: .9rem; }
  #build .hp-table--compact th, #build .hp-table--compact td { padding: 6px 12px; font-size: .8rem; }
  #under-the-hood #agents { padding-top: 40px; padding-bottom: 40px; }
  #under-the-hood #integrations { padding-top: 40px; padding-bottom: 40px; }
  #under-the-hood .integ-hub-wrap, #under-the-hood .integ-tree-svg { display: none; }  /* decorative; hidden on short screens */
  #under-the-hood .integ-head { margin-bottom: 16px; }
  #under-the-hood .integ-head .section-lead { font-size: .92rem; }
  #under-the-hood .integ-tree-grid { zoom: .86; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1199px) {

  .hp-cards--5 { grid-template-columns: repeat(3, 1fr); }
  .hp-cards--3 { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 1023px) {
  .hp-hero-badge { border-radius: var(--r-lg); }
  .hp-head--split{ grid-template-columns: 1fr; }
  .hp-bc-row1, .hp-bc-row2 { grid-template-columns: 1fr; gap: 24px; }

}
@media (max-width: 767px) {
  .hp-sec { padding: 40px 0; }
  .hp-hero { padding-top: calc(72px + 40px); }
  .hp-results .hp-stat-n { font-size: 1.7rem; }
  .hp-results .hp-ico { width: 27px; height: 27px; }
  .hp-actions .btn-primary, .hp-actions .btn-outline { width: 100%; justify-content: space-between; }
  .hp-actions .btn-outline { justify-content: center; flex-wrap: wrap; }
  .hp-hero-badge { flex-direction: column; gap: 8px; padding: 12px 16px; font-size: .95rem; }
  .hp-hero-checks { width: 100%; }
  main .section-kicker, .hp-divider span { font-size: .8rem; }
  .hp-results .hp-stat { padding: 16px 12px 10px 0; }
  .hp-results .hp-stat:nth-child(even) { padding-left: 12px; }

  .hp-cards--5, .hp-cards--3 { grid-template-columns: 1fr; }

  .hp-bc-stat { grid-template-columns: 1fr; gap: 8px; }

  .hp-bc-r { grid-template-columns: 1fr; gap: 2px; }
  .hp-bc-reuse { grid-template-columns: 1fr; }
  .hp-bc-reuse svg { display: none; }
  .hp-timeline { grid-template-columns: 1fr; gap: 16px; }
  .hp-timeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .hp-timeline li { padding: 0 0 0 34px; }
  .hp-timeline li::before { top: 4px; }

  /* Doc tables stack into cards */
  .hp-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .hp-table--stack, .hp-table--stack tbody, .hp-table--stack tr, .hp-table--stack th, .hp-table--stack td { display: block; width: 100% !important; }
  .hp-table--stack colgroup { display: none; }
  .hp-table--stack tr { border: 1px solid var(--border-mid); border-radius: var(--r-md); margin-bottom: 12px; padding: 4px 0; background: var(--white); }
  .hp-table--stack th, .hp-table--stack td { border-bottom: 0; padding: 7px 14px; white-space: normal; }
  .hp-table--stack tbody th { color: var(--ink); font-family: var(--fh); }
  .hp-table--stack td::before { content: attr(data-col); display: block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
}

/* ── Phone fixes (≤767px) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Install commands: one line that scrolls sideways, instead of breaking mid-word */
  .hp-install-box code { white-space: nowrap; overflow-x: auto; overflow-wrap: normal; scrollbar-width: none; }
  .hp-install-box code::-webkit-scrollbar { display: none; }
  #oss-strip .ghstrip-cmd code { flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
  #oss-strip .ghstrip-cmd code::-webkit-scrollbar { display: none; }
  /* Trust outcomes: in a column, flex-basis became a 140px height and left empty boxes */

  /* Arch diagram: the rotated arrow drew over its label; reserve its rotated height */

  /* Nothing under 12px */
   .hp-tag, .hp-label, #doors small, #trust-checks small { font-size: .75rem; }
}
/* Hamburger (shown at ≤768px): 44px tap target, same visual position */
@media (max-width: 768px) {
  #nav .ham { padding: 14px 12px; margin-right: -12px; box-sizing: content-box; }
}
/* The 1280px automation demo scaled to a phone is unreadable (≈3px text); the four steps carry the content */
@media (max-width: 639px) {
  #how-to-build .wfb-visual { display: none; }
}

/* ═══ Round 5: the Task Bee story ═══════════════════════════════ */
.hp-eg { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border-mid); border-radius: var(--r-pill); font-family: var(--fb); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }

.hp-table--run tbody th { width: 40px; font-family: var(--fh); color: var(--blue-deep); }
.hp-table--run td code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; color: var(--navy); }
.hp-gate { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.hp-gate--run { border: 1px solid var(--blue); background: var(--white); color: var(--blue-deep); }
.hp-gate--ask { background: var(--yellow); color: var(--navy); }
.hp-table tr.hp-run-reason td, .hp-table tr.hp-run-reason th { background: color-mix(in srgb, var(--blue) 7%, var(--white)); }
.hp-reason-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--navy); font-size: .72rem; font-weight: 600; color: var(--white); white-space: nowrap; }
.hp-run-note { margin-top: 10px; font-size: .88rem; color: var(--mid); }

.hp-sec--dense { padding-top: clamp(36px, 5vh, 48px); padding-bottom: clamp(36px, 5vh, 48px); }

/* ── The journey: a stage track, the pilot marked on it, compact cards (jr-) ── */
#journey { --m1: #E8F6EE; --m1i: #1F8A55; --m2: #EAF3FF; --m2i: #1677D4; --m3: #FDEEEE; --m3i: #C2414B; --m4: #EEF1F6; --m4i: var(--navy); }
.jr { position: relative; margin-top: 8px; padding-top: 34px; }
.jr-pilot { position: absolute; top: 0; bottom: -12px; left: -12px; width: calc(50% - 8px + 24px); border: 1.5px dashed rgba(200,158,0,.45); border-radius: 18px; background: rgba(250,200,53,.08); pointer-events: none; }
.jr-pilot span { position: absolute; top: 8px; left: 14px; font: 700 .7rem var(--fh); letter-spacing: .1em; text-transform: uppercase; color: #8A6A00; }
.jr-steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jr-step { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.jr-when { position: relative; display: flex; align-items: center; gap: 10px; }
.jr-when::after { content: ""; position: absolute; left: 34px; right: -16px; top: 50%; height: 2px; margin-top: -1px; background: var(--border-mid); }
.jr-when b { position: relative; z-index: 1; padding-right: 10px; background: var(--white); font-family: var(--fh); font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.jr-step:nth-child(-n+2) .jr-when b { background: #FFFBEF; }
.jr-step:last-child .jr-when::after { background: linear-gradient(90deg, var(--border-mid), transparent); }
.jr-dot { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; font: 800 .74rem var(--fh); color: var(--white); background: var(--navy); box-shadow: 0 0 0 4px var(--white); }
.jr-step:nth-child(-n+2) .jr-dot { box-shadow: 0 0 0 4px #FFFBEF; }
.jr-pilot-tag { display: none; position: relative; z-index: 1; margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); background: #FEF4D6; font: 700 .64rem var(--fh); letter-spacing: .08em; text-transform: uppercase; color: #8A6A00; }
.jr-card { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 14px 16px 14px; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); }
.jr-top { display: flex; flex-direction: column; gap: 8px; }
.jr-n { font-size: .86rem; font-weight: 600; color: var(--muted); }
.jr-n b { font-family: var(--fh); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--navy); margin-right: 2px; }
.jr-crew { display: flex; align-items: flex-end; gap: 3px; min-height: 30px; }
.jr-crew i { width: 9px; height: 9px; border-radius: 3px; background: var(--blue-deep); }
.jr-crew b { margin-left: 2px; font: 800 .9rem/1 var(--fh); color: var(--blue-deep); }
.jr-group { position: relative; display: inline-flex; gap: 3px; padding: 4px 4px; margin-right: 3px; border: 1.5px solid var(--navy); border-radius: 6px; }
.jr-group em { position: absolute; bottom: calc(100% + 1px); left: 0; font: 800 .58rem var(--fh); font-style: normal; letter-spacing: .04em; color: var(--navy); }
.jr-facts { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
.jr-facts > div { display: flex; gap: 8px; align-items: flex-start; }
.jr-facts dt { flex: 0 0 auto; color: var(--muted-soft); line-height: 1; padding-top: 3px; }
.jr-facts dd { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; line-height: 1.4; color: var(--muted); }
.jr-facts > div:last-child dd { color: var(--ink); font-weight: 500; }
.jr-line { display: block; }
.jr-mode { display: inline-block; padding: 1px 8px; margin-right: 2px; border-radius: 6px; font-size: .76rem; font-weight: 600; line-height: 1.45; }
.jr-mode.m1 { background: var(--m1); color: var(--m1i); }
.jr-mode.m2 { background: var(--m2); color: var(--m2i); }
.jr-mode.m3 { background: var(--m3); color: var(--m3i); }
.jr-mode.m4 { background: var(--m4); color: var(--m4i); }
.jr-what { align-self: end; padding-top: 10px; border-top: 1px solid var(--border); font-size: .84rem; line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.jr-note { margin-top: 22px; text-align: center; font-size: .82rem; color: var(--muted); }

.hp-pilot-sub { margin: 10px auto 0; max-width: 640px; font-size: 1rem; color: var(--mid); }
.hp-attrib .hp-link { margin-left: 6px; }

/* ═══ Round 6 (2026-10-22): hero proof points, Production-safe, Task Bee, pillars, Task Bee sources, Persona Bees, Build ═══ */
/* ── Task Bee section, Persona Bees card base (tb-) ── */
.tb-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.tb-h { font-family: var(--fh); font-weight: 800; font-size: clamp(1.95rem, 2.9vw, 2.6rem); line-height: 1.06; letter-spacing: -.035em; color: var(--ink); }
.tb-h span { display: block; color: var(--blue-deep); }
.tb-sub { margin-top: 12px; font-family: var(--fh); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.02em; color: var(--muted-soft); }
.tb-def { margin-top: 16px; max-width: 580px; font-size: 1.02rem; line-height: 1.6; color: var(--mid); }
.tb-card { padding: 18px 20px; border: 1px solid var(--border-mid); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 18px 44px rgba(27,45,74,.08); }
.tb-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-mid); }
.tb-bee { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: var(--blue-deep); box-shadow: inset 0 0 0 6px var(--blue-deep), inset 0 0 0 8px rgba(255,255,255,.55); }
.tb-card-head h3 { font-family: var(--fh); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.tb-card-head p { font-size: .8rem; color: var(--muted); }
.tb-spec { display: grid; grid-template-columns: 76px 1fr; gap: 6px 12px; padding: 10px 0; font-size: .84rem; border-bottom: 1px solid var(--border-mid); }
.tb-spec dt { font-weight: 600; color: var(--muted); }
.tb-spec dd { color: var(--mid); }
.tb-spec code, .tb-full-cap code { font-size: .8rem; padding: 1px 5px; border: 1px solid var(--border-mid); border-radius: 5px; background: var(--off); }
.tb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-chips span { padding: 1px 8px; border-radius: var(--r-pill); background: var(--purple-pale); font-size: .74rem; font-weight: 600; color: var(--blue-deep); }
.tb-spec small { display: block; margin-top: 2px; font-size: .74rem; color: var(--muted-soft); }
.tb-run { padding-top: 10px; }
.tb-run-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tb-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--off); border: 1px solid var(--border-mid); }
.tb-tab { display: inline-flex; flex-direction: column; align-items: center; padding: 3px 12px; border: 0; border-radius: var(--r-pill); background: none; font: 600 .78rem/1.15 var(--fb); color: var(--muted); }
.tb-tab small { font-size: .64rem; font-weight: 600; color: var(--muted-soft); }
.tb-tab[aria-selected="true"] { background: var(--navy); color: var(--white); }
.tb-tab[aria-selected="true"] small { color: rgba(255,255,255,.7); }
.tb-tab:focus-visible, .tb-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tb-strip { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 12px 0 8px; position: relative; }
.tb-strip::before { content: ""; position: absolute; top: 12px; left: 10%; right: 10%; height: 2px; background: var(--border-mid); }
.tb-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tb-step-n { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--white); border: 1.5px solid var(--blue-deep); font: 800 .8rem var(--fh); color: var(--blue-deep); }
.tb-step-l { font-size: .74rem; font-weight: 600; color: var(--mid); }
.tb-step.is-reason .tb-step-n { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: 0 0 0 4px rgba(27,45,74,.14); }
.tb-step.is-gate .tb-step-n { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.tb-step-tag { font-size: .64rem; font-weight: 600; line-height: 1.2; color: var(--navy); }
.tb-step-tag--ask { color: var(--yellow-deep); }
.tb-out { display: grid; grid-template-columns: 104px 1fr; gap: 4px 10px; padding: 9px 12px; border-radius: var(--r-md); background: var(--off); font-size: .82rem; transition: opacity .2s; }
.tb-out dt { font-weight: 600; color: var(--muted); }
.tb-out dd { color: var(--mid); }
.tb-out dd b { color: var(--ink); }
.tb-out.is-swapping { opacity: .25; }
.tb-run-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: .76rem; color: var(--muted-soft); }
.tb-more { padding: 0; border: 0; background: none; font: 500 .84rem var(--fb); color: var(--blue-deep); border-bottom: 1px solid currentColor; }
.tb-full { margin-top: 28px; }
.tb-full-cap { margin-left: 8px; font-family: var(--fb); font-size: .82rem; font-weight: 500; color: var(--muted); }
.tb-grid > * { min-width: 0; }
@media (max-width: 1023px) {
  .tb-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  .tb-card { padding: 16px; }
  .tb-spec { grid-template-columns: 64px 1fr; }
  .tb-out { grid-template-columns: 1fr; gap: 2px; }
  .tb-out dd { margin-bottom: 6px; }
  .tb-step-l { font-size: .66rem; }
  .tb-step-tag { font-size: .58rem; }
}
/* ── Production-safe table and Task Bee catalog line (ps-, tb-cat) ── */
.ps-h { font-size: clamp(1.7rem, 2.6vw, 2.35rem) !important; line-height: 1.12; }
/* ── Production-safe: shell vs Task Bee as two panels around a spine of properties (vs-) ── */
.vs { margin-top: 4px; }
.vs-title { margin-bottom: 14px; text-align: center; font: 700 .72rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vs-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); grid-template-rows: repeat(6, auto); position: relative; }
.vs-panel { grid-row: 1 / -1; border-radius: 18px; }
.vs-panel--a { grid-column: 1; background: #F5F6F8; border: 1px solid #E6E9EE; }
.vs-panel--b { grid-column: 3; background: var(--white); border: 1.5px solid var(--purple); box-shadow: 0 18px 40px -24px rgba(22,119,212,.45); }
.vs-grid::before { content: ""; grid-column: 2; grid-row: 2 / -1; justify-self: center; width: 2px; margin: 26px 0; background: var(--border-mid); }
.vs-head, .vs-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; position: relative; }
.vs-head { grid-row: 1; padding: 20px 0 16px; }
.vs-row:nth-child(4) { grid-row: 2; } .vs-row:nth-child(5) { grid-row: 3; } .vs-row:nth-child(6) { grid-row: 4; }
.vs-row:nth-child(7) { grid-row: 5; } .vs-row:nth-child(8) { grid-row: 6; }
.vs-h { display: flex; align-items: center; gap: 12px; padding: 0 26px; }
.vs-h--a { justify-content: flex-end; text-align: right; }
.vs-h b { display: block; font-family: var(--fh); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); }
.vs-h--a b { color: var(--mid); }
.vs-h b span { color: var(--blue-deep); white-space: nowrap; }
.vs-h small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.vs-h--a { flex-direction: row-reverse; }
.vs-term { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; height: 34px; padding: 0 10px; border-radius: 8px; background: #2A3442; font: 700 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; color: #C9D3E0; }
.vs-term i { width: 7px; height: 14px; background: #C9D3E0; animation: vs-blink 1.1s steps(1) infinite; }
@keyframes vs-blink { 50% { opacity: 0; } }
.vs-steps { position: relative; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--purple-pale); }
.vs-steps::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; margin-top: -1px; background: #9CC9F5; }
.vs-steps i { position: relative; width: 10px; height: 10px; border-radius: 3px; background: var(--blue-deep); }
.vs-vs { justify-self: center; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--white); font: 800 .8rem var(--fh); letter-spacing: .02em; box-shadow: 0 0 0 6px var(--white); }
.vs-row { min-height: 54px; }
.vs-row + .vs-row .vs-a { border-top: 1px solid #E6E9EE; }
.vs-row + .vs-row .vs-b { border-top: 1px solid var(--border); }
.vs-a, .vs-b { display: flex; align-items: center; align-self: stretch; gap: 10px; margin: 0 26px; padding: 14px 0; font-size: .95rem; line-height: 1.4; }
.vs-a { justify-content: flex-end; text-align: right; color: var(--muted); }
.vs-b { color: var(--ink); font-weight: 500; }
.vs-a .hp-ico, .vs-b .hp-ico { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; }
.vs-a .hp-ico { background: #FDEEEE; color: #C2414B; }
.vs-b .hp-ico { background: var(--blue-deep); color: var(--white); }
.vs-a .hp-ico svg, .vs-b .hp-ico svg { width: 12px; height: 12px; }
.vs-k { justify-self: center; position: relative; z-index: 1; padding: 5px 12px; border: 1px solid var(--border-mid); border-radius: var(--r-pill); background: var(--white); font: 700 .68rem var(--fh); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.vs-row:last-child .vs-a, .vs-row:last-child .vs-b { padding-bottom: 20px; }
.vs-note { margin-top: 14px; text-align: center; font-size: .86rem; color: var(--muted); }
.tb-cat { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-mid); }
.tb-cat-h { font-size: .92rem; color: var(--mid); }
.tb-cat-h b { color: var(--ink); }
.tb-chips--lg { margin-top: 10px; gap: 6px; }
.tb-chips--lg span { padding: 3px 10px; font-size: .8rem; background: var(--white); border: 1px solid var(--border-mid); }
.tb-chips--lg .tb-chip-more { background: none; border-style: dashed; color: var(--muted); }
.tb-cat-link { display: inline-block; margin-top: 12px; font-size: .84rem; font-weight: 500; color: var(--blue-deep); border-bottom: 1px solid currentColor; }
/* ── Persona Bees (pb-) ── */
.pb-vs { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.pb-vs li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--white); }
.pb-vs li.is-persona { border: 1.5px solid var(--navy); box-shadow: 0 6px 18px rgba(27,45,74,.08); }
.pb-vs b { font-family: var(--fh); font-size: .95rem; color: var(--ink); }
.pb-vs p { font-size: .84rem; line-height: 1.45; color: var(--muted); }
.pb-vs-g { flex: 0 0 54px; display: flex; gap: 4px; justify-content: center; align-items: center; height: 30px; border: 1.5px solid var(--navy); border-radius: 9px; }
.pb-vs-g--task { border-color: transparent; }
.pb-vs-g i { width: 11px; height: 11px; border-radius: 3px; background: var(--blue-deep); }
.pb-sys { margin-top: 14px; font-size: .86rem; font-style: italic; color: var(--muted); }
.pb-more { margin-top: 14px; }
.pb-card { padding-top: 12px; box-shadow: 0 9px 0 -5px var(--white), 0 9px 0 -4px rgba(56,162,255,.28), 0 18px 0 -10px var(--white), 0 18px 0 -9px rgba(56,162,255,.2), 0 26px 44px rgba(27,45,74,.10); }
.pb-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 5px 8px; border-radius: var(--r-md); background: var(--purple-pale); }
.pb-pick p { flex: 1; font-size: .84rem; line-height: 1.35; color: var(--mid); }
.pb-pick b { font-family: var(--fh); color: var(--navy); }
.pb-pick-n { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--navy); font: 800 .95rem var(--fh); color: var(--white); }
.pb-nav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.pb-step { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-mid); border-radius: 50%; background: var(--white); font: 700 1.1rem/1 var(--fb); color: var(--navy); }
.pb-step:hover { border-color: var(--navy); }
.pb-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pb-count { min-width: 30px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); }
.pb-tab:not([aria-selected="true"]):hover { background: var(--white); color: var(--navy); }
.pb-head { padding-bottom: 8px !important; }
.pb-tabs { display: flex; width: 100%; overflow-x: auto; margin-bottom: 8px; scrollbar-width: none; }
.pb-tabs::-webkit-scrollbar { display: none; }
.pb-tab { flex: 1 0 auto; padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
.pb-head { border-bottom: 0; padding-bottom: 12px; }
.pb-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--purple-pale); font: 600 .7rem var(--fb); color: var(--blue-deep); vertical-align: 3px; }
.pb-glyph { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; place-content: center; width: 32px; height: 32px; border: 1.5px solid var(--navy); border-radius: 9px; }
.pb-glyph i { width: 8px; height: 8px; border-radius: 2px; background: var(--blue-deep); }
.pb-group { position: relative; margin-top: 8px; padding: 14px 10px 10px; border: 1.5px solid var(--navy); border-radius: 12px; }
.pb-group-l { position: absolute; top: -10px; left: 12px; padding: 0 6px; background: var(--white); font: 800 .76rem var(--fh); color: var(--navy); }
.pb-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.pb-group li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: 7px; background: var(--off); font-size: .76rem; font-weight: 600; color: var(--mid); }
.pb-group li::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--blue-deep); }
.pb-group-r { position: absolute; top: -9px; right: 12px; padding: 0 6px; background: var(--white); font-size: .7rem; font-weight: 500; color: var(--muted); }
.pb-thread { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--off); font-size: .82rem; }
.pb-thread-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pb-thread-top .hp-eg { margin-left: 0; }
.pb-q { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.pb-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #DDE5EF; font-size: .6rem; font-weight: 700; color: var(--muted); }
.pb-r { margin: 6px 0 0 34px; padding-left: 12px; border-left: 2px solid var(--border-mid); }
.pb-called { font-size: .76rem; color: var(--muted); }
.pb-called b { color: var(--navy); }
.pb-called span:not([aria-hidden]) { display: inline-block; padding: 0 7px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--border-mid); font-weight: 600; color: var(--blue-deep); }
.pb-a { margin-top: 4px; line-height: 1.45; color: var(--mid); }
.pb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pb-act-l { font-weight: 600; color: var(--ink); }
.pb-act-l small { font-weight: 500; color: var(--muted); }
.pb-btns { display: inline-flex; gap: 4px; }
.pb-btns i { padding: 1px 8px; border-radius: 6px; border: 1px solid var(--border-mid); background: var(--white); font: 600 .7rem var(--fb); font-style: normal; color: var(--mid); }
.pb-btns i:first-child { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pb-gate-note { font-size: .74rem; color: var(--muted); }
.pb-foot { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-mid); }
.pb-foot span { grid-column: 1 / -1; font-family: var(--fh); font-weight: 700; font-size: .86rem; color: var(--navy); }
.pb-foot small { display: block; font-family: var(--fb); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-soft); }
.pb-foot a { flex: 0 0 auto; font-size: .84rem; font-weight: 500; color: var(--blue-deep); border-bottom: 1px solid currentColor; }
.pb-foot { margin-top: auto !important; }
.pb-thread { margin-bottom: 10px; }
@media (max-width: 767px) {
  .pb-r { margin-left: 0; }
  .pb-tabs { flex-wrap: wrap; justify-content: center; border-radius: 16px; overflow: visible; }
  .pb-tab { flex: 0 0 auto; }
}
/* ── Build it with Claude Code: the platform stack (bd-) ── */
.bd-lead { font-size: 1.02rem; }
.bd-table { --bd-bg: var(--white); border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.hp-sec--off .bd-table { --bd-bg: var(--off); }
.bd-table th, .bd-table td { border-bottom: 0; padding: 7px 14px; vertical-align: middle; }
.bd-table thead th { padding-top: 0; padding-bottom: 10px; border-bottom: 0; font-size: 1rem; }
.bd-table thead .bd-nb { color: var(--navy); }
.bd-table thead .bd-diy { color: var(--muted); }
.bd-table tbody th { width: 19%; padding-left: 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bd-table tbody th .hp-ico { margin-right: 8px; color: var(--blue-deep); vertical-align: -3px; }
.bd-l { vertical-align: middle; }
.bd-badge { display: inline-block; margin-right: 7px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--navy); font: 700 .68rem var(--fb); letter-spacing: .02em; color: var(--white); vertical-align: 1px; }
.bd-table td { width: 40.5%; }
.bd-table td.bd-nb + td.bd-diy, .bd-table th.bd-nb + th.bd-diy { border-left: 14px solid transparent; background-clip: padding-box; }
.bd-you td { padding-top: 10px; padding-bottom: 10px; border: 1.5px solid var(--border-mid) !important; border-radius: 10px; background: var(--white); color: var(--mid); }
.bd-you td.bd-diy { border-left: 1.5px solid var(--border-mid) !important; box-shadow: -14px 0 0 var(--bd-bg); }
.bd-tag { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: var(--r-pill); background: var(--off); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bd-you + .bd-band td { padding-top: 16px; }
.bd-band td { padding-bottom: 6px; font-size: .78rem; letter-spacing: .02em; }
.bd-band td.bd-nb { color: var(--white); background: var(--navy); border-radius: 12px 12px 0 0; padding-top: 9px !important; }
.bd-band td.bd-nb b { font-family: var(--fh); font-size: .86rem; }
.bd-band td.bd-diy { color: var(--muted); border: 1.5px dashed #B9C6D6; border-bottom: 0; border-radius: 12px 12px 0 0; padding-top: 9px !important; }
.bd-band td.bd-diy b { color: var(--mid); }
.bd-layer td.bd-nb { background: var(--purple-pale); color: var(--ink); border-left: 2px solid var(--navy); border-right: 2px solid var(--navy); border-top: 1px solid rgba(56,162,255,.2); }
.bd-layer td.bd-nb b { color: var(--navy); }
.bd-layer td.bd-diy { color: var(--muted); border-left: 1.5px dashed #B9C6D6; border-right: 1.5px dashed #B9C6D6; border-top: 1px dashed #DCE3EC; }
.bd-layer.bd-last td.bd-nb { border-bottom: 2px solid var(--navy); border-radius: 0 0 12px 12px; }
.bd-layer.bd-last td.bd-diy { border-bottom: 1.5px dashed #B9C6D6; border-radius: 0 0 12px 12px; }
.bd-table td.bd-nb + td.bd-diy { border-left-width: 1.5px; }
.bd-table tr > td.bd-diy { position: relative; }
.bd-layer td.bd-nb { position: relative; padding-left: 34px; }
.bd-layer td.bd-nb::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--blue-deep); }
.bd-table colgroup { display: none; }
.bd-time th, .bd-time td { padding-top: 12px !important; font-family: var(--fh); font-size: .92rem; font-weight: 700; }
.bd-time td.bd-nb { color: var(--navy); }
.bd-time td.bd-diy { color: var(--muted); }
.bd-close { margin-top: 14px; text-align: center; }
.bd-close-h { font-family: var(--fh); font-weight: 800; font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.02em; color: var(--navy); }
.bd-close-s { max-width: 720px; margin: 6px auto 0; font-size: .95rem; line-height: 1.55; color: var(--mid); }
.bd-table td.bd-diy, .bd-table th.bd-diy { border-left-style: solid; }
@media (min-width: 768px) {
  .bd-table td.bd-nb { box-shadow: 14px 0 0 var(--bd-bg); }
  .bd-table th.bd-diy, .bd-table td.bd-diy { margin-left: 14px; }
}
@media (max-width: 767px) {
  .bd-table tbody th { width: auto; padding-left: 14px; }
  .bd-table td { width: auto; }
  .bd-table tr { border-radius: var(--r-md); }
  .bd-band { display: none !important; }
  .bd-layer td.bd-nb, .bd-layer td.bd-diy, .bd-you td, .bd-time td { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .bd-layer td.bd-nb { padding-left: 14px; }
  .bd-layer td.bd-nb::before { position: static; transform: none; content: "✓  On NudgeBee"; display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
  .bd-table td.bd-diy::before { content: "Build your own"; }
  .bd-table td.bd-nb + td.bd-diy { border-left: 0 !important; }
}
/* ── Where your Task Bees come from: stacking cards (bf-) ── */
#bees-from { padding-bottom: 72px; }
.bf-h { text-wrap: balance; }
.bf-sub { margin-top: 12px; font-family: var(--fh); font-weight: 800; font-size: clamp(1.2rem, 1.8vw, 1.55rem); letter-spacing: -.02em; }
.bf-sub span:nth-child(1) { color: var(--navy); }
.bf-sub span:nth-child(2) { color: var(--blue-deep); }
.bf-sub span:nth-child(3) { color: var(--muted-soft); }
#bees-from .hp-head--split { align-items: center; }
.bf-rail { position: sticky; top: 72px; z-index: 30; display: flex; gap: 6px; align-items: center; margin: 4px 0 18px; padding: 10px 0; background: var(--white); }
.hp-sec--off .bf-rail { background: var(--off); }
.bf-rail a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--border-mid); border-radius: var(--r-pill); background: var(--white); font-size: .84rem; font-weight: 600; color: var(--muted); }
.bf-rail a span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--off); font: 800 .78rem var(--fh); color: var(--muted); }
.bf-rail a.is-on { border-color: var(--navy); color: var(--navy); }
.bf-rail a.is-on span { background: var(--navy); color: var(--white); }
.bf-rail a.is-done span { background: var(--blue-deep); color: var(--white); }
.bf-rail-fill { position: absolute; left: 0; bottom: 2px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--blue-deep); border-radius: 2px; transition: width .1s linear; }
.bf-stack { display: flex; flex-direction: column; gap: 28px; }
.bf-card { position: relative; padding: 22px 24px 18px; border: 1px solid var(--border-mid); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 -2px 0 rgba(255,255,255,1), 0 18px 40px rgba(27,45,74,.09); }
.bf-stack.is-sticky .bf-card { position: sticky; }
.bf-stack.is-sticky .bf-card:nth-child(1) { top: 138px; z-index: 1; }
.bf-stack.is-sticky .bf-card:nth-child(2) { top: 156px; z-index: 2; }
.bf-stack.is-sticky .bf-card:nth-child(3) { top: 174px; z-index: 3; }
.bf-card-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-mid); }
.bf-num { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); font: 800 1.05rem var(--fh); color: var(--white); }
.bf-card-head > div { flex: 1; }
.bf-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.bf-card-head h3 { font-family: var(--fh); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.02em; color: var(--ink); }
.bf-pill { flex: 0 0 auto; padding: 4px 12px; border-radius: var(--r-pill); background: var(--purple-pale); font-size: .78rem; font-weight: 600; color: var(--blue-deep); }
.bf-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-mid); font-size: .88rem; color: var(--mid); }
.bf-foot strong { color: var(--navy); }
.bf-foot a { flex: 0 0 auto; font-size: .84rem; font-weight: 500; color: var(--blue-deep); border-bottom: 1px solid currentColor; }
.bf-cat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding-top: 16px; }
.bf-grp-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bf-grp-h .hp-ico { color: var(--blue-deep); }
.bf-grp { display: flex; flex-direction: column; }
.bf-grp ul { flex: 1; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bf-grp li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; line-height: 1.3; border: 1px solid var(--border); border-radius: 9px; background: var(--white); font-size: .84rem; font-weight: 500; color: var(--mid); }
.bf-grp li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #9CC9F5; }
.bf-grp li.is-more { margin-top: auto; border-style: dashed; border-color: var(--border-mid); background: none; color: var(--muted); }
.bf-grp li.is-more::before { background: #D5DDE8; }
.bf-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 14px; counter-reset: f; }
.bf-flow li { position: relative; padding: 8px 12px 8px 34px; border-radius: 10px; background: var(--off); counter-increment: f; }
.bf-flow li::before { content: counter(f); position: absolute; left: 10px; top: 9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--blue-deep); font: 800 .66rem var(--fh); color: var(--blue-deep); }
.bf-flow b { display: block; font-family: var(--fh); font-size: .88rem; color: var(--ink); }
.bf-flow small { font-size: .74rem; color: var(--muted); }
.bf-ba { display: grid; grid-template-columns: minmax(0, .85fr) auto minmax(0, 1.15fr); gap: 14px; align-items: center; margin-top: 14px; }
.bf-doc { padding: 14px 16px; border: 1px solid #E3E8EF; border-radius: 10px; background: #FBFCFD; box-shadow: inset 4px 0 0 #DCE3EC; }
.bf-doc-h, .bf-bee-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .76rem; font-weight: 700; color: var(--muted); }
.bf-doc ol { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bf-doc li { display: flex; gap: 8px; font-family: ui-serif, Georgia, serif; font-size: .9rem; line-height: 1.45; color: #3B4A5C; }
.bf-doc li span { color: var(--muted-soft); }
.bf-arrow { display: flex; flex-direction: column; align-items: center; font-size: 1.6rem; font-weight: 700; color: var(--blue-deep); }
.bf-arrow-d { display: none; }
.bf-arrow small { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bf-bee { padding: 12px 14px; border: 1.5px solid var(--navy); border-radius: 12px; background: var(--white); }
.bf-bee-h code { font-size: .86rem; font-weight: 700; color: var(--navy); background: none; padding: 0; }
.bf-bee-h .hp-eg { margin-left: auto; }
.bf-sq { width: 14px; height: 14px; border-radius: 4px; background: var(--blue-deep); }
.bf-bee ol { list-style: none; display: flex; flex-direction: column; }
.bf-bee li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 6px; border-top: 1px solid var(--border-mid); font-size: .84rem; }
.bf-bee li.is-reason { background: var(--purple-pale); border-radius: 8px; }
.bf-n { font: 800 .8rem var(--fh); color: var(--blue-deep); text-align: center; }
.bf-s { color: var(--ink); }
.bf-s em { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--r-pill); background: var(--navy); font-style: normal; font-size: .66rem; font-weight: 600; color: var(--white); vertical-align: 1px; }
.bf-t { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.bf-pullq { font-family: var(--fh); font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.bf-proof { text-align: right; font-family: var(--fh); font-weight: 700; color: var(--navy); }
.bf-proof small { display: block; font-family: var(--fb); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-soft); }
.bf-ways { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; padding-top: 16px; }
.bf-way { padding: 14px 16px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--off); }
.bf-way-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--fh); font-weight: 800; font-size: 1rem; color: var(--ink); }
.bf-way-h .hp-ico { color: var(--blue-deep); }
.bf-way-p { font-size: .86rem; line-height: 1.5; color: var(--mid); }
.bf-prompt { position: relative; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px 10px 10px 2px; background: var(--navy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.5; color: #E6EDF7; }
.bf-prompt::before { content: "❯ "; color: var(--yellow); }
.bf-close { margin-top: 28px; text-align: center; font-family: var(--fh); font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.02em; color: var(--navy); }
@media (max-width: 1023px) {
  .bf-cat { grid-template-columns: repeat(2, 1fr); }
  .bf-ways { grid-template-columns: 1fr; }
  .bf-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .bf-rail { top: 64px; gap: 4px; }
  .bf-rail a { flex: 0 0 auto; gap: 5px; padding: 4px 9px 4px 4px; font-size: .74rem; }
  .bf-rail a span { width: 20px; height: 20px; font-size: .7rem; }
  .bf-card { padding: 16px; }
  .bf-card-head { flex-wrap: wrap; gap: 6px 12px; }
  .bf-card-head > div { flex: 1 1 calc(100% - 50px); }
  .bf-pill { margin-left: 48px; }
  .bf-ba { grid-template-columns: 1fr; }
  .bf-arrow { flex-direction: row; justify-content: center; gap: 8px; font-size: 1.3rem; }
  .bf-arrow-r { display: none; }
  .bf-arrow-d { display: inline; }
  .bf-bee li { grid-template-columns: 22px 1fr auto; }
  .bf-t { display: none; }
  .bf-flow { grid-template-columns: 1fr; }
  .bf-proof { text-align: left; }
}
/* ── Hero proof points ── */
.hp-hero-proof li strong { color: var(--navy); font-weight: 600; }
/* ── Hero badge and pillars (pl-) ── */
.hp-hero-badge { gap: 16px; padding: 14px 28px; border: 1.5px solid color-mix(in srgb, var(--blue) 40%, var(--white)); font-family: var(--fh); font-weight: 700; font-size: clamp(1.02rem, 1.4vw, 1.3rem); letter-spacing: -.01em; color: var(--navy); box-shadow: 0 6px 20px rgba(56,162,255,.14); }
.hp-hero-badge b { font-weight: 800; color: var(--navy); text-decoration: underline; text-decoration-color: rgba(56,162,255,.5); text-decoration-thickness: 2.5px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
.hp-badge-logo { height: 24px; }

@media (max-width: 767px) { .hp-hero-badge { font-size: 1rem; } }
/* ── Round 6: live-page extras ── */

.tb-more .tb-more-a { display: inline-block; transition: transform .2s; }
.tb-more.is-open .tb-more-a { transform: rotate(180deg); }
.bf-card { scroll-margin-top: 140px; }
/* Persona panels share one cell, so the card keeps the height of the tallest */
.pb-panels { display: grid; }
.pb-panel { grid-area: 1 / 1; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transition: opacity .18s; }
.pb-panel.is-active { visibility: visible; opacity: 1; }

@media (max-width: 767px) {

  .pb-panel:not(.is-active) { display: none; }
}
@media (max-width: 1279px) {
  .pb-tabs { flex-wrap: wrap; justify-content: center; border-radius: 16px; overflow: visible; }
  .pb-tab { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .pb-panel, .tb-out, .tb-more .tb-more-a { transition: none; } }

/* ═══ Round 7 (2026-10-22): problem section and trust dial ═══ */
/* ── Problem section: pain | what a scoped bee does | result (tl-) ── */

.tl-close { margin-top: 18px; text-align: center; font-family: var(--fh); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -.01em; color: var(--mid); }
.tl-close strong { color: var(--navy); font-weight: 800; }

/* ── Trust: the drawn dial, three pastel modes, guardrails on every mode (tr-) ── */

/* ═══ Round 8 (2026-10-22) ═══ */
/* ── Why Task Bees don't drift: cards that show, one checks strip (nd-) ── */
.nd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nd-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); }
.nd-top { display: flex; align-items: center; gap: 12px; }
.nd-top .hp-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--purple-pale); color: var(--blue-deep); }
.nd-top .hp-ico svg { width: 18px; height: 18px; }
.nd-top h3 { font-family: var(--fh); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ink); }
.nd-p { font-size: .86rem; line-height: 1.45; color: var(--mid); }
/* typed actions: the ladder as chips */
.nd-ladder { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: auto; }
.nd-ladder li { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 4px 6px; border: 1px solid #CFE2FA; border-radius: 8px; background: var(--purple-pale); font-size: .68rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--navy); }
.nd-ladder li span { font: 800 .62rem var(--fh); color: var(--blue-deep); }
.nd-ladder li.is-off { border: 1px dashed #A9B8CB; background: var(--white); color: var(--muted); }
.nd-ladder li.is-off span { color: var(--muted-soft); }
.nd-legend { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--muted); }
.nd-legend i { width: 14px; height: 9px; border: 1px dashed #A9B8CB; border-radius: 3px; }
/* durable runs: a timeline */
.nd-tl { list-style: none; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: auto; padding-top: 4px; }
.nd-tl::before { content: ""; position: absolute; top: 17px; left: 8%; right: 8%; height: 2px; background: var(--border-mid); }
.nd-tl li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nd-tl li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-deep); font: 800 .72rem var(--fh); color: var(--white); }
.nd-tl li.is-crash span { background: #FDEEEE; border: 1.5px solid #E58A92; color: #C2414B; }
.nd-tl li.is-resume span { background: var(--white); border: 2px solid var(--blue-deep); color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(22,119,212,.12); }
.nd-tl li small { min-height: 1em; font-size: .64rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.nd-tl li.is-crash small { color: #C2414B; }
.nd-tl li.is-resume small { color: var(--blue-deep); }
.nd-chip { align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); background: var(--off); font-size: .74rem; font-weight: 600; color: var(--navy); }
/* certified models: status rows */
.nd-models { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.nd-models li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border-mid); border-radius: 9px; font-size: .8rem; }
.nd-models i { width: 9px; height: 9px; border-radius: 50%; }
.nd-models b { flex: 1; font-weight: 600; color: var(--ink); }
.nd-models em { padding: 1px 8px; border-radius: var(--r-pill); font-style: normal; font-size: .7rem; font-weight: 700; }
.nd-models .is-cert i { background: var(--yellow); } .nd-models .is-cert em { background: #FFF6DA; color: var(--yellow-deep); }
.nd-models .is-pool i { background: #2FA36B; } .nd-models .is-pool em { background: #E8F6EE; color: #1F8A55; }
.nd-models .is-fb i { background: var(--blue-deep); } .nd-models .is-fb em { background: var(--purple-pale); color: var(--blue-deep); }
/* every step, four checks */
.nd-checks { margin-top: 16px; padding: 12px 16px 14px; border-radius: 14px; background: var(--off); border: 1px solid var(--border-mid); }
.nd-checks-h { margin-bottom: 10px; font-size: .76rem; color: var(--muted); }
.nd-checks-h b { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.nd-flow { display: flex; align-items: center; gap: 14px; }
.nd-ck { list-style: none; flex: 1; display: flex; align-items: center; gap: 6px; }
.nd-ck li { flex: 1; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border-mid); border-radius: 10px; background: var(--white); }
.nd-ck .hp-ico--sm { color: var(--blue-deep); }
.nd-ck b { display: block; font-size: .84rem; color: var(--ink); }
.nd-ck small { display: block; font-size: .7rem; color: var(--muted); }
.nd-sep { flex: 0 0 auto; font-weight: 700; color: var(--muted-soft); }
.nd-arrow { flex: 0 0 auto; font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.nd-res { list-style: none; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.nd-res li { padding: 3px 12px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; text-align: center; }
.nd-res .is-run { background: var(--white); border: 1px solid var(--blue); color: var(--blue-deep); }
.nd-res .is-ask { background: var(--yellow); color: var(--navy); }
.nd-res .is-hold { border: 1px dashed #A9B8CB; color: var(--muted); }
@media (max-width: 1199px) {
  .nd-flow { flex-wrap: wrap; }
  .nd-ck { flex: 1 1 100%; flex-wrap: wrap; }
  .nd-ck li { flex: 1 1 40%; }
  .nd-sep { display: none; }
  .nd-arrow { display: none; }
  .nd-res { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 1023px) { .nd-cards { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .nd-ck li { flex: 1 1 100%; } }

@media (max-width: 1023px) {
  .jr { padding-top: 0; }
  .jr-pilot { display: none; }
  .jr-pilot-tag { display: inline-block; }
  .jr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .jr-step:nth-child(2n) .jr-when::after { display: none; }
  .jr-step:nth-child(-n+2) .jr-when b { background: var(--white); }
  .jr-step:nth-child(-n+2) .jr-dot { box-shadow: 0 0 0 4px var(--white); }
}

@media (max-width: 767px) {
  .jr-steps { grid-template-columns: 1fr; }
  .jr-when::after { display: none; }
}

@media (max-width: 1023px) {
  .vs-grid { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
  .vs-a, .vs-b { font-size: .88rem; margin: 0 18px; padding: 12px 0; }
  .vs-h { padding: 0 18px; }
}
@media (max-width: 767px) {
  .vs-grid { display: flex; flex-direction: column; gap: 10px; }
  .vs-grid::before, .vs-panel, .vs-vs, .vs-h small { display: none; }
  .vs-head { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 0 4px; }
  .vs-h, .vs-h--a { flex-direction: row; justify-content: flex-start; text-align: left; padding: 0; gap: 8px; }
  .vs-h b { font-size: .86rem; }
  .vs-term, .vs-steps { height: 26px; }
  .vs-row { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 12px 14px; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); }
  .vs-k { order: -1; justify-self: auto; align-self: flex-start; margin-bottom: 8px; }
  .vs-a, .vs-b { justify-content: flex-start; text-align: left; margin: 0; padding: 4px 0; font-size: .88rem; border-top: 0 !important; }
  .vs-a { flex-direction: row; }
  .vs-a .hp-ico { order: -1; }
  .vs-row:last-child .vs-a, .vs-row:last-child .vs-b { padding-bottom: 4px; }
}

/* ── Built to pass every review: the trust dial across the top, one answer per reviewer (cb-, dl-, cbb-) ── */
.cb { --m1: #E8F6EE; --m1b: #BFE3CD; --m1i: #1F8A55; --m2: #EAF3FF; --m2b: #BCD8FA; --m2i: #1677D4; --m3: #FDEEEE; --m3b: #F3C4C7; --m3i: #C2414B; }
/* A soft blue blueprint ground, so this section reads apart from the grey "Where your Task Bees come from" after it */
#trust.cb { background: radial-gradient(circle at 1px 1px, rgba(22,119,212,.13) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(180deg, #EAF3FF 0%, #F3F8FF 100%); border-top-color: #D6E7FB; }
.cb .hp-head { margin-bottom: 16px; }
.cb .section-h { font-size: clamp(1.6rem, 2.4vw, 2.15rem); }
.cb-h2 { display: block; color: var(--muted-soft); }
.cb .section-lead { font-size: .95rem; }
.cb-card { padding: 14px 16px 14px; border: 1px solid var(--border-mid); border-radius: 16px; background: var(--white); }
.cb-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-family: var(--fh); font-weight: 800; font-size: .98rem; letter-spacing: -.01em; color: var(--ink); }
.cb-card-h small { font-family: var(--fb); font-weight: 500; font-size: .76rem; color: var(--muted); }
/* The dial: three pastel segments, a knob that follows the hovered mode, the admin ceiling at the end */
.dl { --knob: 16.667%; }
.dl:has(.dl-mode.m2:hover) { --knob: 50%; }
.dl:has(.dl-mode.m3:hover) { --knob: 83.333%; }
.dl-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 8px; margin: 14px 0 12px; }
.dl-track i { border-radius: 4px; }
.dl-track i:nth-child(1) { background: var(--m1b); }
.dl-track i:nth-child(2) { background: var(--m2b); }
.dl-track i:nth-child(3) { background: var(--m3b); }
.dl-knob { position: absolute; top: 50%; left: var(--knob); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--navy); box-shadow: 0 2px 8px rgba(27,45,74,.25); transition: left .35s var(--ease-out-expo); }
.dl-ceil { position: absolute; right: -2px; top: -20px; bottom: -6px; width: 2px; background: var(--navy); }
.dl-ceil b { position: absolute; right: 6px; top: -2px; font: 700 .6rem var(--fh); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--navy); }
.dl-modes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.dl-mode { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; transition: transform .2s; }
.dl-mode.m1 { background: var(--m1); border-color: var(--m1b); --i: var(--m1i); }
.dl-mode.m2 { background: var(--m2); border-color: var(--m2b); --i: var(--m2i); }
.dl-mode.m3 { background: var(--m3); border-color: var(--m3b); --i: var(--m3i); }
.dl-mode:hover { transform: translateY(-1px); }
.dl-mode > .hp-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--white); color: var(--i); }
.dl-mode > .hp-ico svg { width: 16px; height: 16px; }
.dl-mode h3 { font-family: var(--fh); font-weight: 800; font-size: .92rem; color: var(--ink); }
.dl-mode p { font-size: .8rem; line-height: 1.4; color: var(--mid); }
.dl-mode small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; color: var(--i); }
.dl-guards { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dl-guard-h { flex: 0 0 auto; font: 700 .64rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-guards ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.dl-guards li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--off); font-size: .76rem; font-weight: 600; color: var(--mid); white-space: nowrap; }
.dl-guards .hp-ico { color: var(--blue-deep); }
.dl-guards .hp-ico svg { width: 14px; height: 14px; }
.cbb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cbb-card { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); }
.cbb-for { display: flex; align-items: center; gap: 6px; font: 700 .62rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); }
.cbb-card h3 { margin-top: 6px; font-family: var(--fh); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); }
.cbb-sub { margin-top: 1px; font-size: .8rem; font-weight: 500; color: var(--muted); }
.cbb-pts { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.cbb-pts li { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.cbb-pts .hp-ico { margin-top: 2px; color: var(--blue); }
.cbb-pts .hp-ico svg { width: 14px; height: 14px; }
.cbb-link { align-self: flex-start; margin-top: auto; padding-top: 10px; font-size: .84rem; font-weight: 500; color: var(--blue-deep); }
.cbb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .dl-modes, .cbb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-guards { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .dl-modes { grid-template-columns: 1fr; }
  .cbb-grid { grid-template-columns: 1fr; }
  .dl-guards ul { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .dl-guards li { white-space: normal; line-height: 1.25; }
  .cb .dl-track { margin-top: 30px; }
  .cb-card-h { flex-wrap: wrap; row-gap: 0; }
}

/* ── The problem: five pain cards, pain → what a scoped bee does → result (pn-) ── */
.pn-head .hp-lead-lines { font-size: .95rem; }
.pn-head .hp-lead-lines { margin-top: 12px; }
.pn-legend { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font: 700 .64rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pn-legend i { font-style: normal; color: var(--blue); }
.pn-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pn-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); overflow: hidden; }
.pn-pain { position: relative; padding: 12px 44px 10px 14px; }
.pn-pain .hp-ico { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 7px; background: var(--off); color: var(--navy); }
.pn-pain .hp-ico svg { width: 14px; height: 14px; }
.pn-q { font-family: var(--fh); font-weight: 700; font-size: .92rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.pn-say { margin-top: 4px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.pn-does { padding: 9px 14px; background: var(--purple-pale); }
.pn-bees { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pn-bees i { padding: 1px 7px; border-radius: 6px; background: var(--white); font-style: normal; font-size: .7rem; font-weight: 600; color: var(--blue-deep); }
.pn-does p { font-size: .82rem; line-height: 1.4; font-weight: 500; color: var(--navy); }
.pn-out { padding: 8px 14px 12px; border-top: 1px solid var(--border); }
.pn-out b { display: block; font-family: var(--fh); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1.05; color: var(--navy); }
.pn-out span { display: block; margin-top: 3px; font-size: .76rem; line-height: 1.35; color: var(--muted); }
/* ── Where it runs: deploy list, the environment diagram, logos (wr-) ── */
.wr-lead { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wr-lead li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: var(--mid); }
.wr-lead .hp-ico { margin-top: 3px; color: var(--blue); }
.wr-lead strong { color: var(--navy); }
.wr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 4px; }
.wr-opts { list-style: none; display: grid; gap: 8px; }
.wr-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); }
.wr-opt > .hp-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--purple-pale); color: var(--blue-deep); }
.wr-opt > .hp-ico svg { width: 18px; height: 18px; }
.wr-opt > div { flex: 1; min-width: 0; }
.wr-opt b { font-family: var(--fh); font-weight: 800; font-size: .95rem; color: var(--ink); }
.wr-opt p { margin-top: 1px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.wr-stay { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); background: #E8F6EE; font-size: .7rem; font-weight: 600; color: #1F8A55; }
.wr-stay--saas { background: var(--off); color: var(--muted); }
.wr-env { position: relative; display: flex; flex-direction: column; padding: 16px 18px; border: 1.5px dashed var(--navy); border-radius: 16px; background: var(--white); }
.wr-env-h { display: flex; align-items: center; gap: 8px; font-family: var(--fh); font-weight: 800; font-size: .98rem; color: var(--ink); }
.wr-env-h .hp-ico { color: #1F8A55; }
.wr-env-h small { font-family: var(--fb); font-weight: 500; font-size: .76rem; color: var(--muted); }
.wr-in { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.wr-in li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--off); font-size: .82rem; font-weight: 600; color: var(--mid); }
.wr-in .hp-ico { color: var(--blue-deep); }
.wr-agent { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wr-agent-n { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: var(--navy); color: var(--white); font-size: .8rem; font-weight: 600; }
.wr-agent-a { flex: 1; position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 10px); }
.wr-agent-a::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--navy); border-right: 0; }
.wr-agent-l { font-size: .72rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.wr-env-note { margin-top: auto; padding-top: 12px; font-size: .78rem; color: var(--muted); }
.wr-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.wr-marks p { font: 700 .64rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wr-marks ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.wr-marks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--border-mid); border-radius: 9px; background: var(--white); font-size: .78rem; font-weight: 600; color: var(--mid); }
.wr-marks img { width: 16px; height: 16px; object-fit: contain; }
.wr-marks .hp-ico { color: #C74634; }
.wr-sep { width: 1px; height: 22px; background: var(--border-mid); }
/* ── DAIM: outcome tiles, the routing diagram, bring your own model (dm-) ── */
.dm-outs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.dm-outs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--white); border: 1px solid var(--border-mid); }
.dm-outs .hp-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--purple-pale); color: var(--blue-deep); flex: 0 0 auto; }
.dm-outs .hp-ico svg { width: 16px; height: 16px; }
.dm-outs b { display: block; font-family: var(--fh); font-weight: 800; font-size: .9rem; color: var(--ink); }
.dm-outs span { font-size: .78rem; color: var(--muted); }
.dm-flow { display: grid; grid-template-columns: minmax(0, .7fr) 36px minmax(0, 1.25fr) 36px minmax(0, 1.15fr); align-items: center; padding: 16px; border: 1px solid var(--border-mid); border-radius: 16px; background: var(--white); }
.dm-k { display: block; font: 700 .6rem var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dm-task { padding: 12px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--off); }
.dm-task b, .dm-tier b { display: block; margin-top: 2px; font-family: var(--fh); font-weight: 800; font-size: .95rem; color: var(--ink); }
.dm-task p, .dm-tier p { margin-top: 2px; font-size: .76rem; line-height: 1.4; color: var(--muted); }
.dm-arrow { position: relative; height: 2px; margin: 0 6px; background: var(--blue); }
.dm-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--blue); border-right: 0; }
.dm-core { padding: 14px; border-radius: 14px; background: var(--navy); color: var(--white); box-shadow: 0 14px 30px -16px rgba(27,45,74,.6); }
.dm-core-h { display: flex; align-items: center; gap: 8px; font-family: var(--fh); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.dm-core-h .hp-ico { color: var(--yellow); }
.dm-core-sub { margin-top: 6px; font-size: .72rem; color: rgba(255,255,255,.7); }
.dm-crit { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dm-crit li { padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.12); font-size: .74rem; font-weight: 600; }
.dm-pts { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.dm-pts li { display: flex; gap: 6px; align-items: flex-start; font-size: .8rem; line-height: 1.35; color: rgba(255,255,255,.92); }
.dm-pts .hp-ico { margin-top: 2px; color: #9CC9F5; }
.dm-pts .hp-ico svg { width: 13px; height: 13px; }
.dm-gate { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--yellow); font-size: .74rem; line-height: 1.35; color: var(--navy); }
.dm-gate .hp-ico { margin-top: 1px; }
.dm-dest { display: flex; flex-direction: column; gap: 8px; }
.dm-tier { padding: 12px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--white); }
.dm-tier--ow { background: var(--purple-pale); border-color: #BCD8FA; }
.dm-byom { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--border-mid); border-radius: 14px; background: var(--white); }
.dm-byom p { flex: 0 0 auto; display: flex; flex-direction: column; }
.dm-byom p b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fh); font-weight: 800; font-size: .88rem; color: var(--ink); }
.dm-byom p b .hp-ico { color: var(--blue-deep); }
.dm-byom p span { font-size: .74rem; color: var(--muted); }
.dm-byom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.dm-byom li { padding: 2px 8px; border-radius: 6px; background: var(--off); font-size: .74rem; font-weight: 600; color: var(--mid); }
@media (max-width: 1199px) {
  .pn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .wr-body { grid-template-columns: 1fr; }
  .dm-flow { grid-template-columns: 1fr; gap: 0; }
  .dm-arrow { width: 2px; height: 22px; margin: 4px auto; }
  .dm-arrow::after { right: -4px; top: auto; bottom: -3px; border: 5px solid transparent; border-top: 7px solid var(--blue); border-bottom: 0; }
  .dm-byom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .pn-grid { grid-template-columns: 1fr; }
  .pn-card { grid-row: auto; display: block; }
  .pn-legend { display: none; }
  .wr-opts, .wr-in, .dm-outs { grid-template-columns: 1fr; }
}

/* Links inside FAQ answers read as links */
.faq-a-body a { color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 3px; }
.faq-a-body a:hover { text-decoration-color: var(--blue); }