/* ProcureIndex stylesheet — see docs/12-design-system.md.
   One file, no framework. Layers, in this order (add new rules to the right layer):
     1. tokens       every colour, size, space, radius, shadow
     2. base         reset + element defaults
     3. layout       primitives: container, page, stack, cluster, grid, split, section
     4. components   one block per component; components never set their own outer margin
     5. pages        the few page-only compositions (landing hero, bid brief viz)
     6. utilities    single-purpose helpers + print
   Spacing rule: the parent decides spacing with `gap` (stack/cluster/grid). Children of a
   stack have their block margins zeroed, so there are no sibling-margin hacks. */

/* ==== 1. tokens ======================================================== */
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-bengali-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/noto-sans-bengali-600.woff2") format("woff2");
}

:root {
  /* brand: emerald; money: gold; ink: navy; red only for deadlines/amended */
  --brand: #0b5d4b;
  --brand-dark: #08483b;
  --brand-soft: #e7f2ef;
  --brand-line: #b9d6cb;
  --brand-ink: #ffffff;
  --accent: #b7791f;
  --accent-soft: #fbf3e4;
  --accent-line: #ecd9b4;

  /* neutrals (warm off-white canvas) */
  --ink: #14213d;
  --ink-2: #4a5568;
  --ink-3: #7a8591;
  --line: #e4e2db;
  --line-2: #d2cfc6;
  --bg: #ffffff;
  --bg-2: #f7f6f2;
  --bg-3: #efede7;
  --bg-hover: #fafbfc;
  --selection: #d5ebe1;

  /* semantic: text, soft fill, border */
  --success: #1a7f37; --success-soft: #eaf6ee; --success-line: #bfe3c9;
  --warn: #8a5a00;    --warn-soft: #fdf5e2;    --warn-line: #efd9a8;
  --danger: #b42318;  --danger-soft: #fdeeec;  --danger-line: #f4c7c1;
  --info: #24527a;    --info-soft: #edf3f9;    --info-line: #cfdfee;
  --focus: #ffbf47;

  /* on dark (navy footer, brand band) */
  --on-dark: #ffffff;
  --on-dark-2: #c9d1dd;
  --on-dark-muted: rgba(255, 255, 255, .82);
  --on-dark-line: rgba(255, 255, 255, .12);

  /* type */
  --font: "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-ui: 15px;          /* buttons, inputs, tables, nav */
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-brand: 19px;
  --fs-icon: 20px;
  --fs-lg: clamp(18px, 1.2vw + 14px, 20px);
  --fs-h3: 18px;
  --fs-h2: clamp(20px, 1.2vw + 16px, 24px);
  --fs-h1: clamp(24px, 1.8vw + 17px, 32px);
  --fs-display: clamp(28px, 3.2vw + 16px, 44px);
  --fs-kpi: clamp(22px, 1.4vw + 16px, 28px);
  --fs-kpi-sm: clamp(18px, .8vw + 14px, 21px);   /* money/date/text KPI values */
  --fs-price: 32px;
  --lh: 1.65;
  --lh-snug: 1.5;
  --lh-tight: 1.3;

  /* space (4/8) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px;
  --s-half: 2px;
  --s-field: 6px;         /* label → control */

  /* controls */
  --control-h: 44px;      /* min touch target */
  --control-h-lg: 48px;
  --chip-h: 36px;
  --link-h: 40px;
  --control-px: 12px;
  --btn-px: 18px;
  --btn-px-sm: 14px;
  --icon-sm: 26px;
  --icon: 32px;
  --dot: 8px;
  --search-w: 240px;
  --search-max: 760px;     /* every search_bar */

  /* shape */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --rule: 1px;
  --rule-accent: 4px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .04);
  --shadow-up: 0 -4px 16px rgba(16, 24, 40, .08);

  /* layout */
  --max: 1160px;
  --measure: 70ch;
  --doc-max: 820px;
  --field-max: 520px;
  --side-w: 300px;
  --gutter: 16px;
  --panel-pad: var(--s4);
  --page-gap: var(--s4);
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --panel-pad: var(--s5); --page-gap: var(--s5); }
}

/* ==== 2. base ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg-2);
  overflow-wrap: break-word;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
body > main { flex: 1 0 auto; width: 100%; }
@media (min-width: 768px) { body { font-size: var(--fs-md); } }
h1, h2, h3 { margin: 0 0 var(--s3); font-weight: 600; color: var(--ink); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
h1 a, h2 a { text-decoration: none; }
p { margin: 0 0 var(--s3); }
a { color: var(--brand); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-dark); }
img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: var(--rule) solid var(--line); margin: 0; }
code { font-family: var(--font-mono); }
label { font-weight: 600; font-size: var(--fs-sm); }
summary { cursor: pointer; font-weight: 600; }
summary:hover { color: var(--brand); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--selection); }

/* ==== 3. layout primitives ============================================= */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* stack: vertical flow, spacing via gap only */
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack > * { margin-block: 0; }
.stack--xs { gap: var(--s1); }
.stack--sm { gap: var(--s2); }
.stack--md { gap: var(--s3); }
.stack--lg { gap: var(--s5); }
.stack--xl { gap: var(--s7); }
.stack--page { gap: var(--page-gap); }
.stack--landing { gap: var(--s8); }
@media (min-width: 768px) { .stack--landing { gap: var(--s9); } }

/* page: the <main> column */
.page { padding-top: var(--s5); padding-bottom: var(--s8); }
@media (min-width: 768px) { .page { padding-top: var(--s6); } }

/* cluster: inline group that wraps (buttons, chips, meta) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cluster > * { margin: 0; }
.cluster--loose { gap: var(--s2) var(--s4); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

/* grid: equal columns that collapse on narrow screens */
.grid { display: grid; gap: var(--s4); align-items: start; }
.grid > * { margin: 0; min-width: 0; }
.grid--stretch { align-items: stretch; }
@media (max-width: 639px) { .grid--2 { gap: var(--s5); } .grid--2 > * + * { padding-top: var(--s5); border-top: var(--rule) solid var(--line); } }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid--wide-narrow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (min-width: 900px) { .grid--narrow-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s7); } }

/* section: a titled block of the page; .panel makes it a white panel */
.section { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.section > * { margin-block: 0; }

/* measure */
.measure { max-width: var(--measure); }
.doc { max-width: var(--doc-max); }

/* prose: long-form text keeps natural flow */
.prose { max-width: var(--measure); }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: var(--s3); }
.prose > h2, .prose > h3 { margin-top: var(--s6); }

/* ==== 4. components ===================================================== */

/* -- site header -- */
.site-header { background: var(--bg); border-bottom: var(--rule) solid var(--line); }
@media (min-width: 768px) { .site-header { position: sticky; top: 0; z-index: 40; } }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4);
  max-width: var(--max); margin: 0 auto; padding: var(--s2) var(--gutter);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--control-h);
  font-size: var(--fs-brand); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--ink);
}
.brand img { flex: none; display: block; }
.brand:hover { color: var(--ink); }
/* Phones: the six links are one swipeable row (each link a 44px tap target); the alert CTA stays in the
   brand row above, always visible. "আজকের টেন্ডার" shortens to "আজকের" (.nav-extra holds the rest).
   From 900px the nav sits inline. */
.site-nav { order: 3; display: flex; gap: var(--s1); width: 100%; margin: 0; font-size: 0.875rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* tap target = --control-h; literal kept for tests */ padding: 0 var(--s3);
  color: var(--ink-2); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; font-weight: 600; text-align: center;
}
.nav-extra { display: none; }
.site-nav a:hover { color: var(--ink); background: var(--bg-2); }
.header-search { display: none; gap: var(--s1); }
.header-search input {
  width: var(--search-w); min-height: 44px; /* tap target = --control-h; literal kept for tests */ padding: var(--s2) var(--control-px);
  border: var(--rule) solid var(--line-2); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-ui); background: var(--bg-2);
}
.header-search input:focus { background: var(--bg); border-color: var(--brand); }
.header-search__btn {
  min-height: 44px; /* tap target = --control-h; literal kept for tests */ padding: 0 var(--s3);
  border: var(--rule) solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer;
}
.header-search__btn:hover { border-color: var(--brand); color: var(--brand); }
.lang-link {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-h); min-height: 44px; /* tap target = --control-h; literal kept for tests */ padding: 0 var(--control-px);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--ink-2);
  border: var(--rule) solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg);
}
.lang-link:hover { border-color: var(--brand); color: var(--brand); }
.header-search-link {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; /* tap target = --control-h; literal kept for tests */
  margin-left: auto; color: var(--ink-2); border: var(--rule) solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg);
}
.header-search-link:hover { color: var(--brand); border-color: var(--brand); }
.header-search-link + .lang-link { margin-left: 0; }
@media (max-width: 899px) {
  .site-header__inner { column-gap: var(--s2); }
  .site-header .header-cta { padding-inline: var(--btn-px-sm); flex: none; white-space: nowrap; }
  .site-header .brand { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 399px) {
  .brand { font-size: 1rem; }
  .header-search-link { display: none; }  /* /tenders is one swipe away in the nav; keeps the CTA on screen at 360px */
  .lang-link { margin-left: auto; }
}
@media (min-width: 900px) {
  .site-header__inner { flex-wrap: nowrap; min-height: 64px; }
  .site-nav { order: 0; display: flex; gap: var(--s1); width: auto; margin: 0 0 0 var(--s4); font-size: var(--fs-ui); overflow: visible; }
  .site-nav a { padding: 0 var(--s3); }
  .nav-extra { display: inline; white-space: pre; }
  .header-search { display: flex; align-items: center; margin-left: auto; flex: 0 1 360px; min-width: 0; }
  .header-search input { width: auto; flex: 1 1 auto; min-width: 0; }
  .lang-link { margin-left: 0; }
  .header-search-link { display: none; }
}

/* -- site footer (navy) -- */
.site-footer { background: var(--ink); color: var(--on-dark-2); font-size: var(--fs-sm); }
.site-footer__inner { display: grid; gap: var(--s5); padding: var(--s7) var(--gutter) var(--s5); max-width: var(--max); margin: 0 auto; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 2fr 1fr 1.4fr; } }
.site-footer__inner > div > * { margin: 0 0 var(--s2); }
.site-footer h2 { font-size: var(--fs-sm); color: var(--on-dark); }
.site-footer p { color: var(--on-dark-2); }
.footer-brand { font-weight: 600; font-size: var(--fs-ui); color: var(--on-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 768px) {
  .site-footer__inner > div:last-child ul { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); column-gap: var(--s4); }
}
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--chip-h); }
.footer-districts {
  max-width: var(--max); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s6);
  box-shadow: inset 0 var(--rule) 0 var(--on-dark-line);
}
.footer-districts summary { color: var(--on-dark-2); }
.footer-districts summary:hover { color: var(--on-dark); }
.site-footer .footer-districts ul { display: flex; flex-wrap: wrap; gap: var(--s-half) var(--s4); margin-top: var(--s3); }

/* -- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-tight);
  padding: 10px var(--btn-px); min-height: var(--control-h); border-radius: var(--radius-sm);
  border: var(--rule) solid transparent; text-decoration: none; text-align: center;
  cursor: pointer; color: var(--ink); background: var(--bg); white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-dark); color: var(--brand-ink); }
.btn--secondary { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn--quiet { border: 0; background: none; color: var(--brand); padding-inline: var(--s2); }
.btn--quiet:hover { background: var(--brand-soft); }
.btn--small { padding: 6px var(--btn-px-sm); font-size: var(--fs-sm); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
@media (max-width: 520px) { .btn-row > .btn { flex: 1 1 auto; } }

/* -- form controls -- */
.input, .select {
  width: 100%; min-height: var(--control-h); padding: 10px var(--control-px);
  border: var(--rule) solid var(--line-2); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-ui); line-height: var(--lh-snug); background: var(--bg); color: var(--ink);
}
.select { height: var(--control-h); padding-block: 0; }
.input::placeholder { color: var(--ink-3); font-weight: 400; }
.header-search input::placeholder { font-weight: 400; }
.input:focus, .select:focus { border-color: var(--brand); outline: 3px solid var(--brand-soft); outline-offset: 0; }

/* -- form: field / grid / actions --
   .form is a stack; .form-grid lays fields in columns (all fields top-aligned, equal control height);
   .form-actions puts buttons in a row with the note underneath. */
.form { display: flex; flex-direction: column; gap: var(--s4); }
.form > * { margin: 0; }
.form-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* no orphan field */
}
.field { display: grid; gap: var(--s-field); align-content: start; min-width: 0; margin: 0; }
.field__label { color: var(--ink); }
.field__optional { color: var(--ink-2); font-weight: 400; }
.field__hint { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.field--limit .input, .field--limit .select { max-width: var(--field-max); }
.form-actions { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s1); }
.form-actions > * { margin: 0; }
.form-note { color: var(--ink-2); font-size: var(--fs-sm); }
.form-step { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-h3); }

/* inline search bar: input [+ select] + button on one line from 640px */
.search-bar { display: grid; gap: var(--s2); margin: 0; width: 100%; max-width: var(--search-max); }
@media (min-width: 640px) {
  .search-bar { grid-template-columns: minmax(0, 1fr) 220px auto; column-gap: var(--s3); }
  .search-bar--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .search-bar--single { grid-template-columns: minmax(0, 1fr) auto; }
}
.search-bar .input, .search-bar .select, .search-bar .btn { min-height: var(--control-h-lg); height: var(--control-h-lg); }

/* -- card / panel: white surface on the canvas.
   .alert-cta and .preview__box are cards whose exact class strings tests assert. -- */
.card, .panel, .alert-cta, .preview__box {
  display: flex; flex-direction: column; gap: var(--s4);
  background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--panel-pad); min-width: 0;
}
.card > *, .panel > *, .alert-cta > *, .preview__box > * { margin-block: 0; }
@media (min-width: 768px) { .panel { padding: var(--s5) var(--s6); } }
.card--raised { box-shadow: var(--shadow); }
.card--center { text-align: center; align-items: center; }
.card--rule-brand { border-left: var(--rule-accent) solid var(--brand); border-radius: var(--radius); }
/* doc card: sections separated by a rule */
.card--doc { gap: var(--s5); max-width: var(--doc-max); }
.card--doc h2 { font-size: var(--fs-h2); } .card--doc h3 { font-size: var(--fs-h3); }
.card--doc .prose { max-width: none; }
.card--doc > .section + .section { padding-top: var(--s5); border-top: var(--rule) solid var(--line); }

/* -- page header -- */
.page-header { display: flex; flex-direction: column; gap: var(--s3); }
.page-header > * { margin: 0; }
.page-header__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4); }
.page-header__title { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; flex: 1 1 320px; }
.page-header__title > * { margin: 0; }
.page-header h1 { max-width: 46ch; }
.page-header--long h1 { font-size: var(--fs-h2); max-width: 60ch; }
@media (max-width: 640px) { .page-header--long h1 { font-size: var(--fs-h3); } }
.page-header__meta { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.8; }
.page-header__meta a { text-decoration: none; }
.page-header__meta a:hover { text-decoration: underline; }
.page-header__aside { flex: none; }

/* -- section header -- */
.section-header { display: flex; flex-direction: column; gap: var(--s2); }
.section-header > * { margin: 0; }
.section-header__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.section-header__row > * { margin: 0; }
.section-header__intro { color: var(--ink-2); max-width: 62ch; }
.section-link { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.section-link:hover { text-decoration: underline; }
.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--brand); line-height: 1.4; }
.eyebrow--empty { min-height: 1.4em; }  /* keeps every page's h1 at the same height */
.subhead { font-size: var(--fs-h3); }

/* -- stat tiles --
   Columns follow the count (stats--n2..n6) so rows are always balanced; values never wrap.
   Money/date/text values use the smaller KPI size (stat--text). */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; margin: 0; }
.stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.stats--n1, .stats--n3 { grid-template-columns: minmax(0, 1fr); }  /* 3 on a phone = 3 equal rows, never 2+1 */
@media (min-width: 640px) {
  .stats { gap: var(--s4); }
  .stats--n3, .stats--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--n3 > :last-child:nth-child(odd), .stats--n6 > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 900px) {
  .stats--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats--n4 > :last-child:nth-child(odd), .stats--n5 > :last-child:nth-child(odd) { grid-column: auto; }
}
.stat {
  display: flex; flex-direction: column; gap: var(--s1); min-width: 0;
  background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius);
  padding: var(--s3) var(--s4); box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .stat { padding: var(--s4) var(--s5); } }
.stat__num {
  display: block; font-size: var(--fs-kpi); font-weight: 600; line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
  min-height: calc(var(--fs-kpi) * 1.3); display: flex; align-items: flex-end;
}
.stat--text .stat__num { font-size: var(--fs-kpi-sm); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.stat__label { display: block; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.stats--flat .stat { box-shadow: none; background: var(--bg-2); }
.stats--brand .stat__num { color: var(--brand); }
.kpi { font-size: var(--fs-kpi); font-weight: 600; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }

/* -- callout: one component for notices, alerts and promos -- */
.callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  border: var(--rule) solid var(--line); border-left-width: var(--rule-accent);
  background: var(--bg-2); color: var(--ink); font-size: var(--fs-ui); line-height: 1.6; margin: 0;
}
p.callout { display: block; }
.callout__icon {
  flex: none; display: inline-grid; place-items: center; width: var(--icon); height: var(--icon); border-radius: 50%;
  background: var(--bg); border: var(--rule) solid currentColor; font-weight: 600; font-size: var(--fs-ui); color: var(--info);
}
.callout__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-half); }
.callout__body > * { margin: 0; }
.callout__title { font-weight: 600; }
.callout__action { flex: none; }
@media (max-width: 520px) { .callout__action { flex: 1 1 100%; } .callout__action .btn { width: 100%; } }
.callout--info { background: var(--info-soft); border-color: var(--info-line); border-left-color: var(--info); }
.callout--good { background: var(--success-soft); border-color: var(--success-line); border-left-color: var(--success); }
.callout--good .callout__icon { color: var(--success); }
.callout--warn { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); }
.callout--warn .callout__icon { color: var(--warn); }
.callout--bad { background: var(--danger-soft); border-color: var(--danger-line); border-left-color: var(--danger); }
.callout--brand { background: var(--brand-soft); border-color: var(--brand-line); border-left-color: var(--brand); }
.callout--brand .callout__icon { color: var(--brand); }
/* amended tender (corrigendum) list */
/* -- reasons: verdict bullets inside a callout (decision box) -- */
.reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.reasons__item { position: relative; padding-left: var(--s5); }
.reasons__item::before { position: absolute; left: 0; font-weight: 600; }
.reasons__item--good::before { content: "✓"; color: var(--success); }
.reasons__item--bad::before { content: "×"; color: var(--ink-2); }
.verdict-line { margin-top: var(--s2); }
.reasons__item--warn::before { content: "!"; color: var(--warn); }
.reasons__item--info::before { content: "•"; color: var(--ink-2); }
.callout--amended { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); background: var(--danger-soft); border-color: var(--danger-line); border-left-color: var(--danger); }
.callout--amended > * { margin: 0; }
.callout--amended h3 { font-size: var(--fs-base); }
.callout--amended ul { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); }

/* teaser: dashed hint of paid content */
.teaser { border: var(--rule) dashed var(--line-2); border-radius: var(--radius); padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--ink-2); background: var(--bg); margin: 0; }
.teaser a { font-weight: 600; }

/* -- status dot, badge, chip -- */
.status { display: inline-flex; align-items: center; gap: var(--s-field); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.status::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--ink-3); }
.status--live { color: var(--success); }
.status--live::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status--closing { color: var(--danger); }
.status--closing::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.badge {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 1px var(--s2); min-height: 22px;
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-snug); vertical-align: middle;
  background: var(--bg-3); color: var(--ink-2); border: var(--rule) solid var(--line); text-decoration: none;
}
.badge--brand { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge--success { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.badge--danger, .badge--amended { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
a.badge:hover { text-decoration: underline; color: var(--danger); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-field); min-height: var(--chip-h); padding: var(--s1) var(--btn-px-sm);
  border: var(--rule) solid var(--line-2); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-current="true"], .chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.input--chip { min-width: 14em; }
.select--chip, .input--chip { min-height: var(--chip-h); height: var(--chip-h); width: auto; max-width: 100%; padding: var(--s1) var(--control-px); font-size: var(--fs-sm); border-radius: var(--radius-pill); }

/* -- data table -- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius); margin: 0;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.table th, .table td { text-align: left; padding: var(--s3) var(--s4); border-bottom: var(--rule) solid var(--line); vertical-align: top; line-height: var(--lh-snug); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table thead th { background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; padding-block: 10px; }
.table tbody th { font-weight: 600; }
.table tbody tr:hover { background: var(--bg-hover); }
.table .num, .table .date { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .date { text-align: left; }
.table td a { text-decoration: none; font-weight: 600; }
.table td a:hover { text-decoration: underline; }
.table td p { margin: var(--s-half) 0 0; }
.table .empty { padding: var(--s5); }
/* tables written in markdown (guides, blog): first column is the row label */
.table--prose { font-size: var(--fs-sm); }
.table--prose tbody td:first-child { font-weight: 600; color: var(--ink); }
@media (min-width: 640px) { .table--prose tbody td:first-child { width: 1%; white-space: nowrap; } }
.table--prose thead th { white-space: normal; }
.prose .table-wrap { margin-block: var(--s4); }
@media (max-width: 640px) {
  .table { font-size: var(--fs-sm); }
  .table th, .table td { padding: 10px var(--control-px); }
  /* stacked table: every row is a card; first cell = title, others = label · value */
  .table-wrap:has(> .table--stack) { overflow: visible; }
  .table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td, .table--stack tbody th { display: block; }
  .table--stack tr { padding: var(--s3) var(--control-px); border-bottom: var(--rule) solid var(--line); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td, .table--stack tbody th {
    position: relative; padding: var(--s-half) 0 var(--s-half) 38%; border: 0; text-align: left; white-space: normal;
  }
  .table--stack td::before, .table--stack tbody th::before {
    content: attr(data-label); position: absolute; left: 0; top: var(--s-half); width: calc(38% - var(--s3));
    color: var(--ink-2); font-size: var(--fs-xs); font-weight: 400;
  }
  .table--stack td:not([data-label]), .table--stack td[data-label=""] { padding-left: 0; }
  .table--stack tr > :first-child { display: block; text-align: left; padding: 0 0 var(--s1); font-weight: 600; font-size: var(--fs-ui); }
  .table--stack tr > :first-child::before { content: none; }
  .table--stack td[data-label=""]::before, .table--stack td:not([data-label])::before { content: none; }
  .table--stack td.num, .table--stack td.nowrap { text-align: left; white-space: normal; }
  .table--stack td.empty { display: block; text-align: center; }
}

/* -- summary list (dl) -- */
.summary { display: grid; gap: 0 var(--s6); margin: 0; }
@media (min-width: 640px) {
  .summary { grid-template-columns: 1fr 1fr; }
  .summary > div:last-child:nth-child(odd), .summary > .summary__wide { grid-column: 1 / -1; }
}
.summary > div { display: grid; gap: var(--s-half); align-content: start; min-width: 0; padding: var(--s3) 0; border-bottom: var(--rule) solid var(--line); }
.summary dt { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.summary dd .rows .row { padding-block: var(--s1); border: 0; }

/* -- rows: list of tenders / awards / ranked links -- */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  justify-content: space-between; align-items: flex-start;
  padding: var(--s4) 0; border-bottom: var(--rule) solid var(--line);
}
.row:first-child { padding-top: 0; }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row__main { flex: 1 1 60%; min-width: 0; }
.row__main > p { margin: 0; }
a.row__main { font-weight: 600; text-decoration: none; }
a.row__main:hover { text-decoration: underline; }
.row__title {
  font-weight: 600; color: var(--ink); text-decoration: none; line-height: var(--lh-snug);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.table td a.row__title { color: var(--ink); }
.row__title:hover { color: var(--brand); text-decoration: underline; }
.row__meta { color: var(--ink-2); font-size: var(--fs-sm); margin: var(--s1) 0 0; line-height: 1.55; }
.row__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-half); text-align: right; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row__aside strong { color: var(--ink); font-size: var(--fs-ui); }
.row__aside .soon { color: var(--danger); font-weight: 600; }
@media (max-width: 520px) {
  .row__aside { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s2); text-align: left; white-space: normal; flex-basis: 100%; }
}
.row--link { flex-wrap: nowrap; align-items: baseline; }
.row--tap { position: relative; }
.row--tap .row__title::after { content: ""; position: absolute; inset: 0; }
.row--tap:hover .row__title { color: var(--brand); text-decoration: underline; }
.row--tap .row__aside { color: var(--brand); font-weight: 600; }
@media (max-width: 520px) { .row--link .row__aside { flex-basis: auto; } }
.rows--card { background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .rows--card { padding: var(--s4) var(--s5); } }
.rows--compact .row { padding: var(--s3) 0; }
.rows--compact .row:first-child { padding-top: 0; }
.count-line { color: var(--ink-2); font-size: var(--fs-sm); }
.count-line strong { color: var(--ink); }
.count-line__updated::before { content: " · "; }
@media (max-width: 520px) { .count-line__updated { display: block; } .count-line__updated::before { content: none; } }

/* ranked list (1, 2, 3 …) */
.rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; border: var(--rule) solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.rank li { counter-increment: rank; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: var(--rule) solid var(--line); font-weight: 600; }
.rank li:first-child { border-top: 0; }
.rank li::before {
  content: counter(rank); flex: none; display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm);
  border-radius: 50%; background: var(--bg-3); color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.rank li:first-child::before { background: var(--brand); color: var(--brand-ink); }

/* bars ("awards by month", work types) */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.bar-row { display: flex; align-items: center; gap: var(--s3); min-height: 2rem; }
.bar-row__label { flex: 0 0 8.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: var(--lh-snug); color: var(--ink-2); font-size: var(--fs-sm); }
.bar-row__num { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar { height: 10px; min-width: 2px; background: var(--brand); border-radius: 3px; }

/* -- breadcrumb -- */
.breadcrumb { font-size: var(--fs-sm); color: var(--ink-2); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-field); margin: 0; padding: 0; }
.breadcrumb li { display: flex; gap: var(--s-field); min-width: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .breadcrumb ol { flex-wrap: nowrap; overflow: hidden; }
  .breadcrumb li { flex: none; max-width: 40%; }
  .breadcrumb li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb li:last-child { flex: 1 1 auto; max-width: none; }
}

/* -- tabs -- */
.tabs { display: flex; gap: var(--s5); border-bottom: var(--rule) solid var(--line); overflow-x: auto; margin: 0; }
.tabs a { padding: 10px 0; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"], .tabs a:hover { color: var(--brand); border-color: var(--brand); }
.tabs--inline { display: inline-flex; align-self: flex-start; font-size: var(--fs-ui); }

/* -- link grid / pager / empty -- */
.link-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.link-grid a {
  display: inline-flex; align-items: center; gap: var(--s-field); min-height: var(--link-h); padding: var(--s-field) var(--btn-px-sm); font-size: var(--fs-ui);
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm); background: var(--bg); text-decoration: none; color: var(--ink);
}
.link-grid a:hover { border-color: var(--brand); color: var(--brand); }
.link-grid a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); padding-top: var(--s2); font-size: var(--fs-ui); }
.pager a, .pager span { display: inline-flex; align-items: center; min-height: var(--link-h); padding: var(--s-field) var(--btn-px-sm); border: var(--rule) solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); background: var(--bg); }
.pager span { border-color: transparent; background: none; color: var(--ink-2); }
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager a, .pager .pager__off { min-height: var(--control-h); }
.pager .pager__off { border-color: var(--line); background: var(--bg); color: var(--ink-3); }
.empty { color: var(--ink-2); padding: var(--s5) 0; text-align: center; margin: 0; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s5) 0; text-align: center; color: var(--ink-2); }
.empty-state > * { margin: 0; }

/* -- filters card (tenders) -- */
.filters { display: flex; flex-direction: column; gap: var(--s3); }
.filters > * { margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.more-filters > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--chip-h);
  padding: var(--s1) var(--btn-px-sm); border-radius: var(--radius-sm); color: var(--brand);
}
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after { content: "▾"; font-size: var(--fs-xs); transition: transform .12s; }
.more-filters[open] > summary::after { transform: rotate(180deg); }
.more-filters > summary:hover { background: var(--brand-soft); }
.more-filters[open] > summary { margin-bottom: var(--s3); }

/* -- FAQ accordion -- */
.faq-list { display: grid; background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius-lg); padding: 0 var(--s4); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .faq-list { padding: 0 var(--s5); } }
.faq-list details { border-top: var(--rule) solid var(--line); }
.faq-list details:first-child { border-top: 0; }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--ink-3); font-weight: 400; font-size: var(--fs-icon); line-height: 1.2; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 var(--s4); }
.faq-more { margin: var(--s3) 0 var(--s4); }

/* -- long-form Q&A (/faq) and guides (/guide/…) -- */
.faq-item > * { margin: 0; }
.faq-item > * + * { margin-top: var(--s2); }
.faq-item > h2 { font-size: var(--fs-h3); }
.prose > .faq-item + .faq-item { margin-top: var(--s5); padding-top: var(--s5); border-top: var(--rule) solid var(--line); }
.faq-item__answer { font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--s1); }
.glance ul { margin: 0; padding-left: 1.2em; }
.glance li + li { margin-top: var(--s1); }

/* -- disclosure panel (all raw fields) -- */
.fields-details > summary { padding: var(--s1) 0; }
.fields-details[open] > summary { margin-bottom: var(--s3); }

/* -- steps (numbered cards) -- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
@media (min-width: 768px) { .steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li {
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4);
  background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .steps li { padding: var(--s5); } }
.steps--grid li { flex-direction: row; align-items: flex-start; gap: var(--s3); font-size: var(--fs-ui); }
@media (min-width: 768px) { .steps--grid li { padding: var(--s4); } }
.steps__n {
  flex: none; display: inline-grid; place-items: center; width: var(--icon); height: var(--icon); border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: var(--fs-ui);
}
.steps--grid .steps__n { width: var(--icon-sm); height: var(--icon-sm); font-size: var(--fs-xs); }

/* -- preview boxes (landing) -- */
.preview__box { gap: var(--s3); }
.preview__head { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); padding-bottom: var(--s3); border-bottom: var(--rule) solid var(--line); }
.preview__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s3); }
.preview__list a { display: block; font-weight: 600; text-decoration: none; color: var(--ink); }
.preview__list a:hover { color: var(--brand); text-decoration: underline; }
.preview__name { font-size: var(--fs-h3); font-weight: 600; }
.preview__name a { text-decoration: none; }

/* -- pricing cards -- */
.price-value-line { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.price-anchor { display: none; margin: 0 0 var(--s3); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) { .price-anchor { display: block; } }
.fine-print { margin: var(--s4) 0 0; padding-left: var(--s4); display: grid; gap: var(--s1); max-width: none; }
.price-grid { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.price-card {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--bg); border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
}
.price-card > * { margin: 0; }
.price-card--popular { border: 2px solid var(--brand); box-shadow: var(--shadow); }
.price-card__badge { align-self: flex-start; }
.price-card__name { font-size: var(--fs-h3); }
.price-card__price { padding-bottom: var(--s3); border-bottom: var(--rule) solid var(--line); }
.price-card__price strong { font-size: var(--fs-price); font-weight: 600; font-variant-numeric: tabular-nums; }
.price-card__price span { color: var(--ink-2); font-size: var(--fs-sm); }
.price-card--popular .price-card__price strong { color: var(--brand); }
.price-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); color: var(--ink-2); font-size: var(--fs-ui); }
.price-card__features li { position: relative; padding-left: 1.6em; }
.price-card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 600; }
.price-card .btn, .price-card summary { width: 100%; }
.price-card > .btn:last-child, .price-card > .waitlist { margin-top: auto; }  /* CTAs line up across cards */
.waitlist > summary { list-style: none; }
.waitlist > summary::-webkit-details-marker { display: none; }
.waitlist[open] > summary { margin-bottom: var(--s3); }
.waitlist summary:hover { color: var(--brand); }

/* -- quote / story -- */
.story { max-width: 64ch; }

/* -- CTA band and final CTA -- */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5); padding: var(--s5);
  background: var(--brand-soft); border: var(--rule) solid var(--brand-line); border-radius: var(--radius-lg);
}
.cta-band__text { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--s1); }
.cta-band__text > * { margin: 0; }
.cta-band__title { font-size: var(--fs-h3); font-weight: 600; }
@media (max-width: 520px) { .cta-band .btn { width: 100%; } }
.cta-final {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s7) var(--s4); text-align: center;
  background: var(--brand); color: var(--on-dark); border-radius: var(--radius-lg);
}
.cta-final > * { margin: 0; }
.cta-final h2 { color: var(--on-dark); }
.cta-final .muted { color: var(--on-dark-muted); max-width: 52ch; }
.cta-final .btn--primary { background: var(--bg); color: var(--brand); }
.cta-final .btn--primary:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* -- sticky mobile CTA -- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--bg); border-top: var(--rule) solid var(--line); box-shadow: var(--shadow-up);
  transition: transform .15s ease;
}
.sticky-cta .btn { min-height: 44px; /* tap target = --control-h; literal kept for tests */ }
.sticky-cta--hidden { transform: translateY(100%); visibility: hidden; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
@media (max-width: 767px) { body:has(.sticky-cta) { padding-bottom: 72px; } }

/* -- alert box: inline daily-alert sign-up on data pages (ui.alert_box) -- */
.alert-box { border-left: var(--rule-accent) solid var(--brand); }
.alert-box__form { display: flex; flex-direction: column; gap: var(--s3); }
.alert-box__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
/* one alert CTA at a time: the header button steps back while the box is on screen */
.alert-box-in-view .header-cta { visibility: hidden; }

/* ==== 5. pages (compositions that exist once) ========================= */

/* landing hero: intro + search left, alert form right */
.hero { display: grid; gap: var(--s5); padding-top: var(--s4); }
.hero > * { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s7); align-items: start; padding-top: var(--s6); }
  .hero__intro { grid-column: 1; grid-row: 1; }
  .hero .alert-cta { grid-column: 2; grid-row: 1 / span 2; }
  .hero__search { grid-column: 1; grid-row: 2; }
  .hero__stats { grid-column: 1 / -1; padding-top: var(--s4); }
}
.hero h1 { font-size: var(--fs-display); line-height: 1.22; }
.hero__sub { color: var(--ink-2); font-size: var(--fs-lg); max-width: 52ch; }
.hero__brief { color: var(--ink-2); }
.hero .search-bar .input, .hero .search-bar .select { background: var(--bg); }
/* alert form card (hero, competitor unlock) */
.alert-cta { padding: var(--s5) var(--s4); box-shadow: var(--shadow); }
@media (min-width: 900px) { .alert-cta { padding: var(--s6); } }
.alert-cta .btn { width: 100%; min-height: var(--control-h-lg); }

/* bid brief: price band visual */
.band-card { display: flex; flex-direction: column; gap: var(--s1); border: var(--rule) solid var(--accent-line); background: var(--accent-soft); border-radius: var(--radius-lg); padding: var(--panel-pad); }
.band-card > * { margin: 0; }
.band-card__range { font-size: var(--fs-kpi); font-weight: 600; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.band-card__sub { color: var(--ink-2); font-size: var(--fs-ui); }
.band-card__note { font-size: var(--fs-sm); color: var(--ink-2); padding-top: var(--s2); }
.band-viz { --track-y: 38px; --track-h: 8px; --iqr-h: 16px; --median-h: 28px; position: relative; height: 84px; margin-top: var(--s3); }
.band-viz__track { position: absolute; left: 0; right: 0; top: var(--track-y); height: var(--track-h); border-radius: var(--s1); background: rgba(0, 0, 0, .08); }
.band-viz__iqr { position: absolute; left: 25%; right: 25%; top: calc(var(--track-y) - (var(--iqr-h) - var(--track-h)) / 2); height: var(--iqr-h); border-radius: var(--s1); background: var(--accent); }
.band-viz__median { position: absolute; top: calc(var(--track-y) - (var(--median-h) - var(--track-h)) / 2); width: var(--s1); height: var(--median-h); margin-left: calc(var(--s1) / -2); border-radius: var(--s-half); background: var(--ink); box-shadow: 0 0 0 2px var(--accent-soft); }
.band-viz__tag { position: absolute; top: calc(var(--track-y) + var(--track-h) + var(--s3)); transform: translateX(-50%); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.band-viz__tag--top { top: 0; color: var(--ink); font-weight: 600; }
/* bid brief: locked preview */
.peek { padding: var(--s3) var(--s4); background: var(--bg-2); border-radius: var(--radius); border: var(--rule) solid var(--line); display: grid; gap: var(--s1); }
.peek__row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; margin: 0; }
.peek__label { min-width: 10em; color: var(--ink-2); font-size: var(--fs-sm); }
.blur { filter: blur(4px); user-select: none; }
.pay-steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s1); }
.pay-number { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pay-number code { font-size: var(--fs-md); font-weight: 600; }
.divided { padding-top: var(--s4); border-top: var(--rule) solid var(--line); }

/* place pages: generated summary sentence */
.summary-text { font-size: var(--fs-md); line-height: 1.7; max-width: var(--measure); color: var(--ink-2); }

/* ==== 6. utilities ===================================================== */
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.strong { font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.break-anywhere { overflow-wrap: anywhere; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s3); top: var(--s3); z-index: 60; background: var(--brand); color: var(--brand-ink); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); }

.print-brand { display: none; }
@media print {
  .print-brand { display: flex; align-items: center; gap: var(--s3); font-weight: 600; color: var(--brand); }
  .print-brand img { width: 32px; height: 32px; }
  .site-header, .site-footer, .btn, .pager, .no-print, .sticky-cta { display: none; }
  body { font-size: 12pt; background: var(--bg); }
}

/* -- tender page: key facts as tiles, the rest folded -- */
.stats--3 { margin-bottom: var(--s3); }
.tender-where { margin: 0 0 var(--s3); }
.more-info > summary { cursor: pointer; padding: var(--s2) 0; }

/* -- tenders list: calmer rows, and the chip filters fold on phones -- */
.tender-rows .row__title { font-weight: 500; font-size: var(--fs-ui); }
@media (min-width: 768px) {
  .filters-fold > summary { display: none; }
  .tender-rows .row__title { font-size: var(--fs-md); }
}

/* -- polish (ux review 2026-10-26) -- */
.panel > .stats, .section > .stats { margin-bottom: var(--s4); }
.upcoming-rows .row__title { color: var(--ink-2); font-weight: 500; }
.upcoming-rows .row__title--planned .badge { margin-right: var(--s1); vertical-align: 1px; }
.page-header__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
@media (max-width: 640px) {
  .page-header__aside { width: 100%; }
  .page-header__aside > .btn { flex: 1 1 auto; }
}
.band-card .band-viz { margin-top: var(--s4); margin-inline: var(--s3); }
.band-card .band-viz__tag--top { top: 0; }
.site-footer__inner > div:last-child ul { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); column-gap: var(--s4); }