@font-face { font-family: "RS Sans"; src: url("/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "RS Sans"; src: url("/fonts/plus-jakarta-sans-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "RS Sans"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0400-04FF; }
/* Release Social tokens (docs/design/SYSTEM.md). Generated by autosocial-design-system. */
:root {
  --rs-font-sans: "RS Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-numeric: tabular-nums;
  --rs-glass-1-blur: 24px;
  --rs-glass-2-blur: 32px;
  --rs-chrome-blur: 40px;
  --rs-chrome-saturate: 180%;
  --rs-accent-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 60%);
  --rs-focus-ring-width: 2px;
  --rs-focus-ring-offset: 3px;
  --rs-target: 44px;
  --rs-reading-width: 680px;
  --rs-gutter: 16px;
  --rs-stagger: 40ms;
  --rs-stagger-max: 6;
  --rs-press-scale: 0.96;
  --rs-motion-reduced: 0;
  --rs-type-display-size: 56px;
  --rs-type-display-line: 60px;
  --rs-type-display-weight: 800;
  --rs-type-display-tracking: -0.04em;
  --rs-type-title-1-size: 34px;
  --rs-type-title-1-line: 40px;
  --rs-type-title-1-weight: 800;
  --rs-type-title-1-tracking: -0.035em;
  --rs-type-title-2-size: 28px;
  --rs-type-title-2-line: 34px;
  --rs-type-title-2-weight: 700;
  --rs-type-title-2-tracking: -0.03em;
  --rs-type-title-3-size: 22px;
  --rs-type-title-3-line: 28px;
  --rs-type-title-3-weight: 700;
  --rs-type-title-3-tracking: -0.02em;
  --rs-type-headline-size: 17px;
  --rs-type-headline-line: 24px;
  --rs-type-headline-weight: 700;
  --rs-type-headline-tracking: -0.01em;
  --rs-type-body-size: 17px;
  --rs-type-body-line: 26px;
  --rs-type-body-weight: 400;
  --rs-type-body-tracking: 0em;
  --rs-type-callout-size: 15px;
  --rs-type-callout-line: 22px;
  --rs-type-callout-weight: 500;
  --rs-type-callout-tracking: 0em;
  --rs-type-footnote-size: 13px;
  --rs-type-footnote-line: 18px;
  --rs-type-footnote-weight: 500;
  --rs-type-footnote-tracking: 0em;
  --rs-type-caption-size: 12px;
  --rs-type-caption-line: 16px;
  --rs-type-caption-weight: 700;
  --rs-type-caption-tracking: 0.04em;
  --rs-space-4: 4px;
  --rs-space-8: 8px;
  --rs-space-12: 12px;
  --rs-space-16: 16px;
  --rs-space-20: 20px;
  --rs-space-24: 24px;
  --rs-space-32: 32px;
  --rs-space-40: 40px;
  --rs-space-56: 56px;
  --rs-space-72: 72px;
  --rs-radius-chip: 8px;
  --rs-radius-field: 12px;
  --rs-radius-button: 14px;
  --rs-radius-button-large: 16px;
  --rs-radius-card: 22px;
  --rs-radius-sheet: 30px;
  --rs-radius-pill: 999px;
  --rs-duration-instant: 100ms;
  --rs-ease-instant: ease-out;
  --rs-duration-quick: 200ms;
  --rs-ease-quick: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rs-duration-standard: 360ms;
  --rs-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --rs-duration-expressive: 560ms;
  --rs-ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rs-canvas-color: #F3F4F8;
  --rs-glass-1-fill: rgba(255, 255, 255, 0.55);
  --rs-glass-2-fill: rgba(255, 255, 255, 0.72);
  --rs-chrome-fill: rgba(255, 255, 255, 0.82);
  --rs-glass-solid: #FFFFFF;
  --rs-edge: rgba(255, 255, 255, 0.9);
  --rs-edge-strong: #5F6583;
  --rs-hairline: rgba(15, 18, 34, 0.08);
  --rs-text-primary: #0F1222;
  --rs-text-secondary: #4A5068;
  --rs-text-tertiary: #5F6583;
  --rs-accent: #2F4DFF;
  --rs-on-accent: #FFFFFF;
  --rs-link: #2F4DFF;
  --rs-selected-tint: rgba(47, 77, 255, 0.12);
  --rs-selected-text: #2438D6;
  --rs-focus-ring: #2F4DFF;
  --rs-success: #086949;
  --rs-success-tint: rgba(8, 105, 73, 0.12);
  --rs-warning: #914D00;
  --rs-warning-tint: rgba(214, 130, 20, 0.16);
  --rs-danger: #B02039;
  --rs-danger-tint: rgba(176, 32, 57, 0.12);
  --rs-neutral: #4A5068;
  --rs-neutral-tint: rgba(15, 18, 34, 0.07);
  --rs-info: #2438D6;
  --rs-info-tint: rgba(47, 77, 255, 0.12);
  --rs-scrim: rgba(15, 18, 34, 0.28);
  --rs-field-fill: #FFFFFF;
  --rs-button-fill: #FFFFFF;
  --rs-field-border: rgba(15, 18, 34, 0.1);
  --rs-track: rgba(15, 18, 34, 0.05);
  --rs-segment-on: #FFFFFF;
  --rs-danger-fill: #B02039;
  --rs-success-fill: #086949;
  --rs-warning-fill: #914D00;
  --rs-neutral-fill: #5F6583;
  --rs-mark-lilac: #A58CFF;
  --rs-mark-peach: #FF9E86;
  --rs-mark-sky: #6CC4FF;
  --rs-mark-azure-from: #7FA2FF;
  --rs-mark-azure-to: #2F4DFF;
  --rs-canvas-image: radial-gradient(520px 400px at 8% 6%, rgba(255, 196, 176, 0.75), transparent 70%), radial-gradient(560px 420px at 96% 4%, rgba(200, 184, 255, 0.75), transparent 70%), radial-gradient(640px 480px at 60% 70%, rgba(176, 220, 255, 0.7), transparent 70%), radial-gradient(480px 380px at 4% 98%, rgba(190, 245, 225, 0.7), transparent 70%);
  --rs-shadow-glass-1: 0 20px 50px rgba(40, 50, 90, 0.1);
  --rs-shadow-glass-2: 0 30px 70px rgba(40, 50, 90, 0.16);
  --rs-shadow-chrome: 0 10px 30px rgba(40, 50, 90, 0.12);
  --rs-shadow-accent: 0 8px 20px rgba(47, 77, 255, 0.35);
  --rs-shadow-segment: 0 2px 8px rgba(40, 50, 90, 0.14);
  --rs-skeleton-base: rgba(15, 18, 34, 0.07);
  --rs-skeleton-shine: rgba(15, 18, 34, 0.135);
  --rs-mark-sheen: 0.55;
  --rs-mark-edge: 0.75;
  --rs-color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --rs-canvas-color: #060913;
  --rs-glass-1-fill: rgba(255, 255, 255, 0.07);
  --rs-glass-2-fill: rgba(255, 255, 255, 0.1);
  --rs-chrome-fill: rgba(22, 26, 44, 0.78);
  --rs-glass-solid: #141826;
  --rs-edge: rgba(255, 255, 255, 0.14);
  --rs-edge-strong: #A4ABC9;
  --rs-hairline: rgba(255, 255, 255, 0.08);
  --rs-text-primary: #F2F4FF;
  --rs-text-secondary: #B4BAD6;
  --rs-text-tertiary: #A4ABC9;
  --rs-accent: #2F4DFF;
  --rs-on-accent: #FFFFFF;
  --rs-link: #8BAAFF;
  --rs-selected-tint: rgba(127, 162, 255, 0.16);
  --rs-selected-text: #C4D3FF;
  --rs-focus-ring: #7FA2FF;
  --rs-success: #5EE0B0;
  --rs-success-tint: rgba(94, 224, 176, 0.14);
  --rs-warning: #FFC96B;
  --rs-warning-tint: rgba(255, 201, 107, 0.14);
  --rs-danger: #FFA1B0;
  --rs-danger-tint: rgba(255, 161, 176, 0.14);
  --rs-neutral: #B4BAD6;
  --rs-neutral-tint: rgba(255, 255, 255, 0.08);
  --rs-info: #C4D3FF;
  --rs-info-tint: rgba(127, 162, 255, 0.16);
  --rs-scrim: rgba(0, 0, 0, 0.5);
  --rs-field-fill: rgba(255, 255, 255, 0.03);
  --rs-button-fill: rgba(255, 255, 255, 0.06);
  --rs-field-border: rgba(255, 255, 255, 0.14);
  --rs-track: rgba(255, 255, 255, 0.06);
  --rs-segment-on: rgba(255, 255, 255, 0.16);
  --rs-danger-fill: #B02039;
  --rs-success-fill: #086949;
  --rs-warning-fill: #914D00;
  --rs-neutral-fill: #5F6583;
  --rs-mark-lilac: #8F74FF;
  --rs-mark-peach: #FF8A70;
  --rs-mark-sky: #4FB6FF;
  --rs-mark-azure-from: #9DB6FF;
  --rs-mark-azure-to: #3D5BFF;
  --rs-canvas-image: radial-gradient(520px 400px at 8% 6%, rgba(255, 120, 96, 0.21), transparent 70%), radial-gradient(560px 420px at 96% 4%, rgba(150, 110, 255, 0.27), transparent 70%), radial-gradient(640px 480px at 60% 70%, rgba(60, 110, 255, 0.24), transparent 70%), radial-gradient(480px 380px at 4% 98%, rgba(40, 200, 170, 0.18), transparent 70%);
  --rs-shadow-glass-1: 0 24px 60px rgba(0, 0, 0, 0.45);
  --rs-shadow-glass-2: 0 24px 60px rgba(0, 0, 0, 0.45);
  --rs-shadow-chrome: 0 10px 30px rgba(0, 0, 0, 0.5);
  --rs-shadow-accent: 0 8px 20px rgba(47, 77, 255, 0.5);
  --rs-shadow-segment: 0 2px 8px rgba(0, 0, 0, 0.3);
  --rs-skeleton-base: rgba(255, 255, 255, 0.07);
  --rs-skeleton-shine: rgba(255, 255, 255, 0.135);
  --rs-mark-sheen: 0.3;
  --rs-mark-edge: 0.35;
  --rs-color-scheme: dark;
}
}
:root[data-theme="dark"] {
  --rs-canvas-color: #060913;
  --rs-glass-1-fill: rgba(255, 255, 255, 0.07);
  --rs-glass-2-fill: rgba(255, 255, 255, 0.1);
  --rs-chrome-fill: rgba(22, 26, 44, 0.78);
  --rs-glass-solid: #141826;
  --rs-edge: rgba(255, 255, 255, 0.14);
  --rs-edge-strong: #A4ABC9;
  --rs-hairline: rgba(255, 255, 255, 0.08);
  --rs-text-primary: #F2F4FF;
  --rs-text-secondary: #B4BAD6;
  --rs-text-tertiary: #A4ABC9;
  --rs-accent: #2F4DFF;
  --rs-on-accent: #FFFFFF;
  --rs-link: #8BAAFF;
  --rs-selected-tint: rgba(127, 162, 255, 0.16);
  --rs-selected-text: #C4D3FF;
  --rs-focus-ring: #7FA2FF;
  --rs-success: #5EE0B0;
  --rs-success-tint: rgba(94, 224, 176, 0.14);
  --rs-warning: #FFC96B;
  --rs-warning-tint: rgba(255, 201, 107, 0.14);
  --rs-danger: #FFA1B0;
  --rs-danger-tint: rgba(255, 161, 176, 0.14);
  --rs-neutral: #B4BAD6;
  --rs-neutral-tint: rgba(255, 255, 255, 0.08);
  --rs-info: #C4D3FF;
  --rs-info-tint: rgba(127, 162, 255, 0.16);
  --rs-scrim: rgba(0, 0, 0, 0.5);
  --rs-field-fill: rgba(255, 255, 255, 0.03);
  --rs-button-fill: rgba(255, 255, 255, 0.06);
  --rs-field-border: rgba(255, 255, 255, 0.14);
  --rs-track: rgba(255, 255, 255, 0.06);
  --rs-segment-on: rgba(255, 255, 255, 0.16);
  --rs-danger-fill: #B02039;
  --rs-success-fill: #086949;
  --rs-warning-fill: #914D00;
  --rs-neutral-fill: #5F6583;
  --rs-mark-lilac: #8F74FF;
  --rs-mark-peach: #FF8A70;
  --rs-mark-sky: #4FB6FF;
  --rs-mark-azure-from: #9DB6FF;
  --rs-mark-azure-to: #3D5BFF;
  --rs-canvas-image: radial-gradient(520px 400px at 8% 6%, rgba(255, 120, 96, 0.21), transparent 70%), radial-gradient(560px 420px at 96% 4%, rgba(150, 110, 255, 0.27), transparent 70%), radial-gradient(640px 480px at 60% 70%, rgba(60, 110, 255, 0.24), transparent 70%), radial-gradient(480px 380px at 4% 98%, rgba(40, 200, 170, 0.18), transparent 70%);
  --rs-shadow-glass-1: 0 24px 60px rgba(0, 0, 0, 0.45);
  --rs-shadow-glass-2: 0 24px 60px rgba(0, 0, 0, 0.45);
  --rs-shadow-chrome: 0 10px 30px rgba(0, 0, 0, 0.5);
  --rs-shadow-accent: 0 8px 20px rgba(47, 77, 255, 0.5);
  --rs-shadow-segment: 0 2px 8px rgba(0, 0, 0, 0.3);
  --rs-skeleton-base: rgba(255, 255, 255, 0.07);
  --rs-skeleton-shine: rgba(255, 255, 255, 0.135);
  --rs-mark-sheen: 0.3;
  --rs-mark-edge: 0.35;
  --rs-color-scheme: dark;
}
@media (max-width: 599px) {
:root { --rs-type-display-size: 40px; --rs-type-display-line: 44px; }
}
@media (min-width: 700px) {
:root { --rs-gutter: 24px; }
}
@media (min-width: 1100px) {
:root { --rs-gutter: 32px; }
}
@media (prefers-reduced-motion: reduce) {
:root, :root[data-theme] {
  --rs-duration-instant: 150ms;
  --rs-ease-instant: ease;
  --rs-duration-quick: 150ms;
  --rs-ease-quick: ease;
  --rs-duration-standard: 150ms;
  --rs-ease-standard: ease;
  --rs-duration-expressive: 150ms;
  --rs-ease-expressive: ease;
  --rs-stagger: 0ms;
  --rs-press-scale: 1;
  --rs-motion-reduced: 1;
}
}
@media (prefers-reduced-transparency: reduce) {
:root, :root[data-theme] {
  --rs-glass-1-fill: var(--rs-glass-solid);
  --rs-glass-2-fill: var(--rs-glass-solid);
  --rs-chrome-fill: var(--rs-glass-solid);
  --rs-glass-1-blur: 0px;
  --rs-glass-2-blur: 0px;
  --rs-chrome-blur: 0px;
}
}
@media (prefers-contrast: more) {
:root, :root[data-theme] {
  --rs-edge: var(--rs-edge-strong);
  --rs-field-border: var(--rs-edge-strong);
  --rs-text-tertiary: var(--rs-text-secondary);
}
}
/* The website (docs/design/WEBSITE.md). The app's tokens come first in the same file; these rules
   use them, so Light, Dark and the device's settings behave as in the app. Widths: phones under
   700 px, tablets from 700, desktops from 1100, as the app switches. */

:root {
  --s-ease: cubic-bezier(.16, 1, .3, 1); /* the website's one curve (WEBSITE_MOTION.md) */
  --s-display: clamp(44px, 5.4vw, 88px);
  --s-margin: 72px;
  --s-space: 100px;
  --s-h1: 80px;
  --s-h2: 52px;
  --s-h2-feature: 46px;
  --s-body: 18px;
  --s-lede: 21px;
  --s-gap: 72px;
  --s-plain: #FFFFFF;
  --s-soft: #F6F7FB;
  --s-mesh: radial-gradient(900px 600px at 0% 0%, rgba(255, 196, 176, 0.7), transparent 70%),
    radial-gradient(900px 640px at 100% 0%, rgba(200, 184, 255, 0.75), transparent 70%),
    radial-gradient(1000px 700px at 50% 100%, rgba(176, 220, 255, 0.7), transparent 70%), #F3F4F8;
  --s-card-fill: rgba(255, 255, 255, 0.62);
  --s-card-edge: rgba(255, 255, 255, 0.9);
  --s-card-shadow: 0 18px 50px rgba(40, 50, 90, 0.10);
  --s-line: rgba(15, 18, 34, 0.08);
  --s-table-head: #F6F7FB;
  --s-us: rgba(47, 77, 255, 0.07);
  --s-shot-shadow: 0 40px 100px rgba(20, 24, 50, 0.22);
  --s-tint: rgba(47, 77, 255, 0.1);
  --s-tint-text: #2438D6;
  --s-no: #B02039;
  --s-dash: #8E93A8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-plain: #0A0E1A;
    --s-soft: #070B16;
    --s-mesh: radial-gradient(900px 600px at 0% 0%, rgba(255, 120, 96, 0.22), transparent 70%),
      radial-gradient(900px 640px at 100% 0%, rgba(150, 110, 255, 0.24), transparent 70%),
      radial-gradient(1000px 700px at 50% 100%, rgba(60, 110, 255, 0.26), transparent 70%), #060913;
    --s-card-fill: rgba(255, 255, 255, 0.06);
    --s-card-edge: rgba(255, 255, 255, 0.12);
    --s-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    --s-line: rgba(255, 255, 255, 0.10);
    --s-table-head: rgba(255, 255, 255, 0.05);
    --s-us: rgba(127, 162, 255, 0.12);
    --s-shot-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
    --s-tint: rgba(127, 162, 255, 0.16);
    --s-tint-text: #C4D3FF;
    --s-no: #FFA1B0;
    --s-dash: #8A91AE;
  }
}
:root[data-theme="dark"] {
  --s-plain: #0A0E1A;
  --s-soft: #070B16;
  --s-mesh: radial-gradient(900px 600px at 0% 0%, rgba(255, 120, 96, 0.22), transparent 70%),
    radial-gradient(900px 640px at 100% 0%, rgba(150, 110, 255, 0.24), transparent 70%),
    radial-gradient(1000px 700px at 50% 100%, rgba(60, 110, 255, 0.26), transparent 70%), #060913;
  --s-card-fill: rgba(255, 255, 255, 0.06);
  --s-card-edge: rgba(255, 255, 255, 0.12);
  --s-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --s-line: rgba(255, 255, 255, 0.10);
  --s-table-head: rgba(255, 255, 255, 0.05);
  --s-us: rgba(127, 162, 255, 0.12);
  --s-shot-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  --s-tint: rgba(127, 162, 255, 0.16);
  --s-tint-text: #C4D3FF;
  --s-no: #FFA1B0;
  --s-dash: #8A91AE;
}

@media (max-width: 1099px) {
  :root { --s-margin: 40px; --s-space: 72px; --s-h1: 56px; --s-h2: 40px; --s-h2-feature: 40px; --s-lede: 20px; --s-gap: 40px; }
}
@media (max-width: 699px) {
  :root { --s-margin: 20px; --s-space: 56px; --s-h1: 40px; --s-h2: 32px; --s-h2-feature: 32px; --s-body: 17px; --s-lede: 19px; --s-gap: 32px; }
}

/* Light and Dark versions of a picture: only the one for the current theme shows. */
.s-dark-only { display: none !important; }
:root[data-theme="dark"] .s-light-only { display: none !important; }
:root[data-theme="dark"] .s-dark-only { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s-light-only { display: none !important; }
  :root:not([data-theme="light"]) .s-dark-only { display: block !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--rs-font-sans);
  font-size: var(--s-body);
  line-height: 1.55;
  color: var(--rs-text-primary);
  background: var(--s-plain);
  -webkit-font-smoothing: antialiased;
}
body.s-menu-open { overflow: hidden; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--rs-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
::selection { background: rgba(47, 77, 255, 0.2); color: inherit; }
:root[data-theme="dark"] ::selection { background: rgba(127, 162, 255, 0.32); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::selection { background: rgba(127, 162, 255, 0.32); } }
/* Anchors land just below the header (its height at each width). */
[id] { scroll-margin-top: 76px; }
@media (max-width: 1099px) { [id] { scroll-margin-top: 72px; } }
@media (max-width: 699px) { [id] { scroll-margin-top: 64px; } }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible + span, [tabindex]:focus-visible {
  outline: 3px solid var(--rs-focus-ring);
  outline-offset: 3px;
  border-radius: 8px;
}
main:focus { outline: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.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-skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 12px;
  background: var(--rs-glass-solid); color: var(--rs-link); font-weight: 800; text-decoration: none;
  box-shadow: 0 10px 30px rgba(15, 18, 34, 0.2);
}
.s-skip:focus { top: 12px; }

.s-wrap { width: 100%; max-width: calc(1296px + 2 * var(--s-margin)); margin: 0 auto; padding: 0 var(--s-margin); }
.s-stack { display: flex; flex-direction: column; gap: 44px; }
.s-stack-s { display: flex; flex-direction: column; gap: 10px; }
.s-center { text-align: center; align-items: center; justify-content: center; }
.s-sec { padding: var(--s-space) 0; }
/* Two sections on the same ground in a row: no change of colour marks the seam, so less space does. */
.s-sec.s-bg-plain + .s-sec.s-bg-plain, .s-sec.s-bg-soft + .s-sec.s-bg-soft { padding-top: calc(var(--s-space) * 0.4); }
.s-sec-tight { padding: 70px 0; }
.s-bg-plain { background: var(--s-plain); }
.s-bg-soft { background: var(--s-soft); }
.s-bg-mesh { background: var(--s-mesh); }
.s-bg-dark {
  background: #060913;
  background-image: radial-gradient(800px 500px at 10% 15%, rgba(255, 120, 96, 0.26), transparent 70%),
    radial-gradient(900px 600px at 90% 85%, rgba(60, 110, 255, 0.38), transparent 70%),
    radial-gradient(700px 500px at 60% 10%, rgba(150, 110, 255, 0.25), transparent 70%);
  color: #F2F4FF;
  --rs-text-primary: #F2F4FF;
  --rs-text-secondary: #B4BAD6;
  --rs-text-tertiary: #A4ABC9;
  --rs-link: #8BAAFF;
  --rs-focus-ring: #7FA2FF;
  --s-card-fill: rgba(255, 255, 255, 0.06);
  --s-card-edge: rgba(255, 255, 255, 0.12);
  --s-line: rgba(255, 255, 255, 0.10);
  --s-tint: rgba(127, 162, 255, 0.16);
  --s-tint-text: #C4D3FF;
}

/* Type */
.s-h1 { font-size: var(--s-h1); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; }
.s-h2 { font-size: var(--s-h2); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; max-width: 1000px; }
/* A heading's full stops and commas sit by their word (html.rs → tighten_punctuation). */
.s-pw { white-space: nowrap; }
.s-pt { margin-left: -0.08em; }
.s-pt-q { margin-left: -0.2em; }
.s-kick { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rs-link); }
.s-bg-dark .s-kick { color: #A4ABC9; }
.s-sub { font-size: var(--s-body); color: var(--rs-text-secondary); line-height: 1.55; max-width: 780px; }
.s-lede { font-size: var(--s-lede); color: var(--rs-text-secondary); line-height: 1.5; max-width: 720px; }
.s-note { font-size: 14px; color: var(--rs-text-tertiary); }
.s-small { font-size: 13px; color: var(--rs-text-tertiary); line-height: 1.5; }
.s-head { display: flex; flex-direction: column; gap: 12px; }
.s-head.s-center .s-sub { margin: 0 auto; }
.s-gradient { background: linear-gradient(90deg, #2F4DFF, #A58CFF, #FF8A70); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .s-gradient { background-image: linear-gradient(90deg, #8BAAFF, #C4B5FF, #FFA48F); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-gradient { background-image: linear-gradient(90deg, #8BAAFF, #C4B5FF, #FFA48F); } }
.s-tag { align-self: center; font-size: 13.5px; font-weight: 700; color: var(--s-tint-text); background: var(--s-tint); border-radius: 999px; padding: 7px 14px; }

/* Buttons */
.s-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.s-btn-s { height: 44px; padding: 0 18px; border-radius: 15px; font-size: 15px; }
.s-btn-m { height: 48px; padding: 0 20px; border-radius: 16px; font-size: 15.5px; }
.s-btn-l { height: 56px; padding: 0 26px; border-radius: 19px; font-size: 17px; }
.s-btn-primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%), #2F4DFF;
  box-shadow: 0 10px 26px rgba(47, 77, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.s-btn-primary:hover { background-color: #2440E8; }
.s-btn-secondary { color: var(--rs-text-primary); background: var(--rs-button-fill); border-color: var(--rs-field-border); }
.s-bg-dark .s-btn-secondary { color: #F2F4FF; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.s-btn-secondary:hover { border-color: var(--rs-edge-strong); }
@media (max-width: 699px) {
  .s-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .s-btns .s-btn { width: 100%; }
  /* A long label (Bulgarian's are) takes a second line rather than running off the side. */
  .s-btns .s-btn { white-space: normal; text-align: center; }
  .s-btns .s-btn-l { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
}

/* Header */
/* The header stays with the reader: clear over the hero, a glass bar once the page moves, out of
   the way while reading down and back as soon as they scroll up (site.js sets the classes). It sits
   under the phone menu (z-index 50). */
.s-header { position: sticky; top: 0; z-index: 40; }
.s-header.s-header-solid {
  /* Opaque enough to stay the page's own colour over the dark sections, not a muddy grey. */
  background: color-mix(in srgb, var(--s-plain) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 1px 0 var(--s-line); /* a line that takes no room, so nothing below moves */
}
.s-header.s-header-away { translate: 0 -100%; }
@media (prefers-reduced-motion: no-preference) {
  .s-header { transition: translate 500ms var(--s-ease), background-color 300ms ease, box-shadow 300ms ease; }
}
.s-header-in { height: 76px; display: flex; align-items: center; gap: 40px; }
.s-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--rs-text-primary); text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.s-logo img, .s-logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.s-nav { display: flex; gap: 26px; margin-left: 20px; }
.s-nav a { font-size: 15px; font-weight: 600; color: var(--rs-text-secondary); text-decoration: none; padding: 6px 0; }
.s-nav a:hover { color: var(--rs-text-primary); }
.s-nav a[aria-current="page"] { color: var(--rs-text-primary); box-shadow: inset 0 -2px 0 #2F4DFF; }
.s-header-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.s-signin { font-size: 15px; font-weight: 700; color: var(--rs-text-primary); text-decoration: none; padding: 10px 4px; }
.s-menu-btn, .s-menu-close, .s-theme-btn {
  display: none; width: 44px; height: 44px; border-radius: 22px; align-items: center; justify-content: center;
  background: var(--rs-button-fill); border: 1px solid var(--rs-field-border); color: var(--rs-text-primary); cursor: pointer;
}
.s-theme-btn { display: inline-flex; }
@media (max-width: 1099px) {
  .s-header-in { height: 72px; gap: 16px; }
  .s-logo { font-size: 18px; }
  .s-nav { display: none; }
  .s-menu-btn { display: inline-flex; }
}
@media (max-width: 699px) {
  .s-header-in { height: 64px; }
  .s-logo { font-size: 16px; }
  .s-logo img, .s-logo svg { width: 26px; height: 26px; }
  .s-signin, .s-header-actions .s-btn { display: none; }
}
/* The header sits on the first section's background. */
.s-header { margin-bottom: -76px; }
@media (max-width: 1099px) { .s-header { margin-bottom: -72px; } }
@media (max-width: 699px) { .s-header { margin-bottom: -64px; } }

/* A page that opens on night (Agencies): the header turns light to read on it. */
body:has(main > .s-hero.s-bg-dark:first-child) .s-header:not(.s-header-solid) {
  --rs-text-primary: #F2F4FF; --rs-text-secondary: #B4BAD6; --rs-button-fill: rgba(255, 255, 255, 0.08);
  --rs-field-border: rgba(255, 255, 255, 0.18); --rs-focus-ring: #7FA2FF;
}
body:has(main > .s-hero.s-bg-dark:first-child) .s-header:not(.s-header-solid) .s-logo .s-light-only { display: none !important; }
body:has(main > .s-hero.s-bg-dark:first-child) .s-header:not(.s-header-solid) .s-logo .s-dark-only { display: block !important; }

/* The phone menu: full screen. */
.s-menu {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: 0 20px 32px;
  background: var(--s-mesh); display: flex; flex-direction: column; gap: 20px;
}
.s-menu[hidden] { display: none; }
.s-menu-top { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.s-menu-close { display: inline-flex; }
.s-menu-links { display: flex; flex-direction: column; }
.s-menu-links a { display: block; padding: 14px 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--rs-text-primary); text-decoration: none; border-bottom: 1px solid var(--s-line); }
.s-menu-links a[aria-current="page"] { color: var(--rs-link); }
.s-menu-btns { flex-direction: column; align-items: stretch; }
.s-menu-btns .s-btn { width: 100%; }
.s-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
@media (min-width: 700px) { .s-menu { padding: 0 40px 40px; } .s-menu-top { height: 72px; } }

/* Light / Dark / System */
.s-theme { display: inline-flex; gap: 2px; padding: 3px; margin: 0; border: 0; border-radius: 12px; background: var(--rs-track); }
.s-theme label { position: relative; cursor: pointer; }
.s-theme input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.s-theme span { display: block; padding: 7px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--rs-text-secondary); }
.s-theme input:checked + span { background: var(--rs-segment-on); color: var(--rs-text-primary); box-shadow: 0 1px 3px rgba(15, 18, 34, 0.12); }

/* English / Български: the same segments, as links to this page in each language. */
.s-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--rs-track); }
.s-lang a { display: block; padding: 7px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--rs-text-secondary); text-decoration: none; }
.s-lang a:hover { color: var(--rs-text-primary); }
.s-lang a[aria-current] { background: var(--rs-segment-on); color: var(--rs-text-primary); box-shadow: 0 1px 3px rgba(15, 18, 34, 0.12); }

/* Footer: always night. */
.s-footer {
  background: #060913; color: #F2F4FF; padding: 64px 0 40px;
  --rs-text-primary: #F2F4FF; --rs-text-secondary: #B4BAD6; --rs-link: #D5D9EC; --rs-focus-ring: #7FA2FF;
  --rs-track: rgba(255, 255, 255, 0.06); --rs-segment-on: rgba(255, 255, 255, 0.16);
}
.s-foot-top { display: flex; gap: 60px; }
.s-foot-brand { width: 320px; flex-shrink: 0; }
.s-foot-brand .s-logo { color: #F2F4FF; font-size: 20px; }
.s-foot-brand p { font-size: 14.5px; color: #B4BAD6; line-height: 1.6; margin-top: 14px; }
.s-foot-cols { flex-grow: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.s-foot-col h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #A4ABC9; margin-bottom: 10px; }
.s-foot-col ul { display: flex; flex-direction: column; gap: 4px; }
.s-foot-col a { display: inline-block; padding: 3px 0; font-size: 14.5px; color: #D5D9EC; text-decoration: none; }
.s-foot-col a:hover { text-decoration: underline; }
.s-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.s-foot-bottom p { font-size: 13px; color: #A4ABC9; }
.s-foot-theme { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; color: #A4ABC9; }
.s-foot-prefs { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
@media (max-width: 1099px) {
  .s-footer { padding: 56px 0 36px; }
  .s-foot-top { flex-direction: column; gap: 32px; }
  .s-foot-brand { width: auto; max-width: 420px; }
  .s-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
  .s-foot-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 699px) {
  .s-footer { padding: 48px 0 32px; }
  .s-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards, ticks, badges, tiles */
.s-icon { flex-shrink: 0; }
.s-card {
  border-radius: 28px; background: var(--s-card-fill); border: 1px solid var(--s-card-edge);
  box-shadow: var(--s-card-shadow); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.s-checks { display: flex; flex-direction: column; gap: 10px; }
.s-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.s-checks .s-icon { color: var(--rs-success); margin-top: 2px; }
.s-bg-dark .s-checks .s-icon { color: #5EE0B0; }
.s-badge { width: 46px; height: 46px; border-radius: 14px; background: var(--s-tint); color: var(--rs-link); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-tile { display: flex; flex-direction: column; gap: 10px; }
.s-tile.s-card { padding: 22px; border-radius: 24px; }
.s-tile h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.s-tile p { font-size: 15px; color: var(--rs-text-secondary); line-height: 1.55; }
.s-grid { display: grid; gap: 18px; }
.s-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1099px) { .s-grid-4, .s-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-grid-4, .s-grid-3, .s-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.s-section-grid-wide .s-grid { gap: 40px 36px; }

/* App screens */
.s-shot { display: block; position: relative; }
.s-shot img { width: 100%; height: auto; }
.s-shot-app img { border-radius: 18px; box-shadow: var(--s-shot-shadow); }
/* Parts of screens keep their own size: never drawn larger than they were captured. */
.s-shot-card img { width: auto; max-width: 100%; margin: 0 auto; border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 24, 50, 0.16); }
.s-phone { width: 260px; flex-shrink: 0; }
.s-phone img { border-radius: 34px; border: 6px solid #0F1222; box-shadow: var(--s-shot-shadow); }
/* In Dark the frame would vanish into the page: a lighter edge keeps the phone's shape. */
:root[data-theme="dark"] .s-phone img, .s-bg-dark .s-phone img { border-color: #2A3048; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-phone img { border-color: #2A3048; } }
.s-crop { width: 100%; height: 100%; }
.s-crop img { width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 16px; }

/* Hero */
.s-hero { position: relative; overflow: hidden; padding: calc(76px + 70px) 0 80px; }
.s-hero-in { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.s-hero-shots { position: relative; max-width: calc(1100px + 2 * var(--s-margin)); margin-top: 60px; }
.s-hero-desktop img { border-radius: 22px; box-shadow: 0 50px 120px rgba(20, 24, 50, 0.28); }
.s-hero-phone { position: absolute; right: calc(var(--s-margin) - 40px); bottom: -40px; width: 232px; }
@media (max-width: 1099px) {
  .s-hero { padding: calc(72px + 56px) 0 64px; }
  .s-hero-shots { max-width: calc(680px + 2 * var(--s-margin)); margin-top: 48px; }
  .s-hero-phone { width: 150px; right: calc(var(--s-margin) - 16px); bottom: -24px; }
  .s-hero-phone img { border-radius: 22px; border-width: 4px; }
}
@media (max-width: 699px) {
  .s-hero { padding: calc(64px + 44px) 0 56px; }
  .s-hero-desktop { display: none; }
  .s-hero-shots { display: flex; justify-content: center; margin-top: 40px; }
  .s-hero-phone { position: static; width: 293px; }
  .s-hero-phone img { border-radius: 36px; border-width: 6px; }
}

/* Networks strip */
.s-strip { padding: 50px 0; }
.s-strip-title { font-size: 14px; letter-spacing: 0.1em; color: var(--rs-text-tertiary); }
.s-nets { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 34px; max-width: 1100px; }
.s-nets li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--rs-text-secondary); }
.s-net { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-net img { width: 100%; height: 100%; object-fit: contain; }
.s-net-word { gap: 4px; padding: 0 8px; border-radius: 999px; background: var(--rs-neutral-tint); font-size: 12px; font-weight: 800; color: var(--rs-text-primary); white-space: nowrap; }
@media (max-width: 699px) { .s-strip { padding: 44px 0; } .s-nets { gap: 16px 22px; } }

/* Numbers */
.s-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.s-stat { display: flex; flex-direction: column; gap: 6px; }
.s-stat-value { font-variant-numeric: tabular-nums; font-size: 56px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.s-stat-what { font-size: 16px; font-weight: 700; }
.s-stat-line { font-size: 14px; color: var(--rs-text-secondary); line-height: 1.5; }
@media (max-width: 1099px) { .s-sec-tight { padding: 56px 0; } .s-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 699px) { .s-sec-tight { padding: 44px 0; } .s-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .s-stat-value { font-size: 40px; } }

/* How it works */
.s-hows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s-how { padding: 28px; border-radius: 30px; display: flex; flex-direction: column; gap: 16px; }
.s-how-visual { height: 250px; border-radius: 22px; background: var(--rs-track); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; }
.s-how h3 { display: flex; align-items: center; gap: 12px; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.s-how p { font-size: 16px; color: var(--rs-text-secondary); line-height: 1.55; }
.s-step-n { width: 34px; height: 34px; border-radius: 17px; background: #2F4DFF; color: #FFFFFF; font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-how-posted { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.s-toast { display: inline-flex; align-items: center; gap: 8px; border-radius: 14px; background: rgba(15, 18, 34, 0.92); color: #FFFFFF; font-size: 14px; font-weight: 700; padding: 10px 14px; box-shadow: 0 16px 40px rgba(15, 18, 34, 0.3); }
.s-toast .s-icon { color: #5EE0B0; }
@media (max-width: 1099px) { .s-hows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-hows { grid-template-columns: minmax(0, 1fr); } .s-how { padding: 20px; } }

/* Before and after */
.s-ba { border-radius: 28px; background: var(--s-plain); border: 1px solid var(--s-line); overflow: hidden; box-shadow: 0 20px 50px rgba(40, 50, 90, 0.08); }
.s-ba table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.s-ba th { text-align: left; padding: 20px 26px; font-size: 15px; font-weight: 800; background: var(--s-table-head); }
.s-ba th + th { background: var(--s-tint); color: var(--s-tint-text); }
.s-ba td { padding: 18px 26px; border-top: 1px solid var(--s-line); font-size: 16px; line-height: 1.5; vertical-align: top; }
.s-ba td > span { display: inline; }
.s-ba td .s-icon { float: left; margin: 3px 12px 0 0; }
.s-ba-before { color: var(--rs-text-secondary); }
.s-ba-before .s-icon { color: var(--s-no); }
.s-ba-after { background: rgba(47, 77, 255, 0.04); }
.s-ba-after .s-icon { color: var(--rs-success); }
@media (max-width: 699px) {
  .s-ba thead { display: none; }
  .s-ba tr { display: block; border-top: 1px solid var(--s-line); }
  .s-ba tr:first-child { border-top: 0; }
  .s-ba td { display: block; border-top: 0; padding: 14px 18px; }
}

/* Features */
.s-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-gap); align-items: center; }
.s-feature.s-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.s-feature.s-flip .s-visual { order: -1; }
.s-feature-text { display: flex; flex-direction: column; gap: 18px; }
.s-feature-text .s-h2 { font-size: var(--s-h2-feature); letter-spacing: -0.04em; line-height: 1.05; }
.s-visual { border-radius: 34px; background: var(--s-mesh); padding: 36px; min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.s-visual > .s-shot-app { width: 100%; }
.s-visual > .s-shot-card { width: 100%; }
.s-visual > .s-phone { width: 270px; }
@media (max-width: 1099px) {
  .s-feature, .s-feature.s-flip { grid-template-columns: minmax(0, 1fr); }
  .s-feature.s-flip .s-visual { order: 0; }
  .s-visual { padding: 28px; min-height: 0; }
  .s-visual > .s-shot-app { max-width: 680px; }
}
@media (max-width: 699px) {
  .s-visual { padding: 18px; border-radius: 24px; }
  .s-visual > .s-phone { width: 240px; }
}

/* A split: words on one side, something else on the other. */
.s-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 60px; align-items: center; }
.s-split-text { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1099px) { .s-split { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* The preview wall */
.s-wall { column-count: 4; column-gap: 20px; }
.s-wall li { break-inside: avoid; margin-bottom: 20px; display: flex; justify-content: center; }
.s-shot-auto { width: 100%; }
@media (max-width: 1099px) { .s-wall { column-count: 2; } }
@media (max-width: 699px) { .s-wall { column-count: 1; } .s-wall li { padding: 0 12px; } }

/* Tables */
.s-table-scroll { position: relative; overflow-x: auto; border-radius: 24px; border: 1px solid var(--s-line); background: var(--s-plain); }
.s-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.s-table th, .s-table td { padding: 12px 16px; border-top: 1px solid var(--s-line); text-align: center; }
.s-table thead th { border-top: 0; background: var(--s-table-head); font-size: 14px; font-weight: 800; padding: 16px; }
.s-table th[scope="row"], .s-table thead th:first-child { text-align: left; }
.s-table th[scope="row"] { font-weight: 700; }
.s-formats th[scope="row"] { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.s-formats td .s-icon { color: var(--rs-success); vertical-align: middle; }
.s-formats td [aria-hidden="true"] { color: var(--s-dash); }
.s-formats td b { font-size: 13.5px; }
@media (max-width: 1099px) { .s-formats { min-width: 860px; } }
.s-compare th, .s-compare td { text-align: left; padding: 16px 22px; }
.s-compare td:last-child { color: var(--rs-text-secondary); }
.s-compare .s-us th, .s-compare .s-us td { background: var(--s-us); font-weight: 800; color: var(--rs-text-primary); }
@media (max-width: 699px) { .s-compare { min-width: 560px; } }

/* A week */
.s-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.s-day { display: flex; flex-direction: column; gap: 12px; }
.s-day .s-kick { font-size: 13px; letter-spacing: 0.08em; }
.s-day-visual { height: 150px; border-radius: 20px; background: var(--s-plain); border: 1px solid var(--s-line); display: flex; align-items: center; justify-content: center; padding: 12px; }
.s-day h3 { font-size: 18px; font-weight: 800; }
.s-day p:last-child { font-size: 14.5px; color: var(--rs-text-secondary); line-height: 1.5; }
.s-day-icon { color: var(--rs-link); display: flex; }
.s-net-row { display: flex; gap: 6px; }
.s-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.s-tone-warning { color: var(--rs-warning); background: var(--rs-warning-tint); }
.s-tone-success { color: var(--rs-success); background: var(--rs-success-tint); }
@media (max-width: 1099px) { .s-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-days { grid-template-columns: minmax(0, 1fr); } }

/* Every device */
.s-kinds { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.s-kinds li { display: flex; align-items: center; gap: 12px; }
.s-kinds b { display: block; font-size: 16px; }
.s-kinds small { display: block; font-size: 14px; color: var(--rs-text-secondary); }
.s-phones { display: flex; justify-content: center; gap: 22px; }
.s-phones .s-phone { width: 210px; }
@media (max-width: 1099px) { .s-phones { flex-wrap: wrap; } .s-phones .s-phone { width: calc(50% - 11px); max-width: 240px; } }
@media (max-width: 699px) { .s-phones { gap: 12px; } .s-phones .s-phone { width: calc(50% - 6px); } .s-phones .s-phone img { border-radius: 22px; border-width: 4px; } .s-phones .s-phone:nth-child(n + 3) { display: none; } }

/* Shortcuts */
.s-shortcuts li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; color: #D5D9EC; }
.s-keys { display: flex; gap: 6px; }
kbd { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: 800; color: #F2F4FF; }

/* Integrations */
.s-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.s-tool { border-radius: 20px; background: var(--s-plain); border: 1px solid var(--s-line); padding: 18px; display: flex; gap: 12px; align-items: flex-start; }
.s-tool-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--rs-track); color: var(--rs-text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-tool b { display: block; font-size: 16px; }
.s-tool small { display: block; font-size: 13.5px; color: var(--rs-text-secondary); margin-top: 2px; }
@media (max-width: 1099px) { .s-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-tools { grid-template-columns: minmax(0, 1fr); } }

/* Who it's for */
.s-whos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s-who { padding: 30px; border-radius: 30px; display: flex; flex-direction: column; gap: 14px; }
.s-who h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.s-who h3 a { color: inherit; text-decoration: none; }
.s-who h3 a:hover { text-decoration: underline; }
.s-who-plan { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--rs-link); }
.s-who > p:not(.s-who-plan) { font-size: 16px; color: var(--rs-text-secondary); line-height: 1.55; }
.s-who .s-checks li { font-size: 15px; }
@media (max-width: 1099px) {
  .s-whos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two by two, the third card takes the whole row rather than sitting alone at half width. */
  .s-whos > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 699px) { .s-whos { grid-template-columns: minmax(0, 1fr); } .s-who { padding: 22px; } }

/* Plans */
.s-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.s-plan { padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.s-plan h3 { font-size: 22px; font-weight: 800; }
.s-plan-featured { box-shadow: 0 0 0 2.5px #2F4DFF, 0 24px 60px rgba(47, 77, 255, 0.2); }
.s-plan-badge { position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 800; color: var(--s-tint-text); background: var(--s-tint); border-radius: 999px; padding: 4px 10px; }
.s-price b { font-size: 36px; font-weight: 800; letter-spacing: -0.045em; }
.s-price > span { font-size: 13px; color: var(--rs-text-secondary); }
.s-price-note { font-size: 12.5px; color: var(--rs-text-tertiary); }
.s-plan .s-checks li { font-size: 14px; gap: 8px; }
.s-plan-action { margin-top: auto; }
.s-plan-action .s-btn { width: 100%; }
.s-more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; text-decoration: none; }
@media (max-width: 1099px) { .s-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-plans { grid-template-columns: minmax(0, 1fr); } }

/* Steps */
.s-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.s-step { display: flex; flex-direction: column; gap: 10px; position: relative; }
.s-step .s-step-n { width: 36px; height: 36px; border-radius: 18px; }
.s-step:not(:last-child)::after { content: ""; position: absolute; left: 46px; right: -12px; top: 17px; height: 2px; background: var(--s-line); }
.s-step h3 { font-size: 19px; font-weight: 800; }
.s-step p { font-size: 15px; color: var(--rs-text-secondary); line-height: 1.55; }
@media (max-width: 1099px) { .s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .s-step::after { display: none; } }
@media (max-width: 699px) { .s-steps { grid-template-columns: minmax(0, 1fr); } }

/* Questions */
.s-faqs { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--s-gap); }
.s-faqs-head { display: flex; flex-direction: column; gap: 12px; }
.s-faqs-head a { font-weight: 700; text-decoration: none; }
.s-faq { border-bottom: 1px solid var(--s-line); }
.s-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 700; cursor: pointer; list-style: none; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary .s-icon { color: var(--rs-text-secondary); transition: transform var(--rs-duration-standard, 200ms) ease; }
.s-faq[open] summary .s-icon { transform: rotate(45deg); }
.s-faq p { padding: 0 0 22px; font-size: 16px; color: var(--rs-text-secondary); line-height: 1.6; max-width: 760px; }
@media (max-width: 1099px) { .s-faqs { grid-template-columns: minmax(0, 1fr); gap: 24px; } .s-faq summary { font-size: 17px; padding: 18px 0; } }

/* The final call to action */
.s-final .s-stack { gap: 22px; }
.s-final-title { font-size: calc(var(--s-h2) + 4px); }
.s-final img, .s-final .s-mark { width: 88px; height: 88px; }
@media (max-width: 699px) { .s-final img, .s-final .s-mark { width: 64px; height: 64px; } }

/* ── Page heroes (the tour, pricing and the pages after them) ── */
:root { --s-h1-page: 68px; }
@media (max-width: 1099px) { :root { --s-h1-page: 56px; } }
@media (max-width: 699px) { :root { --s-h1-page: 40px; } }
/* Bulgarian's long words ("инструментите") fit the narrowest phones a size down. */
@media (max-width: 359px) { :root:lang(bg) { --s-h1: 34px; --s-h1-page: 34px; } }
.s-h1-page { font-size: var(--s-h1-page); line-height: 1.0; }

/* The tour's group chips */
.s-subnav { padding: 26px 0; background: var(--s-plain); border-bottom: 1px solid var(--s-line); }
.s-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.s-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--rs-button-fill); border: 1px solid var(--rs-field-border); font-size: 14.5px; font-weight: 700; color: var(--rs-text-primary); text-decoration: none; }
.s-chip .s-icon { color: var(--rs-link); }
.s-chip-count { color: var(--rs-text-tertiary); font-weight: 600; }
.s-chip:hover { border-color: var(--rs-edge-strong); }
.s-group { scroll-margin-top: 12px; }
@media (max-width: 699px) { .s-chips { justify-content: flex-start; } }

/* A screen in its frame, above a group's features */
.s-frame { border-radius: 34px; background: var(--s-mesh); padding: 40px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.s-frame > .s-shot-app { width: 100%; max-width: 1060px; }
@media (max-width: 1099px) { .s-frame { padding: 28px; } }
@media (max-width: 699px) { .s-frame { padding: 16px; border-radius: 24px; } }
.s-preview-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; width: 100%; }
@media (max-width: 1099px) { .s-preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On phones, a row you swipe, as on Home. */
@media (max-width: 699px) {
  .s-preview-row {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: -16px; padding: 16px; width: calc(100% + 32px); align-items: flex-start;
  }
  .s-preview-row::-webkit-scrollbar { display: none; }
  .s-preview-row > * { flex: 0 0 80%; scroll-snap-align: center; }
}
.s-tool-cloud { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 1100px; }
.s-tool-cloud li { display: flex; align-items: center; gap: 12px; width: 250px; padding: 14px 18px; border-radius: 18px; background: var(--s-plain); box-shadow: 0 10px 30px rgba(40, 50, 90, 0.08); font-size: 15.5px; font-weight: 800; }
.s-tool-cloud .s-badge { width: 38px; height: 38px; border-radius: 12px; }
@media (max-width: 699px) { .s-tool-cloud li { width: 100%; } }
.s-device-row { display: flex; gap: 30px; align-items: flex-end; justify-content: center; width: 100%; }
.s-device-desktop { flex: 0 1 600px; }
.s-device-tablet { flex: 0 1 420px; }
.s-device-phone.s-phone { width: 170px; }
@media (max-width: 1099px) { .s-device-row { gap: 16px; } .s-device-tablet { display: none; } .s-device-phone.s-phone { width: 140px; } }
@media (max-width: 699px) { .s-device-desktop { display: none; } .s-device-phone.s-phone { width: 220px; } }

/* Feature cards */
.s-feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-feature-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 22px; background: var(--s-plain); border: 1px solid var(--s-line); }
.s-bg-plain .s-feature-card { background: var(--s-soft); }
.s-feature-card h3 { font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.s-feature-card p { font-size: 14.5px; color: var(--rs-text-secondary); line-height: 1.5; }
.s-feature-card > p:nth-of-type(1) { flex-grow: 1; }
.s-feature-values { font-size: 13.5px !important; font-weight: 700; color: var(--rs-text-primary) !important; }
@media (max-width: 1099px) { .s-feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-feature-cards { grid-template-columns: minmax(0, 1fr); } }
.s-plan-tag { align-self: flex-start; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.s-plan-tag-every { color: var(--rs-success); background: var(--rs-success-tint); }
.s-plan-tag-team { color: var(--s-tint-text); background: var(--s-tint); }
.s-plan-tag-agency { color: #6A2FC4; background: rgba(122, 63, 214, 0.1); }
.s-plan-tag-enterprise { color: var(--rs-warning); background: var(--rs-warning-tint); }
:root[data-theme="dark"] .s-plan-tag-agency { color: #D4BDFF; background: rgba(180, 140, 255, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-plan-tag-agency { color: #D4BDFF; background: rgba(180, 140, 255, 0.16); } }

/* Monthly / Yearly, and the plan to show on phones */
.s-switch { display: inline-flex; gap: 2px; padding: 4px; margin: 8px 0 0; border: 0; border-radius: 16px; background: var(--rs-track); min-width: 0; max-width: 100%; }
.s-switch label { position: relative; cursor: pointer; }
.s-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.s-switch span { display: block; padding: 10px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--rs-text-secondary); white-space: nowrap; }
.s-switch input:checked + span { background: var(--rs-segment-on); color: var(--rs-text-primary); box-shadow: 0 2px 8px rgba(15, 18, 34, 0.12); }
.s-switch input:focus-visible + span { outline: 3px solid var(--rs-focus-ring); outline-offset: 2px; }
@media (max-width: 699px) { .s-switch span { padding: 10px 12px; font-size: 14px; } }
/* A long label (Bulgarian's "Годишно · спестете до 17 %") takes a second line on the narrowest phones. */
@media (max-width: 399px) { .s-switch label { min-width: 0; } .s-switch span { white-space: normal; text-align: center; } }

/* The full plan cards */
.s-pricing { padding-bottom: 70px; }
.s-pricing .s-hero-in { margin-bottom: 40px; }
.s-plans-full { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.s-plan-full { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.s-plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.s-plan-top h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.s-plan-full .s-plan-badge { position: static; }
.s-plan-who { font-size: 14px; color: var(--rs-text-secondary); margin-top: -8px; }
.s-plan-price .s-price b { font-size: 38px; }
.s-plan-price .s-price > span { font-size: 13.5px; }
.s-plan-price .s-price-note { font-size: 12.5px; color: var(--rs-text-secondary); margin-top: 2px; }
/* The unit moves under the price as a whole when it doesn't fit beside it ("/ месец + ДДС, при
   годишно плащане"); a price said in a word that is long in Bulgarian ("По договаряне") is smaller. */
.s-price > span { display: inline-block; }
:lang(bg) .s-price-word b { font-size: 28px; letter-spacing: -0.03em; }
.s-plan-full > .s-btn { width: 100%; }
.s-limits div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--s-line); font-size: 13.5px; }
.s-limits dt { color: var(--rs-text-secondary); }
.s-limits dd { margin: 0; font-weight: 800; text-align: right; }
.s-plan-group h4 { margin: 6px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rs-text-tertiary); }
.s-plan-group ul { display: flex; flex-direction: column; gap: 6px; }
.s-plan-group li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.s-plan-group li .s-icon { margin-top: 2px; color: var(--rs-success); }
.s-plan-group li[data-on="false"] { color: var(--rs-text-tertiary); }
.s-plan-group li[data-on="false"] > span { text-decoration: line-through; text-decoration-color: var(--s-line); }
.s-plan-group li[data-on="false"] .s-icon { color: var(--rs-text-tertiary); }
.s-plans-note { margin-top: 22px; }
@media (max-width: 1099px) { .s-plans-full { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-plans-full { grid-template-columns: minmax(0, 1fr); } }

/* Worked examples */
.s-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.s-example { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 24px; background: var(--s-plain); border: 1px solid var(--s-line); box-shadow: 0 16px 40px rgba(40, 50, 90, 0.07); }
.s-example .s-kick { font-size: 13px; letter-spacing: 0.08em; }
.s-example h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.s-example dl { margin: 0; }
.s-example dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--s-line); font-size: 15px; }
.s-example dt { color: var(--rs-text-secondary); }
.s-example dd { margin: 0; font-weight: 700; white-space: nowrap; }
.s-example-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 2px solid var(--rs-text-primary); }
.s-example-total span { font-weight: 800; }
.s-example-total b { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
@media (max-width: 1099px) { .s-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-examples { grid-template-columns: minmax(0, 1fr); } }

/* The free trial */
.s-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 36px; }
.s-timeline li { display: flex; flex-direction: column; gap: 10px; }
.s-timeline h3 { font-size: 19px; font-weight: 800; }
.s-timeline p { font-size: 15px; color: var(--rs-text-secondary); line-height: 1.55; }
.s-when { align-self: flex-start; font-size: 13px; font-weight: 800; color: #FFFFFF; border-radius: 999px; padding: 5px 12px; }
.s-when-accent { background: #2F4DFF; }
.s-when-warning { background: #914D00; }
.s-when-success { background: #086949; }
@media (max-width: 1099px) { .s-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px; } }
@media (max-width: 699px) { .s-timeline { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 24px; } }

/* Growing through the plans */
.s-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.s-stages li { display: flex; flex-direction: column; gap: 10px; position: relative; }
.s-stages li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 2px; font-size: 22px; color: var(--rs-text-tertiary); }
.s-stages h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.s-stage-who { font-size: 15px; font-weight: 800; color: var(--rs-link); }
.s-stages p:last-child { font-size: 15px; color: var(--rs-text-secondary); line-height: 1.55; }
@media (max-width: 1099px) { .s-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .s-stages li::after { display: none; } }
@media (max-width: 699px) { .s-stages { grid-template-columns: minmax(0, 1fr); } }

/* Every feature, by plan */
.s-compare-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.s-plan-compare { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s-compare-tabs { display: none; }
.s-features-scroll { border-radius: 24px; border: 1px solid var(--s-line); background: var(--s-plain); }
.s-features { table-layout: fixed; }
.s-features thead td, .s-features thead th { position: sticky; top: 0; z-index: 1; background: var(--s-table-head); border-top: 0; font-size: 16px; padding: 18px 16px; }
.s-features thead td { width: 40%; }
.s-features .s-us-col { color: var(--rs-link); }
.s-features tbody th[scope="row"] { font-weight: 600; font-size: 14.5px; padding: 11px 22px; }
.s-features td { font-size: 14.5px; padding: 11px 16px; }
.s-features td .s-icon { color: var(--rs-success); vertical-align: middle; }
.s-features td [aria-hidden="true"] { color: var(--s-dash); }
.s-features tbody tr:nth-child(odd):not(.s-group-row) { background: rgba(47, 77, 255, 0.025); }
.s-group-row th { text-align: left !important; padding: 20px 22px 8px !important; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rs-link); }
@media (max-width: 1099px) {
  .s-features-scroll { overflow-x: auto; position: relative; }
  .s-features { min-width: 720px; }
  .s-features thead td, .s-features thead th { position: static; }
}
@media (max-width: 699px) {
  /* A fieldset keeps its content's width unless told; on a phone it must shrink to fit. */
  .s-compare-tabs { display: flex; align-self: stretch; min-width: 0; }
  .s-compare-tabs label { flex: 1; min-width: 0; }
  .s-compare-tabs span { text-align: center; padding: 10px 4px; }
  .s-features { min-width: 0; table-layout: auto; }
  .s-features thead td { width: auto; }
  .s-features tbody th[scope="row"] { padding: 10px 16px; }
  .s-features td { text-align: right; padding: 10px 16px; }
  .s-plan-compare:has(input[value="solo"]:checked) [data-plan]:not([data-plan="solo"]),
  .s-plan-compare:has(input[value="team"]:checked) [data-plan]:not([data-plan="team"]),
  .s-plan-compare:has(input[value="agency"]:checked) [data-plan]:not([data-plan="agency"]),
  .s-plan-compare:has(input[value="enterprise"]:checked) [data-plan]:not([data-plan="enterprise"]) { display: none; }
}

/* Enterprise */
.s-talk { padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.s-talk h3 { font-size: 22px; font-weight: 800; }
.s-talk p { color: var(--rs-text-secondary); }

/* ── The audience pages (R36) ── */
.s-hero-split { padding: calc(76px + 70px) 0 90px; }
.s-split-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.s-split-hero-text { display: flex; flex-direction: column; gap: 22px; }
.s-split-hero-text .s-tag { align-self: flex-start; }
.s-split-hero-visual { display: flex; justify-content: center; }
.s-split-hero-visual > .s-shot-app { width: 100%; }
@media (max-width: 1099px) {
  .s-hero-split { padding: calc(72px + 56px) 0 64px; }
  .s-split-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .s-split-hero-visual > .s-shot-app { max-width: 680px; }
}
@media (max-width: 699px) { .s-hero-split { padding: calc(64px + 44px) 0 56px; } }

.s-phone-pair { display: flex; gap: 22px; justify-content: center; align-items: flex-end; }
.s-phone-pair .s-phone { width: 230px; }
.s-phone-pair-hero .s-phone:first-child { width: 260px; }
.s-phone-pair-hero .s-phone:last-child { width: 220px; }
@media (max-width: 699px) {
  .s-phone-pair { gap: 12px; }
  .s-phone-pair .s-phone, .s-phone-pair-hero .s-phone:first-child, .s-phone-pair-hero .s-phone:last-child { width: calc(50% - 6px); }
  .s-phone-pair .s-phone img { border-radius: 22px; border-width: 4px; }
}
.s-preview-pair, .s-report-pair { display: flex; gap: 18px; align-items: flex-start; justify-content: center; width: 100%; }
.s-preview-pair > .s-shot { flex: 1 1 0; min-width: 0; }
.s-report-pair { align-items: center; }
.s-report-pair > .s-paper { flex: 1 1 0; max-width: 330px; }
.s-report-pair > .s-phone { width: 220px; }
.s-paper img { border-radius: 8px; }
@media (max-width: 699px) { .s-report-pair > .s-phone { display: none; } }

.s-plan-split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 60px; align-items: start; }
.s-plan-split .s-split-text { padding-top: 30px; }
.s-plan-single { display: grid; }
@media (max-width: 1099px) { .s-plan-split { grid-template-columns: minmax(0, 1fr); gap: 40px; } .s-plan-split .s-split-text { padding-top: 0; } .s-plan-single { max-width: 440px; } }
.s-plans-two { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 20px; align-items: start; }
@media (max-width: 699px) { .s-plans-two { grid-template-columns: minmax(0, 1fr); } }

.s-life { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding: 36px 30px; }
.s-life li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.s-life p { font-size: 14px; color: var(--rs-text-secondary); line-height: 1.45; }
@media (max-width: 1099px) { .s-life { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-life { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; } .s-life li { flex-direction: row; text-align: left; } .s-life .s-pill { flex-shrink: 0; min-width: 124px; } }
.s-tone-neutral { color: var(--rs-neutral); background: var(--rs-neutral-tint); }
.s-tone-info { color: var(--rs-info); background: var(--rs-info-tint); }

.s-notes { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 440px; }
.s-note-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--s-plain); border: 1px solid var(--s-line); box-shadow: 0 16px 40px rgba(40, 50, 90, 0.07); }
.s-note-from { display: flex; align-items: center; gap: 12px; }
.s-note-from img { width: 40px; height: 40px; border-radius: 10px; }
.s-note-from span { font-size: 12px; font-weight: 600; color: var(--rs-text-tertiary); }
.s-note-card > p:not(.s-small):not(.s-kick) { font-size: 15px; line-height: 1.5; }
.s-note-subject { font-size: 16px !important; font-weight: 800; }

.s-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.s-columns li { display: flex; flex-direction: column; gap: 10px; }
.s-columns h3 { font-size: 20px; font-weight: 800; }
.s-columns p { font-size: 15.5px; color: var(--rs-text-secondary); line-height: 1.55; }
@media (max-width: 1099px) { .s-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.s-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 699px) { .s-steps-3 { grid-template-columns: minmax(0, 1fr); } }

.s-switcher { width: 100%; max-width: 380px; padding: 8px; border-radius: 24px; }
.s-switcher li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; }
.s-switcher li.s-ws-on { background: var(--rs-selected-tint); }
.s-switcher li > span:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; }
.s-switcher b { font-size: 15px; }
.s-switcher small { font-size: 12.5px; color: var(--rs-text-secondary); }
.s-switcher .s-icon { color: var(--rs-link); }
.s-ws-badge { width: 38px; height: 38px; border-radius: 11px; color: #FFFFFF; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Integrations, Security and Compare (R37) ── */
.s-hero-cloud { margin-top: 48px; max-width: 1000px; }
.s-hero-cloud li { width: auto; padding: 12px 16px; font-size: 15px; }
.s-networks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-network { display: flex; gap: 14px; padding: 20px 22px; border-radius: 22px; background: var(--s-soft); border: 1px solid var(--s-line); }
.s-network h3 { font-size: 17px; font-weight: 800; }
.s-network p { font-size: 14.5px; color: var(--rs-text-secondary); line-height: 1.5; margin-top: 4px; }
.s-net-blank { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--rs-neutral-tint); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--rs-text-secondary); }
@media (max-width: 1099px) { .s-networks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-networks { grid-template-columns: minmax(0, 1fr); } }
.s-tool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-tool-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; border-radius: 24px; }
.s-tool-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.s-tool-card h3 { font-size: 19px; font-weight: 800; }
.s-tool-card p { font-size: 15px; color: var(--rs-text-secondary); line-height: 1.55; }
@media (max-width: 1099px) { .s-tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-tool-cards { grid-template-columns: minmax(0, 1fr); } }
.s-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.s-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 22px; border-radius: 24px; background: var(--s-plain); border: 1px solid var(--s-line); }
.s-node:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--rs-text-tertiary); }
.s-node-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--s-tint); color: var(--rs-link); display: flex; align-items: center; justify-content: center; }
.s-node h3 { font-size: 17px; font-weight: 800; }
.s-node p { font-size: 13.5px; color: var(--rs-text-secondary); line-height: 1.45; }
.s-node-accent { background: #2F4DFF; border-color: #2F4DFF; color: #FFFFFF; }
.s-node-accent .s-node-icon { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.s-node-accent p { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 1099px) {
  .s-flow { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 420px; margin: 0 auto; width: 100%; }
  .s-node:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -30px; transform: translateX(-50%); }
}
.s-code { min-width: 0; max-width: 100%; margin: 0; padding: 26px; border-radius: 26px; display: flex; flex-direction: column; gap: 12px; }
.s-code figcaption { font-size: 14px; color: #A4ABC9; }
.s-code pre { margin: 0; max-width: 100%; overflow-x: auto; border-radius: 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #C4D3FF; }
.s-code p code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95em; color: #F2F4FF; }
.s-facts { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.s-fact { width: 250px; padding: 26px; border-radius: 24px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.s-fact .s-stat-value { font-size: 44px; }
@media (max-width: 699px) { .s-fact { width: 100%; } }
.s-rivals { min-width: 960px; }
.s-rivals th, .s-rivals td { text-align: left; vertical-align: top; padding: 18px 16px; font-size: 14.5px; line-height: 1.5; }
.s-rivals th[scope="row"] { font-weight: 800; white-space: nowrap; }
.s-rivals td { color: var(--rs-text-secondary); }
.s-rivals .s-us th, .s-rivals .s-us td { background: var(--s-us); color: var(--rs-text-primary); }
.s-us-name { display: inline-flex; align-items: center; gap: 10px; }
.s-us-name img { width: 24px; height: 24px; }
.s-cost { padding: 22px; border-radius: 22px; background: var(--s-plain); border: 1px solid var(--s-line); box-shadow: 0 16px 40px rgba(40, 50, 90, 0.07); display: flex; flex-direction: column; gap: 6px; }
.s-cost-us { box-shadow: 0 0 0 2.5px #2F4DFF, 0 16px 40px rgba(47, 77, 255, 0.14); }
.s-cost > p:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 18px; }
.s-cost-value { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.s-cost:not(.s-cost-us) .s-cost-value { color: var(--rs-text-secondary); }
.s-honests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-honest { padding: 24px; border-radius: 24px; background: var(--s-plain); border: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 10px; }
.s-honest h3 { font-size: 18px; font-weight: 800; }
.s-honest p { font-size: 15px; color: var(--rs-text-secondary); line-height: 1.55; }
@media (max-width: 1099px) { .s-honests { grid-template-columns: minmax(0, 1fr); } }

/* ── Reading pages: legal, help topics and guides (R38) ── */
.s-reading { padding-top: calc(76px + 48px); }
@media (max-width: 1099px) { .s-reading { padding-top: calc(72px + 32px); } }
@media (max-width: 699px) { .s-reading { padding-top: calc(64px + 24px); } }
.s-reading-in { display: grid; grid-template-columns: 260px minmax(0, 680px); gap: 70px; justify-content: center; }
.s-aside { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; align-self: start; }
.s-aside .s-kick { font-size: 13px; color: var(--rs-text-tertiary); margin-bottom: 8px; }
.s-aside ul { display: flex; flex-direction: column; gap: 2px; }
.s-aside a { display: block; padding: 8px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--rs-text-secondary); text-decoration: none; }
.s-aside a:hover { background: var(--rs-track); color: var(--rs-text-primary); }
.s-aside a[aria-current="page"] { background: var(--s-tint); color: var(--s-tint-text); font-weight: 800; }
@media (max-width: 1099px) {
  .s-reading-in { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 720px; margin: 0 auto; }
  .s-aside { position: static; order: 2; }
}
.s-prose { max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--rs-text-primary); display: flex; flex-direction: column; gap: 16px; }
.s-prose > * { margin: 0; }
.s-prose h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-top: 20px; scroll-margin-top: 96px; }
.s-prose ul, .s-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.s-prose ul { list-style: disc; }
.s-prose ol { list-style: decimal; }
.s-prose .s-checks { padding-left: 0; list-style: none; }
.s-prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--rs-track); }
.s-prose a { font-weight: 700; }
.s-h1-doc { font-size: clamp(36px, 5vw, 52px); line-height: 1.05; }
.s-guide { margin: 0 auto; max-width: 760px; }
.s-crumbs { font-size: 14px; font-weight: 700; color: var(--rs-text-tertiary); }
.s-crumbs a { color: var(--rs-text-tertiary); text-decoration: none; }
.s-crumbs a:hover { text-decoration: underline; }
.s-contents { padding: 16px 18px; border-radius: 16px; background: var(--rs-track); }
.s-contents .s-kick { font-size: 12px; color: var(--rs-text-tertiary); margin-bottom: 6px; }
.s-contents ul { list-style: none; padding: 0; gap: 2px; }
.s-contents a { font-size: 15px; font-weight: 600; text-decoration: none; }
.s-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--rs-warning-tint); font-size: 15px; line-height: 1.55; }
.s-notice .s-icon { color: var(--rs-warning); margin-top: 2px; }
.s-summary { padding: 18px 20px; border-radius: 18px; background: var(--s-tint); font-size: 16px; line-height: 1.6; }
.s-placeholder { color: var(--rs-text-tertiary); }
.s-figure { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.s-figure figcaption { font-size: 14px; color: var(--rs-text-tertiary); }
.s-figure .s-shot-card img { margin: 0; }
.s-guide-end { margin-top: 24px; padding: 26px; border-radius: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.s-guide-end h2 { margin: 0; font-size: 22px; }
.s-guide-end p { margin: 4px 0 0; font-size: 15px; color: var(--rs-text-secondary); }
.s-guide-end .s-btns { width: auto; }
@media (max-width: 699px) { .s-guide-end { padding: 22px 20px; } .s-guide-end .s-btns { width: 100%; } }

/* The help centre */
.s-help-hero { padding-bottom: 60px; }
.s-search { position: relative; width: 100%; max-width: 640px; }
.s-search .s-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--rs-text-tertiary); pointer-events: none; }
.s-search input { width: 100%; height: 60px; padding: 0 20px 0 54px; border-radius: 20px; border: 1px solid var(--rs-field-border); background: var(--rs-glass-solid); color: var(--rs-text-primary); font: inherit; font-size: 18px; box-shadow: 0 10px 30px rgba(20, 24, 50, 0.1); }
.s-search input::placeholder { color: var(--rs-text-tertiary); }
.s-search input:focus-visible { outline: 3px solid var(--rs-focus-ring); outline-offset: 2px; }
.s-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.s-topics li[hidden] { display: none; }
.s-topic { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; text-decoration: none; color: var(--rs-text-primary); font-size: 18px; font-weight: 800; height: 100%; }
.s-topic .s-icon { color: var(--rs-link); }
.s-topic:hover { border-color: var(--rs-edge-strong); }
@media (max-width: 1099px) { .s-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s-topic { padding: 16px; font-size: 16px; } }
.s-help-none { font-size: 16px; color: var(--rs-text-secondary); }
.s-stuck { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; flex-wrap: wrap; }
.s-stuck > .s-icon { color: var(--rs-link); }
.s-stuck > div { flex: 1; min-width: 180px; }
.s-stuck h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.s-stuck p { margin: 0; font-size: 14.5px; color: var(--rs-text-secondary); }

/* Guides */
.s-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.s-guide-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 24px; text-decoration: none; color: var(--rs-text-primary); height: 100%; }
.s-guide-card .s-shot-card img { margin: 0 0 6px; }
.s-guide-card .s-kick { font-size: 12.5px; }
.s-guide-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.s-guide-card p { font-size: 15px; color: var(--rs-text-secondary); }
@media (max-width: 1099px) { .s-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-guides { grid-template-columns: minmax(0, 1fr); } }

/* Talk to us */
.s-contact .s-split-hero { align-items: start; }
.s-form { width: 100%; min-width: 0; max-width: 560px; padding: 30px; border-radius: 30px; display: flex; flex-direction: column; gap: 14px; background: var(--rs-glass-solid); }
.s-form h2 { font-size: 22px; font-weight: 800; }
.s-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 699px) { .s-form { padding: 20px; border-radius: 24px; } .s-form-row { grid-template-columns: minmax(0, 1fr); } }
.s-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; font-weight: 700; }
.s-field small { font-weight: 600; color: var(--rs-text-tertiary); }
.s-field input, .s-field select, .s-field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rs-field-border); background: var(--rs-field-fill); color: var(--rs-text-primary); font: inherit; font-size: 16px; font-weight: 500; }
.s-field textarea { resize: vertical; min-height: 120px; }
.s-field input:focus-visible, .s-field select:focus-visible, .s-field textarea:focus-visible { outline: 3px solid var(--rs-focus-ring); outline-offset: 1px; }
.s-field ::placeholder { color: var(--rs-text-tertiary); }
.s-form .s-btn { width: 100%; }
.s-form-problem { padding: 12px 14px; border-radius: 14px; background: var(--rs-danger-tint); font-size: 15px; line-height: 1.5; }
.s-trap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.s-trap input { width: 1px; height: 1px; padding: 0; border: 0; }
.s-center-hero { min-height: 70vh; display: flex; align-items: center; }
.s-sent-mark { width: 80px; height: 80px; border-radius: 40px; background: var(--rs-success-tint); color: var(--rs-success); display: flex; align-items: center; justify-content: center; }
.s-nf-code { font-size: clamp(96px, 16vw, 140px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: #2F4DFF; }
:root[data-theme="dark"] .s-nf-code { color: #8BAAFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-nf-code { color: #8BAAFF; } }

@media (forced-colors: active) {
  .s-btn, .s-card, .s-theme span, .s-lang a { border: 1px solid CanvasText; }
  .s-gradient { color: CanvasText; background: none; }
}
@media print {
  .s-header, .s-menu, .s-skip, .s-foot-theme { display: none !important; }
}

/* Motion (SYSTEM.md → Motion). `s-motion` is set before the page paints, and only when the
   visitor's device doesn't ask for less motion; without it nothing below moves. */
@keyframes s-arrive { from { opacity: 0; transform: translateY(18px); } }
@keyframes s-pop { from { opacity: 0; transform: translate(36px, 28px) rotate(6deg) scale(0.94); } }
.s-motion .s-hero-in > :not(.s-h1), .s-motion .s-split-hero-text > * {
  animation: s-arrive 560ms cubic-bezier(.32, .72, 0, 1) backwards;
}
.s-motion .s-hero-in > :nth-child(2), .s-motion .s-split-hero-text > :nth-child(2) { animation-delay: 60ms; }
.s-motion .s-hero-in > :nth-child(3), .s-motion .s-split-hero-text > :nth-child(3) { animation-delay: 120ms; }
.s-motion .s-hero-in > :nth-child(4), .s-motion .s-split-hero-text > :nth-child(4) { animation-delay: 180ms; }
.s-motion .s-hero-in > :nth-child(n+5), .s-motion .s-split-hero-text > :nth-child(n+5) { animation-delay: 240ms; }
.s-motion .s-hero-shots, .s-motion .s-split-hero-visual { animation: s-arrive 760ms 260ms cubic-bezier(.32, .72, 0, 1) backwards; }
.s-motion .s-hero-phone { animation: s-pop 1000ms 620ms var(--s-ease) backwards; }

.s-motion .s-rise { opacity: 0; transform: translateY(24px); }
.s-motion .s-rise.s-in {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--s-ease), transform 900ms var(--s-ease);
  transition-delay: calc(var(--s-i, 0) * 40ms);
}

@media (prefers-reduced-motion: no-preference) {
  .s-btn { transition: scale 100ms ease-out, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
  .s-btn:active { scale: 0.96; }
  .s-btn-primary:hover { box-shadow: 0 14px 34px rgba(47, 77, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  .s-menu-btn, .s-theme-btn { transition: transform 100ms ease-out; }
  .s-menu-btn:active, .s-theme-btn:active { transform: scale(0.92); }
  .s-theme-btn svg { transition: transform 500ms var(--s-ease); }
  .s-theme-btn:hover svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* Hovers move with `translate` and `scale`, never `transform`, which motion.js animates. */
  .s-card { transition: translate 500ms var(--s-ease), box-shadow 500ms var(--s-ease); }
  .s-card:hover { translate: 0 -4px; box-shadow: var(--s-card-shadow), 0 22px 50px rgba(20, 24, 50, 0.14); }
  .s-nets li { transition: translate 300ms var(--s-ease), scale 300ms var(--s-ease); }
  .s-nets li:hover { translate: 0 -3px; scale: 1.04; }
  .s-shot-app img, .s-shot-card img { transition: translate 700ms var(--s-ease); }
  .s-visual:hover .s-shot-app img, .s-visual:hover .s-shot-card img { translate: 0 -6px; }
}

/* ── Home, as scenes (WEBSITE_MOTION.md → Second round) ──
   Each scene reads as it is without motion; `s-live` (set by motion.js on desktops, once GSAP is
   ready) turns on the pinned layouts. One curve, `--s-ease`. */

/* The hero's lines, in display type. They play in CSS, before motion.js has loaded. */
/* Home's alone: the other pages' heroes keep their sizes. */
[aria-labelledby="home-title"] .s-h1 { font-size: clamp(var(--s-h1), 8.4vw, 132px); line-height: 0.95; letter-spacing: -0.055em; }
.s-h1 .s-line { display: block; overflow: hidden; padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; }
.s-h1 .s-line > span { display: inline-block; }
@keyframes s-line-up { from { transform: translateY(110%); } }
.s-motion .s-hero .s-h1 .s-line > span { animation: s-line-up 1100ms var(--s-ease) backwards; }
.s-motion .s-hero .s-h1 .s-line:nth-child(2) > span { animation-delay: 120ms; }
/* "Feel it in sync" sweeps once and comes to rest as it always looks. */
@keyframes s-sweep { from { background-position: 100% 0; } }
.s-motion .s-hero .s-h1 .s-gradient {
  background-image: linear-gradient(90deg, #2F4DFF, #A58CFF, #FF8A70, #A58CFF, #2F4DFF);
  background-size: 200% 100%; background-position: 0 0;
  animation: s-sweep 2000ms 300ms var(--s-ease) backwards;
}
.s-motion .s-hero > .s-wrap { position: relative; z-index: 1; }
.s-motion .s-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px circle at var(--s-lx, 50%) var(--s-ly, 28%), rgba(110, 155, 255, 0.2), transparent 70%);
}
.s-hero-desktop { transform-origin: 50% 0; }

/* Scenes breathe more than the sections of other pages. */
.s-statement, .s-story, .s-numbers, .s-inside, section[aria-labelledby="home-devices"],
section[aria-labelledby="home-audiences"] { padding: calc(var(--s-space) * 1.5) 0; }
.s-story .s-h2, .s-inside .s-h2, section[aria-labelledby="home-devices"] .s-h2, section[aria-labelledby="home-audiences"] .s-h2,
.s-final-title { font-size: var(--s-display); line-height: 1.02; max-width: 1200px; }
/* Display headings wrap into even lines, never one word left alone. */
/* Every heading balanced, so none ends on a word of its own. */
.s-h1, .s-h2, :where(main) :is(h2, h3, h4), .s-lede { text-wrap: balance; }
:where(main) p { text-wrap: pretty; }
@media (max-width: 699px) {
  .s-story .s-h2, .s-inside .s-h2, section[aria-labelledby="home-devices"] .s-h2, section[aria-labelledby="home-audiences"] .s-h2,
  .s-final-title { font-size: calc(var(--s-h2) + 4px); }
}

/* The statement. */
.s-statement .s-stack { gap: 40px; }
.s-statement-text {
  font-size: clamp(30px, 4.3vw, 66px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08;
  max-width: 1180px; color: var(--rs-text-primary);
}
.s-statement .s-strip-title { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.s-statement .s-nets { justify-content: flex-start; max-width: none; }
@media (max-width: 699px) { .s-statement-text { font-size: 30px; } }

/* The story. As cards, each step's words under its picture. */
.s-how-words { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1100px) {
  .s-story.s-live { min-height: 100vh; display: flex; align-items: center; padding: 64px 0; }
  .s-story.s-live > .s-wrap {
    position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 80px; row-gap: 36px; align-content: center; min-height: min(640px, calc(100vh - 128px));
  }
  .s-story.s-live .s-head, .s-story.s-live .s-hows { grid-column: 1; }
  .s-story.s-live .s-hows { display: flex; flex-direction: column; gap: 0; }
  .s-story.s-live .s-how {
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: 0; padding: 20px 0 20px 28px; border-left: 1px solid var(--s-line);
  }
  /* The current step is marked on the rail beside its name: a short bar that grows in. It hangs
     from the name, not the step, so the step's picture still takes the stage beside the list. */
  .s-story.s-live .s-how h3, .s-inside.s-live .s-inside-words > .s-kick { position: relative; }
  .s-story.s-live .s-how h3::before, .s-inside.s-live .s-inside-words > .s-kick::before {
    content: ""; position: absolute; top: 50%; height: 30px; margin-top: -15px; width: 3px; border-radius: 3px;
    background: #2F4DFF; transform: scaleY(0); transition: transform 500ms var(--s-ease);
  }
  .s-story.s-live .s-how h3::before { left: -30px; }
  .s-inside.s-live .s-inside-words > .s-kick::before { left: -28px; height: 24px; margin-top: -12px; }
  .s-story.s-live .s-how.is-on h3::before, .s-inside.s-live .is-on .s-inside-words > .s-kick::before { transform: none; }
  .s-story.s-live .s-how:hover { translate: none; }
  .s-story.s-live .s-h2 { font-size: clamp(44px, 4.4vw, 68px); }
  .s-story.s-live .s-how h3 { font-size: 30px; color: var(--rs-text-secondary); transition: color 500ms var(--s-ease); }
  /* Only the current step's sentence shows; the others keep their names. */
  .s-story.s-live .s-how-more {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 600ms var(--s-ease), opacity 400ms var(--s-ease);
  }
  .s-story.s-live .s-how-more > p { overflow: hidden; min-height: 0; }
  .s-story.s-live .s-how.is-on .s-how-more { grid-template-rows: 1fr; opacity: 1; }
  .s-story.s-measure .s-how-more { transition: none; }
  .s-story.s-live .s-how.is-on h3 { color: var(--rs-text-primary); }
  .s-story.s-live .s-how .s-step-n { transition: background-color 500ms var(--s-ease), color 500ms var(--s-ease); }
  .s-story.s-live .s-how:not(.is-on) .s-step-n { background: var(--s-line); color: var(--rs-text-secondary); }
  /* Each picture takes the right-hand column; only the current step's shows. */
  .s-story.s-live .s-how-visual {
    position: absolute; top: 0; bottom: 0; right: var(--s-margin);
    width: calc((100% - 2 * var(--s-margin) - 80px) * 7 / 12); height: auto;
    border-radius: 34px; background: var(--s-mesh); padding: 56px;
    opacity: 0; translate: 0 56px; scale: 0.96; pointer-events: none;
    transition: opacity 600ms var(--s-ease), translate 1000ms var(--s-ease), scale 1000ms var(--s-ease);
  }
  .s-story.s-live .s-how.is-on .s-how-visual { opacity: 1; translate: 0 0; scale: 1; }
  .s-story.s-live .s-crop { display: flex; align-items: center; justify-content: center; }
  .s-story.s-live .s-crop img {
    width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 20px; box-shadow: var(--s-shot-shadow);
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, #000 78%, transparent);
  }
  .s-story.s-live .s-how-posted { gap: 22px; }
  .s-story.s-live .s-how-posted .s-toast { font-size: 17px; padding: 14px 20px; border-radius: 18px; }
  .s-story.s-live .s-how-posted .s-mark { width: 168px; height: 168px; }
}

/* Thirteen previews: on desktops with motion, one row moving sideways as you scroll; on phones, a
   row you swipe. */
@media (min-width: 1100px) {
  .s-previews.s-live { overflow: hidden; padding: 40px 0; min-height: 100vh; display: flex; align-items: center; }
  .s-previews.s-live > .s-wrap { gap: 36px; }
  .s-previews.s-live .s-sub { max-width: 1040px; }
  .s-previews.s-live .s-wall { display: flex; column-count: auto; gap: 24px; width: max-content; align-items: center; }
  .s-previews.s-live .s-wall li { width: clamp(190px, 28vh, 260px); margin: 0; flex-shrink: 0; }
}
@media (max-width: 699px) {
  .s-wall {
    column-count: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--s-margin)); padding: 4px var(--s-margin) 24px; scrollbar-width: none;
    align-items: flex-start;
  }
  .s-wall::-webkit-scrollbar { display: none; }
  .s-wall li { flex: 0 0 76%; margin: 0; padding: 0; scroll-snap-align: center; }
}

/* Numbers, on the brand's own blue, in giant numerals. */
.s-numbers {
  background: #2F4DFF;
  background-image: radial-gradient(900px 600px at 0% 0%, rgba(255, 138, 112, 0.35), transparent 70%),
    radial-gradient(900px 600px at 100% 100%, rgba(165, 140, 255, 0.55), transparent 70%);
  --rs-text-secondary: #FFFFFF;
}
.s-numbers .s-stat-value { font-size: clamp(56px, 7vw, 116px); }
.s-numbers .s-stat-what { font-size: 18px; }
.s-numbers .s-stat-line { opacity: 0.92; }

/* Inside the app: nine features. As rows, words beside the screen; on desktops with motion, the
   features listed on the left and the current one's screen on the stage at the right. */
.s-inside-list { display: flex; flex-direction: column; gap: 120px; }
.s-inside-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-gap); align-items: center; }
.s-inside-item:nth-child(even) .s-visual { order: -1; }
.s-inside-item:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.s-inside-words > div > div { display: flex; flex-direction: column; gap: 16px; padding-top: 14px; }
.s-inside-words h3 { font-size: var(--s-h2-feature); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
@media (max-width: 1099px) {
  .s-inside-list { gap: 72px; }
  .s-inside-item, .s-inside-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .s-inside-item:nth-child(even) .s-visual { order: 0; }
}
@media (min-width: 1100px) {
  .s-inside.s-live .s-inside-list {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0;
    min-height: 100vh; padding: 28px 0;
  }
  .s-inside.s-live .s-inside-item {
    display: block; width: calc((100% - 80px) * 5 / 12); padding: 7px 0 7px 26px;
    border-left: 1px solid var(--s-line); cursor: pointer;
  }
  .s-inside.s-live .s-inside-item.is-on { cursor: default; }
  .s-inside.s-live .s-inside-words > .s-kick {
    font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; text-transform: none;
    color: var(--rs-text-secondary); transition: color 500ms var(--s-ease);
  }
  .s-inside.s-live .s-inside-item:hover .s-kick, .s-inside.s-live .is-on .s-kick { color: var(--rs-text-primary); }
  /* The current feature's words unfold under its name. */
  .s-inside.s-live .s-inside-more {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 600ms var(--s-ease), opacity 400ms var(--s-ease);
  }
  .s-inside.s-live .s-inside-more > div { overflow: hidden; min-height: 0; }
  .s-inside.s-live .is-on .s-inside-more { grid-template-rows: 1fr; opacity: 1; }
  .s-inside.s-live .s-inside-words h3 { font-size: 30px; }
  /* Room inside the folded part goes on its children, so a folded feature is its name alone. */
  .s-inside.s-live .s-inside-more > div { gap: 12px; padding: 0; }
  .s-inside.s-live .s-inside-more h3 { margin-top: 10px; }
  .s-inside.s-live .s-inside-more .s-checks { margin-bottom: 8px; }
  .s-inside.s-live .s-inside-more .s-sub { font-size: 16.5px; }
  .s-inside.s-live .s-inside-more .s-checks { gap: 6px; }
  .s-inside.s-live .s-inside-more .s-checks li { font-size: 15px; }
  .s-inside.s-measure .s-inside-more { transition: none; }
  .s-inside.s-live .s-visual {
    position: absolute; top: 48px; bottom: 48px; right: 0; width: calc((100% - 80px) * 7 / 12);
    min-height: 0; opacity: 0; translate: 0 56px; scale: 0.96; pointer-events: none;
    transition: opacity 600ms var(--s-ease), translate 1000ms var(--s-ease), scale 1000ms var(--s-ease);
  }
  .s-inside.s-live .is-on .s-visual { opacity: 1; translate: 0 0; scale: 1; }
}

/* Every device: Light and Dark phones on the night sky. */
.s-bg-dark .s-kinds small { color: var(--rs-text-secondary); }

/* The final call to action. */
.s-final .s-mark { width: 120px; height: 120px; }
@media (max-width: 699px) { .s-final img, .s-final .s-mark { width: 72px; height: 72px; } }

/* ── The tour, as chapters (WEBSITE_MOTION.md → The tour) ── */
[aria-labelledby="tour-title"] .s-h1, [aria-labelledby="pricing-title"] .s-h1,
[aria-labelledby="integrations-title"] .s-h1, [aria-labelledby="compare-title"] .s-h1 { font-size: clamp(var(--s-h1-page), 6.6vw, 104px); line-height: 0.96; letter-spacing: -0.055em; max-width: 1100px; }
/* The groups stay in reach: under the header, at the top while it is away, the one being read lit
   (site.js). One row that scrolls sideways when it doesn't fit. */
.s-subnav {
  position: sticky; top: 76px; z-index: 39; padding: 12px 0;
  background: color-mix(in srgb, var(--s-plain) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
}
@media (max-width: 1099px) { .s-subnav { top: 72px; } }
@media (max-width: 699px) { .s-subnav { top: 64px; } }
body:has(.s-header-away) .s-subnav { top: 0; }
@media (prefers-reduced-motion: no-preference) { .s-subnav { transition: top 500ms var(--s-ease); } }
.s-subnav .s-chips { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; margin: -4px; padding: 4px; }
.s-subnav .s-chips::-webkit-scrollbar { display: none; }
.s-subnav .s-chips li { flex-shrink: 0; }
.s-chip { transition: background-color 300ms var(--s-ease), border-color 300ms var(--s-ease), color 300ms var(--s-ease); }
.s-chip[aria-current] { background: #2F4DFF; border-color: #2F4DFF; color: #FFFFFF; }
.s-chip[aria-current] .s-icon, .s-chip[aria-current] .s-chip-count { color: rgba(255, 255, 255, 0.82); }
/* A jump to a group lands below the header and the chips. */
.s-group { scroll-margin-top: 150px; }
@media (max-width: 699px) { .s-group { scroll-margin-top: 132px; } }
/* On desktops a chapter's features go by on one side while its screen stays on the other. */
@media (min-width: 1100px) {
  .s-stack.s-chapter {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 36px;
    grid-template-areas: "head frame" "cards frame"; align-items: start;
  }
  .s-chapter-flip .s-stack.s-chapter { grid-template-areas: "frame head" "frame cards"; }
  .s-chapter > .s-head { grid-area: head; }
  .s-chapter > .s-feature-cards { grid-area: cards; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-chapter > .s-frame {
    grid-area: frame; position: sticky; top: 172px; padding: 32px;
    min-height: min(560px, calc(100vh - 220px));
  }
  body:has(.s-header-away) .s-chapter > .s-frame { top: 96px; }
  /* Two previews fit the stage beside the features; Home shows all thirteen. */
  .s-chapter .s-preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-chapter .s-preview-row > :nth-child(n+3) { display: none; }
  .s-chapter .s-tool-cloud li { width: calc(50% - 7px); }
  .s-chapter .s-device-tablet { display: none; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .s-chapter > .s-frame { transition: top 500ms var(--s-ease); }
}
/* A week and the setup steps: a line runs through them, drawn as you scroll (motion.js sets
   `--s-fill`; without it the line is whole). */
@media (min-width: 1100px) {
  .s-days { position: relative; padding-top: 34px; }
  .s-days::before, .s-days::after {
    content: ""; position: absolute; left: 7px; right: calc((100% - 72px) / 5 - 7px); top: 6px; height: 2px;
    background: var(--s-line);
  }
  .s-days::after { background: #2F4DFF; transform: scaleX(var(--s-fill, 1)); transform-origin: 0 50%; }
  .s-day { position: relative; }
  .s-day::before {
    content: ""; position: absolute; left: 0; top: -34px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--s-plain); box-shadow: inset 0 0 0 3px #2F4DFF; z-index: 1;
  }
}

/* ── The pages for creators, teams and agencies, as scenes (WEBSITE_MOTION.md → The audience
   pages); the hero is every page hero's. ── */
/* The title in display type; on desktops the words and buttons under it and the app below them,
   growing as the page moves (motion.js). */
.s-hero-split .s-h1 { font-size: clamp(var(--s-h1-page), 6.4vw, 100px); line-height: 0.96; letter-spacing: -0.055em; max-width: 1150px; }
@media (min-width: 1100px) {
  .s-hero-split .s-split-hero { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .s-hero-split .s-split-hero-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; row-gap: 22px; align-items: start; }
  .s-hero-split .s-split-hero-text > .s-tag, .s-hero-split .s-split-hero-text > .s-h1 { grid-column: 1 / -1; justify-self: start; }
  .s-hero-split .s-split-hero-text > .s-lede { grid-column: 1; grid-row: 3 / span 2; max-width: 620px; }
  .s-hero-split .s-split-hero-text > .s-btns { grid-column: 2; grid-row: 3; justify-self: end; }
  .s-hero-split .s-split-hero-text > .s-note { grid-column: 2; grid-row: 4; justify-self: end; }
  .s-hero-split .s-split-hero-visual > .s-shot-app { max-width: 1080px; }
  .s-hero-split .s-phone-pair-hero .s-phone:first-child { width: 320px; }
  .s-hero-split .s-phone-pair-hero .s-phone:last-child { width: 272px; }
}
/* A plan's words stay in view beside its long card. */
@media (min-width: 1100px) {
  .s-plan-split .s-split-text { position: sticky; top: 120px; }
  body:has(.s-header-away) .s-plan-split .s-split-text { top: 44px; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .s-plan-split .s-split-text { transition: top 500ms var(--s-ease); }
}
/* Steps: each line between two fills in turn as you scroll (motion.js sets `--s-fill` on the
   list; without it the lines are whole). */
@media (min-width: 1100px) {
  .s-steps { --n: 5; }
  .s-steps-3, .s-steps:has(> :nth-child(3):last-child) { --n: 3; }
  .s-steps:has(> :nth-child(4):last-child) { --n: 4; }
  .s-step { --i: 0; }
  .s-step:nth-child(2) { --i: 1; }
  .s-step:nth-child(3) { --i: 2; }
  .s-step:nth-child(4) { --i: 3; }
  .s-step:not(:last-child)::after {
    --p: clamp(0, calc(var(--s-fill, 1) * (var(--n) - 1) - var(--i)), 1);
    background: linear-gradient(90deg, #2F4DFF calc(var(--p) * 100%), var(--s-line) 0);
  }
  /* The life of a post: each step lights in turn, along a line drawn through them. */
  .s-life { position: relative; }
  .s-life::before, .s-life::after {
    content: ""; position: absolute; left: calc(30px + (100% - 140px) / 10); right: calc(30px + (100% - 140px) / 10);
    top: 52px; height: 2px; background: var(--s-line);
  }
  .s-life::after { background: #2F4DFF; transform: scaleX(var(--s-fill, 1)); transform-origin: 0 50%; }
  .s-life li { --i: 0; position: relative; z-index: 1; opacity: calc(0.3 + 0.7 * clamp(0, calc((var(--s-fill, 1) * 4 - var(--i)) * 4 + 1), 1)); }
  .s-life li:nth-child(2) { --i: 1; }
  .s-life li:nth-child(3) { --i: 2; }
  .s-life li:nth-child(4) { --i: 3; }
  .s-life li:nth-child(5) { --i: 4; }
}

/* ── The reading pages: help, guides and the legal pages (WEBSITE_MOTION.md → The reading pages) ── */
/* The side column stays below the header, and at the top while the header is away. */
body:has(.s-header-away) .s-aside { top: 24px; }
@media (prefers-reduced-motion: no-preference) { .s-aside, .s-rail { transition: top 500ms var(--s-ease); } }
/* A line under the header shows how far through the page you are (site.js sets `--s-read`). */
body:has(.s-reading) .s-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #2F4DFF;
  transform: scaleX(var(--s-read, 0)); transform-origin: 0 50%;
}
/* "On this page": in the article on narrower screens, in a column of its own on wide ones, with
   the part being read lit. */
.s-rail { display: none; }
@media (min-width: 1280px) {
  .s-reading-in:has(> .s-rail) { grid-template-columns: 220px minmax(0, 680px) 220px; gap: 56px; }
  .s-reading-in:has(> .s-rail) .s-prose > .s-contents { display: none; }
  .s-rail { display: block; position: sticky; top: 100px; align-self: start; padding: 0; background: none; border-radius: 0; }
  body:has(.s-header-away) .s-rail { top: 24px; }
  .s-rail ul { border-left: 2px solid var(--s-line); }
  .s-rail a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 14px; color: var(--rs-text-secondary); }
}
.s-contents a[aria-current="location"], .s-aside a[aria-current="location"] { color: var(--rs-link); }
.s-rail a[aria-current="location"] { border-left-color: #2F4DFF; font-weight: 800; }
.s-aside a[aria-current="location"] { background: var(--rs-track); }
@media (prefers-reduced-motion: no-preference) { .s-contents a, .s-aside a { transition: color 250ms var(--s-ease), background-color 250ms var(--s-ease), border-color 250ms var(--s-ease); } }
/* The help centre's topics, each with its first sentence. */
.s-topic small { font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--rs-text-secondary); }
@media (max-width: 699px) {
  .s-topics { grid-template-columns: minmax(0, 1fr); }
  .s-topic { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; }
  .s-topic .s-icon { grid-row: span 2; margin-top: 1px; }
  .s-topic small { font-size: 14px; }
}

/* ── Integrations and Compare (WEBSITE_MOTION.md → Integrations and Compare) ── */
/* Drafts in, never straight out: each step lights in turn as you scroll (motion.js sets
   `--s-fill`; without it every step is lit). */
@media (min-width: 1100px) {
  .s-flow > li { --i: 0; opacity: calc(0.3 + 0.7 * clamp(0, calc((var(--s-fill, 1) * 4 - var(--i)) * 4 + 1), 1)); }
  .s-flow > li:nth-child(2) { --i: 1; }
  .s-flow > li:nth-child(3) { --i: 2; }
  .s-flow > li:nth-child(4) { --i: 3; }
  .s-flow > li:nth-child(5) { --i: 4; }
}

/* ── Pricing, as scenes (WEBSITE_MOTION.md → Pricing) ── */
/* Monthly or Yearly, and a plan to show: the light behind the chosen one slides to it (site.js). */
.s-switch { position: relative; }
.s-switch-live::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--s-tw); translate: var(--s-tx) 0;
  border-radius: 12px; background: var(--rs-segment-on); box-shadow: 0 2px 8px rgba(15, 18, 34, 0.12);
}
.s-switch-live input:checked + span { background: none; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .s-switch-ready::before { transition: translate 500ms var(--s-ease), width 500ms var(--s-ease); }
  .s-switch span { transition: color 300ms var(--s-ease); }
}
/* A price's digits roll to the new one: each digit is a column of 0–9 behind a window the size of
   the digit it shows, so the price keeps its own spacing and baseline. */
.s-dg { display: inline-block; position: relative; line-height: 1.1; clip-path: inset(0 -0.3em); }
.s-dg::after { content: attr(data-d); visibility: hidden; }
.s-dg::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; position: absolute; top: 0; left: 0; right: 0;
  text-align: center; translate: 0 calc(var(--d, 0) * -1.1em);
}
.s-roll { white-space: nowrap; }
.s-ch { white-space: pre; }
.s-ch::before { content: attr(data-c); }
/* Split into windows, the digit before a full stop or comma loses the font's kerning, and the
   display tracking leaves a gap as in headings (.s-pt): set them by their digit. */
.s-ch[data-c="."], .s-ch[data-c=","] { margin-left: -0.1em; }
@media (prefers-reduced-motion: no-preference) {
  .s-dg::before { transition: translate 900ms var(--s-ease) var(--s-delay, 0ms); }
  .s-swap { animation: s-swap 500ms var(--s-ease); }
}
@keyframes s-swap { from { opacity: 0; transform: translateY(4px); } }
/* The cards: a bigger price with its unit under it, and on desktops the same rows across the four,
   so the prices, buttons and limits line up. */
.s-plans-full .s-plan-price .s-price b { font-size: 46px; letter-spacing: -0.05em; }
.s-plans-full .s-plan-price [data-price-unit] { display: block; margin-top: 2px; }
:lang(bg) .s-plans-full .s-plan-price .s-price-word b { font-size: 32px; letter-spacing: -0.03em; }
.s-plan-groups { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1100px) {
  .s-plans-full { row-gap: 0; }
  .s-plan-full { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 14px; }
  /* Agencies' two plans fill the row, their features in two columns; Enterprise, much shorter,
     keeps its own height and stays in view beside Agency's list. */
  .s-plans-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-plans-two .s-plan-full { display: flex; }
  .s-plans-two .s-plan-groups { display: block; columns: 2; column-gap: 32px; }
  .s-plans-two .s-plan-groups > * { break-inside: avoid; margin-bottom: 14px; }
  .s-plans-two > :last-child { position: sticky; top: 100px; }
  .s-plans-two .s-plan-group h4 { margin-top: 0; }
  :lang(bg) .s-plans-two .s-price-word b { font-size: 36px; }
  body:has(.s-header-away) .s-plans-two > :last-child { top: 24px; }
}
/* On desktops a bar keeps each plan's price and button in reach while the features go by. */
/* `clip`, not `hidden`, so the bar can stay in reach inside the hero. */
.s-hero.s-pricing { overflow: clip; }
.s-plans-stage { position: relative; }
.s-plan-bar { display: none; }
@media (min-width: 1100px) {
  .s-plan-bar { display: block; position: sticky; top: 84px; z-index: 30; height: 72px; margin-bottom: -72px; pointer-events: none; }
  body:has(.s-header-away) .s-plan-bar { top: 12px; }
  .s-plan-bar-in {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    opacity: 0; translate: 0 -10px; visibility: hidden;
  }
  .s-plan-bar.is-on .s-plan-bar-in { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; }
  /* The name over the price, so long button words (Bulgarian's) leave them room. */
  .s-plan-bar-in > div {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 10px;
    height: 72px; padding: 0 12px 0 18px; border-radius: 20px;
    background: color-mix(in srgb, var(--s-plain) 88%, transparent); border: 1px solid var(--s-line);
    -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
    box-shadow: 0 14px 36px rgba(40, 50, 90, 0.14);
  }
  .s-plan-bar-name { grid-column: 1; font-size: 12.5px; font-weight: 800; color: var(--rs-text-secondary); line-height: 1.2; }
  .s-plan-bar-price { grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; line-height: 1.15; min-width: 0; }
  .s-plan-bar .s-btn { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .s-plan-bar-price b { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; }
  .s-plan-bar-price b:only-child { font-size: 17px; letter-spacing: -0.02em; }
  .s-plan-bar-price > span { font-size: 11.5px; color: var(--rs-text-secondary); white-space: nowrap; }
  .s-plan-bar .s-btn-m { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 13px; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .s-plan-bar { transition: top 500ms var(--s-ease); }
  .s-plan-bar-in { transition: opacity 400ms var(--s-ease), translate 400ms var(--s-ease), visibility 400ms; }
}
/* On tablets and phones the plans are a row you swipe, so each list is read whole and the page
   goes on after one card's length, not four. */
@media (max-width: 1099px) {
  .s-plans-full {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s-margin)); padding: 8px var(--s-margin) 28px; scroll-padding-inline: var(--s-margin);
    align-items: stretch;
  }
  .s-plans-full::-webkit-scrollbar { display: none; }
  .s-plans-full > li { flex: 0 0 min(46%, 400px); scroll-snap-align: start; }
}
@media (max-width: 699px) { .s-plans-full > li { flex-basis: 86%; } }
/* No add-ons: each is struck through as "an add-on", the line drawn as it arrives (motion.js). */
.s-addon { position: relative; margin-left: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--rs-text-secondary); vertical-align: 2px; white-space: nowrap; }
.s-addon::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 2px; background: #D7263D; transform: scaleX(var(--s-fill, 1)); transform-origin: 0 50%; }
@media (min-width: 1100px) {
  /* The free trial: a line runs through the days, drawn as you scroll. */
  [aria-labelledby="pricing-trial"] .s-timeline { position: relative; }
  [aria-labelledby="pricing-trial"] .s-timeline::before, [aria-labelledby="pricing-trial"] .s-timeline::after {
    content: ""; position: absolute; left: 36px; right: 36px; top: 48px; height: 2px; background: var(--s-line);
  }
  [aria-labelledby="pricing-trial"] .s-timeline::after {
    background: linear-gradient(90deg, #2F4DFF 0 55%, #914D00 70%, #086949 90%);
    transform: scaleX(var(--s-fill, 1)); transform-origin: 0 50%;
  }
  [aria-labelledby="pricing-trial"] .s-when { position: relative; z-index: 1; }
  /* Growing: the plans are steps, each a little higher, rising out of the floor in turn as you
     scroll (motion.js sets `--s-fill`; without it they stand where they are). */
  [aria-labelledby="pricing-grow"] .s-stages { align-items: end; clip-path: inset(-400px -60px 0 -60px); }
  [aria-labelledby="pricing-grow"] .s-stages li {
    --i: 0; --s-up: clamp(0, calc(var(--s-fill, 1) * 2.5 - var(--i) * 0.5), 1);
    translate: 0 calc((1 - var(--s-up)) * (74px + var(--i) * 48px));
  }
  [aria-labelledby="pricing-grow"] .s-stages li::after { display: none; }
  [aria-labelledby="pricing-grow"] .s-stages li::before {
    content: ""; order: 1; height: calc(56px + var(--i) * 48px); margin-top: 18px; border-radius: 18px 18px 6px 6px;
    background: linear-gradient(180deg, #2F4DFF, color-mix(in srgb, #2F4DFF 30%, transparent));
    opacity: calc(0.35 + var(--i) * 0.2);
  }
  [aria-labelledby="pricing-grow"] .s-stages li:nth-child(2) { --i: 1; }
  [aria-labelledby="pricing-grow"] .s-stages li:nth-child(3) { --i: 2; }
  [aria-labelledby="pricing-grow"] .s-stages li:nth-child(4) { --i: 3; }
}

/* Headings rising by line: the mask leaves room for descenders. */
.s-ln-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* Cards under a mouse carry a light. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .s-motion .s-grid .s-card, .s-motion .s-whos .s-card, .s-motion .s-plans .s-card {
    background-image: radial-gradient(280px circle at var(--s-cx, -400px) var(--s-cy, -400px), rgba(110, 155, 255, 0.16), transparent 70%);
  }
}

/* Smooth scroll on desktops (Lenis 1.3.11's own rules, and no CSS smoothing under it). */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Between pages the header stays and the page slides in (Chrome and Safari; others just load). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .s-header { view-transition-name: s-header; }
  ::view-transition-old(root) { animation: s-page-out 280ms var(--s-ease) both; }
  ::view-transition-new(root) { animation: s-page-in 700ms var(--s-ease) both; }
}
@keyframes s-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes s-page-in { from { opacity: 0; transform: translateY(24px); } }