/* ── 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; text-wrap: balance; }
.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 — heading (the feature cards live with .fcard, below) ── */
.why-join h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }

/* ── 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: 12px 18px; border: 0; background: transparent;
  border-radius: 999px; cursor: pointer; font-weight: 500; color: #555;
  white-space: nowrap; font-family: inherit; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.tabs-bar button.is-active { background: #fff; color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,.07); font-weight: 600; }
/* The step number: a neutral disc (never orange behind anything orange);
   the active step's disc turns ink-dark. */
.tab-step {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #e6e6ec; color: #555;
}
.tabs-bar button.is-active .tab-step { background: #111; color: #fff; }
.tabs-panel .tab-step-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #e8641c; margin-bottom: 8px;
}
/* One grid cell for every step: the box is as tall as the tallest step,
   so switching tabs never resizes it (the owner: "a box that changes size
   doesn't feel good"). Hidden steps keep their space but not their clicks. */
.tabs-panels { display: grid; }
.tabs-panel { display: grid; grid-area: 1 / 1; visibility: hidden;
  border-radius: 28px; padding: 56px; gap: 48px;
  grid-template-columns: 1fr 1fr; align-items: center;
}
.tabs-panel.is-active { visibility: visible; }
.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;
}

/* A step drawn in the site's line art: no card, a fixed frame (every step
   the same size), the drawing whole inside it. */
.tabs-panel .mockup.mockup--art {
  position: relative; background: none; box-shadow: none; padding: 0;
  min-height: 0; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.tabs-panel .mockup.mockup--art img {
  width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 0;
}
[data-theme="dark"] .tabs-panel .mockup.mockup--art { background: none; box-shadow: none; }
/* "Click to try it live" — on the steps whose picture opens the real chat. */
.mockup-live {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: #111; background: #fff; border: 1px solid #e3e3ea;
  box-shadow: 0 6px 18px rgba(17, 20, 40, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mockup-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1f9d6a;
  box-shadow: 0 0 0 4px rgba(31, 157, 106, .18);
}
.tabs-panel[data-preview]:hover .mockup-live {
  transform: translate(-50%, -2px); box-shadow: 0 10px 24px rgba(17, 20, 40, .16);
}
[data-theme="dark"] .mockup-live { color: var(--text); background: var(--surface); border-color: var(--border); }

/* 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; }

/* ── Homepage hero (the colour band behind the mascot) ─────────────────
   Named for the team wall that shared this backdrop until it moved down
   the page (.team-wall); the hero now ends the section on its own, so no
   bottom padding beyond the hero's own — the next section brings its 64px. */
.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 0;
  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); }

/* ── The team (homepage, just before the FAQ) ──────────────────────────
   Its own section now; the marquee runs edge to edge, so the section has
   no .container — only the heading block does. margin-inline auto keeps
   that block centred (the old "32px 0" margin had pinned it to the left
   edge, putting the centred heading ~80px off the page's middle). */
.team-wall .wall-head { text-align: center; margin: 0 auto 24px; padding: 0 24px; }
.team-wall .wall-head h2 { font-size: clamp(1.5rem,2.5vw,2.25rem); font-weight: 700; margin-bottom: 0; }
.team-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: 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: var(--surface-3); }

.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: var(--surface-3);
}

.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; }

/* ── Services menu (the feature landings) ───────────────────────────── */
/* ── Features menu: a small mega menu ─────────────────────────────────
   Hangs from the whole bar, centred (the <details> is static, so the
   fixed .topnav is the panel's containing block): anchored to the word
   "Features" a wide panel ran off-screen on a 1024px desktop. Labelled
   columns of icon + short name + one line, and one card with the site's
   own drawing — at 46px the landings' drawings read as scribbles. */
.nav-features { position: static; }
.nav-features summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  color: #333; font-size: .95rem;
}
.nav-features summary::-webkit-details-marker { display: none; }
.nav-features summary:hover { color: #000; }
.nav-features-caret { font-size: .8em; transition: transform .15s ease; }
.nav-features[open] .nav-features-caret { transform: rotate(180deg); }
.nav-features-menu {
  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%);
  z-index: 60; width: min(900px, calc(100vw - 32px)); padding: 10px;
  background: var(--surface, #fff); border: 1px solid var(--border, #eaeaef);
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(17, 20, 40, .14), 0 2px 8px rgba(17, 20, 40, .05);
}
.nav-features[open] .nav-features-menu { animation: nav-menu-in .16s ease-out; }
@keyframes nav-menu-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-features[open] .nav-features-menu { animation: none; }
}
.nav-features-body { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; }
.nav-features-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 4px; padding: 6px 2px 8px 6px;
}
.nav-features-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-features-group {
  margin: 6px 10px 6px; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #f7803c;
}
.nav-links .nav-feature {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: 14px; font-size: inherit; transition: background .15s ease;
}
.nav-links .nav-feature:hover,
.nav-links .nav-feature[aria-current="page"] { background: var(--surface-2, #f7f7fa); }
/* Site rule (owner, 2026-09-27): an orange icon never sits on an orange
   ground — the tile stays neutral in every state; hover only deepens it. */
.nav-feature-icon {
  flex: 0 0 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #e8641c; background: var(--surface-2, #f9f9fb); border: 1px solid var(--border, #eaeaef);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nav-feature-icon .menu-icon { width: 20px; height: 20px; }
.nav-feature:hover .nav-feature-icon,
.nav-feature[aria-current="page"] .nav-feature-icon {
  background: var(--surface, #fff); border-color: #dcdce4;
  box-shadow: 0 2px 6px rgba(17, 20, 40, .08);
}
.nav-feature-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-feature-name {
  font-size: .87rem; font-weight: 600; line-height: 1.25; color: var(--text, #111);
  transition: color .15s ease;
}
.nav-feature:hover .nav-feature-name,
.nav-feature[aria-current="page"] .nav-feature-name { color: #e8641c; }
.nav-feature-text { font-size: .76rem; line-height: 1.35; color: var(--text-muted, #666); }
/* The side card: the only drawing in the menu, big enough to read. */
.nav-links .nav-features-promo {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px;
  border-radius: 16px; color: var(--text, #111);
  background: linear-gradient(165deg, #f6f8fb 0%, #f4f2f7 55%, #eef6fc 100%);
  border: 1px solid var(--border, #eaeaef);
}
.nav-features-promo-art {
  display: flex; align-items: center; justify-content: center;
  height: 112px; margin-bottom: 8px;
}
.nav-features-promo-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.nav-features-promo-eyebrow {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #e8641c;
}
.nav-features-promo-title { font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--text, #111); }
.nav-features-promo-text { font-size: .78rem; line-height: 1.4; color: var(--text-muted, #666); }
.nav-features-promo-cta {
  align-self: flex-start; margin-top: 10px; padding: 7px 16px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: #fff; background: #f7803c;
  transition: background .15s ease;
}
.nav-features-promo:hover .nav-features-promo-cta { background: #e8641c; }
.nav-features-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px; padding: 11px 18px; border-radius: 14px;
  background: var(--surface-2, #f7f7fa);
}
.nav-links .nav-features-all { font-size: .85rem; font-weight: 600; color: var(--text, #111); }
.nav-features-arrow { display: inline-block; transition: transform .15s ease; }
.nav-features-all:hover .nav-features-arrow { transform: translateX(3px); }
[dir="rtl"] .nav-features-arrow { transform: scaleX(-1); }
[data-theme="dark"] .nav-features summary { color: var(--text-muted); }
[data-theme="dark"] .nav-features summary:hover { color: var(--text); }
[data-theme="dark"] .nav-features-menu {
  background: var(--surface); border-color: var(--border);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .nav-feature-icon { color: #ffa36b; background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .nav-feature:hover .nav-feature-icon,
[data-theme="dark"] .nav-feature[aria-current="page"] .nav-feature-icon {
  background: var(--surface-3); border-color: #3a404d; box-shadow: none;
}
[data-theme="dark"] .nav-links .nav-features-promo { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .nav-features-foot { background: var(--surface-2); }

/* ── 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: var(--surface-3); 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); }
/* …but not the drawer's buttons: the rule above out-ranked .btn-primary
   and left the orange CTA's label grey in the dark theme. */
[data-theme="dark"] .nav-links a.btn-primary { color: #fff; }
[data-theme="dark"] .nav-links a.btn-secondary { 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"] .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);
}
[data-theme="dark"] .tab-step { background: var(--surface-3); color: var(--text-muted); }
[data-theme="dark"] .tabs-bar button.is-active .tab-step { background: var(--text); color: var(--bg); }
[data-theme="dark"] .tabs-panel .tab-step-eyebrow { color: #ffa36b; }
.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);
  /* The band fades to the page ground over 780px; a hero shorter than
     that (every phone) would end mid-fade, a visible seam. Never taller
     than the section, so the fade always finishes at its bottom edge. */
  background-size: 100% min(780px, 100%);
}

[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,
   .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-features { border-bottom: 1px solid var(--border); }
  .nav-features summary { display: flex; justify-content: space-between; padding: 16px 4px; font-size: 1rem; color: var(--text); }
  /* In the drawer the menu folds inline: one column, thumbnails and names. */
  .nav-features-menu {
    position: static; transform: none; width: auto; padding: 0 0 10px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-features[open] .nav-features-menu { animation: none; }
  .nav-features-body { grid-template-columns: minmax(0, 1fr); }
  .nav-features-cols { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .nav-features-group { margin: 12px 4px 4px; }
  .nav-links .nav-feature { padding: 7px 4px; border-bottom: 0; }
  .nav-feature-icon { flex-basis: 34px; height: 34px; border-radius: 10px; }
  .nav-feature-name { font-size: .95rem; font-weight: 500; }
  .nav-feature-text { display: none; }
  /* The drawer ends on the site's own CTA buttons; no second card here. */
  .nav-links .nav-features-promo { display: none; }
  .nav-features-foot { background: transparent; padding: 8px 4px 0; margin-top: 0; }
  .nav-links .nav-features-foot a { padding: 8px 0; border-bottom: 0; }
  [data-theme="dark"] .nav-features-menu,
  [data-theme="dark"] .nav-features-foot { background: transparent; box-shadow: none; }
  .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; }
  .tabs-panel .mockup.mockup--art { max-width: 460px; width: 100%; margin-inline: auto; }
  .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; }

  /* 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;
               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;
  }

  /* 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: 8px 12px; font-size: .85rem; gap: 8px; }
  .tab-step { width: 22px; height: 22px; font-size: .72rem; }
  /* Phone: the four steps fit one row with no sideways scrolling — the
     steps you are not on show only their number; the current one also
     its name. */
  .tabs-bar button:not(.is-active) { flex: 0 0 auto; padding-inline: 10px; }
  .tabs-bar button:not(.is-active) .tab-label { display: none; }
  .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, .faq-section-title { 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; }
  .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; }
.tabs-panel[data-preview="iframe"] { cursor: pointer; }
.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; }
}

/* ── Feature landing: hero + problem/solution blocks ───────────────────
   The hero borrows the homepage's split (copy left, art right). The art is
   capped well under the homepage mascot's 715px: on this page it shares the
   row with a breadcrumb, a title and a CTA, and at full size it was the
   only thing on screen. */
.art-hero .hero-art img { max-width: 440px; }

.ps-list { display: flex; flex-direction: column; gap: 8px; padding-block: 16px 40px; }
.ps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 56px; padding-block: 40px;
}
/* The four layouts. `order` moves the art, so the DOM keeps text first
   for readers and crawlers whichever side the picture is drawn on. */
.ps--image-right .ps-art { order: 1; }
.ps--image-left .ps-art { order: -1; }
.ps--image-top, .ps--text { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 24px; }
.ps--image-top .ps-art { order: -1; justify-self: center; }
.ps--image-top .ps-copy, .ps--text .ps-copy { max-width: 720px; margin-inline: auto; }
.ps--image-top .ps-copy .content, .ps--text .ps-copy .content { text-align: start; }
.ps--image-top .ps-copy .content ul, .ps--image-top .ps-copy .content ol,
.ps--text .ps-copy .content ul, .ps--text .ps-copy .content ol { display: inline-block; text-align: start; }

.ps-art { display: grid; justify-items: center; }
/* No `display` here: the themed-image partial emits a light and a dark
   <img>, and the base rules hide the one not in use by display — a
   `display: block` on both would draw the picture twice. */
.ps-art img { width: 100%; max-width: 520px; height: auto; }
/* Black line art on transparency, as on the homepage: a full invert, like
   the hero's — the softer .92 the "why" cards use left these drawings grey
   and thin on the dark ground. */
[data-theme="dark"] .ps-art .ps-line-art { filter: invert(1); }

.ps-copy h2 { text-align: inherit; font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 0 0 12px; }
.ps-eyebrow {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface-2, #f3f4f6); color: var(--text-muted);
}
.ps--problem .ps-eyebrow { background: #fde8ec; color: #b3213f; }
.ps--solution .ps-eyebrow { background: #e3f6ec; color: #197a4f; }
[data-theme="dark"] .ps--problem .ps-eyebrow { background: rgba(217, 69, 95, .18); color: #f1a1b1; }
[data-theme="dark"] .ps--solution .ps-eyebrow { background: rgba(31, 157, 106, .18); color: #8fe0b8; }
.ps-copy .content { font-size: 1.05rem; color: var(--text-muted); overflow-wrap: break-word; }
.ps-copy .content p { margin-bottom: 14px; }
.ps-copy .content ul, .ps-copy .content ol { padding-inline-start: 1.25rem; margin-bottom: 14px; }
.ps-copy .content li { margin-bottom: 6px; }
.ps-copy .content strong { color: var(--text); }
.ps-copy .content a { color: #2a5cff; text-decoration: underline; }

.feature-faq h2 { margin-bottom: 24px; }
.feature-close { text-align: center; padding-block: 24px 80px; }
.feature-close h2 { margin-bottom: 20px; }

@media (max-width: 1023px) {
  .art-hero .hero-art img { max-width: 360px; }
  .ps { gap: 32px; }
}
@media (max-width: 767px) {
  .ps { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 24px; text-align: start; }
  /* On a phone the picture always sits above its text — the reading
     order is what the DOM says, and a picture after a paragraph reads as
     belonging to the next one. */
  .ps--image-right .ps-art, .ps--image-left .ps-art { order: -1; }
  .ps-art img { max-width: 92vw; }
  .ps--image-top, .ps--text { text-align: start; }
}

/* ── Line art anywhere ────────────────────────────────────────────────
   Black ink on transparency (partials/line_art.html): the dark theme turns
   it into the same drawing in white. Only safe because the art is
   monochrome — a coloured image gets a themed dark file instead. */
[data-theme="dark"] .line-art { filter: invert(1); }

/* A split hero whose page has no picture yet: one centred column, as the
   plain hero was, rather than copy squeezed into half an empty row. */
.hero-split--solo { grid-template-columns: minmax(0, 1fr); text-align: center; }
.hero-split--solo .hero-copy h1,
.hero-split--solo .hero-copy p.lead { margin-inline: auto; }
.hero-split--solo .breadcrumbs ol { justify-content: center; }

.section-more { margin-top: 28px; }
.closing-cta-text { color: var(--text-muted); max-width: 560px; margin: -16px auto 28px; }

/* ── Page cards: /features/, About, /faq/ ─────────────────────────────
   The homepage "why" card's look — soft ground, the drawing whole in its
   own panel — never the photo card's 200px cover crop, which cut these
   drawings in half (the robot lost its head on /features/). */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fgrid--compact { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fcard {
  display: flex; flex-direction: column; min-width: 0;
  background: #fafafa; border: 1px solid #eee; border-radius: 18px;
  color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fcard:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.08); }
.fcard-art {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; padding: 22px 26px 6px;
  /* Without these the panel grows to a tall drawing's own height (a flex
     item's automatic minimum size beats aspect-ratio), and one portrait
     illustration made its whole row of cards taller. */
  min-height: 0; overflow: hidden;
}
.fcard-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.fcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 24px 24px; }
.fcard-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0; color: #111; overflow-wrap: break-word; }
.fcard-text { color: var(--text-muted); font-size: .95rem; line-height: 1.5; margin: 0; }
.fcard-more { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: .92rem; color: var(--accent); }
.fcard-arrow { display: inline-block; transition: transform .18s ease; }
.fcard:hover .fcard-arrow { transform: translateX(4px); }
[dir="rtl"] .fcard-arrow { transform: scaleX(-1); }
[dir="rtl"] .fcard:hover .fcard-arrow { transform: scaleX(-1) translateX(4px); }
/* Compact: a small horizontal tile — the drawing as a thumbnail beside the
   title — so a list of nine or eleven pages reads as a tidy index, three to
   a row, instead of a wall of big cards with a lonely last row. */
.fcard--compact { flex-direction: row; align-items: center; }
.fcard--compact .fcard-art { flex: 0 0 112px; aspect-ratio: 1 / 1; padding: 10px; }
.fcard--compact .fcard-body { padding: 14px 18px 14px 4px; gap: 4px; }
.fcard--compact .fcard-title { font-size: 1rem; }
.fcard--compact .fcard-more { padding-top: 2px; }
[data-theme="dark"] .fcard { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .fcard:hover { background: var(--surface); box-shadow: var(--shadow-md); }
[data-theme="dark"] .fcard-title { color: var(--text); }

/* ── Homepage "Why join": every feature landing, as a link ─────────────
   The /features/ card at a smaller scale: the drawing whole in a short
   panel, the landing's short menu name and its one line, and its column
   of the header menu (Build / Apply / Share) as a quiet grey label. Three
   to a row, so the nine landings make a tidy 3×3; on a phone each one
   turns into the compact tile — thumbnail left, words right. */
.why-grid {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.why-grid > li { display: flex; min-width: 0; }
.why-card { flex: 1; }
.why-card .fcard-art { aspect-ratio: 16 / 9; padding: 20px 24px 2px; }
.why-card .fcard-body { gap: 6px; padding: 12px 22px 20px; }
.why-card .fcard-title { font-size: 1.1rem; }
.why-card .fcard-text { font-size: .93rem; line-height: 1.45; }
.why-group {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.why-all { margin-top: 32px; text-align: center; }
.why-all .btn:hover .fcard-arrow { transform: translateX(4px); }
[dir="rtl"] .why-all .btn:hover .fcard-arrow { transform: scaleX(-1) translateX(4px); }
@media (max-width: 1023px) {
  .why-grid { gap: 16px; }
  .why-card .fcard-art { padding: 16px 16px 2px; }
  .why-card .fcard-body { padding: 10px 16px 16px; }
  .why-card .fcard-title { font-size: 1rem; }
  .why-card .fcard-text { font-size: .88rem; }
}
/* Phone: one column of short tiles. The "Explore" line becomes the arrow
   alone at the tile's far edge (the word stays for screen readers) — nine
   tiles a line shorter each keep the list about a screen and a half. */
@media (max-width: 767px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 560px; margin-inline: auto; }
  .why-card { position: relative; flex-direction: row; align-items: center; }
  .why-card .fcard-art { flex: 0 0 104px; aspect-ratio: 5 / 4; padding-block: 8px; padding-inline: 10px 6px; }
  .why-card .fcard-body { gap: 2px; padding-block: 12px; padding-inline: 6px 40px; }
  .why-card .fcard-title { font-size: .98rem; }
  .why-card .fcard-text { font-size: .86rem; line-height: 1.4; }
  .why-card .fcard-more {
    position: absolute; inset-inline-end: 16px; top: 50%; translate: 0 -50%;
    margin: 0; padding: 0; font-size: 0; line-height: 1;
  }
  .why-card .fcard-more .fcard-arrow { font-size: 1.1rem; }
  .why-group { font-size: .64rem; }
  .why-all { margin-top: 24px; }
}

/* A post card with line art: the drawing whole, on the card's own ground,
   the same height the cover photos get so a mixed row stays level. */
.card-art {
  display: flex; align-items: center; justify-content: center;
  height: 200px; padding: 18px 22px 4px; background: #fafafa;
  border-bottom: 1px solid #f1f1f4; overflow: hidden;
}
.card .card-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
[data-theme="dark"] .card-art { background: var(--surface-2); border-bottom-color: var(--border); }

/* ── Blog post, illustrated layout ────────────────────────────────────── */
.post-head .hero-copy h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.post-meta { color: var(--text-muted); font-size: .92rem; margin-top: -8px; }
.post-toc-wrap { margin-top: 8px; }
.post-toc {
  max-width: 980px; margin: 0 auto; padding: 22px 28px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px;
}
.post-toc-title { font-weight: 700; margin-bottom: 10px; }
/* Columns, not a grid: a numbered list must read DOWN each column
   (01 02 03 | 04 05 06), not across (01 02 | 03 04). */
.post-toc-list {
  list-style: none; margin: 0; padding: 0; counter-reset: toc;
  columns: 2; column-gap: 32px;
}
.post-toc-list li { counter-increment: toc; min-width: 0; break-inside: avoid; }
.post-toc-list a {
  display: flex; gap: 12px; align-items: baseline; padding: 7px 0;
  color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere;
}
.post-toc-list a::before {
  content: counter(toc, decimal-leading-zero); flex: none;
  font-weight: 700; font-size: .85rem; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.post-toc-list a:hover { color: var(--text); }
.post-intro { padding-top: 40px; padding-bottom: 8px; }
.post-intro .content > p:first-child { font-size: 1.15rem; color: var(--text); }
/* Contents-list jumps land clear of the fixed bar. */
.ps, .feature-faq, .faq-section { scroll-margin-top: calc(var(--topnav-h, 78px) + 16px); }

/* ── /faq/: topic chips, answers, and where the page-specific ones live ─ */
.faq-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: -16px; }
.faq-jump .chip {
  padding: 8px 18px; border-radius: 999px; font-size: .9rem; color: inherit;
  border: 1px solid var(--border); text-decoration: none;
  transition: background .15s ease;
}
.faq-jump .chip:hover { background: rgba(127,127,127,.12); }
.faq-section-title { font-size: 1.5rem; margin-bottom: 16px; }
.faq-elsewhere .fgrid { margin-top: 8px; }

/* ── Contact: the form and the ways around it, side by side ────────────── */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 28px; align-items: start; padding-block: 8px 72px;
}
.contact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.contact-card h2 { font-size: 1.2rem; margin-bottom: 16px; }
.contact-side { display: grid; gap: 20px; }
.contact-card.contact-company { margin-top: 0; padding-top: 28px; border-top-color: var(--border); }
.contact-help p { color: var(--text-muted); }
.contact-links { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.contact-links a { color: #2a5cff; text-decoration: underline; }
[data-theme="dark"] .contact-links a { color: #8fb0ff; }
/* The blocks' and FAQ answers' links take the article's dark-theme blue:
   the light theme's #2a5cff is too dim on the dark ground. */
[data-theme="dark"] .ps-copy .content a,
[data-theme="dark"] .faq-item .answer a { color: #6ea4ff; }

@media (max-width: 1023px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fgrid--compact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fcard--compact .fcard-art { flex-basis: 88px; padding: 8px; }
  .fcard--compact .fcard-title { font-size: .95rem; }
  .fcard--compact .fcard-more { font-size: .85rem; }
  .post-toc { padding: 18px 20px; }
  .post-toc-list { columns: 1; }
  .contact-card { padding: 22px 18px; }
  .faq-jump { margin-top: 0; }
}
@media (max-width: 767px) {
  /* Source order: the phone size for these titles must come after the
     base rule above, or the base rule wins on a phone. */
  .faq-section-title { font-size: 1.1rem; margin-bottom: 8px; }
  .post-intro { padding-top: 28px; }
}

.faq-still { text-align: center; padding-bottom: 24px; }

/* A split hero's copy is left-aligned, so its trail is too; the centred
   (tablet/phone and solo) heroes keep the centred trail. */
.hero-split .hero-copy .breadcrumbs ol { justify-content: flex-start; }
.hero-split--solo .hero-copy .breadcrumbs ol { justify-content: center; }
@media (max-width: 1023px) {
  .hero-split .hero-copy .breadcrumbs ol { justify-content: center; }
}

/* Post cards keep a card's width and sit centred: one related post used to
   stretch across the whole row. */
.grid.post-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; }

/* ── Narrow desktop (1024–1179px): the header's items no longer fit ──────
   At 1024px the wordmark truncated to "Twin …", "About Twin CV" and both
   buttons wrapped onto two lines, and the Turkish labels overflowed up to
   ~1100px. Here: nothing wraps, gaps and buttons tighten, and the logo mark
   stands alone — the truncated wordmark read worse than none. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .topnav { padding-inline: 20px; }
  .brand-name { display: none; }
  .nav-links { gap: 16px; }
  .nav-links > a, .nav-features summary { white-space: nowrap; font-size: .9rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { white-space: nowrap; padding: 9px 14px; font-size: .86rem; }
}

/* ── Homepage hook: problem → mistake → solution (2026-09-27) ──────────
   Right after the hero. The question as a centred headline in the site's
   orange, then three rows: text beside its drawing across the full width,
   alternating sides. Each row title opens with a round icon — red ✕
   problem, amber ! mistake, green ✓ solution (white glyph on a solid disc,
   never colour on a tint); the word itself is there for screen readers.
   Phones stack every row text first, then the drawing, centred. */
.hook { padding-block: 16px 8px; }
.hook-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; gap: 64px; padding-block: 56px;
}
.hook-row--flip .hook-art { order: -1; }
.hook-copy { min-width: 0; }
/* The site's orange for text (#e8641c, like the eyebrows): the button
   orange is too light to read as a headline on white. */
.hook-headline {
  text-align: center; color: #e8641c;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; max-width: 1100px; margin: 40px auto 0; text-wrap: balance;
}
.hook-headline + .hook-row { padding-top: 36px; }
.hook-title {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance;
}
.hook-icon {
  flex: none; width: 46px; height: 46px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1; letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(17, 20, 40, .14);
}
.hook-icon--problem { background: #e11d48; }
.hook-icon--mistake { background: #b45309; }
.hook-icon--solution { background: #15803d; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hook-lead { font-size: 1.15rem; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 560px; }
.hook-art { min-width: 0; }
.hook-art img { display: block; width: 100%; height: auto; max-width: 600px; margin-inline: auto; }

/* The solution's drawing is the public twin page: a link to the real page
   that site.js opens live in the preview dialog. */
.showcase {
  position: relative; display: block; border-radius: 16px; color: inherit; text-decoration: none;
  transition: transform .2s ease;
}
.showcase:hover { transform: translateY(-3px); }
.showcase:focus-visible { outline: 3px solid #f7803c; outline-offset: 6px; }
.showcase .mockup-live { bottom: 6px; }
.showcase:hover .mockup-live { transform: translate(-50%, -2px); box-shadow: 0 10px 24px rgba(17, 20, 40, .16); }

.hook-points {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.hook-points li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: .93rem; font-weight: 600; color: var(--text);
}
.hook-points li::before { content: '✓'; color: #15803d; font-weight: 800; }
[data-theme="dark"] .hook-points li::before { color: #4fc088; }
[data-theme="dark"] .hook-headline { color: #ffa36b; }

/* Start now: each step ends on an action — the next step, and on the last
   one the product itself. */
.tabs-wrap { scroll-margin-top: calc(var(--topnav-h, 78px) + 12px); }
.tab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.tabs-panel .tab-start { padding: 14px 30px; font-size: 1.02rem; }
.tab-start-note { font-size: .88rem; color: var(--text-muted); }
.tabs-panel .tab-next { padding: 10px 20px; }

@media (max-width: 1023px) {
  .hook-row { gap: 36px; padding-block: 44px; }
}
@media (max-width: 767px) {
  /* Phone: every row stacks text first, then its drawing, centred — the
     hook alternates text and drawing down the page. */
  .hook-row { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 32px 12px; text-align: center; }
  .hook-row--flip .hook-art { order: 1; }
  .hook-headline { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin-top: 32px; }
  .hook-headline + .hook-row { padding-top: 20px; }
  /* Centred on a phone: the icon runs inline before the first word, so a
     wrapped title stays centred under it. */
  .hook-title { display: block; font-size: clamp(1.5rem, 6.8vw, 1.95rem); margin: 0 auto 12px; }
  .hook-icon { width: 34px; height: 34px; font-size: 1rem; margin: 0 10px 0 0; vertical-align: -5px; }
  .hook-lead { font-size: 1rem; margin-inline: auto; }
  .hook-points { justify-content: center; gap: 8px; margin-top: 18px; }
  .hook-points li { font-size: .86rem; padding: 7px 12px; }
  /* Under the drawing, not on it: at phone size the chip covered the
     drawn page's chat box. */
  .showcase .mockup-live {
    position: static; transform: none; display: flex; width: max-content;
    margin: 12px auto 0; padding: 7px 12px; font-size: .78rem;
  }
  .showcase:hover .mockup-live { transform: none; }
  .tab-actions { margin-top: 16px; }
  .tabs-panel .tab-start { width: 100%; justify-content: center; }
  .tab-start-note { width: 100%; text-align: center; }
}

/* ── FAQ block: every FAQ on the site (2026-09-27) ─────────────────────
   partials/faq_block.html. A soft panel: heading and drawing on one side,
   kept in view (sticky) while the questions scroll on the other; each
   question a card whose round + turns into × as it opens. The + is the
   text orange on a neutral grey disc — never orange on orange. Phones drop
   the panel and the drawing: heading, questions, button. */
.faq-block { padding-block: 64px; }
.faq-block-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 28px;
  padding: 56px;
}
/* Stretches to the row (grid default), so the sticky inner has a track. */
.faq-block-side, .faq-block-list { min-width: 0; }
.faq-block-stick { position: sticky; top: calc(var(--topnav-h, 78px) + 28px); }
.faq-block .section-eyebrow { text-align: start; }
.faq-block-title {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -.01em; margin: 6px 0 28px; color: var(--text); text-wrap: balance;
}
.faq-block-art { display: block; width: 100%; max-width: 420px; height: auto; }
.faq-group-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 28px 0 12px; }
.faq-block-list > .faq-group-title:first-child,
.faq-block-list > .faq-section:first-child .faq-group-title { margin-top: 0; }
.faq-block .faq-section { margin-bottom: 0; }
.faq-block .faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 0 20px; margin-bottom: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-block .faq-item:hover { border-color: #f6c7a8; }
.faq-block .faq-item[open] { border-color: #f3b48b; box-shadow: 0 10px 28px rgba(17, 20, 40, .07); }
.faq-block .faq-item summary { padding: 17px 0; font-weight: 600; font-size: 1.02rem; color: var(--text); }
.faq-block .faq-item summary::after {
  content: '+'; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: #e8641c;
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  transition: transform .2s ease;
}
.faq-block .faq-item[open] summary::after { transform: rotate(45deg); }
.faq-block .faq-item .answer { padding: 0 0 18px; color: var(--text-muted); }
.faq-block-more { margin: 26px 0 0; }
.faq-block-more .btn { gap: 8px; }
[data-theme="dark"] .faq-block-panel { background: var(--surface); }
[data-theme="dark"] .faq-block .faq-item { background: var(--surface-2); }
[data-theme="dark"] .faq-block .faq-item:hover,
[data-theme="dark"] .faq-block .faq-item[open] { border-color: #7a4a2c; }
[data-theme="dark"] .faq-block .faq-item summary::after { color: #ffa36b; }

/* /faq/: the topics ride under the drawing; the chips are for small screens. */
.faq-topics { margin-top: 28px; }
.faq-topics-title { font-weight: 700; font-size: .95rem; margin-bottom: 8px; color: var(--text); }
.faq-topics-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-topics-list a {
  display: block; padding: 7px 12px; border-radius: 10px;
  color: var(--text-muted); font-size: .95rem; line-height: 1.35;
}
.faq-topics-list a:hover { color: var(--text); background: var(--surface-3); }
.faq-hub { padding-top: 24px; }
.faq-hub .faq-section { scroll-margin-top: calc(var(--topnav-h, 78px) + 20px); }
.faq-hub .faq-section + .faq-section { margin-top: 36px; }
.faq-hub .faq-group-title { font-size: 1.3rem; margin-bottom: 14px; }
@media (min-width: 1024px) { .faq-jump { display: none; } }

@media (max-width: 1023px) {
  .faq-block-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 32px; padding: 40px 32px; }
  .faq-topics { display: none; }
}
@media (max-width: 767px) {
  /* Phone: the plain stack it always had, the questions as cards. */
  .faq-block { padding-block: 40px; }
  .faq-block-panel {
    grid-template-columns: minmax(0, 1fr); gap: 18px;
    background: none; border: 0; border-radius: 0; padding: 0;
  }
  [data-theme="dark"] .faq-block-panel { background: none; }
  .faq-block-stick { position: static; }
  .faq-block .section-eyebrow { text-align: center; }
  .faq-block-title { text-align: center; font-size: clamp(1.5rem, 6vw, 1.9rem); margin: 4px 0 0; }
  .faq-block-art { display: none; }
  .faq-hub { padding-top: 8px; }
  .faq-hub .faq-group-title { font-size: 1.1rem; }
  .faq-group-title { font-size: 1rem; margin: 22px 0 10px; }
  .faq-block .faq-item { padding: 0 16px; border-radius: 14px; margin-bottom: 8px; }
  .faq-block .faq-item summary { font-size: .95rem; padding: 14px 0; }
  .faq-block .faq-item summary::after { width: 26px; height: 26px; font-size: 1.15rem; }
  .faq-block .faq-item .answer { font-size: .9rem; padding-bottom: 14px; }
  .faq-block-more { text-align: center; }
}

/* ── Illustrated post: the story beside a sticky map (2026-09-27) ──────
   The rail is the classic layout's (.article-aside: map + Quick CV card),
   numbered like the box it replaces on a desktop; the box stays for
   phones and tablets, which have no room for a rail. */
.toc-list--numbered { counter-reset: toc; }
.toc-list--numbered li { counter-increment: toc; }
.toc-list--numbered a { display: flex; gap: 10px; align-items: baseline; }
.toc-list--numbered a::before {
  content: counter(toc, decimal-leading-zero); flex: none;
  font-weight: 700; font-size: .78rem; color: #e8641c; font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .toc-list--numbered a::before { color: #ffa36b; }
@media (min-width: 1024px) {
  .post-toc-wrap { display: none; }
  .post-layout--rail {
    display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 48px;
  }
  .post-layout--rail .post-intro { max-width: none; padding-inline: 0; }
  .post-layout--rail .ps { gap: 40px; padding-block: 32px; }
  .post-layout--rail .ps-copy h2 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); }
}
/* Inside the layout's container: its own side padding would inset the
   intro twice (phones kept the 16px they always had). */
.post-layout .post-intro { padding-inline: 0; }