@charset "utf-8";
/*
 * Visitics — cookieless web analytics, heatmaps and an AI chatbot for websites and e-shops.
 * https://www.getvisitics.com · info@getvisitics.com · software as a service provided by Esentra, s.r.o., Slovakia
 *
 * SPDX-FileCopyrightText: 2026 Esentra, s.r.o. <info@esentra.sk>
 *
 * SPDX-License-Identifier: LicenseRef-Esentra-Proprietary
 *
 * All rights reserved. No licence is granted without a written agreement with Esentra, s.r.o.
 * The terms: LICENSE and LICENSES/LicenseRef-Esentra-Proprietary.txt.
 */

/* Visitics — public product pages (home, features, legal). Light styles of their own without Tabler, so that
   the home page loads fast. The layout follows smartcounter.esentra.sk (the same family of Esentra products):
   a dark intro, a row of numbers, sections with an eyebrow, big headlines and real screenshots.
   Colours: the Visitics "ember" palette — sun #FFB938 → tangerine #FF7A2E → coral #F2456E on a warm dark
   #18120F (inspired by a flame, our own tones). Text colours are checked for contrast (WCAG AA): the accent
   for text on white #C43D16 (5.2 : 1), on dark #FFB25C (10.4 : 1); buttons have dark text on the flame (≥ 5.3 : 1).
   Light/dark mode is driven by theme.js with the data-bs-theme attribute (the same as in the dashboard). */

/* Visitics Sans = Mona Sans, Visitics Mono = IBM Plex Mono Medium: Latin subsets under their own names, as the SIL OFL 1.1
   asks of a modified font (assets/fonts/README.md). Visitics Sans has one optical size (17, the body text), which halves
   the file; headings above 27 px tighten their letters a little (--track), as the bigger optical sizes did. */
@font-face {
  font-family: 'Visitics Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/visitics-sans-latin.woff2) format('woff2-variations'), url(fonts/visitics-sans-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Visitics Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/visitics-mono-latin.woff2) format('woff2');
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* The ember palette */
  --sun: #ffb938;
  --tangerine: #ff7a2e;
  --coral: #f2456e;
  --flame: linear-gradient(100deg, #ffb938 0%, #ff7a2e 48%, #f2456e 100%);
  --flame-soft: linear-gradient(120deg, rgba(255, 185, 56, .16), rgba(255, 122, 46, .14) 50%, rgba(242, 69, 110, .14));
  --on-flame: #1a0e08;
  /* Text in the flame on a light page: darker tones (large text ≥ 3 : 1) */
  --flame-ink: linear-gradient(100deg, #e8590c 0%, #d9402a 50%, #d92d57 100%);

  --bg: #ffffff;
  --bg-alt: #fff8f2;
  --card: #ffffff;
  --card-2: #fbf5f0;
  --ink: #1f1915;
  --ink-2: #5b524d;
  --muted: #6e645e;
  --line: #efe6df;
  --line-2: #e2d6cd;
  --accent: #ff7a2e;
  --accent-ink: #c43d16;
  --accent-soft: rgba(255, 122, 46, .12);
  --coral-ink: #c42653;
  --good: #0a7d32;
  --good-soft: rgba(10, 125, 50, .1);
  --header-bg: rgba(255, 255, 255, .93);
  --shadow: 0 30px 70px rgba(48, 24, 10, .14), 0 8px 22px rgba(48, 24, 10, .08);
  --shadow-sm: 0 4px 16px rgba(48, 24, 10, .07);
  --glow: 0 14px 36px rgba(255, 122, 46, .32);

  /* The dark bands (the intro, the AI chatbot, the code) are dark in both modes */
  --dk-bg: #18120f;
  --dk-bg-2: #120d0b;
  --dk-card: #221a16;
  --dk-card-2: #2b221d;
  --dk-line: #3a2f29;
  --dk-ink: #f6eee8;
  --dk-ink-2: #cdbfb6;
  --dk-muted: #a39891;
  --dk-accent: #ffb25c;

  --font: 'Visitics Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Visitics Mono', ui-monospace, Consolas, monospace;
  /* Tighter letters for big text, as Mona Sans' optical sizes above 17 had them: 0 up to 27 px, then −0.04 px per px */
  --track: min(0px, (27px - 1em) * .04);
  --fs-hero: clamp(2.4rem, 1.3rem + 3.9vw, 4.65rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  --fs-h3: clamp(1.2rem, 1.08rem + .45vw, 1.5rem);
  --fs-lead: clamp(1.06rem, .99rem + .35vw, 1.27rem);
  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --sec-y: clamp(4.25rem, 2.9rem + 5.6vw, 8rem);
  --header-h: 72px;
  --r: 16px;
  --r-lg: 26px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
:root[data-bs-theme=dark] {
  --bg: #120d0b;
  --bg-alt: #18120f;
  --card: #1f1814;
  --card-2: #271e19;
  --ink: #f6eee8;
  --ink-2: #cdbfb6;
  --muted: #a39891;
  --line: #33281f;
  --line-2: #45382f;
  --accent-ink: #ffb25c;
  --accent-soft: rgba(255, 122, 46, .16);
  --coral-ink: #ff7d9b;
  --flame-ink: var(--flame);
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, .12);
  --header-bg: rgba(18, 13, 11, .82);
  --shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
/* A dark band takes the dark tones whatever the mode */
.s-dark {
  --bg: var(--dk-bg); --bg-alt: var(--dk-bg-2); --card: var(--dk-card); --card-2: var(--dk-card-2);
  --ink: var(--dk-ink); --ink-2: var(--dk-ink-2); --muted: var(--dk-muted); --line: var(--dk-line); --line-2: #4a3d34;
  --accent-ink: var(--dk-accent); --accent-soft: rgba(255, 122, 46, .16); --coral-ink: #ff7d9b; --flame-ink: var(--flame);
  --good: #4ade80; --good-soft: rgba(74, 222, 128, .12);
  --shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35);
  background: var(--dk-bg); color: var(--ink); color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* The target of a #link or a focused element stops 1rem below the sticky header (the only offset — no scroll-margin). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
/* In-page links scroll smoothly once the page has loaded (site.js). A page opened on a #fragment jumps there: the
   browser keeps it at the target while fonts and images arrive, and a smooth scroll aims at an offset that still moves. */
@media (prefers-reduced-motion: no-preference) { html.is-loaded { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--font); font-feature-settings: 'ss01' on; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: calc(-.025em + var(--track)); font-weight: 760; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code { font-family: var(--mono); font-size: .88em; padding: .1em .35em; border-radius: 6px; background: var(--accent-soft); color: #b23412; }
[data-bs-theme=dark] code, .s-dark code { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tangerine); color: var(--on-flame); }
.icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; stroke: currentColor; }
.s-skip { position: absolute; left: -9999px; top: .5rem; z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--tangerine); color: var(--on-flame); font-weight: 700; }
.s-skip:focus { left: .5rem; }
.s-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.s-wrap--narrow { --wrap: 840px; }
.s-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-nobr { white-space: nowrap; }
.s-grad { background: var(--flame-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-dark .s-grad, .s-hero .s-grad { background-image: var(--flame); }

/* ── Brand (the same as in the dashboard) ───────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.brand__mark { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 4px 10px rgba(255, 122, 46, .28)); }
.brand__text { display: grid; line-height: 1.05; text-align: left; }
.brand__word { font-size: 1.27rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.brand__word b { font-weight: 800; background: var(--flame-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__by { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.s-brand { min-height: 40px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.s-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.25rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 .97rem/1.15 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s, background-color .2s, border-color .2s, color .2s, filter .2s;
}
.s-btn:hover { transform: translateY(-2px); text-decoration: none; }
.s-btn:active { transform: translateY(0); }
.s-btn .icon { transition: transform .2s var(--ease); }
.s-btn:hover .icon:last-child { transform: translateX(3px); }
.s-btn--primary { background: var(--flame); background-size: 140% 100%; background-position: 0 0; color: var(--on-flame); box-shadow: var(--glow); }
.s-btn--primary:hover { color: var(--on-flame); background-position: 100% 0; box-shadow: 0 18px 44px rgba(242, 69, 110, .36); filter: saturate(1.08); }
.s-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.s-btn--ghost:hover { color: var(--ink); border-color: var(--tangerine); background: var(--accent-soft); }
.s-btn--dark { background: var(--on-flame); color: #fff; }
.s-btn--dark:hover { color: #fff; background: #000; box-shadow: 0 14px 34px rgba(26, 14, 8, .35); }
.s-btn--light { background: #fff; color: var(--on-flame); }
.s-btn--light:hover { background: #fff7f0; color: var(--on-flame); }
.s-btn--lg { min-height: 56px; padding: .9rem 1.6rem; font-size: 1.05rem; }
.s-btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .92rem; }
.s-btn--block { width: 100%; }
.s-icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.s-icon-btn:hover { border-color: var(--tangerine); color: var(--accent-ink); }
.s-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; min-height: 40px; font-weight: 700; text-decoration: none; color: var(--accent-ink); }
.s-link .icon { transition: transform .2s var(--ease); }
.s-link:hover .icon { transform: translateX(4px); }

/* Small things: the eyebrow chip, the kicker above a headline, notes */
.s-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .9rem .38rem .5rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; font-weight: 650; }
.s-eyebrow .icon { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 999px; background: var(--flame); color: var(--on-flame); stroke-width: 2.2; }
.s-kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--accent-ink); font-size: .82rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.s-lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 720px; line-height: 1.6; }
.s-note { margin-top: 1.25rem; color: var(--muted); font-size: .92rem; max-width: 80ch; }
.s-note--center { text-align: center; margin-inline: auto; }
.s-soon { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .72rem; font-weight: 750; letter-spacing: .02em; vertical-align: .1em; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.s-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
/* The frosted background after scrolling is a layer of its own: a backdrop-filter on the header itself makes it the
   containing block of the fixed menu (.s-nav on narrow screens), whose inset then counted from the 72 px header instead
   of the window — the menu opened after scrolling was 41 px tall. */
.s-header::before { content: ''; position: absolute; inset: 0 0 -1px; z-index: -1; pointer-events: none; transition: background-color .3s; }
.s-header.is-scrolled { border-bottom-color: var(--line); }
.s-header.is-scrolled::before { background: var(--header-bg); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); }
.s-header__in { display: flex; align-items: center; gap: 1.25rem; height: 100%; }
.s-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.s-nav__list { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.s-nav__link { display: block; padding: .55rem .7rem; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: .96rem; text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
.s-nav__link:hover { color: var(--ink); background: var(--card-2); }
.s-nav__cta { display: flex; gap: .5rem; }
.s-header__tools { display: flex; align-items: center; gap: .6rem; }
.s-burger { display: none; }
.s-burger__close { display: none; }
/* Page appearance (System / Light / Dark) and the languages — as on the Smart Counter web */
.theme-switch, .theme-demo { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); }
.theme-switch button, .theme-demo button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 34px; height: 34px; padding: 0 .55rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background-color .2s, color .2s; }
.theme-switch .icon { width: 1.1em; height: 1.1em; }
.theme-switch button:hover, .theme-demo button:hover { color: var(--ink); }
.theme-switch button[aria-checked=true], .theme-demo button[aria-checked=true] { background: color-mix(in srgb, var(--ink) 11%, var(--card)); color: var(--ink); }
.theme-demo button { height: 44px; padding: 0 1.05rem; font-weight: 650; font-size: .95rem; }
.theme-demo button[aria-checked=true] { background: var(--accent); color: var(--on-flame); }
.s-nav__extra { display: none; }
/* The languages: a native <details>, the list opens under the button */
.lang-menu { position: relative; }
.lang-menu__btn { display: inline-flex; align-items: center; gap: .35rem; height: 42px; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: .82rem; font-weight: 750; letter-spacing: .06em; cursor: pointer; list-style: none; user-select: none; transition: color .2s, border-color .2s; }
.lang-menu__btn::-webkit-details-marker { display: none; }
.lang-menu__btn:hover, .lang-menu[open] .lang-menu__btn { color: var(--ink); border-color: var(--muted); }
.lang-menu__btn .icon { width: 1.15em; height: 1.15em; }
/* The current language as its flag on the button, also folded on a phone. */
.lang-menu__btn .flag { width: 22px; height: 15px; margin-right: .2rem; }
.lang-menu__btn .lang-menu__chev { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.lang-menu[open] .lang-menu__chev { transform: rotate(180deg); }
.lang-menu__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 13rem; list-style: none; margin: 0; padding: .4rem; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--shadow); }
.lang-menu__item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.lang-menu__item:hover { background: var(--card-2); color: var(--ink); }
.lang-menu__item.is-current { color: var(--ink); background: var(--accent-soft); }
.lang-menu__item .icon { margin-left: auto; width: 1.1em; height: 1.1em; color: var(--accent-ink); }
/* A 3 : 2 flag with a fine edge — the white stripes do not melt into the background */
.flag { position: relative; flex: none; display: block; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; }
.flag svg { display: block; width: 100%; height: 100%; }
.flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35); }
.s-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-nowrap { white-space: nowrap; }
/* Over the dark intro the header is transparent with light text until the page scrolls */
.s-body--hero:not(.is-menu) .s-header:not(.is-scrolled) { --ink: var(--dk-ink); --ink-2: var(--dk-ink-2); --muted: var(--dk-muted); --line-2: rgba(255, 255, 255, .22); --card-2: rgba(255, 255, 255, .08); --flame-ink: var(--flame); color: var(--dk-ink); }
.s-body--hero:not(.is-menu) .s-header:not(.is-scrolled) .s-header__tools { --card: var(--dk-card); --accent-ink: var(--dk-accent); --accent-soft: rgba(255, 122, 46, .16); }
/* The whole bar (menu, buttons, the language and appearance switches) fits from 1280 px in every language of the web */
@media (max-width: 1279.98px) {
  .s-burger { display: inline-grid; }
  .s-header__tools { margin-left: auto; }
  .s-nav { position: fixed; inset: var(--header-h) 0 0; margin: 0; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem var(--gutter) 1.5rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
  .s-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  /* The open menu covers the page below the header; the page does not scroll under it. */
  body.is-menu { overflow: hidden; }
  .s-nav__list { flex-direction: column; }
  .s-nav__link { padding: .8rem .9rem; font-size: 1.05rem; border-radius: 12px; }
  .s-nav__cta { flex-direction: column; }
  .s-nav__cta .s-btn { width: 100%; }
  .s-burger[aria-expanded=true] .s-burger__open { display: none; }
  .s-burger[aria-expanded=true] .s-burger__close { display: inline-block; }
  .is-menu .s-header { background: var(--bg); border-bottom-color: var(--line); }
}

/* ── Intro (hero) ─────────────────────────────────────────────────────────── */
.s-hero { position: relative; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem); overflow: hidden; isolation: isolate; }
/* The glows stand at the corner of the aura and are moved into place by translate, in units of the aura (a size
   container): the intro grows while its HTML is still arriving, and a glow placed by percentages of it (top: 6%) moved
   with it whenever the browser drew a frame in between — a layout shift of up to 0.21 on a phone. A new translate is a
   transform, not a shift. The drift (transform) applies after translate, about the glow's centre as before. */
.s-hero__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; container-type: size; }
.s-hero__aura::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(80% 70% at 60% 40%, #000 20%, transparent 75%); }
.s-hero__aura i { position: absolute; left: 0; top: 0; border-radius: 50%; filter: blur(70px); opacity: .55; animation: s-drift 18s ease-in-out infinite alternate; }
.s-hero__aura i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; translate: -8cqw -18cqh; background: #ff7a2e; }
.s-hero__aura i:nth-child(2) { width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; translate: calc(106cqw - 100%) 6cqh; background: #f2456e; opacity: .42; animation-duration: 22s; }
.s-hero__aura i:nth-child(3) { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; translate: 34cqw calc(126cqh - 100%); background: #ffb938; opacity: .32; animation-duration: 26s; }
/* Without container units: the same places as offsets */
@supports not (width: 1cqw) {
  .s-hero__aura i:nth-child(1) { left: -8%; top: -18%; }
  .s-hero__aura i:nth-child(2) { left: auto; right: -6%; top: 6%; }
  .s-hero__aura i:nth-child(3) { left: 34%; top: auto; bottom: -26%; }
}
@keyframes s-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(4%, 6%) scale(1.12); } }
.s-hero__in { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
@media (min-width: 1100px) { .s-hero__in { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); } }
.s-hero__text { display: grid; gap: 1.4rem; justify-items: start; }
.s-hero .s-eyebrow { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--dk-ink-2); }
/* The features page has a light intro: the pill keeps its light look there. */
.s-hero--page .s-eyebrow { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.s-hero__title { font-size: var(--fs-hero); font-weight: 780; letter-spacing: calc(-.04em + var(--track)); line-height: 1.02; }
.s-hero__title .s-grad { display: inline; padding-bottom: .06em; }
.s-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.s-trust { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.s-trust li { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; font-weight: 600; }
.s-trust .icon { color: var(--good); }
.s-hero__note { color: var(--muted); font-size: .88rem; }
/* Page intro (features, legal) — light, centred */
.s-hero--page { margin-top: 0; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.s-hero--page::before { content: ''; position: absolute; z-index: -1; inset: -30% -10% auto; height: 120%; background: radial-gradient(40% 50% at 28% 20%, rgba(255, 122, 46, .16), transparent 70%), radial-gradient(35% 45% at 76% 10%, rgba(242, 69, 110, .12), transparent 70%); pointer-events: none; }
.s-hero__in--single { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 1.4rem; }
.s-hero__in--single > * { max-width: 880px; }
.s-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
.s-chips a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.s-chips a:hover { border-color: var(--tangerine); color: var(--accent-ink); transform: translateY(-1px); }
.s-chips .icon { color: var(--accent-ink); }

/* The stage of the intro: a dashboard screenshot with floating cards (an illustration with demo data) */
.s-stage { position: relative; margin: 0; padding: 1.5rem 0 2.5rem; }
.s-stage__shot { position: relative; transform: perspective(1800px) rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%; transition: transform .6s var(--ease); }
.s-stage:hover .s-stage__shot { transform: perspective(1800px) rotateY(-4deg) rotateX(1deg); }
.s-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; border-radius: 16px; background: rgba(34, 26, 22, .86); border: 1px solid rgba(255, 255, 255, .12); color: var(--dk-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .88rem; line-height: 1.25; animation: s-bob 6s ease-in-out infinite; }
.s-float b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.s-float small { color: var(--dk-muted); font-size: .76rem; font-weight: 600; }
.s-float__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--flame); color: var(--on-flame); flex: none; }
.s-float__ico .icon { width: 1.2rem; height: 1.2rem; }
.s-float--live { left: -4%; top: 20%; }
.s-float--vitals { right: -2%; top: -2%; animation-delay: -2s; }
.s-float--heat { left: 6%; bottom: 0; padding: .5rem; animation-delay: -3.5s; }
.s-float--chat { right: -3%; bottom: 6%; display: grid; gap: .5rem; width: min(290px, 62%); padding: .85rem; animation-delay: -1s; }
@keyframes s-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.s-pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; flex: none; }
.s-pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #4ade80; animation: s-ping 1.8s var(--ease) infinite; }
@keyframes s-ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.s-vital { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border-radius: 999px; background: rgba(74, 222, 128, .16); color: #6ee7a1; font-size: .74rem; font-weight: 750; }
.s-heat { position: relative; width: 150px; height: 96px; border-radius: 10px; overflow: hidden; background: #fff; }
.s-heat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.s-heat__dot { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 69, 110, .95), rgba(255, 122, 46, .6) 45%, rgba(255, 185, 56, 0) 72%); animation: s-ping2 2.4s ease-in-out infinite; }
.s-heat__dot--1 { left: 56%; top: 44%; }
.s-heat__dot--2 { left: 22%; top: 66%; animation-delay: -1s; }
@keyframes s-ping2 { 50% { transform: scale(1.35); } }
.s-chatbub { padding: .55rem .75rem; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .08); font-size: .84rem; }
.s-chatbub--me { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--flame); color: var(--on-flame); font-weight: 600; }
.s-chathead { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .84rem; }
.s-chathead .s-float__ico { width: 28px; height: 28px; border-radius: 50%; }
.s-chathead small { margin-left: auto; padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .68rem; }
/* Next to the heatmap card (150 px picture + padding), never under it. */
.s-stage figcaption { position: absolute; left: calc(6% + 11.5rem); right: 4%; bottom: -.25rem; text-align: left; color: var(--dk-muted); font-size: .8rem; }
@media (max-width: 759.98px) {
  .s-stage__shot { transform: none; }
  .s-float--vitals, .s-float--heat { display: none; }
  .s-float--live { left: 2%; top: 0; }
  .s-float--chat { right: 2%; bottom: 5.25rem; width: 72%; }
  .s-stage figcaption { position: static; margin-top: 1rem; text-align: center; }
}

/* A frame with a dashboard screenshot */
.s-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.s-dark .s-frame, .s-hero .s-frame { border-color: rgba(255, 255, 255, .12); box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04); }
.s-frame__bar { display: flex; align-items: center; gap: .45rem; height: 40px; padding: 0 1rem; border-bottom: 1px solid var(--line); background: var(--card-2); }
.s-frame__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.s-frame__bar i:nth-child(1) { background: #ff6159; } .s-frame__bar i:nth-child(2) { background: #ffbd2e; } .s-frame__bar i:nth-child(3) { background: #28c941; }
.s-frame__bar span { margin-left: .75rem; padding: .15rem .8rem; border-radius: 999px; background: var(--card); color: var(--muted); font-size: .78rem; font-weight: 600; }
.s-frame--plain { border-radius: var(--r); }
.s-frame picture, .s-frame img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
.s-cap { margin-top: .75rem; color: var(--muted); font-size: .84rem; }

/* ── Numbers (stats) ────────────────────────────────────────────────────── */
.s-stats { position: relative; z-index: 2; margin-top: clamp(-3.5rem, -2rem - 2vw, -2.25rem); }
.s-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1023.98px) { .s-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .s-stats__grid { grid-template-columns: minmax(0, 1fr); } }
.s-stat { position: relative; display: grid; gap: .3rem; align-content: start; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.s-stat::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--flame); }
.s-stat__head { display: flex; align-items: center; justify-content: space-between; }
.s-stat__num { font-size: clamp(2.2rem, 1.8rem + 1.3vw, 3rem); font-weight: 800; letter-spacing: calc(-.04em + var(--track)); line-height: 1; font-variant-numeric: tabular-nums; background: var(--flame-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-stat__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); }
.s-stat__label { font-weight: 720; font-size: 1.02rem; }
.s-stat__text { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.s-stat__viz { display: flex; align-items: center; gap: .35rem; margin-top: .65rem; height: 30px; }
.s-stat__bar { position: relative; flex: 1; height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.s-stat__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--flame); }
/* The tracking script against the usual 25 kB+ of others. */
.s-stat__bar--ours i { width: 22%; }
.s-stat__bar--other i { width: 100%; background: var(--line-2); }
.s-stat__mini { font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.s-stat__chip { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--card-2); color: var(--muted); }
.s-stat__chip .icon { width: 1rem; height: 1rem; }
.s-stat__chip--x { position: relative; }
.s-stat__chip--x::after { content: ''; position: absolute; width: 22px; height: 2px; background: var(--coral); transform: rotate(-45deg); border-radius: 2px; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.s-sec { position: relative; padding: var(--sec-y) 0; }
.s-sec--alt { background: var(--bg-alt); }
.s-head { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.s-head--left { justify-items: start; text-align: left; }
.s-head--flush { margin: 0; }
.s-h2 { font-size: var(--fs-h2); font-weight: 760; max-width: 860px; }
.s-h2--sm { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem); }
.s-h3 { font-size: var(--fs-h3); }

/* Reveal on scrolling (only with JavaScript and without reduced motion) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Product tabs (analytics / heatmaps / AI) ───────────────────────────── */
.s-ptabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 2rem; padding: .35rem; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.s-ptabs__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 700 .97rem/1.1 var(--font); cursor: pointer; transition: background-color .2s, color .2s; }
.s-ptabs__btn:hover { color: var(--ink); background: var(--card-2); }
.s-ptabs__btn[aria-selected=true] { background: var(--flame); color: var(--on-flame); box-shadow: var(--glow); }
.s-ptab { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .s-ptab { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
/* Without JavaScript the tab list stays hidden and the panels are below each other. With it (html.js, from theme.js in
   <head>) the list and the first panel alone show from the first frame, not only once site.js switches the tabs on after
   the whole page is parsed: Chrome lays the page out while it parses, and the panels below each other in such a frame
   brought the lazy screenshots of the others within its loading distance — ~100 kB fetched in some loads, never shown. */
.s-ptabs__nav[hidden] { display: none; }
.js .s-ptabs__nav[hidden] { display: flex; }
.js .s-ptabs:not(.is-on) .s-ptab ~ .s-ptab, .js .s-ptab[hidden] { display: none; }
.js .s-ptab__text > .s-kicker { display: none; }
.s-ptab + .s-ptab { margin-top: 4rem; }
.js .s-ptab + .s-ptab { margin-top: 0; }
.s-ptab__text { display: grid; gap: 1rem; align-content: start; }
.s-ptab__text h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.35rem); }
.s-ptab__text > p { color: var(--ink-2); font-size: 1.05rem; }
.s-ptab__media { position: relative; }
.s-ptab__media::before { content: ''; position: absolute; inset: 8% -4% -6% 8%; z-index: -1; border-radius: 40px; background: var(--flame-soft); filter: blur(4px); }

.s-checks { display: grid; gap: .65rem; list-style: none; margin: .25rem 0 0; padding: 0; }
.s-checks li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-2); }
.s-checks .icon { flex: none; margin-top: .18em; width: 1.25rem; height: 1.25rem; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); stroke-width: 2.6; }

/* Text and a screenshot side by side */
.s-split { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
.s-split__text { display: grid; gap: 1rem; align-content: start; }
.s-split__text > p:not(.s-kicker) { color: var(--ink-2); font-size: 1.05rem; }
.s-split__shot { margin: 0; }
.s-split__shot figcaption { margin-top: .75rem; color: var(--muted); font-size: .84rem; }
@media (min-width: 960px) {
  .s-split { grid-template-columns: 5fr 7fr; }
  .s-split--rev { grid-template-columns: 7fr 5fr; }
  .s-split--rev .s-split__text { order: 2; }
  .s-split--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
}

/* ── How it works ───────────────────────────────────────────────────────── */
.s-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: none; }
@media (max-width: 1023.98px) { .s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .s-steps { grid-template-columns: minmax(0, 1fr); } }
.s-steps li { position: relative; padding: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.s-steps li:not(:last-child)::after { content: ''; position: absolute; top: 2.55rem; right: -1rem; width: 1rem; height: 2px; background: var(--flame); opacity: .5; }
@media (max-width: 1023.98px) { .s-steps li::after { display: none; } }
.s-steps__n { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1rem; border-radius: 14px; background: var(--flame); color: var(--on-flame); font-weight: 800; font-size: 1.1rem; box-shadow: var(--glow); }
.s-steps h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.s-steps p { color: var(--ink-2); font-size: .95rem; }
.s-code { position: relative; border-radius: var(--r); background: #100b09; border: 1px solid #3a2f29; box-shadow: var(--shadow-sm); }
.s-code__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .6rem .55rem 1.1rem; border-bottom: 1px solid #3a2f29; color: #a39891; font-size: .8rem; font-weight: 650; }
.s-code pre { margin: 0; padding: 1.1rem 1.25rem; font: 500 .92rem/1.65 var(--mono); color: #f6eee8; white-space: pre-wrap; word-break: break-all; }
.s-code code { padding: 0; background: none; color: inherit; font-size: inherit; }
.s-code .t-tag { color: #ff8a65; } .s-code .t-attr { color: #ffb938; } .s-code .t-val { color: #9be7b0; }
.s-copy { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid #4a3d34; background: transparent; color: #f6eee8; font: 650 .8rem/1 var(--font); cursor: pointer; }
.s-copy:hover { border-color: var(--tangerine); color: #ffb25c; }
.s-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 2rem 0 0; padding: 0; }
@media (max-width: 999.98px) { .s-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .s-specs { grid-template-columns: minmax(0, 1fr); } }
/* In three columns a last point alone with one other in its row takes the free place too. */
@media (min-width: 1000px) { .s-specs > li:last-child:nth-child(3n+2) { grid-column: span 2; } }
.s-specs li { padding: 1.25rem 1.4rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.s-specs h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.s-specs p { color: var(--ink-2); font-size: .93rem; }

/* Platforms: a moving row of logos (still with reduced motion) */
.s-logos { margin-top: 2.25rem; }
.s-logos__title { margin-bottom: 1rem; text-align: center; color: var(--muted); font-size: .88rem; font-weight: 650; }
.s-logos__track { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s-logos__row { list-style: none; margin: 0; display: flex; gap: .75rem; padding-right: .75rem; flex: none; animation: s-marquee 46s linear infinite; }
.s-logos__track:hover .s-logos__row { animation-play-state: paused; }
@keyframes s-marquee { to { transform: translateX(-100%); } }
/* Tiles of one width: the logo, the name and under it the kind (plugin, code, template) */
.s-logo { display: inline-flex; align-items: center; gap: .7rem; width: 14.25rem; min-height: 60px; padding: .55rem 1.05rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 680; font-size: .95rem; white-space: nowrap; }
.s-logo svg { width: 26px; height: 26px; flex: none; }
.s-logo__txt { display: grid; min-width: 0; line-height: 1.25; }
.s-logo small { color: var(--muted); font-weight: 600; font-size: .76rem; }

/* ── Feature cards (the home page, the overview of the features, related features) ── */
/* auto-fit: two or three cards (a small group, the related ones) share the whole row instead of leaving columns empty. */
.s-fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
/* A card alone in its row (the last of all 13, the only one of a group) spans the row and lies on its side. */
.s-fcards--wide-last > li:last-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .s-fcards--wide-last > li:last-child .s-fcard, .s-fcards > li:only-child .s-fcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.25rem; row-gap: .25rem; align-items: center; }
  :is(.s-fcards--wide-last > li:last-child, .s-fcards > li:only-child) .s-fcard__top { display: contents; }
  :is(.s-fcards--wide-last > li:last-child, .s-fcards > li:only-child) .s-fcard__ico { grid-area: 1 / 1 / 3 / 2; }
  :is(.s-fcards--wide-last > li:last-child, .s-fcards > li:only-child) .s-fcard__name { grid-area: 1 / 2; }
  :is(.s-fcards--wide-last > li:last-child, .s-fcards > li:only-child) .s-fcard__text { grid-area: 2 / 2; }
  :is(.s-fcards--wide-last > li:last-child, .s-fcards > li:only-child) .s-fcard__plan { grid-area: 1 / 3; justify-self: end; }
  :is(.s-fcards--wide-last > li:last-child, .s-fcards > li:only-child) .s-fcard__more { grid-area: 2 / 3; justify-self: end; margin: 0; padding: 0; }
}
.s-fcard { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.35rem 1.35rem 1.15rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.s-fcard::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--flame); opacity: 0; transition: opacity .25s; }
.s-fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tangerine) 40%, var(--line)); text-decoration: none; color: var(--ink); }
.s-fcard:hover::before, .s-fcard:focus-visible::before { opacity: 1; }
.s-fcard__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.s-fcard__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.s-fcard__ico .icon { width: 1.3rem; height: 1.3rem; }
.s-fcard__plan { padding: .2rem .65rem; border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: .76rem; font-weight: 750; white-space: nowrap; }
.s-fcard__plan.is-free { background: var(--good-soft); color: var(--good); }
.s-fcard__name { font-size: 1.12rem; font-weight: 760; letter-spacing: -.01em; line-height: 1.25; }
.s-fcard__text { color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
.s-fcard__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .6rem; color: var(--accent-ink); font-weight: 700; font-size: .92rem; }
.s-fcard__more .icon { transition: transform .2s var(--ease); }
.s-fcard:hover .s-fcard__more .icon { transform: translateX(4px); }
.s-head--sub { margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 1.75rem; gap: .5rem; }
.s-head--sub p { color: var(--ink-2); max-width: 640px; }
.s-sec--tight { padding: clamp(3rem, 2rem + 3vw, 4.75rem) 0; }

/* ── A feature page ───────────────────────────────────────────────────────── */
.s-fhero { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.s-fhero__in { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 1100px) { .s-fhero__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.s-fhero__title { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.7rem); }
.s-fhero__media { margin: 0; }
.s-fhero__media figcaption { margin-top: .85rem; color: var(--dk-muted); font-size: .82rem; text-align: center; }
.s-fhero .s-shot { border-radius: var(--r-lg); }
/* The hero of a feature: its illustration (partials/illustration, the classes as in app.css) on a dark card tilted in
   space, a glow behind it and the feature's icon floating at its corner. */
.vt-illu { display: block; width: 100%; height: auto; overflow: visible; }
/* The dark brand of the public web and the sign-in panel (the same in light and dark mode). */
.vt-illu--web { --i-surf: #241b17; --i-surf2: #2e231e; --i-line: #46382f; --i-ink: #f6eee8; --i-mute: rgba(246, 238, 232, .28); --i-acc: #ff8a4c;
  --i-acc2: #f2456e; --i-g1: #ffb938; --i-g2: #f2456e; }
.vt-illu .i-s { fill: var(--i-surf); }
.vt-illu .i-s2 { fill: var(--i-surf2); }
.vt-illu .i-k { fill: var(--i-mute); }
.vt-illu .i-ink { fill: var(--i-ink); }
.vt-illu .i-a { fill: var(--i-acc); }
.vt-illu .i-a2 { fill: var(--i-acc2); }
.vt-illu .i-w { fill: #fff; }
.vt-illu .i-n { fill: none; }
.vt-illu .i-o { stroke: var(--i-line); stroke-width: 2; }
.vt-illu .i-oa, .vt-illu .i-ob, .vt-illu .i-ok, .vt-illu .i-os, .vt-illu .i-ow { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vt-illu .i-oa { stroke: var(--i-acc); }
.vt-illu .i-ob { stroke: var(--i-acc2); stroke-width: 2.5; }
.vt-illu .i-ok { stroke: var(--i-mute); stroke-width: 2.5; }
.vt-illu .i-os { stroke: var(--i-surf); stroke-width: 2.5; }
.vt-illu .i-ow { stroke: #fff; }
.vt-illu .i-dash { stroke: var(--i-mute); stroke-width: 2.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.vt-illu .i-track { stroke: var(--i-line); stroke-width: 10; stroke-linecap: round; }
.vt-illu .i-thick { stroke-width: 10; stroke-linecap: round; }
.vt-illu .i-needle { stroke: var(--i-ink); stroke-width: 4; stroke-linecap: round; }
.vt-illu .i-g1 { stop-color: var(--i-g1); }
.vt-illu .i-g2 { stop-color: var(--i-g2); }
.vt-illu .i-t { font-family: inherit; font-size: 15px; font-weight: 800; }
.s-fhero__art { position: relative; margin: 0 auto; max-width: 640px; perspective: 1600px; }
.s-fhero__glow { position: absolute; inset: 8% 6% -6%; border-radius: 40px; background: radial-gradient(60% 60% at 60% 40%, rgba(255, 138, 76, .55), transparent 70%), radial-gradient(50% 50% at 25% 75%, rgba(242, 69, 110, .4), transparent 70%); filter: blur(28px); }
.s-fhero__zoom { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 22px; background: linear-gradient(160deg, #2a1f1a, #1b1411); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 6px rgba(255, 255, 255, .04); transform: rotateY(-9deg) rotateX(5deg) rotateZ(.6deg); transform-origin: 60% 50%; }
.s-fhero__zoom .vt-illu { width: 84%; }
.s-fhero__badge { position: absolute; left: -14px; top: -16px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--on-flame); background: var(--flame);
  box-shadow: 0 18px 40px -12px rgba(242, 69, 110, .6), inset 0 0 0 1px rgba(255, 255, 255, .25); rotate: -6deg; }
.s-fhero__badge .icon { width: 30px; height: 30px; }
@media (prefers-reduced-motion: no-preference) { .s-fhero__badge { animation: s-bob 6s ease-in-out infinite; } }
@media (max-width: 700px) { .s-fhero__zoom { transform: none; } .s-fhero__badge { width: 52px; height: 52px; left: -6px; top: -10px; } }
.s-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--muted); }
.s-crumbs li + li::before { content: '›'; margin-right: .5rem; color: var(--muted); }
.s-crumbs a { color: var(--ink-2); text-decoration: none; }
.s-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.s-crumbs [aria-current] { color: var(--ink); font-weight: 650; }
/* What it solves: three numbered cards */
.s-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 899.98px) { .s-why { grid-template-columns: minmax(0, 1fr); } }
.s-why li { position: relative; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.s-why__n { display: block; margin-bottom: .9rem; font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--flame-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-why h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.s-why p { color: var(--ink-2); }
/* The facts "In detail": short blocks read like an article, two columns on a wide screen */
.s-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; max-width: 1040px; margin-inline: auto; }
@media (max-width: 759.98px) { .s-facts { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
.s-fact { position: relative; padding-left: 1.25rem; }
.s-fact::before { content: ''; position: absolute; left: 0; top: .25rem; bottom: .25rem; width: 3px; border-radius: 3px; background: var(--flame); }
.s-fact h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.s-fact p { color: var(--ink-2); line-height: 1.65; }
/* How it works: a step of text with the legend of the marks, the screenshot beside it */
.s-howto { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.s-step { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) {
  .s-step { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .s-step--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .s-step--rev .s-step__text { order: 2; }
}
.s-step__text { display: grid; gap: .85rem; align-content: start; }
.s-step__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--flame); color: var(--on-flame); font-weight: 800; font-size: 1.1rem; box-shadow: var(--glow); }
.s-step__text h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.95rem); }
.s-step__text > p { color: var(--ink-2); font-size: 1.04rem; }
.s-step__media { position: relative; margin: 0; }
.s-step__media::before { content: ''; position: absolute; inset: 6% -3% -5% 6%; z-index: -1; border-radius: 40px; background: var(--flame-soft); filter: blur(4px); }
.s-legend { display: grid; gap: .55rem; list-style: none; margin: .35rem 0 0; padding: 0; }
.s-legend li { display: flex; align-items: flex-start; gap: .65rem; color: var(--ink-2); }
.s-legend span, .s-mark { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--on-flame); color: #fff; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.s-legend span { margin-top: .05rem; background: var(--flame); color: var(--on-flame); }
/* A screenshot with its numbered marks: site.js places each mark at its % (data-x, data-y) — the corner of a card */
.s-shot { position: relative; overflow: visible; }
.s-shot img { border-radius: inherit; }
.s-mark { position: absolute; left: var(--x, 0); top: var(--y, 0); z-index: 2; width: 34px; height: 34px; margin: -10px 0 0 -10px; background: var(--flame); color: var(--on-flame); font-size: .95rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 8px 20px rgba(48, 24, 10, .3); opacity: 0; transition: opacity .4s var(--ease); }
.js .s-mark.is-set { opacity: 1; }
[data-bs-theme=dark] .s-mark { box-shadow: 0 0 0 4px rgba(18, 13, 11, .92), 0 8px 20px rgba(0, 0, 0, .5); }
/* Everything it does: the points in two columns */
.s-checks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; max-width: 1040px; margin-inline: auto; }
@media (max-width: 759.98px) { .s-checks--grid { grid-template-columns: minmax(0, 1fr); } }
/* What is stored and what is not */
.s-keep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 1040px; margin-inline: auto; }
@media (max-width: 759.98px) { .s-keep { grid-template-columns: minmax(0, 1fr); } }
.s-keep__col { padding: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.s-keep__col h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; margin-bottom: 1rem; }
.s-keep__col h3 .icon { width: 2.2rem; height: 2.2rem; padding: .5rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.s-keep__col--never h3 .icon { background: var(--good-soft); color: var(--good); }
.s-keep__col ul { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.s-keep__col li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.s-keep__col li .icon { flex: none; margin-top: .2em; width: 1.2rem; height: 1.2rem; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); stroke-width: 2.6; }
.s-keep__col--never li .icon { background: var(--good-soft); color: var(--good); }
/* The plans of a feature: a table from the price list */
.s-ptable { max-width: 1040px; margin-inline: auto; overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); }
.s-ptable table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.s-ptable th, .s-ptable td { padding: .95rem 1rem; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); }
.s-ptable tbody th { text-align: left; font-weight: 650; color: var(--ink); }
.s-ptable thead th { padding-top: 1.25rem; }
.s-ptable thead b { display: block; font-size: 1.15rem; }
.s-ptable thead small { color: var(--muted); font-size: .82rem; font-weight: 600; }
.s-ptable td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.s-ptable .is-first { background: var(--accent-soft); }
.s-ptable tfoot td { border-bottom: 0; padding: 1rem .6rem 1.25rem; }
.s-ptable .s-btn { white-space: normal; }
/* Wider than the screen: the names of the rows stay while the plans scroll by, and a shadow at the right edge says there is
   more (it sits on the scrolling box; a cover in its own background scrolls along and hides it at the end). site.js scrolls to the
   plan the page is about. */
@media (max-width: 719.98px) {
  .s-ptable { background: linear-gradient(270deg, var(--card) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(40, 20, 10, .16), transparent) right / .9rem 100% no-repeat scroll, var(--card); }
  .s-ptable tbody th, .s-ptable thead td:first-child, .s-ptable tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
  .s-ptable table { min-width: 560px; }
  .s-ptable tbody th { min-width: 7.5rem; }
}
.s-yes { width: 1.35rem; height: 1.35rem; color: var(--good); }
.s-no { color: var(--muted); }
/* Pricing: the add-ons with what they give */
.s-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
@media (max-width: 759.98px) { .s-addons { grid-template-columns: minmax(0, 1fr); } }
.s-addons li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.15rem 1.3rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.s-addons__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--flame); color: var(--on-flame); }
.s-addons div > b { display: block; font-size: 1.05rem; }
.s-addons span b { color: var(--ink); font-weight: 650; }
.s-addons span .s-addons__big { font-size: 1.1em; color: var(--ink); white-space: nowrap; }
.s-addons span { color: var(--ink-2); font-size: .94rem; }
/* The gallery: every screenshot cut to the same proportions from its top */
.s-frame--crop { aspect-ratio: 16 / 10; }
.s-frame--crop picture, .s-frame--crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Positioned, so that the hidden name of its feature (.s-sr, absolute) stays in the slide and scrolls with the gallery:
   placed by the section, the twelve names widened the page to 3700 px and a phone zoomed out and loaded more. */
.s-slide figcaption a { position: relative; margin-left: auto; font-weight: 700; text-decoration: none; }
/* The menu: the section in view on the home page, "Features" on the pages of the features */
.s-nav__link[aria-current] { color: var(--ink); background: var(--card-2); box-shadow: inset 0 -2px 0 var(--tangerine); }

/* ── The AI chatbot band ─────────────────────────────────────────────────── */
.s-ai { overflow: hidden; isolation: isolate; }
.s-ai::before { content: ''; position: absolute; z-index: -1; inset: auto -10% -40% 30%; height: 90%; background: radial-gradient(50% 50% at 50% 50%, rgba(242, 69, 110, .28), transparent 70%); pointer-events: none; }
.s-ai::after { content: ''; position: absolute; z-index: -1; inset: -30% 40% auto -10%; height: 80%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 122, 46, .22), transparent 70%); pointer-events: none; }
.s-ai__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) { .s-ai__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.s-ai__text { display: grid; gap: 1.1rem; align-content: start; }
.s-ai__text > p { color: var(--ink-2); font-size: 1.05rem; }
.s-ai__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0 0; padding: 0; list-style: none; }
@media (max-width: 559.98px) { .s-ai__facts { grid-template-columns: minmax(0, 1fr); } }
.s-ai__facts li { display: flex; gap: .7rem; padding: .95rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.s-ai__facts .icon { flex: none; width: 1.35rem; height: 1.35rem; color: var(--dk-accent); margin-top: .1rem; }
.s-ai__facts b { display: block; font-size: .98rem; margin-bottom: .15rem; }
.s-ai__facts span { color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.s-ai__price { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .5rem; }
.s-ai__price p { color: var(--ink-2); font-size: .92rem; max-width: 46ch; }
.s-ai__media { position: relative; display: grid; justify-items: center; }
.s-ai__media .s-frame { width: 100%; }
.s-ai__media figcaption { margin-top: .85rem; color: var(--muted); font-size: .84rem; text-align: center; }
.s-ai__badge { position: absolute; z-index: 2; left: -3%; top: 8%; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 16px; background: rgba(34, 26, 22, .9); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); font-size: .84rem; animation: s-bob 7s ease-in-out infinite; }
.s-ai__badge b { display: block; font-size: 1.05rem; }
.s-ai__badge small { color: var(--dk-muted); }
@media (max-width: 599.98px) { .s-ai__badge { display: none; } }

/* ── Privacy ──────────────────────────────────────────────────────────────── */
.s-privacy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.s-privacy li { display: flex; gap: 1rem; padding: 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); transition: border-color .2s, transform .2s var(--ease); }
.s-privacy li:hover { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); transform: translateY(-2px); }
.s-privacy li > .icon { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 14px; background: var(--good-soft); color: var(--good); flex: none; }
.s-privacy h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.s-privacy p { color: var(--ink-2); font-size: .94rem; }

/* ── Gallery of screenshots ───────────────────────────────────────────────── */
.s-gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.s-gallery__nav { display: flex; gap: .5rem; }
.s-round { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.s-round:hover { border-color: var(--tangerine); color: var(--accent-ink); }
.s-round--prev .icon { transform: scaleX(-1); }
/* Positioned, so the hidden names of the caption links (.s-sr, absolute) scroll with it: placed by an ancestor outside
   it they made the page as wide as the whole track, and a phone's layout viewport 1648 px (the menu with it). */
.s-gallery__track { position: relative; display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding: .5rem max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 1.5rem; scrollbar-width: none; }
.s-gallery__track::-webkit-scrollbar { display: none; }
.s-gallery__track:focus-visible { outline-offset: -3px; }
.s-slide { flex: 0 0 min(78vw, 760px); scroll-snap-align: start; margin: 0; }
.s-slide .s-frame { border-radius: var(--r); }
.s-slide figcaption { display: flex; gap: .5rem; align-items: baseline; margin-top: .85rem; font-size: .95rem; color: var(--ink-2); }
.s-slide figcaption b { color: var(--ink); }
.s-gallery__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; }
/* A dot is drawn small, the button around it is a target of 24 px (26 × 40 px on touch screens and phones) */
.s-gallery__dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 2px; border: 0; background: none; cursor: pointer; }
.s-gallery__dots button::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--line-2); transition: width .3s var(--ease), background-color .3s; }
.s-gallery__dots button[aria-current=true]::before { width: 30px; background: var(--flame); }
/* 13 dots fit a phone: 26 px wide, 40 px tall touch targets (WCAG asks for 24 px). */
@media (pointer: coarse), (max-width: 599.98px) { .s-gallery__dots button { min-width: 26px; height: 40px; } }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.s-billing { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.s-billing button { min-height: 42px; padding: .5rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 700 .93rem/1.2 var(--font); cursor: pointer; }
.s-billing button[aria-pressed=true] { background: var(--flame); color: var(--on-flame); }
.s-billing small { margin-left: .25rem; font-weight: 750; opacity: .85; }
.s-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1180px) { .s-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .s-plans { grid-template-columns: minmax(0, 1fr); } }
/* The name, the line under it, the price, the list and the button share the rows of the neighbouring cards (subgrid),
   so the prices stand on one line however long the line under the name is in a language. */
.s-plan { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 1rem; padding: 2rem 1.5rem 1.6rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s; }
.s-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.s-plan--best { border: 0; background: linear-gradient(var(--card), var(--card)) padding-box, var(--flame) border-box; border: 2px solid transparent; box-shadow: var(--shadow), 0 0 0 6px var(--accent-soft); }
.s-plan--top { background: var(--dk-card); border-color: var(--dk-line); color: var(--dk-ink); --ink: var(--dk-ink); --ink-2: var(--dk-ink-2); --muted: var(--dk-muted); --line: var(--dk-line); --accent-ink: var(--dk-accent); --accent-soft: rgba(255, 122, 46, .18); }
.s-plan--top .s-btn--ghost { color: var(--dk-ink); border-color: #4a3d34; }
.s-plan__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: .32rem .95rem; border-radius: 999px; background: var(--flame); color: var(--on-flame); font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: var(--glow); }
.s-plan__badge--ai { background: var(--dk-card-2); color: var(--dk-accent); box-shadow: none; border: 1px solid #4a3d34; }
.s-plan h3 { font-size: 1.4rem; }
.s-plan__for { color: var(--muted); font-size: .95rem; margin-top: -.6rem; }
.s-plan__price { display: flex; align-items: baseline; gap: .4rem; }
.s-plan__price b { font-size: 2.7rem; font-weight: 800; letter-spacing: calc(-.04em + var(--track)); line-height: 1; font-variant-numeric: tabular-nums; }
.s-plan__price span { color: var(--muted); }
.s-plan__list { display: grid; gap: .55rem; align-content: start; list-style: none; margin: 0 0 .5rem; padding: 0; }
.s-plan__list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); font-size: .95rem; }
.s-plan__list .icon { color: var(--accent-ink); margin-top: .2em; }
.s-addon-note { display: block; text-align: center; text-wrap: balance; }
.s-addon-note .icon { margin-right: .3rem; color: var(--accent-ink); }
.s-agency { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.25rem; padding: 1.5rem 1.75rem; border-radius: var(--r-lg); border: 1px dashed var(--line-2); background: var(--card); }
.s-agency h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.s-agency p { color: var(--ink-2); }

/* ── Questions ────────────────────────────────────────────────────────────── */
.s-faq { display: grid; gap: .75rem; }
.s-faq details { border-radius: var(--r); border: 1px solid var(--line); background: var(--card); transition: border-color .2s, box-shadow .2s; }
.s-faq details[open] { border-color: color-mix(in srgb, var(--tangerine) 40%, var(--line)); box-shadow: var(--shadow-sm); }
.s-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 1.3rem; font-weight: 700; cursor: pointer; list-style: none; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary .icon { flex: none; width: 1.9rem; height: 1.9rem; padding: .35rem; border-radius: 50%; background: var(--card-2); color: var(--muted); transition: transform .25s var(--ease), background-color .2s, color .2s; }
.s-faq details[open] summary .icon { transform: rotate(180deg); background: var(--flame); color: var(--on-flame); }
.s-faq details p { padding: 0 1.3rem 1.2rem; color: var(--ink-2); }

/* ── Call to action at the end ────────────────────────────────────────────── */
.s-cta { position: relative; padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0; background: var(--flame); color: var(--on-flame); overflow: hidden; isolation: isolate; }
.s-cta::before { content: ''; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(26, 14, 8, .12) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.s-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.s-cta h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); margin-bottom: .5rem; letter-spacing: calc(-.035em + var(--track)); }
.s-cta p { color: rgba(26, 14, 8, .84); font-size: 1.05rem; max-width: 56ch; }
.s-cta a:not(.s-btn) { color: var(--on-flame); font-weight: 700; }
.s-cta__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.s-cta .s-btn--ghost { color: var(--on-flame); border-color: rgba(26, 14, 8, .35); }
.s-cta .s-btn--ghost:hover { background: rgba(255, 255, 255, .25); border-color: var(--on-flame); }

/* ── Footer — as on the Smart Counter web: the brand and three columns, the operator with Esentra's offer, © and the languages ── */
.s-footer {
  position: relative; padding: clamp(3.5rem, 6vw, 5.5rem) 0 2.5rem; font-size: .95rem;
  background:
    radial-gradient(52rem 30rem at 100% 0%, rgba(255, 122, 46, .1), transparent 62%),
    radial-gradient(44rem 30rem at 0% 100%, rgba(242, 69, 110, .07), transparent 62%),
    var(--bg-alt);
}
/* The top edge in the flame of the big headlines */
.s-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--flame); }
.s-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 2.5rem; }
.s-footer__brand p { color: var(--ink-2); margin: 1.1rem 0 0; max-width: 26rem; }
.s-footer__brand .s-footer__note { display: flex; align-items: center; gap: .45rem; margin-top: .85rem; color: var(--muted); font-size: .88rem; }
.s-footer__note .icon { flex: none; color: var(--good); }
.s-footer__title { margin: 0 0 1rem; font-size: .8rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 750; }
.s-footer ul { list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; }
.s-footer a { color: var(--ink-2); text-decoration: none; }
.s-footer a:hover { color: var(--ink); text-decoration: underline; }
.s-footer__grid ul a { display: inline-flex; align-items: center; min-height: 24px; }
.s-footer__grid ul { gap: .35rem; }
.s-footer__title--next { margin-top: 1.75rem; }
.s-footer__contact { display: inline-flex; align-items: center; gap: .5rem; }
.s-footer__contact .icon { width: 1.05em; height: 1.05em; color: var(--muted); }
/* Esentra's signature: the operator in one line, Esentra's offer of work to order under it */
.s-footer__esentra { margin-top: clamp(2.5rem, 5vw, 3.25rem); padding-top: 2rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.s-footer .s-footer__esentra a, .s-footer__ids strong { color: var(--ink); font-weight: 650; }
/* The small Esentra mark before the company name, a little taller than the text; light or dark by the mode */
.s-footer__mark { display: inline-flex; width: 1.4em; height: 1.4em; margin-right: .12em; vertical-align: -.35em; }
.s-footer__mark img { width: 100%; height: 100%; }
/* The Visitics mark fills its box, Esentra's has a margin in its drawing: drawn at 80 % they look the same size, on the same line. */
.s-footer__mark--v { align-items: center; justify-content: center; margin-right: .2em; vertical-align: -.22em; }
.s-footer__vmark { width: 80%; height: 80%; }
.s-footer__mark-d, [data-bs-theme=dark] .s-footer__mark-l { display: none; }
[data-bs-theme=dark] .s-footer__mark-d { display: block; }
/* Items in a row with the separator ("·", in the © row "|") in the gap. The separator of an item that starts a line
   falls left out of the list and the clip hides it (the clip margin leaves room for the focus ring of a link). */
.s-footer .s-footer__ids, .s-footer .s-footer__copy { display: flex; flex-wrap: wrap; gap: 0 1.5em; overflow: clip; overflow-clip-margin: 6px; }
.s-footer__ids li, .s-footer__copy li { position: relative; }
.s-footer__ids li + li::before, .s-footer__copy li + li::before { content: "·"; position: absolute; right: 100%; width: 1.5em; text-align: center; }
.s-footer__copy li + li::before { content: "|"; color: var(--line-2); }
/* The offer in one line: the question and the link with an arrow that moves on hover */
.s-footer__pitch { margin: .5rem 0 0; }
.s-footer .s-footer__pitch .s-footer__cta { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-weight: inherit; }
.s-footer__arrow { display: inline-flex; color: var(--accent-ink); transition: transform .2s var(--ease); }
.s-footer__arrow .icon { width: 1.15em; height: 1.15em; }
.s-footer__cta:hover .s-footer__arrow, .s-footer__cta:focus-visible .s-footer__arrow { transform: translateX(3px); }
/* The last row: ©, e-mail and web on the left, the languages on the right; under each other on a narrow screen */
.s-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; line-height: 1.55; }
.s-footer__langs { display: flex; flex-wrap: wrap; gap: .3rem .95rem; font-size: .8rem; font-weight: 650; letter-spacing: .08em; }
.s-footer__langs a { color: var(--muted); }
.s-footer__langs a:hover { color: var(--ink); }
.s-footer__langs span { color: var(--accent-ink); font-weight: 800; }
@media (max-width: 1100px) { .s-footer__grid { grid-template-columns: 1fr 1fr; } }
/* A phone: the product and the other links side by side, the brand and the legal block with the contact across. */
@media (max-width: 640px) {
  .s-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .s-footer__brand, .s-footer__grid > :last-child { grid-column: 1 / -1; }
}
/* ── Legal texts ──────────────────────────────────────────────────────────── */
.s-legal h1 { margin: .75rem 0 .5rem; }
.s-legal h2 { font-size: 1.27rem; margin: 2.25rem 0 .6rem; }
.s-legal p, .s-legal li { color: var(--ink-2); }
.s-legal p + p { margin-top: .75rem; }
.s-legal ul { padding-left: 1.2rem; display: grid; gap: .45rem; }
.s-legal__meta { color: var(--muted); font-size: .93rem; }
.s-legal__table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .5rem; display: block; overflow-x: auto; }
.s-legal__table th, .s-legal__table td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.s-legal__table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
/* A phone: one card per row, the name of each column above its value (site.js writes the names into data-label). */
@media (max-width: 639.98px) {
  .s-legal__table.is-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .s-legal__table.is-cards :is(tbody, tr, td) { display: block; }
  .s-legal__table.is-cards tr { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .s-legal__table.is-cards td { padding: .2rem 0; border: 0; }
  .s-legal__table.is-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .1rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .s-legal__table.is-cards td:first-child { color: var(--ink); font-weight: 600; }
}
.s-legal__note { margin: 1rem 0 0; padding: .75rem 1rem; border-left: 3px solid var(--tangerine); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: .93rem; color: var(--ink-2); }
.s-legal .cl { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 .5rem; margin-top: .7rem; color: var(--ink-2); }
.s-legal .cl > b { color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.s-legal .cl ul { margin-top: .45rem; }
.s-legal__cols { font-size: .9rem; line-height: 1.7; }
.s-legal__cols code { white-space: nowrap; }
@media (max-width: 480px) { .s-legal .cl { grid-template-columns: 2.25rem minmax(0, 1fr); } }
/* A legal document (legal_doc), as on the Smart Counter web: the documents as tabs over the title on a soft glow, the
   contents on the left that stay in view and mark the chapter being read (site.js), every chapter a card under its
   number (a link to a chapter shows its card whole below the header: html has the header in scroll-padding-top). On a
   narrow screen the contents fold into a card above the text. */
.s-legal { isolation: isolate; overflow-x: clip; }
.s-legal.s-sec { padding-top: clamp(1.75rem, 1rem + 3vw, 3.75rem); }
.s-legal::before { content: ''; position: absolute; z-index: -1; inset: 0 -10% auto; height: min(34rem, 80vh); background: radial-gradient(38% 60% at 22% 0%, rgba(255, 122, 46, .14), transparent 70%), radial-gradient(32% 50% at 82% 0%, rgba(242, 69, 110, .1), transparent 70%); pointer-events: none; }
/* The block is as wide as the header (the page's --wrap): the title, the tabs and the contents line up with the logo as
   on the other pages. The text keeps 52rem, lines of ~85 characters. */
.s-legal__wrap > h1 { max-width: 24ch; font-size: clamp(2rem, 1.35rem + 2.4vw, 3.15rem); text-wrap: balance; }
.s-legal__wrap > :is(.s-legal__meta, .s-legal__note) { max-width: 52rem; }
.s-legal__docs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.s-legal__docs a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: .9rem; font-weight: 650; text-decoration: none; transition: border-color .2s, color .2s; }
.s-legal__docs a:hover { border-color: var(--tangerine); color: var(--accent-ink); }
.s-legal__docs a[aria-current] { background: var(--flame); border-color: transparent; color: var(--on-flame); box-shadow: 0 8px 22px rgba(242, 69, 110, .22); }
.s-legal__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 1rem + 2vw, 3rem); align-items: start; margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
/* One column no wider than the body: an implicit (auto) one grew to the widest word of a table, and the German
   privacy table pushed the chapter cards past the window between 640 and ~1000 px; the table scrolls sideways instead. */
.s-legal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 52rem; }
.s-chap { padding: clamp(1.2rem, .9rem + 1vw, 1.75rem) clamp(1.1rem, .7rem + 1.4vw, 2rem); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); }
.s-chap > h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font-size: 1.22rem; line-height: 1.3; scroll-margin-top: calc(clamp(1.2rem, .9rem + 1vw, 1.75rem) + 1px); }
.s-chap > h2 + .cl { margin-top: 0; }
.s-chap__no { flex: none; display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .45rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: .95rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.s-toc { position: sticky; top: calc(var(--header-h) + 1.25rem); max-height: calc(100vh - var(--header-h) - 2.5rem); overflow-y: auto; font-size: .9rem; scrollbar-width: thin; }
.s-toc summary { display: block; margin: 0 0 .7rem; list-style: none; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
/* Next to the text the contents stay open (site.js), the label is no switch */
.js .s-toc summary { pointer-events: none; }
.s-toc summary::-webkit-details-marker { display: none; }
.s-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.s-toc a { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); margin-left: -2px; padding: .32rem .5rem .32rem .8rem; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--ink-2); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s, background-color .2s; }
.s-toc__no { color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.s-toc a[aria-current] { color: var(--ink); border-left-color: var(--tangerine); background: linear-gradient(90deg, var(--accent-soft), transparent 90%); }
.s-toc a[aria-current] .s-toc__no { color: var(--accent-ink); }
.s-toc a:hover, .s-toc a:focus-visible { color: var(--ink); border-left-color: var(--tangerine); }
@media (max-width: 860px) {
  .s-legal__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .s-toc { position: static; max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-sm); }
  .s-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; padding: .8rem 1.15rem; color: var(--ink); }
  .js .s-toc summary { pointer-events: auto; }
  .s-toc summary::after { content: ''; width: .5rem; height: .5rem; margin-right: .2rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-25%) rotate(45deg); transition: transform .2s; }
  .s-toc details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
  .s-toc ol { padding: 0 1.15rem 1rem; border-left: 0; columns: 2; column-gap: 1.25rem; }
  .s-toc a { margin-left: 0; padding: .3rem 0; border-left: 0; break-inside: avoid; }
  .s-toc a[aria-current] { background: none; }
}
@media (max-width: 560px) {
  .s-toc ol { columns: 1; }
  /* The tabs in one row that scrolls sideways, edge to edge */
  .s-legal__docs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) .7rem; scrollbar-width: none; }
  .s-legal__docs::-webkit-scrollbar { display: none; }
  .s-legal__docs a { flex: none; min-height: 40px; padding: .35rem .85rem; font-size: .85rem; white-space: nowrap; }
}

/* ── Licences (a list shared with the admin) ────────────────────────────── */
.lic { list-style: none; margin: 1.5rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.lic__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) 8.5rem; gap: .5rem 1.25rem; align-items: center; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.lic__item:first-child { border-top: 0; }
.lic__main, .lic__meta { min-width: 0; }
.lic__name { font-weight: 650; color: var(--ink); }
.lic__what { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.s-legal .lic__what { color: var(--muted); }
.lic__meta { display: grid; gap: .25rem; justify-items: start; }
.lic__badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: color-mix(in srgb, var(--good) 82%, #000); background: var(--good-soft); }
[data-bs-theme=dark] .lic__badge { color: var(--good); }
.lic__who { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.lic__file { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .85rem; border-radius: 10px; border: 1px solid var(--line); font-size: .88rem; font-weight: 650; text-decoration: none; color: var(--accent-ink); white-space: nowrap; }
@media (max-width: 767.98px) { .lic__item { grid-template-columns: minmax(0, 1fr); } .lic__act:empty { display: none; } }

/* ── Phones and tablets ───────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
  .s-hero__title { letter-spacing: calc(-.035em + var(--track)); }
  .s-hero__cta .s-btn { flex: 1 1 100%; }
  .s-frame__bar { display: none; }
  /* The full width also before the lazy screenshot arrives: centred by auto margins, the figure would shrink to the
     image, 0 px until it loads — every shot then grew the page by ~200 px while it was being scrolled. */
  .s-split__shot { width: 100%; max-width: 440px; margin-inline: auto; }
  .s-ptabs__nav { border-radius: 20px; width: 100%; }
  .s-ptabs__btn { flex: 1 1 auto; justify-content: center; padding-inline: .85rem; border-radius: 14px; }
  .s-agency .s-btn { width: 100%; }
}
/* On a narrow screen the appearance switch moves from the bar into the menu (with words), the language button keeps the icon. */
@media (max-width: 640px) {
  .s-header__tools { gap: .4rem; }
  .s-header__tools .theme-switch { display: none; }
  .lang-menu__btn { min-width: 42px; padding: 0 .65rem; justify-content: center; }
  .lang-menu__btn > span:not(.flag), .lang-menu__btn .lang-menu__chev { display: none; }
  .s-nav__extra { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
  .s-nav__extra .theme-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .s-nav__extra .theme-demo button { min-width: 0; padding: 0 .5rem; text-transform: none; letter-spacing: 0; }
}
/* Touch targets at least 40 px (links below text, the billing switch, links and languages in the footer). */
@media (pointer: coarse), (max-width: 599.98px) {
  .s-footer__grid ul, .s-footer__langs { gap: 0 .5rem; }
  .s-footer__grid ul a, .s-footer__copy a { display: inline-flex; align-items: center; min-height: 40px; }
  .s-footer__langs a, .s-footer__langs span { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; }
  .s-footer .s-footer__pitch .s-footer__cta { min-height: 40px; }
  .s-header .brand { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .s-stage__shot { transform: none; }
  .s-logos__track { overflow-x: auto; }
}
.s-legal__code { margin: .5rem 0 1rem; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--line); overflow-x: auto; font-size: .88rem; }
@media print {
  .s-header, .s-cta, .s-footer, .s-hero__aura, .s-toc, .s-legal__docs, .s-legal::before { display: none; }
  .s-legal__grid, .s-legal__body { display: block; }
  .s-chap { padding: 0; border: 0; box-shadow: none; }
  .s-hero, .s-dark { background: none; color: #000; }
}