/* ConsulSales — site styles
   Fonts: Playfair Display (headlines, big numbers) + Lato (everything else). Palette below.
   Structure modelled on HubSpot's marketing site: utility bar, mega-menu,
   alternating light / tinted / dark sections, cards on a 12-col grid. */

:root {
  /* Palette, used 60-30-10:
       60% white #FFFFFF and Gainsboro #DCDEDD greys — backgrounds, cards, borders
       30% Black Steel #081116 — headings, text, dark sections, announcement bar
       10% Psychedelic Blue #0049FF — buttons, links, highlights; Spring Blue #508FFF as the lighter second blue
     Steps: 1–2 backgrounds · 3–5 component fills · 6–8 borders · 9–10 solid · 11–12 text. */
  --gray-1: #fbfbfb;  --gray-2: #f4f5f5;  --gray-3: #ecedec;  --gray-4: #e4e6e5;
  --gray-5: #dcdedd;  --gray-6: #d2d5d4;  --gray-7: #c3c7c6;  --gray-8: #a9aeae;
  --gray-9: #858b8c;  --gray-10: #767c7e; --gray-11: #4c5559; --gray-12: #081116;
  --brand-1: #fafcff; --brand-2: #f3f7ff; --brand-3: #e6efff; --brand-4: #d4e3ff;
  --brand-5: #bfd5ff; --brand-6: #a3c2ff; --brand-7: #7eaaff; --brand-8: #508fff;
  --brand-9: #0049ff; --brand-10: #003fe0; --brand-11: #0040e0; --brand-12: #00227a;
  /* second accent (Spring Blue), used where a softer highlight is needed */
  --lime: #508fff;    --lime-tint: #e6efff; --lime-line: #a3c2ff; --lime-text: #0040e0;

  /* Site roles, mapped to palette steps */
  --ink: var(--gray-12);           /* body text */
  --ink-strong: var(--gray-12);    /* headings */
  --ink-soft: var(--gray-11);      /* secondary text */
  --muted: var(--gray-8);          /* decorative grey */
  --bg: #FFFFFF;                   /* page background (60%) */
  --bg-alt: var(--gray-2);         /* alternate sections */
  --bg-tint: var(--gray-3);        /* tinted sections, neutral fills */
  --surface: #FFFFFF;              /* cards, panels */
  --line: var(--gray-6);           /* borders */
  --dark: var(--gray-12);          /* dark sections, footer */
  --dark-2: #121c22;               /* raised surface on dark */
  --dark-line: #26323a;            /* borders on dark */
  --on-dark: var(--gray-1);
  --on-dark-soft: #a9b0b3;
  --accent: var(--brand-9);         /* single action accent */
  --accent-hover: var(--brand-10);
  --accent-tint: var(--brand-3);
  --accent-text: var(--brand-11);
  --good: var(--brand-11);
  --warn: #B26A00;
  --bad: #C03A2B;
  --focus: var(--brand-9);
  --announce: var(--gray-12);      /* announcement bar */
  --announce-badge: var(--brand-9);

  --radius-s: 4px;
  --radius-m: 5px;
  --radius-l: 5px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);

  --font: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;  /* headlines, serif titles and big numbers */
  --max: 1200px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-variant-numeric: lining-nums; font-family: var(--font); font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink-strong); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 800; }
h1, h2 { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; line-height: 1.08; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: var(--radius-s); z-index: 100; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Type helpers ---------- */
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .9rem; }
.eyebrow--accent { color: var(--accent-text); }
.lead { font-size: 1.2rem; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
.small { font-size: .875rem; }
.muted { color: var(--ink-soft); }
.text-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--accent-hover); }
.arrow-link { font-weight: 600; text-decoration: none; color: var(--ink-strong); display: inline-flex; gap: .4em; align-items: center; }
.arrow-link::after { content: "→"; transition: transform .15s; }
.arrow-link:hover::after { transform: translateX(3px); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.card > .pill { align-self: flex-start; }
.plan-fit .pill { margin-bottom: 14px; }
.plan-fit h3 { font-size: 1.15rem; }
.plan-fit p { margin: 0; font-size: .95rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit; font-weight: 600; font-size: .95rem; line-height: 1; padding: .9rem 1.4rem; border-radius: var(--radius-s); border: 2px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: transparent; color: var(--ink-strong); border-color: var(--ink-strong); }
.btn--secondary:hover { background: var(--ink-strong); color: var(--bg); }
.btn--dark { background: var(--ink-strong); color: var(--bg); }
.btn--dark:hover { background: #000; }
.btn--ghost-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn--ghost-dark:hover { background: var(--on-dark); color: var(--dark); }
.btn--on-dark { background: var(--on-dark); color: var(--dark); }
.btn--on-dark:hover { background: #fff; }
.btn--large { padding: 1.05rem 1.8rem; font-size: 1rem; }
.btn--small { padding: .6rem 1rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }
.fine-print { font-size: .85rem; color: var(--ink-soft); margin-top: .9rem; }

/* ---------- Utility bar & header ---------- */
.announce-bar { position: relative; background: var(--announce); color: #fff; }
.announce-off .announce-bar { display: none; }
.announce-bar__inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 20px; min-height: 60px; padding-top: 10px; padding-bottom: 10px; padding-right: 64px; padding-left: 64px; text-align: center; }
.announce-bar__text { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.announce-bar__badge { display: inline-block; padding: 3px 9px; border: 1.5px dashed rgba(255,255,255,.75); border-radius: 4px; background: var(--announce-badge); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.announce-bar__badge:hover { border-style: solid; }
.announce-bar__close { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; border-radius: var(--radius-s); color: #fff; cursor: pointer; }
.announce-bar__close:hover { background: rgba(255,255,255,.12); }
@media (max-width: 600px) { .announce-bar__inner { padding-left: 16px; padding-right: 56px; } .announce-bar__text { font-size: .875rem; } .announce-bar__close { right: 8px; } }

.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink-strong); }
.primary-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 20px; }
.primary-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.primary-nav__trigger, .primary-nav__link { font: inherit; font-size: .95rem; font-weight: 500; color: var(--ink-strong); background: none; border: 0; padding: .6rem .8rem; border-radius: var(--radius-s); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.primary-nav__trigger::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.primary-nav__trigger[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.primary-nav__trigger:hover, .primary-nav__link:hover, .primary-nav__trigger[aria-expanded="true"] { background: var(--bg-alt); }
.primary-nav__ctas { display: flex; gap: 10px; }
.primary-nav__ctas .btn { padding: .7rem 1.1rem; font-size: .9rem; }
.has-mega { position: relative; }
/* Dropdown: columns with a small tag heading, plain links, a footer bar */
.mega { position: absolute; left: -12px; top: calc(100% + 10px); z-index: 60; display: none; width: max-content; max-width: 92vw; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 12px 16px -4px rgba(10,13,18,.08), 0 4px 6px -2px rgba(10,13,18,.03); overflow: hidden; }
.has-mega.is-open .mega { display: block; }
.mega__cols { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px; padding: 20px 14px 14px; }
.mega--3 .mega__cols { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
.mega__tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 10px; padding: 2px 8px; border-radius: 5px; background: var(--gray-3); color: var(--gray-11); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; }
.mega__tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__col a { display: block; padding: 8px 10px; border-radius: 5px; font-size: .875rem; line-height: 1.4; color: var(--gray-11); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; }
.mega__col a:hover, .mega__col a:focus-visible { background: var(--gray-3); color: var(--gray-12); }
.mega__foot { margin: 0; padding: 11px 16px; background: var(--gray-2); border-top: 1px solid var(--gray-4); text-align: center; font-size: .8rem; color: var(--gray-11); }
.mega__foot a { color: var(--accent-text); font-weight: 600; text-decoration: none; margin-left: 4px; }
.mega__foot a::after { content: " →"; }
.mega__foot a:hover { text-decoration: underline; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 22px; height: 2px; background: var(--ink-strong); position: relative; margin: 0 auto; transition: transform .2s; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; } .menu-toggle__bars::after { top: 7px; }
.menu-open .menu-toggle__bars { background: transparent; }
.menu-open .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px) {
  .menu-toggle { display: block; }
  .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 104px); height: calc(100dvh - 104px); background: var(--bg); border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 16px var(--gutter) 32px; overflow-y: auto; }
  .menu-open .primary-nav { display: flex; }
  .primary-nav__list { flex-direction: column; }
  .primary-nav__trigger, .primary-nav__link { width: 100%; justify-content: space-between; font-size: 1.05rem; padding: .9rem .4rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .primary-nav__ctas { flex-direction: column; margin-top: 16px; }
  .primary-nav__ctas .btn { width: 100%; padding: 1rem; }
  .mega { position: static; width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .mega__cols, .mega--3 .mega__cols { grid-template-columns: 1fr; gap: 14px; padding: 12px 0 8px; }
  .mega__col a { white-space: normal; padding: 9px 8px; font-size: .95rem; }
  .mega__foot { background: none; border: 0; text-align: left; padding: 4px 8px 12px; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--dark); color: var(--on-dark-soft); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark .eyebrow, .section--dark .lead, .section--dark .muted { color: var(--on-dark-soft); }
.section--dark .card { background: var(--dark-2); border-color: var(--dark-line); color: var(--on-dark-soft); }
.section--dark .card p { color: var(--on-dark-soft); }
.section-head { margin-bottom: 48px; max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .section { padding: 64px 0; } .section-head { margin-bottom: 32px; } }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 72px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero:not(.hero--page) h1 { font-size: clamp(2.4rem, 4.2vw, 3.4rem); }
.hero .lead { margin-bottom: 1.8rem; }
.hero--page { padding: 72px 0 56px; }
.hero--page .hero__grid { grid-template-columns: 1.2fr .8fr; }
/* Client logo strip (home) — muted logos, edges fade out */
.logo-strip { padding: 0 0 56px; }
.logo-strip__title { text-align: center; font-size: .95rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 28px; }
.logo-strip__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.logo-strip__list li { flex: 0 0 auto; display: flex; align-items: center; }
.logo-strip__list img { height: 32px; width: auto; filter: grayscale(1); opacity: .55; }
.logo-strip__placeholder { display: inline-flex; align-items: center; gap: 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--muted); white-space: nowrap; }
.logo-strip__placeholder svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 860px) { .logo-strip__list { justify-content: flex-start; gap: 32px; } }
.hero__proof { display: flex; gap: 14px; align-items: center; margin-top: 28px; font-size: .9rem; color: var(--ink-soft); flex-wrap: wrap; }
.hero__proof strong { color: var(--ink-strong); }
@media (max-width: 900px) { .hero__grid, .hero--page .hero__grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 56px 0 48px; } }

/* Product mock "screenshots" built in HTML */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); overflow: hidden; }
.mock__bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-alt); align-items: center; }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); display: block; }
.mock__bar span { margin-left: 10px; font-size: .78rem; color: var(--ink-soft); font-weight: 500; }
.mock__body { padding: 18px; display: grid; gap: 12px; }
.mock-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); font-size: .85rem; background: var(--bg); }
.mock-row__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-tint); flex: none; display: grid; place-items: center; font-weight: 700; font-size: .75rem; color: var(--ink); }
.mock-row__main { flex: 1; min-width: 0; }
.mock-row__main b { display: block; color: var(--ink-strong); font-weight: 600; }
.mock-row__main span { color: var(--ink-soft); font-size: .78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-stat { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; background: var(--bg); }
.mock-stat b { display: block; font-size: 1.25rem; color: var(--ink-strong); letter-spacing: -0.02em; }
.mock-stat span { font-size: .72rem; color: var(--ink-soft); }
.mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 88px; padding: 6px 4px 0; border-bottom: 1px solid var(--line); }
.mock-bars i { flex: 1; background: var(--muted); border-radius: 4px 4px 0 0; display: block; }
.mock-bars i.on { background: var(--accent); }

/* ---------- Pills, badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 5px; background: var(--bg-tint); color: var(--ink); white-space: nowrap; }
.pill--accent { background: var(--accent-tint); color: var(--accent-text); }
.pill--good { background: var(--lime-tint); color: var(--good); }
.pill--warn { background: #FFF1DC; color: var(--warn); }
.pill--bad { background: #FBE7E4; color: var(--bad); }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px; display: flex; flex-direction: column; }
.card--flat { background: transparent; }
.card--link { text-decoration: none; transition: border-color .15s, transform .15s; }
.card--link:hover { border-color: var(--ink); transform: translateY(-2px); }
.card--edge { border-top: 4px solid var(--accent); }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); }
.card .arrow-link { margin-top: auto; padding-top: 12px; }
.card__icon { width: 44px; height: 44px; border-radius: var(--radius-m); background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.card__icon svg { width: 22px; height: 22px; }
.section--dark .card__icon { background: var(--dark-line); color: var(--on-dark); }
.checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 28px; line-height: 1.5; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230049FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.checklist--muted li { color: var(--ink-soft); }
.section--dark .checklist li::before { background-color: var(--dark-line); }

/* System overview (homepage engines) */
.system { display: grid; gap: 16px; }
.system__top { background: var(--ink-strong); color: var(--on-dark); border-radius: var(--radius-l); padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.system__top b { font-size: 1.1rem; }
.system__top span { color: var(--on-dark-soft); font-size: .9rem; }
.system__engines { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.system__base { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) { .system__engines { grid-template-columns: 1fr; } }

/* Stat band */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { border-top: 2px solid var(--ink-strong); padding-top: 18px; }
.section--dark .stat { border-color: var(--on-dark); }
.stat__num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink-strong); line-height: 1; margin-bottom: 10px; }
.section--dark .stat__num { color: var(--on-dark); }
.stat p { color: var(--ink-soft); margin: 0; font-size: .95rem; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }

/* Split rows (media + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split + .split { margin-top: 96px; }
.split--reverse .split__media { order: -1; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split--reverse .split__media { order: 0; } .split + .split { margin-top: 64px; } }

/* Feature group (stage + named features) */
.stage { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); }
.stage:first-of-type { border-top: 0; padding-top: 0; }
.stage__num { font-size: .85rem; font-weight: 700; color: var(--accent-text); margin-bottom: 10px; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
.feature h4 { margin-bottom: .25em; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* Steps */
@media (max-width: 960px) { .steps, .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps, .steps--4 { grid-template-columns: 1fr; } }

/* Comparison table */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 680px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tbody th a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.compare tbody th a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.compare thead th { font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: var(--bg-alt); }
.compare thead th.is-us { color: var(--accent-text); background: var(--accent-tint); }
.compare td.is-us { background: color-mix(in srgb, var(--accent-tint) 45%, transparent); font-weight: 500; color: var(--ink-strong); }
.compare tbody th { font-weight: 600; color: var(--ink-strong); width: 26%; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .group th { background: var(--bg-alt); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 18px; }
.yes, .no, .part { font-weight: 600; }
.yes { color: var(--good); } .no { color: var(--bad); } .part { color: var(--warn); }

/* Pricing */
.billing-note { display: inline-flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 8px 14px; border-radius: 5px; font-size: .88rem; color: var(--ink-soft); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 32px 28px; display: flex; flex-direction: column; position: relative; }
.plan--featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.plan__badge { position: absolute; top: -13px; left: 28px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; padding: 5px 12px; border-radius: 5px; letter-spacing: .02em; }
.plan__name { font-size: 1.35rem; font-weight: 800; color: var(--ink-strong); margin: 0 0 4px; }
.plan__for { color: var(--ink-soft); font-size: .92rem; min-height: 3em; }
.plan__price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__price b { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-strong); line-height: 1; }
.plan__price span { color: var(--ink-soft); font-size: .92rem; }
.plan__then { font-size: .92rem; color: var(--ink); background: var(--bg-alt); border-radius: var(--radius-m); padding: 10px 12px; margin: 10px 0 22px; }
.plan__then b { color: var(--ink-strong); }
.plan .btn { margin-bottom: 24px; }
.plan__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 12px; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; font-size: 1.05rem; color: var(--ink-strong); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 22px; color: var(--ink-soft); max-width: 720px; }

/* Quote */
.quote { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.45; color: var(--ink-strong); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 20px; }
.quote-by { display: flex; gap: 12px; align-items: center; font-size: .92rem; }
.quote-by__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-tint); display: grid; place-items: center; font-weight: 700; color: var(--ink); }

/* Closing CTA band */
.cta-band { background: var(--accent); color: #fff; border-radius: var(--radius-l); padding: 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin: 0 0 .3em; }
.cta-band p { color: var(--brand-4); margin: 0; }
.cta-band .btn-row { justify-content: flex-end; }
.cta-band .btn--on-dark { color: var(--accent); }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; padding: 36px 28px; } .cta-band .btn-row { justify-content: flex-start; } }

/* Tabs */
.tabs__list { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.tabs__tab { font: inherit; font-weight: 600; font-size: .95rem; background: none; border: 0; padding: 12px 16px; cursor: pointer; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs__tab[aria-selected="true"] { color: var(--ink-strong); border-color: var(--accent); }
.tabs__panel[hidden] { display: none; }

/* Footer */
/* Footer: white, brand + newsletter on top, six link columns, social + credits at the bottom */
.site-footer { background: #fff; color: var(--ink-soft); border-top: 1px solid var(--line); padding: 64px 0 32px; font-size: .92rem; }
.site-footer a:not(.btn) { color: var(--ink-soft); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__top { display: grid; grid-template-columns: 1fr minmax(300px, 410px); gap: 48px; align-items: start; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.site-footer__brand { display: inline-block; margin-bottom: 22px; }
.site-footer__brand img { height: 44px; width: auto; }
.site-footer a.site-footer__brand:hover { text-decoration: none; }
.site-footer__tagline { margin: 0 0 4px; color: var(--ink-strong); font-weight: 600; font-size: 1rem; }
.site-footer__small { margin: 0 0 28px; max-width: 420px; font-size: 1rem; }
.site-footer a.site-footer__status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--gray-1); color: var(--ink-strong); font-size: .85rem; }
.site-footer a.site-footer__status:hover { text-decoration: none; border-color: var(--gray-7); }
.site-footer__status i { width: 7px; height: 7px; border-radius: 50%; background: #508fff; box-shadow: 0 0 0 3px var(--lime-tint); }
.site-footer__news { position: relative; display: grid; gap: 10px; padding: 24px; background: var(--gray-1); border: 1px solid var(--line); border-radius: 5px; }
.site-footer__news-title { margin: 0; color: var(--ink-strong); font-weight: 600; font-size: 1.1rem; }
.site-footer__news-sub { margin: 0 0 8px; font-size: .9rem; }
.site-footer__news-status { margin: 0; font-size: .85rem; color: var(--ink-strong); }
.site-footer__news-status.is-error { color: var(--bad); }
.site-footer__cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px 24px; padding: 48px 0; border-bottom: 1px solid var(--line); }
.site-footer__cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer__heading { color: var(--ink-strong); font-weight: 600; margin: 0 0 16px; }
.site-footer__tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--brand-3); color: var(--brand-11); font-size: .72rem; font-weight: 600; line-height: 1.6; vertical-align: 1px; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; font-size: .85rem; }
.site-footer__social { display: flex; align-items: center; gap: 16px; }
.site-footer a.site-footer__icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-strong); }
.site-footer a.site-footer__icon:hover { background: var(--gray-2); text-decoration: none; }
.site-footer__icon svg { width: 16px; height: 16px; }
.site-footer__meta { margin: 0; }
@media (max-width: 1020px) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .site-footer__top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } }

.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); z-index: 40; transform: translateY(110%); transition: transform .2s; }
  .sticky-cta.is-visible { transform: none; }
  body { padding-bottom: 72px; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: .9rem; color: var(--ink-strong); }
.field .hint { font-size: .82rem; color: var(--ink-soft); }
.input, .select, .textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink-strong); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: .75rem .9rem; transition: border-color .15s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.textarea--tall { min-height: 220px; }
.segmented { display: flex; gap: 8px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.segmented label { flex: 1; min-width: 160px; border: 1.5px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; cursor: pointer; background: var(--surface); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.segmented b { display: block; color: var(--ink-strong); }
.segmented span { font-size: .85rem; color: var(--ink-soft); font-weight: 400; }
.form-status { padding: 14px 16px; border-radius: var(--radius-m); font-size: .95rem; }
.form-status[hidden] { display: none; }
.form-status--ok { background: var(--lime-tint); color: var(--lime-text); }
.form-status--err { background: #FBE7E4; color: #8A2418; }
.consent { font-size: .82rem; color: var(--ink-soft); }

/* ---------- Free tools ---------- */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 960px) { .tool { grid-template-columns: minmax(0, 1fr); } }
.tool__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px; }
.tool__panel--sticky { position: sticky; top: 92px; }
@media (max-width: 960px) { .tool__panel--sticky { position: static; } }
.tool__result-empty { color: var(--ink-soft); text-align: center; padding: 40px 12px; }
.score { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.score__ring { --p: 0; --c: var(--accent); width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--bg-tint) 0); display: grid; place-items: center; flex: none; }
.score__ring::before { content: attr(data-score); width: 88px; height: 88px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: var(--ink-strong); letter-spacing: -0.03em; }
.score__label { font-size: 1.2rem; font-weight: 700; color: var(--ink-strong); margin: 0 0 4px; }
.score__sub { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); font-size: .92rem; line-height: 1.5; }
.check b { color: var(--ink-strong); display: block; }
.check span { color: var(--ink-soft); }
.check__dot { width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; }
.check--pass .check__dot { background: var(--good); }
.check--warn .check__dot { background: #E2A13A; }
.check--fail .check__dot { background: var(--bad); }
.meter { height: 8px; background: var(--bg-tint); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.meters { display: grid; gap: 14px; margin-bottom: 24px; }
.meters__row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 12px; align-items: center; font-size: .88rem; }
.meters__row b { text-align: right; color: var(--ink-strong); }
.counter { font-size: .8rem; color: var(--ink-soft); text-align: right; }
.result-cta { margin-top: 24px; padding: 18px; border-radius: var(--radius-m); background: var(--bg-alt); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.result-cta p { margin: 0; font-weight: 600; color: var(--ink-strong); font-size: .95rem; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; }
.kpi b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-strong); line-height: 1.1; }
.kpi span { font-size: .82rem; color: var(--ink-soft); }
.kpi--accent { background: var(--accent); border-color: var(--accent); }
.kpi--accent b, .kpi--accent span { color: #fff; }
.range-field { display: grid; gap: 6px; }
.range-field__top { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--ink-strong); }
.range-field__top output { color: var(--accent-text); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.li-preview { border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; padding: 16px; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; color: #191919; font-size: 14px; line-height: 1.45; }
.li-preview__head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.li-preview__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-tint); }
.li-preview__name { font-weight: 600; font-size: 14px; }
.li-preview__meta { font-size: 12px; color: #666; }
.li-preview__text { white-space: pre-wrap; word-wrap: break-word; }
.li-preview__more { color: #666; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar button { font: inherit; font-size: .85rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); padding: 6px 10px; border-radius: var(--radius-s); cursor: pointer; color: var(--ink-strong); }
.toolbar button:hover { border-color: var(--ink); }
.doc-output { white-space: pre-wrap; font-size: .92rem; line-height: 1.6; background: var(--bg-alt); border-radius: var(--radius-m); padding: 18px; max-height: 560px; overflow: auto; }
.notice { font-size: .85rem; background: var(--bg-alt); border-radius: var(--radius-m); padding: 12px 14px; color: var(--ink-soft); }

/* Prose pages (legal) */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink); }

/* Misc */
.divider { height: 1px; background: var(--line); margin: 48px 0; border: 0; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-l { margin-top: 48px; } .mt-m { margin-top: 24px; }
.empty-state { border: 1.5px dashed var(--muted); border-radius: var(--radius-l); padding: 48px 28px; text-align: center; color: var(--ink-soft); }

@media (max-width: 1020px) { .menu-open { overflow: hidden; } .menu-open .site-header { background: var(--bg); } }
.tool h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }

/* ---------- Untitled UI look ----------
   Component styles borrowed from Untitled UI React (github.com/untitleduico/react):
   rounded-lg controls with skeuomorphic shadows, 1px inset rings, 2px brand focus,
   pill badges, rounded-xl cards. Colours come from the Radix palette above.
   Delete this block to revert to the base styles. */
:root {
  --radius-s: 4px;    /* buttons, inputs (site max radius is 5px) */
  --radius-m: 5px;
  --radius-l: 5px;    /* cards, panels */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03), 0 2px 2px -1px rgba(0,0,0,.04); /* shadow-lg */
  --shadow-skeuo: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 -2px 0 0 rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05);
  --control-ring: var(--gray-7);   /* ring-primary on buttons and inputs */
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button: md 40px · lg 44px · sm 36px, semibold */
.btn { position: relative; font-weight: 600; font-size: .875rem; line-height: 1.25rem; padding: 10px 14px; border: 0; border-radius: var(--radius-s);  }
.btn--large { padding: 10px 16px; font-size: 1rem; line-height: 1.5rem; }
.btn--small { padding: 8px 12px; font-size: .875rem; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-skeuo); }
.btn--primary::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); pointer-events: none; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface); color: var(--gray-11); box-shadow: inset 0 0 0 1px var(--control-ring), inset 0 -2px 0 0 rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05); }
.btn--secondary:hover { background: var(--gray-2); color: var(--gray-12); }
.btn--dark { background: var(--gray-12); color: #fff; box-shadow: var(--shadow-skeuo); }
.btn--dark:hover { background: #000; }
.btn--on-dark { background: #fff; color: var(--gray-12); box-shadow: var(--shadow-skeuo); }
.btn--on-dark:hover { background: var(--gray-2); }
.btn--ghost-dark { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); color: var(--on-dark); }

/* Card: rounded-xl, 1px border, shadow-xs */
.card, .steps li, .plan, .table-wrap, .mock { border-radius: var(--radius-l); box-shadow: var(--shadow-xs); }
.card { padding: 24px; }
.card--flat { box-shadow: none; }
.card--link:hover { border-color: var(--gray-7); box-shadow: var(--shadow); transform: translateY(-2px); }
.mock-row, .mock-stat, .kpi { border-radius: var(--radius-s); }

/* Badge: pill-color, md — rounded-full, 1px inset ring, 50 / 200 / 700 */
.pill { border-radius: 5px; padding: 2px 10px; font-size: .8125rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0; text-transform: none; background: var(--gray-2); color: var(--gray-11); box-shadow: inset 0 0 0 1px var(--gray-6); }
.pill--accent { background: var(--brand-2); color: var(--brand-11); box-shadow: inset 0 0 0 1px var(--brand-6); }
.pill--good { background: var(--lime-tint); color: var(--lime-text); box-shadow: inset 0 0 0 1px var(--lime-line); }
.pill--warn { background: #FFFAEB; color: #B54708; box-shadow: inset 0 0 0 1px #FEDF89; }
.pill--bad { background: #FEF3F2; color: #B42318; box-shadow: inset 0 0 0 1px #FECDCA; }

/* Input: md — rounded-lg, 1px ring, shadow-xs, focus ring-2 brand */
.input, .select, .textarea { font-size: 1rem; line-height: 1.5rem; padding: 10px 14px; border: 0; border-radius: var(--radius-s); background: var(--surface); box-shadow: inset 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .1s linear; }
.input, .select { height: 44px; }
.input::placeholder, .textarea::placeholder { color: var(--gray-9); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 1px 2px rgba(0,0,0,.05); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #FDA29B, 0 1px 2px rgba(0,0,0,.05); }
.field label, .field legend { font-weight: 500; font-size: .875rem; color: var(--gray-11); }
.segmented label { border-width: 1px; border-color: var(--control-ring); box-shadow: var(--shadow-xs); border-radius: var(--radius-l); }
.segmented label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--brand-2); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Big numbers use the display serif, like the headlines */
.stat__num, .plan__price b, .kpi b, .mock-stat b, .score__ring::before { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }

/* Illustrations (Streamline "Brooklyn" set). Files live in assets/img/illustrations/. */
.art { margin: 0; display: flex; justify-content: center; }
.art img { display: block; width: 100%; max-width: 320px; height: auto; }
.art--center { margin: 0 auto 20px; }
.art--center img { max-width: 220px; }
.art--hero img { max-width: 400px; }
.section-head:not(.center):has(> .art) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 56px; align-items: center; }
.section-head:not(.center):has(> .art) > :not(.art) { grid-column: 1; max-width: 720px; }
.section-head:not(.center) > .art { grid-column: 2; grid-row: 1 / span 4; }
.section-head.center > .art { margin-bottom: 16px; }
.section-head.center > .art img { max-width: 220px; margin: 0 auto; }
@media (max-width: 760px) {
  .section-head:not(.center):has(> .art) { grid-template-columns: 1fr; }
  .section-head:not(.center) > .art { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 16px; }
  .section-head:not(.center) > .art img { max-width: 220px; }
}
/* Missing file: placeholder with the file name on localhost, hidden elsewhere */
.art.is-missing img { display: none; }
.art.is-missing::before { content: "Illustration: " attr(data-name) ".png"; display: grid; place-items: center; width: 100%; max-width: 320px; aspect-ratio: 1; padding: 16px; border: 1.5px dashed var(--gray-7); border-radius: var(--radius-l); color: var(--ink-soft); font-size: .8rem; text-align: center; background: var(--gray-2); }
.art--center.is-missing::before { max-width: 220px; }
.art.is-missing.is-hidden { display: none; }
.art--start { justify-content: flex-start; } .art--start img { max-width: 260px; }

/* ---------- Untitled UI inputs: label · input group · addons · select · tooltip · hint ---------- */
.field__label { display: flex; align-items: center; gap: 2px; font-weight: 500; font-size: .875rem; color: var(--gray-11); }
.req { color: var(--accent-text); }
.field .hint { font-size: .875rem; line-height: 1.25rem; color: var(--gray-11); margin: 0; }
.field.is-invalid .hint, .uselect.is-invalid + .hint { color: #D92D20; }

/* Group: one rounded box, 1px ring, focus ring-2 brand */
.input-group { position: relative; display: flex; align-items: stretch; width: 100%; background: var(--surface); border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .1s linear; }
.input-group:focus-within { box-shadow: inset 0 0 0 2px var(--accent), 0 1px 2px rgba(0,0,0,.05); }
.input-group.is-invalid, .input-group:has(.input-group__input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px #FDA29B, 0 1px 2px rgba(0,0,0,.05); }
.input-group__input { flex: 1; min-width: 0; height: 44px; font: inherit; font-size: 1rem; line-height: 1.5rem; color: var(--gray-12); background: transparent; border: 0; outline: none; padding: 10px 14px; }
.input-group__input::placeholder { color: var(--gray-9); opacity: 1; }
.input-group__input:focus-visible { outline: none; }
.input-group > :first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; }
.input-group > :last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; }
/* Leading text (InputGroup.Prefix): "https://" in its own segment */
.input-group__text { display: flex; align-items: center; padding: 0 12px 0 14px; color: var(--gray-11); font-size: 1rem; white-space: nowrap; box-shadow: inset -1px 0 0 var(--control-ring); }
/* Inline prefix inside the input ("€") */
.input-group__prefix { display: flex; align-items: center; padding-left: 14px; color: var(--gray-9); font-size: 1rem; }
.input-group__prefix + .input-group__input { padding-left: 6px; }
/* Leading icon (calendar) */
.input-group__icon { display: flex; align-items: center; padding-left: 14px; color: var(--gray-9); }
.input-group__icon svg { width: 20px; height: 20px; }
.input-group__icon + .input-group__input { padding-left: 8px; }
/* Native select addon (country / currency) */
.input-group__select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 1rem; color: var(--gray-12); background: transparent no-repeat; border: 0; outline: none; cursor: pointer; padding: 10px 30px 10px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23898ca2' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 20px; background-position: right 8px center; }
.input-group__select--trailing { box-shadow: inset 1px 0 0 var(--control-ring); }
.input-group__select:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-s); }
/* Help icon + tooltip inside the input (InputBase tooltip) */
.input-tip { position: relative; display: flex; align-items: center; padding: 0 14px 0 4px; background: none; border: 0; color: var(--gray-9); cursor: help; }
.input-tip svg { width: 16px; height: 16px; }
.input-tip:hover, .input-tip:focus-visible { color: var(--gray-11); }
.input-tip:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 5px; }
.input-tip::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; width: max-content; max-width: 240px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--gray-12); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.125rem; text-align: left; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .1s, transform .1s, visibility .1s; pointer-events: none; }
.input-tip:hover::after, .input-tip:focus-visible::after { opacity: 1; visibility: visible; transform: none; }

/* Custom select (Select with supporting text) */
.uselect { position: relative; }
.uselect__native { position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.uselect__trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 10px 14px; font: inherit; font-size: 1rem; line-height: 1.5rem; color: var(--gray-12); text-align: left; background: var(--surface); border: 0; border-radius: var(--radius-s); cursor: pointer; box-shadow: inset 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .1s linear; }
.uselect__trigger:focus-visible, .uselect.is-open .uselect__trigger { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 1px 2px rgba(0,0,0,.05); }
.uselect.is-invalid .uselect__trigger { box-shadow: inset 0 0 0 1px #FDA29B, 0 1px 2px rgba(0,0,0,.05); }
.uselect__value { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uselect__value.is-placeholder { color: var(--gray-9); }
.uselect__sup { color: var(--gray-11); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.uselect__chevron { width: 20px; height: 20px; flex: none; color: var(--gray-9); transition: transform .15s; }
.uselect.is-open .uselect__chevron { transform: rotate(180deg); }
.uselect__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--gray-5); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.uselect__list[hidden] { display: none; }
.uselect__option { display: flex; align-items: baseline; gap: 8px; margin: 1px 6px; padding: 10px 8px 10px 10px; border-radius: 5px; cursor: pointer; color: var(--gray-12); font-weight: 500; font-size: 1rem; line-height: 1.5rem; }
.uselect__option .uselect__sup { font-weight: 400; }
.uselect__option.is-active { background: var(--gray-2); box-shadow: none; }
.uselect__option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.uselect__check { width: 20px; height: 20px; margin-left: auto; align-self: center; color: var(--accent); visibility: hidden; flex: none; }
.uselect__option[aria-selected="true"] .uselect__check { visibility: visible; }
@media (max-width: 560px) { .uselect__trigger .uselect__sup { display: none; } }
.uselect__option[hidden] { display: none; }
.form-row { align-items: start; }

/* ---------- Home hero: 3-minute onboarding form ---------- */
.onboard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 24px; }
.onboard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.onboard__title { margin: 0; font-weight: 600; font-size: 1.125rem; color: var(--gray-12); }
.onboard__sub { margin: 2px 0 0; font-size: .875rem; color: var(--gray-11); }
.onboard__progress { height: 6px; margin: 16px 0 20px; border-radius: 5px; background: var(--gray-3); overflow: hidden; }
.onboard__progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.onboard__form { display: grid; gap: 16px; }
.onboard__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.onboard__step[hidden] { display: none; }
.onboard__q { padding: 0; margin: 0 0 2px; font-weight: 600; font-size: 1rem; color: var(--gray-12); }
.onboard__q:focus { outline: none; }
.onboard__q:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.onboard__q--sub { margin-top: 6px; }
.onboard__step .form-row { gap: 12px; }
.onboard__error { margin: 0; font-size: .875rem; color: #B42318; }
.onboard__error[hidden] { display: none; }
.onboard__nav { display: flex; gap: 12px; }
.onboard__nav [data-onboard-next] { flex: 1; }
.onboard__nav [hidden] { display: none; }
.onboard__result[hidden] { display: none; }
.onboard__result .eyebrow { margin-bottom: 4px; }
.onboard__plan { font-family: var(--font-display); font-size: 2.6rem; line-height: 1.1; color: var(--gray-12); margin: 0; }
.onboard__plan:focus { outline: none; }
.onboard__price { margin: 4px 0 16px; color: var(--gray-11); font-size: .95rem; }
.onboard__result .checklist { margin-bottom: 12px; }
.onboard__result .btn-row { margin-top: 16px; }

/* Choice tiles: radio inputs styled as cards */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
.choices--4 { grid-template-columns: repeat(4, 1fr); }
.choices--stack { grid-template-columns: 1fr; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface); color: var(--gray-12); font-size: .9rem; font-weight: 500; line-height: 1.3; text-align: center; box-shadow: inset 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .1s linear, background .1s linear; }
.choices--stack .choice span { justify-content: flex-start; text-align: left; font-weight: 400; }
.choices--stack .choice b { font-weight: 600; }
.choice:hover span { background: var(--gray-2); }
.choice input:checked + span { background: var(--brand-2); box-shadow: inset 0 0 0 2px var(--accent); color: var(--brand-12); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) { .choices--4 { grid-template-columns: 1fr 1fr; } .choices--3 { grid-template-columns: 1fr; } .onboard { padding: 18px; } }

/* ---------- Pre-footer CTA with client logos (every page) ---------- */
.cta-logos { background: var(--bg); border-top: 1px solid var(--gray-5); padding: 80px 0 88px; }
.cta-logos__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.cta-logos h2 { margin: 0 0 16px; max-width: 640px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.cta-logos__lead { margin: 0; font-size: 1.2rem; line-height: 1.6; color: var(--gray-11); max-width: 640px; }
.cta-logos__actions { flex-wrap: nowrap; }
.cta-logos__list { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; max-width: 760px; }
.cta-logos__list img { display: block; height: 32px; width: auto; }
@media (max-width: 720px) {
  .cta-logos { padding: 56px 0 64px; }
  .cta-logos__actions { flex-wrap: wrap; width: 100%; }
  .cta-logos__actions .btn { flex: 1; }
  .cta-logos__list { gap: 20px 28px; }
  .cta-logos__list img { height: 26px; }
}

/* ---------- Billing switch: monthly / annual system fee ---------- */
.billing-toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 32px; padding: 4px; gap: 4px; background: var(--gray-2); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gray-5); }
.billing-toggle__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--gray-11); background: transparent; border: 0; border-radius: 5px; cursor: pointer;  }
.billing-toggle__btn:hover { color: var(--gray-12); }
.billing-toggle__btn[aria-pressed="true"] { background: var(--surface); color: var(--gray-12); box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.billing-toggle__btn .pill { font-size: .75rem; padding: 0 8px; }
[data-billing="monthly"] [data-show-billing="annual"], [data-billing="annual"] [data-show-billing="monthly"] { display: none; }
.plan__then-sub { display: block; margin-top: 2px; font-size: .82rem; color: var(--gray-11); }

/* ---------- Feature stack (home): sticky cards that overlap as you scroll ----------
   site.js sets --scale and --dim on a card while the next one slides over it,
   and --py on [data-parallax] layers so the mocks move slower than the page. */
.fstack { list-style: none; margin: 0; padding: 0 0 24px; display: grid; gap: 48px; }
.fstack__card { position: sticky; top: calc(92px + var(--i, 0) * 18px); display: grid; grid-template-columns: 1fr 1.08fr; gap: 40px; min-height: 480px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 -10px 40px rgba(30,31,43,.07); transform-origin: 50% 0; transform: scale(var(--scale, 1)); scroll-margin-top: 110px; }
.fstack__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gray-12); opacity: var(--dim, 0); pointer-events: none; }
.fstack__text { display: flex; flex-direction: column; justify-content: center; padding: 16px 8px 16px 20px; }
.fstack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fstack__item { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 14px 0; }
.fstack__icon { color: var(--ink-soft); padding-top: 2px; }
.fstack__icon svg { width: 20px; height: 20px; }
.fstack__item > a { color: var(--ink-strong); font-weight: 600; font-size: .95rem; text-decoration: none; }
.fstack__item > a:hover { color: var(--accent-text); }
.fstack__item.is-on .fstack__icon { color: var(--accent); }
.fstack__item h3 { font-size: .95rem; font-weight: 600; letter-spacing: 0; margin: 0 0 .5em; line-height: 1.6; }
.fstack__item p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 .9em; max-width: 440px; }
.fstack__item .arrow-link { font-size: .9rem; color: var(--ink-soft); }
.fstack__item .arrow-link:hover { color: var(--ink-strong); }

/* Blue panel with a faint grid, holding an HTML product mock built from
   Untitled UI-style parts (avatars, badges, featured icons, buttons, progress bars). */
.panel-art { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 440px; padding: 40px 32px; background: radial-gradient(110% 75% at 0% 100%, var(--brand-8) 0%, rgba(80,143,255,0) 62%), radial-gradient(90% 70% at 100% 100%, var(--brand-5) 0%, rgba(191,213,255,0) 62%), linear-gradient(180deg, #fff 0%, var(--brand-2) 100%); box-shadow: inset 0 0 0 1px var(--gray-5); border-radius: var(--radius-l); }
.panel-art::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(11,27,53,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,27,53,.05) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 85%); }
.panel-art::after { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { from { transform: translate(-25%, -20%); } to { transform: translate(25%, 20%); } }
.panel-art__inner { position: relative; width: 100%; max-width: 380px; }
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Untitled UI parts */
.fmock { position: relative; background: #fff; color: var(--gray-12); border-radius: 5px; font-size: .8rem; line-height: 1.5; padding: 16px; margin: 0;
  box-shadow: 0 0 0 1px rgba(10,13,18,.06), 0 12px 16px -4px rgba(10,13,18,.10), 0 24px 48px -16px rgba(11,27,53,.22); }
.fmock__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--gray-4); }
.fmock__who { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.fmock__who b { font-weight: 600; font-size: .82rem; }
.fmock__who span { color: var(--gray-10); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmock__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--gray-4); }
.fmock__bar b { flex: 1; font-weight: 600; font-size: .8rem; }
.ui-avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; }
.ui-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ui-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ui-avatar--sm { width: 24px; height: 24px; }
.ui-avatar__status { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #508fff; box-shadow: 0 0 0 1.5px #fff; z-index: 1; }
.ui-avatars { display: flex; align-items: center; margin: 6px 0; }
.ui-avatars img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff; }
.ui-avatars img + img, .ui-avatars img + span { margin-left: -8px; }
.ui-avatars span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gray-3); color: var(--gray-11); font-size: .62rem; font-weight: 600; box-shadow: 0 0 0 1.5px #fff; }
.ui-avatars--sm img { width: 20px; height: 20px; }
.ui-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--gray-5); background: var(--gray-2); color: var(--gray-11); font: 500 .7rem/1.5 var(--font); font-style: normal; white-space: nowrap; }
.ui-badge > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-badge--brand { border-color: var(--brand-6); background: var(--brand-2); color: var(--brand-11); }
.ui-badge--success { border-color: var(--lime-line); background: var(--lime-tint); color: var(--lime-text); }
.ui-dot-pulse { position: relative; }
.ui-dot-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ping 1.6s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.ui-featured { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-5); color: var(--brand-9); }
.ui-featured svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-featured--lg { width: 40px; height: 40px; border-radius: 5px; }
.ui-featured--lg svg { width: 20px; height: 20px; }
.ui-featured--success { background: var(--lime-tint); box-shadow: inset 0 0 0 1px var(--lime-line); color: var(--lime-text); }
.ui-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 5px; font-weight: 600; font-size: .72rem; line-height: 1.4; }
.ui-btn--primary { background: var(--brand-9); color: #fff; box-shadow: 0 1px 2px rgba(10,13,18,.05), inset 0 0 0 1px rgba(10,13,18,.18), inset 0 -2px 0 rgba(10,13,18,.05); }
.ui-btn--secondary { background: #fff; color: var(--gray-12); box-shadow: 0 1px 2px rgba(10,13,18,.05), inset 0 0 0 1px var(--gray-6), inset 0 -2px 0 rgba(10,13,18,.05); }
.ui-progress { display: block; grid-column: 1 / -1; height: 8px; border-radius: 5px; background: var(--gray-4); overflow: hidden; }
.ui-progress__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--brand-9); transition: width 1.6s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
.ui-progress__fill.is-good { background: #508fff; }
.ui-progress__fill.is-bad { background: #f04438; }
.ui-trend { display: block; font-style: normal; font-size: .66rem; font-weight: 600; color: var(--lime-text); }
.ui-trend--flat { color: var(--gray-10); }

/* DM mock */
.ui-chat { display: grid; gap: 12px; }
.ui-msg { max-width: 88%; }
.ui-msg__meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: .7rem; }
.ui-msg__meta b { font-weight: 600; color: var(--gray-12); }
.ui-msg__meta span { color: var(--gray-10); }
.ui-msg p { margin: 0; padding: 8px 12px; border-radius: 5px; border-top-left-radius: 0; background: var(--gray-2); border: 1px solid var(--gray-5); }
.ui-msg--out { justify-self: end; }
.ui-msg--out p { background: var(--gray-12); border-color: var(--gray-12); color: #fff; border-radius: 5px; border-top-right-radius: 0; }
.fmock--pop { width: 86%; margin: -18px 0 0 auto; }
.fmock__pophead { display: flex; align-items: center; gap: 8px; }
.fmock__pophead b { flex: 1; font-size: .8rem; font-weight: 600; }
.ui-stack { display: grid; }
.ui-stack > * { grid-area: 1 / 1; }
.fmock--pop .ui-stack p { margin: 10px 0 12px; color: var(--gray-11); }
.ui-typing { align-self: start; display: inline-flex; gap: 4px; width: max-content; margin-top: 12px; padding: 8px 12px; border-radius: 5px; border-top-left-radius: 0; background: var(--gray-3); }
.ui-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-9); animation: typing 1s ease-in-out infinite; }
.ui-typing i:nth-child(2) { animation-delay: .15s; } .ui-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.fmock__actions, .fmock__foot { display: flex; align-items: center; gap: 8px; }

/* Content mock */
.fmock--prompt { display: flex; align-items: flex-start; gap: 10px; width: 82%; margin: 0 0 -12px auto; z-index: 1; font-weight: 500; }
.fmock--prompt p { margin: 3px 0 0; }
.fmock__post p { margin: 0 0 6px; color: var(--gray-11); }
.fmock__post p b { color: var(--gray-12); font-weight: 600; }
.fmock__postimg { width: 100%; height: 110px; object-fit: contain; padding: 6px; margin: 8px 0 12px; border-radius: 5px; background: var(--brand-2); border: 1px solid var(--gray-4); }
.ui-skeleton { display: grid; gap: 8px; align-content: start; }
.ui-skeleton i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--gray-3) 25%, var(--gray-5) 50%, var(--gray-3) 75%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.ui-skeleton i.short { width: 60%; }
.ui-skeleton i.img { height: 92px; margin-top: 6px; border-radius: 5px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Spine mock */
.ui-bars { display: grid; gap: 14px; }
.ui-bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; }
.ui-bar span { color: var(--gray-11); display: flex; align-items: center; gap: 6px; }
.ui-bar b { font-weight: 600; }
.fmock__note { margin: 14px 0 0; color: var(--gray-10); font-size: .7rem; }
.fmock__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 94%; margin: -14px auto 0; position: relative; }
.fmock__pair .fmock { padding: 12px; }
.fmock__pair .ui-featured { margin: 6px 0; }
.fmock__label { display: block; color: var(--gray-10); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Agents mock */
.fmock__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fmock__tiles > div { display: grid; gap: 2px; align-content: start; border: 1px solid var(--gray-5); border-radius: 5px; padding: 10px; }
.fmock__tiles .ui-featured { margin-bottom: 6px; }
.fmock__tiles span { color: var(--gray-10); font-size: .72rem; }
.fmock__tiles em { font-style: normal; }
.fmock__tiles .ui-progress { height: 6px; margin-top: 8px; }
.fmock__tiles .ui-avatars { margin: 6px 0 0; }
.fmock__chips { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fmock__chips ul { flex: none; list-style: none; margin: 0; padding: 0 8px 0 0; display: flex; gap: 8px; animation: marquee 22s linear infinite; }
.fmock__chips li { background: #fff; border-radius: 5px; padding: 6px 14px; font-size: .75rem; font-weight: 600; color: var(--gray-12); white-space: nowrap; box-shadow: 0 6px 16px rgba(11,27,53,.14); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Entrance animation: site.js adds .anim (motion allowed) and .is-in when the panel scrolls into view */
.anim .a-step { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .9s cubic-bezier(.22,1,.36,1) var(--d, 0s), transform 1.1s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
.anim.is-in .a-step { opacity: 1; transform: none; }
.anim:not(.is-in) .ui-progress__fill { width: 0; }
.anim .a-typed { opacity: 0; transition: opacity .8s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
.anim.is-in .a-typed { opacity: 1; }
.a-typing, .a-skel { visibility: hidden; }
.anim.is-in .a-typing { animation: show-then-hide 1.5s 1.3s both; }
.anim.is-in .a-skel { animation: show-then-hide 1.3s .6s both; }
@keyframes show-then-hide { 0% { visibility: visible; opacity: 0; } 15%, 85% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } }

/* How it works (home): heading + button, dashboard mock, numbered steps */
.how__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.how__head h2 { margin: 0; max-width: 620px; }
.how__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.panel-art--wide .panel-art__inner { max-width: 540px; }
.fmock--dash { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px; }
.fmock__side { display: grid; align-content: start; gap: 4px; border-right: 1px solid var(--gray-4); padding-right: 10px; }
.fmock__side i { font-style: normal; font-size: .72rem; color: var(--gray-11); padding: 4px 6px; border-radius: 5px; }
.fmock__side i.on { background: var(--gray-3); color: var(--gray-12); font-weight: 600; }
.fmock__logo { width: 22px; height: 22px; margin: 0 0 6px 2px; }
.fmock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.fmock__stats div { border: 1px solid var(--gray-5); border-radius: 5px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(10,13,18,.05); }
.fmock__stats span { display: block; color: var(--gray-10); font-size: .68rem; }
.fmock__stats b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.3; }
.fmock__rows { display: grid; gap: 6px; }
.fmock__rows > div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--gray-4); border-radius: 5px; }
.fmock__rows b { flex: 1; font-weight: 600; font-size: .75rem; }
.how__steps { list-style: none; margin: 0; padding: 0; }
.how__steps li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.how__steps li:first-child { padding-top: 0; }
.how__steps li:last-child { border-bottom: 0; }
.how__steps h3 { font-size: 1.05rem; margin: 2px 0 .35em; }
.how__steps p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.how__num { display: grid; place-items: center; width: 32px; height: 28px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-alt); font-size: .75rem; font-weight: 600; color: var(--ink-soft); }

@media (max-width: 900px) {
  .fstack { gap: 20px; }
  .fstack__card { position: relative; top: auto; grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 14px; transform: none; }
  .fstack__card::after { display: none; }
  .fstack__text { padding: 8px 6px 0; }
  .fstack__item:not(.is-on) { display: none; }
  .panel-art { min-height: 340px; padding: 32px 18px; }
  .how__head { flex-direction: column; align-items: flex-start; }
  .how__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .fmock--dash { grid-template-columns: 1fr; }
  .fmock__side { display: none; }
  }
.panel-art--chips { padding-bottom: 92px; }
.nowrap { white-space: nowrap; }

/* Numbered cards (home free tools): big number, title, text, link */
.num-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.num-card { display: flex; flex-direction: column; padding: 32px 28px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(10,13,18,.05); transition: border-color .2s, box-shadow .2s, transform .2s; }
.num-card:hover { border-color: var(--brand-7); box-shadow: 0 12px 24px -8px rgba(30,31,43,.12); transform: translateY(-3px); }
.num-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.num-card__num { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 400; color: var(--gray-8); letter-spacing: -0.02em; transition: color .2s; }
.num-card:hover .num-card__num { color: var(--accent-text); }
.num-card h3 { font-size: 1.2rem; margin: 18px 0 .4em; }
.num-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 24px; }
.num-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--ink-strong); }
.num-card__link::after { content: "→"; transition: transform .2s; }
.num-card:hover .num-card__link { color: var(--accent-text); }
.num-card:hover .num-card__link::after { transform: translateX(4px); }
@media (max-width: 960px) { .num-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .num-cards { grid-template-columns: 1fr; } .num-card { padding: 24px 22px; } .num-card__num { font-size: 2.4rem; } }

/* Infographic (home, "Both engines run on the same Spine"): white panel, read bottom to top.
   Spine → AI Agents → both engines → one pipeline. Corner radius max 5px. */
.infographic { margin: 0; }
.ig { position: relative; isolation: isolate; overflow: hidden; display: grid; padding: 28px; border-radius: 5px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,13,18,.04), 0 16px 40px -16px rgba(30,31,43,.12); color: var(--gray-12); font-family: var(--font); font-size: .85rem; line-height: 1.45; }
.ig::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--gray-5) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.ig__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.ig__kicker { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-11); }
.ig__badge { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--brand-6); background: var(--brand-2); color: var(--brand-11); font-size: .72rem; font-weight: 500; }
.ig__badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ping-soft 2.4s ease-in-out infinite; }
@keyframes ping-soft { 50% { opacity: .35; } }
.ig__node { position: relative; background: #fff; border: 1px solid var(--gray-5); border-radius: 5px; padding: 16px; box-shadow: 0 1px 2px rgba(10,13,18,.04); }
.ig__row { display: flex; align-items: center; gap: 10px; }
.ig__row b { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.ig__muted { margin-left: auto; color: var(--gray-10); font-size: .72rem; }
.ig__icon { flex: none; display: grid; place-items: center; color: var(--accent); }
.ig__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ig__sub { margin: 8px 0 10px; color: var(--gray-10); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ig__tags, .ig__chips, .ig__grid, .ig__funnel { list-style: none; margin: 0; padding: 0; }
.ig__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ig__tags li, .ig__chips li { padding: 2px 8px; border-radius: 5px; background: var(--gray-2); border: 1px solid var(--gray-5); color: var(--gray-11); font-size: .72rem; }
.ig__engines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ig__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ig__node--spine { border-color: var(--brand-6); background: var(--brand-2); box-shadow: 0 12px 32px -16px rgba(0,73,255,.45); }
.ig__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.ig__grid li { padding: 10px; border-radius: 5px; background: #fff; border: 1px solid var(--brand-5); }
.ig__grid b { display: block; font-size: .8rem; font-weight: 600; }
.ig__grid span { color: var(--gray-10); font-size: .7rem; }
.ig__funnel { display: grid; gap: 8px; margin-top: 14px; }
.ig__funnel li { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; color: var(--gray-11); font-size: .75rem; }
.ig__funnel i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--gray-4); transition: width 1.6s cubic-bezier(.22,1,.36,1) 1.4s; }
.ig__funnel i.on { background: var(--accent); }
.anim:not(.is-in) .ig__funnel i { width: 0; }
/* connectors: two dashed lines that flow upward, slowly */
.ig__links { display: grid; grid-template-columns: 1fr 1fr; height: 30px; }
.ig__links i { justify-self: center; width: 1.5px; height: 100%; background: repeating-linear-gradient(to top, var(--brand-7) 0 5px, transparent 5px 10px); background-size: 1.5px 10px; animation: flow-up 1.6s linear infinite; }
@keyframes flow-up { to { background-position: 0 -10px; } }
@media (max-width: 560px) {
  .ig { padding: 18px; }
  .ig__engines { grid-template-columns: 1fr; }
  .ig__grid { grid-template-columns: 1fr 1fr; }
  .ig__funnel li { grid-template-columns: 1fr; gap: 4px; }
}
.num-card--static:hover { border-color: var(--line); box-shadow: 0 1px 2px rgba(10,13,18,.05); transform: none; }
.num-card--static:hover .num-card__num { color: var(--gray-8); }
.num-card--static p { margin-bottom: 0; }

/* Brand logo (assets/img/brand/) */
.logo img { height: 40px; width: auto; }
@media (max-width: 600px) { .logo img { height: 34px; } }

/* Engine stages: serif titles, a minimal line icon beside each feature title */
.stage h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
.feature--icon { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: baseline; align-content: start; }
.feature--icon > p { grid-column: 2; }
.feature__icon { align-self: start; padding-top: 3px; color: var(--accent); }
.feature__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature--icon h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.005em; }

/* Overline cards (engine "Services in…" and service "Related services"):
   icon + overline on top, a large statement, a small line at the bottom. The whole card is the link. */
.ov-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ov-card { display: flex; flex-direction: column; min-height: 260px; padding: 20px 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.ov-card:hover { border-color: var(--gray-8); box-shadow: 0 12px 24px -12px rgba(8,17,22,.16); }
.ov-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ov-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.ov-card__icon { display: grid; place-items: center; color: var(--ink-strong); transition: color .2s; }
.ov-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ov-card:hover .ov-card__icon { color: var(--accent); }
.ov-card__over { margin: 0; font-family: var(--font); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: right; line-height: 1.4; }
.ov-card__text { margin: 0 0 24px; font-size: 1.2rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-strong); }
.ov-card__foot { margin: auto 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 960px) { .ov-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ov-cards { grid-template-columns: 1fr; } .ov-card { min-height: 0; } }

/* Motion (assets/js/motion.js, GSAP) */
.gsap-pending .hero h1, .gsap-pending .hero .eyebrow, .gsap-pending .hero .breadcrumb, .gsap-pending .hero .lead,
.gsap-pending .hero .fine-print, .gsap-pending .hero__grid > :nth-child(2) { visibility: hidden; }
.is-revealing { transition: none !important; }
.logo-strip__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.logo-strip__list.is-marquee { width: max-content; overflow: visible; justify-content: flex-start; gap: 64px; padding-right: 64px; -webkit-mask-image: none; mask-image: none; }
/* No button animations: buttons change state instantly (no transitions, no motion) */
.btn, button, .ui-btn, .choice span, .segmented label,
.btn *, button *, .btn::before, .btn::after, button::before, button::after, button *::before, button *::after { transition: none !important; animation: none !important; }

/* AI Agents bento (home): white panel, dotted cell borders, faded side labels */
.agents__pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: .85rem; color: var(--ink-strong); }
.agents__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bento { display: grid; grid-template-columns: 120px 1fr 120px; align-items: stretch; }
.bento__side { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); }
.bento__side li { display: grid; place-content: center; justify-items: center; gap: 10px; font-size: .78rem; color: var(--gray-8); border-top: 1px dashed var(--gray-5); }
.bento__side li:first-child { border-top: 0; }
.bento__side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bento__main { border: 1px dashed var(--gray-6); background: #fff; }
.bento__big { display: grid; grid-template-columns: 1fr 1fr; }
.bento__small { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px dashed var(--gray-6); }
.bento__cell { padding: 24px; }
.bento__big .bento__cell + .bento__cell, .bento__small .bento__cell + .bento__cell { border-left: 1px dashed var(--gray-6); }
.bento__cell--big { display: flex; flex-direction: column; min-height: 400px; }
.bento__num { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--ink-strong); }
.bento__text { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.bento__small .bento__num { font-size: 1.3rem; margin-bottom: 18px; }
.bento__small .bento__text { font-size: .88rem; }
.bento__art { position: relative; flex: 1; display: grid; place-items: center; min-height: 170px; margin: 16px 0; }
/* dotted halo behind the icon */
.bento__art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--gray-6) 1px, transparent 1.4px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, transparent 60%); mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, transparent 60%); }
.bento__icon { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 5px; background: linear-gradient(160deg, #fff, var(--gray-3)); border: 1px solid var(--gray-5); box-shadow: 0 14px 30px -14px rgba(8,17,22,.3), inset 0 1px 0 #fff; color: var(--ink-strong); }
.bento__icon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bento__row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; }
.bento__row li { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--gray-5); box-shadow: 0 4px 10px -6px rgba(8,17,22,.25); color: var(--ink-strong); }
.bento__row li.is-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.bento__row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.agents__cta { margin: 32px 0 0; text-align: center; }
@media (max-width: 1100px) { .bento { grid-template-columns: 1fr; } .bento__side { display: none; } }
@media (max-width: 760px) {
  .bento__big { grid-template-columns: 1fr; }
  .bento__big .bento__cell + .bento__cell { border-left: 0; border-top: 1px dashed var(--gray-6); }
  .bento__small { grid-template-columns: 1fr 1fr; }
  .bento__small .bento__cell:nth-child(3) { border-left: 0; }
  .bento__small .bento__cell:nth-child(n+3) { border-top: 1px dashed var(--gray-6); }
  .bento__cell--big { min-height: 0; }
}

/* Comparison tables: open layout, dashed rows, centred values, check / cross icons */
.eyebrow--tag { display: inline-block; padding: 3px 9px; border: 1px dashed var(--gray-7); border-radius: 4px; font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.table-wrap { border: 0; border-radius: 0; background: transparent; }
.compare { font-size: 1rem; }
.compare th, .compare td { padding: 16px 12px; border-bottom: 1px dashed var(--gray-6); vertical-align: middle; }
.compare td, .compare thead th:not(:first-child) { text-align: center; }
.compare thead th { background: none; color: var(--ink-strong); font-size: 1rem; font-weight: 700; border-bottom: 0; padding-top: 8px; padding-bottom: 12px; }
.compare thead th.is-us { background: none; color: var(--accent-text); }
.compare td.is-us { background: none; font-weight: 400; }
.compare tbody th { font-weight: 400; color: var(--ink-strong); width: 34%; padding-left: 0; }
.compare tbody th a { text-decoration: none; }
.compare tbody th a:hover { text-decoration: underline; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 1px dashed var(--gray-6); }
.compare .group th { background: none; padding: 36px 0 12px; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-strong); border-bottom: 0; }
.compare td { color: var(--ink-soft); }
.compare .part, .compare .no:not(.no--icon) { font-weight: 400; color: var(--ink-soft); }
.compare .yes:not(.yes--icon) { font-weight: 600; color: var(--ink-strong); }
.yes--icon, .no--icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.yes--icon { border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14.2 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.no--icon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='%23858b8c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.compare-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 32px; padding: 14px 16px; border: 1px dashed var(--gray-6); border-radius: 5px; background: var(--gray-2); }
.compare-cta p { margin: 0; max-width: 380px; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 640px) { .compare-cta { flex-direction: column; align-items: flex-start; } }
.section--alt .compare-cta { background: #fff; }
.compare thead th:first-child { padding-left: 0; text-align: left; }
.table-wrap { box-shadow: none; }

/* Process steps (every <ol class="steps">): outlined icon, big faded number, zig-zag with curved arrows.
   .steps--4 has four columns; .steps--stack is the narrow single-column version (pricing). */
.section-head--process { text-align: center; margin-left: auto; margin-right: auto; }
.section-head--process .lead { margin-left: auto; margin-right: auto; }
.section-head--process .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.section-head--process .eyebrow::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 3L5 8.6h3L7.3 13 11 7.4H8L9 3z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat; }
.hl { font-style: normal; color: var(--accent); }
.section-head--process h2::after { content: ""; display: block; width: min(300px, 70%); height: 16px; margin: 14px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M6 11C70 5 170 3 292 6' fill='none' stroke='%23081116' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M30 13C110 8 200 8 280 10' fill='none' stroke='%23081116' stroke-width='1.6' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); gap: 36px; }
.steps > li { position: relative; isolation: isolate; counter-increment: step; text-align: center; padding: 0 6px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.steps > li:nth-child(even) { margin-top: 84px; }
.steps > li::before { content: counter(step); position: absolute; z-index: -1; top: -18px; left: calc(50% + 34px); margin: 0; font-family: var(--font-display); font-size: 6.5rem; font-weight: 400; line-height: 1; color: var(--gray-4); }
.steps__icon { display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: 26px; border: 2px solid var(--accent); border-radius: 3px; background: var(--surface); color: var(--accent); }
.steps__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.steps h3 { margin: 0 0 .55em; font-size: 1.2rem; font-weight: 700; }
.steps p { max-width: 310px; margin: 0 auto; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
/* curved arrows between steps: down after a high step, up after a low one */
.steps > li:not(:last-child)::after { content: ""; position: absolute; top: 6px; right: -34%; width: 46%; max-width: 130px; height: 48px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Cpath d='M4 30C26 4 74 0 108 34' fill='none' stroke='%23c3c7c6' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M94 33l14 1 2-14' fill='none' stroke='%23c3c7c6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.steps > li:nth-child(even):not(:last-child)::after { top: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Cpath d='M4 30C30 52 76 40 108 8' fill='none' stroke='%23c3c7c6' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M94 6h14v14' fill='none' stroke='%23c3c7c6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.steps--4 > li:not(:last-child)::after { right: -30%; width: 40%; }
.how__cta { margin: 56px 0 0; text-align: center; }

/* narrow, stacked version: icon left, no zig-zag, no arrows */
.steps--stack { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
.steps--stack > li { display: grid; grid-template-columns: 50px 1fr; column-gap: 18px; text-align: left; padding: 0; }
.steps--stack > li:nth-child(even) { margin-top: 0; }
.steps--stack > li::before { top: -10px; left: auto; right: 0; font-size: 4.5rem; }
.steps--stack > li::after { display: none; }
.steps--stack .steps__icon { grid-row: span 2; margin: 0; }
.steps--stack p { max-width: none; margin: 0; }

@media (max-width: 900px) {
  .steps, .steps--4 { grid-template-columns: 1fr; gap: 48px; }
  .steps > li:nth-child(even) { margin-top: 0; }
  .steps > li::after { display: none; }
}
@media (min-width: 901px) and (max-width: 1100px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } .steps--4 > li::after { display: none; } .steps--4 > li:nth-child(even) { margin-top: 84px; } }

/* "What you get" bento (home): two columns of cards, figure + text, icon rows */
.vg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; align-items: start; }
.vg__col { display: grid; gap: 20px; }
.vg-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 24px; background: var(--gray-1); border: 1px solid var(--gray-5); border-radius: 5px; }
.vg-card--tall { padding: 0; }
.vg-card--tall .vg-card__body { padding: 24px; }
.vg-card__num { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--ink-strong); }
.vg-card__num--sm { font-size: 1.25rem; margin-bottom: 18px; }
.vg-card__text { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.vg-card h3 { margin: 16px 0 6px; font-size: 1.1rem; font-weight: 700; }
.vg-card__icon { color: var(--ink-strong); }
.vg-card__icon svg, .vg-marquee svg, .vg-row svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gray-5); }
.vg-split > div { padding: 22px 24px; }
.vg-split > div + div { border-left: 1px solid var(--gray-5); }
.vg-split--top { border-top: 0; border-bottom: 1px solid var(--gray-5); }
.vg-split .vg-card__text { font-size: .88rem; }
/* round icons that scroll sideways, cut off at both edges */
.vg-marquee { display: flex; overflow: hidden; padding: 28px 0 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.vg-marquee ul { flex: none; display: flex; gap: 22px; margin: 0; padding: 0 22px 0 0; list-style: none; animation: vg-scroll 24s linear infinite; }
@keyframes vg-scroll { to { transform: translateX(-100%); } }
.vg-marquee li, .vg-row li { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--gray-5); box-shadow: 0 6px 14px -8px rgba(8,17,22,.3); color: var(--ink-strong); }
.vg-marquee li.is-accent, .vg-row li.is-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.vg-row { list-style: none; display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 24px 26px; }
@media (max-width: 760px) { .vg__grid { grid-template-columns: 1fr; } .vg-row li { width: 48px; height: 48px; } }
.num-cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .num-cards--2 { grid-template-columns: 1fr; } }

/* Feature stack, card content (mock left, details right) */
.fstack__card { grid-template-columns: 1.05fr 1fr; gap: 0; padding: 12px; }
.fstack__info { display: flex; flex-direction: column; padding: 24px 20px 20px 36px; }
.fstack__count { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 22px; font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; }
.fstack__badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-strong); font-weight: 600; letter-spacing: 0; }
.fstack__badge svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fstack__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; }
.fstack__desc { margin: 0 0 22px; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.fstack__row { list-style: none; display: flex; gap: 14px; margin: 0 0 24px; padding: 0; }
.fstack__row li { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--gray-5); box-shadow: 0 6px 14px -8px rgba(8,17,22,.3); color: var(--ink-strong); }
.fstack__row li:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.fstack__row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fstack__stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-top: 1px solid var(--line); }
.fstack__stats > div { padding: 18px 16px 6px 0; }
.fstack__stats > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.fstack__num { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--ink-strong); }
.fstack__stats p:not(.fstack__num) { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.fstack__more { margin-top: 18px; font-size: .92rem; }
@media (max-width: 900px) {
  .fstack__card { grid-template-columns: 1fr; padding: 10px; }
  .fstack__info { padding: 20px 10px 10px; }
}

/* Case study page */
.cs-glance { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 16px 40px -20px rgba(8,17,22,.18); }
.cs-glance__who { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cs-glance__who b { display: block; color: var(--ink-strong); }
.cs-glance__who span { font-size: .88rem; color: var(--ink-soft); }
.cs-glance__avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-3); color: var(--brand-11); font-weight: 700; }
.cs-glance__list { margin: 0; }
.cs-glance__list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--gray-6); font-size: .92rem; }
.cs-glance__list dt { color: var(--ink-soft); }
.cs-glance__list dd { margin: 0; color: var(--ink-strong); font-weight: 600; text-align: right; }
.cs-glance__result { display: grid; gap: 2px; margin-top: 18px; padding: 16px; border-radius: 5px; background: var(--brand-2); border: 1px solid var(--brand-5); }
.cs-glance__result span { font-size: .82rem; color: var(--ink-soft); }
.cs-glance__result b { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--accent-text); }
.cs-results { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.cs-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.cs-results__grid div { display: grid; gap: 4px; padding: 28px 24px; text-align: center; }
.cs-results__grid div + div { border-left: 1px solid var(--line); }
.cs-results__grid b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; color: var(--ink-strong); }
.cs-results__grid span { font-size: .9rem; color: var(--ink-soft); }
.cs-story h2 { margin-top: 0; }
.cs-ba td, .cs-ba thead th { text-align: left !important; width: 50%; }
.cs-ba td { color: var(--ink-strong); }
.cs-ba td .no--icon, .cs-ba td .yes--icon { margin: -2px 12px 0 0; }
.cs-ba thead th:first-child { padding-left: 0; }
.cs-ba td:first-child { padding-left: 0; color: var(--ink-soft); }
.cs-big { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--accent-text); }
.cs-big span { display: block; margin-top: 6px; font-family: var(--font); font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 640px) { .cs-results__grid { grid-template-columns: 1fr; } .cs-results__grid div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Problems with fixes (Why ConsulSales) */
.problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.problem__top { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 0; }
.problem__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 5px; background: var(--gray-2); border: 1px solid var(--gray-5); color: var(--ink-strong); }
.problem__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.problem__over { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.problem h3 { margin: 22px 24px 8px; font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.2; }
.problem > p { margin: 0 24px 24px; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.problem__fix { margin-top: auto; padding: 18px 24px 22px; background: var(--brand-2); border-top: 1px dashed var(--brand-6); }
.problem__label { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.problem__fix p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; color: var(--ink-strong); font-size: .95rem; line-height: 1.5; }
.problem__fix .yes--icon { flex: none; margin-top: 1px; }
.problem__fix .arrow-link { font-size: .9rem; }
@media (max-width: 900px) { .problems { grid-template-columns: 1fr; } }
.section-head--process .hl { white-space: nowrap; }

/* Mind map (How it works): Spine in the centre, four branches, flowing dashed connectors */
.mindmap { position: relative; height: 620px; max-width: 1080px; margin: 0 auto; }
.mindmap__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mindmap__lines path { fill: none; stroke: var(--brand-7); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; animation: map-flow 1.6s linear infinite; }
@keyframes map-flow { to { stroke-dashoffset: -28; } }
.mindmap__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 280px; padding: 26px 24px; text-align: center; background: var(--gray-12); color: #fff; border-radius: 5px; box-shadow: 0 0 0 8px rgba(0,73,255,.08), 0 24px 50px -20px rgba(8,17,22,.5); }
.anim .mindmap__core.a-step { transform: translate(-50%, calc(-50% + 10px)); }
.anim.is-in .mindmap__core.a-step { transform: translate(-50%, -50%); }
.mindmap__core-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; }
.mindmap__core-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mindmap__core-label { margin: 0 0 4px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
.mindmap__core h3 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; }
.mindmap__core h3 a, .mindmap__node h3 a { color: inherit; text-decoration: none; }
.mindmap__core h3 a:hover, .mindmap__node h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mindmap__node { position: absolute; z-index: 1; width: 300px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 14px 30px -18px rgba(8,17,22,.25); }
.mindmap__node--tl { left: 0; top: 40px; }
.mindmap__node--tr { right: 0; top: 40px; }
.mindmap__node--bl { left: 0; bottom: 40px; }
.mindmap__node--br { right: 0; bottom: 40px; }
.mindmap__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mindmap__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--accent); border-radius: 3px; color: var(--accent); }
.mindmap__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mindmap__node h3 { margin: 0; font-size: 1.1rem; }
.mindmap__node p { margin: 0 0 14px; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.mindmap__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; justify-content: inherit; }
.mindmap__chips li { padding: 3px 9px; border: 1px solid var(--gray-5); border-radius: 4px; background: var(--gray-2); font-size: .78rem; color: var(--ink-soft); }
.mindmap__chips--dark { justify-content: center; }
.mindmap__chips--dark li { background: rgba(255,255,255,.06); border-color: var(--dark-line); color: var(--on-dark-soft); }
/* tablet and phone: a vertical tree hanging from the centre */
@media (max-width: 1020px) {
  .mindmap { height: auto; display: grid; gap: 16px; padding-left: 28px; }
  .mindmap::before { content: ""; position: absolute; left: 8px; top: 40px; bottom: 60px; border-left: 2px dashed var(--brand-7); }
  .mindmap__lines { display: none; }
  .mindmap__core, .mindmap__node { position: relative; inset: auto; width: auto; transform: none; }
  .anim .mindmap__core.a-step, .anim.is-in .mindmap__core.a-step { transform: none; }
  .mindmap__core { margin-left: -28px; }
  .mindmap__node::before { content: ""; position: absolute; left: -21px; top: 36px; width: 20px; border-top: 2px dashed var(--brand-7); }
}
.mindmap__core h3 { color: #fff; }

/* Booking page: illustration beside the title */
.book-head { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: center; }
.book-head__art { margin: 0; justify-content: flex-end; }
.book-head__art img { max-width: 190px; }
@media (max-width: 1100px) { .book-head { grid-template-columns: minmax(0, 1fr) 150px; } .book-head__art img { max-width: 150px; } }
@media (max-width: 560px) { .book-head { grid-template-columns: minmax(0, 1fr); } .book-head__art { order: -1; justify-content: flex-start; } .book-head__art img { max-width: 140px; } }
.tool > * { min-width: 0; }
.segmented label, .segmented label span, .segmented label b { min-width: 0; white-space: normal; }
.form > *, .form-row > *, .field { min-width: 0; }
.input, .select, .textarea, .input-group, .input-group__input { min-width: 0; }

/* Languages: header menu, suggestion bar, Chinese font fallbacks */
.lang { position: relative; display: flex; align-items: center; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 8px 10px; background: none; border: 1px solid transparent; border-radius: 4px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-strong); cursor: pointer; }
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: var(--gray-2); border-color: var(--line); }
.lang__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 12px 16px -4px rgba(10,13,18,.08); }
.lang__list a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--gray-11); text-decoration: none; font-size: .9rem; }
.lang__list a:hover { background: var(--gray-3); color: var(--gray-12); }
.lang__list a[aria-current="true"] { color: var(--accent-text); font-weight: 600; }
@media (max-width: 1020px) { .lang { margin-bottom: 8px; } .lang__list { position: static; box-shadow: none; margin-top: 6px; } }
.lang__region { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.lang__region button { width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; color: var(--gray-11); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.lang__region button:hover { background: var(--gray-3); color: var(--gray-12); }
.region-pop { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 48px -12px rgba(8,17,22,.28); }
.region-pop::backdrop { background: rgba(8,17,22,.45); }
.region-pop[open] { animation: region-pop-in .35s cubic-bezier(.22,1,.36,1); }
@keyframes region-pop-in { from { opacity: 0; transform: translateY(12px); } }
.region-pop__form { display: grid; gap: 14px; padding: 28px 24px 24px; }
.region-pop__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 5px; background: var(--brand-2); color: var(--brand-9); }
.region-pop__title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: var(--gray-12); }
.region-pop__body { margin: 0; font-size: .95rem; color: var(--gray-11); }
.region-pop__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.region-pop__field { display: grid; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--gray-11); }
.region-pop__field select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--gray-12); font: inherit; font-size: .95rem; }
.region-pop__field select:focus-visible { outline: 2px solid var(--brand-9); outline-offset: 1px; }
.region-pop__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 480px) { .region-pop__fields { grid-template-columns: 1fr; } .region-pop__actions .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .region-pop[open] { animation: none; } }
:lang(zh) body, :lang(zh) { font-family: var(--font), "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) .fstack__title, :lang(zh) .problem h3 { font-family: var(--font-display), "Songti SC", "Noto Serif SC", "STSong", serif; }
:lang(zh) .eyebrow { letter-spacing: .02em; }
/* long German or French phrases must be able to wrap on small screens */
@media (max-width: 600px) { .section-head--process .hl { white-space: normal; } }
@media (max-width: 640px) { .compare-cta { align-items: stretch; } .compare-cta .btn { white-space: normal; text-align: center; line-height: 1.3; } .btn-row .btn { white-space: normal; text-align: center; } }
h1, h2, h3 { overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3 { hyphens: auto; }
.pt-0 { padding-top: 0; }
/* Personal AI feedback in the tools */
.ai-panel { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--brand-9); border-radius: 5px; background: var(--surface); text-align: left; }
.ai-panel__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ai-panel__head h3 { margin: 0 0 2px; font-size: 1.1rem; }
.ai-panel__head p { margin: 0; font-size: .82rem; color: var(--gray-11); }
.ai-panel__icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 5px; background: var(--brand-2); color: var(--brand-9); }
.ai-panel h4 { margin: 18px 0 8px; font-size: .95rem; color: var(--gray-12); }
.ai-panel__summary { margin: 0; color: var(--gray-12); }
.ai-panel__fixes { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--gray-11); }
.ai-panel__rewrite { display: grid; gap: 10px; justify-items: start; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--gray-2); }
.ai-panel__rewrite p { margin: 0; color: var(--gray-12); white-space: normal; overflow-wrap: anywhere; }
.ai-panel__loading { margin: 0 0 10px; font-size: .9rem; color: var(--gray-11); }
.ai-panel__line { display: block; height: 10px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--gray-3), var(--gray-4), var(--gray-3)); background-size: 200% 100%; animation: ai-shimmer 1.4s linear infinite; }
.ai-panel__line--short { width: 60%; }
@keyframes ai-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-panel__line { animation: none; } }
/* Year-end promotion */
.plan__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 18px 0 -6px; font-size: .82rem; color: var(--gray-11); }
.plan__price s.plan__was { font-size: 1.05rem; color: var(--gray-9); text-decoration-thickness: 1px; }
img.quote-by__avatar { object-fit: cover; flex: none; }
.quote-by__avatar--lg { width: 64px; height: 64px; }