/*
 * ChatPuff public website: Bootstrap 5 plus the brand kit, without the Metoxi theme (public-website.md §1).
 * Colors from design/brand/README.txt. Light and dark follow the visitor's system setting; the switch
 * in the header (site.js) sets data-theme on <html>, which then wins. The pages work without JavaScript.
 * Fonts are self-hosted: no request ever goes to Google Fonts or another CDN.
 */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../../theme/fonts/inter/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../../theme/fonts/inter/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../../theme/fonts/inter/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../../theme/fonts/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cp-indigo: #2b13a6;
  --cp-violet: #7a5cff;
  --cp-pink: #e94399;
  --cp-blush: #feeff3;
  --cp-night: #0f0f14;

  --cp-site-bg: var(--cp-blush);
  --cp-site-card: #fff;
  --cp-site-text: #2a2840;
  --cp-site-muted: #625f7a;
  --cp-site-heading: var(--cp-indigo);
  --cp-site-link: var(--cp-indigo);
  --cp-site-border: rgba(43, 19, 166, 0.08);
  --cp-site-glow-pink: rgba(233, 67, 153, 0.16);
  --cp-site-glow-violet: rgba(122, 92, 255, 0.18);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --cp-site-bg: var(--cp-night);
  --cp-site-card: #16161d;
  --cp-site-text: #e6e4f2;
  --cp-site-muted: #a9a6c2;
  --cp-site-heading: #fff;
  --cp-site-link: #b7a9ff;
  --cp-site-border: rgba(255, 255, 255, 0.08);
  --cp-site-glow-pink: rgba(233, 67, 153, 0.22);
  --cp-site-glow-violet: rgba(122, 92, 255, 0.26);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-site-bg: var(--cp-night);
    --cp-site-card: #16161d;
    --cp-site-text: #e6e4f2;
    --cp-site-muted: #a9a6c2;
    --cp-site-heading: #fff;
    --cp-site-link: #b7a9ff;
    --cp-site-border: rgba(255, 255, 255, 0.08);
    --cp-site-glow-pink: rgba(233, 67, 153, 0.22);
    --cp-site-glow-violet: rgba(122, 92, 255, 0.26);
    color-scheme: dark;
  }
}

body.cp-site {
  min-height: 100vh;
  font-family: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--cp-site-text);
  background:
    radial-gradient(circle at 12% 18%, var(--cp-site-glow-pink), transparent 42%),
    radial-gradient(circle at 88% 82%, var(--cp-site-glow-violet), transparent 42%),
    var(--cp-site-bg);
  background-attachment: fixed;
}

.cp-site-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 2.5rem 1rem;
}

.cp-site-card {
  width: 100%;
  max-width: 720px;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(43, 19, 166, 0.25);
}

.cp-site-logo {
  display: block;
  width: 220px;
  max-width: 70%;
  height: auto;
  margin-bottom: 2rem;
}

.cp-site h1 {
  margin-bottom: 1rem;
  color: var(--cp-site-heading);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cp-site-lead {
  margin-bottom: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.6;
}

.cp-site-features {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.cp-site-features li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.55;
}

/* A white check mark on a pink dot. */
.cp-site-features li::before {
  content: '';
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--cp-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.cp-site-next {
  margin-bottom: 2rem;
  color: var(--cp-site-muted);
}

.cp-site-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--cp-indigo), var(--cp-violet));
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(43, 19, 166, 0.6);
  font-size: 1.1rem;
  font-weight: 700;
}

.cp-site-soon-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--cp-pink);
  animation: cp-site-pulse 2s infinite;
}

@keyframes cp-site-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(233, 67, 153, 0.7);
  }
  70% {
    box-shadow: 0 0 0 0.6rem rgba(233, 67, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(233, 67, 153, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-site-soon-dot {
    animation: none;
  }
}

/* "Follow ChatPuff": one round button per profile, with its inline icon. */
.cp-site-follow {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cp-site-border);
}

.cp-site-follow-label {
  margin: 0 0 0.75rem;
  color: var(--cp-site-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.cp-site-follow ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-site-follow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--cp-site-border);
  border-radius: 50%;
  color: var(--cp-site-muted);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.cp-site-follow a:hover,
.cp-site-follow a:focus-visible {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--cp-indigo), var(--cp-violet));
}

.cp-site-footer {
  color: var(--cp-site-muted);
  font-size: 0.9rem;
  text-align: center;
}

.cp-site-footer a {
  color: var(--cp-site-link);
  text-decoration: none;
}

.cp-site-footer a:hover,
.cp-site-footer a:focus-visible {
  text-decoration: underline;
}

.cp-site-languages,
.cp-site-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.cp-site-languages a[aria-current] {
  color: var(--cp-site-heading);
  font-weight: 700;
}

.cp-site-credit {
  margin: 0;
}

.cp-site-credit a {
  font-weight: 600;
}

/* Legal pages: a wider card and readable prose. */
.cp-site-card-wide {
  max-width: 860px;
}

.cp-site-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
}

.cp-site-legal-nav a {
  color: var(--cp-site-link);
  text-decoration: none;
}

.cp-site-legal-nav a[aria-current] {
  color: var(--cp-site-heading);
  font-weight: 700;
}

.cp-site-legal-nav a:hover,
.cp-site-legal-nav a:focus-visible,
.cp-site-prose a:hover,
.cp-site-prose a:focus-visible {
  text-decoration: underline;
}

.cp-site-legal-meta {
  margin-bottom: 1rem;
  color: var(--cp-site-muted);
  font-size: 0.9rem;
}

.cp-site-notice {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--cp-pink);
  border-radius: 0.5rem;
  background: rgba(233, 67, 153, 0.08);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cp-site-prose {
  line-height: 1.65;
}

.cp-site-prose h2 {
  margin: 2rem 0 0.75rem;
  color: var(--cp-site-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cp-site-prose h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.cp-site-prose p,
.cp-site-prose ul,
.cp-site-prose ol {
  margin-bottom: 0.9rem;
}

.cp-site-prose li {
  margin-bottom: 0.35rem;
}

.cp-site-prose a {
  color: var(--cp-site-link);
  text-decoration: none;
}

.cp-site-prose table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cp-site-prose th,
.cp-site-prose td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--cp-site-border);
  text-align: left;
  vertical-align: top;
}

.cp-site-prose th {
  color: var(--cp-site-heading);
  font-weight: 700;
}

.cp-site-prose mark {
  padding: 0 0.2em;
  border-radius: 0.25rem;
  background: rgba(233, 67, 153, 0.18);
  color: inherit;
}

@media (max-width: 600px) {
  .cp-site-prose table,
  .cp-site-prose thead,
  .cp-site-prose tbody,
  .cp-site-prose tr,
  .cp-site-prose th,
  .cp-site-prose td {
    display: block;
  }

  .cp-site-prose thead {
    display: none;
  }

  .cp-site-prose tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cp-site-border);
  }

  .cp-site-prose td {
    padding: 0.15rem 0;
    border: 0;
  }

  .cp-site-prose td::before {
    content: attr(data-label);
    display: block;
    color: var(--cp-site-muted);
    font-size: 0.8rem;
  }
}

/*
 * The website (layout/website.html.twig): header, sections, cards and footer. Buttons and text keep a
 * contrast of at least 4.5:1 in both color schemes.
 */
:root {
  --cp-site-page: #fffafb;
  --cp-site-tint: var(--cp-blush);
  --cp-site-cta: #c7257a;
  --cp-site-cta-hover: #a91d66;
  --cp-site-accent: var(--cp-pink);
  --cp-site-primary: var(--cp-indigo);
  --cp-site-shadow: 0 1.25rem 2.5rem -1.5rem rgba(43, 19, 166, 0.28);
  --cp-site-header: rgba(255, 250, 251, 0.86);
}

:root[data-theme="dark"] {
  --cp-site-page: var(--cp-night);
  --cp-site-tint: #15151d;
  --cp-site-primary: var(--cp-violet);
  --cp-site-shadow: 0 1.25rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6);
  --cp-site-header: rgba(15, 15, 20, 0.86);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-site-page: var(--cp-night);
    --cp-site-tint: #15151d;
    --cp-site-primary: var(--cp-violet);
    --cp-site-shadow: 0 1.25rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6);
    --cp-site-header: rgba(15, 15, 20, 0.86);
  }
}

body.cp-site-full {
  background: var(--cp-site-page);
  line-height: 1.6;
}

.cp-site-full a {
  color: var(--cp-site-link);
}

.cp-site-skip {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--cp-site-card);
  color: var(--cp-site-heading);
}

.cp-site-skip:focus {
  top: 1rem;
}

/* The preview before launch: only ChatPuff's own people see this bar. */
.cp-site-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1rem;
  background: #1f1147;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}

.cp-site-preview a {
  color: #fff;
  font-weight: 650;
}

/* Header */
.cp-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cp-site-header);
  border-bottom: 1px solid var(--cp-site-border);
  backdrop-filter: saturate(1.4) blur(10px);
}

.cp-site-header-inner {
  /* The Integrations menu's panel is placed against the header's row. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.cp-site-brand img {
  display: block;
  width: 132px;
  height: auto;
}

.cp-site-nav {
  display: none;
  flex: 1;
  /* The full height of the header, so the pointer stays on a menu item on its way down to its panel. */
  align-self: stretch;
}

.cp-site-nav > ul,
.cp-site-dropdown-menu ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-site-nav > ul > li > a,
.cp-site-signin {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--cp-site-text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.cp-site-nav > ul > li > a[aria-current],
.cp-site-dropdown-menu ul a[aria-current] {
  color: var(--cp-site-heading);
  font-weight: 650;
}

.cp-site-nav > ul > li > a:hover,
.cp-site-nav > ul > li > a:focus-visible,
.cp-site-signin:hover,
.cp-site-signin:focus-visible {
  background: var(--cp-site-tint);
  color: var(--cp-site-heading);
}

.cp-site-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.cp-site-signin {
  display: none;
}

/* Dropdowns (language, mobile menu): <details>, so they work without JavaScript. */
.cp-site-dropdown {
  position: relative;
}

.cp-site-dropdown summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--cp-site-text);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.cp-site-dropdown summary::-webkit-details-marker {
  display: none;
}

.cp-site-dropdown summary:hover,
.cp-site-dropdown[open] summary {
  background: var(--cp-site-tint);
}

.cp-site-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 12rem;
  padding: 0.5rem;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 0.75rem;
  box-shadow: var(--cp-site-shadow);
}

.cp-site-dropdown-menu,
.cp-site-dropdown-menu ul {
  flex-direction: column;
  margin: 0;
  list-style: none;
}

.cp-site-lang .cp-site-dropdown-menu {
  display: flex;
  padding-left: 0.5rem;
}

.cp-site-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--cp-site-text);
  text-decoration: none;
}

.cp-site-dropdown-menu a:hover,
.cp-site-dropdown-menu a:focus-visible {
  background: var(--cp-site-tint);
}

.cp-site-dropdown-menu a[aria-current] {
  color: var(--cp-site-heading);
  font-weight: 700;
}

.cp-site-menu .cp-site-dropdown-menu {
  width: min(20rem, calc(100vw - 2rem));
}

.cp-site-dropdown-menu ul.cp-site-menu-languages {
  flex-direction: row;
}

.cp-site-menu-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--cp-site-border);
  list-style: none;
}

.cp-site-menu-languages a {
  padding: 0.375rem 0.5rem;
  font-size: 0.9rem;
}

/* The phone menu's platform pages, by their logos, under Integrations. */
.cp-site-dropdown-menu ul.cp-site-menu-sub {
  gap: 0;
  padding: 0 0 0.25rem 0.75rem;
}

.cp-site-dropdown-menu .cp-site-menu-sub a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.375rem 0.75rem;
}

.cp-site-menu-sub a[aria-current] {
  background: var(--cp-site-tint);
}

.cp-site-menu-sub .cp-platform-prestashop.cp-platform-sm img {
  height: 13px;
}

.cp-site-menu-sub .cp-platform-woocommerce.cp-platform-sm img {
  height: 20px;
}

.cp-site-lang {
  display: none;
}

/*
 * The Integrations menu (from 1200px, with the sections menu): the link, a button for keyboards and touch
 * screens, and a panel that opens on hover or from the button (site.js sets .is-open). A short delay
 * before it closes forgives a pointer that slips off on its way down.
 */
.cp-site-nav > ul {
  height: 100%;
  align-items: center;
}

.cp-site-mega {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.cp-site-nav .cp-site-mega > a {
  padding-right: 0.2rem;
}

.cp-site-mega-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--cp-site-muted);
  cursor: pointer;
}

.cp-site-mega-toggle svg {
  transition: transform 0.15s ease;
}

.cp-site-mega-toggle:hover,
.cp-site-mega-toggle:focus-visible {
  background: var(--cp-site-tint);
  color: var(--cp-site-heading);
}

.cp-site-mega-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: min(60rem, 100%);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.375rem);
  transition: opacity 0.15s ease 0.12s, transform 0.15s ease 0.12s, visibility 0s linear 0.27s;
}

/* The gap between the header and the panel still counts as the menu for the pointer. */
.cp-site-mega-panel::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0 100%;
}

.cp-site-mega.is-open .cp-site-mega-panel,
.cp-site-mega-panel:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

@media (hover: hover) {
  .cp-site-mega:not(.is-dismissed):hover .cp-site-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0.06s;
  }

  .cp-site-mega:not(.is-dismissed):hover .cp-site-mega-toggle svg {
    transform: rotate(180deg);
  }
}

.cp-site-mega.is-open .cp-site-mega-toggle svg {
  transform: rotate(180deg);
}

.cp-site-mega-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem -1rem rgba(43, 19, 166, 0.28);
}

.cp-site-mega-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-site-mega-platform {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 0.875rem;
  transition: background-color 0.15s ease;
}

.cp-site-mega-platform:hover,
.cp-site-mega-platform:focus-within {
  background: var(--cp-site-tint);
}

/* The Help menu: the guides by group, three columns of links. */
.cp-site-mega-guides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.cp-site-mega-group {
  padding: 1rem 1rem 0.75rem;
  border-radius: 0.875rem;
}

.cp-site-mega-group .cp-site-mega-heading {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cp-site-muted);
}

.cp-site-menu-guides a {
  font-size: 0.95rem;
}

/* One height for both logos, so the titles under them line up. */
.cp-site-mega-logo {
  display: flex;
  align-items: center;
  height: 2.25rem;
  margin-bottom: 0.875rem;
}

.cp-site-mega-logo .cp-platform-woocommerce.cp-platform-md img {
  height: 28px;
}

.cp-site-full a.cp-site-mega-title {
  color: var(--cp-site-heading);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

/* The whole card opens the platform's page; its own links sit above that. */
.cp-site-mega-title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cp-site-mega-title:focus-visible {
  outline: none;
}

.cp-site-mega-title:focus-visible::after {
  outline: 2px solid var(--cp-site-link);
  outline-offset: -2px;
}

.cp-site-mega-platform p {
  margin: 0.375rem 0 1rem;
  color: var(--cp-site-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.cp-site-mega-links {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.cp-site-mega-platform .cp-site-mega-links {
  /* At the foot of the card, so both cards' links line up. */
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cp-site-border);
}

.cp-site-full .cp-site-mega-links a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  color: var(--cp-site-text);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
}

.cp-site-full .cp-site-mega-links a:hover,
.cp-site-full .cp-site-mega-links a:focus-visible {
  color: var(--cp-site-link);
  text-decoration: underline;
}

.cp-site-mega-links svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--cp-site-muted);
}

.cp-site-mega-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem 1.375rem;
  background: linear-gradient(150deg, var(--cp-indigo) 0%, #6a2bb8 60%, var(--cp-site-cta) 130%);
  border-radius: 0.875rem;
  color: #fff;
}

.cp-site-mega-aside p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.92;
}

.cp-site-mega-aside .cp-site-mega-heading {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  opacity: 1;
}

.cp-site-mega-aside .cp-site-btn {
  margin-top: 0.25rem;
}

.cp-site-full .cp-site-mega-aside .cp-site-mega-links a,
.cp-site-full .cp-site-mega-aside .cp-site-mega-links a:hover,
.cp-site-full .cp-site-mega-aside .cp-site-mega-links a:focus-visible {
  color: #fff;
}

.cp-site-mega-aside .cp-site-mega-links {
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cp-site-mega-panel,
  .cp-site-mega-toggle svg {
    transition: none;
  }
}

/* Phones: a smaller logo and button, so "Start free" fits in every language next to the menu. */
@media (max-width: 575.98px) {
  .cp-site-header-inner {
    gap: 0.75rem;
  }

  .cp-site-header .cp-site-brand img {
    width: 112px;
  }

  .cp-site-header .cp-site-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }

  .cp-site-actions {
    gap: 0.25rem;
  }
}

@media (max-width: 399.98px) {
  .cp-site-header-inner {
    gap: 0.5rem;
  }

  .cp-site-header .cp-site-brand img {
    width: 96px;
  }

  .cp-site-header .cp-site-btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
  }

  .cp-site-menu summary {
    padding: 0.5rem 0.375rem;
  }
}

@media (min-width: 768px) {
  .cp-site-lang {
    display: block;
  }
}

@media (min-width: 992px) {
  .cp-site-signin {
    display: block;
  }
}

/* The sections menu fits in the header from 1200px in every language; narrower screens use the menu button. */
@media (min-width: 1200px) {
  .cp-site-header-inner {
    gap: 1rem;
  }

  .cp-site-nav > ul > li > a {
    padding: 0.5rem 0.6rem;
  }

  .cp-site-nav {
    display: block;
  }

  .cp-site-menu {
    display: none;
  }
}

/* The language's code rather than its name while the sections menu is tight (the name stays for screen readers). */
.cp-site-lang-code {
  display: none;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .cp-site-lang-code {
    display: inline;
    font-size: 0.9rem;
    font-weight: 650;
  }

  .cp-site-lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Buttons */
.cp-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cp-site-full a.cp-site-btn-primary,
.cp-site-btn-primary {
  background: var(--cp-site-cta);
  color: #fff;
}

.cp-site-full a.cp-site-btn-primary:hover,
.cp-site-full a.cp-site-btn-primary:focus-visible {
  background: var(--cp-site-cta-hover);
  color: #fff;
}

.cp-site-full a.cp-site-btn-ghost {
  border-color: var(--cp-site-primary);
  color: var(--cp-site-heading);
}

.cp-site-full a.cp-site-btn-ghost:hover,
.cp-site-full a.cp-site-btn-ghost:focus-visible {
  background: var(--cp-site-tint);
}

.cp-site-full a.cp-site-btn-light {
  background: #fff;
  color: var(--cp-indigo);
}

.cp-site-full a.cp-site-btn-light:hover,
.cp-site-full a.cp-site-btn-light:focus-visible {
  background: var(--cp-blush);
}

.cp-site-btn-lg {
  padding: 0.8rem 1.6rem;
  font-size: 1.05rem;
}

.cp-site-btn:focus-visible,
.cp-site-full a:focus-visible,
.cp-site-dropdown summary:focus-visible {
  outline: 3px solid var(--cp-site-accent);
  outline-offset: 2px;
}

/* Breadcrumbs */
.cp-site-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--cp-site-muted);
}

.cp-site-breadcrumbs li + li::before {
  content: '›';
  margin-right: 0.35rem;
  color: var(--cp-site-muted);
}

/* The legal pages inside the website's layout. */
.cp-site-full main.cp-site-card {
  max-width: 900px;
  margin: 1.5rem auto 4rem;
}

@media (max-width: 991.98px) {
  .cp-site-full main.cp-site-card {
    width: calc(100% - 2rem);
  }
}

/* Sections */
.cp-page h1,
.cp-page h2,
.cp-page h3 {
  color: var(--cp-site-heading);
  letter-spacing: -0.02em;
}

.cp-page h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
}

.cp-page h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.cp-section {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.cp-section-tinted {
  background: var(--cp-site-tint);
}

.cp-section-head {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.cp-section-head p,
.cp-lead {
  color: var(--cp-site-muted);
  font-size: 1.125rem;
}

.cp-narrow {
  max-width: 52rem;
}

.cp-eyebrow,
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--cp-site-tint);
  color: var(--cp-site-heading);
  font-size: 0.875rem;
  font-weight: 650;
}

.cp-icon {
  flex: none;
}

/* Hero */
.cp-hero {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(circle at 8% 10%, var(--cp-site-glow-pink), transparent 40%),
    radial-gradient(circle at 92% 70%, var(--cp-site-glow-violet), transparent 45%);
  overflow: hidden;
}

.cp-hero h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  font-weight: 850;
  line-height: 1.08;
}

.cp-hero .cp-lead {
  max-width: 34rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.cp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cp-hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  color: var(--cp-site-muted);
  font-size: 0.95rem;
}

.cp-hero-note .cp-icon,
.cp-checks .cp-icon {
  color: var(--cp-site-accent);
}

.cp-hero-visual {
  position: relative;
  padding: 0 0 2.5rem 2.5rem;
}

.cp-browser {
  overflow: hidden;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1rem;
  box-shadow: var(--cp-site-shadow);
}

.cp-browser-bar {
  display: flex;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--cp-site-border);
}

.cp-browser-bar span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--cp-site-border);
  box-shadow: inset 0 0 0 1px rgba(98, 95, 122, 0.25);
}

.cp-browser img,
.cp-phone img,
.cp-ai-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.cp-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  min-width: 120px;
  padding: 0.5rem;
  background: #111018;
  border-radius: 1.75rem;
  box-shadow: var(--cp-site-shadow);
}

.cp-phone img {
  border-radius: 1.3rem;
}

@media (max-width: 575.98px) {
  .cp-hero-visual {
    padding: 0;
  }

  .cp-phone {
    display: none;
  }
}

/* Works with */
.cp-works {
  padding: 1.75rem 0;
  border-top: 1px solid var(--cp-site-border);
  border-bottom: 1px solid var(--cp-site-border);
}

.cp-works .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
}

.cp-page .cp-works-heading {
  margin: 0;
  color: var(--cp-site-muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cp-works-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-works-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--cp-site-muted);
}

.cp-works-list strong {
  color: var(--cp-site-heading);
}

/* The platforms' logos (_macros platform): their own wordmarks, sized so the two weigh the same. */
.cp-platform {
  display: inline-flex;
  flex: none;
  align-items: center;
  line-height: 0;
}

.cp-platform img {
  width: auto;
  max-width: 100%;
}

.cp-platform-prestashop.cp-platform-sm img { height: 17px; }
.cp-platform-woocommerce.cp-platform-sm img { height: 26px; }
.cp-platform-prestashop.cp-platform-md img { height: 22px; }
.cp-platform-woocommerce.cp-platform-md img { height: 34px; }
.cp-platform-prestashop.cp-platform-lg img { height: 30px; }
.cp-platform-woocommerce.cp-platform-lg img { height: 46px; }

/* Cards */
.cp-card {
  padding: 1.75rem;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1.25rem;
}

.cp-card p {
  margin: 0;
  color: var(--cp-site-muted);
}

.cp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 0.875rem;
  background: var(--cp-site-tint);
  color: var(--cp-site-accent);
}

.cp-section-tinted .cp-card-icon {
  background: var(--cp-site-page);
}

.cp-card-icon-muted {
  color: var(--cp-site-primary);
}

/* Features with a screenshot */
.cp-feature {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.cp-feature-text p {
  color: var(--cp-site-muted);
  font-size: 1.075rem;
}

.cp-feature-text h3 {
  font-size: 1.5rem;
}

@media (min-width: 992px) {
  .cp-feature {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
  }

  .cp-feature-reverse {
    grid-template-columns: 7fr 5fr;
  }

  .cp-feature-reverse .cp-feature-text {
    order: 2;
  }
}

/* AI */
.cp-checks {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cp-checks li {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.cp-ai-visual {
  max-width: 420px;
  margin: 0 auto;
}

.cp-ai-visual img {
  border-radius: 1.25rem;
  box-shadow: var(--cp-site-shadow);
}

/* Setup steps */
.cp-steps {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .cp-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cp-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--cp-site-cta);
  color: #fff;
  font-weight: 800;
}

/* Trust */
.cp-trust {
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(135deg, var(--cp-indigo), #4a2fd0);
  border-radius: 1.75rem;
  color: #fff;
}

.cp-page .cp-trust h2 {
  margin-bottom: 1.75rem;
  color: #fff;
}

.cp-trust ul {
  display: grid;
  gap: 1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .cp-trust ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cp-trust li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.cp-trust .cp-icon {
  color: #ffc7e3;
}

/* Plans */
.cp-plans {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .cp-plans {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .cp-plans {
    grid-template-columns: repeat(5, 1fr);
  }
}

.cp-plan {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1.25rem;
}

.cp-plan-featured {
  border: 2px solid var(--cp-site-cta);
  box-shadow: var(--cp-site-shadow);
}

.cp-plan h3 {
  margin-bottom: 0.25rem;
}

.cp-plan-price {
  margin-bottom: 1rem;
  color: var(--cp-site-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.cp-plan-amount {
  color: var(--cp-site-heading);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cp-plan ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  color: var(--cp-site-muted);
  font-size: 0.95rem;
}

.cp-plan li + li {
  margin-top: 0.375rem;
}

.cp-plans-trial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
  color: var(--cp-site-heading);
  font-weight: 600;
  text-align: center;
}

.cp-plans-trial .cp-icon {
  color: var(--cp-site-accent);
}

/* The plan's button sits at the bottom of its card, whatever the length of the list above it. */
.cp-site-full a.cp-plan-cta {
  width: 100%;
  margin-top: auto;
  white-space: normal;
  text-align: center;
}

.cp-plan-billed {
  margin: -0.875rem 0 1rem;
  color: var(--cp-site-muted);
  font-size: 0.875rem;
}

/* What a year saves, as a pill in the call's color (white on it passes AA in both themes). */
.cp-plan-saving {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--cp-site-cta);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.cp-plans-note {
  margin: 1.5rem 0 0;
  color: var(--cp-site-muted);
  text-align: center;
}

/*
 * The monthly/yearly switch: two radio buttons drawn as one control. CSS reads the choice (:has), and
 * site.js copies it to data-cp-period for browsers without :has(), so the prices change without a request.
 */
.cp-billing-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.cp-billing-switch {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0.3rem;
  border: 1px solid var(--cp-site-border);
  border-radius: 999px;
  background: var(--cp-site-card);
  box-shadow: 0 0.5rem 1.25rem -0.75rem rgba(43, 19, 166, 0.25);
}

.cp-billing-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cp-billing-switch label {
  padding: 0.5rem 1.35rem;
  border-radius: 999px;
  color: var(--cp-site-text);
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cp-billing-switch label:hover {
  background: var(--cp-site-tint);
}

.cp-billing-input:checked + label {
  background: var(--cp-site-cta);
  color: #fff;
}

.cp-billing-input:focus-visible + label {
  outline: 3px solid var(--cp-site-accent);
  outline-offset: 2px;
}

.cp-billing-offer {
  margin: 0;
  text-align: center;
}

.cp-billing-offer label {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 2px dashed var(--cp-site-cta);
  border-radius: 999px;
  background: var(--cp-site-tint);
  color: var(--cp-site-heading);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cp-billing-offer strong {
  font-weight: 800;
}

.cp-price-yearly {
  display: none;
}

.cp-billing:has(.cp-billing-input[value="yearly"]:checked) .cp-price-yearly,
.cp-billing[data-cp-period="yearly"] .cp-price-yearly {
  display: block;
}

.cp-billing:has(.cp-billing-input[value="yearly"]:checked) .cp-price-monthly,
.cp-billing[data-cp-period="yearly"] .cp-price-monthly {
  display: none;
}

.cp-billing:has(.cp-billing-input[value="yearly"]:checked) .cp-billing-offer label,
.cp-billing[data-cp-period="yearly"] .cp-billing-offer label {
  border-style: solid;
  background: var(--cp-site-cta);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cp-billing-switch label,
  .cp-billing-offer label {
    transition: none;
  }
}

/* FAQ: visible, not folded (public-website.md §4). */
.cp-faq {
  margin-top: 2rem;
}

.cp-faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--cp-site-border);
}

.cp-faq-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.cp-faq-item p {
  margin: 0;
  color: var(--cp-site-muted);
}

/* Final call */
.cp-final {
  padding: 0 0 clamp(3.5rem, 8vw, 6rem);
}

.cp-final-card {
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: linear-gradient(135deg, var(--cp-indigo) 0%, #6a2bb8 55%, var(--cp-site-cta) 100%);
  border-radius: 1.75rem;
  color: #fff;
  text-align: center;
}

.cp-page .cp-final-card h2 {
  color: #fff;
}

.cp-final-card p {
  margin: 0.75rem auto 1.75rem;
  max-width: 32rem;
  font-size: 1.125rem;
  opacity: 0.92;
}

/* Footer */
.cp-site-site-footer {
  /* Room at the bottom for "Back to top", so it never covers the last line. */
  padding: 3.5rem 0 4.5rem;
  background: var(--cp-site-tint);
  border-top: 1px solid var(--cp-site-border);
  font-size: 0.95rem;
}

.cp-site-site-footer .cp-site-brand img {
  width: 140px;
}

.cp-site-footer-about {
  margin: 1rem 0;
  color: var(--cp-site-muted);
}

.cp-site-footer-heading {
  margin-bottom: 0.75rem;
  color: var(--cp-site-heading);
  font-size: 0.95rem;
  font-weight: 700;
}

/* The link columns: one link per line. The rows (profiles, languages) keep their own spacing. */
.cp-site-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: break-word;
  hyphens: auto;
}

.cp-site-footer-col li + li {
  margin-top: 0.5rem;
}

.cp-site-site-footer a {
  color: var(--cp-site-text);
  text-decoration: none;
}

.cp-site-site-footer a:hover,
.cp-site-site-footer a:focus-visible {
  color: var(--cp-site-heading);
  text-decoration: underline;
}

.cp-site-site-footer .cp-site-follow {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

/* The nine profiles on one line beside the link columns. */
.cp-site-site-footer .cp-site-follow ul {
  justify-content: flex-start;
  gap: 0.375rem;
}

.cp-site-site-footer .cp-site-follow a {
  width: 2.25rem;
  height: 2.25rem;
}

.cp-site-site-footer .cp-site-follow svg {
  width: 18px;
  height: 18px;
}

.cp-site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cp-site-border);
  color: var(--cp-site-muted);
}

.cp-site-footer-bottom .cp-site-languages {
  justify-content: flex-start;
}

.cp-site-footer-bottom .cp-site-credit {
  margin: 0;
}

/* Logos: the light or the dark one, following the switch or else the system. */
.cp-site img.cp-logo-dark {
  display: none;
}

:root[data-theme="dark"] .cp-site img.cp-logo-light {
  display: none;
}

:root[data-theme="dark"] .cp-site img.cp-logo-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cp-site img.cp-logo-light {
    display: none;
  }

  :root:not([data-theme="light"]) .cp-site img.cp-logo-dark {
    display: block;
  }
}

/* The light/dark switch: an icon in the header from 768px, a row in the phone menu below. */
.cp-site-theme,
.cp-site-menu-theme {
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: none;
  color: var(--cp-site-text);
  cursor: pointer;
}

.cp-site-theme {
  display: none;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.cp-site-theme .cp-theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cp-site-theme:hover,
.cp-site-theme:focus-visible,
.cp-site-menu-theme:hover,
.cp-site-menu-theme:focus-visible {
  background: var(--cp-site-tint);
  color: var(--cp-site-heading);
}

.cp-site-menu-theme {
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font: inherit;
  text-align: left;
}

[data-cp-next="dark"] .cp-theme-sun,
[data-cp-next="light"] .cp-theme-moon {
  display: none;
}

@media (min-width: 768px) {
  .cp-site-theme {
    display: inline-flex;
  }

  .cp-site-menu-theme {
    display: none;
  }
}

/* Back to top: shown by site.js once the page scrolled past its first screen. */
.cp-site-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-indigo), var(--cp-violet));
  box-shadow: var(--cp-site-shadow);
  transition: transform 0.15s;
}

.cp-site-full a.cp-site-top {
  color: #fff;
}

.cp-site-top:hover,
.cp-site-top:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .cp-site-top {
    transition: none;
  }
}

/* The apps' store badges in the footer, in the stores' black badge style. */
.cp-site-stores {
  margin-top: 1.5rem;
}

.cp-site-stores-label {
  margin: 0 0 0.5rem;
  color: var(--cp-site-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.cp-site-stores ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.75rem;
  padding: 0 0.9rem 0 0.75rem;
  border: 1px solid #a6a6a6;
  border-radius: 0.6rem;
  background: #000;
  color: #fff;
  line-height: 1.1;
  text-decoration: none;
}

.cp-site-site-footer a.cp-store-badge,
.cp-site-site-footer a.cp-store-badge:hover {
  color: #fff;
  text-decoration: none;
}

.cp-store-text {
  display: flex;
  flex-direction: column;
}

.cp-store-small {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.cp-store-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Scrollbars in the brand's colors: Chrome, Edge and Safari draw the gradient, Firefox the violet. */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: var(--cp-site-page);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--cp-site-page);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cp-violet), var(--cp-pink));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cp-indigo), var(--cp-pink));
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--cp-violet) var(--cp-site-page);
  }
}

/* Anchors land below the sticky header. */
html {
  scroll-padding-top: 5rem;
}

/* "More about this": a centered link under a section. */
.cp-section-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin: 2rem 0 0;
  font-weight: 650;
}

.cp-section-more a {
  text-decoration: none;
}

.cp-section-more a:hover {
  text-decoration: underline;
}

/* The other pages: a lighter hero than the home page's, then the first section close below it. */
.cp-page-hero {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 10% 0%, var(--cp-site-glow-pink), transparent 45%),
    radial-gradient(circle at 90% 100%, var(--cp-site-glow-violet), transparent 45%);
}

.cp-page-hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}

.cp-page-hero .cp-lead {
  max-width: 42rem;
  margin: 0 auto;
}

.cp-page-hero .cp-hero-actions {
  margin-top: 1.75rem;
}

/* A platform's landing page: its logo above the heading, the free start, and the troubleshooting under its FAQ. */
.cp-platform-hero-logo {
  margin-bottom: 1.25rem;
}

.cp-platform-plans {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}

.cp-platform-plans p {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  color: var(--cp-site-muted);
  font-size: 1.05rem;
}

.cp-page .cp-faq-subheading {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-size: 1.35rem;
}

.cp-section-first {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.cp-page h2.cp-card-heading {
  font-size: 1.25rem;
  font-weight: 700;
}

.cp-card p.cp-card-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
  overflow-wrap: anywhere;
}

/* Features: the sections' menu and their screenshots. */
.cp-toc ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.cp-site-full .cp-toc a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--cp-site-border);
  border-radius: 999px;
  background: var(--cp-site-card);
  color: var(--cp-site-heading);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.cp-site-full .cp-toc a:hover {
  background: var(--cp-site-tint);
}

.cp-page-shot {
  max-width: 960px;
  margin: 0 auto 2.5rem;
}

.cp-page-shot-narrow {
  margin-bottom: 2.5rem;
}

.cp-page-stores .cp-site-stores {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.cp-site-full a.cp-store-badge,
.cp-site-full a.cp-store-badge:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Tables (plans, models, top-ups): they scroll sideways on narrow screens instead of the page. Positioned,
 * so the hidden words for screen readers (absolute) stay inside the scroller instead of widening the page.
 */
.cp-table-scroll {
  position: relative;
  overflow-x: auto;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1rem;
}

.cp-table-scroll:focus-visible {
  outline: 3px solid var(--cp-site-accent);
  outline-offset: 2px;
}

.cp-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--cp-site-text);
}

.cp-table th,
.cp-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cp-site-border);
  text-align: left;
  vertical-align: middle;
}

.cp-table tbody tr:last-child > * {
  border-bottom: 0;
}

.cp-table thead th {
  color: var(--cp-site-heading);
  font-weight: 700;
}

.cp-table tbody th {
  color: var(--cp-site-heading);
  font-weight: 600;
}

.cp-table .cp-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-table-note {
  margin: 0.75rem 0 0;
  color: var(--cp-site-muted);
  font-size: 0.95rem;
}

.cp-page h3 + .cp-table-note {
  margin: 0 0 0.75rem;
}

/* The comparison: the feature column stays in view while the plans scroll. */
.cp-compare {
  min-width: 760px;
  table-layout: fixed;
}

.cp-compare th:first-child {
  width: 9.5rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .cp-compare th:first-child {
    width: 26%;
    font-size: inherit;
  }
}

/* The models' table scrolls on phones rather than squeezing its columns. */
.cp-models {
  min-width: 32rem;
}

.cp-compare th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--cp-site-card);
}

.cp-compare td,
.cp-compare thead th:not(:first-child) {
  text-align: center;
}

.cp-compare-featured {
  background: rgba(199, 37, 122, 0.06);
}

.cp-compare thead th.cp-compare-featured {
  color: var(--cp-site-cta);
}

:root[data-theme="dark"] .cp-compare thead th.cp-compare-featured {
  color: #ff8fc6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cp-compare thead th.cp-compare-featured {
    color: #ff8fc6;
  }
}

.cp-yes,
.cp-no {
  display: inline-flex;
}

.cp-yes {
  color: var(--cp-site-accent);
}

.cp-no {
  color: var(--cp-site-muted);
}

.cp-checks-tight {
  margin-top: 0;
}

.cp-checks-tight li {
  margin-bottom: 0.65rem;
}

.cp-checks-grid {
  display: grid;
  gap: 0 2rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .cp-checks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Integrations */
.cp-platform-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cp-page .cp-platform-card-head {
  min-height: 46px;
  margin-bottom: 1rem;
}

.cp-platform-card {
  display: flex;
  flex-direction: column;
}

.cp-platform-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.cp-install {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cp-install li {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.25rem;
}

.cp-install .cp-step-number {
  margin: 0;
  flex: none;
}

.cp-page .cp-install h3 {
  margin: 0.45rem 0 0.25rem;
}

.cp-install p {
  margin: 0;
  color: var(--cp-site-muted);
}

/* About and Contact */
.cp-prose-block p {
  font-size: 1.1rem;
}

.cp-contact-card {
  padding: clamp(2rem, 5vw, 3rem);
}

.cp-card.cp-contact-card p {
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}

.cp-company {
  display: grid;
  margin: 2rem 0 0;
  padding: 0.5rem 1.75rem;
  background: var(--cp-site-card);
  border: 1px solid var(--cp-site-border);
  border-radius: 1.25rem;
}

.cp-company dt {
  padding-top: 0.75rem;
  color: var(--cp-site-muted);
  font-weight: 600;
}

.cp-company dd {
  margin: 0;
  padding: 0.125rem 0 0.75rem;
  border-bottom: 1px solid var(--cp-site-border);
  color: var(--cp-site-heading);
  overflow-wrap: anywhere;
}

.cp-company dd:last-of-type {
  border-bottom: 0;
}

@media (min-width: 576px) {
  .cp-company {
    grid-template-columns: minmax(10rem, max-content) 1fr;
    column-gap: 1.5rem;
  }

  .cp-company dt,
  .cp-company dd {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--cp-site-border);
  }

  .cp-company dt:last-of-type,
  .cp-company dd:last-of-type {
    border-bottom: 0;
  }
}

.cp-company-brand {
  margin: 1.25rem 0 0;
  color: var(--cp-site-muted);
  text-align: center;
}

.cp-section-follow {
  padding: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.cp-section-follow .cp-site-follow {
  margin: 0;
  padding: 0;
  border: 0;
}

.cp-section-follow .cp-site-follow ul {
  justify-content: center;
}

/* Help center: guide cards (the whole card is the link), the guide's body and its date. */
.cp-page h2.cp-help-group {
  margin-bottom: 1.5rem;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}

.cp-help-card {
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cp-help-card h3 a {
  color: var(--cp-site-heading);
  text-decoration: none;
}

.cp-help-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cp-help-card:hover,
.cp-help-card:focus-within {
  border-color: var(--cp-site-primary);
  box-shadow: var(--cp-site-shadow);
}

.cp-site-full .cp-help-card h3 a:focus-visible {
  outline: none;
}

.cp-help-card:focus-within {
  outline: 3px solid var(--cp-site-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cp-help-card {
    transition: none;
  }
}

.cp-help-links {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.cp-help-links li + li {
  margin-top: 0.6rem;
}

.cp-help-links a {
  text-decoration: none;
}

.cp-help-links a:hover {
  text-decoration: underline;
}

.cp-help-updated {
  margin: 1rem 0 0;
  color: var(--cp-site-muted);
  font-size: 0.9rem;
}

.cp-help-article .cp-hero-actions {
  margin-top: 1.5rem;
}

.cp-help-body {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.cp-help-body section + section {
  margin-top: 2.5rem;
}

.cp-page .cp-help-body h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
}

.cp-help-body > section > p {
  color: var(--cp-site-text);
  font-size: 1.05rem;
}

.cp-help-body .cp-faq {
  margin-top: 0;
}

.cp-help-body .cp-faq-item:first-child {
  padding-top: 0;
}

.cp-section-more-start {
  justify-content: flex-start;
  margin-top: 1rem;
}

.cp-help-article .cp-page-hero .cp-lead {
  margin: 0;
}

/* A screenshot in a guide: at most its real size, framed like a card. */
.cp-help-figure {
  max-width: min(100%, var(--cp-figure-width, 100%));
  margin: 1.25rem 0 0.5rem;
}

.cp-help-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cp-site-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 16, 60, 0.08);
}

/* Cookie consent (public-website.md §9): CookieConsent's banner and settings in the site's colors.
   "Accept all" and "Reject all" share one style, so refusing is as easy as accepting. */
#cc-main {
  --cc-font-family: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cc-bg: var(--cp-site-card);
  --cc-primary-color: var(--cp-site-heading);
  --cc-secondary-color: var(--cp-site-text);
  --cc-link-color: var(--cp-site-link);
  --cc-btn-border-radius: 999px;
  --cc-modal-border-radius: 1rem;
  --cc-btn-primary-bg: var(--cp-site-cta);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--cp-site-cta);
  --cc-btn-primary-hover-bg: var(--cp-site-cta-hover);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--cp-site-cta-hover);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--cp-site-heading);
  --cc-btn-secondary-border-color: var(--cp-site-heading);
  --cc-btn-secondary-hover-bg: var(--cp-site-tint);
  --cc-btn-secondary-hover-color: var(--cp-site-heading);
  --cc-btn-secondary-hover-border-color: var(--cp-site-heading);
  --cc-toggle-on-bg: var(--cp-site-cta);
  --cc-footer-bg: var(--cp-site-tint);
  --cc-footer-color: var(--cp-site-muted);
}

:root[data-theme="dark"] #cc-main {
  --cc-separator-border-color: rgba(255, 255, 255, 0.1);
  --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.04);
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.07);
  --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.12);
  --cc-cookie-category-expanded-block-bg: rgba(255, 255, 255, 0.04);
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.07);
  --cc-toggle-off-bg: #5d5a74;
  --cc-toggle-readonly-bg: #3a3850;
  --cc-footer-border-color: rgba(255, 255, 255, 0.08);
  --cc-overlay-bg: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #cc-main {
    --cc-separator-border-color: rgba(255, 255, 255, 0.1);
    --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.04);
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
    --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.07);
    --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.12);
    --cc-cookie-category-expanded-block-bg: rgba(255, 255, 255, 0.04);
    --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.07);
    --cc-toggle-off-bg: #5d5a74;
    --cc-toggle-readonly-bg: #3a3850;
    --cc-footer-border-color: rgba(255, 255, 255, 0.08);
    --cc-overlay-bg: rgba(0, 0, 0, 0.6);
  }
}

/* "Cookie settings" in the footer: a button (it opens the settings), drawn like the links beside it. */
.cp-site-cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cp-site-link);
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.cp-site-cookie-settings:hover,
.cp-site-cookie-settings:focus-visible {
  text-decoration: underline;
}

/* Promotions (register §19): the running offer above the plans, a code's badge on a plan, and the
   price before an automatic discount. The variables carry the light and dark themes. */
.cp-promotion {
  margin: 0 auto 1.25rem;
  max-width: 46rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--cp-site-cta);
  border-radius: 1rem;
  background: var(--cp-site-tint);
  color: var(--cp-site-text);
  text-align: center;
}

.cp-promotion strong {
  color: var(--cp-site-heading);
}

.cp-plan-badge {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--cp-site-cta);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.cp-plan-was {
  color: var(--cp-site-muted);
  font-size: 0.875rem;
  font-weight: 400;
}