/* TenderYeti — shared public-site design system.
 *
 * Adopted 2026-10-12 from the Weblium "IT services 44" template
 * (itservices.weblium.site), rebuilt in TenderYeti's own palette. What was
 * taken is the GRAMMAR, not the content: alternating light/dark full-bleed
 * bands, a `/ 01 /` numeral above each section heading, headings that end in
 * an accent-coloured period, 20px cards on a hairline border, 4px buttons,
 * and oversized stat numerals with an accent `+`.
 *
 * The template's second accent is green. TenderYeti has no green — the
 * palette sampled from the logo files is a blue family:
 *
 *     #0D7EDA  logo blue          (buttons, graphics, large type)
 *     #0B6BB9  AA-safe text blue  (body links; #0D7EDA fails AA as text)
 *     #00B4FC  mascot cyan        (takes the template's green role)
 *     #78C0F0  soft sky           (the yeti's face)
 *     #CCE4F0  pale               (tints, rules on dark)
 *
 * The cyan is a GRAPHIC accent only: 2.3:1 on white. It is used on the dark
 * bands, and on light only for marks that carry no meaning alone — the
 * eyebrow numeral (which repeats as a digit), the heading period, the `+`
 * on a figure that is already written out. Never for body text on light.
 *
 * No webfont is loaded. The template sets Geist + Open Sans from Google
 * Fonts, and this site tells visitors "No third-party trackers" in its own
 * trust strip — a font request to a third party would make that a lie. The
 * system grotesque stack with tight tracking carries the same feel.
 */

:root {
  /* brand, measured from brand/logo-full.png and static/logo-h-94.png */
  --brand: #0D7EDA;
  --brand-ink: #0B6BB9;
  --brand-cyan: #00B4FC;
  --brand-sky: #78C0F0;
  --brand-pale: #CCE4F0;

  /* grounds — the template alternates white / #F5F5F5 / #171717.
     Here: the cream that is already TenderYeti's, a deeper cream for the
     alternate band, and a navy derived from the logo blue for the dark
     bands. Navy rather than the template's neutral black so the dark
     sections still read as this brand and not as a generic agency page. */
  --ground: #FAF7EF;
  --ground-alt: #F3EEE4;
  --surface: #FFFFFF;
  --ground-dark: #0A1F44;
  --ground-deep: #071733;

  --ink: #191720;
  --ink-2: #5C5865;
  --ink-3: #8A8590;
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.76);
  --on-dark-3: rgba(255, 255, 255, 0.52);

  --rule: #E4DFD3;
  --rule-strong: #C9C2B0;
  --rule-dark: rgba(255, 255, 255, 0.14);

  --highlight: #FBF0D1;

  /* The plate behind a card's mark. Its own tokens rather than --brand-pale
     because the plate has to sit on four grounds (white card, cream card,
     navy hero, each again in dark) and only two of those want the same blue. */

  /* the template's radii: 4px on controls, 20px on cards and media */
  --r-ctl: 4px;
  --r-card: 20px;
  /* A small square tile — a sector's icon badge, a thumbnail — is neither a
     control nor a card. At 2.6rem a side, --r-card would be 48% of the edge
     and the tile would read as a squircle. Named so the next 12px somebody
     writes is this decision and not a leftover. */
  --r-tile: 12px;

  --sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  /* The serif is kept for prose bodies (guides, blog, legal) where the
     editorial voice was deliberate. Headings are grotesque now. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --shell: 1180px;
  --gut: 2rem;

  /* Compatibility aliases. The page-specific blocks that still ride on top
     of this sheet (pricing, the SEO directories, the legal cluster) were
     written against the pre-2026-10-12 token names. Mapping them here is
     one definition instead of 32 edits across five files, and it keeps the
     two sets from drifting: there is still only one blue. */
  --accent: var(--brand-ink);
  --accent-2: var(--brand);
  --highlight-edge: #C99524;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141216;
    --ground-alt: #1A171E;
    --surface: #1D1A21;
    --ground-dark: #0A1F44;
    --ground-deep: #071733;

    --ink: #EBE7DE;
    --ink-2: #ABA6B0;
    --ink-3: #7A757F;

    --rule: #2E2B33;
    --rule-strong: #46424C;

    --brand-ink: #4FB0F7;      /* AA on the dark ground */

    --highlight: #2A2314;
    --highlight-edge: #B5851F;
  }
  :root:not([data-theme="light"]) .btn-navy {
    background: #143A7D; border-color: #3A6DC0;
  }
  :root:not([data-theme="light"]) .btn-navy:hover {
    background: #1A4794; border-color: #5588D4;
  }
}

* { box-sizing: border-box; }

html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (max-width: 640px) { html { font-size: 16px; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── shell ──────────────────────────────────────────────────────────────
   Sections are full-bleed so a band can carry its own background; the
   content inside each one is held to --shell by .wrap. */

.wrap { max-width: var(--shell); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
@media (max-width: 640px) { :root { --gut: 1.25rem; } }

.band { padding: 5.5rem 0; }
.band--tight { padding: 3.5rem 0; }
.band--alt { background: var(--ground-alt); }
.band--surface { background: var(--surface); }
@media (max-width: 640px) { .band { padding: 3.5rem 0; } }

/* A dark band inverts every token inside itself, so the same card, button
   and rule classes work on either ground without a second set of names. */
.band--dark {
  background: var(--ground-dark);
  --ink: var(--on-dark);
  --ink-2: var(--on-dark-2);
  --ink-3: var(--on-dark-3);
  --surface: rgba(255, 255, 255, 0.045);
  --rule: var(--rule-dark);
  --rule-strong: rgba(255, 255, 255, 0.26);
  --brand-ink: var(--brand-cyan);
  color: var(--on-dark);
}
.band--deep { background: var(--ground-deep); }

/* The template puts a wide diagonal sheen across its dark CTA band. */
.band--sheen { position: relative; overflow: hidden; }
.band--sheen::before {
  content: "";
  position: absolute; inset: -40% -10%;
  background: linear-gradient(104deg, transparent 38%, rgba(0, 180, 252, 0.10) 50%, transparent 62%);
  pointer-events: none;
}
.band--sheen > * { position: relative; }

/* ─── type ───────────────────────────────────────────────────────────────
   Large, tight, low-contrast grotesque — the template's single loudest
   characteristic. */

h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); text-wrap: balance; }

h1 {
  font-weight: 600;
  font-size: clamp(2.1rem, 3.9vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 0 0 1.4rem;
}

h2 {
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}

h3 { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.012em; margin: 0 0 0.45rem; }

/* The trailing period, in the accent. Decorative: it is the punctuation a
   screen reader would expect at the end of a sentence anyway, so it is not
   hidden. Only on headings that opt in, because a heading ending in "?" or
   already in "." must not get a second one. */
.hdg-dot::after { content: "."; color: var(--brand-cyan); }

/* `/ 01 /` above a section heading. The digit is in the markup, so the
   colour is never the only thing carrying it. */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--brand-cyan);
  margin: 0 0 1rem;
}
.band:not(.band--dark) .eyebrow { color: var(--brand-ink); }

.section-head { max-width: 46rem; margin: 0 0 3rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .deck { margin-left: auto; margin-right: auto; }
.deck { font-size: 1.12rem; color: var(--ink-2); margin: 0; text-wrap: balance; }
.deck--lg { font-size: 1.28rem; }

p { margin: 0 0 1rem; }
.deck { text-wrap: pretty; max-width: 58ch; }
a { color: var(--brand-ink); }

/* ─── controls ───────────────────────────────────────────────────────────
   4px radius, 16/24 padding — straight from the template. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.5rem;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--brand); color: #FFFFFF; border-color: var(--brand); }
.btn-primary:hover { background: #0A68B6; border-color: #0A68B6; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { background: var(--highlight); border-color: var(--highlight); color: var(--ink); }
.band--dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: transparent; color: var(--on-dark); }
.btn-light { background: #FFFFFF; color: var(--ground-dark); border-color: #FFFFFF; }
.btn-light:hover { background: var(--brand-pale); border-color: var(--brand-pale); }
/* Navy, for a filled button that must NOT compete with the brand-blue
   primary: --ground-dark is the logo-derived navy the dark bands already
   use, so the pair reads as one brand rather than two blues.
   The dark theme needs its own fill: #0A1F44 on the dark ground (#141216)
   is 1.15:1 — the button shape vanishes and only the white label is left.
   A lighter navy (#143A7D, still 1.71:1) does not fix that on its own, so
   the #3A6DC0 edge carries it at 3.66:1, past the 3:1 WCAG asks of a
   control boundary. Measured, not guessed; white on #143A7D is 10.87:1. */
.btn-navy { background: var(--ground-dark); color: var(--on-dark); border-color: var(--ground-dark); }
.btn-navy:hover { background: var(--ground-deep); border-color: var(--ground-deep); }
.btn-sm { padding: 0.68rem 1.1rem; font-size: 0.88rem; }

.cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 1.4rem; }

/* ─── cards ──────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 1.75rem;
}
.card p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.55; margin: 0; }
.card h3 { margin-bottom: 0.55rem; }

/* ─── the photo heading a card ────────────────────────────────────────────
   "Why a bid team runs on TenderYeti": CC0 photographs since 2026-11-01,
   replacing the last four icon marks (Joerg: photos and screenshots, never
   icons). Same shape as the step screenshots: full bleed at the top, text
   padded below. 2:1 so the photo stays shorter than the prose under it. */
.card--photo { padding: 0; overflow: hidden; }
.why-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; max-width: 100%;
  object-fit: cover; border-bottom: 1px solid var(--rule);
}
.card--photo .card-body { padding: 1.4rem 1.75rem 1.75rem; }
@media (max-width: 480px) { .card--photo .card-body { padding: 1.2rem 1.25rem 1.4rem; } }

/* The numbered card: the template sets a large faint ordinal behind the
   title. The number is in the markup for the same reason as the eyebrow. */
.card-num {
  display: block;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; color: var(--brand-cyan);
  margin: 0 0 0.9rem;
}
.band:not(.band--dark) .card-num { color: var(--brand-ink); }

/* ─── stat figures ───────────────────────────────────────────────────────
   Oversized numeral, the trailing + or k in the accent, a small-caps label
   under it. The template's single best device and the one that suits a
   product that is mostly numbers. */

/* One ledger, not four cards. Redesigned 2026-10-23: the strip had been four
   freestanding cards, each with a 3rem plate-tile mark, a radial glow and its
   own border — the same vocabulary as the twelve feature cards further down,
   so it read as a fifth row of features rather than as the page's figures.
   And the source line above it floated alone between a rule and the cards,
   wrapping to three lines on a phone before four boxes it belonged to.

   Now: one surface, the source line as its caption row, four cells divided
   by hairlines. A ledger is the form for a handful of headline numbers — the
   number is the mark, so the plates and the glow are gone and the SVG marks
   sit bare in the cell corner. Figures are proportional, not tabular: equal-
   width digits make a standalone "121" look loose at display sizes, and
   nothing here aligns in a column. */

.stat-ledger {
  position: relative; z-index: 2;
  margin-top: 2.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* The caption is the needle `sources_footnote`: keep it a text node bounded
   by its own tags, or nine catalogs stop matching it. */
.stat-ledger-caption {
  margin: 0; padding: 0.95rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-2);
  text-wrap: pretty;
}

.stat-ledger-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell { border-left: 1px solid var(--rule); min-width: 0; }
.stat-cell:first-child { border-left: 0; }

/* A photograph heads each cell since 2026-10-25 (Joerg: images, not icons).
   It bleeds to the cell's edges so the hairlines frame it like a ledger
   column; the number and label keep their padding in .stat-body below.
   2:1 is the file's own ratio (static/stat/*.webp, see docs/IMAGE_CREDITS.md),
   so object-fit only ever trims rounding, never recomposes the picture. */
.stat-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--rule);
}
.stat-body { padding: 1.15rem 1.5rem 1.3rem; }

.stat-cell .n {
  font-size: 3rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.04em; color: var(--ink);
}
/* Brand blue, not cyan: this `+` sits on a white surface in light mode, and
   cyan on white is ~2:1. The glass surface in dark mode switches it below. */
.stat-cell .n em { font-style: normal; color: var(--brand); }
.stat-cell .l {
  display: block; margin-top: 0.75rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}

/* Four columns down to 720px, then two by two with the hairlines forming a
   cross. The break was 900px while the cells held icons; with a 2:1 photo
   per cell, two columns at 768-900px meant 175-195px tall pictures and a
   strip of ~700px -- two screens on a landscape phone (measured
   2026-10-25). Four cells at 720px are ~160px wide: the 3rem figure fits
   with the tighter padding below. Two columns rather than one all the way
   down -- measured 2026-10-22 on a 390px viewport, one column made the
   strip 579px tall, most of a screen before the page had said anything. */
@media (max-width: 900px) {
  .stat-body { padding: 1rem 1.1rem 1.1rem; }
  /* The widest figure is "6.4M+", not "336": at a fixed 3rem it ran into
     the next cell from ~720 to ~900px (measured at 820px, 2026-11-01).
     Scale it with the viewport until the 2x2 layout takes over. */
  .stat-cell .n { font-size: clamp(2.1rem, 4.4vw, 3rem); }
}
@media (max-width: 720px) {
  .stat-ledger-row { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3) { border-left: 0; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .stat-ledger { margin-top: 2rem; }
  .stat-ledger-caption { padding: 0.8rem 1.1rem; font-size: 0.78rem; }
  .stat-body { padding: 0.9rem 1.1rem 1rem; }
  .stat-cell .n { font-size: 2.1rem; }
  .stat-cell .l { margin-top: 0.5rem; font-size: 0.6rem; letter-spacing: 0.09em; }
}

/* The ledger straddles the hero, which is navy in BOTH themes. In light that
   is a white surface on navy and reads well. In dark --surface is #1D1A21, a
   neutral near-black, and that on a blue ground looks like a hole punched in
   the hero. Glass tinted from the hero itself instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-ledger {
    background: rgba(13, 42, 86, 0.66);
    border-color: rgba(120, 192, 240, 0.2);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  :root:not([data-theme="light"]) .stat-ledger-caption,
  :root:not([data-theme="light"]) .stat-cell,
  :root:not([data-theme="light"]) .stat-photo { border-color: rgba(120, 192, 240, 0.2); }
  :root:not([data-theme="light"]) .stat-ledger-caption { color: rgba(255, 255, 255, 0.64); }
  :root:not([data-theme="light"]) .stat-cell .n { color: #F2F6FA; }
  :root:not([data-theme="light"]) .stat-cell .n em { color: var(--brand-cyan); }
  :root:not([data-theme="light"]) .stat-cell .l { color: rgba(255, 255, 255, 0.64); }
}

/* The ledger straddles the hero's lower edge, as in the template. The hero's
   .wrap carries 5rem of bottom padding, so the margin has to beat that before
   anything hangs over: -5.5rem (the old value) straddled by half a rem and the
   band below kept 8.5rem of padding for an overlap that was not there. Now it
   hangs 3rem into the band (2rem on a phone) and the band's padding is the
   overhang plus its normal 5.5rem. */
.stat-ledger--overlap { margin-bottom: -8rem; }
@media (max-width: 640px) { .stat-ledger--overlap { margin-bottom: -7rem; } }
.band--after-overlap { padding-top: 8.5rem; }
@media (max-width: 640px) { .band--after-overlap { padding-top: 5.5rem; } }

/* ─── header ─────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) { .site-head { background: var(--ground); } }

.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem;
  /* Wider than the content shell: the row carries the logo, six nav items,
     the injected language picker and a CTA that can be as long as
     "Get started — $99/year". At --shell it wrapped to two lines. */
  max-width: 1340px;
}
.site-head .brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.site-head .brand-logo { display: block; height: 47.5px; width: auto; }
.brand-logo-v { width: 300px; max-width: 100%; height: auto; display: block; margin: 0 auto 0.6rem; }
.site-nav { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.site-nav a, .site-head .head-cta a { white-space: nowrap; }
.site-nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
}
.site-nav a:hover { color: var(--ink); }
.site-head .head-cta { display: flex; align-items: center; gap: 0.9rem; flex: 0 0 auto; }
.site-head .head-cta > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.site-head .head-cta > a:not(.btn):hover { color: var(--ink); }
/* The language picker is injected by the SSO navbar, so it is styled here
   rather than in its own markup. */
.site-head select { font: inherit; font-size: 0.88rem; color: var(--ink-2); background: transparent;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 0.4rem 0.5rem; }
@media (max-width: 1180px) {
  .site-head .wrap { flex-wrap: wrap; padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .site-nav { order: 3; width: 100%; gap: 1.1rem; }
}
/* Phones: the row of language picker + Sign in + two buttons ran off the
   right edge. The "Get started — $99/year" button repeats the Pricing link,
   so it is dropped here, and what is left may wrap. */
@media (max-width: 640px) {
  .site-head .head-cta { flex: 1 1 100%; flex-wrap: wrap; gap: 0.6rem 0.9rem; min-width: 0; }
  .site-head .head-cta .btn-primary { display: none; }
  .site-head select { max-width: 9.5rem; }
}

/* ─── hero ───────────────────────────────────────────────────────────── */

/* No overflow:hidden here. It used to crop the glow below, whose box ran 30%
   above and 20% to the right of the hero — and it cropped the stat ledger
   with it, cutting every label off the moment the ledger hung more than half
   a rem below the hero's edge (2026-10-23). The glow is now drawn inside the
   hero's own box instead: a 70%×160% box at inset -30% -20% with a
   closest-side ellipse is the same picture as an ellipse of radii 35%/80%
   centred at 85%/50% of the hero itself, so nothing needs cropping. */
.hero { background: var(--ground-dark); color: var(--on-dark); position: relative; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 35% 80% at 85% 50%, rgba(13, 126, 218, 0.38), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; padding-top: 5rem; padding-bottom: 5rem; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.hero h1 { color: var(--on-dark); }
.hero .deck { color: var(--on-dark-2); margin-bottom: 2.2rem; }
.hero .trial-line { font-size: 0.86rem; color: var(--on-dark-3); margin: 0; }
.hero .btn-secondary { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.3); }

.yeti-wrap { position: relative; }
.yeti-wrap .yeti { display: block; width: 100%; height: auto; }
.stat-badge {
  position: absolute; left: -0.5rem; bottom: 0.75rem;
  background: var(--ground-deep); color: var(--on-dark);
  padding: 0.9rem 1.15rem; border-radius: 14px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  max-width: 62%; display: flex; flex-direction: column; gap: 0.15rem;
  border: 1px solid var(--rule-dark);
}
.stat-badge-n { font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--brand-cyan); }
.stat-badge-l { font-size: 0.72rem; line-height: 1.25; color: var(--on-dark-2); }

/* ─── media blocks ───────────────────────────────────────────────────── */

.media {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--rule);
  background: var(--surface);
}
.media--plain { border: 0; background: none; border-radius: 0; }
/* An <img>-referenced SVG is a separate document: its text keeps its own
   dark fill and cannot read this band's tokens. On the dark band the
   coverage map's "INDEXED" legend was dark-on-dark. It gets the light
   plate the template uses for media rather than a second SVG. */
.media--plate { background: var(--ground); border: 0; padding: 1.5rem 1.75rem; }
.band--dark .media--plate { background: #F6F2E8; }
.figure { margin: 0 auto 3rem; max-width: 620px; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin: 1rem auto 0; max-width: 52ch; text-align: center;
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-2);
}

/* ─── a step card with a product screenshot ──────────────────────────────
   "How TenderYeti works" showed an SVG flow diagram and four cards with a
   mark each until 2026-10-25 (Joerg: real images, not icons). Each card now
   opens with a 16:9 capture of the actual screen for that step. The capture
   bleeds to the card edges under the card's own border; the text keeps the
   card padding in .card-body. The screenshots are light UI whatever the
   theme -- a white page in a dark card is what a screenshot looks like, so
   the hairline below it is the only seam. */
.section-lead {
  margin: -1.25rem auto 2.5rem; max-width: 60ch; text-align: center;
  font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty;
}
.card--step { padding: 0; overflow: hidden; }
.step-shot {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: top left;
  background: #fff; border-bottom: 1px solid var(--rule);
}
.card--step .card-body { padding: 1.5rem 1.75rem 1.75rem; }
@media (max-width: 480px) { .card--step .card-body { padding: 1.2rem 1.25rem 1.4rem; } }

/* Per-page internal links (config/internal_links.json): one quiet line of
   anchors, centred under the section it belongs to. */
.also-links { margin: 1.25rem auto 0; max-width: 70ch; text-align: center;
  font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.also-links a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }
.also-links--dark { color: rgba(255, 255, 255, 0.72); margin-bottom: 2rem; }
.also-links--dark a { color: var(--brand-sky); }

/* ─── trust strip ────────────────────────────────────────────────────── */

.trust {
  display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-2);
}
.trust div { display: flex; align-items: center; gap: 0.4rem; }

/* ─── footer ─────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--ground-deep); color: var(--on-dark-2);
  padding: 3.5rem 0 3rem;
  --ink: var(--on-dark);
  --ink-2: var(--on-dark-2);
  --rule: var(--rule-dark);
}
.site-foot .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.site-foot a { color: var(--on-dark-2); text-decoration: none; }
.site-foot a:hover { color: var(--on-dark); }
.site-foot .foot-links { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.site-foot .foot-id { font-size: 0.86rem; }
.site-foot .foot-links, .site-foot .foot-id { font-size: 0.84rem; }

/* ─── long-form measure ──────────────────────────────────────────────────
   Guides, Learn articles and blog posts render their body as
   <section class="section">, which before this change ran the full 1180px
   shell — about 150 characters a line. A reading measure is the one thing
   the Weblium template does not have to teach us. The deck and the header
   block above it get the same cap so the column does not step sideways. */

.section { max-width: 72ch; }
.section > h2 { max-width: none; }
.blog-hero .deck, .section + .section { max-width: 72ch; }

/* ─── prose (guides, blog, legal) ────────────────────────────────────── */

.prose { max-width: 70ch; margin: 0 auto; }
.prose h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.12rem; margin-top: 1.75rem; }
.prose p, .prose li { color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.prose a { color: var(--brand-ink); }

/* ─── FAQ (homepage, /features, /pricing, /tenders/{country}) ─────────────
   Native <details>: no script, keyboard and screen-reader behaviour for
   free, and the answer text is in the DOM for crawlers. The marker is a
   pseudo-element on the logical end side, so /ar/ (dir=rtl) mirrors it. */

.faq-list { display: grid; gap: 0.75rem; max-width: 72ch; }
.faq-list--center { margin: 0 auto; }
.faq-list details {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-tile); padding: 0 1.15rem; min-width: 0;
}
.faq-list details[open] { border-color: var(--rule-strong); }
.faq-list summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1rem 0; padding-inline-end: 2rem;
  font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; inset-inline-end: 0; top: 0.85rem;
  font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--accent);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-ctl); }
.faq-list details p { margin: 0 0 1.1rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 640px) { .faq-list details { padding: 0 0.95rem; } }

/* ─── motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}