/* ==========================================================================
   Bylaw Ledger — component library (bl-*)
   Load AFTER styles.css. Replaces compact.css + page-level duplicates over time.
   Every value comes from a token. Mobile-first; one breakpoint set: 720 / 960.
   ========================================================================== */

:root {
  /* Color — existing names kept, roles added */
  --canvas: #eae4d7;          /* page background */
  --section: #f8f3eb;         /* alt band */
  --surface: #fdfaf4;         /* cards */
  --surface-raised: #f3ece0;  /* muted panels, "before" */
  --line: #ded7c8;
  --line-strong: #cfc7b5;
  --ink: #141f2b;             /* text, app check-marks, dark bands */
  --navy: #34455a;            /* headings on light, icon tiles */
  --blue: #5a7694;            /* primary action, accents */
  --slate: #4f667e;           /* secondary text (AA on all light surfaces) */
  --tag: #e6e2d8;             /* "your tools", neutral pill */
  --info: #eef2f7;            /* Bylaw Ledger / "with" */
  --info-line: #d3dde9;
  --pill-app: #dfe7ef;        /* app status pills: FULFILLED, PASSED */
  --off: #d6cfbf;             /* inactive tracker bars, empty waffle */
  --debit: #8b3c35;           /* loss / warning data only */
  --on-dark-muted: #b8c5d4;
  --focus: #2f6f93;
  --white: #fff;
  --border-muted: #b9b09c;
  --seg-surface: #ebe4d6;
  --hairline-warm: #ece5d8;

  /* Type scale */
  --fs-display: clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 2.8vw, 2.25rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --fs-label: .6875rem;       /* 11px uppercase labels */
  --fs-stat: clamp(2.25rem, 4vw, 2.75rem);

  /* Space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --section-y: clamp(40px, 6vw, 64px);
  --gutter: clamp(16px, 4vw, 24px);

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-card: 0 6px 18px rgba(20,31,43,.07);
  --shadow-float: 0 14px 44px rgba(20,31,43,.12);
  --container: 1200px;
  --header-h: 64px;
}

/* ---------- Layout ---------- */
.bl-container { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.bl-section { padding-block: var(--section-y); }
.bl-section--alt { background: var(--section); border-block: 1px solid var(--line); }
.bl-section--dark { background: var(--ink); color: var(--surface); }
.bl-stack { display: flex; flex-direction: column; gap: var(--s4); }
.bl-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.bl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.bl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.bl-split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .bl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); } }
.bl-split--7-5 { } @media (min-width: 960px) { .bl-split--7-5 { grid-template-columns: 7fr 5fr; } }

/* ---------- Type ---------- */
.bl-eyebrow { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); color: var(--slate); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bl-eyebrow svg { width: 14px; height: 14px; }
.bl-h1 { max-width: 16ch; margin: 0 0 var(--s4); font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.bl-h2 { max-width: 24ch; margin: 0 0 var(--s3); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.bl-h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; }
.bl-lede { max-width: 56ch; margin: 0; color: var(--slate); font-size: 1.125rem; text-wrap: pretty; }
.bl-body { max-width: 64ch; color: var(--slate); text-wrap: pretty; }
.bl-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--navy); }

/* Section header: eyebrow + h2 + one-line intro. --split puts intro beside on desktop */
.bl-section-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.bl-section-head .bl-h2, .bl-section-head .bl-eyebrow { margin: 0; }
@media (min-width: 960px) { .bl-section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s7); } .bl-section-head--split .bl-body { grid-column: 2; grid-row: 1 / span 2; margin: 0; } }

/* ---------- Icons (shared inline symbol bank from assets/site.js) ---------- */
.bl-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-icon--sm { width: 14px; height: 14px; } .bl-icon--lg { width: 22px; height: 22px; }
.bl-icon-tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius); background: var(--info); color: var(--navy); }
.bl-icon-tile--dark { background: var(--navy); color: var(--white); }
.bl-icon-tile--round { border-radius: 50%; width: 36px; height: 36px; }

/* ---------- Buttons & links ---------- */
.bl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.bl-btn:hover { transform: translateY(-1px); }
.bl-btn:active { transform: translateY(0); }
.bl-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bl-btn[aria-disabled="true"], .bl-btn:disabled { opacity: .5; pointer-events: none; }
.bl-btn--primary { background: var(--blue); color: var(--white); }
.bl-btn--primary:hover { background: var(--navy); }
.bl-btn--secondary { background: var(--surface); color: var(--navy); border-color: var(--line); }
.bl-btn--secondary:hover { border-color: var(--blue); color: var(--ink); }
.bl-btn--on-dark { background: var(--blue); color: var(--white); }
.bl-btn--ghost-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.bl-btn--lg { min-height: 52px; padding: 0 22px; font-size: 1.0625rem; }
.bl-btn--block { width: 100%; }
.bl-btn .bl-icon { width: 16px; height: 16px; }
.bl-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* Give every page hero the same breathing room between its introduction and actions. */
main > section:first-child .bl-lede + .bl-actions { margin-top: var(--s5); }
@media (max-width: 720px) { .bl-actions--stack .bl-btn { flex: 1 1 100%; } }

/* One link style for every "go somewhere" text link (replaces .text-link, .story-link, .home-use-case__link) */
.bl-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--navy); font-weight: 700; font-size: var(--fs-small); text-decoration: none; }
.bl-link .bl-icon:last-child { transition: transform .15s ease; }
.bl-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.bl-link:hover::after { transform: translateX(3px); }

/* ---------- Pills (status) ---------- */
.bl-pill { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 8px; border-radius: 5px; border: 1px solid transparent; font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.bl-pill--app { background: var(--pill-app); color: var(--navy); }            /* FULFILLED · PASSED (app) */
.bl-pill--fixture { background: var(--tag); color: var(--ink); }            /* SAMPLE DATA */
.bl-pill--core { background: var(--info); border-color: var(--info-line); color: var(--navy); }  /* Core concept */
.bl-pill--planned { background: var(--surface-raised); border-color: var(--line); color: var(--navy); } /* Planned · In development */
.bl-pill--future { background: transparent; border: 1px dashed var(--border-muted); color: var(--slate); }  /* Future concept */
.bl-pill--dark { background: rgba(255,255,255,.12); color: var(--white); }
.bl-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.bl-pill--app::before, .bl-pill--fixture::before { display: none; }

/* ---------- Cards ---------- */
.bl-card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bl-card--link { color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.bl-card--link:hover { border-color: var(--blue); transform: translateY(-2px); }
.bl-card--float { box-shadow: var(--shadow-float); }
.bl-card--future { background: transparent; border-style: dashed; border-color: var(--border-muted); }
.bl-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.bl-card p { margin: 0; color: var(--slate); font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 720px) { .bl-card { padding: var(--s4); } }

/* Feature card (icon + title + line) — problem grid, assessment grid, purpose grid */
.bl-feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: start; }
.bl-feature .bl-icon-tile { grid-row: span 2; }
.bl-feature .bl-h3 { margin: 0; align-self: center; }

/* ---------- Scroller (replaces "Swipe to see more" text) ---------- */
.bl-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s3); }
@media (max-width: 720px) {
  .bl-scroller { grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s2); scrollbar-width: none; }
  .bl-scroller::-webkit-scrollbar { display: none; }
  .bl-scroller > * { scroll-snap-align: start; }
}
.bl-scroller-dots { display: none; justify-content: center; gap: 6px; margin-top: var(--s2); }
.bl-scroller-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--off); transition: width .2s ease, background .2s ease; }
.bl-scroller-dots span[aria-current="true"] { width: 18px; border-radius: 3px; background: var(--navy); }
@media (max-width: 720px) { .bl-scroller-dots { display: flex; } }

/* ---------- Stats ---------- */
.bl-stat { display: flex; flex-direction: column; gap: var(--s3); }
.bl-stat__viz { height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.bl-stat__value { margin: 0; font-size: var(--fs-stat); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--navy); }
.bl-stat__label { margin: 0; color: var(--slate); font-size: var(--fs-small); }
.bl-ledger-row { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; color: var(--slate); }
.bl-ledger-row + .bl-ledger-row { color: var(--debit); font-weight: 700; border-top: 1px dashed var(--line); padding-top: 6px; }
.bl-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.bl-months span { height: 18px; border-radius: 3px; background: color-mix(in oklch, var(--debit) calc(18% + var(--i) * 5%), var(--surface)); }
.bl-months span:last-child { background: var(--ink); }
.bl-months-legend { display: flex; justify-content: space-between; font-size: var(--fs-label); font-weight: 600; color: var(--slate); }
.bl-waffle { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
.bl-waffle span { aspect-ratio: 1; border-radius: 2px; background: var(--tag); }
.bl-waffle span.is-on { background: var(--navy); }
.bl-growth { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s2); align-items: center; font-size: var(--fs-label); font-weight: 700; color: var(--slate); }
.bl-growth i { display: block; height: 12px; border-radius: 3px; background: var(--tag); }
.bl-growth i.is-after { background: var(--debit); }
.bl-source-ref { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; vertical-align: super; border-radius: 50%; background: var(--info); border: 1px solid var(--info-line); color: var(--blue); font-size: 10px; font-weight: 700; text-decoration: none; letter-spacing: 0; position: relative; }
.bl-source-ref::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.bl-source-ref:hover, .bl-source-ref:focus-visible { background: var(--navy); color: var(--white); }

/* ---------- App-faithful: tracker, tally, callout, frame ---------- */
.bl-tracker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0; list-style: none; }
.bl-tracker li { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--fs-label); font-weight: 700; line-height: 1.15; }
.bl-tracker li::before { content: ""; height: 3px; border-radius: 2px; background: var(--ink); }
.bl-tracker li.is-off::before { background: var(--off); }
.bl-tracker li.is-off { color: var(--slate); }
.bl-tracker span { display: flex; align-items: center; gap: 4px; }
.bl-check { width: 12px; height: 12px; flex: none; }
.bl-tracker--mini { display: inline-flex; gap: 3px; }
.bl-tracker--mini i { width: 18px; height: 4px; border-radius: 2px; background: var(--off); }
.bl-tracker--mini i.is-on { background: var(--ink); }
.bl-tally { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); }
.bl-tally div { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.bl-tally strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.bl-tally span { font-size: var(--fs-label); color: var(--slate); }
.bl-tally .is-missing strong { color: var(--blue); }
.bl-voter { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline-warm); font-size: .8125rem; }
.bl-voter strong { flex: 1; }
.bl-voter span { font-size: var(--fs-label); font-weight: 600; color: var(--slate); }
.bl-applied { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border-radius: var(--radius); background: var(--info); border: 1px solid var(--info-line); }
.bl-app-window { overflow: hidden; background: var(--section); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.bl-app-window__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.bl-app-window__body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bl-app-window__foot { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); }
.bl-app-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--white); font-size: 10px; font-weight: 700; }
.bl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--seg-surface); border: 1px solid var(--line); }
.bl-seg > * { padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--navy); font: inherit; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.bl-seg > [aria-selected="true"], .bl-seg > [aria-pressed="true"] { background: var(--ink); color: var(--white); font-weight: 700; }
/* Annotated screenshot */
.bl-annotated { position: relative; margin: 0; }
.bl-annotated img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.bl-hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 5px rgba(90,118,148,.25); }
.bl-marker { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 800; }
.bl-annotations { display: grid; gap: var(--s3); padding: 0; margin: var(--s4) 0 0; list-style: none; }
@media (min-width: 720px) { .bl-annotations { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-annotations li { display: flex; gap: 10px; font-size: var(--fs-small); }
.bl-annotations p { margin: 2px 0 0; color: var(--slate); font-size: .8125rem; }

/* ---------- Owner-coded flow band ---------- */
.bl-legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--fs-micro); font-weight: 600; color: var(--navy); }
.bl-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bl-legend i { width: 12px; height: 12px; border-radius: 3px; }
.bl-flow { display: grid; gap: var(--s2); padding: 0; margin: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.bl-flow li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--radius); border: 1px solid; }
.bl-flow li p { margin: 0; font-size: .8125rem; line-height: 1.4; opacity: .85; }
.bl-flow .is-tools { background: var(--tag); border-color: var(--line-strong); }
.bl-flow .is-bl { background: var(--info); border-color: var(--info-line); }
.bl-flow .is-people { background: var(--navy); border-color: var(--navy); color: var(--surface); }
.bl-flow__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: var(--fs-label); font-weight: 700; }
.bl-flow .is-people .bl-flow__num, .bl-flow .is-tools .bl-flow__num { background: var(--surface); color: var(--navy); }

/* Rule → Review → Record hero (how-it-works) */
.bl-chain { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.bl-chain li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.bl-chain__rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.bl-chain__rail::after { content: ""; flex: 1; width: 2px; min-height: 16px; background: var(--blue); }
.bl-chain li:last-child .bl-chain__rail::after { display: none; }
.bl-chain__body { padding-bottom: var(--s4); }
.bl-chain__body strong { display: block; font-size: var(--fs-small); }
.bl-chain__body span { font-size: .8125rem; color: var(--slate); }

/* ---------- Timeline rail (stories) ---------- */
.bl-rail { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.bl-rail > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 720px) { .bl-rail > li { grid-template-columns: 120px 20px minmax(0, 1fr); } }
.bl-rail__date { font-size: var(--fs-micro); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); padding-top: 2px; }
@media (max-width: 719px) { .bl-rail__date { grid-column: 2; grid-row: 1; } .bl-rail__dot { grid-row: 1 / span 2; } .bl-rail__body { grid-column: 2; } }
.bl-rail__dot { display: flex; flex-direction: column; align-items: center; }
.bl-rail__dot::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--surface); border: 3px solid var(--navy); box-sizing: border-box; }
.bl-rail__dot::after { content: ""; flex: 1; width: 2px; background: var(--line-strong); }
.bl-rail > li:last-child .bl-rail__dot::after { display: none; }
.bl-rail__body { padding-bottom: var(--s5); }
.bl-rail__body p { margin: 0 0 var(--s2); color: var(--slate); font-size: var(--fs-small); }
.bl-rail__sources { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-source-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); color: var(--navy); font-size: var(--fs-micro); font-weight: 700; text-decoration: none; }
.bl-source-chip:hover { border-color: var(--blue); color: var(--ink); }

/* ---------- Key facts (at a glance) ---------- */
.bl-glance { display: grid; gap: 0; margin: 0; }
.bl-glance > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.bl-glance > div:first-child { border-top: 0; padding-top: 0; }
.bl-glance .bl-icon-tile { grid-row: span 2; width: 36px; height: 36px; }
.bl-glance dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); }
.bl-glance dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }

/* ---------- Numbered questions mapped to stages ---------- */
.bl-qlist { display: grid; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
.bl-qlist li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.bl-qlist p { margin: 0; font-size: var(--fs-small); font-weight: 600; }
.bl-qlist small { display: block; margin-top: 2px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); }

/* ---------- Boundary / limit note ---------- */
.bl-limit { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--radius); background: var(--surface-raised); border: 1px dashed var(--border-muted); color: var(--ink); font-size: var(--fs-small); }
.bl-limit strong { display: block; margin-bottom: 2px; }
.bl-limit p { margin: 0; color: var(--slate); }
.bl-split-contract { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.bl-contract { display: flex; flex-direction: column; gap: 10px; padding: var(--s5); border-radius: var(--radius-lg); }
.bl-contract--people { background: var(--navy); color: var(--surface); }
.bl-contract--bl { background: var(--info); border: 1px solid var(--info-line); }
.bl-contract ul { display: grid; gap: var(--s2); padding: 0; margin: 0; list-style: none; font-size: var(--fs-small); }
.bl-contract li { display: flex; gap: var(--s2); }
.bl-contract li.is-not { opacity: .8; }

/* ---------- Tabs (segmented, app-style) ---------- */
.bl-tabs [role="tablist"] { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--s4); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--tag); border-radius: 12px; }
@media (max-width: 960px) { .bl-tabs { min-width: 0; overflow: hidden; } .bl-tabs [role="tablist"] { width: 100%; } }
.bl-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--navy); font: inherit; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; cursor: pointer; }
.bl-tabs [role="tab"]:hover { background: rgba(255,255,255,.55); }
.bl-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--white); font-weight: 700; }
.bl-tabs [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bl-tabs [role="tab"] .bl-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--blue); color: var(--white); font-size: var(--fs-label); font-weight: 700; }
.bl-tabs [role="tabpanel"][hidden] { display: none; }

/* ---------- Use-case card ---------- */
.bl-uc-grid { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s3); }
.bl-uc { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); transition: border-color .15s ease, box-shadow .15s ease; }
.bl-uc:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.bl-uc:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.bl-uc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.bl-uc__cat { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--navy); font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bl-uc__icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--info); color: var(--navy); }
.bl-uc__q { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.bl-uc__q a { color: var(--ink); text-decoration: none; }
.bl-uc__q a::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.bl-uc__q a:focus-visible { outline: none; }
.bl-uc__ba { display: flex; flex-direction: column; gap: 6px; }
.bl-uc__before, .bl-uc__after { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin: 0; border-radius: var(--radius); line-height: 1.4; }
.bl-uc__before { background: var(--surface-raised); color: var(--slate); font-size: .8125rem; }
.bl-uc__after { background: var(--info); border: 1px solid var(--info-line); color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
.bl-uc__before span, .bl-uc__after span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bl-uc__before span { color: var(--slate); }
.bl-uc__after span { color: var(--navy); }
.bl-uc__arrow { position: relative; z-index: 1; display: grid; align-self: center; place-items: center; width: 22px; height: 22px; margin: -12px 0; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--surface); color: var(--white); font-size: 12px; font-weight: 800; }
.bl-uc__foot { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.bl-uc__read { position: relative; z-index: 2; }
.bl-uc__foot .bl-btn { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; padding: 7px 8px; white-space: normal; text-align: center; line-height: 1.2; }
.bl-uc__foot .bl-btn:only-child { flex: 0 1 auto; }
@media (max-width: 720px) { .bl-uc { padding: 16px; } .bl-uc__q { font-size: 1.1875rem; } }
@media (prefers-reduced-motion: reduce) { .bl-uc { transition: none; } }

/* ---------- Before / after ---------- */
.bl-ba { display: flex; flex-direction: column; gap: var(--s2); }
.bl-ba__before, .bl-ba__after { display: flex; flex-direction: column; gap: 4px; padding: 10px var(--s3); border-radius: var(--radius); font-size: .8125rem; line-height: 1.4; }
.bl-ba__before { background: var(--surface-raised); color: var(--slate); }
.bl-ba__after { background: var(--info); border: 1px solid var(--info-line); font-weight: 600; font-size: var(--fs-small); }
.bl-ba__arrow { align-self: center; color: var(--blue); font-weight: 800; line-height: 1; }

/* ---------- Basic vs Pro ---------- */
.bl-coverage { display: grid; grid-template-columns: minmax(56px, 88px) minmax(0, 1fr); gap: var(--s3); align-items: center; }
.bl-coverage__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bl-coverage__bar i { height: 28px; border-radius: 5px; background: var(--tag); border: 1px solid var(--line-strong); }
.bl-coverage__bar i.is-visible { background: var(--blue); border-color: var(--blue); }
.bl-coverage__bar i.is-inside { background: var(--navy); border-color: var(--navy); }
.products-key__visible { background: var(--blue); }
.bl-coverage__labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; font-size: var(--fs-label); font-weight: 600; color: var(--slate); text-align: center; line-height: 1.2; }
.bl-compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.bl-compare th, .bl-compare td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bl-compare th[scope="row"] { color: var(--slate); font-weight: 600; }
.bl-compare thead th:last-child { background: var(--navy); color: var(--surface); }
.bl-compare td:last-child { background: var(--info); }

/* ---------- People ---------- */
.bl-person { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bl-person img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.bl-person strong, .bl-person small { display: block; }
.bl-person small { color: var(--slate); font-size: var(--fs-micro); }
.bl-person .bl-link { min-height: 44px; font-size: var(--fs-micro); }

/* ---------- Sources list ---------- */
.bl-sources { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; counter-reset: src; }
.bl-sources li { counter-increment: src; display: grid; grid-template-columns: 28px 36px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.bl-sources li::before { content: counter(src); font-size: var(--fs-micro); font-weight: 800; color: var(--blue); }
.bl-sources a { font-weight: 700; font-size: var(--fs-small); color: var(--ink); }
.bl-sources span { display: block; font-size: var(--fs-micro); color: var(--slate); }

/* ---------- Header / nav ---------- */
.bl-header { position: sticky; top: 0; z-index: 20; background: var(--section); border-bottom: 1px solid var(--line); }
.bl-header__inner { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }
.bl-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; }
.bl-brand__mark { display: block; width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: contain; }
.bl-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.bl-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--navy); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.bl-nav a:hover { background: var(--surface-raised); color: var(--ink); }
.bl-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.bl-menu-btn { display: none; }
@media (max-width: 420px) { .bl-header .bl-brand > span:last-child { display: none; } }
@media (max-width: 960px) {
  .bl-menu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--navy); font: inherit; font-weight: 700; }
  .bl-header .bl-btn--primary { margin-left: auto; min-height: 44px; padding: 0 14px; font-size: var(--fs-small); }
  .bl-nav { position: absolute; inset: 100% 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--gutter) var(--s4); background: var(--section); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float); }
  .bl-nav[data-open="true"] { display: flex; }
  .bl-nav a { min-height: 48px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1rem; }
  .bl-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--blue); padding-left: 14px; }
}

/* ---------- End-of-page Next card ---------- */
.bl-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-radius: var(--radius-xl); background: var(--ink); color: var(--surface); text-decoration: none; }
.bl-next__kicker { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; color: var(--on-dark-muted); }
.bl-next__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.bl-next__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); font-size: 1.25rem; transition: transform .15s ease; }
.bl-next:hover .bl-next__go { transform: translateX(4px); }

/* ---------- Footer ---------- */
.bl-footer { padding: var(--s5) 0 var(--s4); background: var(--ink); color: rgba(255,255,255,.82); }
.bl-footer .bl-brand { color: var(--surface); }
.bl-footer__legal p { margin: var(--s2) 0 0; }
.bl-footer__grid { display: grid; gap: var(--s4); grid-template-columns: minmax(180px, 1.2fr) minmax(250px, 1.4fr) minmax(150px, .8fr) minmax(110px, .55fr); }
.bl-footer h2 { margin: 0 0 var(--s2); color: var(--white); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.bl-footer ul { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.bl-footer a { display: inline-flex; align-items: center; min-height: 34px; color: inherit; font-size: var(--fs-small); text-decoration: none; }
.bl-footer a:hover { color: var(--white); text-decoration: underline; }
.bl-footer__explore ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }
.bl-footer__legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.2); font-size: var(--fs-micro); color: rgba(255,255,255,.65); }
@media (max-width: 720px) {
  .bl-footer { padding: var(--s4) 0 var(--s3); }
  .bl-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .bl-footer__grid > :first-child, .bl-footer__explore { grid-column: 1 / -1; }
  .bl-footer a { min-height: 32px; }
  .bl-footer__legal { margin-top: var(--s3); padding-top: var(--s3); }
}

/* ---------- Forms ---------- */
.bl-field { display: grid; gap: 6px; }
.bl-field > label, .bl-field > legend { font-size: var(--fs-small); font-weight: 700; }
.bl-input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; }
.bl-input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--blue); }
.bl-input[aria-invalid="true"] { border-color: var(--debit); }
.bl-error { margin: 0; color: var(--debit); font-size: var(--fs-micro); font-weight: 600; }
.bl-choice-tiles { display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; padding: 0; margin: 0; }
.bl-choice-tiles label { position: relative; display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.bl-choice-tiles input { position: absolute; opacity: 0; pointer-events: none; }
.bl-choice-tiles label:has(input:checked) { border: 2px solid var(--navy); background: var(--info); }
.bl-choice-tiles label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.bl-steps { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.bl-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.bl-steps__n { display: flex; flex-direction: column; align-items: center; }
.bl-steps__n b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: var(--fs-label); }
.bl-steps__n::after { content: ""; flex: 1; width: 2px; min-height: 10px; background: var(--blue); }
.bl-steps li:last-child .bl-steps__n::after { display: none; }
.bl-steps li > div:last-child { padding-bottom: var(--s3); font-size: var(--fs-small); }
.bl-steps span { display: block; color: var(--slate); font-size: .8125rem; }
.bl-success { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--radius); background: var(--info); border: 1px solid var(--info-line); }

@media (prefers-reduced-motion: reduce) { .bl-btn, .bl-card--link, .bl-link .bl-icon:last-child, .bl-next__go { transition: none; } .bl-btn:hover, .bl-card--link:hover { transform: none; } }