/* 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;
  /* ONE side gutter for the bar, every section and the footer. On a phone
     the bar sat at 14px, the sections at 28px and the public tender pages
     at 16px: three left edges on one screen (measured 2026-10-05). */
  --gut:28px;
  /* The consent bar (app.css) lines up with this column too. */
  --cookie-col:1084px; --cookie-gut:var(--gut);
}
@media (max-width:700px) { .land { --sec:56px; } }
@media (max-width:620px) { .land { --gut:16px; } }
html { overflow-x:clip; }
.land section { position:relative; }
.land-wrap { max-width:1140px; margin-inline:auto; padding:0 var(--gut); }
.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; }
.lede { color:var(--ink2); font-size:17px; line-height:1.65; margin:0 0 26px; text-wrap:pretty; }
.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 var(--gut); 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; }
/* One line each: in Spanish, French, Greek, Portuguese and Russian a link
   ("Cómo funciona") broke onto two lines inside the 1140px bar. */
.lnav-links a { color:var(--ink2); text-decoration:none; font-size:14.5px;
  padding:8px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
.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. */
/* Breakpoints measured over all 22 languages (2026-10-05): at 1040/620/480/
   420 the English bar fitted, but Spanish, French, Portuguese and Hungarian
   wrapped the links onto two lines at 1050 to 1100px and pushed the menu
   button up to 65px off the screen at 630 to 690px and 490 to 540px. */
@media (max-width:1180px) { .lnav-links { display:none; } }
@media (max-width:720px) { .lnav .btn-ghost { display:none; } }
/* The phone menu: below 1180px the section links (and, below 720px, 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:1180px) { .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:1181px) { .lnav-panel { display:none; } }
/* Folded by the bar's script (fragments/site.html) when its words do not fit:
   the links, then Sign in, then the main button go into the menu. */
.lnav.lnav-fold .lnav-links { display:none; }
.lnav.lnav-fold .lnav-menu { display:inline-flex; }
.lnav.lnav-fold .lnav-panel:not([hidden]) { display:block; }
.lnav.lnav-fold-2 .btn-ghost { display:none; }
.lnav.lnav-fold-3 .lnav-in > .btn-solid { display:none; }
.lnav.lnav-fold-3 .lnav-panel .cta { display:block; }
.lnav.lnav-fold-3 .lnav-panel .cta a { color:var(--acc-hi); font-weight:640; }
/* 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:460px) {
  .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:560px) {
  .lnav-in { 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 var(--gut);
  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; }
/* The 15ch measure is for the headline BESIDE the mock. Stacked, it held the
   headline to ~440px over a proof line and lede running ~560px (1024 and
   768 wide), the same short title over a wider body as the guide pages. */
@media (min-width:1121px) { .hero h1 { 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; }
/* On a phone the two buttons share the line, or each takes the whole line
   once they wrap: stacked at their own widths they were a 155px and a 207px
   button one above the other ("Back to the homepage", 390 wide). */
@media (max-width:620px) { .hero-ctas > a { flex:1 1 auto; justify-content:center; text-align:center; } }
.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); }

/* "Try it, no sign-up" (TryItController): the homepage box right after the
   hero, and the /try page. A contained card in the hero's language: the
   panel ink, a red glow from the top corner and a quiet radar (the hero's
   rings, smaller) behind the heading. The field and its button share one
   bordered bar, side by side on a desktop, stacked on a phone; every field
   is 16px (no zoom on a phone). Logical properties throughout (Arabic). */
.tryit { padding:12px 0 calc(var(--sec) * .75); }
.tryit-page { padding:calc(var(--sec) * .7) 0 var(--sec); }
.tryit-box { position:relative; isolation:isolate; overflow:hidden; max-width:920px;
  margin-inline:auto; display:flex; flex-direction:column; gap:22px; min-width:0;
  padding:40px 44px 36px; border-radius:22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(247,42,52,.13), transparent 55%),
    linear-gradient(180deg, #121821, var(--panel));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -50px rgba(247,42,52,.55),
    0 24px 60px -30px rgba(0,0,0,.7); }
[dir="rtl"] .tryit-box { background:
    radial-gradient(120% 90% at 0% 0%, rgba(247,42,52,.13), transparent 55%),
    linear-gradient(180deg, #121821, var(--panel)); }
/* The radar: three rings and a slow sweep in the top corner, behind it all. */
.tryit-radar { position:absolute; z-index:-1; inset-block-start:-170px; inset-inline-end:-170px;
  width:420px; height:420px; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle, transparent 68px, rgba(247,42,52,.16) 69px, transparent 71px),
    radial-gradient(circle, transparent 128px, rgba(247,42,52,.11) 129px, transparent 131px),
    radial-gradient(circle, transparent 188px, rgba(255,255,255,.06) 189px, transparent 191px); }
.tryit-sweep { position:absolute; inset:20px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(247,42,52,.16), transparent 24%);
  -webkit-mask:radial-gradient(circle, #000 30%, transparent 70%);
  mask:radial-gradient(circle, #000 30%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .tryit-sweep { animation:sweep 12s linear infinite; }
  .tryit-box.is-busy .tryit-sweep { animation-duration:2.4s; }
}
/* The live dot beside "Try it, no sign-up" pulses, so the box reads as live. */
@keyframes tryit-live { 0%, 100% { opacity:1; box-shadow:0 0 0 4px rgba(247,42,52,.18), 0 0 12px 2px var(--acc-ring); }
  50% { opacity:.35; box-shadow:0 0 0 7px rgba(247,42,52,0), 0 0 4px 0 var(--acc-ring); } }
@media (prefers-reduced-motion: no-preference) {
  .tryit-cap::before { animation:tryit-live 1.4s ease-in-out infinite; }
}
.tryit-head { display:flex; flex-direction:column; gap:12px; }
.tryit-cap { display:inline-flex; align-items:center; gap:10px; color:var(--acc-hi); }
.tryit-cap::before { content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--acc-hi); box-shadow:0 0 0 4px rgba(247,42,52,.18), 0 0 12px 2px var(--acc-ring); }
.land .tryit-box h1, .land .tryit-box h2 { margin:0; font-size:clamp(28px, 3.4vw, 38px);
  line-height:1.15; font-weight:740; }
.tryit-lede { margin:0; max-width:62ch; color:var(--ink2); font-size:17px; line-height:1.6; text-wrap:pretty; }

/* the form: label, the bar (field + footer with the button), the chips */
.tryit-form { display:flex; flex-direction:column; gap:10px; min-width:0; }
.tryit-label { color:var(--ink); font-size:15px; font-weight:640; }
.tryit-bar { display:flex; flex-direction:column; min-width:0;
  background:rgba(7,10,14,.72); border:1px solid #2c3643; border-radius:16px;
  transition:border-color .15s, box-shadow .15s; }
.tryit-bar:hover { border-color:#3a4554; }
.tryit-bar:focus-within { border-color:var(--acc);
  box-shadow:0 0 0 4px rgba(247,42,52,.18), 0 18px 40px -24px rgba(247,42,52,.6); }
.land .tryit-form textarea { display:block; width:100%; box-sizing:border-box; min-height:92px;
  resize:none; font:inherit; font-size:17px; line-height:1.55; color:var(--ink);
  background:transparent; border:0; border-radius:16px 16px 0 0; padding:18px 20px 8px; }
.land .tryit-form textarea::placeholder { color:var(--ink3); opacity:1; }
/* The bar carries the visible focus ring (focus-within above). */
.land .tryit-form textarea:focus, .land .tryit-form textarea:focus-visible { outline:none; }
.tryit-actions { display:flex; align-items:center; justify-content:space-between; gap:10px 16px;
  padding:8px 10px 10px 20px; padding-inline:20px 10px; flex-wrap:wrap; }
.tryit-fine { color:var(--ink3); font-size:14px; line-height:1.45; min-width:0; }
.tryit-go { border:0; cursor:pointer; font:inherit; font-size:15.5px; font-weight:650;
  padding:12px 22px; margin-inline-start:auto; }
.tryit-go:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.land .tryit-go:disabled { background:var(--acc); color:var(--acc-fg); opacity:.6;
  cursor:progress; box-shadow:none; }
/* While a search runs the button itself says so: a spinning ring replaces the arrow. */
.tryit-go .tryit-btnspin { display:none; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35); border-top-color:var(--acc-fg); background:none; }
.tryit-go.is-loading .tryit-btnspin { display:inline-block; animation:sweep .8s linear infinite; }
.tryit-go.is-loading .tryit-arrow { display:none; }
.land .tryit-go.is-loading:disabled { opacity:1; }
.tryit-arrow { flex:none; transition:transform .15s; }
.tryit-go:hover .tryit-arrow { transform:translateX(2px); }
[dir="rtl"] .tryit-arrow { transform:scaleX(-1); }
[dir="rtl"] .tryit-go:hover .tryit-arrow { transform:scaleX(-1) translateX(2px); }
.tryit-ex { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.tryit-ex-h { color:var(--ink3); font-size:14px; margin-inline-end:4px; }
.tryit-chip { display:inline-flex; align-items:center; min-height:34px; box-sizing:border-box;
  padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--edge);
  background:rgba(255,255,255,.03); color:var(--ink2); font-size:14px; font-weight:560;
  line-height:1.3; text-decoration:none; transition:border-color .13s, color .13s, background .13s; }
.tryit-chip:hover { border-color:rgba(247,42,52,.55); color:var(--ink); background:rgba(247,42,52,.08); }
.tryit-chip:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.tryit-chip.is-on { border-color:var(--acc); color:var(--ink); background:rgba(247,42,52,.14); }

/* the results */
.tryit-out:empty { display:none; }
.tryit-res { display:flex; flex-direction:column; gap:14px; min-width:0;
  padding-top:22px; border-top:1px solid var(--edge); }
.tryit-res:empty { display:none; }
.tryit-wait, .tryit-note, .tryit-nodisc { margin:0; color:var(--ink3); font-size:14.5px;
  line-height:1.55; }
.tryit-wait { display:flex; align-items:center; gap:10px; color:var(--ink2); }
/* A small radar for the spinner. */
.tryit-spin { flex:none; width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(247,42,52,.35);
  background:conic-gradient(from 0deg, var(--acc-hi), transparent 30%); }
@media (prefers-reduced-motion: no-preference) {
  .tryit-spin { animation:sweep 1s linear infinite; }
}
.tryit-note { color:var(--ink3); font-size:14px; }
/* What was searched, and the softer heading when the rows are only the nearest. */
.tryit-searched { margin:0; color:var(--ink2); font-size:14.5px; line-height:1.55; overflow-wrap:anywhere; }
.tryit-closest { margin:0; color:var(--ink); font-size:15px; font-weight:620; line-height:1.45; }
.tryit-err { margin:0; color:var(--ink); font-size:15px; line-height:1.55; padding:12px 16px;
  border-radius:12px; background:rgba(247,42,52,.08); border:1px solid rgba(247,42,52,.28);
  border-inline-start:3px solid var(--acc); }
.tryit-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tryit-hit { position:relative; min-width:0; display:flex; flex-direction:column; gap:6px;
  background:rgba(7,10,14,.55); border:1px solid var(--edge); border-radius:14px;
  padding:16px 20px; padding-inline-start:22px; transition:border-color .15s; }
.tryit-hit::before { content:""; position:absolute; inset-block:14px; inset-inline-start:0;
  width:3px; border-radius:0 3px 3px 0; background:var(--acc); opacity:.85; }
[dir="rtl"] .tryit-hit::before { border-radius:3px 0 0 3px; }
.tryit-hit.is-disc::before { background:#6f9cf0; }
.tryit-hit:hover { border-color:#334050; }
.tryit-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--ink3);
  font-size:13.5px; line-height:1.4; }
.tryit-kind { font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px;
  border-radius:var(--radius-pill); padding:3px 10px; color:var(--acc-hi);
  background:rgba(247,42,52,.12); border:1px solid rgba(247,42,52,.3); }
.tryit-hit.is-disc .tryit-kind { color:var(--infofg); background:var(--info);
  border-color:rgba(156,192,255,.28); }
.tryit-when { font-variant-numeric:tabular-nums; }
/* The deadline as the hero's closing-soon pills, in /tenders' bands. */
.tryit-due { font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:var(--radius-pill); }
.dp30 { background:var(--d30); color:var(--d30fg); }
.dpfar { background:var(--panel-2); color:var(--ink2); border:1px solid var(--edge); }
.tryit-title { margin:0; color:var(--ink); font-size:17px; font-weight:620; line-height:1.45;
  overflow-wrap:anywhere; }
.tryit-where { margin:0; color:var(--ink2); font-size:14.5px; line-height:1.5; overflow-wrap:anywhere; }
.tryit-why { margin:0; color:var(--ink3); font-size:13.5px; line-height:1.5; overflow-wrap:anywhere; }
/* Loading: three rows of placeholder bars, shimmering unless motion is off. */
.tryit-skel { display:flex; flex-direction:column; gap:10px; padding:18px 20px;
  border:1px solid var(--edge); border-radius:14px; background:rgba(7,10,14,.4); }
.tryit-bone { display:block; height:12px; border-radius:6px;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size:200% 100%; }
.tryit-bone.s1 { width:96px; height:18px; border-radius:999px; }
.tryit-bone.s2 { width:78%; height:15px; }
.tryit-bone.s3 { width:46%; }
@media (prefers-reduced-motion: no-preference) {
  .tryit-bone { animation:tryit-shine 1.3s ease-in-out infinite; }
}
@keyframes tryit-shine { from { background-position:100% 0; } to { background-position:-100% 0; } }
/* No match: a centred panel with the radar mark. */
.tryit-none { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:28px 20px; border:1px dashed #2f3946; border-radius:14px; background:rgba(7,10,14,.4); }
.tryit-none-ic { color:var(--acc-hi); }
.tryit-none p { margin:0; max-width:46ch; color:var(--ink2); font-size:15.5px; line-height:1.6;
  text-wrap:pretty; }
.tryit-nodisc { font-size:14px; }
.tryit-cta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:4px;
  padding:18px 20px; border-radius:14px;
  background:linear-gradient(90deg, rgba(247,42,52,.12), rgba(247,42,52,.03));
  border:1px solid rgba(247,42,52,.22); }
.tryit-cta .btn-solid { white-space:normal; text-align:center; justify-content:center;
  line-height:1.4; max-width:100%; }
.tryit-carry { margin:0; color:var(--ink2); font-size:14px; line-height:1.5; flex:1 1 220px; }
@media (max-width:760px) {
  .tryit-box { padding:28px 22px 24px; border-radius:18px; gap:18px; }
  .tryit-radar { inset-block-start:-210px; inset-inline-end:-220px; }
}
@media (max-width:620px) {
  .tryit { padding-top:4px; }
  .tryit-box { padding:24px 16px 20px; }
  .tryit-lede { font-size:16px; }
  /* Three lines of placeholder on a phone, not two and a half. */
  .land .tryit-form textarea { min-height:112px; padding:14px 16px 6px; font-size:16px; }
  .tryit-actions { padding:6px 10px 10px; padding-inline:16px 10px; }
  .tryit-actions .tryit-go { flex:1 1 100%; justify-content:center; margin-inline-start:0; }
  .tryit-fine { flex:1 1 100%; font-size:13.5px; }
  .tryit-ex-h { flex:1 1 100%; }
  .tryit-hit { padding:14px 16px; padding-inline-start:18px; }
  .tryit-cta { padding:16px; }
  .tryit-cta .btn-solid { flex:1 1 100%; }
}

/* 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; }
/* Three equal shares of the band, each number centred in its share, a hair
   rule between them (owner, 2026-10-05): packed to the start they filled
   half the band and left the other half empty. Above the phone breakpoint
   only; on a phone they stack below. */
@media (min-width:641px) {
  .cov-sum { flex-wrap:nowrap; gap:0; }
  /* The number over its label in every share, so the three read alike at
     every width and in every language: side by side, only the longest
     label wrapped under its number. */
  .cov-sum > div { flex:1 1 0; min-width:0; flex-direction:column; align-items:center;
    gap:2px; padding:0 14px; text-align:center; }
  .cov-sum > div + div { border-inline-start:1px solid var(--edge); }
}
.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 var(--gut);
  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; }
  /* Side by side, the mock keeps to the page's outer edge, as the hero's
     does: centred in its column it stood 14px inside the edge every other
     block on the page lines up with (polish pass 2026-10-05). */
  .feat-in > .feat-card .mock { margin-inline:auto 0; }
  .feat-in.flip > .feat-card .mock { margin-inline:0 auto; }
}
/* 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;
  /* The plan cards' edges (.plan-grid: 960px less its gutters), so the
     comparison, the two plans and the scale table under them share one
     column; they were 960, 904 and 900px wide (polish pass 2026-10-05). */
  max-width:calc(960px - 2 * var(--gut)); 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 { width:min(calc(100% - 2 * var(--gut)), calc(960px - 2 * var(--gut))); 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 var(--gut); 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 var(--gut); 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 var(--gut);
  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); }
/* One measure for the closing line on every page: the homepage family held
   it to 44ch and the tender pages and guides to 52ch, inline on each. */
.cta-end .lede { max-width:52ch; margin:0 auto 28px; }
.lfoot { border-top:1px solid rgba(255,255,255,.06); padding:46px 0 32px; }
.lfoot-in { max-width:1140px; margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1.1fr 1fr 1fr 1.2fr .85fr 1.1fr; gap:28px; }
/* Six columns (the brand and five lists) fit from 1101px; below that the
   brand takes a row and the lists go three to a row. */
@media (max-width:1100px) { .lfoot-in { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .lfoot-brand { grid-column:1 / -1; } }
/* minmax(0, 1fr): a plain 1fr grows to its longest word, and in German
   "Ausschreibungen" pushed the second column (UNTERNEHMEN) 10px past a
   320px screen. */
@media (max-width:640px) { .lfoot-in { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 20px; }
  .lfoot h2, .lfoot a { overflow-wrap:anywhere; }
  /* Seven links to one section: on a phone the Coverage link says it. */
  .lfoot-cov { display:none; } }
.lfoot-stack { display:grid; gap:28px; align-content:start; }
.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; }
/* The rule over the copyright spans the footer's columns, not their 28px
   gutters: it overhung both column edges by 28px (150 to 1290 over columns
   178 to 1262 at 1440 wide; edge to edge on a tablet). */
.lfoot-bottom { width:min(1084px, calc(100% - 2 * var(--gut))); margin:36px auto 0; padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.06); color:var(--ink3); font-size:13.5px; }
/* The copyright, then a quiet "Listed on Fazier" (its free listing asks for a
   link back). The dot between them is drawn here, never typed. */
.lfoot-bottom { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 0; }
.lfoot-listed { color:var(--ink3); text-decoration:none; display:inline-flex; align-items:center; padding:4px 0; min-height:28px; }
.lfoot-listed img { display:block; height:auto; }
.lfoot-listed::before { content:"·"; margin:0 8px; }
.lfoot-listed:hover, .lfoot-listed:focus-visible { opacity:.85; }

/* ---- 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; }
.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;
  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;
  align-items:center; 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; }
/* "This page in numbers" and "Newest notices" (PublicTendersController#glance,
   #newest): the same list look. The newest rows carry a class of their own
   (.nz-t) so the teaser's rows (.tz-t) stay countable on their own. */
.pub-glance, .pub-newest { margin-top:36px; }
.pub-glance-list li { padding:8px 0; }
.nz-t { color:var(--ink); font-size:16px; font-weight:600; line-height:1.4; text-decoration:none;
  overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.nz-t:hover { color:var(--acc-hi); text-decoration:underline; }
.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; }
/* A name is dir="auto", so "start" was ITS start: on an Arabic page a German
   buyer that wrapped sat flush left while the one-line names above and below
   it sat flush right (10-05). The page's side wins now (Chromium has no
   text-align:match-parent). */
.pub-buyers .nm { color:var(--ink2); min-width:0; overflow-wrap:anywhere; text-align:left; }
[dir="rtl"] .pub-buyers .nm { text-align:right; }
.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; }
/* On a phone the three counts were two tiles over one stretched across the
   row. One per row now, the label and its number on one line, so the stack
   is no taller than the two rows it replaces (polish pass 2026-10-05). */
@media (max-width:620px) {
  .pub-stats { gap:8px; }
  .pub-stats > div { min-width:0; flex:1 1 100%; display:flex; align-items:baseline;
    justify-content:space-between; gap:12px; padding:10px 16px; }
  .pub-stats dd { margin:0; font-size:22px; }
}

/* ---- guides (/guides, /guides/{slug}) ------------------------------------ */
/* The title runs the page's full width, like the stats below it (owner,
   2026-10-05); "pretty" fills the first line, where "balance" halved it. */
.guide-head h1 { max-width:none; text-wrap:pretty; }
.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; }
/* A guide whose snapshot predates a facts correction: no tiles (GuidesController). */
.guide-updating { margin:0; padding:12px 16px; border:1px solid var(--edge); color:var(--ink2);
  border-radius:10px; font-size:15px; max-width:640px; }
.guide-live-note { margin:10px 0 0; font-size:13.5px; color:var(--ink3); }
.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; }
}

/* ---- free resources: the CPV code finder, the widget page, the reports ---- */
.res-label { display:block; font-size:14px; font-weight:600; color:var(--ink2); margin:0 0 6px; }
.res-hint, .res-note { font-size:14px; line-height:1.55; color:var(--ink3); margin:8px 0 0; }
.res-note + .res-note { margin-top:6px; }
.res-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.res-search { max-width:720px; margin-top:4px; }
.res-search-row { display:flex; gap:10px; flex-wrap:wrap; }
.res-search-row input[type=search] { flex:1 1 260px; min-width:0; }
.res-page input[type=search], .res-page select, .res-page textarea {
  background:var(--panel); color:var(--ink); border:1px solid var(--edge); border-radius:12px;
  padding:11px 14px; font:inherit; font-size:16px; line-height:1.4; min-height:46px; }
.res-page input[type=search]:focus-visible, .res-page select:focus-visible, .res-page textarea:focus-visible {
  outline:2px solid var(--acc-hi); outline-offset:1px; border-color:transparent; }
.res-facts { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.res-facts li { padding:6px 14px; border:1px solid var(--edge); border-radius:var(--radius-pill);
  font-size:14px; color:var(--ink2); }
.cpv-list { list-style:none; margin:0 0 8px; padding:0; border-top:1px solid var(--edge); }
.cpv-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:10px 2px;
  border-bottom:1px solid var(--edge); min-width:0; }
.cpv-list a { flex:1 1 300px; min-width:0; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.cpv-list a:hover .cpv-label { color:var(--acc-hi); text-decoration:underline; }
.cpv-list .n { color:var(--ink3); font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cpv-meta { flex-basis:100%; font-size:13.5px; color:var(--ink3); overflow-wrap:anywhere; }
.cpv-code { font-variant-numeric:tabular-nums; font-weight:650; color:var(--ink); margin-inline-end:8px;
  white-space:nowrap; }
.cpv-picked { margin-bottom:34px; }
.cpv-picked h2 { overflow-wrap:anywhere; }
.cpv-picked h3, .cpv-trail h3 { font-size:17px; margin:22px 0 10px; }
.cpv-trail ol { list-style:none; margin:0; padding:0; }
.cpv-trail li { padding:4px 0; }
.cpv-trail li + li { padding-inline-start:18px; }
.cpv-trail a { color:var(--ink2); text-decoration:none; overflow-wrap:anywhere; }
.cpv-trail a:hover { color:var(--acc-hi); text-decoration:underline; }
.cpv-open p { margin:16px 0 6px; color:var(--ink2); }
.cpv-tenders a { color:var(--acc-hi); }
.cpv-copyrow { margin:4px 0 0; }
.cpv-copy { padding:7px 14px; font-size:14px; }
.cpv-results { margin-bottom:30px; }
.widget-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:36px; align-items:start; }
.widget-build h2, .widget-preview h2 { font-size:clamp(20px, 2.4vw, 24px); margin:0 0 14px; }
.widget-build h2 + .widget-snippet, .widget-form + h2 { margin-top:30px; }
.widget-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 16px; }
.res-field { min-width:0; }
.res-field label { display:block; font-size:14px; font-weight:600; color:var(--ink2); margin:0 0 6px; }
.res-field select { width:100%; }
.widget-apply { justify-self:start; align-self:end; }
html.js .widget-apply { display:none; }
.widget-snippet { width:100%; font:13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize:vertical; white-space:pre-wrap; overflow-wrap:anywhere; }
.widget-copyrow { margin:12px 0 0; }
.widget-preview iframe { display:block; width:100%; border:1px solid var(--edge); border-radius:12px;
  background:#fff; }
.widget-how { margin-top:22px; }
.widget-how ul:not(.pub-links) { margin:0 0 14px; padding-inline-start:20px; font-size:15px; line-height:1.6; }
.widget-how li { margin:0 0 6px; }
@media (max-width:900px) { .widget-grid { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:620px) { .widget-form { grid-template-columns:minmax(0, 1fr); } }
.report-kicker { margin:14px 0 0; }
.report-page .pub-head h1 { margin-top:6px; }
.report-status { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0; font-size:15px;
  color:var(--ink3); }
.report-badge { padding:3px 12px; border-radius:var(--radius-pill); border:1px solid var(--edge);
  color:var(--ink); font-weight:600; font-size:13.5px; }
.report-english { margin:10px 0 0; font-size:14px; color:var(--ink3); }
.report-figures { margin:0 0 30px; }
/* Five figures: three over two. As wrapping tiles they set four over one,
   and the fifth stretched across the whole row (first live report,
   2026-10-08). Phones keep one per row (.pub-stats above). */
@media (min-width:621px) {
  .report-figures { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .report-figures > div { grid-column:span 2; min-width:0; }
  .report-figures > div:nth-child(4):nth-last-child(2),
  .report-figures > div:nth-child(5):last-child { grid-column:span 3; }
}
.report-figures dd { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.report-change { font-size:13px; font-weight:500; color:var(--ink3); }
.report-sec { margin:0 0 40px; min-width:0; }
.report-sec p { margin:0 0 12px; font-size:16.5px; line-height:1.7; color:var(--ink2); max-width:72ch; }
.report-method p { font-size:15px; }
.report-chart { display:block; margin:6px 0 18px; overflow:visible; }
.report-chart-l { fill:var(--ink2); font-size:13px; }
.report-chart-v { fill:var(--ink3); font-size:13px; font-variant-numeric:tabular-nums; }
.report-chart-b { fill:#3987e5; }
.report-table-wrap { overflow-x:auto; max-width:100%; }
.report-table { width:100%; border-collapse:collapse; font-size:14.5px; }
.report-table caption { text-align:start; color:var(--ink3); font-size:13.5px; padding:0 0 8px; }
.report-table th, .report-table td { padding:8px 10px; border-bottom:1px solid var(--edge); text-align:start;
  vertical-align:top; }
.report-table thead th { color:var(--ink3); font-weight:600; font-size:13px; white-space:nowrap; }
.report-table tbody th { font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.report-table td { color:var(--ink2); }
.report-table .num { text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.report-table a { color:var(--ink); text-decoration:none; }
.report-table a:hover { color:var(--acc-hi); text-decoration:underline; }
.report-more summary { cursor:pointer; color:var(--acc-hi); font-size:15px; margin:0 0 10px; }
.report-citation { font-size:14.5px; line-height:1.55; color:var(--ink2); overflow-wrap:anywhere;
  border-inline-start:3px solid var(--edge); padding-inline-start:12px; margin:12px 0 16px; }
.report-cite .widget-snippet { min-height:0; }
.report-csv { margin-top:14px; padding:9px 16px; font-size:14.5px; }
.report-card-h { font-size:19px; line-height:1.35; margin:0 0 8px; }
.report-card-h a { color:var(--ink); text-decoration:none; }
.report-card-h a:hover { color:var(--acc-hi); text-decoration:underline; }
@media (max-width:620px) {
  .report-table th, .report-table td { padding:8px 6px; }
  .cpv-list a { flex-basis:100%; }
}

/* The tour (fragments/video): a <button> that looks like the ghost link
   beside it, and the inline player under the /how-it-works head. */
button.btn-ghost { background:transparent; font-family:inherit; line-height:inherit; cursor:pointer; }
@media (max-width:620px) { .hero-ctas > button { flex:1 1 auto; justify-content:center; text-align:center; } }
.tourvid { padding:8px 0 calc(var(--sec) / 2); }

/* ---- /alternatives/gummysearch ------------------------------------------ */
.gs-notice { max-width:68ch; margin:-8px 0 0; color:var(--ink2); font-size:16px; line-height:1.65; }
.gs-notice a { color:var(--acc-hi); }
.gs { padding:var(--sec) 0 0; }
.gs h2 { font-size:clamp(24px, 4vw, 32px); margin:6px 0 24px; overflow-wrap:break-word; }
.gs-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width:760px) { .gs-grid { grid-template-columns:minmax(0, 1fr); } }
.gs-card { background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:20px 22px; }
.gs-card h3 { font-size:17px; margin:0 0 8px; }
.gs-card p { margin:0; font-size:16px; line-height:1.6; }
/* The table scrolls inside its own box rather than the page; on a phone each
   row becomes a card with the product name over each answer. */
.gs-scroll { overflow-x:auto; border:1px solid var(--edge); border-radius:12px; background:var(--panel); }
.gs-scroll:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.gs-table { width:100%; min-width:620px; border-collapse:collapse; font-size:15.5px; line-height:1.55; }
.gs-table th, .gs-table td { padding:14px 18px; text-align:start; vertical-align:top;
  border-bottom:1px solid var(--edge); }
.gs-table tbody tr:last-child th, .gs-table tbody tr:last-child td { border-bottom:0; }
.gs-table thead th { color:var(--ink); font-size:14px; font-weight:700; background:var(--panel-2); }
.gs-table thead th.gs-us { color:var(--acc-hi); }
.gs-table tbody th { color:var(--ink); font-weight:620; width:22%; }
.gs-table td.gs-us { color:var(--ink); }
.gs-who { display:none; }
.gs-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:620px) {
  .gs-scroll { overflow:visible; border:0; background:none; }
  .gs-table { min-width:0; }
  .gs-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .gs-table, .gs-table tbody, .gs-table tr, .gs-table th, .gs-table td { display:block; width:auto; }
  .gs-table tbody tr { background:var(--panel); border:1px solid var(--edge); border-radius:12px;
    margin-bottom:12px; padding:4px 0; }
  .gs-table th, .gs-table td { border-bottom:0; padding:8px 16px; }
  /* app.css shrinks every table th to 12px on phones (app tables' column
     headers); here the row header is the card's title. */
  .gs-table tbody th { width:auto; font-size:16px !important; }
  .gs-who { display:block; font-size:12.5px; font-weight:700; color:var(--ink3); }
  .gs-us .gs-who { color:var(--acc-hi); }
}
.gs-src { margin:12px 0 0; color:var(--ink3); font-size:14px; }
.gs-list, .gs-ol { margin:0; padding:0; display:grid; gap:14px; max-width:780px; }
.gs-list { list-style:none; }
.gs-list li { background:var(--panel); border:1px solid var(--edge); border-inline-start:3px solid var(--ink3);
  border-radius:12px; padding:16px 20px; font-size:16px; line-height:1.6; }
.gs-list b, .gs-ol b { color:var(--ink); display:block; margin-bottom:4px; }
.gs-ol { padding-inline-start:22px; }
.gs-ol li { font-size:16px; line-height:1.6; padding-inline-start:6px; }
.gs-ol li::marker { color:var(--acc-hi); font-weight:700; }

/* ---- /alternatives/<slug> comparison pages ------------------------------ */
.gs-src a { color:var(--acc-hi); overflow-wrap:anywhere; }
.alt-diff-note { margin:-12px 0 18px; }
.alt-dl { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.alt-dl li { font-size:16px; line-height:1.6; }
.alt-dl b { display:block; color:var(--ink); margin-bottom:2px; }
.alt-us h3 { color:var(--acc-hi); }
.alt-links { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 12px; }
.alt-links a { display:inline-block; padding:8px 14px; border:1px solid var(--edge); border-radius:999px;
  background:var(--panel); color:var(--ink); font-size:15px; text-decoration:none; }
.alt-links a:hover, .alt-links a:focus-visible { border-color:var(--acc); color:var(--acc-hi); }