/* ==========================================================================
   GEETECH — geetechglobal.com
   Design language: ClickHouse (near-black canvas, one electric accent, Inter
   at 700/600/400, 8px buttons / 12px cards, no drop shadows, 96px band rhythm).
   Reference: VoltAgent/awesome-design-md · design-md/clickhouse/DESIGN.md

   Deviation on purpose: ClickHouse's accent is electric yellow #faff69. Ours is
   the GEETECH green. The brand green #109045 is too dark to act as the accent on
   a near-black canvas (4.75:1 — fails AA for normal text), so the accent is a
   brightened derivative, --volt #2fd671 (10.3:1 against the canvas, 10.3:1 for
   black text sitting on it). The authentic #109045 is kept for the logo mark only.
   ========================================================================== */

/* --- Font (self-hosted variable Inter: no third-party request, no GDPR exposure) */
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Russian. Held in the same family behind a unicode-range, so the English, German,
   Spanish and French pages never request it — only a page that actually prints a
   Cyrillic codepoint pays the 19 KB. */
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Arabic. Inter has no Arabic, so this is Noto Sans Arabic (SIL OFL), listed ahead
   of InterVar in --sans-ar and likewise gated by unicode-range. */
@font-face {
  font-family: 'NotoArabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/noto-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --volt: #2fd671;              /* accent — CTAs, stat numbers, accent bands */
  --volt-active: #27b962;
  --brand: #109045;             /* authentic logo green — mark only */

  --ink: #ffffff;
  --body: #cccccc;
  --body-strong: #e6e6e6;
  --muted: #888888;
  --muted-soft: #5a5a5a;

  --hairline: #2a2a2a;
  --hairline-strong: #3a3a3a;

  --canvas: #0a0a0a;
  --surface-soft: #121212;
  --surface-card: #1a1a1a;
  --surface-elevated: #242424;
  --on-accent: #0a0a0a;

  /* Chinese is not self-hosted. A Simplified Chinese webfont is 8-10 MB even
     subsetted into ~100 slices, which needs a build step this site does not have —
     so the Chinese pages fall through to the CJK faces that ship with the operating
     system. Latin glyphs on those pages still render in Inter, because the CJK
     families only get asked for the codepoints Inter has no glyph for. */
  --cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
         'Source Han Sans SC', 'WenQuanYi Micro Hei';
  --sans: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          var(--cjk), sans-serif;
  --sans-ar: 'NotoArabic', 'InterVar', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 9999px;

  --sp-xxs: 4px; --sp-xs: 8px;  --sp-sm: 12px; --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 96px;

  --container: 1280px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--volt); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

.skip {
  /* Logical, not `left`: parked at `left: -9999px` the link sits outside the RTL
     pages' scrollable area and gives them a 9999px horizontal scrollbar. Off the
     inline-start edge is ignored by the scroll box in both directions. */
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--volt); color: var(--on-accent);
  font-size: 14px; font-weight: 600;
  padding: var(--sp-sm) var(--sp-lg); border-radius: var(--r-md);
}
.skip:focus { inset-inline-start: var(--sp-md); top: var(--sp-md); }

/* --- Layout --------------------------------------------------------------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-lg); }
/* Longhand: `.section` and `.hero` are always combined with `.wrap`, and a
   `padding` shorthand would reset .wrap's horizontal padding to 0. */
.section { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }

/* --- Top navigation ------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner { display: flex; align-items: center; gap: var(--sp-xl); height: 64px; }
.brandmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
/* The authentic mark is #109045, which sits at 4.75:1 on the near-black canvas and
   goes muddy at 28px. Lifted just enough to read at nav size; hue is unchanged. */
.brandmark img { width: 28px; height: 28px; filter: brightness(1.35) saturate(1.1); }
.brandmark span {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: var(--sp-lg); }
.nav__links a {
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--body);
  padding: 6px 0;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current='page'] { color: var(--ink); }
/* Logical: `margin-left: auto` absorbs the free space on the wrong side of the
   element once the flex row runs right-to-left, and the switcher and button end up
   next to the nav links instead of at the far edge. */
.nav__cta { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-md); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 13px 20px; border-radius: var(--r-md);
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--volt); color: var(--on-accent); }
.btn--primary:hover { background: var(--volt-active); }
.btn--secondary { background: var(--surface-card); color: var(--ink); border-color: var(--hairline-strong); }
.btn--secondary:hover { background: var(--surface-elevated); }
.btn--on-accent { background: var(--on-accent); color: var(--ink); }
.btn--on-accent:hover { background: #1f1f1f; }
.btn--lg { padding: 15px 26px; font-size: 15px; }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 700; }
h1 { font-size: 72px; line-height: 1.05; letter-spacing: -2.5px; }
h2 { font-size: 56px; line-height: 1.1;  letter-spacing: -2px; }
h3 { font-size: 40px; line-height: 1.15; letter-spacing: -1.5px; }
h4 { font-size: 24px; line-height: 1.3;  letter-spacing: -0.3px; }
.title-md { color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0; }
.title-sm { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; }

.eyebrow {
  display: inline-block; margin: 0 0 var(--sp-md);
  font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--volt);
}
.lead { font-size: 19px; line-height: 1.55; color: var(--body-strong); margin: var(--sp-lg) 0 0; max-width: 62ch; }
p { margin: var(--sp-md) 0 0; max-width: 70ch; }
.muted { color: var(--muted); }
.caption { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.small { font-size: 14px; }

.link { color: var(--volt); text-decoration: none; border-bottom: 1px solid rgba(47, 214, 113, 0.4); }
.link:hover { border-bottom-color: var(--volt); }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: var(--sp-section); padding-bottom: var(--sp-xxl); }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-xxl); align-items: start; }
.actions { margin-top: var(--sp-xl); display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

/* --- Badge ---------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  background: var(--surface-card); color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
}
.badge b { color: var(--volt); font-weight: 600; }

/* --- Stats ---------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }
.stats .n {
  color: var(--volt); font-size: 56px; font-weight: 700; line-height: 1;
  letter-spacing: -1.5px; display: block;
}
.stats .k {
  display: block; margin-top: var(--sp-sm);
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}

/* --- Cards ---------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-xl);
}
.card--accent { background: var(--volt); border-color: var(--volt); color: var(--on-accent); }
.card--accent h3, .card--accent h4, .card--accent .title-md { color: var(--on-accent); }
.card--accent .eyebrow { color: rgba(10, 10, 10, 0.65); }
.card--accent p { color: rgba(10, 10, 10, 0.8); }

.card ul { margin: var(--sp-lg) 0 0; padding: 0; list-style: none; }
.card li {
  font-size: 14px; line-height: 1.55; color: var(--body);
  padding: 10px 0 10px var(--sp-lg); border-top: 1px solid var(--hairline);
  position: relative;
}
.card li::before {
  content: ''; position: absolute; left: 0; top: 18px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--volt);
}
.card--accent li { color: rgba(10, 10, 10, 0.8); border-top-color: rgba(10, 10, 10, 0.15); }
.card--accent li::before { background: var(--on-accent); }

/* --- Spec list (mock "query result" panel — the ClickHouse code-window slot) */
.panel {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--hairline);
  background: var(--surface-soft);
}
.panel__dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--hairline-strong); }
.panel__dot--on { background: var(--volt); }
.panel__title { margin-left: var(--sp-xs); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.panel table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.panel th {
  text-align: left; padding: 10px var(--sp-md);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.panel td { padding: 11px var(--sp-md); border-bottom: 1px solid var(--hairline); color: var(--body); vertical-align: top; }
.panel tr:last-child td { border-bottom: 0; }
.panel td.v { color: var(--volt); white-space: nowrap; }
.panel td.n { color: var(--ink); font-family: var(--sans); font-weight: 600; }

/* --- Numbered step rows --------------------------------------------------- */
.steps { margin: var(--sp-lg) 0 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: var(--sp-lg); padding: var(--sp-lg) 0; border-top: 1px solid var(--hairline); }
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps .num {
  flex: 0 0 auto; width: 34px; color: var(--volt);
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; padding-top: 2px;
}
.steps .txt { flex: 1 1 auto; }
.steps .txt p { margin-top: 6px; font-size: 15px; }

/* --- Brand strip ---------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-sm); }
.logos div {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-lg);
}
.logos b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.logos span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* --- Accent CTA band ------------------------------------------------------ */
.cta {
  background: var(--volt); color: var(--on-accent);
  border-radius: var(--r-lg); padding: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-xl); flex-wrap: wrap;
}
.cta h3 { color: var(--on-accent); max-width: 20ch; }
.cta p { color: rgba(10, 10, 10, 0.75); margin-top: var(--sp-sm); max-width: 46ch; }

/* --- Definition list (contact) -------------------------------------------- */
.dl { margin: 0; }
.dl > div { padding: var(--sp-md) 0; border-top: 1px solid var(--hairline); }
.dl > div:last-child { border-bottom: 1px solid var(--hairline); }
.dl dt { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.dl dd { margin: 0; font-size: 17px; color: var(--ink); }
.dl dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.dl dd a:hover { color: var(--volt); border-bottom-color: var(--volt); }

/* --- Footer --------------------------------------------------------------- */
/* No margin-top: the last content section already carries a 96px bottom pad, and
   adding another 96px here left a dead band between the CTA and the footer. */
.footer { border-top: 1px solid var(--hairline); padding: 64px 0 var(--sp-xl); }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-xl); }
.footer h5 { margin: 0 0 var(--sp-md); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { font-size: 14px; line-height: 2; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--volt); }
.footer p { font-size: 14px; color: var(--muted); max-width: 42ch; }
.footer__legal {
  margin-top: var(--sp-xxl); padding-top: var(--sp-lg); border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap;
  font-size: 13px; color: var(--muted-soft);
}

/* --- Language switcher ----------------------------------------------------- */
/* <details>/<summary>, so the dropdown works with no JavaScript. It stays open
   until the summary is clicked again or the page navigates away — there is no
   click-outside-to-close without a script, and that is an acceptable trade for
   keeping the site script-free. */
.lang { position: relative; flex-shrink: 0; }
.lang > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--surface-card); border: 1px solid var(--hairline-strong);
  color: var(--body); font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after { content: '▾'; font-size: 10px; color: var(--muted); }
.lang > summary:hover { color: var(--ink); background: var(--surface-elevated); }
.lang[open] > summary { color: var(--ink); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--surface-card); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
}
.lang__menu a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-md); padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 14px; text-decoration: none; color: var(--body);
}
.lang__menu a:hover { background: var(--surface-elevated); color: var(--ink); }
.lang__menu a[aria-current='true'] { color: var(--volt); }
.lang__menu a i { font-style: normal; font-size: 12px; color: var(--muted-soft); }
/* The endonyms would otherwise pull the Cyrillic and Arabic subsets onto every
   page on the site for the sake of two words in a menu. Rendering them in the
   operating system's own faces keeps those downloads on the pages that are
   actually written in the script. */
.lang__menu .native {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               var(--cjk), 'Geeza Pro', Tahoma, sans-serif;
}
/* — except on a page already written in it, where the face is loaded anyway. */
html[lang='ru'] .lang__menu .native,
html[dir='rtl'] .lang__menu .native { font-family: inherit; }

/* --- Chinese --------------------------------------------------------------- */
/* The display tracking (-2.5px at 72px) is tuned for Latin letterforms and closes
   CJK glyphs up until they touch. Relaxed, not removed. */
html[lang^='zh'] h1 { letter-spacing: -1px; }
html[lang^='zh'] h2 { letter-spacing: -0.5px; }
html[lang^='zh'] h3, html[lang^='zh'] h4 { letter-spacing: 0; }
html[lang^='zh'] .stats .n { letter-spacing: 0; }
html[lang^='zh'] .lead, html[lang^='zh'] p { line-height: 1.75; }
html[lang^='zh'] .card li { line-height: 1.7; }

/* --- Arabic (RTL) ---------------------------------------------------------- */
/* Letter-spacing is the one that matters: Arabic is a joined script, and any
   positive or negative tracking pulls the glyphs out of their ligatures and
   renders the word as disconnected letters. It is reset everywhere, including on
   the uppercase-tracked eyebrows and labels. */
[dir='rtl'] body, [dir='rtl'] .btn { font-family: var(--sans-ar); }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4,
[dir='rtl'] .title-md, [dir='rtl'] .title-sm, [dir='rtl'] .eyebrow,
[dir='rtl'] .stats .n, [dir='rtl'] .stats .k, [dir='rtl'] .panel__title,
[dir='rtl'] .panel th, [dir='rtl'] .footer h5, [dir='rtl'] .steps .num,
[dir='rtl'] .brandmark span { letter-spacing: 0; }
[dir='rtl'] h1 { line-height: 1.25; }
[dir='rtl'] h2 { line-height: 1.3; }
[dir='rtl'] h3 { line-height: 1.35; }
[dir='rtl'] .lead, [dir='rtl'] p { line-height: 1.8; }
[dir='rtl'] .card li { padding: 10px var(--sp-lg) 10px 0; line-height: 1.75; }
[dir='rtl'] .card li::before { left: auto; right: 0; }
[dir='rtl'] .panel th, [dir='rtl'] .dl dt { text-align: right; }
[dir='rtl'] .panel__title { margin-left: 0; margin-right: var(--sp-xs); }
/* `.skip` and `.nav__cta` need no override here: both were switched to logical
   properties at their own rules, which is the better fix wherever the physical and
   logical versions mean the same thing in LTR. */
/* Latin technical strings — ratings, part descriptions, phone numbers, the email
   address — are marked dir="ltr" inline in the Arabic pages. This just stops the
   monospace column inheriting the RTL text-align. */
[dir='rtl'] [dir='ltr'] { text-align: left; }

/* --- Long-form article ----------------------------------------------------- */
/* Everything here is scoped under `.post` or `.postlist` and nothing above this
   line is modified, so the four marketing pages render byte-identically. The
   display scale is deliberately not reused: 72px h1 and 56px h2 are tuned for a
   hero with six words in it, and reading an 1,800-word article at that rhythm is
   exhausting. Article headings step down to a scale that still reads as the same
   family — same weights, same negative tracking, one size class smaller. */
.post { max-width: 760px; margin: 0 auto; }
.post h1 { font-size: 46px; line-height: 1.1; letter-spacing: -1.6px; }
.post h2 {
  font-size: 29px; line-height: 1.25; letter-spacing: -0.8px;
  margin: var(--sp-xxl) 0 0; padding-top: var(--sp-lg);
  border-top: 1px solid var(--hairline);
}
.post h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.3px; margin: var(--sp-xl) 0 0; }
.post h4 { font-size: 17px; line-height: 1.4; letter-spacing: 0; margin: var(--sp-lg) 0 0; }
/* Full column width: the global 70ch cap is narrower than the 760px column and
   would leave the text ragged against the table and figure edges. */
.post p { font-size: 17px; line-height: 1.75; max-width: none; }
/* No `:first-of-type` brightening rule here. The first <p> in an article is the
   eyebrow, and a `.post > p:first-of-type` selector outranks `.eyebrow` on
   specificity — it silently repainted the accent line grey. `.post__lede` carries
   the opening emphasis explicitly instead. */

.post__meta {
  margin: var(--sp-md) 0 0; display: flex; flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md); font-size: 13px; color: var(--muted);
}
.post__meta time { color: var(--muted); }
.post__lede { font-size: 19px; line-height: 1.6; color: var(--body-strong); margin: var(--sp-lg) 0 0; }

.post ul, .post ol { margin: var(--sp-md) 0 0; padding-inline-start: var(--sp-lg); }
.post li { font-size: 17px; line-height: 1.75; margin-top: var(--sp-xs); }
.post li::marker { color: var(--volt); }

.post a { color: var(--volt); text-decoration: none; border-bottom: 1px solid rgba(47, 214, 113, 0.4); }
.post a:hover { border-bottom-color: var(--volt); }
.post strong { color: var(--ink); font-weight: 600; }

/* Formulae and worked arithmetic. Not a code block in the programming sense, but
   it wants the same fixed-width treatment so the operands line up. */
.post code { font-family: var(--mono); font-size: 0.9em; color: var(--body-strong); }
.post pre {
  margin: var(--sp-lg) 0 0; padding: var(--sp-md) var(--sp-lg); overflow-x: auto;
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--body-strong);
}

/* Tables carry real content in these articles rather than decorating one, so they
   get the hairline treatment from `.panel` without the terminal chrome. The wrapper
   is what scrolls — a table that sets its own overflow loses its border radius and
   its header row sticks to nothing. */
.tablewrap {
  margin: var(--sp-lg) 0 0; overflow-x: auto;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
}
.post table { width: 100%; border-collapse: collapse; font-size: 14px; }
.post thead th {
  text-align: start; padding: 12px var(--sp-md); vertical-align: bottom;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); background: var(--surface-soft);
  border-bottom: 1px solid var(--hairline-strong); white-space: nowrap;
}
.post tbody td {
  padding: 12px var(--sp-md); vertical-align: top; line-height: 1.6;
  color: var(--body); border-bottom: 1px solid var(--hairline);
}
.post tbody tr:last-child td { border-bottom: 0; }
.post tbody th {
  text-align: start; padding: 12px var(--sp-md); vertical-align: top;
  font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--hairline);
}

.figure { margin: var(--sp-xl) 0 0; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption { margin-top: var(--sp-sm); font-size: 13px; color: var(--muted); }

.post blockquote {
  margin: var(--sp-lg) 0 0; padding-inline-start: var(--sp-lg);
  border-inline-start: 2px solid var(--volt); color: var(--body-strong);
}
.post hr { margin: var(--sp-xxl) 0 0; border: 0; border-top: 1px solid var(--hairline); }

/* Sources and standards lists sit at the foot of every article and are reference
   apparatus, not body copy — smaller, and the URLs wrap rather than widen the page. */
.refs { margin-top: var(--sp-xl); }
.refs li { font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.refs a { color: var(--body); border-bottom-color: var(--hairline-strong); }
.refs a:hover { color: var(--volt); border-bottom-color: var(--volt); }

/* --- Article index --------------------------------------------------------- */
.postlist { margin: var(--sp-xl) 0 0; padding: 0; list-style: none; max-width: 860px; }
.postlist li { border-top: 1px solid var(--hairline); }
.postlist li:last-child { border-bottom: 1px solid var(--hairline); }
.postlist a {
  display: block; padding: var(--sp-lg) 0; text-decoration: none; color: inherit;
}
.postlist a:hover .title-md { color: var(--volt); }
.postlist .k {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.postlist p { margin-top: var(--sp-xs); font-size: 15px; color: var(--body); max-width: 68ch; }

/* Same reasoning as the marketing pages: joined script, so no tracking anywhere,
   and the physical padding on list markers has to flip. */
[dir='rtl'] .post h1, [dir='rtl'] .post h2, [dir='rtl'] .post h3,
[dir='rtl'] .post h4, [dir='rtl'] .postlist .k { letter-spacing: 0; }
[dir='rtl'] .post p, [dir='rtl'] .post li { line-height: 1.9; }
html[lang^='zh'] .post h1 { letter-spacing: -0.5px; }
html[lang^='zh'] .post h2, html[lang^='zh'] .post h3 { letter-spacing: 0; }
html[lang^='zh'] .post p, html[lang^='zh'] .post li { line-height: 1.9; }

@media (max-width: 767px) {
  .post h1 { font-size: 32px; letter-spacing: -1px; }
  .post h2 { font-size: 24px; letter-spacing: -0.5px; }
  .post h3 { font-size: 19px; }
  .post p, .post li { font-size: 16px; }
  .post__lede { font-size: 17px; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1023px) {
  h1 { font-size: 52px; letter-spacing: -1.8px; }
  h2 { font-size: 40px; letter-spacing: -1.5px; }
  h3 { font-size: 32px; letter-spacing: -1px; }
  .hero__grid { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .cta { padding: var(--sp-xxl); }
}
@media (max-width: 767px) {
  :root { --sp-section: 64px; }
  h1 { font-size: 38px; letter-spacing: -1.2px; }
  h2 { font-size: 30px; letter-spacing: -1px; }
  h3 { font-size: 26px; letter-spacing: -0.8px; }
  .lead { font-size: 17px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .n { font-size: 40px; }
  .logos { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .cta { padding: var(--sp-lg); }
  .card { padding: var(--sp-lg); }
  .nav__inner { height: auto; padding: var(--sp-sm) 0; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); }
  .nav__cta { margin-inline-start: auto; gap: var(--sp-xs); }
  .nav__links { order: 3; width: 100%; gap: var(--sp-md); overflow-x: auto; padding-bottom: 2px; }
  .panel { overflow-x: auto; }
  /* The switcher and the quotation button together are wider than a 375px viewport,
     so .nav__cta wraps as a unit onto its own row rather than overflowing. */
  .nav__cta { flex-wrap: wrap; row-gap: var(--sp-xs); }
  .lang__menu { min-width: 170px; }
}