/* ── Theme tokens ───────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f9f9fb;
  --surface-3: #f3f3f7;
  --border: #eaeaef;
  --text: #111111;
  --text-muted: #555555;
  --text-faint: #888888;
  --accent: #f7803c;
  --nav-bg: rgba(255, 255, 255, .7);
  --shadow-sm: 0 4px 24px rgba(0, 0, 0, .05);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, .08);
  /* Sticky topnav height — used by .hero / .hero-wall to slide under it.
     Overridden per breakpoint at the bottom of this file. */
  --topnav-h: 76px;
  /* Horizontal hero color band — overridden per theme */
  --hero-color-left:   #ffadb2;
  --hero-color-mid1:   #ffc8cc;
  --hero-color-mid:    #ecdde2;
  --hero-color-mid2:   #c8eaff;
  --hero-color-right:  #a6dfff;
  /* Vertical fade endpoint — usually equals --bg */
  --hero-fade-color:   #ffffff;
  --hero-fade-mid-1:   rgba(255, 255, 255, .55);
  --hero-fade-mid-2:   rgba(255, 255, 255, .95);

  --gradient-wall: var(--wall-fade), var(--wall-color), var(--bg);
  --wall-color:
    linear-gradient(90deg,
                    var(--hero-color-left)  0%,
                    var(--hero-color-mid1)  28%,
                    var(--hero-color-mid)   50%,
                    var(--hero-color-mid2)  72%,
                    var(--hero-color-right) 100%)
    top / 100% 780px no-repeat;
  --wall-fade:
    linear-gradient(180deg, transparent 0%,
                    var(--hero-fade-mid-1) 55%,
                    var(--hero-fade-mid-2) 80%,
                    var(--hero-fade-color) 100%)
    top / 100% 780px no-repeat;
  --gradient-tab: linear-gradient(135deg, #fff2e8 0%, #f0f7ff 100%);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0d1015;
  --surface: #15181f;
  --surface-2: #1b1f27;
  --surface-3: #232831;
  --border: #2a2f3a;
  --text: #f0f2f6;
  --text-muted: #a3a8b3;
  --text-faint: #7b8090;
  --nav-bg: rgba(15, 18, 24, .75);
  --shadow-sm: 0 4px 24px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, .45);
  /* Dark-family hero gradient: deep rose left → muted plum → deep navy right */
  --hero-color-left:   #5e2734;
  --hero-color-mid1:   #4a263d;
  --hero-color-mid:    #2a2440;
  --hero-color-mid2:   #1d3858;
  --hero-color-right:  #143350;
  --hero-fade-color:   #0d1015;
  --hero-fade-mid-1:   rgba(13, 16, 21, .55);
  --hero-fade-mid-2:   rgba(13, 16, 21, .95);
  --gradient-tab: linear-gradient(135deg, #221917 0%, #131a23 100%);
  color-scheme: dark;
}

/* ── Reset / typography ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Inter, one variable cut for every weight — latin and latin-ext subsets of
   the SAME release (v20), split by unicode-range.

   It used to be three static latin-only files (400/500/600). Two seams came
   out of that: Turkish glyphs (ğ ş İ ı) fell back to the system face, and —
   after the first fix served them from a variable cut — a bold heading mixed
   a TRUE 700 ş with faux-bold latin neighbours synthesised from the 600
   file. One variable family for everything means every glyph, every weight,
   is drawn from the same design. */
@font-face {
  font-family: 'Inter';
  src: url("/static/Inter-Variable.latin.260c81a4759b.woff2") format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: 'Inter';
  src: url("/static/Inter-Variable.latin-ext.1ad231aac0a8.woff2") format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}

/* Vazirmatn — the de-facto standard webfont of the Persian web, with full
   Arabic-script coverage and a Latin cut designed to sit beside it. One
   variable file carries every weight. Loaded only when the page's language
   actually uses the script (the selector below), so LTR visitors never
   download it. */
@font-face {
  font-family: 'Vazirmatn';
  src: url("/static/Vazirmatn-Variable.f6d31671339d.woff2") format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* Any Arabic-script locale (fa now; ar/ur later would match too): the UI
   face becomes Vazirmatn, Inter stays as the Latin fallback so untranslated
   strings keep their look. dir covers future locales without a lang list. */
html[lang="fa"] body,
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: 'Vazirmatn', 'Inter', system-ui, -apple-system, 'Segoe UI',
               Roboto, sans-serif;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hero {
  position: relative; padding: 120px 24px 64px;
  text-align: center; overflow: hidden;
  /* The header is fixed (overlay), so the gradient already reaches the very
     top; the top padding keeps content clear of the bar. */
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
                    transparent 0%,
                    transparent 55%,
                    var(--hero-fade-mid-1) 78%,
                    var(--hero-fade-mid-2) 94%,
                    var(--hero-fade-color) 100%),
    linear-gradient(90deg,
                    var(--hero-color-left)  0%,
                    var(--hero-color-mid1)  28%,
                    var(--hero-color-mid)   50%,
                    var(--hero-color-mid2)  72%,
                    var(--hero-color-right) 100%);
}
.hero .eyebrow { color: #f7803c; text-transform: uppercase; letter-spacing: .08em;
  font-size: .8rem; font-weight: 600; margin-bottom: 12px; overflow-wrap: break-word; }
/* Display type needs its own leading: the body's 1.5 is paragraph spacing,
   and at 3.5rem it reads as a gap between lines rather than as one heading.
   1.15 matches what .why-join h2 already uses for the same size. */
.hero h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.15; max-width: 760px; margin: 0 auto 24px; }
.hero p.lead { font-size: 1.125rem; color: var(--text-muted); max-width: 560px; margin: 0 auto 24px; }
.section { padding-block: 64px; }
.section h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; text-align: center; margin-bottom: 12px; }
.section h2 + p.lead,
.section .lead { text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 32px; }
.section-eyebrow { text-align: center; color: #f7803c; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: 8px; }

/* ── Navbar ─────────────────────────────────────────────────────────── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, backdrop-filter .25s ease,
              border-color .25s ease;
}
.topnav.is-scrolled {
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(0, 0, 0, .06);
}
[data-theme="dark"] .topnav.is-scrolled {
  background: rgba(15, 18, 24, .65);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.brand { font-weight: 700; font-size: 1.25rem; min-width: 0;
  display: inline-flex; align-items: center; gap: 10px; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo { height: 36px; width: auto; display: block; }

/* Theme-aware images (light/dark variants) ──────────────────────────── */
.img-dark { display: none; }
[data-theme="dark"] .img-light { display: none; }
[data-theme="dark"] .img-dark { display: block; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { color: #333; font-size: .95rem; }
.nav-links a:hover { color: #000; }
/* Above the drawer (z 49): both are children of .topnav, so the drawer and
   this row stack against EACH OTHER — the bar's own z 50 protects neither.
   Without this, the open drawer sat on the hamburger and it couldn't close. */
.nav-cta { display: flex; gap: 12px; align-items: center;
  position: relative; z-index: 51; }
.nav-mobile-cta { display: none; }
.nav-toggle {
  display: none;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 1px;
  background: var(--text); transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  /* Centred so a long translated label that wraps inside the pill reads as
     a two-line button, not a broken one. Invisible on one-liners. */
  justify-content: center; text-align: center;
  padding: 10px 20px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 0;
  transition: opacity .15s ease, transform .15s ease;
  text-decoration: none;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn-primary { background: #f7803c; color: #fff; }
.btn-secondary { background: #fff; color: #111; border: 1px solid #ddd; }
.btn-ghost { background: transparent; color: #111; }

/* ── Stats banner ───────────────────────────────────────────────────── */
.stats-banner {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 24px; margin: 24px auto; max-width: 1100px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
}
.stat { text-align: center; padding: 16px; }
.stat .num { font-size: 1.75rem; font-weight: 700; color: #1a1a1a; }
.stat .label { color: #555; font-size: .9rem; margin-top: 4px; }
.stat .sublabel { color: #999; font-size: .75rem; margin-top: 4px; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
  overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
  display: block;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.card img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 20px 24px 24px; }
.card-body h3 { font-size: 1.125rem; margin-bottom: 8px; }
.card-meta { color: #888; font-size: .85rem; margin-bottom: 8px; }

/* ── Feature grid (Why join) ────────────────────────────────────────── */
.feature {
  background: #f9f9fb; border-radius: 16px; padding: 32px 24px;
  border: 1px solid #efeff3;
}
.feature .icon { font-size: 2rem; margin-bottom: 16px; }
.feature .icon img { width: 48px; height: 48px; }
.feature h3 { font-size: 1.125rem; margin-bottom: 8px; }
.feature p { color: #555; font-size: .95rem; }

/* ── Why join — big illustrated cards (matches template) ─────────── */
.why-join h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 40px;
}
.why-card {
  background: #fafafa; border: 1px solid #eee; border-radius: 18px;
  padding: 32px; min-height: 380px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.why-card:hover {
  transform: translateY(-4px); background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.why-art {
  flex: 1; display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.why-art img { width: 100%; max-width: 380px; height: 240px; object-fit: contain; }
/* The emoji fallback an admin gets when no icon is uploaded — unstyled it
   rendered at body size, a speck lost in the art zone. */
.why-emoji { display: block; font-size: clamp(48px, 10vw, 72px); line-height: 1; }
.why-card h3 {
  font-size: 1.25rem; font-weight: 700; color: #111;
  line-height: 1.35; margin: 0; overflow-wrap: break-word;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.tabs-wrap { max-width: 1200px; margin: 0 auto; }
.tabs-bar {
  display: flex; gap: 6px; padding: 8px;
  background: #f3f3f7; border-radius: 999px; margin-bottom: 32px;
  overflow-x: auto;
}
.tabs-bar button {
  flex: 1; padding: 14px 22px; border: 0; background: transparent;
  border-radius: 999px; cursor: pointer; font-weight: 500; color: #555;
  white-space: nowrap; font-family: inherit; font-size: 1rem;
}
.tabs-bar button.is-active { background: #fff; color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,.07); font-weight: 600; }
.tabs-panel { display: none;
  border-radius: 28px; padding: 56px; gap: 48px;
  grid-template-columns: 1fr 1fr; align-items: center;
  min-height: 420px;
}
.tabs-panel.is-active { display: grid; }
.tabs-panel > div { min-width: 0; }
.tabs-panel h3 { font-size: 1.75rem; margin-bottom: 20px; }
.tabs-panel p { color: #444; margin-bottom: 12px; font-size: 1rem; }
.tabs-panel p strong { display: block; color: #111; margin-bottom: 4px; }
.tabs-panel .mockup {
  background: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  min-height: 320px;
}
.tabs-panel .mockup img { width: 100%; border-radius: 8px; }

/* A real screenshot needs no card behind it — the app is its own frame. */
.tabs-panel .mockup.mockup--shot {
  background: none; padding: 0; box-shadow: none; min-height: 0;
}
.tabs-panel .mockup.mockup--shot img {
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
}
[data-theme="dark"] .tabs-panel .mockup.mockup--shot {
  background: none; box-shadow: none;
}

/* Default placeholder mockup: prompt checklist */
.mockup-checklist .mc-head {
  font-weight: 600; color: #111; margin-bottom: 16px; font-size: 1rem;
}
.mockup-checklist .mc-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid #eef0f3; border-radius: 12px;
  margin-bottom: 10px; background: #fff;
}
.mockup-checklist .mc-item .check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: #e6f4ea; color: #2e7d4f; display: flex;
  align-items: center; justify-content: center; font-size: .85rem;
  font-weight: 700;
}
.mockup-checklist .mc-item.is-pending .check { background: #f1f1f5; color: #888; }
.mockup-checklist .mc-item .mc-text { font-size: .9rem; color: #333; line-height: 1.4; }

/* ── Hero-wall combo (shared big gradient backdrop) ─────────────────── */
.hero-wall {
  position: relative; overflow: hidden;
  /* Header is fixed (overlay); the top padding keeps content clear of it. */
  padding: calc(var(--topnav-h, 78px) + 80px) 0 64px;
  background:
    radial-gradient(1400px 800px at 10% -20%, #fbd2d3 0%, transparent 65%),
    radial-gradient(1400px 800px at 90% -20%, #c9efff 0%, transparent 65%),
    linear-gradient(180deg, #fbfbfb 70%, #fff 100%);
}
/* Pages whose first block is a plain article (legal, etc.) have no hero to
   sit behind the fixed header, so clear it explicitly. */
main > .article:first-child { padding-top: calc(var(--topnav-h, 78px) + 48px); }
.hero-wall .hero {
  padding: 0 24px 48px; background: none;
  margin-top: 0; /* override the global hero rule — wall already slid up */
}
.hero-wall .hero::before { content: none; }

/* ── Hero with the mascot illustration ─────────────────────────────────
   Two columns on desktop — copy left, art right — collapsing to a centred
   stack for the whole tablet band (see the 1023px block). The centred
   max-width+margin:auto the base hero puts on h1 and .lead is undone inside
   the copy column, or the text would centre itself inside its own half. */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 40px;
  max-width: 1320px; margin-inline: auto; text-align: start;
}
.hero-split .hero-copy h1,
.hero-split .hero-copy p.lead { margin-inline: 0; }
.hero-art { display: grid; justify-items: center; gap: 18px; }
/* 715px is the artwork's native width once its transparent margin is trimmed.
   Capping there is deliberate: past it the line art is being upscaled, and
   upscaled line art goes soft exactly where it should be crispest. */
.hero-art img {
  display: block; width: 100%; height: auto; max-width: 715px;
}
/* The illustration is black line art on transparency; on the dark ground it
   would simply vanish. Inverting pure black-on-clear yields pure white-on-
   clear — only safe because the drawing is monochrome. */
[data-theme="dark"] .hero-art img { filter: invert(1); }

.hero-wall .wall-head { text-align: center; margin: 32px 0 24px; padding: 0 24px; }
.hero-wall .wall-head h2 { font-size: clamp(1.5rem,2.5vw,2.25rem); font-weight: 700; }
.hero-wall .wall-lead { color: var(--text-muted, #9aa3b2); max-width: 620px;
  margin: 10px auto 0; font-size: .98rem; line-height: 1.55; }

/* ── Expert wall (homepage masonry — auto-scrolling marquee) ────────── */
.wall-marquee {
  overflow: hidden; position: relative;
  padding: 8px 0 24px;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.wall-track {
  display: flex; gap: 16px; width: max-content;
  animation: wall-marquee 60s linear infinite;
}
.wall-track:hover { animation-play-state: paused; }
/* Touch has no hover: press-and-hold is the phone's pause. */
.wall-track:active { animation-play-state: paused; }

@keyframes wall-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* RTL anchors the max-content track at the RIGHT edge, hanging leftward —
   sliding it a further -50% drains every card out of the window and the
   wall spends half its loop empty. Mirror the travel; the duplicate pass
   makes +50% exactly as seamless as -50% is in LTR. */
[dir="rtl"] .wall-track { animation-name: wall-marquee-rtl; }

@keyframes wall-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

.wall-col {
  flex: 0 0 220px; display: flex; flex-direction: column; gap: 16px;
}
.wall-col[data-shift="80"]  { margin-top: 80px; }
.wall-col[data-shift="140"] { margin-top: 140px; }

@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
  .wall-marquee { overflow-x: auto; scroll-snap-type: x proximity; }
  .wall-col { scroll-snap-align: start; }
  /* The duplicate pass exists only to make the -50% loop seamless; in the
     static fallback it is pure repetition, so it goes. */
  .wall-col[aria-hidden="true"] { display: none; }
}

.wall-stat,
.wall-expert {
  border-radius: 20px; position: relative; overflow: hidden;
  color: #fff; padding: 20px; display: flex; flex-direction: column;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
}
.wall-stat {
  min-height: 160px; justify-content: space-between;
  background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
  color: var(--text, #fff);
}
.wall-stat .num   { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.wall-stat .label { font-size: .9rem; opacity: .9; margin-top: auto; padding-top: 24px; }
.wall-stat .sublabel { opacity: .75; font-size: .8em; }

.wall-stat.theme-blue   { --c1:#cfe9ff; --c2:#8fc1e8; --text:#0e2c40; }
.wall-stat.theme-red    { --c1:#f7c0c2; --c2:#dc6a72; --text:#3b0c12; }
.wall-stat.theme-purple { --c1:#c8b2eb; --c2:#7a55c2; --text:#1c0a3a; }
.wall-stat.theme-green  { --c1:#a7d8b2; --c2:#3e8c70; --text:#0c2b1f; }
.wall-stat.theme-amber  { --c1:#fad9a1; --c2:#e2914a; --text:#3a2008; }
.wall-stat.theme-slate  { --c1:#dadfe8; --c2:#7d8794; --text:#0e1726; }

.wall-expert {
  min-height: 280px; background-size: cover; background-position: center;
  justify-content: flex-end;
}
.wall-expert.no-photo { background: linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--bg) 60%, #000)); }
.wall-expert::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.78) 100%);
}
.wall-expert .meta { position: relative; z-index: 2; }
.wall-expert .meta strong { display: block; font-size: 1.05rem; font-weight: 700; }
.wall-expert .meta span   { font-size: .85rem; opacity: .9; }

.wall-col-tall .wall-expert { min-height: 340px; }

/* ── Carousel (expert slider) ───────────────────────────────────────── */
.carousel {
  position: relative;
}
.carousel-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 8px 4px 24px;
  scrollbar-width: thin;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.carousel-track > * { flex: 0 0 240px; scroll-snap-align: start; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  font-size: 1.25rem; cursor: pointer; z-index: 2; color: #111;
}
.carousel-btn.prev { left: -20px; }
.carousel-btn.next { right: -20px; }
.carousel-btn:hover { background: #f7803c; color: #fff; }

/* ── Experts grid ───────────────────────────────────────────────────── */
.expert {
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px;
  background: #f0f0f0 center / cover no-repeat; overflow: hidden; color: #fff;
}
.expert::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%); }
.expert .meta { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 2; }
.expert .meta strong { display: block; font-size: 1rem; }
.expert .meta span { font-size: .8rem; opacity: .9; }

/* ── Trustpilot pill ────────────────────────────────────────────────── */
.trustpilot {
  display: inline-flex; flex-direction: column; align-items: center;
  background: #f3f8fb; padding: 16px 24px; border-radius: 16px; gap: 4px;
}
.trustpilot .rating { font-weight: 700; }
.trustpilot .stars { color: #2e8a5e; letter-spacing: 2px; }
.trustpilot .count { color: #777; font-size: .85rem; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq-section { margin-bottom: 32px; }
.faq-section h3 { font-size: 1.5rem; margin-bottom: 16px; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; overflow-wrap: break-word;
  padding: 18px 0; font-weight: 500; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '▾'; transition: transform .2s; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item .answer { padding: 0 0 18px; color: #555; overflow-wrap: break-word; }

/* ── Compare page ───────────────────────────────────────────────────── */
/* The comparison reads as a scroll journey: five chapters on a vertical
   line, story beside proof, sides alternating. Each chapter carries its
   own hue (--ch); the Twin CV highlight always stays brand orange. */

.journey { position: relative; padding-block: 8px; }

.jchapter { display: grid; gap: 20px; padding-block: 36px; }

.jchapter.theme-blue   { --ch: #4a90c4; }
.jchapter.theme-red    { --ch: #d95d66; }
.jchapter.theme-purple { --ch: #8a63c9; }
.jchapter.theme-green  { --ch: #3e8c70; }
.jchapter.theme-amber  { --ch: #d98b3d; }

.jmilestone { display: flex; align-items: center; }
.jnum {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: var(--ch, var(--accent));
  background: color-mix(in srgb, var(--ch, var(--accent)) 12%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--ch, var(--accent)) 45%, transparent);
  position: relative; z-index: 1;
}

@media (min-width: 1024px) {
  .jchapter {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    align-items: center; gap: 8px; padding-block: 48px;
  }
  .jchapter .jstory { grid-column: 1; grid-row: 1; }
  .jchapter .jtable { grid-column: 3; grid-row: 1; }
  /* Alternate sides so the eye travels down the line, not down a list. */
  .jchapter--flip .jstory { grid-column: 3; }
  .jchapter--flip .jtable { grid-column: 1; }
  .jmilestone {
    grid-column: 2; grid-row: 1; align-self: stretch;
    justify-content: center; position: relative;
  }
  /* The line the milestones sit on; segments meet between chapters. */
  .jmilestone::before {
    content: ''; position: absolute; top: -48px; bottom: -48px;
    inset-inline-start: 50%; transform: translateX(-50%); width: 2px;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ch) 35%, var(--border)),
      var(--border));
  }
}

.jname {
  font-size: 1.7rem; font-weight: 800; color: var(--ch, var(--text));
  margin-bottom: 12px; letter-spacing: -.3px;
}
.jtagline { color: var(--text-muted); font-weight: 500; font-size: 1.05rem; }

.jbadge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 10px; border-radius: 999px; margin-inline-end: 8px;
  vertical-align: 2px; white-space: nowrap;
}
.jbadge-good { background: #e6f4ea; color: #2e7d4f; }
.jbadge-pain { background: #fdecec; color: #b5484d; }
[data-theme="dark"] .jbadge-good { background: #16301f; color: #6fcf97; }
[data-theme="dark"] .jbadge-pain { background: #331b1d; color: #e58a90; }

.jgood, .jpain { color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; }

/* The Twin CV moment of each chapter — carried by type, not by a box:
   an accent heading over a slightly darker, slightly larger paragraph. */
.jhighlight { margin-top: 20px; }
.jhighlight-title {
  font-size: 1.2rem; font-weight: 800; color: var(--accent);
  margin-bottom: 6px;
}
.jhighlight p:last-child {
  line-height: 1.6; margin: 0;
  font-size: 1.02rem; font-weight: 500; color: var(--text);
}

/* Per-chapter proof: Twin CV vs this ONE product — two mark columns fit
   any phone, so the table never needs a horizontal scroll. */
.jcompare {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.jcompare th, .jcompare td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.jcompare tbody tr:last-child th,
.jcompare tbody tr:last-child td { border-bottom: 0; }
.jcompare thead th {
  background: var(--surface-2); font-weight: 700; text-align: center;
  white-space: nowrap;
}
.jcompare thead th.is-me { color: var(--accent); }
.jcompare tbody th {
  text-align: start; font-weight: 500; overflow-wrap: anywhere;
}
.jcompare td { text-align: center; width: 84px; }
.jcompare td.is-me { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.mark { font-style: normal; font-weight: 700; display: inline-block; min-width: 22px; }
.mark-y { color: #2e8a5e; }
.mark-p { color: #b07714; }
.mark-n { color: var(--text-faint, #aaa); }
[data-theme="dark"] .mark-y { color: #4fc088; }
[data-theme="dark"] .mark-p { color: #d9a13d; }

.jfinale { text-align: center; padding: 56px 0 16px; }
.jnum-end { --ch: var(--accent); margin-bottom: 18px; }
.jfinale h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 10px; }
.jfinale p { color: var(--text-muted); font-size: 1.05rem; }
/* The team line: the one differentiator no feature row can carry. */
.jfinale-team { max-width: 660px; margin: 14px auto 0; font-size: .98rem; }
.jfinale-team strong { color: var(--accent); }

.compare-note {
  margin: 20px 0 40px; text-align: center;
  color: var(--text-faint, #999); font-size: .85rem;
}
.compare-note a { text-decoration: underline; }

/* Scroll reveal — the INITIAL hidden state is applied by JS (reveal-init),
   so a no-JS or reduced-motion visit sees everything, immediately. */
.reveal-init {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.jtable.reveal-init { transition-delay: .12s; }
.reveal-init.in-view { opacity: 1; transform: none; }

/* ── Breadcrumbs (every inner page) ─────────────────────────────────── */
.breadcrumbs { font-size: .85rem; margin-bottom: 14px; }
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 4px;
}
.breadcrumbs li { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Direction-aware separator: an arrow must point the way the trail reads. */
.breadcrumbs li + li::before { content: '›'; color: var(--text-faint, #999); }
[dir="rtl"] .breadcrumbs li + li::before { content: '‹'; }
.breadcrumbs a { color: var(--text-muted, #777); }
.breadcrumbs a:hover { color: var(--text, #111); }
.breadcrumbs [aria-current="page"] span {
  color: var(--text, #111); font-weight: 600;
  /* The current page can be a full post title — one line, then ellipsis. */
  display: inline-block; max-width: min(60vw, 480px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Post hero (blog detail banner) ─────────────────────────────────── */
.post-hero {
  position: relative;
  padding: calc(var(--topnav-h, 78px) + 56px) 0 56px;
  background: #211d1a center / cover no-repeat;
  color: #fff;
}
.post-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 11, 14, .52), rgba(12, 11, 14, .78));
}
.post-hero-inner { position: relative; z-index: 1; }
.post-hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.2;
  max-width: 800px; overflow-wrap: anywhere;
}
.post-hero-meta { margin-top: 12px; font-size: .9rem; opacity: .85; }
/* On the banner every trail colour is the banner's, not the theme's. */
.post-hero .breadcrumbs { margin-bottom: 18px; }
.post-hero .breadcrumbs ol { justify-content: flex-start; }
.post-hero .breadcrumbs a { color: rgba(255, 255, 255, .75); }
.post-hero .breadcrumbs a:hover { color: #fff; }
.post-hero .breadcrumbs [aria-current="page"] span { color: #fff; }
.post-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .55); }

@media (max-width: 767px) {
  .post-hero { padding: calc(var(--topnav-h, 78px) + 28px) 0 32px; }
}

/* ── Article layout: reading column + sticky rail (blog detail) ─────── */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.article-aside { display: none; }

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    /* No align-items: start — the aside must STRETCH to the row height,
       or its sticky inner has no track to travel and never sticks. */
    gap: 48px;
  }
  .article-aside { display: block; }
}

.article-aside-inner {
  /* Sticky under the fixed bar; the rail follows the reader down. */
  position: sticky; top: calc(var(--topnav-h, 78px) + 24px);
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 48px;
}

.toc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px;
  /* A long map must scroll inside the rail, not under the fold. */
  max-height: calc(100vh - var(--topnav-h, 78px) - 220px);
  overflow-y: auto;
}
.toc-title { font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.toc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.toc-list a {
  display: block; padding: 6px 10px; border-radius: 8px;
  color: var(--text-muted); font-size: .9rem; line-height: 1.35;
  border-inline-start: 2px solid transparent;
  overflow-wrap: anywhere;
}
.toc-list a:hover { color: var(--text); background: var(--surface-2); }
.toc-l3 a { padding-inline-start: 22px; font-size: .85rem; }
.toc-list a.is-active {
  color: var(--accent); border-inline-start-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.aside-cta {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
}
.aside-cta-title { font-weight: 700; margin-bottom: 4px; }
.aside-cta-text { color: var(--text-muted); font-size: .9rem; margin-bottom: 14px; }
.aside-cta .btn { width: 100%; }

/* Phone/tablet: the map folds above the body instead of a rail. */
.toc-fold {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; margin: 4px 0 20px; background: var(--surface-2);
}
.toc-fold summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.toc-fold summary::-webkit-details-marker { display: none; }
.toc-fold summary::after { content: '▾'; transition: transform .2s; }
.toc-fold[open] summary::after { transform: rotate(180deg); }
.toc-fold .toc-list { margin-top: 10px; }
@media (min-width: 1024px) { .toc-fold { display: none; } }

/* Anchor jumps land clear of the fixed bar, and glide when motion is OK. */
.article .content h2, .article .content h3 {
  scroll-margin-top: calc(var(--topnav-h, 78px) + 20px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Article ────────────────────────────────────────────────────────── */
.article { max-width: 760px; margin: 0 auto; padding: 48px 24px; }
.article h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 16px; }
.article .meta { color: #888; margin-bottom: 24px; font-size: .9rem; }
.article .cover { border-radius: 16px; margin-bottom: 32px; }
.article .content { font-size: 1.05rem; overflow-wrap: break-word; }
.article .content p { margin-bottom: 16px; }
.article .content h2 { font-size: 1.5rem; margin: 32px 0 12px; }
.article .content h3 { font-size: 1.25rem; margin: 24px 0 8px; }
.article .content ul, .article .content ol { padding-inline-start: 1.25rem; margin-bottom: 16px; }
.article .content a { color: #2a5cff; text-decoration: underline; }
.article .lead { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 20px; }
/* Admin-authored |safe bodies can carry tables, code blocks and raw URLs;
   without these guards anything wider than a phone is amputated by the
   page-level overflow-x clip instead of scrolling. */
.article .content pre { max-width: 100%; overflow-x: auto; }
.article .content table {
  display: block; max-width: 100%; overflow-x: auto;
  border-collapse: collapse;
}
/* Double class: must out-rank the mobile block's own `.article` shorthand
   later in the file, which re-sets padding-top at equal specificity. */
.article.article--flush { padding-top: 0; }
.text-center { text-align: center; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: .85rem; font-weight: 500;
  color: #444; margin-bottom: 6px; }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row textarea,
.form-row select {
  width: 100%; padding: 12px 14px;
  border: 1px solid #d8d8df; border-radius: 8px; font-size: .95rem;
  font-family: inherit; background: #fff;
}
.form-row input:focus, .form-row textarea:focus {
  outline: 2px solid #f7803c; outline-offset: 1px;
}
.form-row .errors {
  color: #c63333; font-size: .85rem; margin-top: 6px;
}
/* A user-dragged textarea is the one way a visitor can overflow their own
   viewport; vertical covers every legitimate need. */
.form-row textarea { resize: vertical; }
.form-row .errors ul { list-style: none; margin: 0; padding: 0; }
.form-help { color: var(--text-faint); font-size: .8rem; margin-top: 4px; }

.newsletter-card {
  background: linear-gradient(135deg, #fef2eb 0%, #fde2d4 50%, #f6e3ec 100%);
  color: var(--text); padding: 40px 32px; border-radius: 20px;
  display: grid; gap: 24px; grid-template-columns: 1fr auto;
  align-items: center; border: 1px solid #f3d8c6;
}
.newsletter-card h3 { font-size: 1.5rem; color: var(--text); }
.newsletter-card p { color: var(--text-muted); margin-top: 8px; max-width: 380px; }
.newsletter-card form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-card .newsletter-row { display: flex; gap: 8px; }
.newsletter-card .newsletter-consent {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .8rem; color: var(--text-muted); cursor: pointer;
}
.newsletter-card .newsletter-consent input { margin-top: 2px; }
[data-theme="dark"] .newsletter-card .newsletter-consent { color: #b9bbc1; }
.newsletter-card input[type=email] {
  flex: 1; padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08); background: #fff; min-width: min(240px, 100%);
  color: #111;
}
.newsletter-card button {
  padding: 12px 24px; border-radius: 999px; background: var(--accent);
  color: #fff; border: 0; cursor: pointer; font-weight: 600;
}
[data-theme="dark"] .newsletter-card {
  background: linear-gradient(135deg, #1a1c20, #2a2e36);
  color: #fff; border-color: transparent;
}
[data-theme="dark"] .newsletter-card h3 { color: #fff; }
[data-theme="dark"] .newsletter-card p { color: #b9bbc1; }
[data-theme="dark"] .newsletter-card input[type=email] {
  border-color: transparent;
}

/* ── Messages flash ─────────────────────────────────────────────────── */
.messages {
  position: fixed; top: 16px; inset-inline-end: 16px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.message {
  padding: 12px 18px; border-radius: 8px; background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.1); font-size: .9rem;
  border-inline-start: 3px solid #2e8a5e;
}
.message.error { border-inline-start-color: #c63333; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background: #111; color: #ccc; padding: 64px 24px 32px;
  margin-top: 80px;
}
.site-footer .container { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
.site-footer h4 { color: #fff; font-size: .9rem; text-transform: uppercase; margin-bottom: 12px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
.site-footer .footer-tagline { color: #999; max-width: 340px; }
.footer-logo { height: 40px; width: auto; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a:hover { color: #fff; }
/* Legal-entity line under the copyright + the contact page details card. */
.footer-company a { color: inherit; text-decoration: underline; }
.contact-company { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border, #e5e5ea); }
.contact-company h2 { font-size: 1.2rem; margin-bottom: 16px; }
.contact-company-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.contact-company-list li { display: flex; gap: 12px; align-items: baseline; }
.contact-company-list strong { flex: 0 0 110px; font-weight: 600; }
.contact-company-list a { text-decoration: underline; color: inherit; }

/* The bottom bar is NOT the 4-column grid the link columns use: it is one
   quiet flex row — tagline on one side, the legal entity on the other —
   that wraps into stacked lines on narrow screens. */
.site-footer .small { font-size: .8rem; color: var(--text-muted); margin-top: 24px;
  padding-top: 24px; border-top: 1px solid #2a2a2a;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 8px 32px; }
.site-footer .footer-company { margin: 0; color: var(--text-muted); text-align: end; }

/* ── Language picker (dropdown) ─────────────────────────────────────── */
.lang-picker { position: relative; display: inline-flex; }
.lang-toggle {
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; font-family: inherit;
  transition: background .15s ease, transform .15s ease;
}
.lang-toggle:hover { background: var(--surface-3); transform: translateY(-1px); }
.lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-flag {
  width: 18px; height: 18px;
  object-fit: cover; border-radius: 999px; display: block;
}
.lang-code {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.lang-code-sm {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  font-size: .65rem;
}
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  min-width: 200px; padding: 6px;
  display: none;
  background: var(--surface, #fff); border: 1px solid var(--surface-3, #e2e2e2);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
.lang-picker.is-open .lang-menu { display: block; }
.lang-menu form { margin: 0; }
.lang-option {
  width: 100%; text-align: start;
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 0;
  padding: 8px 10px; border-radius: 8px;
  font-size: .9rem; cursor: pointer; font-family: inherit;
  color: var(--text, #333);
}
.lang-option:hover { background: var(--surface-2, #f3f3f7); }
.lang-option.is-current {
  background: var(--surface-2, #f3f3f7); font-weight: 600; color: var(--text, #111);
}
.lang-option-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Testimonials (mixed video + text carousel) ─────────────────────── */
.testimonials-section { padding-bottom: 32px; }
.testimonials-carousel .carousel-track { padding: 24px 4px 32px; gap: 24px; }
/* No scrollbar under the cards at any width — the arrows are the pager on
   desktop (mobile already hides it in the 767 block); the bar under this
   strip read as a stray divider. */
.testimonials-carousel .carousel-track { scrollbar-width: none; }
.testimonials-carousel .carousel-track::-webkit-scrollbar { display: none; }
.testimonials-carousel .carousel-track > .t-card { flex: 0 0 320px; }

.t-card {
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .18s ease;
}
.t-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0, 0, 0, .1); }

/* Video poster cards */
.t-card--video {
  position: relative; aspect-ratio: 9 / 14; overflow: hidden;
  background: #15171c center / cover no-repeat;
  display: block; color: #fff; text-decoration: none;
}
.t-card--video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7) 100%);
}
.t-card--video .t-play {
  position: absolute; top: 16px; inset-inline-end: 16px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; padding-inline-start: 2px;
}
.t-card--video .t-video-title {
  position: absolute; left: 16px; right: 16px; bottom: 40px; z-index: 2;
  font-weight: 700; font-size: 1rem; line-height: 1.25;
}
.t-card--video .t-duration {
  position: absolute; inset-inline-start: 16px; bottom: 16px; z-index: 2;
  font-size: .85rem; opacity: .9;
}

/* Text quote cards — content-sized; the track's default stretch keeps one
   row of cards equal, so no fixed aspect is needed. */
.t-card--text {
  padding: 28px 24px; display: flex; flex-direction: column; gap: 20px;
}
.t-quote { color: var(--text-muted); font-size: .95rem; line-height: 1.55; flex: 1; overflow-wrap: anywhere; }
.t-quote strong { color: var(--text); font-weight: 600; }
.t-attrib { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #ddd center / cover no-repeat; flex-shrink: 0;
}
.t-avatar--fallback {
  background: linear-gradient(135deg, #c0a0a8, #6aa8c6);
}
.t-attrib strong { display: block; color: var(--text); font-size: .95rem; }
.t-attrib span { color: var(--text-faint); font-size: .85rem; }

[data-theme="dark"] .t-card { background: var(--surface-2); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

/* ── Steps (interactive 2-col list) ─────────────────────────────────── */
.steps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  /* stretch, not start: the detail card runs the full height of the step
     list beside it — a short panel next to the four rows read as broken. */
  align-items: stretch; margin-top: 40px;
}
.steps-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.steps-nav li { border-top: 1px solid var(--border); }
.steps-nav li:last-child { border-bottom: 1px solid var(--border); }
.step-nav-item {
  width: 100%; background: transparent; border: 0;
  display: flex; align-items: center; gap: 20px;
  padding: 24px 8px; text-align: start; cursor: pointer;
  color: var(--text-faint); font-family: inherit; font-size: 1rem;
  font-weight: 500; transition: color .15s ease;
}
.step-nav-item:hover { color: var(--text); }
.step-nav-item.is-active { color: var(--text); font-weight: 700; }
.step-nav-item .step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  /* --text-muted, not --text-faint: 11px bold on the dark surface measured
     4.05:1 with the faint ink — under the 4.5 AA floor Lighthouse holds. */
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.step-nav-item.is-active .step-num {
  background: var(--text); color: var(--bg);
  border-color: var(--text);
}

.steps-detail { position: relative; min-height: 320px; }
.step-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 28px; box-shadow: var(--shadow-sm);
}
/* Full height of the stretched column; in the mobile block flow the parent
   is auto-height, where 100% resolves to auto and changes nothing. */
.step-panel.is-active { display: block; height: 100%; }
.step-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.step-panel p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.step-panel h3, .step-panel p { overflow-wrap: anywhere; }
/* The panel's closing line — the number the tool moves. Accent ink, no box. */
.step-panel .step-stat { color: var(--accent); font-weight: 700; margin-bottom: 0; }

/* Inputs/rows rendered via detail_html */
.step-html .field-label { font-size: .8rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 18px 0 8px; font-weight: 600; }
.step-html .field-label:first-child { margin-top: 0; }
.step-html .field-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; background: var(--bg);
  font-size: .9rem; color: var(--text);
}
.step-html .field-row .field-icon {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint);
}
.step-html .field-row .field-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.step-html .field-row .field-add {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; line-height: 1;
}
.step-html .step-action {
  display: inline-block; width: 100%; text-align: center;
  margin-top: 16px; padding: 14px;
  background: var(--accent); color: #fff; font-weight: 600;
  border-radius: 999px; border: 0; cursor: pointer; font-size: .95rem;
  font-family: inherit; text-decoration: none;
}
.step-html .step-action:hover { opacity: .9; }

/* ── Pricing page ───────────────────────────────────────────────────── */
.pricing-section { padding-top: 32px; }
.pricing-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Shared row tracks: head / price / features / CTA. Each card subgrids
     over them, so the price line and the first feature line up across
     cards no matter how long a description runs. */
  grid-template-rows: auto auto 1fr auto;
  align-items: stretch; max-width: 1200px; margin: 0 auto;
}
.pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  display: grid; grid-template-rows: subgrid; grid-row: span 4;
  row-gap: 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pricing-card.is-featured {
  /* Accent gradient border + badge carry the emphasis; same padding and
     no resting lift, because misaligned rows read as sloppy, not special. */
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--accent), #6aa8c6) border-box;
}
.pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 14px; border-radius: 999px;
}
.pricing-head h3 {
  font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.pricing-desc { color: var(--text-muted); font-size: .9rem; margin-bottom: 0; }
.pricing-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pricing-price .amount {
  font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; color: var(--text); line-height: 1;
}
.pricing-price .period { color: var(--text-faint); font-size: .9rem; }

.pricing-items { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pricing-items li {
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--text-muted); font-size: .92rem; line-height: 1.45;
}
.pricing-items li .mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  background: rgba(247, 128, 60, .12); color: var(--accent);
}
.pricing-items li.is-excluded { color: var(--text-faint); text-decoration: line-through; }
.pricing-items li.is-excluded .mark { background: var(--surface-3); color: var(--text-faint); }

.pricing-cta { justify-content: center; padding: 14px 24px; }

/* ── Closing CTA banner ─────────────────────────────────────────────── */
.closing-cta-wrap { padding: 48px 24px; }
.closing-cta {
  border-radius: 28px;
  padding: 80px 32px;
  text-align: center;
  background: linear-gradient(90deg,
    #dff1fb 0%,
    #ecf0f4 35%,
    #f1eaec 65%,
    #fcdcdd 100%);
}
.closing-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700; color: #111;
  max-width: 720px; margin: 0 auto 32px;
  overflow-wrap: break-word;
}
.closing-cta .btn-primary {
  padding: 16px 32px; font-size: 1rem;
}
[data-theme="dark"] .closing-cta {
  background: linear-gradient(90deg,
    rgba(70, 130, 170, .22) 0%,
    rgba(60, 70, 90, .22) 35%,
    rgba(150, 90, 100, .22) 65%,
    rgba(200, 100, 110, .25) 100%),
    var(--surface);
}
[data-theme="dark"] .closing-cta h2 { color: var(--text); }

/* ── Theme toggle button ────────────────────────────────────────────── */
.theme-toggle {
  background: var(--surface-2); border: 0;
  border-radius: 999px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); font-size: 1rem;
  font-family: inherit; padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.theme-toggle:hover { background: var(--surface-3); transform: translateY(-1px); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ── Dark-mode overrides ────────────────────────────────────────────── */
[data-theme="dark"] .topnav.is-scrolled { border-bottom-color: var(--border); }
[data-theme="dark"] .nav-links a { color: var(--text-muted); }
[data-theme="dark"] .nav-links a:hover { color: var(--text); }

[data-theme="dark"] .btn-secondary {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
[data-theme="dark"] .btn-ghost { color: var(--text); }

[data-theme="dark"] .stats-banner { background: var(--surface); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .stat .num { color: var(--text); }
[data-theme="dark"] .stat .label { color: var(--text-muted); }
[data-theme="dark"] .stat .sublabel { color: var(--text-faint); }

[data-theme="dark"] .card { background: var(--surface); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .card-meta { color: var(--text-faint); }
[data-theme="dark"] .card-body h3 { color: var(--text); }

.section .lead, .hero p.lead { color: var(--text-muted); }
.section h2, .hero h1 { color: var(--text); }

[data-theme="dark"] .feature { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .feature h3 { color: var(--text); }
[data-theme="dark"] .feature p { color: var(--text-muted); }

[data-theme="dark"] .why-card {
  background: var(--surface-2); border-color: var(--border);
}
[data-theme="dark"] .why-card:hover {
  background: var(--surface); box-shadow: var(--shadow-md);
}
[data-theme="dark"] .why-card h3 { color: var(--text); }
[data-theme="dark"] .why-art img { filter: invert(.92) hue-rotate(180deg); }

[data-theme="dark"] .tabs-bar { background: var(--surface-2); }
[data-theme="dark"] .tabs-bar button { color: var(--text-muted); }
[data-theme="dark"] .tabs-bar button.is-active {
  background: var(--surface); color: var(--text);
}
.tabs-panel { background: var(--gradient-tab); }
[data-theme="dark"] .tabs-panel h3 { color: var(--text); }
[data-theme="dark"] .tabs-panel p { color: var(--text-muted); }
[data-theme="dark"] .tabs-panel p strong { color: var(--text); }
[data-theme="dark"] .tabs-panel .mockup {
  background: var(--surface); box-shadow: var(--shadow-md);
}
[data-theme="dark"] .mockup-checklist .mc-head { color: var(--text); }
[data-theme="dark"] .mockup-checklist .mc-item {
  background: var(--surface-2); border-color: var(--border);
}
[data-theme="dark"] .mockup-checklist .mc-item .mc-text { color: var(--text-muted); }
[data-theme="dark"] .mockup-checklist .mc-item.is-pending .check {
  background: var(--surface-3); color: var(--text-faint);
}

.hero-wall { background: var(--gradient-wall); }

[data-theme="dark"] .faq-item { border-bottom-color: var(--border); }
[data-theme="dark"] .faq-item summary { color: var(--text); }
[data-theme="dark"] .faq-item .answer { color: var(--text-muted); }

[data-theme="dark"] .carousel-btn {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-md);
}
[data-theme="dark"] .carousel-btn:hover { background: var(--accent); color: #fff; }
[data-theme="dark"] .carousel-track::-webkit-scrollbar-thumb { background: var(--border); }

[data-theme="dark"] .trustpilot { background: var(--surface-2); }
[data-theme="dark"] .trustpilot .count { color: var(--text-faint); }

[data-theme="dark"] .article h1, [data-theme="dark"] .article .content h2,
[data-theme="dark"] .article .content h3 { color: var(--text); }
[data-theme="dark"] .article .meta { color: var(--text-faint); }
[data-theme="dark"] .article .content { color: var(--text-muted); }
[data-theme="dark"] .article .content a { color: #6ea4ff; }

[data-theme="dark"] .form-row label { color: var(--text-muted); }
[data-theme="dark"] .form-row input[type=text],
[data-theme="dark"] .form-row input[type=email],
[data-theme="dark"] .form-row input[type=password],
[data-theme="dark"] .form-row textarea,
[data-theme="dark"] .form-row select {
  background: var(--surface-2); border-color: var(--border); color: var(--text);
}

[data-theme="dark"] .message { background: var(--surface); color: var(--text); }

[data-theme="dark"] .lang-menu { border-color: var(--border); box-shadow: var(--shadow-md); }
[data-theme="dark"] .lang-option { color: var(--text-muted); }
[data-theme="dark"] .lang-option:hover,
[data-theme="dark"] .lang-option.is-current {
  background: var(--surface-2); color: var(--text);
}
[data-theme="dark"] .lang-code-sm { background: var(--surface-3); }

[data-theme="dark"] .wall-stat,
[data-theme="dark"] .wall-expert { box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* ════════════════════════════════════════════════════════════════════════
   Responsive system
   ────────────────────────────────────────────────────────────────────────
   Breakpoint scale:
     mobile      < 768px       1-col, swipe carousels, drawer nav
     tablet      768–1023px    2-col grids, drawer nav, condensed padding
     desktop     ≥ 1024px      full layout (default rules above)

   Carousel utility (mobile only): any of .pricing-grid, .why-grid,
   .grid.grid-3, .grid.grid-2, .grid.grid-4, .stats-banner becomes a
   horizontal scroll-snap carousel with a peek of the next card.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tablet & below (drawer nav, 2-col fallbacks) ────────────────────── */
@media (max-width: 1023px) {
  :root { --topnav-h: 68px; }

  .container { padding: 0 24px; }
  .section { padding-block: 56px; }
  .topnav { padding: 14px 20px; }

  /* Hide desktop-only nav bits; show hamburger. Plain rule, not
     !important: the tablet-range block below re-shows the primary CTA and
     must be able to win on specificity alone. */
  .nav-toggle { display: inline-flex; }
  .nav-desktop-only { display: none; }
  .nav-cta { gap: 8px; }

  /* Drawer */
  .nav-links {
    display: none; position: fixed; left: 0; right: 0;
    /* From the very top, BEHIND the bar (z 49 < 50), padded below it: the
       drawer's own background then paints under the transparent bar
       instead of leaving a see-through strip above its old top edge. */
    top: 0; bottom: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--bg);
    padding: calc(var(--topnav-h) + 16px) 24px 32px;
    overflow-y: auto; overscroll-behavior: contain; z-index: 49;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 16px 4px; font-size: 1rem;
    border-bottom: 1px solid var(--border); color: var(--text);
  }
  .nav-mobile-cta {
    display: flex; flex-direction: column; gap: 10px;
    /* Pinned to the drawer's bottom edge while a long link list scrolls,
       so the conversion actions never sit below the fold. */
    position: sticky; bottom: -32px;
    background: var(--bg); border-top: 1px solid var(--border);
    margin: 8px -24px 0; padding: 24px 24px 16px;
  }
  .nav-mobile-cta .btn { justify-content: center; width: 100%; }
  .nav-mobile-lang { display: flex; justify-content: center; margin-top: 8px; }
  .nav-mobile-lang .lang-picker {
    display: inline-flex; flex-direction: column; align-items: center;
  }
  .nav-mobile-lang .lang-toggle { width: 38px; height: 38px; }
  /* In flow, not a flyout: an absolute menu at the bottom of a scrollable
     drawer opened off-screen, and its translateX centring broke in RTL. */
  .nav-mobile-lang .lang-menu {
    position: static; transform: none; margin-top: 8px;
    box-shadow: none; border-color: var(--border);
    width: min(280px, 100%);
  }
  .nav-mobile-lang .lang-option { padding: 12px; }
  body.nav-open { overflow: hidden; }
  /* The scrolled bar's backdrop-filter makes .topnav the CONTAINING BLOCK
     for fixed descendants — and the drawer is one. Opened while scrolled,
     it collapsed to the bar's own 100-odd pixels and painted over the
     brand and the toggle. While the drawer is open the bar sits on the
     drawer's opaque background, so the glass buys nothing: drop it. */
  body.nav-open .topnav {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  /* Hero rhythm */
  .hero { padding: 72px 24px 48px; }
  .hero h1 { font-size: clamp(1.85rem, 4.5vw, 2.75rem); }
  .hero p.lead { font-size: 1rem; }

  /* Hero stacks for the whole tablet band (the old one-off 899px query,
     folded in): two ~410px columns at 900-1023px were the worst-composed
     range on the site — two words per h1 line beside a 400px mascot. */
  .hero-split { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero-split .hero-copy h1,
  .hero-split .hero-copy p.lead { margin-inline: auto; }
  .hero-art img { max-width: 400px; margin-top: 20px; }

  /* Two-col panels collapse to one */
  .tabs-panel { grid-template-columns: 1fr; padding: 40px 32px;
                gap: 32px; min-height: 0; }
  .tabs-panel h3 { font-size: 1.4rem; }
  .tabs-bar { scroll-snap-type: x proximity; scrollbar-width: none;
              -webkit-overflow-scrolling: touch; }
  .tabs-bar::-webkit-scrollbar { display: none; }
  /* Some engines drop a scroller's trailing padding; the spacer restores
     it so the last pill never touches the clipped edge. */
  .tabs-bar::after { content: ''; flex: 0 0 2px; }
  .tabs-bar button { scroll-snap-align: center; }
  /* A short checklist stretched to ~700px read as filler; hug and centre. */
  .tabs-panel .mockup { min-height: 0; max-width: 560px; width: 100%;
                        margin-inline: auto; }

  /* Steps: the stacked vertical tablist looked like an accordion but was
     not one — rows promised in-place expansion while the panel swapped far
     below the tap. The pill-tabs form serves the whole tablet band. */
  .steps-grid { display: block; }
  .steps-nav {
    display: flex; flex-direction: row; gap: 8px;
    overflow-x: auto; padding: 0 0 8px; margin: 0 0 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .steps-nav::-webkit-scrollbar { display: none; }
  .steps-nav li { border: 0; flex: 0 0 auto; scroll-snap-align: start; }
  .step-nav-item {
    padding: 10px 16px; gap: 8px;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: .85rem; white-space: nowrap;
  }
  .step-nav-item.is-active {
    background: var(--text); color: var(--bg);
    border-color: var(--text);
  }
  .step-nav-item .step-num {
    width: 22px; height: 22px; font-size: .7rem;
    /* Derived from --text, not a black literal: a black tint vanishes on
       the dark theme's inverted pills. */
    background: color-mix(in srgb, var(--text) 8%, transparent); border: 0;
  }
  .step-nav-item.is-active .step-num {
    background: color-mix(in srgb, var(--bg) 18%, transparent);
    color: var(--bg);
  }
  .steps-detail { min-height: 0; }
  .step-panel { padding: 24px 22px; }
  .step-panel h3 { font-size: 1.1rem; }

  /* Why cards stay 2x2 on tablet, tighter */
  .why-card { min-height: 240px; padding: 28px; }
  .why-art img { height: 150px; }

  /* Footer: 2 columns on tablet, brand row spans both */
  .site-footer .container { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer .container > *:first-child { grid-column: 1 / -1; }

  /* Marquee tiles slightly smaller */
  .wall-col { flex-basis: 200px; }
  .wall-col[data-shift="80"]  { margin-top: 60px; }
  .wall-col[data-shift="140"] { margin-top: 110px; }

  /* The footer's own inline padding stacked on .container's, indenting its
     content relative to every sibling section. */
  .site-footer { padding-inline: 0; }
  /* .section drops to 56px at this width but the CTA card kept desktop's
     80px — rebalance. */
  .closing-cta { padding: 64px 32px; }
}

/* ── Tablet only (768-1023px) ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* auto-fit dealt 2+1 with a double-width orphan card; a deliberate pair
     with the featured plan as a centred full-row header reads as intended
     hierarchy instead of a broken grid. */
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-card.is-featured {
    grid-column: 1 / -1; width: 100%; max-width: 560px;
    justify-self: center; order: -1; transform: none;
  }
  .pricing-card.is-featured:hover { transform: translateY(-3px); }
  /* The tablet bar has room for the one action a marketing site exists
     for — it should not hide in the drawer. */
  .nav-cta .btn-primary.nav-desktop-only { display: inline-flex; }
}

/* ── Mobile (carousels, single-column rhythm) ────────────────────────── */
@media (max-width: 767px) {
  :root { --topnav-h: 60px; }

  /* Rhythm */
  .container { padding: 0 16px; }
  .section { padding-block: 40px; }
  .topnav { padding: 10px 16px; }
  .lang-picker { display: none; }
  /* The hamburger is the primary mobile control; 36px sat under the touch
     floor. */
  .nav-toggle { width: 40px; height: 40px; }

  /* Hero */
  .hero { padding: 56px 16px 32px; }
  .hero .eyebrow { font-size: .72rem; }
  .hero h1 { font-size: clamp(1.65rem, 6.5vw, 2.1rem); margin-bottom: 14px;
             overflow-wrap: anywhere; max-width: 100%; }
  .hero p.lead { font-size: .95rem; margin-bottom: 20px;
                 overflow-wrap: anywhere; }
  .hero-wall { padding: 0 0 32px;
               padding-top: calc(var(--topnav-h) + 40px); }
  /* .hero-wall .hero (higher specificity) was eating the generic mobile
     hero padding above — restate the gutters it owes the phone. */
  .hero-wall .hero { padding: 0 16px 40px; }
  /* Cap the mascot's claim on a phone screen: full-column art plus its
     20px tablet margin pushed the primary CTA below the fold, and on
     landscape phones filled 70% of the height. */
  .hero-art img { width: auto; max-width: min(360px, 100%);
                  max-height: 38vh; margin-top: 8px; }
  .hero-art .btn { padding: 13px 30px; font-size: 1rem; }

  /* Section headings */
  .section h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .section h2 + p.lead, .section .lead { font-size: .95rem; }

  /* ── Mobile carousel utility ──
     Cards become horizontal scroll-snap with a peek of the next card.
     Margin trick lets them bleed to the viewport edge inside .container. */
  .pricing-grid,
  .grid.grid-3,
  .grid.grid-2,
  .grid.grid-4,
  .stats-banner {
    display: flex; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    margin-left: -16px; margin-right: -16px;
    /* Extra top padding so absolutely-positioned badges (e.g. pricing
       "MOST POPULAR") aren't clipped by the carousel's overflow box. */
    padding: 24px 16px 18px;
    scroll-padding-inline-start: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar,
  .grid::-webkit-scrollbar,
  .stats-banner::-webkit-scrollbar { display: none; }
  .pricing-grid > *,
  .grid.grid-3 > *,
  .grid.grid-2 > *,
  .grid.grid-4 > *,
  .stats-banner > * {
    flex: 0 0 calc(86% - 8px);
    scroll-snap-align: start;
    min-width: 0; max-width: none;
  }

  /* Why cards: one full-width tile per row, NOT a carousel. The
     illustrations are the point of these cards, and at half-width they
     shrank into stamps; a single column lets each one breathe. */
  .why-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .why-card { padding: 24px 20px; min-height: 0; min-width: 0; }
  .why-art { margin-bottom: 12px; }
  .why-art img { height: 150px; max-width: 100%; }
  .why-card h3 { font-size: 1.05rem; }

  /* Pricing tweaks inside the carousel */
  .pricing-card { padding: 32px 26px; }
  /* The carousel opens on the plan the shop most wants seen; hover-lift on
     a touch surface only made tapped cards jump. */
  .pricing-card.is-featured { padding: 32px 26px; transform: none; order: -1; }
  .pricing-card.is-featured:hover { transform: none; }
  .pricing-badge { font-size: .68rem; padding: 5px 12px; }
  .pricing-items li > span:last-child { min-width: 0; overflow-wrap: anywhere; }

  /* Stats banner: behave as carousel of light cards */
  .stats-banner { background: transparent; box-shadow: none; }
  .stats-banner > .stat {
    flex-basis: calc(64% - 8px);
    background: var(--surface); border-radius: 14px;
    box-shadow: var(--shadow-sm); padding: 18px 16px;
  }
  [data-theme="dark"] .stats-banner > .stat { background: var(--surface); }

  /* Tabs */
  .tabs-bar { padding: 4px; gap: 2px; margin-bottom: 24px; }
  .tabs-bar button { padding: 10px 14px; font-size: .85rem; }
  .tabs-panel { padding: 28px 22px; gap: 22px; border-radius: 20px; }
  .tabs-panel h3 { font-size: 1.2rem; margin-bottom: 12px;
                   overflow-wrap: anywhere; }
  .tabs-panel p { font-size: .92rem; overflow-wrap: anywhere; }
  .tabs-panel .mockup { padding: 18px; min-height: 0; }
  .mockup-checklist .mc-head { font-size: .95rem; margin-bottom: 12px; }
  .mockup-checklist .mc-item { padding: 10px; margin-bottom: 8px; }
  .mockup-checklist .mc-item .mc-text { font-size: .82rem; }

  /* Testimonials: stay a horizontal swipe carousel on mobile */
  .testimonials-section { padding-bottom: 32px; }
  .testimonials-carousel .carousel-track {
    gap: 14px; padding: 16px 16px 24px;
    margin: 0 -16px; scroll-padding-inline-start: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .testimonials-carousel .carousel-track::-webkit-scrollbar { display: none; }
  .testimonials-carousel .carousel-track > .t-card {
    /* min(): an 80% slide at 600-767px grew into a viewport-tall monolith;
       capping at the desktop card width keeps a full card plus a peek. */
    flex: 0 0 min(80%, 320px);
    scroll-snap-align: start;
  }
  .t-card--text { padding: 24px 20px; }
  .carousel-btn { display: none !important; }

  /* Steps pills (the structure lives in the 1023px block): here they only
     bleed to the viewport edge, advertising the horizontal scroll. */
  .steps-nav { padding: 0 16px 8px; margin: 0 -16px 14px;
               scroll-padding-inline: 16px; }

  /* Experts carousel (about, experts pages) */
  .carousel-track { padding: 8px 16px 20px; gap: 12px; margin: 0 -16px; }
  .carousel-track > * { flex: 0 0 180px; }

  /* Wall marquee */
  .wall-col { flex-basis: 150px; gap: 12px; }
  /* 50s over a half-track this long crossed a phone screen ~3x faster than
     the desktop feel; 80s restores the ambient pace. */
  .wall-track { gap: 12px; animation-duration: 80s; }
  .wall-stat { min-height: 120px; padding: 12px; }
  .wall-stat .num { font-size: 1.25rem; }
  .wall-stat .label { font-size: .8rem; padding-top: 12px; }
  /* Desktop type in a 150px column wrapped names past the shaded band. */
  .wall-expert { min-height: 200px; padding: 14px; }
  .wall-expert .meta strong { font-size: .95rem; }
  .wall-expert .meta span { font-size: .8rem; }
  .wall-col-tall .wall-expert { min-height: 240px; }
  .wall-col[data-shift="80"]  { margin-top: 30px; }
  .wall-col[data-shift="140"] { margin-top: 60px; }

  /* Trustpilot pill */
  .trustpilot { padding: 14px 20px; }

  /* FAQ */
  .faq-section { margin-bottom: 20px; }
  .faq-section h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .faq-item summary { font-size: .95rem; padding: 14px 0; }
  .faq-item .answer { font-size: .9rem; padding-bottom: 14px; }
  /* Kill the container+article double gutter on the home FAQ teaser. */
  .section .article { padding-inline: 0; padding-bottom: 0; }

  /* Article */
  .article { padding: 32px 16px; }
  .article h1 { font-size: 1.6rem; }
  .article .content { font-size: .98rem; }

  /* Closing CTA */
  .closing-cta-wrap { padding: 24px 16px; }
  .closing-cta { padding: 48px 22px; border-radius: 22px; }
  .closing-cta h2 { font-size: 1.35rem; margin-bottom: 20px; }
  .closing-cta .btn-primary { padding: 14px 26px; }

  /* Newsletter */
  .newsletter-card {
    grid-template-columns: 1fr; text-align: center;
    padding: 28px 22px; gap: 18px;
  }
  .newsletter-card h3 { font-size: 1.2rem; }
  .newsletter-card p { margin: 0 auto; }
  .newsletter-card .newsletter-row { flex-direction: column; gap: 10px; }
  .newsletter-card input[type=email] { min-width: 0; }
  /* The card centres its text on phones; the consent caption should still
     hug its own checkbox. */
  .newsletter-card .newsletter-consent { text-align: start; }

  /* Footer */
  .site-footer { padding: 48px 16px 24px; margin-top: 48px; }
  .site-footer .container { grid-template-columns: 1fr 1fr; gap: 24px;
                             padding: 0; }
  .site-footer .container > *:first-child { grid-column: 1 / -1; }
  .site-footer ul li { margin: 8px 0; font-size: .9rem; }

  /* Theme toggle */
  .theme-toggle { width: 34px; height: 34px; }

  /* Forms: 16px floors iOS Safari's focus auto-zoom. */
  .form-row input[type=text], .form-row input[type=email],
  .form-row input[type=password], .form-row textarea, .form-row select {
    font-size: 1rem;
  }
  .article form .btn { width: 100%; }

  /* Messages: below the fixed bar, not over its controls. */
  .messages { top: calc(var(--topnav-h) + 8px); right: 12px; left: 12px; }
  .message { font-size: .85rem; }
}

/* ── Very small phones ───────────────────────────────────────────────── */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.55rem; }
  .nav-links a { font-size: .95rem; padding: 14px 4px; }
  .closing-cta h2 { font-size: 1.2rem; }
  .pricing-grid > *,
  .grid.grid-3 > *,
  .grid.grid-2 > *,
  .grid.grid-4 > *,
  .testimonials-carousel .carousel-track > .t-card { flex-basis: 90%; }
  .pricing-card { padding: 26px 20px; }
  .why-card { padding: 16px 12px; }
  .tabs-bar button { padding: 9px 12px; font-size: .8rem; }
  .site-footer .container { grid-template-columns: 1fr; }
}

/* ── Anti-spam honeypot (visually removed, present for bots) ───────────
   In-place clipping, NOT left:-9999px: an RTL document's scrollable
   overflow grows LEFTWARD, so the old off-screen throw stretched every
   /fa/ page's scroll canvas to ~10000px. The sr-only pattern removes it
   visually in either direction without leaving the layout. */
.hp-wrap {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Error pages (404) ───────────────────────────────────────────────── */
.error-code {
  font-size: clamp(3.25rem, 16vw, 5rem); font-weight: 800; line-height: 1;
  letter-spacing: .04em; opacity: .15; margin-bottom: 8px;
}
.error-actions {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; margin-top: 24px;
}

/* ── Blog: category chips + pagination ───────────────────────────────── */
.blog-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 32px;
}
.blog-filters .chip {
  padding: 8px 18px; border-radius: 999px; font-size: .9rem;
  border: 1px solid var(--border, rgba(127,127,127,.25));
  text-decoration: none; color: inherit;
  transition: background .15s ease, color .15s ease;
}
.blog-filters .chip:hover { background: rgba(127,127,127,.12); }
.blog-filters .chip.active {
  background: var(--accent, #8b7bf0); border-color: var(--accent, #8b7bf0);
  color: #fff;
}
.pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 18px; margin-top: 40px;
}
.pagination .page-link {
  padding: 8px 18px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border, rgba(127,127,127,.25)); color: inherit;
}
.pagination .page-link:hover { background: rgba(127,127,127,.12); }
.pagination .page-status { font-size: .9rem; opacity: .7; }

/* ── Mobile rules for the late blocks above ─────────────────────────
   The blog and error blocks sit after the responsive system, so their
   breakpoint overrides must come later still or lose on source order. */
@media (max-width: 767px) {
  /* A paginated post list is a vertical browsing surface — the carousel
     utility fought the pagination model. Index only (via .blog-grid);
     the 3-teaser "related" rail on the post page keeps the carousel. */
  .grid.grid-3.blog-grid {
    display: grid; grid-template-columns: 1fr; gap: 20px;
    margin-inline: 0; padding: 0; overflow: visible;
  }
  .grid.grid-3.blog-grid > * { flex: none; }
  .blog-filters { gap: 8px; margin-bottom: 24px; }
  .blog-filters .chip { display: inline-flex; align-items: center;
                        min-height: 44px; padding: 8px 16px; }
  .pagination { gap: 10px 12px; margin-top: 32px; }
  .pagination .page-link { display: inline-flex; align-items: center;
                           min-height: 44px; padding: 8px 16px; }
  .article .cover { width: 100%; margin-bottom: 24px; border-radius: 12px; }
  .article .content { line-height: 1.65; }
}
@media (max-width: 380px) {
  .pagination .page-status { flex-basis: 100%; order: 1; text-align: center; }
  .error-actions { flex-direction: column; align-items: stretch; }
}

/* ── Live tab previews — the dialog the "how it works" panels open ─── */
.tabs-panel[data-preview] { cursor: zoom-in; }
.tabpv { position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.tabpv[hidden] { display: none; }
.tabpv-backdrop { position: absolute; inset: 0;
  background: rgba(15, 15, 25, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tabpv-dialog { position: relative; display: flex; flex-direction: column;
  width: min(1100px, 100%); height: min(780px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.tabpv-chrome { display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.tabpv-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.tabpv-dots i { width: 9px; height: 9px; border-radius: 50%;
  background: var(--border); }
.tabpv-title { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600;
  color: var(--text); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tabpv-go { flex-shrink: 0; padding: 7px 14px; font-size: 0.85rem; }
/* .btn's display would defeat the hidden attribute in image mode. */
.tabpv-go[hidden] { display: none; }
.tabpv-close { flex-shrink: 0; width: 32px; height: 32px; border: none;
  border-radius: 9px; background: var(--surface-3); color: var(--text);
  font-size: 0.95rem; line-height: 1; cursor: pointer; }
.tabpv-body { position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); }
.tabpv-frame { width: 100%; height: 100%; border: 0; opacity: 0;
  transition: opacity 0.25s ease; }
.tabpv-frame.is-ready { opacity: 1; }
.tabpv-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.tabpv-loading { position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; font-size: 0.9rem; color: var(--muted, var(--text)); }
.tabpv-loading[hidden] { display: none; }
.tabpv-spin { width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: tabpv-spin 0.8s linear infinite; }
@keyframes tabpv-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .tabpv { padding: 0; }
  .tabpv-dialog { width: 100%; height: 100%; border-radius: 0; border: none; }
  .tabpv-go { padding: 7px 10px; font-size: 0.8rem; }
}

/* ── People marquee — the team as one continuous, full-bleed loop ───── */
.people-marquee {
  overflow: hidden;
  margin-top: 24px;
}
.people-marquee-track {
  display: flex;
  width: max-content;
  /* One group slides fully out while the twin slides in — a seamless
     loop with no jump. ~5s per face keeps it a drift, not a spin. */
  animation: people-loop calc(var(--people-count, 7) * 5s) linear infinite;
  will-change: transform;
}
.people-marquee:hover .people-marquee-track { animation-play-state: paused; }
.people-marquee-group {
  display: flex;
  gap: 16px;
  padding-inline-end: 16px; /* the gap between the twin groups */
  flex: 0 0 auto;
}
.people-marquee .expert { flex: 0 0 240px; width: 240px; }
@keyframes people-loop {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .people-marquee { overflow-x: auto; scrollbar-width: none; }
  .people-marquee::-webkit-scrollbar { display: none; }
  .people-marquee-track { animation: none; }
}