@layer legacy, od-layout;
@layer legacy{
   28. EN + ET homepage hero — full-width block + two-path fork (rev. D)
   The Claude/Innovadata-MCP demo card is gone, so the hero is one flat
   full-width block, not a copy column beside a card:

       ┌────────────────────────────────────────────┐
       │ headline                                   │
       │ lead                                       │
       │ three checks                               │
       ├──────────────────────┬─────────────────────┤
       │ fork card 01         │ fork card 02        │
       └──────────────────────┴─────────────────────┘

   Two constraints drove the sizes. (1) The headline runs the full container
   width — rev. C parked it in a left half-column with the lead beside it,
   which the owner rejected. (2) The whole hero, both CTAs included, has to
   clear a laptop viewport. Measured in Chromium with the 73px header, EN and
   ET identical: the fork ends at 706-724px from 1280x720 through 1536x740, so
   both CTAs sit above the fold on every laptop size we check. The rhythm was
   deliberately loosened on 2026-07-25 (owner: too cramped, there was unused
   band under the hero). The closing note that used to follow the fork was
   dropped the same day; the sample-file download it carried is now the fourth
   green check. 30ch on the headline is what keeps the longer Estonian string
   on two lines at the same font size.

   Scoped to .hero--proto (only / and /et/ carry it) plus .hero__fork /
   .fork-card, which nothing else uses.
   Rollback = delete from this banner to EOF, then restore the hero markup.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/live/css/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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/live/css/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* ── Innovadata AI-web — Premium Indigo Business Design ──── */

/* ── Selection & Scrollbar ─────────────────────────────── */
::selection { background: var(--carbon); color: var(--surface); }
::-moz-selection { background: var(--carbon); color: var(--surface); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--selection); }
::-webkit-scrollbar-thumb { background: var(--carbon); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--carbon); }

:root {
  /* Brand - Light */
  --c-bg: var(--surface);
  --c-bg-elevated: var(--selection);
  --c-surface: var(--selection);
  --c-surface-hover: var(--border);
  --c-surface-active: var(--border);

  /* Text */
  --c-text: var(--carbon);
  --c-text-secondary: var(--muted);
  --c-text-muted: #94A3B8;

  /* Primary — Indigo */
  --c-primary: var(--carbon);
  --c-primary-hover: var(--carbon);
  --c-primary-light: rgba(79,70,229,0.07);

  /* Accent — Indigo lighter */
  --c-accent: var(--carbon);
  --c-accent-hover: var(--carbon);
  --c-accent-light: rgba(99,102,241,0.07);

  /* Status */
  --c-success: #059669;
  --c-success-light: rgba(5,150,105,0.1);
  --c-error: #DC2626;
  --c-error-light: rgba(220,38,38,0.1);
  --c-warning: #D97706;

  /* Borders */
  --c-border: rgba(15,23,42,0.08);
  --c-border-hover: rgba(79,70,229,0.15);
  --c-border-active: rgba(79,70,229,0.25);

  /* Country colors */
  --ee: #0072CE;
  --lt: #C1272D;
  --lv: #9E3039;
  --no: #BA0C2F;
  --dk: #C8102E;

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow: 0 4px 12px rgba(15,15,46,0.06);
  --shadow-lg: 0 8px 30px rgba(15,15,46,0.08);
  --shadow-xl: 0 20px 50px rgba(15,15,46,0.1);
  --shadow-glow: 0 0 40px rgba(79,70,229,0.08);

  /* Layout */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1200px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Transition */
  --transition: 180ms ease;
  --transition-slow: 400ms ease;
}

/* ── Skip Link ─────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--c-primary);
  color: var(--surface);
  border-radius: var(--radius-md);
  font-weight:500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--c-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-accent-hover); }
button { cursor: pointer; font-family: var(--font); }
img { max-width: 100%; display: block; }

/* ── Layout ────────────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }

/* ── Section Headers ───────────────────────────────────── */
.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-2xl); }
.section-header__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-primary);
  margin-bottom: var(--space-md);
  padding: 5px 14px;
  background: rgba(79,70,229,0.08);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(79,70,229,0.18);
}
.section-header__title {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight:500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, #0A0A0A 0%, #5B3CE0 35%, #7C5BEF 65%, #9D85F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section-header__subtitle {
  font-size: 1.0625rem;
  color: var(--c-text-secondary);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Header ────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 0;
  box-shadow:none;
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 64px;
}
.header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 4px;
  margin-left: -4px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.header__logo:hover { opacity: 0.85; }
.header__logo img { height: 26px; width: auto; display: block; }
.header__nav {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
}
.header__link {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 7px 12px;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
}
.header__link:hover {
  color: var(--c-primary);
  background: rgba(79, 70, 229, 0.05);
}
.header__link--active {
  color: var(--c-primary);
  font-weight:500;
}

/* Compact, lighter buttons inside the nav */
.header__nav .btn {
  font-size: 0.8125rem;
  font-weight:500;
  letter-spacing: -0.005em;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: 8px;
}
.header__nav .btn--ghost {
  font-weight: 500;
  border-color: rgba(15, 23, 42, 0.12);
}
/* Push the first button (and everything after) to the right edge of the nav,
   so the links stay close to the logo and the CTAs sit at the far end. */
.header__nav .btn:first-of-type { margin-left: auto; }
.header__nav .btn + .btn { margin-left: 8px; }

.header__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.header__toggle:hover { border-color: rgba(79, 70, 229, 0.35); background: rgba(79, 70, 229, 0.04); }
.header__toggle span {
  width: 16px;
  height: 1.5px;
  background: var(--muted);
  transition: all var(--transition);
}
.header--scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-weight:500;
  font-size: 0.9375rem;
  border: 1px solid transparent;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--surface);
  white-space: nowrap;
  padding: 10px 22px;
  min-height: 44px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
a.btn:link, a.btn:visited { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow:none; }
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-hover); box-shadow:none; transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); box-shadow:none; }
.btn--primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow:none; }
a.btn--primary:link, a.btn--primary:visited, a.btn--accent:link, a.btn--accent:visited, a.btn--success:link, a.btn--success:visited { color: var(--surface); }
.btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--surface); }
.btn--accent:hover { background: var(--c-accent-hover); box-shadow:none; transform: translateY(-2px); }
a.btn--ghost:link, a.btn--ghost:visited { color: #334155; }
.btn--ghost { background: transparent; border: 1.5px solid var(--border); color: #334155; }
.btn--ghost:hover { background: var(--selection); border-color: #94A3B8; color: var(--carbon); transform: translateY(-1px); }
.btn--sm { padding: 10px 18px; font-size: 0.8125rem; min-height: 44px; }
.btn--lg, .btn--large { padding: 14px 32px; font-size: 1rem; min-height: 52px; }
.btn--success { background: linear-gradient(135deg, #059669, #047857); border-color: #047857; }
.btn--success:hover { background: linear-gradient(135deg, #047857, #065F46); box-shadow:none; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--c-text-secondary); border: 1.5px solid var(--border); }
.btn--outline:hover { background: var(--selection); color: var(--c-text); border-color: var(--border); transform: translateY(-1px); }

/* Preview / Download button — outline with icon emphasis */
.btn--preview {
  background: var(--surface);
  color: var(--carbon);
  border: 2px solid var(--carbon);
  font-weight:500;
  letter-spacing:normal;
  box-shadow:none;
}
.btn--preview:hover {
  background: #EFF6FF;
  color: var(--carbon);
  border-color: var(--carbon);
  transform: translateY(-2px);
  box-shadow:none;
}
.btn--preview:active { transform: translateY(0); }

/* Order / Buy button — premium gradient */
.btn--order {
  background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%);
  border: none;
  color: var(--surface);
  font-weight:500;
  font-size: 1.05rem;
  letter-spacing:normal;
  text-transform:none;
  box-shadow:none;
  text-decoration: none;
}
a.btn--order,
a.btn--order:link,
a.btn--order:visited,
a.btn--order:focus,
a.btn--order:active,
.btn--order:link,
.btn--order:visited,
.btn--order:focus {
  color: var(--surface);
  text-decoration: none;
  background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%);
}
.btn--order:hover {
  background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%);
  box-shadow:none;
  transform: translateY(-2px);
}
.btn--order:active { transform: translateY(0); background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%); box-shadow:none; }
.btn--order:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow:none; }
.btn--order.btn--sm { font-size: 0.8125rem; text-transform: none; letter-spacing:normal; font-weight:500; padding: 8px 18px; }
.btn--order.btn--sm:hover { transform: translateY(-1px); box-shadow:none; }

/* Employee preset buttons */
.emp-preset-btn { padding: 4px 14px; font-size: 0.8rem; font-weight:500; border-radius: 20px; border: 1px solid var(--c-border); background: rgba(15,23,42,0.03); color: var(--c-text-secondary); cursor: pointer; transition: all 0.2s ease; }
.emp-preset-btn:hover { background: rgba(79,70,229,0.08); border-color: var(--c-primary); color: var(--c-primary); }
.emp-preset-btn.active { background: rgba(79,70,229,0.1); border-color: var(--c-primary); color: var(--c-primary); }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 100px 0 80px;
  background:
    linear-gradient(180deg, transparent 72%, var(--surface) 100%),
    #FCFCFD;
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  color: var(--c-text);
}
/* Variant C (Pavel, 2026-07-19): same refined "Nurgaplaan" aurora wedge as the
   homepage .hero--gpt, so pricing + country pages share one hero look. Content
   sits above it (.hero__content z-index:1); grain (::after) on top. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
  background:
    radial-gradient(46% 70% at 80% 2%, rgba(167,139,250,0.20), transparent 58%),
    linear-gradient(122deg,
      rgba(79,70,229,0.12) 0%,
      rgba(99,102,241,0.08) 46%,
      rgba(129,140,248,0.15) 60%,
      rgba(99,102,241,0.04) 66%,
      transparent 72%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__left {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight:500;
  color: var(--c-primary);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(79,70,229,0.2);
  background: rgba(79,70,229,0.08);
  margin-bottom: 20px;
  width: fit-content;
}
/* Clickable variant — smooth, modern hover */
.hero__badge--link {
  position: relative;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.35s ease,
              border-color 0.35s ease,
              background 0.35s ease,
              box-shadow 0.35s ease,
              transform 0.35s ease;
  will-change: transform;
}
.hero__badge--link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(79,70,229,0.18), rgba(139,92,246,0.18));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
.hero__badge--link > * { position: relative; z-index: 1; }
.hero__badge--link:hover,
.hero__badge--link:focus-visible {
  border-color: rgba(79,70,229,0.45);
  box-shadow:none;
  transform: translateY(-2px);
  outline: none;
}
.hero__badge--link:hover::before,
.hero__badge--link:focus-visible::before {
  opacity: 1;
}
.hero__badge--link:active {
  transform: translateY(0);
  box-shadow:none;
}
.hero__badge-arrow {
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0.75;
}
.hero__badge--link:hover .hero__badge-arrow,
.hero__badge--link:focus-visible .hero__badge-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-success);
  animation: pulse 2s ease infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero__title {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  font-weight:500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: #0A0A0A;
}
.hero__title-accent {
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__subtitle {
  font-size: 1.0625rem;
  color: var(--c-text-secondary);
  max-width: 500px;
  margin-bottom: 24px;
  line-height: 1.7;
}
.hero__stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__stat-value {
  font-size: 1.5rem;
  font-weight:500;
  color: var(--c-primary);
  line-height: 1;
}
.hero__stat-label {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  font-weight: 500;
}
.hero__stat-flags {
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing:normal;
}
.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}
/* Hero buttons — light background */
.hero .btn--ghost {
  border-color: var(--border);
  color: #334155;
}
.hero .btn--ghost:hover {
  background: var(--selection);
  border-color: #94A3B8;
  color: var(--carbon);
}
.hero .btn--order {
  background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%);
  box-shadow:none;
}
.hero .btn--order:hover {
  background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%);
  box-shadow:none;
}
/* ── Quick-start CTA + hero trio harmonisation ──
   All three hero buttons (btn--order / btn--quick / btn--ghost) share
   the same height, font-size, weight, letter-spacing, and uppercase casing
   so the action row reads as one unit. Only the colour treatment differs.
   LEIA KOHE uses a fresh-mint→emerald gradient to stand out from the
   indigo OTSI button, signalling "easy / instant". */
.btn--quick {
  background: linear-gradient(135deg, #6EE7B7 0%, #34D399 50%, #10B981 100%);
  color: var(--surface);
  border: 0;
  box-shadow:none;
  font-weight:500;
  font-size: 1.05rem;
  letter-spacing:normal;
  text-transform:none;
  text-decoration: none;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--quick:link, .btn--quick:visited, .btn--quick:focus, .btn--quick:active { color: var(--surface); text-decoration: none; }
.btn--quick:hover {
  background: linear-gradient(135deg, #5EEAD4 0%, #34D399 50%, #059669 100%);
  box-shadow:none;
  transform: translateY(-2px);
}
.btn--quick:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow:none; }
.btn--quick svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.btn--quick:hover svg { transform: rotate(-8deg) scale(1.1); }

/* Sparkle marks above the LEIA KOHE button — three short rays that say
   "look here". Pure CSS via the wrap's ::before with three radial-gradient
   stops, so no extra DOM. Sits ABOVE the button on desktop, hidden on mobile
   stack to avoid clutter. */
.hero__quick-wrap::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 22px;
  pointer-events: none;
  background:
    linear-gradient(  0deg, transparent 0 30%, #34D399 30% 100%) 14%   55%/3px 12px no-repeat,
    linear-gradient( 22deg, transparent 0 30%, #34D399 30% 100%) 38%   30%/3px 14px no-repeat,
    linear-gradient(  0deg, transparent 0 30%, #34D399 30% 100%) 50%   10%/3px 16px no-repeat,
    linear-gradient(-22deg, transparent 0 30%, #34D399 30% 100%) 62%   30%/3px 14px no-repeat,
    linear-gradient(  0deg, transparent 0 30%, #34D399 30% 100%) 86%   55%/3px 12px no-repeat;
  animation: heroSparkle 2.4s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes heroSparkle {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;    transform: translateX(-50%) translateY(-2px); }
}

/* Match btn--ghost in the hero to the heavier styling of the other two CTAs */
.hero .btn--ghost {
  font-size: 1.05rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}

/* attention pulse — paused on hover and reduced motion */
.btn--quick--pulse { animation: btnQuickPulse 2.6s ease-in-out infinite; }
.btn--quick--pulse:hover { animation: none; }
@keyframes btnQuickPulse {
  0%, 100% { box-shadow:none; }
  50%      { box-shadow:none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--quick--pulse,
  .hero__quick-wrap::before { animation: none; }
}

/* Hand-drawn arrow + tag float BELOW the middle button without taking flex
   width. Wrap is inline-flex column so the button keeps its intrinsic size,
   the hint is absolute-positioned underneath. Both arrow + tag are green
   to match the LEIA KOHE button. */
.hero__quick-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.hero__quick-hint {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  width: max-content;
  max-width: 260px;
  color: #16A34A;
  font-size: 0.84rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.32;
  text-align: left;
  pointer-events: none;
  animation: heroHintFloat 3.4s ease-in-out infinite;
}
.hero__quick-arrow { flex: 0 0 auto; margin-top: -2px; stroke: #16A34A; }
.hero__quick-tag   { padding-top: 4px; }
@keyframes heroHintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__quick-hint { animation: none; }
}
/* Reserve vertical room for the absolute-positioned sparkle (above) and
   the hand-drawn arrow + tag (below) so neither is clipped by the next
   block in the hero column. */
.hero__actions { padding-top: 26px; padding-bottom: 60px; gap: 10px; }
/* Hero is a 50/50 grid inside a 1200 px container, so the hero-left column
   is ~552 px on every desktop viewport. btn--lg at its default (14×32 px,
   1.05 rem) cannot fit three buttons in that width — KIRJUTA MEILE wraps to
   a second row. Shrink the hero buttons unconditionally so the three CTAs
   always sit on a single row, matching the reference layout. The mobile
   stack rule below (≤900 px) takes over and lets each CTA go full-width. */
.hero__actions .btn--lg {
  padding: 12px 16px;
  font-size: 0.86rem;
  min-height: 46px;
  letter-spacing:normal;
}
.hero__actions .btn--lg svg { width: 16px; height: 16px; }
.hero__quick-hint { font-size: 0.76rem; max-width: 200px; }
.hero__quick-wrap::before { width: 100px; height: 18px; }
@media (max-width: 900px) {
  /* Stack the three CTAs cleanly on tablet/phone — same width, same gap,
     no orphaned full-row LEIA KOHE. Hint goes inline below it; sparkles
     hide because they only make sense above a sized pill. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
    gap: 12px;
  }
  .hero__actions > .btn,
  .hero__actions > a.btn,
  .hero__quick-wrap,
  .hero__quick-wrap > .btn { width: 100%; }
  .hero__quick-wrap { align-items: stretch; }
  .hero__quick-wrap::before { display: none; }
  .hero__quick-hint {
    position: static;
    transform: none;
    margin-top: 8px;
    justify-content: center;
    max-width: none;
    width: 100%;
    text-align: center;
  }
  @keyframes heroHintFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
}
/* Demo row text — light bg */
.hero__demo-row {
  color: var(--c-text);
}
/* Hero right — demo card */
.hero__right {
  display: flex;
  justify-content: flex-end;
}
.hero__demo-card {
  background: var(--surface);
  border: 1px solid rgba(79,70,229,0.10);
  border-radius: 20px;
  box-shadow:none;
  overflow: hidden;
  width: 100%;
  max-width: 540px;
  position: relative;
  z-index: 1;
}
.hero__demo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--carbon) 0%, #818CF8 50%, #C7D2FE 100%);
  opacity: 0.95;
}
.hero__right { position: relative; }
.hero__right::before {
  content: '';
  position: absolute;
  inset: -30px -20px -40px -20px;
  background:
    radial-gradient(50% 55% at 18% 35%, rgba(167,139,250,0.22), transparent 70%),
    radial-gradient(45% 55% at 95% 95%, rgba(244,114,182,0.14), transparent 72%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.hero__demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(180deg, #FBFCFF 0%, #F4F6FB 100%);
  border-bottom: 1px solid rgba(79,70,229,0.08);
}
.hero__demo-title {
  font-size: 0.95rem;
  font-weight:500;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.hero__demo-badge {
  font-size: 0.6875rem;
  font-weight:500;
  color: var(--c-success);
  background: var(--c-success-light);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing:normal;
  border: 1px solid rgba(16,185,129,0.22);
}
.hero__demo-table { padding: 0; }
.hero__demo-row {
  display: grid;
  grid-template-columns: 2.4fr 1.2fr 0.6fr 1.4fr;
  gap: 16px;
  padding: 14px 24px;
  font-size: 0.815rem;
  color: var(--c-text);
  border-bottom: 1px solid rgba(15,15,46,0.05);
  align-items: center;
  transition: background var(--transition);
}
.hero__demo-row:hover { background: rgba(79,70,229,0.025); }
.hero__demo-row:last-child { border-bottom: none; }
.hero__demo-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero__demo-row--head {
  font-size: 0.68rem;
  font-weight:500;
  color: var(--c-text-muted);
  text-transform:none;
  letter-spacing:normal;
  background: #FAFBFE;
  border-bottom: 1px solid rgba(79,70,229,0.08);
  padding-top: 12px;
  padding-bottom: 12px;
}
.hero__demo-row--head:hover { background: #FAFBFE; }
.hero__demo-th {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
}
.hero__demo-th-sub {
  font-size: 0.62rem;
  font-weight:500;
  opacity: 0.78;
  letter-spacing:normal;
}
.hero__demo-th--right { text-align: right; }
.hero__demo-company {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: visible;
  white-space: normal;
}
.hero__demo-name {
  font-weight:500;
  font-size: 0.875rem;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.hero__demo-rev {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hero__demo-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--c-text-secondary);
  letter-spacing:normal;
}
.hero__demo-flag {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1;
}
.hero__demo-industry {
  text-align: right;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.hero__demo-row--blur {
  filter: blur(3.5px);
  opacity: 0.32;
  user-select: none;
}
.hero__demo-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 0.76rem;
  color: var(--c-text-muted);
  background: linear-gradient(180deg, #FAFBFE 0%, #F4F6FB 100%);
  border-top: 1px solid rgba(79,70,229,0.06);
  letter-spacing:normal;
}

@media (max-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero__right {
    justify-content: center;
  }
  .hero__demo-card {
    max-width: 100%;
  }
}
@media (max-width: 580px) {
  .hero { padding: 12px 0 32px; }
  .hero__stat-flags { font-size: 1.1rem; }
  .hero__demo-row { grid-template-columns: 2.2fr 1fr 0.5fr 1.2fr; gap: 10px; font-size: 0.74rem; padding: 11px 14px; }
  .hero__demo-row--head { padding: 10px 14px; }
  .hero__demo-header, .hero__demo-footer { padding: 12px 14px; }
  .hero__demo-name { font-size: 0.8rem; }
  .hero__demo-rev { font-size: 0.68rem; }
  .hero__demo-code { font-size: 0.72rem; }
  .hero__demo-industry { font-size: 0.74rem; }
  .hero__demo-flag { font-size: 1.05rem; }
  /* Make the header sit flush against the hero on mobile — no visible separator */
  .header { border-bottom: none; }
}



/* ── Data Ticker ────────────────────────────────────────── */
.ticker {
  padding: 10px 0;
  background: var(--c-bg-elevated);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--c-bg-elevated), transparent);
}
.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--c-bg-elevated), transparent);
}
.ticker__track {
  display: inline-flex;
  animation: ticker-scroll 55s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-size: 0.8rem;
  color: var(--c-text-secondary);
  font-weight: 500;
  border-right: 1px solid var(--c-border);
  flex-shrink: 0;
}
.ticker__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-success);
  flex-shrink: 0;
}
.ticker__dot--blue { background: var(--c-accent); }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ── Trust Bar ─────────────────────────────────────────── */
.trust-bar {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.trust-bar__label {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  text-transform:none;
  letter-spacing:normal;
  font-weight:500;
}
.trust-bar__items {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}
.trust-bar__item {
  font-size: 0.875rem;
  color: var(--c-text-secondary);
  font-weight:500;
}
.trust-bar__divider {
  color: var(--c-text-muted);
  opacity: 0.4;
}

/* ── Country Cards ─────────────────────────────────────── */
.countries {
  padding: var(--space-3xl) 0;
  background: var(--c-bg-elevated);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.countries__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr; /* equalize row heights so CTA pins to a consistent baseline across rows */
  gap: var(--space-lg);
  align-items: stretch;
}
.country-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* fill the grid row so the inner flex column has a defined height */
  box-shadow:none;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.country-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79,70,229,0.30);
  box-shadow:none;
}
.country-card:active { transform: translateY(-1px); }
.country-card:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow:none;
}
.country-card__glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.country-card:hover .country-card__glow { opacity: 1; }
.country-card .country-card__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(79,70,229,0.10), transparent 70%);
}

.country-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.country-card:hover::before,
.country-card:focus-visible::before { transform: scaleX(1); }

.country-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.country-card__flag {
  font-size: 2.25rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(15,23,42,0.08));
}
/* Legacy badge styles kept as no-op for old markup compatibility — no longer used. */
.country-card__name {
  font-size: 1.125rem;
  font-weight:500;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin-bottom: 6px;
}
/* Counter + contact-coverage line under country name (real pipeline numbers) */
.country-card__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 0.8125rem;
  color: var(--c-text-secondary);
}
/* Company count on its own line, prominent. */
.country-card__count { flex: 0 0 100%; font-size: 0.95rem; font-weight:500; color: var(--c-text); }
.country-card__count span[data-i18n] { font-weight: 500; font-size: 0.8125rem; color: var(--c-text-secondary); }
/* Coverage as clean, on-brand pills — reads as designed at high AND low %. */
.country-card__cov {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 0.72rem;
  font-weight:500;
  line-height: 1.5;
  white-space: nowrap;
}
.country-card__cov--muted { background: rgba(100,116,139,0.08); color: var(--c-text-muted); }
/* SEO description under country name — flex-grow so cards align */
.country-card__seo {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-text-secondary);
  margin: 0 0 var(--space-md);
  flex-grow: 1;
}
/* Price now lives in the top-row beside the flag — plain text, no pill. */
.country-card__price {
  display: inline-block;
  background: transparent;
  color: var(--c-text-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.country-card__fields {
  font-size: 0.6875rem;
  color: var(--c-text-muted);
  line-height: 1.7;
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
  /* Reserve space for ~3 wrapped lines so the divider + fields block
     starts on the same baseline across cards regardless of field count. */
  min-height: 4.6rem;
}

/* CTA — single pill button, text + arrow inside.
   margin-top:auto forces CTA to the bottom of the flex column,
   so it lands on the same baseline across all cards in the grid. */
.country-card__cta {
  align-self: flex-end;
  margin-top: auto;
  margin-left: var(--space-md);
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(79,70,229,0.08);
  border: 1px solid rgba(79,70,229,0.20);
  color: var(--c-primary);
  font-size: 0.75rem;
  font-weight:500;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
  pointer-events: none; /* card is the click target */
  transition: background 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.country-card__cta-icon {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  animation: cardCtaNudge 3.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
.country-card:hover .country-card__cta,
.country-card:focus-visible .country-card__cta {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--surface);
  box-shadow:none;
  transform: translateY(-1px);
}
.country-card:hover .country-card__cta-icon,
.country-card:focus-visible .country-card__cta-icon {
  transform: translateX(3px);
  animation: none;
}

@keyframes cardCtaNudge {
  0%, 86%, 100% { transform: translateX(0); }
  90% { transform: translateX(3px); }
  94% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .country-card__cta-icon { animation: none; }
}

/* ── Coming Soon ───────────────────────────────────────── */
/* Push request-only cards to the end of the grid regardless of source order. */
.country-card--coming-soon { order: 1; }
.coming-soon-badge {
  display: inline-block;
  background: var(--c-warning);
  color: var(--surface);
  font-weight:500;
  font-size: 0.6875rem;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  text-transform:none;
  letter-spacing:normal;
}
/* Mirror .country-card__cta — same pill, same hover, for visual parity. */
.coming-request-btn {
  min-width: 0;
  min-height: 0;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79,70,229,0.08);
  border: 1px solid rgba(79,70,229,0.20);
  color: var(--c-primary);
  font-size: 0.8125rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform: none;
  border-radius: var(--radius-pill);
  box-shadow:none;
  transition: background 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.coming-request-btn:hover,
.coming-request-btn:focus-visible {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--surface);
  box-shadow:none;
  transform: translateY(-1px);
}
.coming-request-btn .country-card__cta-icon {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.coming-request-btn:hover .country-card__cta-icon,
.coming-request-btn:focus-visible .country-card__cta-icon {
  transform: translateX(3px);
}

/* ── Features ──────────────────────────────────────────── */
.features {
  padding: var(--space-3xl) 0;
  background: var(--c-bg-elevated);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}
.feature-card {
  padding: var(--space-xl);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  opacity: 0;
  transition: opacity var(--transition);
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-border-hover);
  box-shadow:none;
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--selection);
  color: var(--c-primary);
  margin-bottom: var(--space-md);
}
.feature-card__title {
  font-size: 1.125rem;
  font-weight:500;
  margin-bottom: var(--space-sm);
}
.feature-card__text {
  font-size: 0.9375rem;
  color: var(--c-text-secondary);
  line-height: 1.65;
}

/* ── How It Works ──────────────────────────────────────── */
.how-it-works {
  padding: var(--space-3xl) 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 84px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent), var(--c-primary));
  opacity: 0.18;
}
@media (max-width: 900px) {
  .steps::before { display: none; }
}
.step {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  position: relative;
}
.step__connector {
  display: none;
}
.step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--surface);
  font-weight:500;
  font-size: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  box-shadow:none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.step:hover .step__number {
  transform: scale(1.1);
  box-shadow:none;
}
.step__title {
  font-weight:500;
  font-size: 1.0625rem;
  margin-bottom: var(--space-xs);
}
.step__desc {
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

/* ── CTA Section ───────────────────────────────────────── */
.cta-section {
  padding: var(--space-lg) 0 var(--space-xl);
}
.cta-card {
  position: relative;
  text-align: center;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--c-border-hover);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--c-surface) 0%, var(--c-bg-elevated) 100%);
  overflow: hidden;
}
.cta-card__glow {
  display: none;
}
.cta-card__title {
  font-size: 1.25rem;
  font-weight:500;
  margin-bottom: 6px;
  position: relative;
}
.cta-card__text {
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.cta-card__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
/* CTA dark bg button overrides */
.cta-card .btn--order {
  background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 50%, var(--carbon) 100%);
  box-shadow:none;
  color: var(--surface);
  text-transform:none;
  letter-spacing:normal;
  font-weight:500;
}
.cta-card .btn--order:hover {
  box-shadow:none;
}
.cta-card .btn--ghost {
  color: var(--c-primary);
  border-color: rgba(79,70,229,0.30);
  background: var(--surface);
  transition: background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* Same lift+shadow effect as the Start search pill, but keep the indigo text legible. */
.cta-card .btn--ghost:hover,
.cta-card .btn--ghost:focus-visible {
  background: var(--surface);
  border-color: var(--c-primary);
  color: var(--c-primary);
  transform: translateY(-1px);
  box-shadow:none;
}

/* ── Filter Modal ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow:none;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: modalIn 200ms ease;
}
.modal--compact {
  max-width: 560px;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--c-border);
}
.modal__title { font-size: 1.25rem; font-weight:500; }
.modal__close {
  background: none;
  border: 1px solid var(--c-border);
  font-size: 1.5rem;
  color: var(--c-text-muted);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.modal__close:hover { background: rgba(15,23,42,0.04); border-color: var(--c-border-hover); color: var(--c-text); }
.modal__body {
  padding: var(--space-xl);
  overflow-y: auto;
  flex: 1;
  position: relative;
}
.modal__body::-webkit-scrollbar { width: 5px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }
.modal__body::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.15); border-radius: 3px; }
/* Bottom fade hint — signals "more filters below" when the body still has
   scrollable content. JS toggles .at-end when the user reaches the bottom. */
.modal__body--has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%);
}
/* Floating chevron pill that pulses near the modal-body bottom-right when
   there's more content below — a second, more obvious cue than the fade. */
.modal__more-hint {
  position: sticky;
  bottom: 8px;
  margin-left: auto;
  margin-right: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--surface);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow:none;
  cursor: pointer;
  border: none;
  z-index: 3;
  animation: modalMoreBounce 1.6s ease-in-out infinite;
  pointer-events: auto;
}
.modal__body--has-more .modal__more-hint { display: flex; }
.modal__more-hint:hover { background: var(--c-accent-hover, var(--c-accent)); }
@keyframes modalMoreBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .modal__more-hint { animation: none; }
}
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--c-border);
  gap: var(--space-md);
}
.modal__footer--simple {
  justify-content: flex-end;
}
.coming-request-result {
  min-height: 20px;
  font-size: 0.875rem;
  color: var(--c-accent);
  font-weight:500;
}
.captcha-row { display: flex; align-items: center; gap: var(--space-sm); }
.captcha-question { font-size: 1rem; font-weight:500; color: var(--c-primary); white-space: nowrap; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 14px; user-select: none; }
.captcha-input { width: 80px; text-align: center; font-size: 1.125rem; font-weight:500; }

/* ── Form Controls ─────────────────────────────────────── */
.form-group { margin-bottom: var(--space-lg); }
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight:500;
  color: var(--c-text);
  margin-bottom: var(--space-xs);
  text-transform:none;
  letter-spacing:normal;
}
.form-input,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow:none;
}
.form-input::placeholder { color: var(--c-text-muted); }
.form-select option { background: var(--c-surface); color: var(--c-text); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ── Estimate Bar ──────────────────────────────────────── */
.estimate {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.estimate__count {
  font-size: 1.5rem;
  font-weight:500;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.estimate__count-label {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}
.estimate__price {
  font-size: 1.125rem;
  font-weight:500;
}
.estimate__price-details {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* Price pill — lives inside the primary "Order list" CTA so the user
   sees count + price + action without eye-jumping across the footer.
   Solid-white chip on the gradient button so the number is the most
   legible thing in the footer. */
.btn--order .btn__label { letter-spacing:normal; }
.btn__price-pill {
  display: inline-flex;
  align-items: baseline;
  margin-left: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--c-primary, var(--carbon));
  font-weight:500;
  font-size: 1.08em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow:none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn--order:hover:not(:disabled) .btn__price-pill {
  transform: translateY(-1px);
  box-shadow:none;
}
.btn--order:disabled .btn__price-pill {
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-text-muted, #6B7280);
  box-shadow:none;
}
.btn__price-pill .btn__price-vat {
  margin-left: 5px;
  font-size: 0.7em;
  font-weight:500;
  opacity: 0.65;
  letter-spacing:normal;
  text-transform:none;
}

/* ── Collapsible Filter Sections ────────────────────────── */
.filter-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.filter-section-header:hover { background: rgba(15,23,42,0.03); }
.filter-section-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--c-text-muted);
  transition: transform 0.2s;
  width: 16px;
  flex-shrink: 0;
}
.filter-section-chevron.expanded { transform: rotate(90deg); }
.filter-section-header .form-label { margin-bottom: 0; cursor: pointer; }
.filter-section-body { margin-top: var(--space-xs); }

/* ── Dropdown Picker (EMTAK & EHAK on EE) ─────────────── */
.dropdown-picker {
  position: relative;
}
.dropdown-picker__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  color: var(--c-text-muted);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  user-select: none;
}
.dropdown-picker__trigger:hover {
  border-color: var(--c-border-hover);
}
.dropdown-picker.open .dropdown-picker__trigger {
  border-color: var(--c-primary);
  box-shadow:none;
}
.dropdown-picker__placeholder {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-picker__chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.dropdown-picker.open .dropdown-picker__chevron {
  transform: rotate(180deg);
}
.dropdown-picker__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--c-bg-elevated, var(--c-surface));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow:none;
  overflow: hidden;
}
.dropdown-picker.open .dropdown-picker__panel {
  display: block;
}
.dropdown-picker__search {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  background: transparent;
  color: var(--c-text);
  outline: none;
  font-family: var(--font);
}
.dropdown-picker__search:focus {
  border-bottom-color: var(--c-primary);
}
.dropdown-picker__search::placeholder { color: var(--c-text-muted); }

/* Footer actions row */
.modal__footer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* ── EMTAK/NACE/EHAK Tree Picker ──────────────────────── */
.industry-picker {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-bg);
}
.industry-picker__search {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  background: transparent;
  color: var(--c-text);
  outline: none;
  font-family: var(--font);
}
.industry-picker__search:focus { border-bottom-color: var(--c-primary); }
.industry-picker__search::placeholder { color: var(--c-text-muted); }
.industry-tree-wrap {
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(79,70,229,0.45) transparent;
  /* bottom fade hints "scroll for more" — sits above content via mask */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), rgba(0,0,0,0.25) 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), rgba(0,0,0,0.25) 100%);
}
/* When user has scrolled to the bottom (last few px), drop the fade so they
   know the list ends. JS toggles .at-end on scroll. */
.industry-tree-wrap.at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.industry-tree-wrap::-webkit-scrollbar { width: 8px; }
.industry-tree-wrap::-webkit-scrollbar-track { background: rgba(15,23,42,0.04); border-radius: 4px; }
.industry-tree-wrap::-webkit-scrollbar-thumb { background: rgba(79,70,229,0.45); border-radius: 4px; }
.industry-tree-wrap::-webkit-scrollbar-thumb:hover { background: rgba(79,70,229,0.7); }

.industry-tree { font-size: 0.8125rem; }
.industry-tree ul { list-style: none; margin: 0; padding: 0 0 0 18px; }
.industry-tree > ul { padding-left: 6px; }
.industry-tree li { margin: 0; }
.industry-tree .node-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background 120ms;
}
.industry-tree .node-row:hover { background: rgba(15,23,42,0.03); }
.industry-tree .toggle {
  width: 16px; height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--c-text-muted);
  flex-shrink: 0;
  transition: transform 120ms;
}
.industry-tree .toggle.expanded { transform: rotate(90deg); }
.industry-tree .toggle.leaf { visibility: hidden; }
.industry-tree input[type="checkbox"] {
  width: 14px; height: 14px;
  margin: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.industry-tree .node-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.industry-tree .node-kood { font-weight:500; color: var(--c-accent); margin-right: 4px; font-size: 0.75rem; }
.industry-tree .node-text { color: var(--c-text-secondary); }
.industry-tree li.hidden { display: none; }
.industry-tree .highlight { background: rgba(79,70,229,0.18); border-radius: 2px; color: var(--c-accent); }

.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-sm);
  min-height: 20px;
  /* When many codes are selected, cap the tag area instead of letting it push
     the tree off-screen. Roughly 3 rows tall, then it scrolls inside. */
  max-height: 76px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(79,70,229,0.45) transparent;
}
.industry-tags::-webkit-scrollbar { width: 6px; }
.industry-tags::-webkit-scrollbar-track { background: transparent; }
.industry-tags::-webkit-scrollbar-thumb { background: rgba(79,70,229,0.4); border-radius: 3px; }
.industry-tags:empty { display: none; }
.industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--c-primary-light);
  color: var(--c-accent);
  font-size: 0.6875rem;
  font-weight:500;
  cursor: default;
  user-select: none;
  border: 1px solid rgba(79,70,229,0.2);
}
.industry-tag .kood { font-weight:500; }
.industry-tag .remove {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--c-text-muted);
  margin-left: 2px;
  transition: color 120ms;
}
.industry-tag .remove:hover { color: var(--c-error); }

/* "Have a question? Contact us" CTA + legal info — sits on top of the
   sticky filter-modal footer, above estimate + Order button. */
.filter-contact-box {
  width: 100%;
  order: -1;          /* render above estimate/actions inside the footer */
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px dashed rgba(79,70,229,0.35);
  border-radius: var(--radius-md);
  background: rgba(79,70,229,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
/* The base .modal__footer is flex (row on desktop, column on mobile);
   allow wrapping so the full-width contact-box doesn't squash estimate+actions
   on desktop. On mobile the footer is already column, so it stacks naturally. */
#filterModal .modal__footer { flex-wrap: wrap; }
.filter-contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: color 120ms;
  font-family: inherit;
}
.filter-contact-cta:hover { color: var(--c-text); }
.filter-contact-cta:hover strong { text-decoration: underline; }
.filter-contact-cta strong { color: var(--c-accent); font-weight:500; }
.filter-contact-cta svg { color: var(--c-accent); flex-shrink: 0; }
.filter-legal-info {
  font-size: 0.625rem;
  line-height: 1.4;
  color: var(--c-text-muted);
  text-align: center;
  padding-top: 4px;
  border-top: 1px solid rgba(79,70,229,0.12);
  width: 100%;
}

/* "Must include any of …" hint under the contact toggle group */
.contact-toggles-hint {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-top: 4px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Company Name Autocomplete Dropdown ────────────────── */
.company-suggest-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow:none;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
}
.company-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 80ms;
  gap: 8px;
}
.company-suggest-item:hover,
.company-suggest-item--active {
  background: var(--c-primary-light);
}
.company-suggest-name {
  font-size: 0.8125rem;
  font-weight:500;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.company-suggest-code {
  font-size: 0.6875rem;
  color: var(--c-text-muted);
  flex-shrink: 0;
  font-family: monospace;
}

/* ── Footer ────────────────────────────────────────────── */
.footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  padding: var(--space-3xl) 0 var(--space-xl);
}
.footer__inner {
  display: grid;
  gap: var(--space-2xl);
}
.footer__brand img { margin-bottom: var(--space-md); }
.footer__copy {
  color: var(--c-text-muted);
  font-size: 0.875rem;
  max-width: 300px;
}
.footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-xl);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer__col-title {
  font-size: 0.75rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-text-muted);
  margin-bottom: var(--space-xs);
}
.footer__col a {
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  transition: color var(--transition);
}
.footer__col a:hover { color: var(--c-text); }
.footer__bottom {
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
}

/* ── Checkout Page ─────────────────────────────────────── */
.checkout { padding: var(--space-3xl) 0; }
.checkout__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: start;
}
.checkout__form-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.checkout__form-title { font-size: 1.125rem; font-weight:500; margin-bottom: var(--space-lg); }
.checkout__summary {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: sticky;
  top: 80px;
}
.checkout__summary-title {
  font-size: 1.125rem;
  font-weight:500;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-border);
}
.checkout__summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: 0.9375rem;
}
.checkout__summary-row--total {
  font-weight:500;
  font-size: 1.125rem;
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 2px solid var(--c-text);
}
.checkout__toggle {
  display: flex;
  background: rgba(15,23,42,0.02);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: var(--space-lg);
}
.checkout__toggle-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight:500;
  color: var(--c-text-muted);
  transition: all var(--transition);
}
.checkout__toggle-btn.active {
  background: var(--c-primary);
  color: var(--surface);
  box-shadow:none;
}

/* ── Result Pages ──────────────────────────────────────── */
.result-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl);
}
.result-page__icon { font-size: 4rem; margin-bottom: var(--space-lg); }
.result-page__title { font-size: 1.75rem; font-weight:500; margin-bottom: var(--space-sm); }
.result-page__text { color: var(--c-text-secondary); max-width: 400px; margin: 0 auto var(--space-xl); }

/* ── Terms / HowTo Pages ───────────────────────────────── */
.terms-page { padding: var(--space-3xl) 0; min-height: 60vh; }
.terms-page__title { font-size: 2rem; font-weight:500; margin-bottom: var(--space-xl); }
.terms-page__content { font-size: 0.9375rem; line-height: 1.8; max-width: 800px; }
.terms-page__content h2 { font-size: 1.25rem; font-weight:500; margin: var(--space-xl) 0 var(--space-md); }
.terms-page__content h3 { font-size: 1.125rem; font-weight:500; margin: var(--space-lg) 0 var(--space-sm); }
.terms-page__content p { margin-bottom: var(--space-md); color: var(--c-text-secondary); }
.terms-page__content ul, .terms-page__content ol { margin: var(--space-sm) 0 var(--space-md) var(--space-xl); }
.terms-page__content li { margin-bottom: var(--space-xs); color: var(--c-text-secondary); }

.terms-overlay {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow:none;
  z-index: 1100;
  overflow: hidden;
  transition: max-height 400ms ease;
}
.terms-overlay.active { max-height: 70vh; }
.terms-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  background: var(--c-surface);
}
.terms-overlay__header h3 { font-size: 1rem; font-weight:500; }
.terms-overlay__body {
  padding: var(--space-lg) var(--space-xl);
  overflow-y: auto;
  max-height: calc(70vh - 60px);
  font-size: 0.875rem;
  line-height: 1.7;
}

.howto-page { padding: var(--space-3xl) 0; min-height: 60vh; }
.howto-page__title { font-size: 2rem; font-weight:500; margin-bottom: var(--space-sm); }
.howto-page__subtitle { color: var(--c-text-secondary); margin-bottom: var(--space-2xl); font-size: 1.0625rem; }
.howto-country {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.howto-country__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-border);
}
.howto-country__flag { font-size: 2rem; }
.howto-country__name { font-size: 1.25rem; font-weight:500; }
.howto-country__status {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight:500;
}
.howto-section { margin-bottom: var(--space-lg); }
.howto-section__title {
  font-size: 0.75rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-text-muted);
  margin-bottom: var(--space-sm);
}
.howto-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.howto-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.howto-badge--filter { background: var(--c-primary-light); color: var(--c-accent); }
.howto-badge--data { background: var(--c-success-light); color: var(--c-success); }

/* ── Payment Method Selector ───────────────────────────── */
.payment-method-selector { margin-bottom: var(--space-md); }
.payment-method-selector__title {
  font-size: 0.85rem;
  font-weight:500;
  color: var(--c-text-secondary);
  margin-bottom: var(--space-sm);
}
.payment-method-selector__options {
  display: flex;
  gap: var(--space-sm);
}
.payment-method-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
}
.payment-method-option:hover {
  border-color: var(--c-border-hover);
  background: var(--c-surface);
}
.payment-method-option.active {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
}
.payment-method-option input[type="radio"] {
  display: none;
}
.payment-method-option__icon {
  font-size: 1.2rem;
  line-height: 1;
}
.payment-method-option__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text);
}

/* ── Payment method selector ───────────────────────────── */
.payment-method-select {
  display: flex;
  gap: 12px;
  margin-bottom: var(--space-md);
}
.payment-method-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border: 2px solid var(--c-border, var(--border));
  border-radius: 10px;
  background: var(--c-surface, var(--surface));
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-muted, var(--muted));
  transition: border-color 200ms, color 200ms, background 200ms;
}
.payment-method-option:hover {
  border-color: var(--c-primary, #2563eb);
  color: var(--c-text, var(--carbon));
}
.payment-method-option.active {
  border-color: var(--c-primary, #2563eb);
  background: rgba(37, 99, 235, 0.04);
  color: var(--c-primary, #2563eb);
}
.payment-method-option svg {
  flex-shrink: 0;
}

/* ── Terms agree checkbox ──────────────────────────────── */
.terms-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-md) 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.terms-agree input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 2px;
  width: 20px; height: 20px;
  min-width: 20px;
  border: 2px solid var(--c-border-active, #94A3B8);
  border-radius: 4px;
  background: var(--c-bg, var(--surface));
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 150ms, border-color 150ms;
}
.terms-agree input[type="checkbox"]:checked {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.terms-agree input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.terms-agree input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.terms-agree label { cursor: pointer; }
.terms-agree a { text-decoration: underline; cursor: pointer; color: var(--c-primary); }

.provider-info {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  text-align: center;
}
.provider-info strong { color: var(--c-text-secondary); font-weight:500; }
.provider-info a { color: var(--c-primary); text-decoration: none; }
.provider-info a:hover { text-decoration: underline; }

/* ── Status Badges ─────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight:500;
}
.badge--pending { background: rgba(245,158,11,0.15); color: var(--c-warning); }
.badge--paid { background: var(--c-success-light); color: var(--c-success); }
.badge--processing { background: var(--c-primary-light); color: var(--c-accent); }
.badge--completed { background: var(--c-success-light); color: var(--c-success); }
.badge--failed { background: var(--c-error-light); color: var(--c-error); }
.badge--cancelled { background: rgba(15,23,42,0.03); color: var(--c-text-muted); }

/* ── Loading / Spinner ─────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--c-text-muted); font-size: 0.875rem; }

/* ── Reveal animation ──────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { padding: 40px 0 36px; }
  .hero__title { font-size: clamp(2rem, 6vw, 3.5rem); }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout { padding: var(--space-xl) 0; }
  .checkout__summary {
    position: static;
    margin-top: var(--space-md);
  }
  .checkout__form-section {
    padding: var(--space-lg);
  }
  .checkout__summary {
    padding: var(--space-lg);
  }
  .checkout__toggle-btn {
    padding: var(--space-sm) var(--space-sm);
    font-size: 0.8125rem;
  }
  .payment-method-selector__options {
    flex-direction: column;
  }
  .terms-overlay.active { max-height: 85vh; }
  .terms-overlay__header {
    padding: var(--space-sm) var(--space-md);
  }
  .terms-overlay__body {
    padding: var(--space-md);
    max-height: calc(85vh - 50px);
  }
  .form-row { grid-template-columns: 1fr; }
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal__header {
    padding: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface);
  }
  .modal__body {
    padding: var(--space-md);
    flex: 1;
    min-height: 0;
  }
  /* Mobile: shrink the EMTAK/EHAK tree so the next filter section peeks in
     under it. 220px is roughly 4-5 rows + the search input — enough to be
     usable, small enough that "Aktiivsus / Asukoht" headers are visible. */
  .industry-tree-wrap {
    max-height: 220px;
  }
  /* Tighter selected-tags cap on mobile too */
  .industry-tags {
    max-height: 60px;
  }
  .modal__footer {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--c-surface);
  }
  .estimate {
    justify-content: space-between;
    width: 100%;
    gap: var(--space-sm);
    align-items: center;
  }
  /* Tighter typography in the mobile estimate row — count + price still
     readable, but no longer eats half the footer. */
  #filterModal .estimate__count { font-size: 1.25rem; }
  #filterModal .estimate__count-label,
  #filterModal .estimate__price-details { font-size: 0.6875rem; }
  #filterModal .btn__price-pill {
    margin-left: 10px;
    padding: 4px 11px;
    font-size: 1em;
  }
  .modal__footer-actions {
    flex-direction: row;       /* side-by-side on mobile too */
    width: 100%;
    gap: 8px;
  }
  .modal__footer-actions .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;              /* let flex shrink below content width */
    justify-content: center;
  }
  /* Override .btn--lg on mobile inside the filter modal — primary CTA stays
     prominent but height drops from 52→44px so the buy area
     doesn't dominate the viewport. */
  #filterModal .btn--lg {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.875rem;
  }
  /* Order button on mobile: stack label above price pill so even huge totals
     (€50,000+) never overflow the side-by-side layout. */
  #filterModal .btn--order {
    flex: 1.15 1 0;
    flex-direction: column;
    gap: 3px;
    padding: 6px 10px;
    min-height: 52px;
    line-height: 1.1;
  }
  #filterModal .btn--order .btn__label {
    font-size: 0.72rem;
    letter-spacing:normal;
    opacity: 0.95;
  }
  #filterModal .btn__price-pill {
    margin-left: 0;
    padding: 3px 11px;
    font-size: 1em;
    max-width: 100%;
  }
  /* Slimmer in-footer contact-box on mobile */
  .filter-contact-box {
    padding: 6px 10px;
    margin-bottom: 4px;
    gap: 2px;
  }
  .filter-contact-cta { font-size: 0.75rem; padding: 0; }
  .filter-legal-info {
    font-size: 0.5625rem;
    line-height: 1.35;
    padding-top: 3px;
  }
  /* Raise modal above cookie widget on mobile */
  .modal-overlay {
    z-index: 10001;
  }
  .header__toggle { display: flex; flex-shrink: 0; }
  .header__inner {
    gap: 6px;
    height: 56px;
  }
  .header__logo img { height: 22px; }
  .header__nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0; right: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: var(--space-sm) var(--space-lg);
    box-shadow:none;
    gap: 2px;
  }
  .header__nav.is-open { display: flex; }
  .header__link { padding: 10px 14px; border-radius: 8px; font-size: 0.9375rem; }
  .header__nav .btn { width: 100%; justify-content: center; margin-top: var(--space-sm); margin-left: 0; }
  /* EN/ET switcher pushed to the right edge of the header (chained selector
     beats the base .lang-switch rule that sets margin-left: 8px). */
  .lang-switch.lang-switch--header {
    margin-left: auto;
    margin-right: 0;
    padding: 2px;
  }
  .lang-switch.lang-switch--header { padding: 2px; gap: 0; margin-left: auto; }
  .lang-switch--header .lang-switch__btn {
    padding: 4px 6px;
    min-width: 26px;
    min-height: 22px;
    font-size: 0.625rem;
    border-radius: 5px;
  }
  .header__toggle {
    width: 32px;
    height: 32px;
    gap: 3px;
    border-radius: 6px;
  }
  .header__toggle span { width: 14px; height: 1.5px; }
  .header__inner { gap: 8px; height: 52px; }
  .header__logo img { height: 20px; }
  /* Globe dropdown is the language switcher on mobile too. */
  .lang-dropdown {
    display: flex;
  }
  .footer__links { grid-template-columns: 1fr 1fr; }
  .trust-bar__inner { flex-direction: column; gap: var(--space-sm); }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-md); }
  .country-card { padding: var(--space-lg); }
  .countries__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* hero__actions stack handled by the consolidated rule near line 675;
     don't override align-items here. */
  .cta-card { padding: var(--space-md) var(--space-md); }
  .cta-card__actions { flex-direction: column; width: 100%; }
  .cta-card__actions .btn { width: 100%; justify-content: center; }
  .checkout { padding: var(--space-lg) 0; }
  .checkout__form-section { padding: var(--space-md); }
  .checkout__summary { padding: var(--space-md); }
  .checkout__summary-title { font-size: 1rem; }
  .checkout__form-title { font-size: 1rem; }
  .terms-agree { font-size: 0.8125rem; }
}

/* ── Toggle switch for date filters ───────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--c-border, var(--border));
  border-radius: 20px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--c-accent, var(--carbon));
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
/* Header row that pairs a switch with the label of the group it enables.
   The registration-date switch used to sit alone in a grid cell with no
   visible text, and the from/to pair had to share that same two-column
   grid — the second date wrapped to a row of its own. */
.filter-switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  margin-bottom: var(--space-sm);
}
.filter-switch-row .toggle-switch { flex: 0 0 auto; }
.filter-switch-row .form-label { margin-bottom: 0; cursor: pointer; }
/* The enclosing .form-group already carries the block's bottom margin. */
.filter-switch-row + .form-row > .form-group { margin-bottom: 0; }

/* ── Language Switcher ─────────────────────────────────── */
.lang-switch {
  /* Retired: replaced site-wide by the full-language globe dropdown
     (.lang-dropdown). It only ever offered EN/ET, which broke LV/LT pages. */
  display: none;
  gap: 2px;
  background: rgba(241, 245, 249, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 2px;
  margin-left: 8px;
  vertical-align: middle;
}
/* Header-level switcher: always visible, even on mobile */
.lang-switch--header {
  flex-shrink: 0;
}
.lang-switch__btn {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight:500;
  letter-spacing:normal;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1;
  min-width: 32px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-switch__btn:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.7);
}
.lang-switch__btn.active {
  background: var(--c-primary);
  color: var(--surface);
}

/* ── Language Dropdown (replaces hamburger on mobile) ─── */
.lang-dropdown {
  /* The single header language control (all 9 languages), right-aligned.
     Replaces the old 2-button EN/ET switch on every page + viewport. */
  display: flex;
  align-items: center;
  position: relative;
  order: 0;
  flex-shrink: 0;
  margin-left: auto;
}
.lang-dropdown--always {
  display: block;
}
.lang-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
}
.lang-dropdown__trigger:hover {
  border-color: rgba(79, 70, 229, 0.35);
  color: var(--c-text);
  background: rgba(79, 70, 229, 0.04);
}
.lang-dropdown__trigger svg {
  flex-shrink: 0;
}
.lang-dropdown__chevron {
  transition: transform 0.2s;
}
.lang-dropdown.is-open .lang-dropdown__chevron {
  transform: rotate(180deg);
}
.lang-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow:none;
  padding: 4px;
  z-index: 1000;
}
.lang-dropdown.is-open .lang-dropdown__menu {
  display: block;
}
.lang-dropdown__item {
  display: block;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.lang-dropdown__item:hover {
  background: rgba(79, 70, 229, 0.06);
  color: var(--c-text);
}
.lang-dropdown__item.active {
  background: var(--c-primary);
  color: var(--surface);
}

/* ── Use-Cases / Semantic SEO Section ─────────────────── */
.use-cases {
  padding: var(--space-3xl) 0;
}
.use-cases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/* 3rd card: span both columns, but constrain width and center — matches reference 2+1 layout */
.use-cases__grid .use-case-card:nth-child(3) {
  grid-column: 1 / -1;
  max-width: calc(50% - var(--space-lg) / 2);
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .use-cases__grid .use-case-card:nth-child(3) {
    max-width: 100%;
  }
}
.use-case-card {
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.use-case-card:hover {
  border-color: var(--c-primary);
  box-shadow:none;
}
.use-case-card__title {
  font-size: 1.125rem;
  font-weight:500;
  margin-bottom: 8px;
  color: var(--c-text);
}
.use-case-card__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--c-text-muted);
}

@media (max-width: 1024px) {
  .use-cases__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Pain Points Section ───────────────────────────────── */
.pain-points {
  padding: var(--space-3xl) 0;
  background: var(--c-bg);
}
.pain-points__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.pain-point-card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pain-point-card:hover {
  border-color: var(--c-border-hover);
  box-shadow:none;
}
.pain-point-card__value {
  font-size: 2rem;
  font-weight:500;
  color: var(--c-error);
  margin-bottom: 4px;
}
.pain-point-card__label {
  font-size: 1rem;
  font-weight:500;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.pain-point-card__text {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  line-height: 1.6;
}
.pain-points__resolve {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: 1.125rem;
  font-weight:500;
  color: var(--c-primary);
}
@media (max-width: 1024px) {
  .pain-points__grid { grid-template-columns: 1fr; }
}

/* ── Data Preview Table Section ────────────────────────── */
.data-preview {
  padding: var(--space-3xl) 0;
  background: linear-gradient(160deg, var(--c-bg) 0%, var(--selection) 100%);
}
.data-preview__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--surface);
  box-shadow:none;
  margin-top: var(--space-xl);
}
.data-preview__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-preview__table th {
  background: var(--selection);
  font-weight:500;
  font-size: 0.75rem;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-text-muted);
  padding: 14px 18px;
  text-align: left;
  border-bottom: 2px solid var(--c-border);
  white-space: nowrap;
}
.data-preview__table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  white-space: nowrap;
}
.data-preview__table tr:hover td { background: rgba(79,70,229,0.02); }
.data-preview__table tr:last-child td { border-bottom: none; }
.data-preview__footer {
  text-align: center;
  padding: var(--space-lg);
  font-size: 0.875rem;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
}

/* ── ROI Calculator Section ────────────────────────────── */
.roi-section {
  padding: var(--space-3xl) 0;
  background: var(--c-bg);
}
.roi-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--surface);
  box-shadow:none;
  margin-top: var(--space-xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.roi-table th {
  background: var(--selection);
  font-weight:500;
  font-size: 0.8125rem;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-text-muted);
  padding: 14px 20px;
  text-align: left;
  border-bottom: 2px solid var(--c-border);
}
.roi-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.roi-table td:first-child { color: var(--c-text-secondary); }
.roi-table tr:last-child td { border-bottom: none; }
.roi-table .roi-old { color: var(--c-error); font-weight:500; }
.roi-table .roi-new { color: var(--c-success); font-weight:500; }
.roi-highlight {
  text-align: center;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(79,70,229,0.06));
  border: 1px solid rgba(5,150,105,0.15);
  border-radius: var(--radius-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.roi-highlight__value {
  font-size: 2rem;
  font-weight:500;
  color: var(--c-success);
}
.roi-highlight__label {
  font-size: 0.875rem;
  color: var(--c-text-secondary);
  margin-top: 4px;
}

/* ── Two Ways Section ──────────────────────────────────── */
.two-ways {
  padding: var(--space-3xl) 0;
  background: linear-gradient(160deg, var(--selection) 0%, var(--c-bg) 100%);
}
.two-ways__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.two-ways__card {
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.two-ways__card:hover {
  border-color: var(--c-border-hover);
  box-shadow:none;
}
.two-ways__card-title {
  font-size: 1.25rem;
  font-weight:500;
  margin-bottom: var(--space-sm);
}
.two-ways__card-desc {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .two-ways__grid { grid-template-columns: 1fr; }
}

/* ── Pricing Section ───────────────────────────────────── */
.pricing-section {
  padding: var(--space-3xl) 0;
  background: var(--c-bg);
}
.pricing-downloads {
  margin-top: var(--space-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-downloads__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--surface);
  box-shadow:none;
}
.pricing-downloads__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.pricing-downloads__table th {
  background: var(--selection);
  font-weight:500;
  font-size: 0.75rem;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-text-muted);
  padding: 12px 18px;
  text-align: left;
  border-bottom: 2px solid var(--c-border);
}
.pricing-downloads__table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.pricing-downloads__table tr:last-child td { border-bottom: none; }
.pricing-downloads__table td:nth-child(2) { font-weight:500; color: var(--c-primary); }

.pricing-api { margin-top: var(--space-2xl); }
.pricing-api__subtitle {
  text-align: center;
  font-size: 1.25rem;
  font-weight:500;
  margin-bottom: var(--space-xl);
}
.pricing-api__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.pricing-api__card {
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.pricing-api__card:hover {
  border-color: var(--c-border-hover);
  box-shadow:none;
}
.pricing-api__card--popular {
  border-color: var(--c-primary);
  box-shadow:none;
}
.pricing-api__card--popular::before {
  content: 'POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight:500;
  color: var(--surface);
  background: var(--c-primary);
  padding: 2px 14px;
  border-radius: var(--radius-pill);
  letter-spacing:normal;
}
.pricing-api__card-name {
  font-size: 0.875rem;
  font-weight:500;
  color: var(--c-text-muted);
  text-transform:none;
  letter-spacing:normal;
  margin-bottom: 4px;
}
.pricing-api__card-price {
  font-size: 2rem;
  font-weight:500;
  color: var(--c-text);
  margin-bottom: 4px;
}
.pricing-api__card-price span { font-size: 0.875rem; font-weight: 500; color: var(--c-text-muted); }
.pricing-api__card-features {
  list-style: none;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--c-text-secondary);
  margin: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-api__card-features li::before {
  content: '✓';
  color: var(--c-success);
  font-weight:500;
  margin-right: 8px;
}
@media (max-width: 1024px) {
  .pricing-api__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-api__grid { grid-template-columns: 1fr; }
}

/* ── Integrations Section ──────────────────────────────── */
.integrations-section {
  padding: var(--space-3xl) 0;
  background: linear-gradient(160deg, var(--c-bg) 0%, var(--selection) 100%);
}
.integrations__category {
  margin-bottom: var(--space-lg);
}
.integrations__category-label {
  font-size: 0.6875rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
  color: var(--c-text-muted);
  margin-bottom: var(--space-md);
}
.integrations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.integration-card {
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.integration-card:hover {
  border-color: var(--c-border-hover);
  box-shadow:none;
}
.integration-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.integration-card__name {
  font-size: 0.9375rem;
  font-weight:500;
  color: var(--c-text);
}
.integration-card__status {
  font-size: 0.6875rem;
  font-weight:500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing:normal;
}
.integration-card__status--live {
  background: var(--c-success-light);
  color: var(--c-success);
}
.integration-card__status--soon {
  background: rgba(217,119,6,0.08);
  color: var(--c-warning);
}
.integration-card__text {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  line-height: 1.5;
}
.integrations__request {
  text-align: center;
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.integrations__request-title {
  font-size: 1.0625rem;
  font-weight:500;
  margin-bottom: var(--space-md);
}
@media (max-width: 1024px) {
  .integrations__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .integrations__grid { grid-template-columns: 1fr; }
}

/* ── Live Feed Section ─────────────────────────────────── */
.live-feed {
  padding: var(--space-3xl) 0;
  background: var(--c-bg);
}
.live-feed__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.live-feed__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.live-feed__item:hover {
  border-color: var(--c-border-hover);
}
.live-feed__flag {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.live-feed__text {
  font-size: 0.875rem;
  color: var(--c-text);
  line-height: 1.5;
}
.live-feed__time {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-top: 4px;
  display: block;
}
@media (max-width: 1024px) {
  .live-feed__grid { grid-template-columns: 1fr; }
}

/* ── Testimonials ──────────────────────────────────────── */
.testimonials {
  padding: var(--space-2xl) 0;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.testimonial-card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.testimonial-card__quote {
  font-size: 0.9375rem;
  color: var(--c-text);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--space-lg);
}
.testimonial-card__author {
  font-size: 0.8125rem;
  font-weight:500;
  color: var(--c-text);
}
.testimonial-card__role {
  font-size: 0.75rem;
  color: var(--c-text-muted);
}
@media (max-width: 1024px) {
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* ── Developer API Section ─────────────────────────────── */
.dev-api {
  padding: var(--space-3xl) 0;
  background: var(--carbon);
  color: var(--border);
}
.dev-api .section-header__eyebrow {
  color: #818CF8;
  background: rgba(79,70,229,0.15);
  border-color: rgba(79,70,229,0.3);
}
.dev-api .section-header__title {
  /* dev-api is white-on-dark — opt out of the gradient so the text is solid white */
  background: none;
  -webkit-text-fill-color: var(--surface);
  color: var(--surface);
}
.dev-api .section-header__subtitle { color: rgba(203,213,225,0.8); }
.dev-api__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:none;
  max-width: 900px;
  margin: 0 auto;
}
.dev-api__panel {
  background: var(--carbon);
  padding: var(--space-xl);
}
.dev-api__panel-label {
  font-size: 0.6875rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
  color: #818CF8;
  margin-bottom: var(--space-md);
}
.dev-api__code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--border);
  white-space: pre-wrap;
  word-break: break-all;
}
.dev-api__code .code-key { color: #818CF8; }
.dev-api__code .code-str { color: #34D399; }
.dev-api__code .code-num { color: #FBBF24; }
@media (max-width: 1024px) {
  .dev-api__panels { grid-template-columns: 1fr; }
}

/* ── FAQ Section ───────────────────────────────────────── */
.faq-section {
  padding: var(--space-3xl) 0;
  background: linear-gradient(160deg, var(--c-bg) 0%, var(--selection) 100%);
}
.faq__list {
  max-width: 750px;
  margin: var(--space-xl) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq__item {
  border-bottom: 1px solid var(--c-border);
}
.faq__item:first-child {
  border-top: 1px solid var(--c-border);
}
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 1rem;
  font-weight:500;
  color: var(--c-text);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
}
.faq__question:hover { color: var(--c-primary); }
.faq__question-icon {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--c-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: var(--space-md);
}
.faq__item.active .faq__question-icon { transform: rotate(45deg); }
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq__item.active .faq__answer {
  max-height: 300px;
}
.faq__answer-text {
  padding: 0 0 var(--space-lg);
  font-size: 0.9375rem;
  color: var(--c-text-secondary);
  line-height: 1.7;
}

/* ── Stats Row ─────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: var(--space-2xl) 0;
  text-align: center;
}
.stats-row__item-value {
  font-size: 1.75rem;
  font-weight:500;
  color: var(--c-primary);
}
.stats-row__item-label {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   COLOR ENHANCEMENTS — Clean Light Business Theme
   ══════════════════════════════════════════════════════════ */

/* ── Extra brand tokens ──────────────────────────────────── */
:root {
  --c-purple:       #7C3AED;
  --c-purple-light: rgba(124,58,237,0.08);
  --c-teal:         #0891B2;
  --c-amber:        #D97706;
  --c-amber-light:  rgba(217,119,6,0.08);
}

/* ── Hero stats — distinct accent colors ──────────────────── */
.hero__stats .hero__stat:nth-child(1) .hero__stat-value { color: var(--c-primary); }
.hero__stats .hero__stat:nth-child(2) .hero__stat-value { color: var(--c-accent); }
.hero__stats .hero__stat:nth-child(3) .hero__stat-value { color: var(--c-success); }

/* ── Ticker — light gradient background ──────────────────── */
.ticker {
  background: linear-gradient(90deg, var(--c-bg) 0%, var(--c-bg-elevated) 50%, var(--c-bg) 100%);
  border-top: 1px solid var(--c-border);
}
.ticker__item { color: var(--c-text-secondary); }
.ticker__dot--amber { background: var(--c-amber); }
.ticker__dot--green { background: var(--c-success); }

/* ── Countries section — clean grey backdrop, white cards ── */
.countries {
  background: var(--c-bg-elevated);
}

/* ── Feature card icons — unique color per card ──────────── */
.feature-card:nth-child(1) .feature-card__icon {
  background: var(--selection);
  color: var(--carbon);
}
.feature-card:nth-child(2) .feature-card__icon {
  background: #F0FDFA;
  color: #0D9488;
}
.feature-card:nth-child(3) .feature-card__icon {
  background: #ECFDF5;
  color: #059669;
}
.feature-card:nth-child(4) .feature-card__icon {
  background: #FAF5FF;
  color: #9333EA;
}

/* ── Feature card top-border color per card ─────────────── */
.feature-card:nth-child(1)::before { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.feature-card:nth-child(2)::before { background: linear-gradient(90deg, var(--c-accent), var(--c-teal)); }
.feature-card:nth-child(3)::before { background: linear-gradient(90deg, var(--c-teal), var(--c-success)); }
.feature-card:nth-child(4)::before { background: linear-gradient(90deg, var(--c-purple), #A78BFA); }

/* ── Section eyebrow pills — unique color per section ────── */
.features .section-header__eyebrow {
  color: var(--c-primary);
  background: rgba(79,70,229,0.06);
  border-color: rgba(79,70,229,0.15);
}
.how-it-works .section-header__eyebrow {
  color: var(--c-primary);
  background: rgba(79,70,229,0.06);
  border-color: rgba(79,70,229,0.15);
}
.use-cases .section-header__eyebrow {
  color: var(--c-purple);
  background: var(--c-purple-light);
  border-color: rgba(124,58,237,0.15);
}

/* ── Step number circles — unique gradient per step ──────── */
.step:nth-child(1) .step__number { background: linear-gradient(135deg, var(--carbon), var(--carbon)); box-shadow:none; }
.step:nth-child(2) .step__number { background: linear-gradient(135deg, var(--carbon), var(--carbon)); box-shadow:none; }
.step:nth-child(3) .step__number { background: linear-gradient(135deg, var(--carbon), var(--carbon)); box-shadow:none; }
.step:nth-child(4) .step__number { background: linear-gradient(135deg, var(--carbon), var(--carbon)); box-shadow:none; }
.step:nth-child(1):hover .step__number { box-shadow:none; }
.step:nth-child(2):hover .step__number { box-shadow:none; }
.step:nth-child(3):hover .step__number { box-shadow:none; }
.step:nth-child(4):hover .step__number { box-shadow:none; }

/* ── CTA card — light indigo clean ──────────────────────── */
.cta-card {
  background: linear-gradient(160deg, var(--selection) 0%, var(--selection) 100%);
  border-color: rgba(99,102,241,0.15);
  color: var(--c-text);
}
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(99,102,241,0.06) 0%, transparent 70%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card__title { color: #1E1B4B; }
.cta-card__text { color: var(--muted); }

/* ── Use-cases section — plain background, clean white cards ── */
.use-cases {
  background: var(--c-bg);
}
.use-case-card:hover {
  border-color: rgba(79,70,229,0.20);
  box-shadow:none;
  transform: translateY(-2px);
}

/* ── Country card price tags — unified red accent ───── */

/* ── Features section — clean grey backdrop ──────────────── */
.features {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
}

/* ── Steps section — subtle indigo tint background ────────── */
.how-it-works {
  background: linear-gradient(180deg,
    var(--c-bg) 0%,
    var(--selection) 50%,
    var(--c-bg) 100%);
}

/* ── Blog ─────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.blog-card:hover { border-color: var(--c-border-active); box-shadow:none; }
.blog-card__link { display: block; padding: var(--space-lg); text-decoration: none; color: inherit; }
.blog-card__title { font-size: 1.125rem; font-weight:500; margin-bottom: var(--space-xs); line-height: 1.4; color: var(--c-text); }
.blog-card__date { display: block; font-size: 0.8125rem; color: var(--c-text-muted); margin-bottom: var(--space-sm); }
.blog-card__excerpt { font-size: 0.9375rem; color: var(--c-text-secondary); line-height: 1.6; margin-bottom: var(--space-md); }
.blog-card__more { font-size: 0.875rem; font-weight:500; color: var(--c-primary); }

.blog-pagination { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-2xl); }
.blog-pagination__link, .blog-pagination__current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500;
}
.blog-pagination__link { background: var(--c-bg-elevated); border: 1px solid var(--c-border); color: var(--c-text); text-decoration: none; }
.blog-pagination__link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.blog-pagination__current { background: var(--c-primary); color: var(--surface); }

.blog-post { max-width: 740px; margin: 0 auto; }
.blog-post__back { display: inline-block; font-size: 0.875rem; font-weight: 500; color: var(--c-primary); margin-bottom: var(--space-lg); text-decoration: none; }
.blog-post__back:hover { color: var(--c-primary-hover); }
.blog-post__title { font-size: 2rem; font-weight:500; line-height: 1.3; margin-bottom: var(--space-sm); }
.blog-post__date { display: block; font-size: 0.875rem; color: var(--c-text-muted); margin-bottom: var(--space-2xl); }
.blog-post__content { font-size: 1.0625rem; line-height: 1.8; color: var(--c-text-secondary); }
.blog-post__content h2 { font-size: 1.5rem; font-weight:500; color: var(--c-text); margin: var(--space-2xl) 0 var(--space-md); }
.blog-post__content h3 { font-size: 1.25rem; font-weight:500; color: var(--c-text); margin: var(--space-xl) 0 var(--space-sm); }
.blog-post__content p { margin-bottom: var(--space-md); }
.blog-post__content ul, .blog-post__content ol { margin-bottom: var(--space-md); padding-left: var(--space-xl); }
.blog-post__content li { margin-bottom: var(--space-xs); }
.blog-post__content a { color: var(--c-primary); text-decoration: underline; }
.blog-post__content a:hover { color: var(--c-primary-hover); }
.blog-post__content img { border-radius: var(--radius); margin: var(--space-lg) 0; }
.blog-post__content blockquote {
  border-left: 3px solid var(--c-primary);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  background: var(--c-primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.blog-post__content pre {
  background: var(--c-surface);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
}
.blog-post__content code { font-size: 0.875em; background: var(--c-surface); padding: 0.1em 0.3em; border-radius: 4px; }
.blog-post__content pre code { background: none; padding: 0; }
/* MCP blog set (2026-07-23): first posts with images + tables */
.blog-post__content img { max-width: 100%; height: auto; display: block; }
.blog-post__content .blog-figure { margin: var(--space-lg) 0; }
.blog-post__content .blog-figure img { margin: 0; width: 100%; }
.blog-post__content .blog-table-wrap { overflow-x: auto; margin: var(--space-lg) 0; -webkit-overflow-scrolling: touch; }
.blog-post__content table.blog-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.blog-post__content table.blog-table th,
.blog-post__content table.blog-table td { border: 1px solid var(--c-border); padding: 0.6rem 0.8rem; vertical-align: top; line-height: 1.5; }
.blog-post__content table.blog-table thead th { background: var(--c-surface); color: var(--c-text); font-weight:500; }
.blog-post__content table.blog-table tbody tr:nth-child(even) { background: var(--c-surface); }

.blog-loading, .blog-empty, .blog-error { text-align: center; color: var(--c-text-muted); padding: var(--space-3xl) 0; font-size: 1rem; }

/* ── Filter modal: 2-column desktop layout ──────────────────────────────
   On low-resolution desktops (1280-1440 wide × ~720-900 tall) the default
   single-column modal forced users to scroll past the industry tree before
   even seeing the Order button — a measurable drop-off. Two-column
   multi-column flow halves the vertical footprint without any JS or
   markup change. Phone (<1024px) layout is untouched: it works well
   stacked. */
@media (min-width: 1024px) and (min-height: 700px) {
  #filterModal .modal { max-width: 1100px; }
  #filterModal .modal__body {
    column-count: 2;
    column-gap: var(--space-xl);
  }
  /* Keep each section as one block — never split a label/input pair across
     columns mid-tree. */
  #filterModal .modal__body > .form-group,
  #filterModal .modal__body > .form-row,
  #filterModal .modal__body > .filter-section-header,
  #filterModal .modal__body > .filter-section-body,
  #filterModal .modal__body > .industry-picker {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--space-md);
  }
  /* The "more below" floating chevron makes no sense in 2-column flow. */
  #filterModal .modal__body--has-more .modal__more-hint { display: none; }
  #filterModal .modal__body--has-more {
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* The EHAK / location dropdown-picker uses an absolute-positioned panel
     in single-column. CSS multi-column can't see absolute children and
     places the open panel into the wrong column, breaking the layout.
     In 2-col mode render the panel INLINE so the whole form-group stays
     one column-flowed block that `break-inside: avoid` keeps intact. */
  #filterModal .dropdown-picker__panel {
    position: static;
    margin-top: 4px;
    box-shadow:none;
  }
}


/* ── Hero FilterDemo element (.fd-*) — interactive 4-step hero card.
   Ported from plan/front2.html 2026-06-12. JS: js/filter-demo.js. ── */
  .fd-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    box-shadow:none;
  }
  .hero__demo-card.fd-card::before { display: none; }
  .fd-inner { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .fd-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #F8FAFF 0%, #F2F0FF 100%);
    border-bottom: 1px solid rgba(79, 70, 229, 0.10);
  }
  .fd-head__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .fd-eyebrow {
    font-size: 0.62rem; font-weight:500; line-height: 1.2;
    letter-spacing:normal; text-transform:none; color: var(--carbon);
  }
  .fd-head__title {
    font-size: 0.95rem; font-weight: 750; line-height: 1.3;
    letter-spacing: -0.015em; color: var(--c-text, var(--carbon));
  }
  .fd-head__badge {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    min-height: 28px; padding: 5px 10px; border-radius: 999px;
    color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0;
    font-size: 0.66rem; font-weight:500; letter-spacing:normal;
  }
  .fd-body { padding: 14px 18px 12px; }
  .fd-config, .fd-output { min-width: 0; }
  .fd-intro {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
  }
  .fd-intro__title {
    margin: 0 0 2px; color: var(--c-text, var(--carbon));
    font-size: 0.92rem; font-weight: 750; line-height: 1.35;
  }
  .fd-intro__text {
    margin: 0; color: var(--muted); font-size: 0.74rem; line-height: 1.4;
  }
  .fd-cta:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.30); outline-offset: 2px;
  }
  .fd-steps { display: grid; gap: 6px; pointer-events: none; user-select: none; }
  .fd-step {
    position: relative;
    display: grid; grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 5px 10px 5px 8px; border-radius: 11px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--c-text, var(--carbon)); text-align: left;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
  }
  .fd-step.is-next {
    border-color: rgba(79, 70, 229, 0.42);
    box-shadow:none;
  }
  .fd-step.is-selected { border-color: #C7D2FE; background: var(--selection); }
  .fd-step__number {
    display: grid; place-items: center; width: 31px; height: 31px;
    border-radius: 9px; background: var(--selection); color: var(--muted);
    font-size: 0.72rem; font-weight:500;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  }
  .fd-step.is-next .fd-step__number { color: var(--carbon); background: #E0E7FF; }
  .fd-step.is-selected .fd-step__number { color: var(--surface); background: var(--carbon); }
  .fd-step__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .fd-step__label { font-size: 0.68rem; font-weight: 650; color: var(--muted); line-height: 1.25; }
  .fd-step__value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.82rem; font-weight: 750; color: var(--carbon); line-height: 1.3;
  }
  .fd-step__action {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 52px; color: var(--carbon); font-size: 0.66rem; font-weight:500;
  }
  .fd-step.is-selected .fd-step__action { color: #047857; }
  .fd-step__action svg { flex: 0 0 auto; }
  .fd-progress {
    height: 3px; margin: 7px 2px 8px; overflow: hidden;
    border-radius: 999px; background: #EEF2F7;
  }
  .fd-progress__bar {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--carbon), #7C3AED);
    transform-origin: left center;
    transition: transform 280ms ease-out;
  }
  .fd-progress__bar.is-full { transform: scaleX(1); }
  .fd-result {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; gap: 12px; padding: 9px 11px;
    border: 1px solid rgba(79, 70, 229, 0.13); border-radius: 12px;
    background: linear-gradient(135deg, #FAFBFF 0%, #F8F5FF 100%);
  }
  .fd-result__label {
    display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
    color: var(--muted); font-size: 0.66rem; font-weight:500;
  }
  .fd-result__label svg { color: #059669; }
  .fd-result__count {
    display: block; color: var(--carbon); font-size: 1.6rem; font-weight: 850;
    line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  }
  .fd-result__companies { color: var(--muted); font-size: 0.7rem; font-weight: 650; }
  .fd-result__price { min-width: 114px; text-align: right; }
  .fd-result__price-value {
    display: block; color: var(--carbon); font-size: 1rem; font-weight: 850;
    line-height: 1.2; font-variant-numeric: tabular-nums;
    animation: fd-price-in 220ms ease-out;
  }
  .fd-result__price-value.is-prompt { color: var(--carbon); font-size: 0.76rem; }
  .fd-result__price-note { color: var(--muted); font-size: 0.62rem; font-weight:500; }
  @keyframes fd-price-in { from { opacity: 0; transform: translateY(4px); } }
  .fd-insight {
    display: flex; align-items: center; gap: 6px; min-height: 22px;
    margin: 4px 2px 5px; color: var(--muted); font-size: 0.7rem; line-height: 1.35;
  }
  .fd-insight svg { flex: 0 0 auto; color: var(--carbon); }
  .fd-sheet { overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
  .fd-sheet__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 5px 9px; background: var(--selection); border-bottom: 1px solid var(--border);
  }
  .fd-sheet__title {
    display: inline-flex; align-items: center; gap: 6px;
    color: #334155; font-size: 0.67rem; font-weight:500;
  }
  .fd-sheet__title svg { color: #059669; }
  .fd-sheet__file {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--muted); font-family:var(--font-body);
    font-size: 0.58rem; font-weight: 650;
  }
  .fd-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .fd-sheet th {
    padding: 5px 9px; background: #FCFCFE; border-bottom: 1px solid #EEF2F7;
    color: var(--muted); font-size: 0.54rem; font-weight:500; line-height: 1.2;
    text-align: left; text-transform:none; letter-spacing:normal;
  }
  .fd-sheet td {
    padding: 5px 9px; border-bottom: 1px solid var(--selection);
    color: var(--muted); font-size: 0.64rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 200ms ease, background 200ms ease, opacity 200ms ease;
  }
  .fd-sheet tr:last-child td { border-bottom: 0; }
  .fd-sheet th:nth-child(1) { width: 34%; }
  .fd-sheet th:nth-child(2) { width: 25%; }
  .fd-sheet th:nth-child(3) { width: 41%; }
  .fd-cell-name { color: var(--carbon); font-weight:500; }
  .fd-cell-contact { color: var(--carbon); }
  .fd-cell-locked {
    color: #94A3B8; background: #FAFAFC;
    font-style: italic; opacity: 0.82;
  }
  .fd-sheet-note { margin: 5px 2px 0; color: var(--muted); font-size: 0.61rem; line-height: 1.35; }
  .fd-foot {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 8px 14px 8px 18px;
    background: linear-gradient(180deg, #FAFBFE 0%, #F4F6FB 100%);
    border-top: 1px solid rgba(79, 70, 229, 0.08);
  }
  .fd-foot__trust {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    color: var(--muted); font-size: 0.68rem; font-weight:500; line-height: 1.35;
  }
  .fd-foot__trust svg { flex: 0 0 auto; color: #059669; }
  .fd-foot__trust-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fd-cta {
    min-width: 148px;
    min-height: 44px;
    padding: 9px 15px;
    border-radius: 11px;
    white-space: nowrap;
    font-size: 0.75rem;
    letter-spacing:normal;
    box-shadow:none;
  }
  .fd-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .fd-flow-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight:500;
    font-variant-numeric: tabular-nums;
  }
  .fd-flow-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 0 18px 12px;
    background: linear-gradient(135deg, #F8FAFF 0%, #F2F0FF 100%);
  }
  .fd-flow-rail span,
  .fd-flow-rail button {
    position: relative;
    height: 3px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #DDE3EE;
  }
  .fd-flow-rail button {
    height: 15px;
    overflow: visible;
    cursor: pointer;
    background: transparent;
  }
  .fd-flow-rail button::before {
    content: "";
    position: absolute;
    inset: 6px 0;
    border-radius: 999px;
    background: #DDE3EE;
  }
  .fd-flow-rail span::after,
  .fd-flow-rail button::after {
    content: "";
    display: block;
    position: absolute;
    inset: 6px 0;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--carbon), #7C3AED);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms ease;
  }
  .fd-flow-rail span::after {
    position: static;
    height: 100%;
  }
  .fd-flow-rail span.is-done::after,
  .fd-flow-rail span.is-active::after,
  .fd-flow-rail button.is-done::after,
  .fd-flow-rail button.is-active::after { transform: scaleX(1); }
  .fd-flow-rail button:hover::before { background: #C7D2FE; }
  .fd-flow-rail button:focus-visible {
    outline: 2px solid var(--carbon);
    outline-offset: 2px;
  }
  .fd-flow-body { display: flex; flex: 1; min-height: 0; }
  .fd-slide {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 18px;
    width: 100%;
    padding: 20px 18px;
    animation: fd-slide-in 320ms ease-out both;
  }
  @keyframes fd-slide-in {
    from { opacity: 0; transform: translateY(7px); }
  }
  .fd-slide__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .fd-slide__step {
    margin-bottom: 6px;
    color: var(--carbon);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing:normal;
    text-transform:none;
  }
  .fd-slide__title {
    margin: 0 0 8px;
    color: var(--carbon);
    font-size: 1.28rem;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -0.025em;
  }
  .fd-slide__text {
    margin: 0;
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.45;
  }
  .fd-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--surface) 0%, var(--selection) 100%);
    box-shadow:none;
  }
  .fd-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 750;
  }
  .fd-panel__top strong { color: var(--carbon); font-size: 0.7rem; }
  .fd-country-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; }
  .fd-country {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 50px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }
  .fd-country.is-active {
    border-color: #818CF8;
    background: var(--selection);
    box-shadow:none;
  }
  .fd-country__flag {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--carbon);
    background: var(--selection);
    font-size: 0.62rem;
    font-weight:500;
    letter-spacing:normal;
  }
  .fd-country__name { display: block; color: var(--carbon); font-size: 0.7rem; font-weight:500; }
  .fd-country__meta { display: block; color: var(--muted); font-size: 0.56rem; font-weight: 650; }
  .fd-filter-list { display: grid; gap: 6px; }
  .fd-filter {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 6px 8px;
    border: 1px solid #DDE3EE;
    border-radius: 10px;
    background: var(--surface);
  }
  .fd-filter__check {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: var(--surface);
    background: var(--carbon);
  }
  .fd-filter__label { display: block; color: var(--muted); font-size: 0.56rem; font-weight:500; }
  .fd-filter__value { display: block; color: var(--carbon); font-size: 0.7rem; font-weight:500; }
  .fd-filter__status { color: #047857; font-size: 0.58rem; font-weight:500; }
  .fd-order-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--selection);
    border: 1px solid #C7D2FE;
  }
  .fd-order-total__count { color: var(--carbon); font-size: 1rem; font-weight: 850; }
  .fd-order-total__label { display: block; color: var(--muted); font-size: 0.56rem; font-weight: 650; }
  .fd-order-total__price { color: var(--carbon); font-size: 1rem; font-weight: 850; text-align: right; }
  .fd-checkout-lines { display: grid; gap: 7px; }
  .fd-checkout-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 650;
  }
  .fd-checkout-line strong { color: var(--carbon); font-size: 0.72rem; }
  .fd-checkout-total {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .fd-checkout-total strong { font-size: 1rem; }
  .fd-bank-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
  .fd-bank {
    display: grid;
    place-items: center;
    min-height: 35px;
    border: 1px solid #DDE3EE;
    border-radius: 8px;
    color: #334155;
    background: var(--surface);
    font-size: 0.62rem;
    font-weight:500;
  }
  .fd-security {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #A7F3D0;
    border-radius: 10px;
    background: #ECFDF5;
    color: #065F46;
  }
  .fd-security__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #059669;
    color: var(--surface);
  }
  .fd-security__title {
    display: block;
    color: #065F46;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.2;
  }
  .fd-security__text {
    display: block;
    margin-top: 2px;
    color: #047857;
    font-size: 0.57rem;
    font-weight: 650;
    line-height: 1.3;
  }
  .fd-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 224px;
    text-align: center;
  }
  .fd-download__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 14px;
    color: var(--surface);
    background: linear-gradient(135deg, #059669, #10B981);
    box-shadow:none;
  }
  .fd-download__title { color: var(--carbon); font-size: 0.88rem; font-weight: 850; }
  .fd-download__file {
    max-width: 100%;
    margin-top: 5px;
    overflow: hidden;
    color: var(--carbon);
    font-family:var(--font-body);
    font-size: 0.62rem;
    font-weight:500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fd-download__meta { margin-top: 6px; color: var(--muted); font-size: 0.61rem; font-weight: 650; }
  @media (min-width: 1120px) {
    /* Keep the default .hero__content 1fr/1fr grid (no narrowing) so the three
       hero CTAs stay on one line; the card sizing below is enough for the demo. */
    .hero__right { align-self: start; }
    .hero__demo-card.fd-card {
      max-width: 600px;
      min-height: 480px;
    }
    .fd-inner { height: 100%; }
    .fd-flow-body { min-height: 356px; }
  }
  @media (max-width: 580px) {
    .fd-head { padding: 11px 14px; }
    .fd-head__title { font-size: 0.88rem; }
    .fd-body { padding: 11px 14px 10px; }
    .fd-intro { margin-bottom: 7px; }
    .fd-step { grid-template-columns: 29px minmax(0, 1fr) auto; min-height: 42px; gap: 8px; }
    .fd-step__number { width: 29px; height: 29px; }
    .fd-result__count { font-size: 1.55rem; }
    .fd-result__price { min-width: 96px; }
    .fd-sheet td, .fd-sheet th { padding-left: 7px; padding-right: 7px; }
    .fd-sheet th { font-size: 0.5rem; letter-spacing:normal; }
    .fd-sheet th:nth-child(1) { width: 38%; }
    .fd-sheet th:nth-child(2) { width: 27%; }
    .fd-sheet th:nth-child(3) { width: 35%; }
    .fd-sheet tbody tr:nth-child(3) { display: none; }
    .fd-foot { grid-template-columns: 1fr; gap: 7px; padding: 8px 14px 10px; }
    .fd-foot__trust { justify-content: center; }
    .fd-cta { width: 100%; }
    .fd-flow-rail { padding: 0 14px 10px; }
    .fd-flow-body { min-height: 0; }
    .fd-slide {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 15px 14px;
    }
    .fd-slide__title { font-size: 1.12rem; }
    .fd-country { min-height: 46px; }
    .fd-download { min-height: 190px; }
  }
  @media (max-width: 380px) {
    .fd-head__badge { display: none; }
    .fd-step__action span { display: none; }
    .fd-step__action { min-width: 24px; }
    .fd-result { gap: 8px; padding: 10px; }
    .fd-result__count { font-size: 1.4rem; }
    .fd-result__price-value { font-size: 0.88rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fd-step, .fd-step__number, .fd-progress__bar, .fd-sheet td, .fd-cta {
      transition: none;
    }
    .fd-result__price-value { animation: none; }
  }


/* ── Hero trust card: Innovadata's own registry record (.reg-proof*) — replaced the testimonial carousel 2026-07-02 ── */
.reg-proof {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  min-height: 118px;
  margin-top: 18px;
  padding: 14px 32px 14px 15px;
  overflow: hidden;
  color: #334155;
  background:
    radial-gradient(circle at 3% 50%, rgba(99, 102, 241, 0.16), transparent 26%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 245, 255, 0.7) 48%, rgba(246, 245, 255, 0) 84%);
}
.hero__content > .reg-proof {
  grid-column: 1 / -1;
  max-width: none;
  margin-top: 0;
}
.reg-proof::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0), var(--carbon) 28%, #8B5CF6 72%, rgba(139, 92, 246, 0));
}
.reg-proof__avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--selection), #E0E7FF);
  box-shadow:none;
}
.reg-proof__copy { min-width: 0; }
.reg-proof__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 4px;
  color: var(--carbon);
  font-size: 0.57rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}
.reg-proof__pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  font-size: 0.57rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}
.reg-proof__title {
  display: block;
  color: var(--carbon);
  font-size: 0.8rem;
  font-weight:500;
  line-height: 1.28;
}
.reg-proof__meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight:500;
  line-height: 1.45;
}
.reg-proof__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 0.67rem;
  font-weight:500;
}
.reg-proof__links a { color: var(--carbon); text-decoration: none; }
.reg-proof__links a:hover { text-decoration: underline; }
@media (max-width: 580px) {
  .reg-proof { max-width: none; margin-top: 14px; padding: 13px 12px; }
  .reg-proof__eyebrow { font-size: 0.54rem; }
  .reg-proof__title { font-size: 0.76rem; }
  .reg-proof__meta { font-size: 0.63rem; }
  .reg-proof__avatar { width: 38px; height: 38px; font-size: 1rem; }
}

/* ── Offer fork: buy a list now vs free account + 30 credits (.offer*) ── */
.offer {
  padding: var(--space-2xl, 48px) 0 var(--space-3xl, 64px);
  background: linear-gradient(180deg, #F8FAFF 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--c-border, var(--border));
}
.offer__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--c-primary, var(--carbon));
  font-size: 0.78rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}
.offer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}
.offer__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 28px 26px;
  background: var(--surface);
  border: 1px solid var(--c-border, var(--border));
  border-radius: var(--radius-lg, 16px);
  box-shadow:none;
}
.offer__card--free {
  border: 2px solid var(--c-primary, var(--carbon));
  box-shadow:none;
}
.offer__badge {
  position: absolute;
  top: -13px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-primary, var(--carbon));
  color: var(--surface);
  font-size: 0.72rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  white-space: nowrap;
}
.offer__card-title {
  font-size: 1.25rem;
  font-weight:500;
  letter-spacing: -0.01em;
  color: var(--c-text, var(--carbon));
  margin: 0 0 8px;
}
.offer__card-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text-secondary, var(--muted));
  margin: 0 0 14px;
}
.offer__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.offer__list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-text-secondary, var(--muted));
}
.offer__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--selection);
  color: var(--c-primary, var(--carbon));
  font-size: 0.72rem;
  font-weight:500;
  line-height: 18px;
  text-align: center;
}
.offer__cta {
  margin-top: auto;
  justify-content: center;
  text-align: center;
  white-space: normal; /* long LV/LT labels must wrap, not widen the card (375px) */
}
.offer__note {
  font-size: 0.78rem;
  color: var(--c-text-muted, #94A3B8);
  margin: 12px 0 0;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .offer__grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
  .offer { padding: 32px 0 40px; }
  .offer__card { padding: 26px 20px 22px; }
}

/* ── For-developers API/MCP section (.api-dev*) + homepage FAQ (.faq*) — English-only, added 2026-07-03 ── */
.api-dev {
  padding: var(--space-2xl, 48px) 0 var(--space-3xl, 64px);
  background: linear-gradient(180deg, var(--surface) 0%, #F8FAFF 100%);
  border-top: 1px solid var(--c-border, var(--border));
  border-bottom: 1px solid var(--c-border, var(--border));
}
.api-dev__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--c-primary, var(--carbon));
  font-size: 0.78rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}
.api-dev__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: center;
}
/* Let grid tracks shrink below content min-width so the code <pre> scrolls
   internally instead of pushing page width (masked by body overflow-x:hidden). */
.api-dev__grid > * { min-width: 0; }
.api-dev__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.api-dev__list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text-secondary, var(--muted));
}
.api-dev__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--c-primary, var(--carbon));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.api-dev__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.api-dev__docs { font-size: 0.9rem; font-weight:500; color: var(--c-primary, var(--carbon)); text-decoration: none; }
.api-dev__docs:hover { text-decoration: underline; }
.api-dev__code {
  background: var(--carbon);
  border-radius: var(--radius-lg, 16px);
  padding: 18px 18px 20px;
  box-shadow:none;
}
.api-dev__code-head { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.api-dev__dot { width: 11px; height: 11px; border-radius: 50%; }
.api-dev__dot.r { background: #FF5F56; } .api-dev__dot.y { background: #FFBD2E; } .api-dev__dot.g { background: #27C93F; }
.api-dev__code-label { margin-left: 6px; color: #94A3B8; font-size: 0.72rem; font-weight:500; letter-spacing:normal; text-transform:none; }
.api-dev__code-label--mt { display: block; margin: 16px 0 8px; }
.api-dev__pre {
  margin: 0;
  overflow-x: auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.api-dev__pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--border);
  white-space: pre;
}
.api-dev__pre--muted code { color: #A5B4FC; }
@media (max-width: 860px) {
  .api-dev__grid { grid-template-columns: 1fr; }
  .api-dev { padding: 36px 0 44px; }
}

.faq { padding: var(--space-2xl, 48px) 0 var(--space-3xl, 64px); }
.faq__list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item {
  border: 1px solid var(--c-border, var(--border));
  border-radius: var(--radius, 12px);
  background: var(--surface);
  padding: 4px 20px;
}
.faq__item[open] { border-color: var(--c-primary, var(--carbon)); box-shadow:none; }
.faq__q {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  position: relative;
  font-size: 1rem;
  font-weight:500;
  color: var(--c-text, var(--carbon));
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-primary, var(--carbon));
  transition: transform 0.18s ease;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a {
  margin: 0;
  padding: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--c-text-secondary, var(--muted));
}
.faq__a a { color: var(--c-primary, var(--carbon)); }

/* ── Signals / monitoring section (.signals*) — English-only, added 2026-07-03 ── */
.signals { padding: var(--space-2xl, 48px) 0 var(--space-3xl, 64px); background: linear-gradient(180deg,#F8FAFF 0%,var(--surface) 100%); border-bottom:1px solid var(--c-border,var(--border)); }
.signals__eyebrow { display:inline-block; margin-bottom:8px; color:var(--c-primary,var(--carbon)); font-size:0.78rem; font-weight:500; letter-spacing:normal; text-transform:none; }
.signals__grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1040px; margin:0 auto; align-items:center; }
.signals__grid > * { min-width:0; }
.signals__list { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; }
.signals__list li { position:relative; padding-left:28px; font-size:0.95rem; line-height:1.55; color:var(--c-text-secondary,var(--muted)); }
.signals__list li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:5px; background:var(--c-primary,var(--carbon)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.signals__actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.signals__hint { font-size:0.82rem; color:var(--c-text-muted,#94A3B8); font-weight:500; }
.signals__card { background:var(--surface); border:1.5px dashed var(--c-primary,var(--carbon)); border-radius:var(--radius-lg,16px); padding:20px 22px; box-shadow:none; }
.signals__card-head { display:flex; align-items:center; gap:8px; font-weight:500; font-size:0.9rem; color:var(--c-text,var(--carbon)); margin-bottom:14px; }
.signals__card-head svg { color:var(--c-primary,var(--carbon)); flex-shrink:0; }
.signals__feed { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.signals__feed li { font-size:0.88rem; font-weight:500; color:var(--c-text-secondary,var(--muted)); }
.signals__new { display:inline-block; margin-right:8px; padding:1px 7px; border-radius:6px; background:#E8F8EF; color:#059669; font-size:0.64rem; font-weight:500; letter-spacing:normal; vertical-align:middle; }
.signals__card-foot { margin-top:16px; padding-top:12px; border-top:1px solid var(--c-border,var(--border)); font-size:0.76rem; color:var(--c-text-muted,#94A3B8); font-weight:500; }
@media (max-width:860px){ .signals__grid{ grid-template-columns:1fr; } .signals { padding:36px 0 44px; } .signals__actions .btn{ max-width:100%; white-space:normal; text-align:center; } }

/* ── Hero balance card (EN homepage — €30 offer as the hero) ── */
.balance-card { background:var(--c-bg,var(--surface)); border:1px solid var(--c-border,var(--border)); border-radius:var(--radius-xl,24px); box-shadow:none; overflow:hidden; max-width:420px; margin-left:auto; }
.balance-card__top { padding:26px 26px 22px; background:linear-gradient(145deg,var(--carbon),#6D5DF6); color:var(--surface); }
.balance-card__lbl { font-size:0.78rem; font-weight:500; letter-spacing:normal; text-transform:none; opacity:0.85; }
.balance-card__amt { font-size:2.9rem; font-weight:500; line-height:1.05; margin:4px 0 6px; letter-spacing:-0.02em; }
.balance-card__sub { font-size:0.84rem; font-weight:500; opacity:0.9; }
.balance-card__body { padding:20px 26px 26px; }
.balance-card__buys { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:11px; }
.balance-card__buys li { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:0.9rem; font-weight:500; color:var(--c-text,var(--carbon)); border-bottom:1px dashed var(--c-border,var(--border)); padding-bottom:11px; }
.balance-card__buys li:last-child { border-bottom:none; padding-bottom:0; }
.balance-card__buys li > span:first-child { min-width:0; }
.balance-card__cost { flex:none; white-space:nowrap; font-size:0.74rem; font-weight:500; color:var(--c-primary,var(--carbon)); background:var(--c-primary-light,rgba(79,70,229,0.07)); border-radius:var(--radius-pill,999px); padding:3px 10px; }
.balance-card__nocard { display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:500; color:#059669; margin-bottom:16px; }
.balance-card__cta { width:100%; justify-content:center; }
.balance-card__mini { margin-top:12px; text-align:center; font-size:0.74rem; color:var(--c-text-muted,#94A3B8); font-weight:500; }
@media (max-width:900px){ .balance-card { margin:0 auto; } }

/* ── Excel lists: one-schema table ── */
.lists { padding:64px 0; background:var(--c-bg-elevated,var(--selection)); }
.lists__eyebrow, .credits__eyebrow { display:inline-block; font-size:0.78rem; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--c-primary,var(--carbon)); background:var(--c-primary-light,rgba(79,70,229,0.07)); border-radius:var(--radius-pill,999px); padding:5px 14px; margin-bottom:var(--space-md,1rem); }
.lists__table-wrap { overflow-x:auto; border:1px solid var(--c-border,var(--border)); border-radius:var(--radius-lg,16px); background:var(--c-bg,var(--surface)); box-shadow:none; }
.lists__table { width:100%; border-collapse:collapse; min-width:640px; }
.lists__table th, .lists__table td { text-align:left; padding:14px 20px; font-size:0.9rem; border-bottom:1px solid var(--c-border,var(--border)); }
.lists__table th { font-size:0.72rem; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--c-text-muted,#94A3B8); background:var(--c-bg-elevated,var(--selection)); }
.lists__table tbody tr:last-child td { border-bottom:none; }
.lists__table td:first-child { font-weight:500; color:var(--c-text,var(--carbon)); white-space:nowrap; }
.lists__table td:last-child { color:var(--c-text-secondary,var(--muted)); }
.lists__actions { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:28px; }
.lists__sample { font-size:0.88rem; font-weight:500; color:var(--c-primary,var(--carbon)); }

/* ── Credits / pricing ── */
.credits { padding:64px 0; }
.credits__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }
.credits__card { border:1px solid var(--c-border,var(--border)); border-radius:var(--radius-lg,16px); padding:24px; background:var(--c-bg,var(--surface)); box-shadow:none; }
.credits__card-head { font-size:0.86rem; font-weight:500; color:var(--c-text,var(--carbon)); margin-bottom:10px; }
.credits__price { font-size:1.9rem; font-weight:500; color:var(--c-primary,var(--carbon)); letter-spacing:-0.02em; }
.credits__price span { font-size:0.82rem; font-weight:500; color:var(--c-text-muted,#94A3B8); margin-left:4px; }
.credits__note { margin:10px 0 0; font-size:0.86rem; font-weight:500; color:var(--c-text-secondary,var(--muted)); line-height:1.5; }
.credits__meta { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }
.credits__meta-item { display:flex; flex-direction:column; gap:5px; padding:16px 18px; border-radius:var(--radius,12px); background:var(--c-bg-elevated,var(--selection)); }
.credits__meta-item strong { font-size:0.82rem; font-weight:500; color:var(--c-text,var(--carbon)); }
.credits__meta-item span { font-size:0.84rem; color:var(--c-text-secondary,var(--muted)); line-height:1.45; }
.credits__cta { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
@media (max-width:860px){ .credits__grid, .credits__meta { grid-template-columns:1fr; } .credits__card--wide { order:0; } }

/* ── Trust: stats bar + founder ── */
.trust { padding:56px 0; background:var(--c-bg-elevated,var(--selection)); }
.trust__stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:40px; }
.trust__stat { text-align:center; padding:22px 14px; border-radius:var(--radius-lg,16px); background:var(--c-bg,var(--surface)); border:1px solid var(--c-border,var(--border)); box-shadow:none; }
.trust__stat-value { display:block; font-size:2rem; font-weight:500; color:var(--c-primary,var(--carbon)); letter-spacing:-0.02em; }
.trust__stat-label { display:block; margin-top:4px; font-size:0.82rem; font-weight:500; color:var(--c-text-secondary,var(--muted)); }
.trust__founder { display:flex; gap:20px; align-items:flex-start; max-width:820px; margin:0 auto; padding:26px 28px; border-radius:var(--radius-lg,16px); background:var(--c-bg,var(--surface)); border:1px solid var(--c-border,var(--border)); box-shadow:none; }
.trust__founder-avatar { flex:none; width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; border-radius:50%; background:var(--c-primary-light,rgba(79,70,229,0.07)); }
.trust__founder-text { margin:0 0 8px; font-size:0.96rem; line-height:1.6; color:var(--c-text,var(--carbon)); }
.trust__founder-sign { margin:0; font-size:0.86rem; font-weight:500; color:var(--c-text-secondary,var(--muted)); }
.trust__founder-sign a { color:var(--c-primary,var(--carbon)); font-weight:500; }
@media (max-width:860px){ .trust__stats { grid-template-columns:repeat(2,1fr); } .trust__founder { flex-direction:column; gap:14px; } }

/* ── 2026-07-11 PLG landing pass ─────────────────────────────
   Long H1 variant, demoted quick-start link, filter-modal signup
   gate, FAQ CTA row, sticky mobile signup bar. */

/* H1 is a full sentence now — tighter clamp so it doesn't wrap badly.
   Scoped via modifier so other-language homepages keep their size. */
.hero__title.hero__title--long {
  font-size: clamp(1.9rem, 4.3vw, 3.1rem);
  line-height: 1.12;
}

/* Quick start: demoted from pulsing button to a quiet inline link */
.hero__quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 10px 6px;
  font-size: 0.92rem;
  font-weight:500;
  color: var(--c-text-secondary, var(--muted));
  text-decoration: none;
}
.hero__quick-link:hover { color: var(--c-primary, var(--carbon)); text-decoration: underline; }

/* Signup gate inside the filter-modal footer (between count and Order) */
.signup-gate {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: var(--radius, 12px);
  background: var(--c-primary-light, rgba(79, 70, 229, 0.07));
}
.signup-gate[hidden] { display: none; }
.signup-gate__text {
  font-size: 0.88rem;
  font-weight:500;
  line-height: 1.45;
  color: var(--c-text, #0A0A0A);
}
.signup-gate__btn { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  .signup-gate { flex-direction: column; align-items: stretch; text-align: center; }
}

/* FAQ CTA row */
.faq__cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.faq__cta-hint { font-size: 0.9rem; font-weight:500; color: var(--c-text-secondary, var(--muted)); }

/* Sticky mobile signup bar (<768px, shown after hero scrolls out) */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900; /* below .modal-overlay (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:none;
}
.sticky-bar[hidden] { display: none; }
.sticky-bar__text { font-size: 0.92rem; font-weight:500; color: var(--c-text, #0A0A0A); white-space: nowrap; }
.sticky-bar__btn { flex: none; }
.sticky-bar__close {
  flex: none;
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 8px;
  color: var(--c-text-secondary, var(--muted));
  cursor: pointer;
}
@media (min-width: 768px) {
  .sticky-bar { display: none !important; }
}

/* When the sticky bar is visible on mobile, lift the cookie-consent FAB
   above it so neither covers the other. */
@media (max-width: 767px) {
  body:has(.sticky-bar:not([hidden])) .cc-float { bottom: 76px; }
}

/* Ready-made-list nudge under a section header (e.g. above the country grid,
   for visitors unsure which country/filters to pick). */
.section-header__note { margin-top: 10px; font-size: 0.95rem; font-weight:500; }
.section-header__note a { color: var(--c-primary, var(--carbon)); text-decoration: none; border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.section-header__note a:hover { color: var(--c-primary-dark, var(--carbon)); }

/* WebKit grid-blowout guard (2026-07-11): without an explicit min-width:0 a CSS
   grid item won't shrink below its content's min-content width in Safari/WebKit.
   The long EN hero H1 ("…8 European registries. One schema.") then expanded
   .hero__left and pushed the balance card out of its column — EN broke on Safari
   while ET (short H1) and Chromium were fine. This lets both columns hold 1fr. */
.hero__left, .hero__right { min-width: 0; }
.hero__title { overflow-wrap: break-word; word-break: normal; }

/* ── GPT-first hero (2026-07-18): lead, offer bullets, guest link, trust line, chat demo ── */
.hero__lead { font-size: 1.125rem; font-weight:500; color: var(--c-text); margin: 0 0 10px; max-width: 44ch; }
.hero__offer { list-style: none; margin: 4px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hero__offer li { display: flex; align-items: center; gap: 9px; font-size: 0.95rem; font-weight: 500; color: var(--c-text); }
.hero__offer svg { flex: none; }
.hero__guest { margin: 14px 0 0; }
.hero__guest a { font-size: 0.9rem; font-weight:500; color: var(--c-primary); text-decoration: none; }
.hero__guest a:hover { text-decoration: underline; }
.hero__trust { margin: 18px 0 0; font-size: 0.85rem; font-weight: 500; color: var(--c-text-secondary); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.hero__trust .sep { color: var(--c-text-muted); }
.hero__trust a { color: var(--c-primary); text-decoration: none; }
.hero__trust a:hover { text-decoration: underline; }

.gpt-chat { background: var(--c-bg,var(--surface)); border: 1px solid var(--c-border,var(--border)); border-radius: var(--radius-xl,24px); box-shadow:none; padding: 20px 20px 16px; max-width: 440px; margin-left: auto; }
.gpt-chat__head { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight:500; letter-spacing:normal; text-transform:none; color: var(--c-text-muted); margin-bottom: 14px; }
.gpt-chat__live { color: var(--c-success); display: inline-flex; align-items: center; gap: 6px; }
.gpt-chat__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); }
.gpt-chat__msgs { display: flex; flex-direction: column; gap: 10px; min-height: 288px; }
.gpt-chat__msg { max-width: 88%; font-size: 0.875rem; line-height: 1.5; padding: 9px 13px; border-radius: 12px; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; }
.gpt-chat__msg.is-on { opacity: 1; transform: none; }
.gpt-chat__msg--user { align-self: flex-end; background: var(--c-primary); color: var(--surface); border-bottom-right-radius: 4px; }
.gpt-chat__msg--gpt { align-self: flex-start; background: var(--c-surface); color: var(--c-text); border-bottom-left-radius: 4px; }
.gpt-chat__typing { align-self: flex-start; display: none; gap: 4px; padding: 12px 14px; background: var(--c-surface); border-radius: 12px; border-bottom-left-radius: 4px; }
.gpt-chat__typing.is-on { display: inline-flex; }
.gpt-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-muted); animation: gptBlink 1s infinite; }
.gpt-chat__typing i:nth-child(2) { animation-delay: .18s; }
.gpt-chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes gptBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.gpt-chat__file { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 8px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 12px; font-size: 0.8rem; font-weight:500; color: var(--c-text); font-variant-numeric: tabular-nums; }
.gpt-chat__file svg { flex: none; }
.gpt-chat__file small { display: block; font-weight: 500; color: var(--c-text-muted); }
.gpt-chat__file-title { display: block; }
.gpt-chat__note { text-align: center; font-size: 0.7rem; color: var(--c-text-muted); margin: 12px 0 0; }
@media (max-width: 900px) { .gpt-chat { margin: 0 auto; max-width: 480px; } }
@media (prefers-reduced-motion: reduce) { .gpt-chat__msg { transition: none; } .gpt-chat__typing i { animation: none; } }

/* ── hero--gpt: premium GPT-first homepage hero (2026-07-18 redesign) ──
   Background: "Nurgaplaan" — one angled low-sat indigo plane + fine grain +
   fade-to-white scrim (replaces the 40px square grid + stacked glows, which
   read as a templated SaaS hero). Proportions: columns aligned to the top,
   right column fixed to the chat width, reg-proof hugs the bottom of the left
   column (chat spans both rows) so there is no dead band. Scoped to
   .hero.hero--gpt (0,2,0) so pricing/country .hero pages are untouched. */
.hero.hero--gpt {
  padding: 56px 0 44px; border-bottom: none;
  background:
    linear-gradient(180deg, transparent 72%, var(--surface) 100%),
    #FCFCFD;
}
/* Variant C (Pavel, 2026-07-19): refined "Nurgaplaan" — one clipped indigo
   wedge with a soft aurora light band along its diagonal, faded to transparent
   by 72% so it no longer cuts a seam across the CTA buttons. Content sits above
   it (.hero__content z-index:1); grain (::after) paints on top. */
.hero.hero--gpt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
  background:
    radial-gradient(46% 70% at 80% 2%, rgba(167,139,250,0.20), transparent 58%),
    linear-gradient(122deg,
      rgba(79,70,229,0.12) 0%,
      rgba(99,102,241,0.08) 46%,
      rgba(129,140,248,0.15) 60%,
      rgba(99,102,241,0.04) 66%,
      transparent 72%);
}
.hero.hero--gpt::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* proportions: two top-aligned columns; reg-proof now lives INSIDE the right
   column (moved in the markup) so the chat card + proof card stay a tight
   stack regardless of the left column height — no dead band either side. */
.hero.hero--gpt .hero__content {
  max-width: 1080px;
  grid-template-columns: 1.05fr minmax(0, 448px);
  align-items: start;
  column-gap: 56px; row-gap: 0;
}
.hero.hero--gpt .hero__left { max-width: 34rem; padding-top: 4px; }
/* right column holds the chat demo only; the base .hero__right is flex+
   justify-end and carries a pink/violet blob (::before) that fought the new
   plane background — reset to a plain block, single light source. */
.hero.hero--gpt .hero__right { display: block; }
.hero.hero--gpt .hero__right::before { display: none; }
/* text-selection: soft indigo tint (was a saturated blue block); force the
   gradient-clipped H1 accent to a solid colour on select so it stays visible. */
::selection { background: rgba(79,70,229,0.16); color: var(--carbon); }
::-moz-selection { background: rgba(79,70,229,0.16); color: var(--carbon); }
.hero__title-accent::selection { background: rgba(79,70,229,0.16); color: var(--carbon); -webkit-text-fill-color: var(--carbon); }
.hero__title-accent::-moz-selection { background: rgba(79,70,229,0.16); color: var(--carbon); -webkit-text-fill-color: var(--carbon); }
/* left-column rhythm: copy group, then a hairline divider before the action cluster */
/* H1 + lead are one continuous big slogan: SAME size/weight/leading, tight gap (Pavel, 2026-07-18) */
.hero.hero--gpt .hero__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 4px; max-width: 30ch; }
.hero.hero--gpt .hero__lead {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem); font-weight:500; letter-spacing: -0.01em;
  line-height: 1.5; margin: 6px 0 16px; max-width: 46ch;
  color: var(--c-text, var(--carbon));
}
.hero.hero--gpt .hero__lead::selection { -webkit-text-fill-color: var(--carbon); color: var(--carbon); background: rgba(79,70,229,0.16); }
.hero.hero--gpt .hero__lead::-moz-selection { -webkit-text-fill-color: var(--carbon); color: var(--carbon); background: rgba(79,70,229,0.16); }
.hero.hero--gpt .hero__subtitle { font-size: 1rem; line-height: 1.62; color: #334155; margin: 0; max-width: 48ch; }
.hero.hero--gpt .hero__offer { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--c-border); gap: 8px; }
.hero.hero--gpt .hero__offer li { font-size: 0.9rem; }
.hero.hero--gpt .hero__eyebrow { display: inline-block; margin: 0 0 12px; color: var(--c-primary, var(--carbon)); font-size: 0.78rem; font-weight:500; letter-spacing:normal; text-transform:none; }
.hero.hero--gpt .hero__proof { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 0.82rem; color: var(--muted); }
.hero.hero--gpt .hero__proof svg { flex: none; color: var(--c-primary, var(--carbon)); }
.hero.hero--gpt .hero__actions { margin: 16px 0 0; padding: 0; }
.hero.hero--gpt .hero__guest { margin: 14px 0 0; }
.hero.hero--gpt .hero__trust { margin: 12px 0 0; font-size: 0.8rem; }
.hero.hero--gpt .gpt-chat { padding: 16px 16px 12px; max-width: none; width: 100%; margin: 0; }
.hero.hero--gpt .gpt-chat__msgs { min-height: 236px; gap: 8px; }
.hero.hero--gpt .gpt-chat__msg { font-size: 0.82rem; padding: 8px 12px; }
@media (max-width: 900px) {
  .hero.hero--gpt { padding: 40px 0 36px; }
  .hero.hero--gpt .hero__content { grid-template-columns: 1fr; max-width: none; }
  .hero.hero--gpt .hero__left { max-width: none; }
}

/* Standalone header pricing link for static locale pages (fi/no/se/pl) —
   NOT inside .header__nav, so it stays visible on mobile where the nav
   collapses behind a burger these pages don't have. */
.header__link--solo { margin-left: auto; font-weight:500; }

/* ── API / MCP docs page (/api.html, 2026-07-18) ── */
/* Variant C aurora on the API-docs hero too (background-layered, no clip-path,
   since .apidoc-hero has no pseudo scaffolding) — same indigo direction. */
.apidoc-hero { padding: 60px 0 40px; background: linear-gradient(180deg, transparent 72%, var(--surface) 100%), radial-gradient(46% 70% at 80% 2%, rgba(167,139,250,0.20), transparent 58%), linear-gradient(122deg, rgba(79,70,229,0.12) 0%, rgba(99,102,241,0.08) 46%, rgba(129,140,248,0.15) 60%, transparent 70%), #FCFCFD; }
.apidoc-eyebrow { display:inline-block; font-size:.76rem; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--c-primary); background:rgba(79,70,229,.08); border:1px solid rgba(79,70,229,.18); padding:5px 12px; border-radius:999px; margin-bottom:18px; }
.apidoc-h1 { font-size:clamp(2rem,4vw,2.9rem); font-weight:500; letter-spacing:-.025em; line-height:1.08; margin:0 0 14px; max-width:18ch; }
.apidoc-sub { font-size:1.05rem; color:#334155; max-width:60ch; margin:0 0 24px; line-height:1.6; }
.apidoc-cta { display:flex; gap:14px; flex-wrap:wrap; }
.apidoc-sec { padding:44px 0; }
.apidoc-sec--tint { background:var(--selection); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.apidoc-h2 { font-size:1.5rem; font-weight:500; letter-spacing:-.02em; margin:0 0 26px; }
.apidoc-steps { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; margin:0; }
.apidoc-steps li { display:flex; gap:14px; align-items:flex-start; }
.apidoc-step-n { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:500; font-size:.95rem; color:var(--surface); background:var(--c-primary); }
.apidoc-steps b { display:block; margin-bottom:5px; font-size:1rem; color:var(--c-text); }
.apidoc-steps p { margin:0; color:var(--c-text-secondary); font-size:.9rem; line-height:1.55; }
.apidoc-connect { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.apidoc-card { background:var(--surface); border:1px solid var(--c-border); border-radius:16px; padding:22px; box-shadow:none; }
.apidoc-card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.apidoc-card__head b { font-size:1.05rem; color:var(--c-text); }
.apidoc-tag { font-size:.66rem; font-weight:500; letter-spacing:normal; color:var(--c-primary); background:rgba(79,70,229,.08); border-radius:6px; padding:3px 8px; }
.apidoc-card > p { margin:0 0 14px; color:var(--c-text-secondary); font-size:.92rem; line-height:1.55; }
.apidoc-code { background:var(--carbon); border-radius:10px; padding:14px 16px; overflow-x:auto; margin:0 0 12px; }
.apidoc-code code { display:block; color:var(--border); font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; font-size:.8rem; line-height:1.6; white-space:pre; background:none; }
.apidoc-hint { font-size:.82rem; color:var(--c-text-muted); margin:0; }
.apidoc-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.apidoc-tool { background:var(--surface); border:1px solid var(--c-border); border-radius:12px; padding:14px 16px; }
.apidoc-tool code { display:block; font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; font-size:.85rem; color:var(--c-primary); margin-bottom:6px; background:none; }
.apidoc-tool span { font-size:.85rem; color:var(--c-text-secondary); line-height:1.5; }
.apidoc-final { text-align:center; max-width:720px; margin:0 auto; }
.apidoc-billing { font-size:1rem; color:#334155; line-height:1.6; margin:0 0 22px; }
.apidoc-final .apidoc-cta { justify-content:center; }
@media (max-width:760px){ .apidoc-steps,.apidoc-connect,.apidoc-tools{ grid-template-columns:1fr; } .apidoc-h1{max-width:none;} }

/* animated gradient "file" link in hero subtitle → guest (no-account) path (Pavel 2026-07-18) */
.hero__filelink{
  background:linear-gradient(90deg,#2563EB 0%,#7C3AED 25%,#C084FC 50%,#7C3AED 75%,#2563EB 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:500;text-decoration:none;white-space:nowrap;
  animation:hero-fileshimmer 3s linear infinite;
}
@keyframes hero-fileshimmer{from{background-position:0% center;}to{background-position:-200% center;}}
.hero__filelink:hover{text-decoration:underline;text-decoration-color:#7C3AED;text-underline-offset:3px;}
.hero__filelink::selection{-webkit-text-fill-color:var(--carbon);color:var(--carbon);background:rgba(79,70,229,.16);}
.hero__filelink::-moz-selection{-webkit-text-fill-color:var(--carbon);color:var(--carbon);background:rgba(79,70,229,.16);}
@media(prefers-reduced-motion:reduce){.hero__filelink{animation:none;}}
/* ═══════════════════════════════════════════════════════════════════════════
   PROTO THEME — 2026-07-25
   Ports the "Innovadata Website" prototype (proto.zip) design language onto the
   existing markup: Archivo/IBM Plex Mono, navy var(--carbon) + indigo var(--carbon),
   hairline cards, left-aligned editorial sections, mono eyebrows, pill buttons.
   Appended last on purpose — every rule here overrides the block above it.
   Rollback = delete everything from this banner to the end of the file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fonts (self-hosted; latin + latin-ext for et/lv/lt/pl glyphs) ── */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/live/css/fonts/archivo-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;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/live/css/fonts/archivo-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:var(--font-body);font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/live/css/fonts/plexmono-400-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;}
@font-face{font-family:var(--font-body);font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/live/css/fonts/plexmono-400-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:var(--font-body);font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/live/css/fonts/plexmono-500-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;}
@font-face{font-family:var(--font-body);font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/live/css/fonts/plexmono-500-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:var(--font-body);font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/live/css/fonts/plexmono-700-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;}
@font-face{font-family:var(--font-body);font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/live/css/fonts/plexmono-700-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;}

/* ── 2. Tokens ─────────────────────────────────────────────────────────── */
:root{
  --font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --c-bg:var(--surface);
  --c-bg-elevated:#F4F5FC;
  --c-surface:#F4F5FC;
  --c-surface-hover:#EEF0FB;
  --c-surface-active:#C9CCE2;

  --c-text:var(--carbon);
  --c-text-secondary:#3F4358;
  --c-text-muted:#8A8FA8;

  --c-primary:var(--carbon);
  --c-primary-hover:#3F33C0;
  --c-primary-light:rgba(83,70,224,.07);
  --c-accent:var(--carbon);
  --c-accent-hover:#3F33C0;
  --c-accent-light:rgba(83,70,224,.07);

  --c-success:#0F9663;
  --c-success-light:rgba(15,150,99,.10);

  --c-border:var(--border);
  --c-border-hover:#C9CCE2;
  --c-border-active:rgba(83,70,224,.35);

  --shadow-sm:0 1px 3px rgba(23,26,52,.05);
  --shadow:0 1px 2px rgba(23,26,52,.05),0 12px 28px -18px rgba(23,26,52,.18);
  --shadow-lg:0 18px 44px -20px rgba(23,26,52,.26);
  --shadow-xl:0 1px 2px rgba(23,26,52,.05),0 32px 64px -16px rgba(83,70,224,.28);
  --shadow-glow:0 10px 24px -10px rgba(83,70,224,.55);

  --max-width:1240px;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:10px;
  --radius-xl:14px;
  --radius-pill:999px;

  /* proto-specific */
  --pt-ink:var(--carbon);
  --pt-lilac:#ECEBFB;
  --pt-lilac-2:#EEF0FB;
  --pt-line:#C9CCE2;
  --pt-mint:#3DDC97;
  --pt-mint-bg:#DFF5EA;
  --pt-grad:linear-gradient(92deg,#2563EB,#7C3AED 85%);
  --pt-cta-shadow:0 10px 24px -10px rgba(83,70,224,.55);
}

/* ── 3. Base ───────────────────────────────────────────────────────────── */
body{font-family:var(--font);color:var(--c-text);line-height:1.6;-webkit-font-smoothing:antialiased;}
::selection{background:var(--pt-lilac);color:var(--pt-ink);}
::-moz-selection{background:var(--pt-lilac);color:var(--pt-ink);}
::-webkit-scrollbar-track{background:var(--c-surface);}
::-webkit-scrollbar-thumb{background:var(--c-primary);}
h1,h2,h3,h4,h5,h6{font-family:var(--font);letter-spacing:-0.02em;text-wrap:pretty;}
h1,h2{font-weight:500;}
code,pre,kbd,samp{font-family:var(--font-mono);}
.container{padding:0 32px;}

/* ── 4. Mono eyebrows (all the section kickers become one type of object) ─ */
.section-header__eyebrow,
.offer__eyebrow,
.api-dev__eyebrow,
.signals__eyebrow,
.lists__eyebrow,
.credits__eyebrow,
.apidoc-eyebrow,
.howto-inside__eyebrow,
.howto-xl__eyebrow,
.qs__step-label{
  display:inline-block;
  background:none;
  border:none;
  padding:0;
  border-radius:0;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  color:var(--c-primary);
  margin-bottom:14px;
}

/* ── 5. Section headers — left-aligned editorial, solid ink, no gradient ── */
.section-header{text-align:left;max-width:820px;margin:0 0 44px;}
.section-header__title{
  font-family:var(--font);
  font-size:clamp(1.95rem,3.4vw,2.75rem);
  font-weight:500;
  line-height:1.07;
  letter-spacing:-0.025em;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--pt-ink);
  margin-bottom:16px;
}
.section-header__subtitle{
  font-size:1.09rem;
  line-height:1.55;
  color:var(--c-text-secondary);
  max-width:660px;
  margin:0 0 6px;
}
.section-header__note{color:var(--c-text-muted);}
/* blocks that read better centred keep their centre */
.cta-card .section-header,.apidoc-final,.faq__cta{text-align:center;}
.apidoc-final{margin:0 auto;}

/* ── 6. Section rhythm ─────────────────────────────────────────────────── */
.offer,.api-dev,.signals,.lists,.credits,.features,.countries,.trust,.faq,.faq-section,.uc-offer{
  padding-top:84px;padding-bottom:84px;
}
.section{padding:84px 0;}

/* ── 7. Header ─────────────────────────────────────────────────────────── */
.header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-border);
  box-shadow:none;
}
.header__inner{min-height:72px;}
.header__link{
  font-weight:500;
  font-size:.95rem;
  color:var(--pt-ink);
  letter-spacing:0;
  text-transform:none;
}
.header__link:hover,.header__link--active{color:var(--c-primary);}
.header__link--active::after{display:none;}

/* ── 8. Buttons — pill, sentence case, one indigo, one outline ─────────── */
.btn{font-family:var(--font);font-weight:500;letter-spacing:0;overflow:visible;}
.btn--sm{padding:9px 20px;font-size:.875rem;min-height:40px;}
.btn--lg,.btn--large{padding:15px 30px;font-size:1.02rem;min-height:52px;}

.btn--order,
a.btn--order,a.btn--order:link,a.btn--order:visited,a.btn--order:focus,a.btn--order:active,
.btn--order:link,.btn--order:visited,.btn--order:focus{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:var(--surface);
  font-weight:500;
  font-size:1rem;
  text-transform:none;
  letter-spacing:0;
  box-shadow:none;
}
.btn--order:hover{background:var(--c-primary-hover);box-shadow:none;transform:none;}
.btn--order:active{background:var(--c-primary-hover);transform:scale(.985);}
.btn--order.btn--sm{font-size:.875rem;font-weight:500;padding:9px 20px;}
.btn--order.btn--sm:hover{transform:none;}
.btn--order:disabled{opacity:.35;box-shadow:none;}

.btn--primary{background:var(--c-primary);border-color:var(--c-primary);box-shadow:none;}
.btn--primary:hover{background:var(--c-primary-hover);box-shadow:none;transform:none;}

.btn--ghost,a.btn--ghost:link,a.btn--ghost:visited{
  background:transparent;border:1.5px solid var(--pt-ink);color:var(--pt-ink);
}
.btn--ghost:hover{background:var(--pt-ink);border-color:var(--pt-ink);color:var(--surface);transform:none;}
.btn--outline{border:1.5px solid var(--c-border-hover);color:var(--c-text-secondary);}
.btn--outline:hover{background:var(--c-surface);border-color:var(--pt-ink);color:var(--pt-ink);transform:none;}
.btn--preview{background:var(--surface);color:var(--c-primary);border:1.5px solid var(--c-primary);box-shadow:none;}
.btn--preview:hover{background:var(--pt-lilac);color:var(--c-primary-hover);border-color:var(--c-primary-hover);transform:none;box-shadow:none;}
.btn--success{background:var(--c-success);border-color:var(--c-success);}
.btn--success:hover{background:#0C7A52;transform:none;}
.btn:focus-visible{box-shadow:none;}

/* ── 9. Hero — flat white→lilac ground, mono eyebrow, Archivo 900 ─────── */
.hero,.hero.hero--gpt{
  background:linear-gradient(180deg,var(--surface) 0%,#F2F3FB 100%);
  border-bottom:1px solid var(--c-border);
}
.hero::before,.hero.hero--gpt::before{
  clip-path:none;
  background:
    radial-gradient(880px 520px at 78% 8%,rgba(83,70,224,.09),transparent 65%),
    radial-gradient(640px 400px at 94% 82%,rgba(124,58,237,.06),transparent 62%);
}
.hero::after,.hero.hero--gpt::after{opacity:.035;}
.hero.hero--gpt{padding:76px 0 56px;}
.hero.hero--gpt .hero__content{max-width:1176px;grid-template-columns:1.05fr minmax(0,470px);column-gap:52px;}
.hero.hero--gpt .hero__left{max-width:38rem;}
/* hero CTAs: prototype pills, sentence case (base sheet uppercases the ghost) */
.hero__actions .btn--lg{padding:15px 28px;font-size:1rem;min-height:52px;letter-spacing:0;}
.hero__actions .btn--lg svg{width:17px;height:17px;}
.hero .btn--ghost{font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none;border-color:var(--pt-ink);color:var(--pt-ink);}
.hero .btn--ghost:hover{background:var(--pt-ink);border-color:var(--pt-ink);color:var(--surface);}
.hero .btn--order,.hero .btn--order:hover{background:var(--c-primary);box-shadow:none;}
.hero .btn--order:hover{background:var(--c-primary-hover);}

.hero__title{
  font-family:var(--font);
  font-size:clamp(2.3rem,4.1vw,3.45rem);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-0.03em;
  margin:0 0 20px;
  max-width:24ch;
  color:var(--pt-ink);
}
.hero__title.hero__title--long{font-size:clamp(2.1rem,3.7vw,3.1rem);line-height:1.06;}
/* homepage hero: sized so the accent line stays whole inside the text column */
.hero.hero--gpt .hero__title{
  font-family:var(--font);font-weight:500;line-height:1.05;letter-spacing:-0.03em;
  font-size:clamp(2rem,3.15vw,2.9rem);max-width:none;margin:0 0 18px;color:var(--pt-ink);
}
.hero__title-accent{
  background:var(--pt-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero.hero--gpt .hero__lead{
  font-size:1.19rem;font-weight:400;letter-spacing:0;line-height:1.55;
  color:var(--c-text-secondary);margin:0 0 14px;max-width:44ch;
}
.hero.hero--gpt .hero__subtitle{font-size:1rem;line-height:1.6;color:var(--c-text-secondary);max-width:50ch;}
.hero.hero--gpt .hero__offer{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--c-border);}
.hero.hero--gpt .hero__offer li{font-size:.9rem;font-weight:500;color:var(--c-text-secondary);}
.hero.hero--gpt .hero__proof{
  font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:normal;
  text-transform:none;color:var(--c-text-muted);margin-top:18px;
}
.hero.hero--gpt .hero__proof svg{color:var(--c-success);}
.hero.hero--gpt .hero__actions{margin-top:22px;}
.hero__badge{
  font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:normal;
  text-transform:none;color:var(--c-text-secondary);
  background:none;border:none;padding:0;margin-bottom:18px;
}
.hero__filelink{animation:none;background:none;-webkit-text-fill-color:var(--c-primary);color:var(--c-primary);border-bottom:1.5px solid rgba(83,70,224,.35);}
.hero__filelink:hover{-webkit-text-fill-color:var(--c-primary-hover);color:var(--c-primary-hover);border-bottom-color:var(--c-primary-hover);text-decoration:none;}

/* ── 10. GPT chat card — prototype "agent panel" ───────────────────────── */
.gpt-chat{
  border:1px solid var(--c-border);
  border-radius:var(--radius-xl);
  box-shadow:none;
  position:relative;overflow:hidden;
}
.gpt-chat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2563EB,#7C3AED,#C084FC);
}
.hero.hero--gpt .gpt-chat{padding:20px 20px 14px;}
.hero.hero--gpt .gpt-chat__msgs{min-height:262px;}
.gpt-chat__head{
  font-family:var(--font-body);font-size:.7rem;font-weight:500;letter-spacing:normal;
  color:var(--c-text-secondary);border-bottom:1px solid var(--c-border);
  padding-bottom:12px;margin-bottom:14px;
}
.gpt-chat__live{color:var(--c-success);}
.gpt-chat__live i{background:var(--c-success);animation:idPulse 2.4s infinite;}
@keyframes idPulse{0%,100%{opacity:1}50%{opacity:.3}}
.gpt-chat__msg{border-radius:10px;}
.gpt-chat__msg--user{background:var(--pt-lilac);color:var(--pt-ink);border-radius:6px 10px 3px 10px;}
.gpt-chat__msg--gpt{background:var(--c-surface);border-radius:6px 10px 10px 3px;}
.gpt-chat__note{font-size:.78rem;color:var(--c-text-muted);}
.gpt-chat__file{border-radius:var(--radius-sm);border:1px solid var(--c-border);background:var(--surface);}
.gpt-chat__file-title{font-weight:500;}

/* ── 11. Offer fork — hairline cards, dark "free account" card ─────────── */
.offer{background:var(--surface);border-bottom:none;}
.offer__grid{max-width:none;gap:24px;}
.offer__card{padding:34px 32px 30px;border-radius:var(--radius);box-shadow:none;}
.offer__card--free{
  background:var(--pt-ink);border:1px solid var(--pt-ink);color:var(--surface);box-shadow:none;
  overflow:hidden;
}
.offer__card--free::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2563EB,#7C3AED,#C084FC);
}
.offer__card--free .offer__card-title{color:var(--surface);}
.offer__card--free .offer__card-text{color:var(--pt-lilac);}
.offer__card--free .offer__list li{color:var(--pt-lilac);}
.offer__card--free .offer__list li::before{background:rgba(255,255,255,.14);color:var(--pt-mint);}
.offer__card--free .offer__note{color:rgba(255,255,255,.55);}
.offer__badge{
  position:static;display:inline-block;align-self:flex-start;margin:0 0 14px;
  font-family:var(--font-body);font-size:.72rem;letter-spacing:normal;font-weight:500;
  background:var(--c-primary);color:var(--surface);
}
.offer__card-title{font-size:1.4rem;font-weight:500;letter-spacing:-0.015em;line-height:1.18;margin-bottom:10px;}
.offer__card-text{font-size:1rem;}
.offer__list li{font-size:.95rem;}
.offer__list li::before{background:var(--pt-lilac);color:var(--c-primary);}
.offer__cta{justify-content:center;}

/* ── 12. API/MCP for developers — the navy section of the prototype ────── */
.api-dev{
  background:var(--pt-ink);
  border-top:none;border-bottom:none;
  color:var(--surface);
  position:relative;
}
.api-dev .section-header__title{color:var(--surface);-webkit-text-fill-color:var(--surface);}
.api-dev .section-header__subtitle{color:var(--pt-line);}
.api-dev__eyebrow{color:var(--pt-mint);}
.api-dev__list li{color:var(--pt-lilac);}
.api-dev__list li::before{background:var(--pt-mint);}
.api-dev__dot{display:none;}
.api-dev__code-head{margin-bottom:12px;}
.api-dev__code-label{margin-left:0;}
.api-dev__docs{color:var(--surface);border-bottom:1px solid rgba(255,255,255,.35);}
.api-dev__docs:hover{color:var(--pt-mint);border-bottom-color:var(--pt-mint);}
.api-dev__code{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
}
.api-dev__code-label{font-family:var(--font-mono);letter-spacing:normal;color:#8A8FA8;}
.api-dev__pre code{font-family:var(--font-mono);color:var(--pt-mint);}
.api-dev__pre--muted code{color:var(--pt-lilac);}

/* ── 13. Signals / monitoring ──────────────────────────────────────────── */
.signals{background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.signals__grid{max-width:none;}
.signals__card{border:1.5px solid var(--pt-ink);border-radius:var(--radius);box-shadow:none;padding:0;overflow:hidden;}
.signals__card-head{
  font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:normal;
  text-transform:none;color:var(--c-text-secondary);
  padding:13px 20px;margin:0;border-bottom:1px solid var(--c-border);
}
.signals__feed{padding:0;}
.signals__feed li{padding:14px 20px;border-bottom:1px solid var(--c-border);font-size:.92rem;color:var(--pt-ink);font-weight:500;}
.signals__new{
  font-family:var(--font-body);background:var(--pt-mint-bg);color:var(--c-success);
  font-size:.62rem;letter-spacing:normal;border-radius:4px;
}
.signals__card-foot{padding:13px 20px;background:var(--c-surface);font-size:.84rem;color:var(--c-text-secondary);border-top:none;}
.signals__hint{color:var(--c-text-muted);font-weight:500;}

/* ── 14. Excel lists table + credits ──────────────────────────────────── */
.lists{background:var(--surface);}
.lists__table-wrap{border-radius:var(--radius);box-shadow:none;}
.lists__table th{
  font-family:var(--font-body);font-size:.7rem;letter-spacing:normal;
  color:var(--c-text-secondary);background:var(--c-surface);
}
.lists__actions{justify-content:flex-start;}
.lists__sample{color:var(--c-text-secondary);font-weight:500;}
.credits{background:var(--c-surface);border-top:1px solid var(--c-border);}
.credits__card{border-radius:var(--radius);box-shadow:none;}
.credits__card-head{font-family:var(--font-body);font-size:.72rem;letter-spacing:normal;text-transform:none;color:var(--c-text-secondary);}
.credits__price{font-family:var(--font);font-weight:500;letter-spacing:-0.03em;color:var(--pt-ink);}
.credits__price span{font-family:var(--font-body);color:var(--c-text-muted);}
.credits__meta-item{border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--c-border);}
.credits__cta{justify-content:flex-start;}

/* ── 15. Countries grid ────────────────────────────────────────────────── */
.countries{background:var(--c-surface);}
.country-card{border-radius:var(--radius);box-shadow:none;border:1px solid var(--c-border);}
.country-card:hover{box-shadow:none;border-color:var(--pt-line);transform:translateY(-2px);}
.country-card__glow{display:none;}
.country-card__name{font-weight:500;letter-spacing:-0.015em;color:var(--pt-ink);}
.country-card__price{font-family:var(--font-body);font-weight:500;}
.country-card__count{font-family:var(--font-body);}
.country-card__cta-text{font-weight:500;}

/* ── 16. Features ─────────────────────────────────────────────────────── */
.features{background:var(--surface);}
.feature-card{border-radius:var(--radius);box-shadow:none;}
.feature-card:hover{transform:translateY(-2px);box-shadow:none;}
.feature-card__title{font-weight:500;letter-spacing:-0.015em;color:var(--pt-ink);}
.feature-card__text{color:var(--c-text-secondary);}

/* ── 17. Trust ────────────────────────────────────────────────────────── */
.trust{background:var(--surface);}
.trust__stat{border-radius:var(--radius);box-shadow:none;background:var(--c-surface);border:1px solid var(--c-border);text-align:left;}
.trust__stat-value{font-family:var(--font);font-weight:500;letter-spacing:-0.03em;color:var(--pt-ink);}
.trust__stat-label{font-family:var(--font-body);font-size:.7rem;letter-spacing:normal;text-transform:none;color:var(--c-text-muted);font-weight:500;}
.trust__founder{border-radius:var(--radius);box-shadow:none;margin:0;max-width:none;}
.trust__founder-avatar{border-radius:var(--radius-sm);background:var(--pt-lilac);}

/* ── 18. FAQ — prototype's hairline list ──────────────────────────────── */
.faq{background:var(--surface);}
.faq__list{max-width:820px;margin:0;gap:0;}
.faq__item{
  border:none;border-top:1px solid var(--c-border);border-radius:0;
  background:none;box-shadow:none;padding:4px 2px;
}
.faq__list .faq__item:last-child{border-bottom:1px solid var(--c-border);}
.faq__item[open]{border-color:var(--c-border);box-shadow:none;}
.faq__q{font-size:1.13rem;font-weight:500;color:var(--pt-ink);padding:18px 2px;}
.faq__a{font-size:1rem;line-height:1.6;color:var(--c-text-secondary);padding:0 2px 18px;}
.faq__question{font-weight:500;color:var(--pt-ink);}
.faq__answer-text{color:var(--c-text-secondary);}
.faq__cta{text-align:left;justify-content:flex-start;}
.faq__cta-hint{color:var(--c-text-muted);}

/* ── 19. Closing CTA — navy block with indigo glow ────────────────────── */
.cta-section{padding:0 0 0;}
.cta-section .container{padding:0;max-width:none;}
.cta-card{
  border:none;border-radius:0;text-align:left;
  background:var(--pt-ink);
  padding:80px max(32px,calc((100vw - var(--max-width))/2 + 32px));
  color:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(960px 500px at 82% 30%,rgba(83,70,224,.32),transparent 68%);
}
.cta-card__title{
  font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:500;line-height:1.05;
  letter-spacing:-0.03em;color:var(--surface);margin:0 0 12px;max-width:22ch;
}
.cta-card__text{font-size:1.1rem;color:var(--pt-line);margin:0;max-width:38ch;margin-left:0;margin-right:0;}
.cta-card__actions{justify-content:flex-start;flex:none;}
.cta-card .btn--order{text-transform:none;letter-spacing:0;font-weight:500;}
.cta-card .btn--ghost,.cta-card .btn--ghost:link,.cta-card .btn--ghost:visited{
  background:transparent;border:1.5px solid rgba(255,255,255,.4);color:var(--surface);
}
.cta-card .btn--ghost:hover,.cta-card .btn--ghost:focus-visible{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:var(--surface);transform:none;box-shadow:none;
}

/* ── 20. Footer — navy ────────────────────────────────────────────────── */
.footer{background:var(--pt-ink);color:var(--surface);border-top:none;padding:64px 0 28px;}
.footer__brand img{filter:drop-shadow(0 0 1px rgba(255,255,255,.35));}
.footer__copy{color:var(--c-text-muted);}
.footer__col-title{font-family:var(--font-body);letter-spacing:normal;color:var(--c-text-muted);font-size:.72rem;}
.footer__col a{color:var(--pt-lilac);}
.footer__col a:hover{color:var(--pt-mint);}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);color:var(--c-text-muted);}
.footer__bottom a{color:var(--pt-lilac);}
.footer__bottom a:hover{color:var(--pt-mint);}

/* ── 21. Pricing / API-docs / how-to / support / terms pages ──────────── */
.apidoc-hero,.terms-hero,.support-hero,.howto-hero{
  background:linear-gradient(180deg,var(--surface) 0%,#F2F3FB 100%);
  border-bottom:1px solid var(--c-border);
}
.apidoc-h1,.terms-hero__title,.support-hero__title,.howto-hero__title,.qs__title,.error-page__title{
  font-family:var(--font);font-weight:500;letter-spacing:-0.03em;line-height:1.05;color:var(--pt-ink);
}
.terms-hero__title-accent,.howto-hero__title-accent,.qs__title-accent{
  background:var(--pt-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.apidoc-h2,.howto-step__title,.howto-help__title,.terms-trust__title{font-family:var(--font);font-weight:500;letter-spacing:-0.02em;color:var(--pt-ink);}
.apidoc-sec--tint{background:var(--c-surface);}
.apidoc-card,.apidoc-tool,.howto-help__card,.support-form-card,.support-aside-card,.qs__card,.terms-toc{
  border-radius:var(--radius);box-shadow:none;border:1px solid var(--c-border);
}
.apidoc-code{background:var(--pt-ink);border-radius:var(--radius);}
.apidoc-code code,.howto-preview__code{font-family:var(--font-mono);color:var(--pt-lilac);}
.apidoc-tool code{font-family:var(--font-mono);}
.apidoc-tag{font-family:var(--font-body);letter-spacing:normal;background:var(--pt-lilac);color:var(--c-primary);border-radius:4px;}
.step__number,.apidoc-step-n,.howto-step__icon{background:var(--pt-ink);border-radius:var(--radius-sm);color:var(--surface);font-family:var(--font-body);font-weight:500;}
.step__title{font-weight:500;letter-spacing:-0.015em;color:var(--pt-ink);}
.qs__chip{font-family:var(--font-body);font-weight:500;}

/* ── 22. Modal / estimate — tokens only, geometry untouched (money path) ─ */
.modal{border-radius:var(--radius-xl);}
.modal__title{font-family:var(--font);font-weight:500;letter-spacing:-0.02em;color:var(--pt-ink);}
.estimate__count{font-family:var(--font);font-weight:500;letter-spacing:-0.03em;}
.estimate__count-label,.estimate__price-details{font-family:var(--font-body);}
.btn__price-pill{font-family:var(--font-body);font-weight:500;}
.form-label{font-weight:500;color:var(--pt-ink);}
.form-input{border-radius:var(--radius-sm);border-color:var(--c-border-hover);}
.form-input:focus{border-color:var(--c-primary);box-shadow:none;}
.sticky-bar{background:var(--pt-ink);}
.sticky-bar__text{color:var(--pt-lilac);}

/* ── 23. Blog ─────────────────────────────────────────────────────────── */
.blog-card,.blog-post{border-radius:var(--radius);}
.blog-card__title,.blog-post__title{font-family:var(--font);font-weight:500;letter-spacing:-0.025em;color:var(--pt-ink);}

/* ── 24. Responsive ───────────────────────────────────────────────────── */
@media (max-width:900px){
  /* this block sits after the base sheet's stack rules, so it has to restate
     the single-column hero itself — otherwise the desktop grid above wins. */
  .hero.hero--gpt .hero__content{grid-template-columns:1fr;max-width:none;}
  .hero.hero--gpt .hero__left{max-width:none;}
  .hero.hero--gpt .gpt-chat{max-width:none;margin:0;}
  .hero.hero--gpt .gpt-chat__msgs{min-height:0;}
  .hero.hero--gpt{padding:44px 0 36px;}
  .hero__title,.hero.hero--gpt .hero__title{font-size:clamp(1.95rem,7vw,2.5rem);max-width:none;}
  .cta-card{padding:56px 24px;}
  .cta-card__actions{width:100%;}
}
@media (max-width:640px){
  .container{padding:0 20px;}
  .offer,.api-dev,.signals,.lists,.credits,.features,.countries,.trust,.faq,.faq-section{padding-top:56px;padding-bottom:56px;}
  .section-header__title{font-size:1.7rem;}
  .offer__card{padding:26px 22px;}
}
.signals__feed li:last-child{border-bottom:none;}

/* ── 25. Pre-existing api.html overflow: a long curl line in .apidoc-code was
   pushing page scrollWidth to ~1500px (masked by body overflow-x:hidden).
   Contain it in the card and let the command wrap. ── */
.apidoc-connect > *,.apidoc-card,.apidoc-tools > *{min-width:0;}
.apidoc-code{overflow-x:auto;}
.apidoc-code code{white-space:pre-wrap;overflow-wrap:anywhere;}
/* ── 26. EN homepage hero, prototype build (.hero--proto, 2026-07-25) ──────
   Ported 1:1 from proto.zip "Innovadata Website.dc.html" (hero + registry strip
   + Claude/MCP demo card). Every rule is scoped under .hero--proto or .mcpd,
   which only index.html carries — the other 8 locales keep .hero--gpt. ── */

.hero.hero--proto{
  padding:0;border-bottom:1px solid var(--c-border);
  background:linear-gradient(180deg,var(--surface) 0%,#F2F3FB 100%);
}
.hero.hero--proto::before{
  clip-path:none;
  background:
    radial-gradient(880px 520px at 78% 8%,rgba(83,70,224,.09),transparent 65%),
    radial-gradient(640px 400px at 94% 82%,rgba(124,58,237,.06),transparent 62%);
}
.hero.hero--proto::after{opacity:.03;}
.hero.hero--proto .hero__content{
  display:block;                    /* was: flex row with .hero__right */
  padding:32px 32px 48px;
}
.hero.hero--proto .hero__title{
  max-width:30ch;font-size:clamp(2rem,3.85vw,3.4rem);margin:0 0 26px;
}
.hero.hero--proto .hero__lead{
  /* 82ch, not the 64ch a short lead would want: the lead now runs three
     sentences and a narrow measure pushed it to four lines, which shoved the
     second CTA below the fold on 740px-tall laptops. */
  max-width:82ch;font-size:clamp(1.02rem,1.15vw,1.12rem);margin:0 0 26px;
}
.hero.hero--proto .hero__offer{
  flex-direction:row;flex-wrap:wrap;gap:10px 26px;margin:0 0 44px;
}
.hero.hero--proto .hero__offer li{font-size:.92rem;color:var(--pt-ink);}
/* the fourth check is the sample-file download — same weight as the other
   three, underlined so it still reads as the one clickable item in the row */
.hero__offer-link,
a.hero__offer-link:link,
a.hero__offer-link:visited{
  color:var(--c-primary);font-weight:500;
  border-bottom:1.5px solid rgba(83,70,224,.32);
}
.hero__offer-link:hover{color:var(--c-primary-hover);border-bottom-color:var(--c-primary-hover);}

/* mono fact strip. Markup removed from both heroes on 2026-07-25 (owner: dead
   weight above the headline); the rules stay so it can be dropped back in. */
.ph-topline{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:0 0 20px;
  font-family:var(--font-mono);font-size:.8rem;font-weight:400;letter-spacing:normal;
  color:#63678A;
}
.ph-topline__lead{
  font-weight:500;color:var(--c-primary);
  background:var(--pt-lilac);border-radius:5px;padding:3px 9px;
}
.ph-topline__sep{color:var(--pt-line);}

/* ── the two-path fork ── */
.hero__fork{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;align-items:stretch;
}
.fork-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1.5px solid var(--pt-ink);border-radius:var(--radius);
  padding:30px 32px 28px;
}
.fork-card--free{background:var(--pt-lilac-2);border-color:var(--c-border);}
.fork-card__eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 20px;
  font-family:var(--font-body);font-size:.74rem;font-weight:500;letter-spacing:normal;
  text-transform:none;color:#63678A;
}
.fork-card__eyebrow::after{content:'';flex:1 1 auto;height:1px;background:var(--c-border);}
.fork-card__eyebrow--accent{color:var(--c-primary);}
.fork-card__title{
  font-family:var(--font);font-weight:500;letter-spacing:-0.025em;line-height:1.1;
  font-size:clamp(1.3rem,1.7vw,1.55rem);margin:0 0 11px;color:var(--pt-ink);
}
.fork-card__text{
  font-size:.95rem;line-height:1.55;color:var(--c-text-secondary);margin:0 0 20px;max-width:42ch;
}
.fork-card__list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;}
.fork-card__list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.9rem;line-height:1.4;color:var(--c-text);
}
.fork-card__list li svg{flex:none;margin-top:3px;}
/* the CTA follows its own card's copy rather than being pinned to the bottom —
   bottom-aligning the two buttons opened a dead band inside the shorter card */
.fork-card__cta{
  align-self:flex-start;gap:9px;padding:13px 26px;min-height:48px;font-size:.98rem;
}
.fork-card__cta--ink,
a.fork-card__cta--ink:link,
a.fork-card__cta--ink:visited,
a.fork-card__cta--ink:focus{
  background:var(--pt-ink);border:1.5px solid var(--pt-ink);color:var(--surface);
  font-weight:500;text-transform:none;letter-spacing:0;
}
.fork-card__cta--ink:hover{background:#0D0F22;border-color:#0D0F22;color:var(--surface);transform:none;}
.fork-card__cta--ink:active{transform:scale(.985);}
.fork-card__note{
  margin:14px 0 0;font-family:var(--font-body);font-size:.72rem;letter-spacing:normal;color:#63678A;
}

/* ── narrow: unwind the grid back to one flowing column ── */
@media (max-width:900px){
  .hero.hero--proto .hero__title{max-width:none;margin-bottom:14px;}
  .hero.hero--proto .hero__lead{max-width:none;}
  .hero__fork{grid-template-columns:1fr;gap:18px;}
  .fork-card{padding:24px 22px 22px;}
  .fork-card__text{max-width:none;}
  /* with one card per row the auto-margin has nothing to push against */
  .fork-card__cta{align-self:stretch;justify-content:center;}
}
@media (max-width:640px){
  .hero.hero--proto .hero__content{padding:34px 20px 42px;}
  .hero.hero--proto .hero__offer{gap:8px 18px;}
  .fork-card__title{font-size:1.3rem;}
}

/* ═════════════════════════════════════════════════════════════════════
   COUNTRY-CARD SAMPLE LINK — 2026-07-26
   Per-country "real sample" download inside each card of #countries.
   Appended after the PROTO THEME block; self-contained, safe to delete
   as one unit. Uses proto tokens only (mono eyebrow + indigo hover).
   ═════════════════════════════════════════════════════════════════════ */
.country-card__sample{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  margin-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:normal;
  color:var(--c-text-secondary);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  cursor:pointer;
  /* .country-card__cta sets pointer-events:none so the card owns the click;
     this link must take its own clicks back. */
  pointer-events:auto;
  position:relative;
  z-index:2;
  transition:color .2s ease,border-color .2s ease;
}
.country-card__sample:hover,
.country-card__sample:focus-visible{
  color:var(--c-primary);
  border-bottom-color:currentColor;
}
.country-card__sample:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;}
.country-card__sample-icon{flex-shrink:0;}
/* ═════════════════════════════════════════════════════════════════════
   FILTER MODAL — footer no longer eats the filter area  (2026-07-26)

   Before: .modal__footer stacked four full-width rows (contact strip,
   estimate, €30 promo, buttons) = 401 px at 1280x800, while .modal__body
   was `flex: 1` with no floor — so the filter area collapsed to 192 px of
   a 680 px modal (28 %) and the industry tree showed two lines.
   On 390x844 the promo card alone rendered 377 px tall.

   Strategy: floor the body, cap the footer, and compact the footer so the
   cap is rarely reached — estimate and buttons share one row again, the
   contact/legal strip becomes a single line, the promo stays one row.
   Scoped to #filterModal so the other modals are untouched.
   ═════════════════════════════════════════════════════════════════════ */

/* 1 ── the body takes everything the (now compact) footer does not need */
#filterModal .modal { max-height: 92vh; }
#filterModal .modal__body { flex: 1 1 auto; min-height: 0; }

/* 2 ── the footer keeps its natural height — never shrinks below the Order
        button — but is capped as a backstop against any future tall block.
        With the compaction below it lands ~180-280 px, well under the cap,
        so the cap never actually engages today. */
#filterModal .modal__footer {
  flex: 0 0 auto;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  row-gap: 8px;
}

/* 3 ── contact CTA + legal line: one row instead of a stacked dashed card */
#filterModal .filter-contact-box {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  padding: 3px 10px;
  margin-bottom: 0;
  border-style: solid;
  border-color: var(--c-border);
  background: transparent;
}
#filterModal .filter-legal-info {
  width: auto;
  border-top: 0;
  padding-top: 0;
  text-align: center;
}

/* 4 ── the €30 promo used to sit between the estimate and the buttons and,
        being flex:1 1 100%, forced each onto its own row. Send it below so
        estimate + buttons share one row as .modal__footer's
        justify-content:space-between always intended. */
#filterModal .signup-gate {
  order: 1;
  padding: 8px 14px;
  gap: 10px;
}
#filterModal .signup-gate__text { font-size: 0.8125rem; line-height: 1.35; }
#filterModal .modal__footer-actions { order: 0; }
#filterModal .estimate { order: 0; }

/* 5 ── mobile: the promo must stay a row, not a 377 px column */
@media (max-width: 640px) {
  /* THE mobile bug: the base rule is `flex: 1 1 100%`, which on desktop means
     "full width, own row" — but the mobile footer is flex-direction:column, so
     flex-basis:100% resolves against HEIGHT and the promo grew to 377 px, most
     of the modal. Pin it to its content height. */
  #filterModal .signup-gate {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 7px 10px;
    gap: 8px;
  }
  /* clamp the promo copy — full text on desktop, 3 lines on a phone, so the
     card stays ~70 px instead of the 377 px column it used to render as */
  #filterModal .signup-gate__text {
    font-size: 0.72rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
  }
  #filterModal .signup-gate__btn {
    padding: 8px 10px;
    font-size: 0.75rem;
    flex: 0 1 auto;
    min-width: 0;
  }
  #filterModal .modal__footer { max-height: 52vh; }
}

/* 6 ── short viewports (small phones, laptops in split-screen): buy back the
        last ~30 px from decoration, never from the Order button. */
@media (max-height: 700px) {
  #filterModal .estimate__freshness { display: none; }
  #filterModal .estimate__count { font-size: 1.25rem; }
  #filterModal .signup-gate__text { -webkit-line-clamp: 2; }
  #filterModal .filter-contact-box { padding: 2px 8px; }
}

/* Legal-form picker — checkboxes, not a multi-select.
   A <select multiple> needs Ctrl-click to pick more than one, which most people
   never discover, and it silently loses the selection on re-render. Norway has 23
   forms, so the grid scrolls rather than pushing the modal footer off-screen.
   Colours come from the proto tokens only. */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 12px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--pt-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.checkbox-grid__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
}
.checkbox-grid__item:hover { background: var(--pt-lilac); }
.checkbox-grid__item input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
/* One line per form, always. `overflow-wrap: anywhere` used to let a long name
   such as "KOVAS Kohaliku omavalitsuse asutus" wrap onto a second line, which
   made that row twice as tall as its neighbours and broke the grid rhythm.
   Anything that still does not fit is clipped; the full text is on the title. */
.checkbox-grid__label {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The code carries the recognition, the name carries the meaning — weight tells
   them apart, so no dash is needed between them. */
.checkbox-grid__code {
  font-weight:500;
  font-family: var(--font-mono, inherit);
  font-size: 0.95em;
}
/* ═════════════════════════════════════════════════════════════════════
   COUNTRY CARD — crawlable link to the country landing page  (2026-08-05)

   The card is a <div onclick="openFilters()"> and must stay one: that click
   is the entry to the money path, and the card already holds an <a> for the
   XLSX sample, so wrapping the whole card in an anchor would nest anchors and
   the parser would tear it apart. This is the card's one real <a href> —
   keyword-rich anchor text pointing at the country's landing page, so the
   homepage's main section stops emitting zero links to those pages.

   stopPropagation() on the anchor means clicking it navigates instead of
   opening the modal; clicking anywhere else on the card is unchanged.
   Appended after the PROTO THEME block; self-contained, safe to delete.
   ═════════════════════════════════════════════════════════════════════ */
.country-card__more{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-top:6px;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:-.005em;
  color:var(--c-text-secondary);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .15s ease,border-color .15s ease;
}
.country-card__more svg{flex-shrink:0;opacity:.55;transition:opacity .15s ease,transform .15s ease;}
.country-card__more:hover,
.country-card__more:focus-visible{
  color:var(--c-primary);
  border-bottom-color:currentColor;
}
.country-card__more:hover svg{opacity:1;transform:translateX(2px);}
.country-card__more:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;}
/* Footnote under the trust stats row (2026-08-05). The headline stat shows what
   is on sale; this states the total held and what the difference consists of, so
   the two numbers on the page stop contradicting each other. Small and quiet on
   purpose — it is a disclosure, not a selling point. */
.trust__note{
  max-width:70ch;
  margin:var(--space-md) auto 0;
  text-align:center;
  font-size:.8125rem;
  line-height:1.55;
  color:var(--c-text-secondary);
}
/* Landing pages generated by scripts/gen_landing_pages.py use an emoji rather
   than an inline SVG in the feature icon, because the copy is per-country and an
   emoji carries the flag/channel meaning without shipping 24 more icon paths.
   The base .feature-card__icon is sized for an SVG child, so give the emoji its
   own type scale and centring. (2026-08-05) */
.feature-card__icon--emoji{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.375rem;
  line-height:1;
}

/* ════════════════════════════════════════════════════════════════════════════
   LANDING ANTI-SLOP — 2026-08-14
   Scoped to body.page-landing — the ten country pages generated by
   scripts/gen_landing_pages.py. Hallmark-audit fixes: left-aligned section
   heads (no more centred-everything), icons inline with the card title (kills
   the icon-tile grid tell), one hover signal per element, stroke icons inside
   the step badges, and token-backed replacements for the inline hex styles the
   generator used to print. Appended after the PROTO THEME block;
   self-contained, safe to delete.
   ════════════════════════════════════════════════════════════════════════════ */

/* Section heads sit on the left edge; the CTA card stays the page's one
   deliberately centred moment. */
.page-landing .section-header{
  text-align:left;
  margin:0 0 var(--space-2xl);
  max-width:640px;
}
.page-landing .section-header__subtitle{margin:0;}

/* Icon beside the heading, spanning title + text rows. */
.page-landing .feature-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:14px;
  align-items:start;
}
.page-landing .feature-card__icon{grid-row:1 / span 2;margin-bottom:0;}
.page-landing .feature-card__title{grid-column:2;margin-bottom:6px;}
.page-landing .feature-card__text{grid-column:2;}

/* One hover signal per element: border shift on cards, colour/shadow on
   buttons — no lift, no gradient top-bar, no glow. */
.page-landing .feature-card:hover{transform:none;box-shadow:none;border-color:var(--c-border-hover);}
.page-landing .feature-card:hover::before{opacity:0;}
.page-landing .btn:hover{transform:none;}
.page-landing .step:hover .step__number{transform:none;box-shadow:none;}

/* The step badge holds a stroke icon now, not an emoji glyph. */
.page-landing .step__number svg{width:24px;height:24px;display:block;}

/* Replacements for the inline hex styles (see CLAUDE.md §8 — tokens only). */
.page-landing .hero__note{margin:14px 0 0;font-size:.85rem;color:var(--c-text-muted);}
.uc-more{padding:28px 0;border-top:1px solid var(--c-border);}
.uc-more .container{text-align:center;max-width:760px;}
.uc-more__text{margin:0;font-size:1rem;color:var(--c-text);line-height:1.6;}
.uc-more__text a{font-weight:500;color:var(--c-primary);}
.uc-signup{padding:36px 0;background:var(--c-primary-light);border-top:1px solid var(--c-border);}
.uc-signup .container{text-align:center;max-width:760px;}
.uc-signup__text{font-size:1.05rem;color:var(--c-text);font-weight:500;margin:0 0 16px;line-height:1.55;}

/* The stat strip reads its desktop column count from --stats-cols (the
   generator sets 3 or 4 by content) and still collapses on phones — the old
   inline grid-template-columns overrode the ≤860px rule. */
.page-landing .trust__stats{grid-template-columns:repeat(var(--stats-cols,4),1fr);}
@media (max-width:860px){.page-landing .trust__stats{grid-template-columns:repeat(2,1fr);}}

/* Stat strip: the proof band (2026-08-14, v2 after owner feedback).
   A full-width navy break right under the light hero — the one dark moment
   on the page. Big white figures, hairline separators, channel icons in the
   labels, and the live pulse on the register-sync cell. Contrast per
   slop-test gates 40-41: dark surface swaps every text colour in the same
   scope. */
.page-landing .trust{background:var(--pt-ink,var(--carbon));padding:38px 0;}
.page-landing .trust__stats{gap:0;margin-bottom:0;}
.page-landing .trust__stat{background:transparent;border:0;border-radius:0;box-shadow:none;padding:4px 28px;border-left:1px solid rgba(227,229,242,0.16);}
.page-landing .trust__stat:first-child{border-left:0;padding-left:0;}
.page-landing .trust__stat-value{color:var(--surface);font-size:clamp(1.9rem,2.6vw,2.6rem);}
.page-landing .trust__stat-label{margin-top:8px;display:flex;align-items:center;gap:7px;color:rgba(227,229,242,0.62);}
.page-landing .trust__stat-label svg{color:rgba(227,229,242,0.45);flex-shrink:0;}
.page-landing .trust__stat-dot{width:7px;height:7px;border-radius:50%;background:var(--c-success);animation:pulse 2s ease infinite;flex-shrink:0;}
@media (prefers-reduced-motion: reduce){.page-landing .trust__stat-dot{animation:none;}}
@media (max-width:640px){
  .page-landing .trust{padding:26px 0;}
  .page-landing .trust__stats{row-gap:22px;}
  .page-landing .trust__stat{padding:0 20px;}
  .page-landing .trust__stat:nth-child(odd){border-left:0;padding-left:0;}
  .page-landing .trust__stat-value{font-size:1.65rem;}
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE FUNNEL ORDER — 2026-09-07
   docs/funnel-dropoff-report-2026-09-06.md §10.1.

   Measured on the live site at 393 px (iPhone 15 viewport), 2026-09-07: the
   first country card sits 5 494 px down on /, 5 529 px on /et/ and 5 913 px on
   /lt/ — six and a half phone screens below the hero, behind #offer, #api,
   #monitoring and #lists. Half of mobile visitors never scroll at all and 94 %
   of /et/ never reach the second screen, so in practice the only thing that
   sells is unreachable. (The report's premise that / placed the card at
   1 559 px and /et/ at 3 017 px came from Clarity's DOM-snapshot coordinate
   space, not from CSS pixels; all locales are in fact identical.)

   Below 768 px #countries is hoisted to sit directly under the hero. Nothing
   is hidden and nothing moves on desktop: <main> becomes a flex column and two
   sections take a negative order, so every other section keeps DOM order (0)
   and the markup — which eight generators in scripts/ write into — is
   untouched. Rollback = delete this block.

   fi/, no/ and pl/ are not covered: those three lite pages hang their sections
   off <body> with no <main> wrapper, and flexing <body> would reflow the fixed
   header, the cookie bar and the sticky signup bar. They carry ~0 of the
   mobile traffic in the report; revisit when they get a <main>.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  main#main { display: flex; flex-direction: column; }
  main#main > #hero      { order: -2; }
  main#main > #countries { order: -1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FILTER MODAL ON A PHONE — 2026-09-07
   docs/funnel-dropoff-report-2026-09-06.md §10.3. Three components, all of
   them phone-only behaviour on a form that was drawn for a desktop:

     .tree-skeleton  — the industry/location tree while it loads. Was a bare
                       spinner and the word "loading" at the very top of the
                       form; S6-C opened the Lithuania filter twice, two
                       seconds each, saw only that, and closed it.
     .filter-adv     — legal form, tax debt and annual financials folded into
                       one <details>. S6-D scrolled 2 011 px of form, typed
                       nothing, closed it.
     .sample-preview — the sample rendered over the modal body instead of
                       handed to the browser as a blob download that iOS
                       Safari opens in a new tab. R8 left that way after
                       reaching a count and €1 206.62.

   Rollback = delete this block; the JS degrades to plain markup.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tree loading skeleton ── */
.tree-skeleton { padding: var(--space-md) var(--space-sm); }
.tree-skeleton__row {
  height: 11px;
  margin: 0 0 12px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--c-surface, #F1F3FA) 0%,
    var(--c-border, var(--border)) 50%,
    var(--c-surface, #F1F3FA) 100%);
  background-size: 200% 100%;
  animation: tree-skeleton-shimmer 1.4s ease-in-out infinite;
}
.tree-skeleton__row:last-child { margin-bottom: 0; }
@keyframes tree-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tree-skeleton__row { animation: none; }
}

/* ── Advanced group fold ── */
.filter-adv {
  border: 1px solid var(--c-border, var(--border));
  border-radius: var(--radius, 10px);
  margin-bottom: var(--space-lg, 20px);
  background: var(--c-bg, var(--surface));
}
.filter-adv__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-family:var(--font-body);
  font-size: 0.72rem;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-adv__summary::-webkit-details-marker { display: none; }
.filter-adv__summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
  margin-right: 3px;
}
.filter-adv[open] > .filter-adv__summary::after { transform: rotate(-135deg); }
.filter-adv[open] > .filter-adv__summary { border-bottom: 1px solid var(--c-border, var(--border)); }
.filter-adv > .form-group { padding: 0 14px; }
.filter-adv > .form-group:first-of-type { padding-top: 14px; }
.filter-adv > .form-group:last-child { padding-bottom: 4px; }

/* ── In-modal sample preview ── */
/* .modal has no position of its own (style.css:1488), so the panel needs a
   containing block before inset:0 means the modal rather than the viewport.
   Scoped to the class the JS adds, so the modal is otherwise untouched. */
#filterModal .modal.modal--sample-open { position: relative; }
.sample-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: var(--c-bg, var(--surface));
  border-radius: inherit;
}
.sample-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border, var(--border));
  flex-shrink: 0;
}
.sample-preview__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight:500;
  color: var(--c-text);
  cursor: pointer;
}
.sample-preview__dl {
  border: 1px solid var(--c-border, var(--border));
  background: var(--c-surface, #F1F3FA);
  border-radius: var(--radius-pill, 999px);
  padding: 7px 14px;
  font-family:var(--font-body);
  font-size: 0.72rem;
  font-weight:500;
  color: var(--c-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.sample-preview__note {
  padding: 10px 12px 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--c-text-secondary);
  flex-shrink: 0;
}
.sample-preview__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.sample-preview__table {
  border-collapse: collapse;
  font-size: 0.72rem;
  white-space: nowrap;
}
.sample-preview__table th,
.sample-preview__table td {
  border: 1px solid var(--c-border, var(--border));
  padding: 6px 9px;
  text-align: left;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sample-preview__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-surface, #F1F3FA);
  font-family:var(--font-body);
  font-size: 0.65rem;
  font-weight:500;
  letter-spacing:normal;
  color: var(--c-text-secondary);
}
.sample-preview__table td { color: var(--c-text); }

/* ── Official-source links in the registers table — 2026-09-07 ──────────────
   §10.4 of the funnel report. Two of the six dead taps recorded in ninety days
   were on register names in this table (R10 tapped "Uzņēmumu reģistrs" on
   /lt/); the cells read as tappable and did nothing. They now go to the
   register itself, in a new tab. Underline on hover only, so the table does
   not turn into a wall of blue. */
.lists__table-src {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border-hover, #C7CBE4);
  transition: color 120ms, border-color 120ms;
}
.lists__table-src:hover,
.lists__table-src:focus-visible {
  color: var(--c-primary, var(--carbon));
  border-bottom-color: currentColor;
}

/* Filter form: a number we could not read (LT filter audit 2026-09-28, FLT-01) */
.form-input.is-invalid { border-color: var(--c-error); box-shadow:none; }

/* ── Checkout inline errors (2026-10-05) ─────────────────────────────────
   checkout.js shows a field problem under the field and consent / count /
   request messages next to the Pay button, instead of pop-up dialogs. */
.checkout-field-error{margin:6px 0 0;font-size:.875rem;line-height:1.4;color:#B42318}
.checkout-msg{margin:0 0 12px;padding:10px 12px;font-size:.9rem;line-height:1.45;color:#7A1A12;
  background:rgba(180,35,24,.06);border:1px solid rgba(180,35,24,.35);border-radius:var(--radius-sm,6px)}
.form-input[aria-invalid="true"],input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#B42318}

}