/* Self-hosted fonts (OFL, from Google Fonts 2026-10-13): no third-party request, preloaded in <head>. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/dmsans-latin-ext-v17.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/dmsans-latin-v17.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; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/spacegrotesk-latin-ext-v22.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/spacegrotesk-latin-v22.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; }
/* Metric-matched fallbacks. Re-measured 2026-10-14 in Chromium on the home copy of en, de, es, pl and ro (web font width over fallback width: 0.984 to 1.0045). The sizes are then set from measured layout shift on the seven home pages at 360, 390, 768 and 1280 px: the Space Grotesk bold face is deliberately 2.8% wide, because the longest Romanian heading wraps in the web font and must already wrap in the fallback, against the real web faces at each weight: the earlier single regular face (105.3% / 110.9%) left bold text synthesized from regular, about 8% wider than the web font, so the proof chips re-wrapped when the font arrived (CLS 0.14 at 768px). Now a regular and a bold face per family, each sized to its own weight range. The home page inlines these (the web faces load after first paint), so the swap must not move layout. */
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'); font-weight: 400 500; size-adjust: 104.2%; ascent-override: 94.2%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; size-adjust: 101%; ascent-override: 94.2%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'); font-weight: 400 500; size-adjust: 107.5%; ascent-override: 88.7%; descent-override: 26.3%; line-gap-override: 0%; }
/* bold display fallback 101.2% (was 102.8%): measured 2026-10-15 in Chrome, Arial Bold ran 1.6-1.7% wider than Space Grotesk on headings, so the
   pricing H1 wrapped to two lines until the web font arrived (desktop CLS 0.109) */
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; size-adjust: 101.2%; ascent-override: 88.7%; descent-override: 26.3%; line-gap-override: 0%; }
/* ==========================================================================
   Keysender Design System v3  |  "Light Futurism"
   Immutable-inspired: warm light canvas, one accent, dark buttons, less is more
   Space Grotesk (display) + DM Sans (body) | WCAG AA | reduced-motion safe
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Canvas */
  --paper: #faf8f4;         /* page background, warm off-white */
  --paper-2: #f3f0ea;       /* tinted sections */
  --card: #ffffff;
  --line: #e7e3da;
  --line-strong: #d8d3c8;

  /* Ink */
  --ink: #14151a;           /* near-black text + dark buttons */
  --ink-2: #1d1e25;
  --muted: #575b66;         /* 6.4:1 on paper, 5.97:1 on paper-2 (measured 2026-09-23) */
  --soft: #676c78;          /* 4.96:1 on paper, 4.62:1 on paper-2; the old #6f7480 was 4.41 and 4.12, below AA, though its comment said 4.9 */

  /* The one accent */
  --accent: #6736f5;        /* Keysender purple */
  --accent-deep: #5527d9;
  --accent-soft: #efeafe;
  --accent-line: #d9cdfc;
  --accent-glow: rgba(103, 54, 245, 0.28);

  --green: #157f3d;
  --amber: #92610a;

  /* Dark band (footer + final CTA only) */
  --band: #14151a;
  --band-2: #1b1c23;
  --band-line: rgba(255, 255, 255, 0.1);
  --band-text: #f4f3ef;
  --band-mute: #a5a8b3;

  /* Type */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", "Segoe UI", system-ui, sans-serif;
  --fs-900: clamp(2.7rem, 6.5vw, 4.6rem);
  --fs-800: clamp(2rem, 4.4vw, 3rem);
  --fs-700: clamp(1.6rem, 3vw, 2.1rem);
  --fs-600: 1.3rem;
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.875rem;
  --fs-200: 0.8125rem;

  /* Shape + depth */
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 21, 26, 0.04), 0 6px 20px rgba(20, 21, 26, 0.05);
  --shadow-2: 0 2px 8px rgba(20, 21, 26, 0.06), 0 18px 44px rgba(20, 21, 26, 0.09);
  --shadow-nav: 0 2px 6px rgba(20, 21, 26, 0.05), 0 12px 32px rgba(20, 21, 26, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 240ms;

  /* Layout */
  --container: 1140px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* HARD GATE: no wiggle, and no white space revealed when the page is dragged past an edge.
   `overscroll-behavior: none` kills the elastic rubber-band on every edge, so dragging left,
   right, or past the bottom can never expose the canvas behind the page. `overflow-x: hidden`
   is the belt to that braces: it stops a stray wide element producing a horizontal wiggle in
   the first place. The background is set on `html` as well as `body` so that even where a
   browser ignores overscroll-behavior (older Safari), the exposed area is the page colour and
   not white. Enforced by tools/tests/specs/seo/responsive.spec.js. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  overscroll-behavior: none;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .nav a:focus-visible, .login:focus-visible, .nav-toggle:focus-visible, details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utility ---------- */
.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accent { color: var(--accent); }
a.accent { text-decoration: underline; text-underline-offset: 0.2em; } /* a link in running text is not distinguishable by colour alone (WCAG 1.4.1) */
.eyebrow,
.section-head h2.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--tint { background: var(--paper-2); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.section-head h2 { font-size: var(--fs-800); margin: 0.7rem 0 0.6rem; }
.section-head p { font-size: var(--fs-500); color: var(--muted); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.55rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-400);
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) ease,
    border-color var(--t-fast) ease, box-shadow var(--t-med) ease, color var(--t-fast) ease;
  min-height: 48px;
}
.btn:active { transform: scale(0.98); }
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-1); }
.btn--dark:hover { background: #000; box-shadow: 0 4px 14px rgba(20, 21, 26, 0.22); }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); box-shadow: 0 6px 22px var(--accent-glow); }

.btn--ghost {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--band { background: #fff; color: var(--ink); }
.btn--band:hover { box-shadow: 0 6px 24px rgba(255, 255, 255, 0.25); }
.btn--band-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn--band-ghost:hover { border-color: #fff; }

.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--fs-500); }
.btn--sm { padding: 0.5rem 1.1rem; min-height: 44px; font-size: var(--fs-300); }

/* ---------- Header (floating pill) ---------- */
/* HARD RULE: the header must never cover page content.
   The pill is sticky and pulled out of flow by --header-overlap so a padded hero can sit
   behind it. That means EVERY block that can be the first child after .header must reserve
   at least --header-overlap of top padding. .page-hero does this via its padding-block; any
   other first block (e.g. the help center's .hc-crumbbar) must add it explicitly. Adding a
   new top-of-page block without that clearance is a bug - tools/tests/specs/header-overlap
   asserts the header never intersects the first content block. */
:root { --header-overlap: 68px; }
.header { position: sticky; top: 0.9rem; z-index: 60; margin-bottom: calc(var(--header-overlap) * -1); }
/* In-page anchors must land below the pill, not behind it. */
:target { scroll-margin-top: calc(var(--header-overlap) + 1rem); }
.header__inner {
  display: flex; align-items: center; gap: 1.6rem;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-nav);
  padding: 0.55rem 0.65rem 0.55rem 1.2rem;
  min-height: 58px;
}
.logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); min-height: 44px; } /* 44 px tap target, same visual size */
.logo svg { height: 28px; width: auto; }
.logo .word { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: 1.4rem; margin-inline-start: auto; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: var(--fs-300); font-weight: 500; color: var(--muted); transition: color var(--t-fast) ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.header__cta { display: flex; align-items: center; gap: 0.7rem; margin-inline-start: 0.3rem; }
.header__cta .btn, .header__login { white-space: nowrap; } /* a long translated label must not wrap into a second line when the web font replaces the fallback */
/* Log in: a plain link, its own element, visible at every width (home v3: a third of home visitors
   come to log in). On phones it sits beside the menu toggle, never inside the collapsed menu. */
.login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.4rem; font-size: var(--fs-300); font-weight: 600; color: var(--muted); white-space: nowrap; }
.login:hover { color: var(--ink); }
.header__login { margin-inline-start: 0.2rem; }

.nav-toggle {
  min-width: 44px; flex-shrink: 0; /* never squeezed below a 44 px target by a long translated header (ar at 320 px) */
  display: none;
  margin-inline-start: auto;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  width: 44px; height: 44px;
  color: var(--ink);
  cursor: pointer;
  align-items: center; justify-content: center;
}
@media (max-width: 980px) {
  .header__inner { gap: 0.5rem; }
  .header__login { order: 2; margin-inline-start: auto; }
  .nav-toggle { display: inline-flex; order: 3; margin-inline-start: 0; }
  .nav, .header__cta { display: none; }
  .header.is-open .header__inner { border-radius: var(--r-xl); flex-wrap: wrap; }
  .header.is-open .nav {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; order: 4; gap: 0.3rem; padding: 0.6rem 0.6rem 0.2rem;
  }
  .header.is-open .nav a { font-size: var(--fs-500); }
  .header.is-open .header__cta { display: flex; width: 100%; order: 5; padding: 0.4rem 0.6rem 0.8rem; }
  .header.is-open .header__cta { flex-wrap: wrap; }
  .header.is-open .header__cta .btn { flex: 1 1 auto; min-width: 0; } /* long labels (Arabic at 320 px) wrap to a second row instead of leaving the screen */
}

/* ---------- Hero ---------- */
/* Home v3 (2026-10-14): the hero is won in the first screen, so it is compact: no 100vh, tight
   spacing, clamp() type. The top padding still clears --header-overlap (header-overlap.spec). */
.hero { position: relative; padding-block: clamp(5.5rem, 9vw, 7.5rem) clamp(1.25rem, 3vw, 2rem); overflow: hidden; }
.hero--home .hero__inner { max-width: 54rem; }
.hero.hero--home h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 42% at 50% 0%, rgba(103, 54, 245, 0.09), transparent 70%),
    radial-gradient(30% 30% at 88% 20%, rgba(103, 54, 245, 0.05), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  mask-image: radial-gradient(60% 55% at 50% 24%, rgba(0,0,0,0.55), transparent 80%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 24%, rgba(0,0,0,0.55), transparent 80%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 50rem; margin-inline: auto; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  padding: 0.42rem 1rem;
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--muted);
}
.pill b { color: var(--ink); font-weight: 600; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 { font-size: var(--fs-900); margin: 1.1rem 0 0.9rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub { font-size: var(--fs-500); color: var(--muted); max-width: 36rem; margin: 0 auto 1.5rem; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cta-note { margin-top: 0.9rem; font-size: var(--fs-300); color: var(--soft); }
.trust-line {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  display: flex; align-items: center; gap: 1.2rem;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--soft);
  justify-content: center;
}
.trust-line::before, .trust-line::after { content: ""; height: 1px; flex: 1; max-width: 160px; background: var(--line-strong); }

/* ---------- Pains (vendor problems) ---------- */
.pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 52rem; margin-inline: auto; }
.pains--3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
.pains--4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
@media (max-width: 1100px) { .pains--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) { .pains--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pains, .pains--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pains--4 { grid-template-columns: 1fr; } }
.pain {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.4rem 1.5rem;
  display: grid; gap: 0.55rem;
}
.pain p { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; }
.pain svg { flex: none; width: 15px; height: 15px; margin-top: 4px; }
.pain p > span { flex: none; display: inline-flex; }
.pain__q { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.pain__q .x { color: var(--soft); }
.pain__a { font-size: var(--fs-300); color: var(--muted); }
.pain__a .tick { color: var(--accent); }
.pain--link { color: inherit; transition: border-color var(--t-fast) ease; }
.pain--link:hover { border-color: var(--accent); }

/* ---------- Language switch + RTL ---------- */
.lang-switch {
  margin-top: 0.8rem;
  font-size: var(--fs-300);
  color: var(--soft);
}
.lang-switch a { display: inline-block; padding-block: 0.1rem; color: var(--accent); font-weight: 600; }
.lang-switch a:hover { color: var(--accent-deep); }
.lang-switch .sep { margin: 0 0.45rem; opacity: 0.6; }
/* [dir="rtl"] needs no overrides here: the rules below use logical properties. */
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { margin: 0 1.3rem 1.05rem 0; }

[dir="rtl"] .article-cta .cta-strip__actions { justify-content: flex-start; }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* ---------- Article contextual CTA ---------- */
.article-cta {
  max-width: 43rem;
  margin: 2.4rem auto 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
}
.article-cta p { margin: 0 0 0.9rem; color: var(--ink-2); font-size: var(--fs-400); }
.article-cta b { font-family: var(--font-display); }

/* ---------- Mid-page CTA strip ---------- */
.cta-strip {
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.3rem 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 52rem;
  margin-inline: auto;
}
.cta-strip p { font-family: var(--font-display); font-weight: 600; margin: 0; }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
@media (max-width: 640px) {
  .cta-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-strip__actions { flex-direction: column; }
}

/* ---------- Objections (fair questions) ---------- */
.objections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; max-width: 64rem; margin-inline: auto; }
@media (max-width: 900px) { .objections { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .objections { grid-template-columns: 1fr; } }
.objections .objection { padding: 1rem 1.15rem; }
.objection {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.4rem 1.5rem;
}
.objection h3 { font-size: var(--fs-400); margin-bottom: 0.35rem; }
.objection p { font-size: var(--fs-300); color: var(--muted); line-height: 1.5; margin: 0; }

/* ---------- Proof strip (home v3): the channel names, in the first screen ---------- */
.proof { padding-block: 0.25rem clamp(0.5rem, 1.5vw, 1rem); position: relative; z-index: 1; }
.proof__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1.5rem; margin: 0; }
.proof__row + .proof__row { margin-top: 0.1rem; }
.proof__label {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft);
  display: inline-flex; align-items: center; min-height: 44px;
}
.proof__label a:hover { color: var(--accent); }
.proof__row a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.proof__row a:hover { color: var(--accent); }
/* Tablet only: fixed-width cells, so the strip wraps the same way with the fallback font and with the web font and the font swap moves nothing (CLS 0.085 at 768px without this; phones and desktop are stable without it). Widest label measured 122px at 1.02rem. */
@media (min-width: 641px) and (max-width: 999px) {
  .proof__row a { min-width: 8.25rem; justify-content: center; }
  .proof__row a.proof__all { min-width: 11rem; }
  .proof__row--auto a { min-width: 6.5rem; }
}
.proof__row a.proof__all { color: var(--accent); gap: 0.3rem; }
.proof__row a.proof__all svg { width: 15px; height: 15px; }
.proof__row--auto a { font-size: 0.95rem; }

/* ---------- Fair questions (home v3): q/a rows, answers visible, no accordion ---------- */
.qa { max-width: 64rem; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; }
.qa__row { padding: 0.7rem 0; border-top: 1px solid var(--line-strong); }
.faq-band .section-head { margin-bottom: 1.1rem; }
.faq-band.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.qa__row h3 { font-size: var(--fs-300); font-weight: 600; margin: 0 0 0.15rem; }
.qa__row p { margin: 0; font-size: var(--fs-300); color: var(--muted); line-height: 1.5; }
@media (min-width: 768px) { .qa { grid-template-columns: 1fr 1fr; } }

/* ---------- Channel wall (categorized rows) ---------- */
.channels { padding-block: 1rem clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 1; }
.channel-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 1.2rem; padding: 0.9rem 0; }
.channel-row + .channel-row { border-top: 1px solid var(--line); }
.channel-row .label {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft);
}
.channel-row .label a:hover { color: var(--accent); }
@media (max-width: 720px) { .channel-row { grid-template-columns: 1fr; gap: 0.5rem; } }
.channel-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.9rem; align-items: baseline; }
.channel-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted);
  transition: color var(--t-fast) ease;
  white-space: nowrap;
}
.channel-links a:hover { color: var(--accent); }
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.marquee__track { display: flex; gap: 2.6rem; width: max-content; animation: marquee 70s linear infinite; align-items: center; }
.marquee--alt .marquee__track { animation-duration: 85s; animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mark {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); white-space: nowrap;
  transition: color var(--t-fast) ease;
}
a.mark:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee__track > *:nth-child(n+9) { display: none; }
}

/* ---------- Stat cards ---------- */
.statcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 52rem; margin-inline: auto; }
@media (max-width: 720px) { .statcards { grid-template-columns: 1fr; } }
.statcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.3rem 1.5rem;
  text-align: center;
}
.statcard b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; }
.statcard b .up { color: var(--accent); }
.statcard span { font-size: var(--fs-300); color: var(--muted); }

/* ---------- Feature cards ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .bento { grid-template-columns: 1fr; } }
.bento--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .bento--3 { grid-template-columns: 1fr; } }

/* ---------- Suite groups (all offerings, grouped) ---------- */
.suite-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .suite-groups { grid-template-columns: 1fr; } }
.suite-group {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.6rem;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) ease, border-color var(--t-med) ease;
}
.suite-group:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.suite-group .icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.suite-group .icon svg { width: 21px; height: 21px; }
.suite-group h3 { font-size: var(--fs-500); margin-bottom: 0.8rem; }
.suite-group ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.suite-group li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-300); color: var(--muted); line-height: 1.5; }
.suite-group li svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--accent); }

/* ---------- Category group headers (integrations hub) ---------- */
.group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.group-head h2 { font-size: var(--fs-600); }
.group-head p { color: var(--muted); font-size: var(--fs-300); margin-top: 0.2rem; }
.group-head .count-chip {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-300); font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.group-head .count-chip:hover { color: var(--accent-deep); }
.cat-filter .count { opacity: 0.55; margin-inline-start: 0.3rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) ease, border-color var(--t-med) ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.card .icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 1rem;
}
.card .icon svg { width: 21px; height: 21px; }
.card h3 { font-size: var(--fs-500); margin-bottom: 0.4rem; }
.card p { font-size: var(--fs-300); color: var(--muted); line-height: 1.6; }
.also {
  margin-top: 1.4rem;
  text-align: center;
  font-size: var(--fs-300);
  color: var(--soft);
}
.also b { color: var(--muted); font-weight: 600; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.6rem;
}
.step .n {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-300); font-weight: 700;
}
.step h3 { font-size: var(--fs-500); margin: 0.85rem 0 0.35rem; }
.step p { font-size: var(--fs-300); color: var(--muted); }

/* ---------- Scale band ---------- */
.scale-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
@media (max-width: 860px) { .scale-band { grid-template-columns: 1fr; } }
.scale-band h2 { font-size: var(--fs-800); margin: 0.7rem 0 0.7rem; }
.scale-band .lede { color: var(--muted); font-size: var(--fs-500); margin-bottom: 1.3rem; max-width: 26rem; }
.scale-link { margin: 0; }
.scale-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-300); font-weight: 600;
}
.chip svg { width: 14px; height: 14px; color: var(--accent); }
.panel-mock {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.panel-mock__bar { display: flex; align-items: center; gap: 6px; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.panel-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.panel-mock__bar span { margin-inline-start: 0.5rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.panel-mock__body { padding: 1rem; display: grid; gap: 0.6rem; }
.mock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-300);
  color: var(--muted);
}
.mock-row b { color: var(--ink); font-weight: 600; }
.mock-row .ok { color: var(--green); font-weight: 600; white-space: nowrap; }
.mock-row .hold { color: var(--amber); font-weight: 600; white-space: nowrap; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 52rem; margin-inline: auto; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.plan--featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2); }
.plan__badge {
  position: absolute; top: -12px; inset-inline-start: 1.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.75rem;
}
.plan h3 { font-size: var(--fs-600); }
.plan .price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; }
.plan .price span { font-size: var(--fs-300); font-weight: 500; color: var(--soft); letter-spacing: 0; }
.plan .tagline { color: var(--muted); font-size: var(--fs-300); min-height: 2.6em; }
/* Subtle price qualifiers. Deliberately quiet: "as low as" must not compete with the number,
   and the credits reassurance sits under the tagline as a footnote, not a selling line. */
.plan .price__prefix { display: block; font-size: var(--fs-200); font-weight: 500; color: var(--soft); letter-spacing: 0.01em; margin-bottom: 0.1rem; }
.plan .price__note { color: var(--soft); font-size: var(--fs-200); margin: -0.35rem 0 0.15rem; }
/* Guaranteed gap above the CTA. The button uses margin-top:auto to sit flush at the card
   bottom, and auto cannot also express a minimum, so the spacing lives on whichever element
   precedes it (the tagline, or the price note when a plan has one). */
.plan .tagline, .plan .price__note { margin-bottom: 0.65rem; }
/* auto margin, not a fixed one: plans carry different amounts of copy (only Pro has the
   "as low as" prefix and the credits note), so the CTAs only line up across cards if the
   button is pushed to the bottom of the flex column. */
.plan .btn { margin-top: auto; }

.compare { max-width: 52rem; margin: 2.6rem auto 0; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.compare th, .compare td { padding: 0.8rem 1.05rem; text-align: start; font-size: var(--fs-300); border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--font-display); background: var(--paper-2); }
.compare td:nth-child(2), .compare td:nth-child(3), .compare th:nth-child(2), .compare th:nth-child(3) { text-align: center; width: 22%; }
.compare .yes { color: var(--green); display: inline-flex; justify-content: center; }
.compare .yes svg { width: 18px; height: 18px; }
.compare .no { color: var(--soft); }
.compare .no::before { content: ""; display: inline-block; width: 0.9em; height: 2px; vertical-align: middle; background: currentColor; border-radius: 1px; }
.compare .val { font-weight: 600; }
/* Safety net (zero specificity): a bare inline icon defaults to text scale,
   never full-width. Intentional sizes always win. */
svg:where(:not([width]):not([height])) { width: 1.1em; height: 1.1em; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 52rem; margin-inline: auto; }
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.6rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.quote .stars { display: flex; gap: 3px; color: var(--accent); }
.quote .stars svg { width: 14px; height: 14px; }
.quote p { font-size: var(--fs-400); line-height: 1.6; color: var(--ink-2); }
.quote footer { font-size: var(--fs-300); color: var(--soft); }
.quote footer b { color: var(--ink); font-weight: 600; }

/* ---------- Insights cards ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 960px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }
.post {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) ease, border-color var(--t-med) ease;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.post .cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.post .lang-chip {
  margin-inline-start: 0.5rem;
  font-size: 0.66rem; font-weight: 700;
  color: var(--soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.45rem;
  vertical-align: 1px;
}
.post h3 { font-size: 1.05rem; line-height: 1.32; }
.post h3 a { display: inline-block; padding-block: 0.2rem; }
.post p { font-size: var(--fs-300); color: var(--muted); }
.post .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-size: var(--fs-300); font-weight: 600; color: var(--accent); }
.post .more:hover { color: var(--accent-deep); }

.cat-filter { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.8rem; }
.cat-filter a {
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 0.42rem 1.05rem;
  font-family: var(--font-display);
  font-size: var(--fs-300); font-weight: 600;
  color: var(--muted);
  transition: all var(--t-fast) ease;
}
.cat-filter a:hover { border-color: var(--accent); color: var(--accent); }
.cat-filter a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 44rem; margin-inline: auto; display: grid; gap: 0.7rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast) ease;
}
.faq details[open] { border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-400);
}
.faq summary::-webkit-details-marker { display: none; }
/* FAQ questions are h3s inside <summary> (AEO: the heading outline carries each question); they keep the summary's look. */
.faq-q { font: inherit; margin: 0; color: inherit; letter-spacing: inherit; line-height: inherit; }
.bd-faq .faq-q { display: inline; }
.faq summary .chev { flex: none; transition: transform var(--t-med) var(--ease); color: var(--soft); }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq .a { padding: 0 1.25rem 1.1rem; color: var(--muted); font-size: var(--fs-300); line-height: 1.65; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { position: relative; padding-block: clamp(6.5rem, 11vw, 8.5rem) clamp(2.2rem, 4vw, 3.2rem); overflow: hidden; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(42% 46% at 50% 0%, rgba(103, 54, 245, 0.08), transparent 70%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 46rem; }
.page-hero__inner--center { margin-inline: auto; text-align: center; }
.page-hero h1 { font-size: var(--fs-800); margin: 0.7rem 0 0.7rem; }
.page-hero p { font-size: var(--fs-500); color: var(--muted); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-300); color: var(--soft); margin-bottom: 0.5rem; }
.breadcrumbs a { display: inline-block; padding-block: 0.1rem; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { opacity: 0.55; }

/* ---------- Integration tiles ---------- */
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 960px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .int-grid { grid-template-columns: 1fr; } }
.int-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.3rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) ease, border-color var(--t-fast) ease;
}
.int-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.int-card .tile {
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.2rem;
  color: #fff;
  background: var(--tile-bg, var(--accent));
}
.tile--logo { width: 76px; height: 48px; padding: 6px 10px; background: var(--tile-bg); }
.tile--logo img { max-width: 100%; max-height: 22px; width: auto; height: auto; object-fit: contain; }
.tile--logo-dark { border: 1px solid var(--line); }
/* Wordmark tile: the brand-colour fallback for a connector with no logo file. Same 76x48 plate
   as .tile--logo so a real logo can drop in later without the grid shifting. Sized to fit the
   longest label ("Power Automate", which wraps to two lines). */
/* Doubled class so it outranks `.int-card .tile` (0,2,0), which pins tiles to 48x48 and would
   otherwise clip the label. Placed after that rule so the equal-specificity tie resolves here. */
.tile.tile--word {
  width: 76px; height: 48px; padding: 4px 6px;
  background: var(--tile-bg);
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.72rem; line-height: 1.15; letter-spacing: -0.01em;
  text-align: center; color: #fff;
}
/* The connector landing hero uses the taller plate; let the wordmark breathe there. */
.tile.tile--word.int-hero-logo {
  width: auto; min-width: 120px; max-width: 220px; height: 68px;
  padding: 14px 22px; font-size: 1.15rem; line-height: 1.2;
}
.int-hero-logo { width: auto; min-width: 120px; max-width: 220px; height: 68px; border-radius: var(--r-lg); padding: 14px 22px; margin-inline: auto; margin-bottom: 1.1rem; display: grid; place-items: center; box-shadow: var(--shadow-2); font-size: 1.9rem; }
.int-hero-logo img { max-height: 34px; max-width: 176px; width: auto; height: auto; object-fit: contain; }

/* Profit-alignment band (dark, mirrors CTA bookend, near pricing) */
.align-band {
  position: relative;
  background: var(--band);
  color: var(--band-text);
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.align-band::before {
  content: "";
  position: absolute; inset: -40% -10%;
  background: radial-gradient(45% 60% at 50% 120%, rgba(103, 54, 245, 0.4), transparent 70%);
  pointer-events: none;
}
.align-band h2 { position: relative; font-size: var(--fs-700); margin: 0.5rem 0 0.7rem; }
.align-band p { position: relative; color: var(--band-mute); font-size: var(--fs-500); max-width: 40rem; margin-inline: auto; }

/* One-line operating points (scale band) */
.scale-points {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-300);
  display: flex; align-items: center;
  white-space: nowrap;
  gap: 0.55rem;
  margin: 0;
}
.scale-points .dot { color: var(--accent); }
@media (max-width: 640px) {
  .scale-points { white-space: normal; flex-wrap: wrap; row-gap: 0.2rem; }
}
.int-card h3 { font-size: var(--fs-400); }
.int-card p { font-size: var(--fs-200); color: var(--soft); line-height: 1.45; }
.int-card .go { margin-inline-start: auto; color: var(--soft); transition: transform var(--t-fast) var(--ease), color var(--t-fast) ease; }
.int-card:hover .go { transform: translateX(3px); color: var(--accent); }

.int-hero-tile {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: #fff;
  background: var(--tile-bg, var(--accent));
  box-shadow: var(--shadow-2);
  margin-inline: auto;
  margin-bottom: 1.1rem;
}
.feature-rows { display: grid; gap: 1rem; max-width: 48rem; margin-inline: auto; }
.feature-row {
  display: grid; grid-template-columns: 50px 1fr; gap: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.4rem; box-shadow: var(--shadow-1);
}
.feature-row .icon {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.feature-row h3 { font-size: var(--fs-500); margin-bottom: 0.3rem; }
.feature-row p { font-size: var(--fs-300); color: var(--muted); line-height: 1.6; }
.video-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  max-width: 48rem;
  margin: 0 auto 2.2rem;
  background: var(--paper-2);
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-play { display: grid; place-content: center; justify-items: center; gap: 0.7rem; width: 100%; height: 100%; padding: 1rem; border: 0; cursor: pointer; font: 600 var(--fs-300) inherit; font-family: inherit; color: #fff; background: linear-gradient(135deg, var(--ink), var(--ink-2)); text-align: center; }
.video-play__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff; color: var(--ink); }
.video-play__icon svg { width: 1.3rem; height: 1.3rem; margin-inline-start: 0.15rem; }
.video-play:hover .video-play__icon { background: var(--accent-soft); }
.video-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }

/* ---------- Article / prose ---------- */
.prose { max-width: 43rem; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; color: #23252e; }
.prose h2 { font-size: var(--fs-600); margin: 2.3rem 0 0.8rem; }
.prose h3 { font-size: var(--fs-500); margin: 1.7rem 0 0.6rem; }
.prose p { margin-bottom: 1.05rem; }
.prose ul, .prose ol { margin: 0 0 1.05rem 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }
.prose blockquote { border-inline-start: 3px solid var(--accent); padding-inline-start: 1.1rem; margin: 1.3rem 0; color: var(--muted); font-style: italic; }
.prose img { border-radius: var(--r-md); margin: 1.3rem 0; }
.article-meta { display: flex; align-items: center; justify-content: center; gap: 0.8rem; font-size: var(--fs-300); color: var(--soft); }
.article-meta .cat { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; }
/* Insights article aids (2026-10-17): by-line and dates, answer box, key takeaways, table of contents. */
.article-meta { flex-wrap: wrap; row-gap: 0.3rem; }
.article-meta__by, .article-meta__date { color: var(--muted); }
.answer-box { max-width: 43rem; margin: 1.4rem auto 0; padding: 1rem 1.2rem; text-align: start; background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--r-md); }
.answer-box p { margin: 0; font-size: var(--fs-400); line-height: 1.6; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
/* Takeaways and contents share one card, so the reader sees one aid, not two boxes. */
.article-aids { max-width: 43rem; margin: 0 auto 1.8rem; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.takeaways, .toc { padding: 1rem 1.2rem; }
.takeaways + .toc { border-top: 1px solid var(--line); }
.takeaways__h, .toc__h { margin: 0 0 0.6rem; font-size: var(--fs-300); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.takeaways ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.4rem; color: var(--ink-2); }
.toc ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.1rem; }
.toc a { display: block; padding: 0.2rem 0; color: var(--accent); overflow-wrap: anywhere; }
.prose h2[id] { scroll-margin-top: calc(var(--header-overlap) + 1rem); }
.article-cta__scale { margin-top: 0.7rem; font-size: var(--fs-300); }

/* ---------- CTA band (dark) ---------- */
.cta-band { position: relative; background: var(--band); color: var(--band-text); overflow: hidden; border-radius: var(--r-xl); }
.cta-wrap { padding-block: clamp(2rem, 5vw, 3.5rem); }
.cta-band::before {
  content: "";
  position: absolute; inset: -40% -10%;
  background: radial-gradient(45% 60% at 50% 110%, rgba(103, 54, 245, 0.4), transparent 70%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 42rem; margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) 1.5rem; }
.cta-band h2 { font-size: var(--fs-800); margin-bottom: 0.8rem; }
.cta-band h2 em { font-style: normal; color: #b79cff; }
.cta-band p { color: var(--band-mute); font-size: var(--fs-500); margin-bottom: 1.8rem; }

/* ---------- Footer (dark) ---------- */
.footer {
  background: var(--band);
  color: var(--band-mute);
  padding: clamp(2.8rem, 6vw, 4rem) 0 2rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-size: var(--fs-300);
}
.footer__grid { display: grid; grid-template-columns: 1.15fr repeat(4, 0.7fr) 1.15fr; gap: 2rem; margin-bottom: 2.6rem; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.buyer-col .buyer-note {
  border: 1px solid var(--band-line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  font-size: var(--fs-200);
  line-height: 1.55;
}
.buyer-col .buyer-note p { margin: 0 0 0.5rem; }
.buyer-col .buyer-note a { color: #b79cff; font-weight: 600; display: inline-block; padding-block: 4px; }
.footer .logo { color: #fff; }
.footer h4, .footer__title { font-size: var(--fs-300); color: #fff; margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 600; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.footer a { transition: color var(--t-fast) ease; }
.footer a:hover { color: #fff; }
.footer .buyer-note {
  border: 1px solid var(--band-line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  margin-top: 1.1rem;
  max-width: 28rem;
}
.footer .buyer-note b { color: var(--band-text); display: block; margin-bottom: 0.25rem; }
.footer .buyer-note a { color: #b79cff; }
.footer__bottom {
  border-top: 1px solid var(--band-line);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.footer__bottom .socials { display: flex; gap: 0.8rem; }
.footer__bottom .socials a { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--band-line); border-radius: 50%; }
.footer__bottom .socials a:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.footer__bottom .socials svg { width: 15px; height: 15px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.06s; }
.reveal[data-d="2"] { transition-delay: 0.12s; }
.reveal[data-d="3"] { transition-delay: 0.18s; }
.reveal[data-d="4"] { transition-delay: 0.24s; }
.reveal[data-d="5"] { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Misc ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 1.8rem; }
.form-field input, .form-field textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  margin-top: 0.3rem; background: var(--card);
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==========================================================================
   Mobile dynamics
   ========================================================================== */
@media (max-width: 640px) {
  :root { --fs-900: clamp(2.05rem, 9.2vw, 2.7rem); --fs-800: clamp(1.75rem, 7.5vw, 2.2rem); }
  .container { width: calc(100% - 2rem); }
  .section { padding-block: 3rem; }
  .section--tight { padding-block: 2.2rem; }

  .header { top: 0.6rem; }
  .header__inner { padding-inline-start: 1rem; }

  .hero { padding-block: 5.6rem 1.4rem; }
  .hero h1 { margin: 0.9rem 0 0.7rem; }
  .hero__sub { font-size: var(--fs-400); margin-bottom: 1.2rem; }
  .hero__actions { gap: 0.6rem; }
  .proof__row { gap: 0 1rem; }
  .proof__row a { font-size: 0.95rem; }
  .proof__label { width: 100%; justify-content: center; min-height: 32px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero .pill { max-width: 100%; text-align: start; }
  .trust-line { letter-spacing: 0.12em; }
  .trust-line::before, .trust-line::after { display: none; }

  .channel-row { padding: 0.7rem 0; }
  .channel-row .label { font-size: 0.68rem; }
  .marquee__track { gap: 1.8rem; }

  .page-hero { padding-block: 5.8rem 2rem; }

  .card, .suite-group, .pain, .objection, .step, .quote, .plan { padding: 1.25rem; }
  .plan .price { font-size: 2.1rem; }
  .plan .tagline { min-height: 0; }
  .group-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .int-card { padding: 1rem 1.1rem; }
  .int-card p { display: none; }

  .compare th, .compare td { padding: 0.65rem 0.7rem; font-size: var(--fs-200); }
  .prose { font-size: 1rem; }

  .cta-band__inner { padding: 2.4rem 1.25rem; }
  .cta-band .hero__actions { flex-direction: column; }
  .cta-band .hero__actions .btn { width: 100%; }
  .cta-wrap .container { width: calc(100% - 1.2rem); }

  .footer { padding-top: 2.4rem; }
  .footer__grid { gap: 1.6rem; }
}

@media (max-width: 400px) {
  .hero .pill { font-size: var(--fs-200); }
  .statcard b { font-size: 1.5rem; }
}

/* Comfortable tap targets on any touch device */
@media (hover: none) {
  .nav a, .footer a, .cat-filter a { padding-block: 0.25rem; }
  .faq summary { padding-block: 1.1rem; }
}

/* ---------- Helper chat (2026-09-23): launcher + panel, no AI (assets/js/helper.js) ---------- */
.kh-launch { min-height: 44px; position: fixed; right: 1rem; bottom: 1rem; z-index: 65; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink); color: #fff; font: 600 var(--fs-300)/1 var(--font-body); box-shadow: var(--shadow-2); cursor: pointer; }
.kh-launch:hover { background: #000; }
.kh-launch[aria-expanded="true"] { visibility: hidden; }
.kh-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 66; width: min(24rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100dvh - 2rem)); display: none; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.kh-panel.is-open { display: flex; }
.kh-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.kh-name { margin: 0; font: 600 var(--fs-300) var(--font-display); color: var(--ink); }
.kh-close { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.2rem 0.4rem; }
.kh-log { flex: 1; overflow-y: auto; padding: 0.9rem; display: grid; gap: 0.7rem; align-content: start; overscroll-behavior: contain; }
.kh-msg--me { justify-self: end; max-width: 85%; background: var(--accent); color: #fff; border-radius: var(--r-md); padding: 0.5rem 0.75rem; }
.kh-msg--me .kh-text { color: #fff; }
.kh-msg--bot { max-width: 100%; }
.kh-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.75rem 0.85rem; }
.kh-title { margin: 0 0 0.35rem; font-weight: 600; color: var(--ink); font-size: var(--fs-300); }
.kh-text { margin: 0; font-size: var(--fs-300); line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.kh-foot { margin: 0.6rem 0 0; font-size: var(--fs-200); color: var(--soft); }
.kh-actions, .kh-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
.kh-action { display: inline-flex; padding: 0.4rem 0.7rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-200); font-weight: 600; text-decoration: none; }
.kh-chip { padding: 0.4rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-200); cursor: pointer; }
.kh-chip:hover { border-color: var(--accent); color: var(--accent); }
.kh-form { display: flex; gap: 0.4rem; padding: 0.7rem; border-top: 1px solid var(--line); }
.kh-input { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: inherit; font-size: 16px; }
.kh-send { padding: 0.55rem 0.9rem; border: 0; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
@media (max-width: 480px) { .kh-launch span { display: none; } .kh-launch { padding: 0.8rem; } }

/* One order's journey (/product/): five steps on one line, a vertical timeline on phones. */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; max-width: 60rem; margin: 0 auto; }
.journey::before { content: ""; position: absolute; top: 18px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--accent-line), var(--accent), var(--accent-line)); }
.journey__step { position: relative; text-align: center; }
.journey__icon { width: 36px; height: 36px; margin: 0 auto 0.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); color: var(--accent); position: relative; z-index: 1; }
.journey__icon svg { width: 17px; height: 17px; }
.journey__step h3 { font-size: var(--fs-400); margin-bottom: 0.15rem; }
.journey__step p { font-size: var(--fs-300); color: var(--muted); line-height: 1.45; margin: 0; }
.journey__note { display: inline-block; white-space: nowrap; margin-top: 0.4rem; padding: 0.1rem 0.5rem; font-size: 0.75rem; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; }
.journey__panel { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.4rem auto 0; max-width: 46rem; font-size: var(--fs-300); color: var(--muted); text-align: start; }
.journey__icon--sm { width: 28px; height: 28px; margin: 0; flex: none; border-width: 1px; }
.journey__icon--sm svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .journey { grid-template-columns: 1fr; gap: 0.9rem; }
  .journey::before { top: 18px; bottom: 18px; inset-inline-start: 17px; inset-inline-end: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent-line), var(--accent), var(--accent-line)); }
  .journey__step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 0.9rem; text-align: start; }
  .journey__icon { margin: 0; grid-row: span 3; }
  .journey__note { justify-self: start; }
  .journey__panel { justify-content: flex-start; }
}

/* ---------- Go-live pass (2026-10-13) ---------- */
.header__cta .btn--ghost { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 981px) { .nav { gap: 1rem; } }
.cta-note--link { margin-top: 0.3rem; }
.cta-note--link .accent { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.4rem; font-weight: 600; } /* 44 px target, the line keeps its height */
.doors-wrap { padding-block: 0.5rem 1.5rem; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 52rem; margin-inline: auto; }
.door { display: grid; gap: 0.25rem; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 1.1rem 1.3rem; color: var(--ink); transition: border-color var(--t-fast) ease, transform var(--t-fast) ease; }
.door:hover { border-color: var(--accent); }
.door p.door__t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400); line-height: 1.3; margin: 0; }
.door p { margin: 0; font-size: var(--fs-300); color: var(--muted); }
.door__go { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; min-height: 32px; font-size: var(--fs-300); font-weight: 600; color: var(--accent); }
.door__go svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .doors { grid-template-columns: 1fr; } }
.int-pill { display: inline-flex; align-items: center; margin-inline-start: 0.4rem; border-radius: var(--r-pill); padding: 0.15rem 0.6rem; font-size: var(--fs-200); font-weight: 600; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); white-space: nowrap; vertical-align: middle; }
.int-card--paused { border-style: dashed; }
.int-card.int-card--paused p { display: block; }
.notice-box { max-width: 43rem; margin: 1.4rem auto 0; padding: 1rem 1.2rem; text-align: start; background: var(--accent-soft); border: 1px solid var(--accent-line); border-inline-start: 4px solid var(--accent); border-radius: var(--r-md); }
.notice-box p { margin: 0; font-size: var(--fs-400); line-height: 1.6; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.status-line { max-width: 40rem; margin: 0 auto; text-align: center; font-size: var(--fs-500); color: var(--muted); }
@media (max-width: 480px) {
  .compare th, .compare td { padding: 0.55rem 0.5rem; font-size: 0.8rem; }
  .compare td:nth-child(2), .compare td:nth-child(3), .compare th:nth-child(2), .compare th:nth-child(3) { width: 26%; }
  .plans + .compare, .compare { margin-bottom: 0; }
  .section--tight:has(.compare) { padding-bottom: 72px; }
}
/* Channel picks as compact chips (real checkboxes, visually hidden) */
.sf-int-opts--chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .sf-int-opts--chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-int-opts--chips .sf-int { position: relative; justify-content: center; min-height: 44px; border-radius: var(--r-pill); border-color: var(--line-strong); text-align: center; }
.sf-int-opts--chips .sf-int input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sf-int-opts--chips .sf-int:has(input:checked) { color: var(--accent-deep); font-weight: 600; }
.sf-int-opts--chips .sf-int:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-note--two a { display: inline-block; padding-block: 0.35rem; }
@media (max-width: 400px) { .cta-note--two a { font-size: 0.92rem; } }
.plan .price__note--volume { margin: 0.7rem 0 0; }
@media (max-width: 1060px) and (min-width: 981px) { .nav { gap: 0.75rem; } .nav-search { display: none; } .header__inner { padding-inline-start: 0.9rem; } }

/* ---------- Locale pages (2026-10-14) ---------- */
/* Arabic and Chinese use system stacks (no web font ships for them), set on the font tokens so every rule that reads --font-display or --font-body follows. */
html:lang(ar) { --font-display: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", "Arabic Typesetting", system-ui, sans-serif; --font-body: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", system-ui, sans-serif; }
html:lang(zh) { --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { letter-spacing: 0; }
/* zh: text-wrap balance/pretty on CJK text costs about 500 ms of main-thread layout on first paint (measured 2026-10-14, LCP 1790 to 1100 ms); plain wrapping is fine for Chinese */
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3, html:lang(zh) h4, html:lang(zh) p, html:lang(zh) .hero__sub { text-wrap: auto; }
/* Arrows point along the reading direction. */
[dir="rtl"] .btn > svg, [dir="rtl"] .door__go svg, [dir="rtl"] .proof__all svg { transform: scaleX(-1); }

/* Footer language switcher: seven real links. */
.footer__lang { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1.25rem 0; margin-bottom: 1.25rem; border-top: 1px solid var(--band-line); font-size: var(--fs-300); }
.footer__lang-label { color: var(--band-mute); }
.footer__lang ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.footer__lang a { color: var(--band-text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } /* system face: a name like Română must not make the browser fetch the latin-ext web font on every page */
.footer__lang a:hover { color: #fff; text-decoration: underline; }
.footer__lang a[aria-current] { font-weight: 700; }

/* Locale suggestion toast. Fixed, so it never shifts layout; it lifts above the cookie banner while that is showing. */
.ks-locale { position: fixed; inset-inline: 0; bottom: 1rem; z-index: 69; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.9rem; max-width: 34rem; margin-inline: auto; padding: 0.75rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); width: calc(100% - 2rem); }
.ks-locale[hidden] { display: none; }
.ks-locale p { margin: 0; font-size: var(--fs-300); color: var(--ink); }
#ks-consent:not([hidden]) ~ #ks-locale { bottom: var(--ks-consent-h, 5.5rem); }

/* e2e audit 2026-10-15: footer and list links are at least 24 px tall on every device (WCAG 2.2 target size),
   the Turnstile box reserves its compact height below 360 px. */
.footer li a { display: inline-block; padding-block: 3px; }
/* Turnstile renders interaction-only (invisible unless a challenge is needed), so no box is reserved. */
.cta-note[data-section="integration-cta"]{font-size:.9375rem;color:var(--muted)}

/* Inline tracked links (a "Book a demo" inside a sentence) must still be a 24 px tap target on phones.
   Padding grows the touch box; the negative margin keeps the line where it was. */
p a[data-cta], li a[data-cta], .cta-note a[data-cta], .tl-note a[data-cta] { display: inline-block; padding-block: 4px; margin-block: -4px; }