/* The public site's stylesheet: the marketing pages (landing.html) and the
   public tender pages (public-tenders.html). Moved out of landing.html's
   inline <style> so both share one cached file. */
/* ---- page inks: measured on #070a0e, the darkest surface -------------
   --ink2 ≈ 10.9:1 · --ink3 ≈ 6.1:1. Nothing on this page relies on the
   app's --mut (4.0:1 here — the audit's failures were all --mut). */
.land {
  --page:#070a0e; --panel:#10151c; --panel-2:#171e27; --edge:#232b36;
  --ink:#f2f5f8; --ink2:#c3ccd6; --ink3:#9aa6b3;
  background:var(--page); color:var(--ink2);
  font-size:16px; line-height:1.65; overflow-x:clip;
  /* One vertical rhythm for every section, so the page reads as one
     document rather than a stack of differently padded slabs. */
  --sec:80px;
}
@media (max-width:700px) { .land { --sec:56px; } }
html { overflow-x:clip; }
.land section { position:relative; }
.land-wrap { max-width:1140px; margin-inline:auto; padding:0 28px; }
.land h1, .land h2, .land h3 { color:var(--ink); letter-spacing:-.025em; }
.land h2 { font-size:clamp(28px, 3.6vw, 38px); line-height:1.18; margin:0 0 14px; text-wrap:balance; }
.lede { color:var(--ink2); font-size:17px; line-height:1.65; margin:0 0 26px; }
.cap { color:var(--ink3); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; }

/* ---- nav -------------------------------------------------------------- */
.lnav { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--page) 78%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06); }
.lnav-in { max-width:1140px; margin-inline:auto; padding:0 28px; height:62px;
  display:flex; align-items:center; gap:24px; flex-wrap:nowrap; min-width:0; }
/* .lnav-in's gap is shared by every item in the bar; this cancels most of
   it just between the mark and its wordmark, same reasoning as .brand in
   app.css — a compact single word needs to sit close to its icon. */
.lnav .brand { font-size:17px; color:var(--ink); margin-inline-start:-16px; }
.lnav-links { display:flex; gap:2px; margin-left:6px; }
.lnav-links a { color:var(--ink2); text-decoration:none; font-size:14.5px;
  padding:8px 12px; border-radius:var(--radius-pill); }
.lnav-links a:hover { color:var(--ink); background:var(--panel-2); }
.lnav .spacer { flex:1; }
.btn-solid { display:inline-flex; align-items:center; gap:8px;
  background:var(--acc); color:var(--acc-fg); border-radius:var(--radius-pill);
  padding:11px 22px; font-size:15px; font-weight:640; text-decoration:none;
  box-shadow:0 6px 26px -8px var(--acc); transition:background .13s; }
.btn-solid:hover { background:var(--acc-hi); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px;
  color:var(--ink2); border:1px solid var(--edge); border-radius:var(--radius-pill);
  padding:11px 22px; font-size:15px; font-weight:560; text-decoration:none; }
.btn-ghost:hover { border-color:var(--acc); color:var(--acc-hi); }
.lnav .btn-solid, .lnav .btn-ghost { padding:8px 17px; font-size:14px;
  white-space:nowrap; }
/* The section links are the only droppable thing in the bar; the brand,
   the language picker and both buttons are not. They go first, and they
   go while the bar still fits rather than after it has already spilled. */
@media (max-width:1040px) { .lnav-links { display:none; } }
@media (max-width:620px) { .lnav .btn-ghost { display:none; } }
/* The phone menu: below 1040px the section links (and, below 620px, Sign
   in) leave the bar, so a button opens them in a panel under it. A native
   <button> with aria-expanded, Escape to close, no framework. */
.lnav-menu { display:none; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; border:1px solid var(--edge);
  border-radius:var(--radius-pill); background:transparent; color:var(--ink);
  cursor:pointer; padding:0; }
.lnav-menu:hover { border-color:var(--acc); }
.lnav-menu:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.lnav-menu svg { width:18px; height:18px; }
.lnav-menu .x { display:none; }
.lnav-menu[aria-expanded="true"] .bars { display:none; }
.lnav-menu[aria-expanded="true"] .x { display:block; }
@media (max-width:1040px) { .lnav-menu { display:inline-flex; } }
.lnav-panel { border-top:1px solid var(--edge); background:var(--page);
  padding:10px 14px 16px; }
.lnav-panel[hidden] { display:none; }
.lnav-panel ul { list-style:none; margin:0 auto; padding:0; max-width:1140px; }
.lnav-panel a { display:block; padding:12px 12px; color:var(--ink);
  text-decoration:none; font-size:16px; border-radius:var(--radius-sm); }
.lnav-panel a:hover, .lnav-panel a:focus-visible { background:var(--panel-2); }
.lnav-panel .signin { margin-top:6px; border-top:1px solid var(--edge);
  padding-top:8px; }
@media (min-width:1041px) { .lnav-panel { display:none; } }
/* Measured at 390px (Playwright, 2026-09-23): logo, language, "Start
   scouting" and the menu button overflowed the bar by 9px in German. On
   the narrowest phones the CTA moves into the menu (and stays in the hero
   right below). */
.lnav-panel .cta { display:none; }
@media (max-width:420px) {
  .lnav .lnav-in > .btn-solid { display:none; }
  .lnav-panel .cta { display:block; }
  .lnav-panel .cta a { color:var(--acc-hi); font-weight:640; }
}
/* Phone widths: the bar holds three things; tighter gaps and padding keep
   "Sign in" on one line and the CTA inside the viewport. */
@media (max-width:480px) {
  .lnav-in { padding:0 14px; gap:10px; }
  /* The brand's pull must follow the gap: -16px against a 10px gap put
     the wordmark 6px INTO the logo. 10 - 2 = the desktop's 8px. */
  .lnav .brand { margin-inline-start:-2px; }
  .lnav .btn-solid, .lnav .btn-ghost { padding:7px 12px; font-size:13px; }
}

/* ---- hero: editorial left, radar + queue right ------------------------ */
.hero { padding:74px 0 40px; overflow:hidden; }
.hero-in { max-width:1300px; margin-inline:auto; padding:0 28px;
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:56px;
  align-items:center; }
@media (max-width:1120px) { .hero-in { grid-template-columns:minmax(0,1fr); gap:44px; } }
/* Beside the text, the hero sits on the page grid (1140, like the nav and
   every section): at 1300 its headline started 80px left of the logo and
   the mock ended 80px past the nav's last button. The 640px mock is drawn
   at 7/8 (zoom scales its fixed-px cursor path with it, which a width
   change would not) and the gap is 40, so the headline keeps its 3 lines.
   Stacked (<=1120px) nothing changes. */
@media (min-width:1121px) {
  .hero-in { max-width:1140px; gap:40px; }
  .hero .scope { zoom:.875; }
}
.hero h1 { font-size:clamp(36px, 4.4vw, 52px); line-height:1.13;
  font-weight:740; margin:18px 0 20px; max-width:15ch; }
.hero h1 .n { color:var(--acc-hi); font-variant-numeric:tabular-nums; }
.hero-proof { margin:0 0 12px; max-width:44ch; font-size:19px; font-weight:600;
  line-height:1.45; color:var(--ink); }
.hero-proof .n { color:var(--acc-hi); font-variant-numeric:tabular-nums; }
.hero .lede { max-width:50ch; font-size:18px; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 18px; }
.hero-trust { display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  color:var(--ink3); font-size:14.5px; }
.hero-trust .dpill { font-size:13px; font-weight:700; padding:3px 11px;
  border-radius:var(--radius-pill); font-variant-numeric:tabular-nums; }
.dp0 { background:var(--d0); color:var(--d0fg); }
.dp7 { background:var(--d7); color:var(--d7fg); }

/* the radar the queue sits on */
.scope { position:relative; width:640px; }
.rings { position:absolute; inset:-120px; pointer-events:none; }
.rings::before { content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 158px, rgba(247,42,52,.16) 159px, transparent 162px),
    radial-gradient(circle at 50% 50%, transparent 268px, rgba(247,42,52,.12) 269px, transparent 272px),
    radial-gradient(circle at 50% 50%, transparent 378px, rgba(247,42,52,.09) 379px, transparent 382px),
    radial-gradient(circle at 50% 50%, transparent 438px, rgba(255,255,255,.05) 439px, transparent 442px); }
.sweep { position:absolute; inset:0;
  background:conic-gradient(from 0deg, rgba(247,42,52,.15), transparent 22%);
  -webkit-mask:radial-gradient(circle, #000 440px, transparent 441px);
  mask:radial-gradient(circle, #000 440px, transparent 441px);
  animation:sweep 9s linear infinite; }
@keyframes sweep { to { transform:rotate(360deg); } }
.blip { position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--acc-hi); box-shadow:0 0 10px 2px var(--acc-ring);
  opacity:.15; animation:blip 9s linear infinite; }
@keyframes blip {
  0% { opacity:.15; } 8% { opacity:1; transform:scale(1.5); }
  30%, 100% { opacity:.15; transform:scale(1); }
}

/* ---- the living queue (choreography engine from round one) ------------ */
.qframe { position:relative; width:640px; border-radius:14px; text-align:start;
  border:1px solid var(--edge); background:var(--panel);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85), 0 0 70px -30px var(--acc-ring);
  overflow:hidden; }
@media (max-width:1120px) { .scope { margin-inline:auto; } }
.qchrome { height:38px; display:flex; align-items:center; gap:6px; padding:0 14px;
  border-bottom:1px solid var(--edge); }
.qdot { width:9px; height:9px; border-radius:50%; background:var(--panel-2); }
.qurl { margin:0 auto; background:var(--panel-2); border-radius:var(--radius-pill);
  color:var(--ink3); font-size:12.5px; padding:4px 16px; }
.qhead { height:40px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; font-size:13.5px; color:var(--ink2);
  border-bottom:1px solid var(--edge); }
.qhead b { color:var(--ink); font-variant-numeric:tabular-nums; }
.qchip { position:relative; display:inline-flex; align-items:center; gap:6px;
  background:var(--panel-2); border:1px solid var(--edge);
  border-radius:var(--radius-pill); padding:4px 13px; font-size:13px;
  color:var(--ink2); animation:chippulse 14s linear infinite; }
@keyframes chippulse {
  23.6% { box-shadow:0 0 0 0 transparent; }
  25.5% { box-shadow:0 0 0 4px var(--acc-ring); }
  29.3%, 100% { box-shadow:0 0 0 0 transparent; }
}
.qcount { display:inline-block; height:1em; overflow:hidden; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink); font-weight:640; }
.qcount span { display:block; animation:countflip 14s linear infinite; }
@keyframes countflip {
  0%, 23.6% { transform:translateY(0); }
  29.3%, 97% { transform:translateY(-1em); }
  100% { transform:translateY(0); }
}
.qplus { position:absolute; right:-6px; top:-5px; color:var(--acc-hi);
  font-size:13px; font-weight:700; opacity:0; animation:plusfloat 14s linear infinite; }
@keyframes plusfloat {
  0%, 23.6% { opacity:0; transform:translateY(0); }
  26% { opacity:1; }
  29.3%, 100% { opacity:0; transform:translateY(-14px); }
}
.qlist { padding:6px 0 10px; animation:qreset 14s linear infinite;
  /* + the 16px of padding: app.css sizes every box as border-box. */
  min-height:calc(var(--qrows, 5) * 54px + 16px); }
@keyframes qreset { 0% { opacity:0; } 1.5%, 97% { opacity:1; } 100% { opacity:0; } }
.qrow { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px;
  align-items:center; height:54px; max-height:54px; padding:0 16px;
  animation:14s linear infinite; overflow:hidden; }
.qpill { width:46px; text-align:center; border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:700; padding:5px 0; font-variant-numeric:tabular-nums; }
.qp0 { background:var(--d0); color:var(--d0fg); }
.qp7 { background:var(--d7); color:var(--d7fg); }
.qp30 { background:var(--d30); color:var(--d30fg); }
.qpfar { background:var(--dfar); color:var(--dfarfg); }
.qt { min-width:0; }
.qt b { display:block; color:var(--ink); font-size:14.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.008em; }
.qt span { display:block; color:var(--ink3); font-size:12.5px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qclaim { background:var(--acc); color:var(--acc-fg); border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:640; padding:6px 14px; }
.qghost { border:1px solid var(--edge); color:var(--ink2);
  border-radius:var(--radius-sm); font-size:12.5px; padding:5px 12px; }
.r1 { animation-name:rin1; } .r3 { animation-name:rin3; } .r5 { animation-name:rin5; }
@keyframes rin1 { 0% { opacity:0; transform:translateY(14px); }
  3.9%, 100% { opacity:1; transform:none; } }
@keyframes rin3 { 0%, 3.6% { opacity:0; transform:translateY(14px); }
  7.5%, 100% { opacity:1; transform:none; } }
@keyframes rin5 { 0%, 7.1% { opacity:0; transform:translateY(14px); }
  11%, 100% { opacity:1; transform:none; } }
.r2 { animation-name:row2; }
@keyframes row2 {
  0%, 1.8% { opacity:0; transform:translateY(14px); max-height:54px; }
  5.7% { opacity:1; transform:none; }
  22.1% { opacity:1; transform:none; max-height:54px; }
  27.1% { opacity:0; transform:translate(48px,-36px) scale(.92); max-height:54px; }
  30%, 100% { opacity:0; max-height:0; }
}
.r2 .qclaim { animation:press2 14s linear infinite; }
@keyframes press2 { 0%, 20% { transform:none; }
  20.7% { transform:scale(.94); background:var(--acc-hi); }
  21.4%, 100% { transform:none; } }
.r4 { animation-name:row4; }
@keyframes row4 {
  0%, 5.4% { opacity:0; transform:translateY(14px); max-height:54px; }
  9.3% { opacity:1; transform:none; }
  46.4% { opacity:1; transform:none; filter:none; max-height:54px; }
  50.7% { opacity:0; transform:translateX(-40px); filter:grayscale(1); max-height:54px; }
  53.6%, 100% { opacity:0; max-height:0; }
}
.r4 .qghost { animation:press4 14s linear infinite; }
@keyframes press4 { 0%, 44.3% { transform:none; }
  45% { transform:scale(.94); border-color:var(--acc); color:var(--acc-hi); }
  45.7%, 100% { transform:none; } }
.r6 { opacity:0; max-height:0; animation-name:row6; }
@keyframes row6 { 0%, 31.4% { opacity:0; max-height:0; }
  35%, 100% { opacity:1; max-height:54px; } }
.r7 { opacity:0; max-height:0; animation-name:row7; }
@keyframes row7 { 0%, 54.3% { opacity:0; max-height:0; }
  57.9%, 100% { opacity:1; max-height:54px; } }
.qcursor { position:absolute; left:0; top:0; opacity:0; z-index:5;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:cursor 14s linear infinite; pointer-events:none; }
@keyframes cursor {
  0%, 14.3% { opacity:0; transform:translate(540px,330px); }
  15.7% { opacity:1; }
  20% { opacity:1; transform:translate(508px,122px) scale(1); }
  20.7% { transform:translate(508px,122px) scale(.85); }
  21.4% { transform:translate(508px,122px) scale(1); }
  38.6% { opacity:1; transform:translate(478px,222px) scale(1); }
  45% { transform:translate(478px,222px) scale(.85); }
  45.7% { transform:translate(478px,222px) scale(1); }
  59.3% { opacity:1; transform:translate(620px,430px); }
  65%, 100% { opacity:0; transform:translate(620px,430px); }
}
.qtoast { position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  background:var(--panel-2); border:1px solid var(--acc-ring);
  border-radius:var(--radius-pill); padding:9px 17px; font-size:13.5px;
  color:var(--ink); opacity:0; animation:toast 14s linear infinite; z-index:4; }
.qtoast .u { color:var(--ink3); }
@keyframes toast {
  0%, 49.3% { opacity:0; transform:translate(-50%,10px); }
  52.9% { opacity:1; transform:translate(-50%,0); }
  72.9% { opacity:1; transform:translate(-50%,0); }
  77.1%, 100% { opacity:0; transform:translate(-50%,10px); }
}
@media (max-width:700px) {
  .hero { padding-top:52px; }
  .rings, .sweep { display:none; }
  .qwrap-m { overflow:clip; display:flex; justify-content:center; }
  .qscale { width:640px; flex:none; transform-origin:top center;
    transform:scale(.75); margin-bottom:-100px; }
}
@media (max-width:520px) { .qscale { transform:scale(.6); margin-bottom:-160px; } }
@media (max-width:420px) { .qscale { transform:scale(.55); margin-bottom:-182px; } }


/* ---- coverage: where ScoutTide looks ------------------------------------
   Live, from the open corpus (LandingCoverage), grouped into seven World
   Bank regions. Cards are the scannable answer; the full country list is
   one click down so it never costs a phone reader 150 rows of scrolling. */
.cov { padding:var(--sec) 0; background:var(--panel);
  border-block:1px solid rgba(255,255,255,.05); }
.cov-head { max-width:62ch; }
.cov-head .lede { margin-bottom:0; }
.cov-sum { display:flex; flex-wrap:wrap; gap:12px 40px; margin:30px 0 30px;
  padding:18px 22px; border:1px solid var(--edge); border-radius:var(--radius);
  background:var(--page); }
.cov-sum > div { display:flex; align-items:baseline; gap:9px; }
.cov-sum b { font-size:28px; font-weight:720; color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cov-sum span { color:var(--ink3); font-size:14.5px; }
.cov-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.cov-card.intl .cov-top { margin-bottom:12px; }
@media (max-width:1000px) { .cov-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .cov-grid { grid-template-columns:minmax(0,1fr); gap:12px; } }
.cov-card, .cov-box { background:var(--page); border:1px solid var(--edge);
  border-radius:14px; padding:18px 18px 16px; min-width:0; }
.cov-card h3, .cov-box h3 { font-size:16.5px; margin:0 0 12px; letter-spacing:-.01em; }
.cov-meta { display:flex; gap:22px; margin:0 0 14px; padding-bottom:14px;
  border-bottom:1px solid var(--edge); }
.cov-meta dt { color:var(--ink3); font-size:12.5px; font-weight:600; }
.cov-meta dd { margin:2px 0 0; color:var(--ink); font-size:18px; font-weight:700;
  font-variant-numeric:tabular-nums; }
.cov-l { color:var(--ink3); font-size:12.5px; font-weight:600; margin:0 0 4px; }
.cov-portals { list-style:none; margin:0 0 14px; padding:0; }
.cov-portals li { display:flex; gap:10px; align-items:baseline; padding:3px 0;
  font-size:14px; color:var(--ink); }
/* Up to two lines: the portal names ARE the proof this section exists
   for ("Asian Infrastructure Invest…" hid whose portal it was). */
.cov-portals .nm { flex:1 1 auto; min-width:0; overflow:hidden;
  white-space:normal; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; line-height:1.35; }
.cov-portals .n, .cov-all .n { flex:none; color:var(--ink3); font-size:13.5px;
  font-variant-numeric:tabular-nums; }
.cov-top { margin:0; color:var(--ink2); font-size:14px; line-height:1.55; }
.cov-more { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:16px; margin-top:16px; }
.cov-box p { margin:0 0 12px; color:var(--ink2); font-size:14.5px; line-height:1.6; }
.cov-box p:last-child { margin-bottom:0; }
.cov-box.add { border-style:dashed; }
.cov-all { margin-top:22px; border:1px solid var(--edge); border-radius:14px;
  background:var(--page); padding:0 20px; }
.cov-all summary { cursor:pointer; list-style:none; padding:16px 0; color:var(--ink);
  font-weight:620; font-size:15.5px; display:flex; align-items:center; }
.cov-all summary::-webkit-details-marker { display:none; }
.cov-all summary::after { content:"+"; margin-inline-start:auto; color:var(--ink3);
  font-size:20px; font-weight:400; }
.cov-all[open] summary::after { content:"\00d7"; }
.cov-all-in { padding:4px 0 18px; display:grid; gap:20px; }
.cov-gh { color:var(--ink); font-weight:650; font-size:14.5px; margin-bottom:8px; }
.cov-g ul { list-style:none; margin:0; padding:0; columns:4 190px; column-gap:28px; }
.cov-g li { display:flex; gap:8px; align-items:baseline; break-inside:avoid;
  padding:3px 0; font-size:14px; color:var(--ink2); }
.cov-g li span:first-child { flex:1; min-width:0; }
/* A country link was 23px tall, and a short Arabic name 21px wide, under a
   thumb (WCAG 2.5.8 asks 24 each way). */
.cov-g li > a { min-height:24px; min-width:24px; display:inline-flex; align-items:center; }
/* A phone reader gets the answer (region, totals, the three biggest
   portals) and the rest on demand. */
@media (max-width:640px) {
  .cov-sum { gap:8px 22px; padding:14px 16px; }
  .cov-sum b { font-size:22px; }
  .cov-portals li:nth-child(n+4) { display:none; }
  /* The country names are one tap away in the full list below. */
  .cov-card:not(.intl) .cov-top, .cov-card:not(.intl) .cov-l.top { display:none; }
  .cov-card .cov-portals { margin-bottom:0; }
  .cov-card h3 { margin-bottom:8px; }
  .cov-meta { gap:18px; margin-bottom:10px; padding-bottom:10px; }
  .cov-meta > div { display:flex; align-items:baseline; gap:6px; }
  .cov-meta dd { font-size:15px; margin:0; }
  .cov-portals li:nth-child(n+3) { display:none; }
  .cov-sum { flex-direction:column; }
  /* The plan cards above already list every one of these rows; on a
     phone, where the cards stack, the table only repeats them. */
  .scale { display:none; }
  .cov-card { padding:16px 16px 14px; }
  .cov-top { font-size:14px; }
}

/* ---- the morning timeline ---------------------------------------------- */
.morning { padding:var(--sec) 0; }
.tl { position:relative; display:grid; grid-template-columns:repeat(4, 1fr);
  gap:22px; margin-top:48px; }
.tl::before { content:""; position:absolute; top:9px; left:2%; right:2%;
  height:2px; background:linear-gradient(90deg, var(--acc), var(--edge)); }
.tl-stop { position:relative; padding-top:34px; }
.tl-stop::before { content:""; position:absolute; top:2px; left:0;
  width:16px; height:16px; border-radius:50%; background:var(--page);
  border:3px solid var(--acc); }
.tl-time { font-size:14px; font-weight:700; color:var(--acc-hi);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.tl-stop h3 { font-size:18px; margin:6px 0 8px; }
.tl-stop p { margin:0; color:var(--ink2); font-size:15.5px; line-height:1.6; }
@media (max-width:860px) {
  .tl { grid-template-columns:1fr; gap:30px; }
  .tl::before { top:2%; bottom:2%; left:7px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--acc), var(--edge)); }
  .tl-stop { padding-top:0; padding-left:38px; }
  .tl-stop::before { top:4px; }
}

/* ---- feature rows ------------------------------------------------------ */
.feat { padding:var(--sec) 0; }
.feat.alt { background:var(--panel); border-block:1px solid rgba(255,255,255,.05); }
.feat-in { max-width:1140px; margin-inline:auto; padding:0 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width:900px) { .feat-in { grid-template-columns:minmax(0,1fr); gap:34px; } }
/* The mock sits level with the heading and stays in view while the
   bullets beside it are read. Centred against a long text column it
   floated a screen below the heading with a gap above it. */
@media (min-width:901px) {
  .feat-card { position:sticky; top:104px; padding-top:30px; }
}
/* On a phone the mocks that only illustrate the bullets above them are
   left out: they doubled the page's length and said nothing new. The AI
   match mock stays, because its reasoning panel IS the claim. */
@media (max-width:700px) { .feat-card.deco { display:none; } }
.feat-in.flip > .feat-card { order:-1; }
@media (max-width:900px) { .feat-in.flip > .feat-card { order:0; } }
.blts { list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.blts li { display:grid; grid-template-columns:24px 1fr; gap:12px; }
.blts .ck { color:var(--acc-hi); font-weight:800; font-size:16px; }
.blts b { display:block; color:var(--ink); font-size:16.5px; margin-bottom:3px; }
.blts span { color:var(--ink2); font-size:15.5px; line-height:1.6; }

/* mockup panels: straight, calm, readable */
.mock { max-width:480px; margin-inline:auto; border-radius:14px;
  border:1px solid var(--edge); padding:20px; background:var(--panel);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7); overflow:hidden; }
.feat.alt .mock { background:var(--page); }
.mock-h { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mock-h .cap { font-size:12.5px; }
.mock-h .right { margin-inline-start:auto; color:var(--ink3); font-size:13px; }
.srow { display:flex; align-items:center; gap:10px; padding:7px 2px;
  font-size:14.5px; color:var(--ink); }
.srow .g { width:23px; height:23px; border-radius:6px; background:var(--panel-2);
  color:var(--ink2); font-size:10.5px; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; flex:none; }
.srow .n { margin-inline-start:auto; color:var(--ink2); font-variant-numeric:tabular-nums;
  font-size:13.5px; flex:none; }
/* A row is one line. "Vietnam VNEPS (muasamcong)" wrapped on a phone and
   made its row 62px against its neighbours' 38px, which reads as the count
   having slipped out of line even though it was still correctly placed.
   The name is the only part allowed to give way. */
.srow .nm { flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.srow .pbm { flex:none; }
.srow .pbm { font-size:10.5px; font-weight:750; text-transform:uppercase;
  letter-spacing:.04em; background:var(--panel-2); color:var(--ink3);
  border:1px solid var(--edge); border-radius:var(--radius-xs); padding:1.5px 6px; }
.snote { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--edge);
  color:var(--ink2); font-size:14px; }
.snote .pill { background:var(--acc-soft); color:var(--acc-hi);
  border:1px solid var(--acc-ring); border-radius:var(--radius-pill);
  padding:2px 11px; font-size:13px; font-weight:640; }

.xrow { display:flex; gap:10px; align-items:center; padding:8px 2px;
  color:var(--ink3); font-size:14.5px; }
.xrow .x { font-weight:700; }
.lrule { display:flex; flex-direction:column; gap:3px; margin-top:12px;
  background:var(--panel-2); border-inline-start:3px solid var(--acc);
  border-radius:var(--radius-sm); padding:12px 15px; }
.lrule b { color:var(--ink); font-size:15px; }
.lrule span { color:var(--ink2); font-size:13.5px; }
.tick { display:inline-block; height:1em; overflow:hidden; line-height:1;
  vertical-align:-2px; }
.tick span { display:block; animation:ticku 8s linear infinite; }
@keyframes ticku { 0%, 45% { transform:translateY(0); }
  50%, 96% { transform:translateY(-1em); } 100% { transform:translateY(-1em); } }

.board { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
/* Two columns of the four on a phone: four lanes of ellipsis are noise. */
@media (max-width:520px) { .board { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.bcol .bl { font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:9px; }
.bcol .bl b { color:var(--ink); margin-left:4px; }
.bcard { display:flex; align-items:center; gap:6px; background:var(--panel-2);
  border:1px solid var(--edge); border-radius:var(--radius-sm);
  padding:8px 9px; margin-bottom:6px; font-size:12.5px; color:var(--ink2);
  white-space:nowrap; overflow:hidden; }
.bcard.you { border-inline-start:2px solid var(--acc); }
.bcard .av { width:18px; height:18px; border-radius:50%; background:var(--edge);
  color:var(--ink2); font-size:10px; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; flex:none; margin-inline-start:auto; }
.wrate { display:flex; align-items:center; gap:12px; margin-top:14px;
  padding-top:13px; border-top:1px solid var(--edge); font-size:14.5px;
  color:var(--ink2); }
.wrate b { color:var(--ink); font-size:17px; }
.wbar { flex:1; height:5px; background:var(--panel-2); border-radius:3px;
  overflow:hidden; }
.wbar i { display:block; height:100%; width:38%; background:var(--acc);
  border-radius:3px; transform-origin:left; transform:scaleX(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1) .2s; }
.in .wbar i { transform:scaleX(1); }
html:not(.js) .wbar i { transform:scaleX(1); }

.drow { display:flex; align-items:center; gap:10px; padding:7px 2px;
  font-size:14px; color:var(--ink2); }
.drow b { color:var(--ink); font-weight:600; font-size:14.5px; }
.dv { font-size:10.5px; font-weight:750; text-transform:uppercase;
  background:var(--panel-2); color:var(--ink3); border:1px solid var(--edge);
  border-radius:var(--radius-xs); padding:2px 6px; }
.dok { background:var(--ok); color:var(--okfg); border-color:transparent; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.mdiv { height:1px; background:var(--edge); margin:9px 0; }
.dname { display:flex; flex-direction:column; min-width:0; flex:1; }
.dname b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsub { font-size:12.5px; color:var(--ink3); }
.dmore { margin-inline-start:auto; color:var(--ink3); letter-spacing:1px; font-weight:700;
  border:1px solid var(--edge); border-radius:var(--radius-xs); padding:0 7px; }
.dmenu { display:flex; gap:4px; margin:0 0 6px auto; width:max-content;
  background:var(--panel-2); border:1px solid var(--edge); border-radius:8px; padding:4px; }
.dmenu span { font-size:12.5px; color:var(--ink2); padding:4px 9px; border-radius:6px; }
.dmenu span:first-child { background:var(--panel); color:var(--ink); }
.dmenu .ddel { color:var(--acc-hi); }
.dlimit { font-size:12.5px; color:var(--ink3); padding:4px 2px 0; }
.dnote { display:flex; gap:10px; padding:6px 2px; font-size:14px; color:var(--ink2); }
.dnote b { color:var(--ink); font-weight:600; }
.dnote p { margin:3px 0 0; line-height:1.5; }
.dav { flex:none; width:28px; height:28px; border-radius:50%; background:var(--acc);
  color:var(--acc-fg); font-size:11.5px; font-weight:700; display:flex;
  align-items:center; justify-content:center; }

/* ---- comparison: one card, a straight split ---------------------------- */
.cmp { padding:var(--sec) 0; text-align:center; }
.cmp-card { display:grid; grid-template-columns:1fr 1fr;
  max-width:960px; margin:40px auto 0; text-align:start;
  border:1px solid var(--edge); border-radius:16px; overflow:hidden;
  background:var(--panel); }
@media (max-width:760px) { .cmp-card { grid-template-columns:1fr; } }
.cmp-col { padding:28px 30px; }
.cmp-col.good { background:linear-gradient(180deg,
  color-mix(in srgb, var(--acc) 9%, var(--panel)), var(--panel));
  border-inline-start:1px solid var(--edge); }
@media (max-width:760px) { .cmp-col.good { border-inline-start:0;
  border-top:1px solid var(--edge); } }
.cmp-col h3 { font-size:17px; margin:0 0 18px; }
.cmp-col.good h3 { color:var(--acc-hi); }
.cmp-col ul { list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.cmp-col li { display:grid; grid-template-columns:22px 1fr; gap:10px;
  font-size:15.5px; line-height:1.6; color:var(--ink2); }
.cmp-col .x { color:var(--ink3); font-weight:700; }
.cmp-col .c { color:var(--acc-hi); font-weight:800; }

/* ---- plans: two doors, equal weight ------------------------------------ */
.plans-sub { color:var(--ink3); font-size:15px; margin:10px auto 0; max-width:52ch; }
.plan { position:relative; }
.plan.feat { border-color:var(--acc); box-shadow:0 30px 70px -40px var(--acc-ring); }
.plan .ribbon { position:absolute; top:-13px; right:22px; background:var(--acc); color:var(--acc-fg);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill); }
.plan .trial { font-size:13px; color:var(--ink2); margin:-6px 0 14px; }
/* Quiet, factual line under the trial note — a differentiator, not a shout. */
.plan .noperuser { font-size:12.5px; color:var(--ink2); margin-top:6px; font-weight:600; }
.plan .founding { display:inline-block; font-size:12.5px; color:var(--acc-hi); background:var(--acc-soft);
  border:1px solid var(--acc-ring); border-radius:var(--radius-pill); padding:4px 11px; margin:0 0 12px; }
.plan li.hero { background:var(--acc-soft); border:1px solid var(--acc-ring);
  border-radius:var(--radius-sm); padding:11px 12px; }
.plan li.hero .c { color:var(--acc-hi); }
.plan li.hero b { color:var(--ink); }
.plan .micro { text-align:center; font-size:12px; color:var(--ink3); margin-top:10px; }
.scale { max-width:900px; margin:28px auto 0; background:var(--panel); border:1px solid var(--edge);
  border-radius:var(--radius); overflow:hidden; text-align:start; }
.scale-head { padding:14px 22px; border-bottom:1px solid var(--edge); }
/* SCOPED TO .scale, because .srow is also the sources mock's row class
   further up this stylesheet. Unscoped, this grid came later and therefore
   won everywhere: the mock's rows stopped being flex and became a
   three-column grid. The official-source rows have exactly three children
   and so merely lost their right-aligned count to a centred column, but
   the two "your feeds" rows have FOUR (icon, name, CUSTOM pill, count) —
   a fourth item in a three-column grid wraps to a second row, which is
   why the Reddit and LinkedIn numbers hung underneath their labels. */
.scale .srow { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:10px; padding:11px 22px;
  border-top:1px solid var(--edge); font-size:14px; color:var(--ink2); align-items:center; }
.scale .srow:first-of-type { border-top:0; }
.scale .srow > span:nth-child(2), .scale .srow > span:nth-child(3) { text-align:center;
  font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; }
.scale .srow .dim { color:var(--ink3); font-weight:500; }
.scale .srow .e { color:var(--acc-hi); }
.scale .srow.shead { background:var(--panel-2); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; }
.scale .srow.shead > span { color:var(--ink3); font-weight:600; }
.scale .srow small { color:var(--ink3); font-weight:500; }
@media (max-width:640px) { .scale .srow { grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; font-size:13px; } }
.plans { padding:var(--sec) 0; text-align:center; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px;
  max-width:960px; margin:40px auto 0; padding:0 28px; text-align:start; }
@media (max-width:760px) { .plan-grid { grid-template-columns:1fr; } }
.plan { background:var(--panel); border:1px solid var(--edge);
  border-radius:16px; padding:30px 30px 26px;
  display:flex; flex-direction:column; }
.plan .who { font-size:12.5px; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; color:var(--acc-hi); }
.plan h3 { font-size:22px; margin:10px 0 0; }
.plan .price { display:flex; align-items:baseline; gap:9px; margin:8px 0 14px; }
.plan .price b { font-size:34px; line-height:1; color:var(--ink); }
.plan .price span { font-size:14px; color:var(--ink3); }
.plan .annual { font-size:13.5px; color:var(--ink3); margin:-8px 0 12px; }
.plan .pitch { margin:0 0 18px; font-size:15.5px; line-height:1.65;
  color:var(--ink2); }
.plan ul { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; }
.plan li { display:grid; grid-template-columns:22px 1fr; gap:10px;
  font-size:15px; line-height:1.55; color:var(--ink2); }
.plan li .c { color:var(--acc-hi); font-weight:800; }
.plan .btn-solid { margin-top:auto; text-align:center; justify-content:center; }
.plan-note { margin:26px auto 0; padding:0 28px; font-size:14px;
  color:var(--ink3); max-width:64ch; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { padding:var(--sec) 0; }
.faq-list { max-width:780px; margin:30px auto 0; padding:0 28px;
  display:grid; gap:12px; }
.faq details { background:var(--panel); border:1px solid var(--edge);
  border-radius:12px; padding:0 22px; }
.faq summary { cursor:pointer; list-style:none; padding:18px 0;
  font-size:16.5px; font-weight:620; color:var(--ink);
  display:flex; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; margin-inline-start:auto; color:var(--ink3);
  font-size:20px; font-weight:400; }
.faq details[open] summary::after { content:"\00d7"; }
.faq details p { margin:0; padding:0 0 18px; color:var(--ink2);
  font-size:16px; line-height:1.65; }
.faq details p.more { margin-top:-8px; }
.faq details a { color:var(--acc-hi); }

/* ---- final CTA + footer ------------------------------------------------- */
.cta-end { padding:calc(var(--sec) + 8px) 0; text-align:center; background:var(--panel);
  border-top:1px solid rgba(255,255,255,.05); }
.lfoot { border-top:1px solid rgba(255,255,255,.06); padding:46px 0 32px; }
.lfoot-in { max-width:1140px; margin-inline:auto; padding:0 28px;
  display:grid; grid-template-columns:1.2fr 1fr 1.25fr .9fr 1.15fr; gap:28px; }
@media (max-width:900px) { .lfoot-in { grid-template-columns:repeat(4, 1fr); }
  .lfoot-brand { grid-column:1 / -1; } }
@media (max-width:640px) { .lfoot-in { grid-template-columns:1fr 1fr; gap:28px 20px; }
  /* Seven links to one section: on a phone the Coverage link says it. */
  .lfoot-cov { display:none; } }
.lfoot .brand { font-size:16.5px; color:var(--ink); }
.lfoot .tag { color:var(--ink3); font-size:14px; margin-top:8px; }
.lfoot h2 { margin:0 0 13px; font-size:12.5px; letter-spacing:.1em; line-height:1.4;
  text-transform:uppercase; color:var(--ink3); }
.lfoot ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.lfoot a, .lfoot li { color:var(--ink2); font-size:14.5px; text-decoration:none; }
.lfoot a:hover { color:var(--acc-hi); }
/* A thumb's target on a phone: the links were 17px tall. */
@media (max-width:640px) {
  .lfoot ul { gap:0; }
  .lfoot li a { display:inline-flex; align-items:center; min-height:44px; }
}
/* The section the address names (/plans, /faq…), marked in the nav. */
.lnav-links a[aria-current], .lnav-panel a[aria-current] {
  color:var(--ink); background:var(--panel-2); font-weight:600; }
.lfoot-bottom { max-width:1140px; margin:36px auto 0; padding:20px 28px 0;
  border-top:1px solid rgba(255,255,255,.06); color:var(--ink3); font-size:13.5px; }

/* ---- reveals ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity:0; transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),
               transform .6s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--d,0)*90ms); }
  html.js .reveal.in { opacity:1; transform:none; }
}

/* ---- page head: the h1 of every marketing page but the homepage ---------- */
.phead { padding:calc(var(--sec) + 8px) 0 8px; }
.phead h1 { font-size:clamp(34px, 5vw, 52px); line-height:1.1; margin:10px 0 16px;
  max-width:22ch; text-wrap:balance; }
.phead .lede { max-width:60ch; }

/* ---- /sources: every portal, by region ----------------------------------- */
.srcs { padding:0 0 var(--sec); }
.srcs .cov-sum { margin-bottom:32px; }
.srcs-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.srcs-card { background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:22px; }
.srcs-card h2 { font-size:19px; margin:0 0 12px; }
.srcs-card p { font-size:14.5px; margin:0 0 10px; color:var(--ink3); }
.srcs-card ul { list-style:none; margin:0; padding:0; }
.srcs-card li { display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-top:1px solid var(--edge); font-size:15px; }
.srcs-card li .nm { color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.srcs-card li .n { color:var(--ink3); font-variant-numeric:tabular-nums; }
.srcs-more { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top:24px; }
.srcs-more h2 { font-size:18px; margin:0 0 6px; }
.srcs-more a { color:var(--acc-hi); }

/* ---- /coverage: into the public tender pages ----------------------------- */
.browse { padding:0 0 var(--sec); }
.browse h2 { font-size:clamp(24px, 3vw, 30px); }
.browse-list { list-style:none; padding:0; margin:18px 0 26px; display:flex; flex-wrap:wrap; gap:8px; }
.browse-list a { display:inline-block; padding:7px 14px; border:1px solid var(--edge);
  border-radius:var(--radius-pill); color:var(--ink2); text-decoration:none; font-size:14.5px; }
.browse-list a:hover { border-color:var(--acc); color:var(--acc-hi); }
.cov-all li a { color:inherit; text-decoration:none; }
.cov-all li a:hover { color:var(--acc-hi); text-decoration:underline; }
#ai-use .faq-list p { font-size:17px; }

/* ---- public tender pages (public-tenders.html) ---------------------------- */
.pub-head { padding:calc(var(--sec) - 24px) 0 28px; }
.pub-head h1 { font-size:clamp(30px, 4.4vw, 46px); line-height:1.12; margin:14px 0 14px;
  text-wrap:balance; overflow-wrap:anywhere; }
.pub-head .lede { max-width:68ch; margin-bottom:22px; }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0;
  font-size:14px; color:var(--ink3); }
.crumbs li + li::before { content:"/"; margin:0 8px; color:var(--edge); }
.crumbs a { color:var(--ink2); text-decoration:none; }
.crumbs a:hover { color:var(--acc-hi); text-decoration:underline; }
.pub-stats { display:flex; flex-wrap:wrap; gap:14px; margin:0; }
.pub-stats > div { background:var(--panel); border:1px solid var(--edge); border-radius:14px;
  padding:12px 18px; min-width:150px; flex:1 1 150px; }
.pub-stats dt { font-size:13px; color:var(--ink3); }
.pub-stats dd { margin:2px 0 0; font-size:26px; font-weight:720; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.pub-body { padding:12px 0 var(--sec); }
.pub-grid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:32px; align-items:start; }
@media (max-width:900px) { .pub-grid { grid-template-columns:minmax(0, 1fr); } }
.pub-main h2, .pub-hub h2 { font-size:clamp(22px, 2.6vw, 28px); margin:0 0 14px; }
.pub-empty { color:var(--ink3); }
.tz { list-style:none; margin:0; padding:0; border-top:1px solid var(--edge); }
.tz li { padding:14px 2px; border-bottom:1px solid var(--edge); min-width:0; }
/* A long title stops at three lines (the full one is its title attribute): some
   portals publish a whole paragraph as the title. Block-level so the clamp applies. */
.tz-t { color:var(--ink); font-size:16.5px; font-weight:600; line-height:1.4; text-decoration:none;
  overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.tz-t:hover { color:var(--acc-hi); text-decoration:underline; }
.tz-o { margin-top:3px; font-size:13.5px; line-height:1.4; color:var(--ink3); overflow-wrap:anywhere; }
.tz-os { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; }
.tz-m { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:14px; color:var(--ink3); }
.tz-m b { color:var(--ink2); font-weight:600; }
.tz-b { color:var(--ink2); overflow-wrap:anywhere; }
.pub-lock { margin-top:22px; padding:20px 22px; border:1px dashed var(--edge); border-radius:14px;
  background:var(--panel); display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center;
  justify-content:space-between; }
.pub-lock p { margin:0; max-width:52ch; color:var(--ink2); }
.pub-faq { margin-top:36px; }
.pub-qa { padding:14px 0; border-top:1px solid var(--edge); min-width:0; }
.pub-qa h3 { font-size:16.5px; line-height:1.4; margin:0 0 6px; color:var(--ink); }
.pub-qa p { margin:0; font-size:15px; line-height:1.6; color:var(--ink2); overflow-wrap:anywhere;
  max-width:72ch; }
.pub-side { display:flex; flex-direction:column; gap:18px; min-width:0; }
.pub-box { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px; }
.pub-box h2 { font-size:17px; margin:0 0 10px; }
.pub-buyers, .pub-links { list-style:none; margin:0; padding:0; }
.pub-buyers li, .pub-links li { display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-top:1px solid var(--edge); font-size:14.5px; min-width:0; }
.pub-buyers li:first-child, .pub-links li:first-child { border-top:0; }
.pub-buyers .nm { color:var(--ink2); min-width:0; overflow-wrap:anywhere; }
.pub-links a { color:var(--ink2); text-decoration:none; min-width:24px; overflow-wrap:anywhere; }
.pub-links a:hover { color:var(--acc-hi); text-decoration:underline; }
.pub-buyers .n, .pub-links .n, .browse-list .n { color:var(--ink3); font-variant-numeric:tabular-nums; }
.browse-list .n { margin-inline-start:6px; }
.pub-all a { color:var(--acc-hi); }
.pub-hub { padding:0 0 var(--sec); }
.pub-regions { display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.pub-region { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px; }
.pub-region h3 { font-size:17px; margin:0 0 10px; }
@media (max-width:620px) {
  .pub .land-wrap { padding:0 16px; }
  .pub-stats > div { min-width:0; flex:1 1 40%; }
}

/* ---- guides (/guides, /guides/{slug}) ------------------------------------ */
.guide-head h1 { max-width:30ch; }
.guide-kind { margin:14px 0 0; }
.guide-head .guide-kind + h1 { margin-top:6px; }
.guide-dates { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 22px; font-size:14.5px;
  color:var(--ink3); }
.guide-dates b { color:var(--ink2); font-weight:600; }
.guide-body { min-width:0; max-width:72ch; font-size:17px; line-height:1.72; color:var(--ink2);
  overflow-wrap:break-word; }
.guide-body > :first-child { margin-top:0; }
.guide-body h2 { font-size:clamp(22px, 2.6vw, 27px); line-height:1.25; margin:40px 0 12px; }
.guide-body h3 { font-size:18.5px; line-height:1.35; margin:28px 0 8px; color:var(--ink); }
.guide-body p { margin:0 0 16px; }
.guide-body ul, .guide-body ol { margin:0 0 18px; padding-inline-start:22px; }
.guide-body li { margin:0 0 8px; }
.guide-body li::marker { color:var(--ink3); }
.guide-body strong, .guide-body b { color:var(--ink); font-weight:640; }
.guide-body a { color:var(--acc-hi); text-underline-offset:3px; }
.guide-body a:hover { color:var(--ink); }
.guide-body blockquote { margin:0 0 18px; padding:4px 0 4px 16px; border-inline-start:3px solid var(--edge);
  color:var(--ink3); }
.guide-live p { margin:0 0 14px; font-size:14.5px; line-height:1.55; }
.guide-live .btn-solid { width:100%; justify-content:center; }
.guide-preview { position:sticky; top:62px; z-index:40; background:#3a2a05; color:#ffe7a8;
  border-bottom:1px solid #6b4e0c; font-size:14.5px; padding:10px 0; }
.guide-preview a { color:#fff; margin-inline-start:10px; }
.guide-cards { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.guide-card { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px 20px;
  min-width:0; }
.guide-card .cap { margin:0 0 6px; font-size:12px; }
.guide-card h3 { font-size:19px; line-height:1.35; margin:0 0 8px; }
.guide-card h3 a { color:var(--ink); text-decoration:none; }
.guide-card h3 a:hover { color:var(--acc-hi); text-decoration:underline; }
.guide-desc { margin:0 0 10px; font-size:15px; line-height:1.55; }
.guide-card-m { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; font-size:13.5px; color:var(--ink3); }
.guide-group + .guide-group { margin-top:14px; }
.guide-group h3 { font-size:14px; margin:0 0 4px; color:var(--ink3); letter-spacing:.02em; }
@media (max-width:620px) {
  .guide-body { font-size:16.5px; }
  .guide-preview { top:62px; }
}
/* On a phone the page's own h1 names the guide: the breadcrumb stops at Guides. */
@media (max-width:620px) { .guide-head .crumbs li:last-child { display:none; } }

/* A thumb's target on the public tender pages (the footer got the same fix
   above): the related-page links, the crumbs and the "All countries" link
   were 17-20px tall on a phone, and a row's title only as tall as its text. */
@media (max-width:620px) {
  .pub-links li { padding:0; align-items:center; }
  .pub-links a, .crumbs a, .pub-all a, .browse-list a {
    display:inline-flex; align-items:center; min-height:44px; }
  .tz-t { min-height:44px; }
}