/* WindspeedSEO public website
   ---------------------------------------------------------------------------
   All color, spacing, radius, shadow, motion and type values come from
   tokens.css, which is compiled at build time from the canonical design system
   at design-system/tokens/windspeedseo.tokens.json. Add a new raw value here
   only if the design system genuinely lacks one.
   Target: WCAG 2.2 AA, usable at 200% zoom, no horizontal overflow at 320px. */

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ws-surface-page);
  color: var(--ws-text-primary);
  font-family: var(--ws-font-sans);
  font-size: var(--ws-type-body-size);
  line-height: var(--ws-type-body-lh);
  font-weight: var(--ws-weight-regular);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--ws-spacing-4); color: var(--ws-text-primary); }
h1 { font-size: var(--ws-type-h1-size); line-height: var(--ws-type-h1-lh); font-weight: var(--ws-type-h1-weight); letter-spacing: var(--ws-type-h1-ls); }
h2 { font-size: var(--ws-type-h2-size); line-height: var(--ws-type-h2-lh); font-weight: var(--ws-type-h2-weight); letter-spacing: var(--ws-type-h2-ls); }
h3 { font-size: var(--ws-type-h3-size); line-height: var(--ws-type-h3-lh); font-weight: var(--ws-type-h3-weight); letter-spacing: var(--ws-type-h3-ls); }
h4 { font-size: var(--ws-type-h4-size); line-height: var(--ws-type-h4-lh); font-weight: var(--ws-type-h4-weight); }
h5 { font-size: var(--ws-type-h5-size); line-height: var(--ws-type-h5-lh); font-weight: var(--ws-type-h5-weight); }

p { margin: 0 0 var(--ws-spacing-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ws-text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ws-color-accent-dataBlue-800); }

img, svg { max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0 0 var(--ws-spacing-4); padding-left: var(--ws-spacing-6); }
li { margin-bottom: var(--ws-spacing-2); }
li:last-child { margin-bottom: 0; }

strong { font-weight: var(--ws-weight-semibold); }

hr { border: 0; border-top: 1px solid var(--ws-divider); margin: var(--ws-spacing-10) 0; }

:focus-visible {
  outline: var(--ws-borderwidth-focus) solid var(--ws-border-focus);
  outline-offset: 2px;
  border-radius: var(--ws-radius-xs);
}

::selection { background: var(--ws-color-brand-green-200); color: var(--ws-color-brand-slate-900); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--ws-spacing-4);
  top: -100px;
  z-index: 100;
  padding: var(--ws-spacing-3) var(--ws-spacing-4);
  background: var(--ws-surface-primary);
  color: var(--ws-text-primary);
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-md);
  font-weight: var(--ws-weight-semibold);
  text-decoration: none;
  transition: top var(--ws-motion-duration-fast) var(--ws-motion-easing-standard);
}
.skip-link:focus { top: var(--ws-spacing-3); }

main:focus { outline: none; }

/* ------------------------------------------------------------- containers */

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--ws-layout-gutter-mobile);
}
.container--reading { max-width: 820px; }
.container--content { max-width: var(--ws-layout-container-content); }

@media (min-width: 768px) { .container { padding-inline: var(--ws-layout-gutter-tablet); } }
@media (min-width: 1024px) { .container { padding-inline: var(--ws-layout-gutter-desktop); } }

.section { padding-block: var(--ws-spacing-16); }
.section--tight { padding-block: var(--ws-spacing-12); }
.section--alt { background: var(--ws-surface-secondary); }
.section--dark { background: var(--ws-surface-dark); color: var(--ws-text-inverse); }
.section--dark h2, .section--dark h3 { color: var(--ws-text-inverse); }
.section--dark a { color: var(--ws-color-accent-dataBlue-200); }

@media (min-width: 1024px) { .section { padding-block: var(--ws-spacing-20); } }

.section__heading { margin-bottom: var(--ws-spacing-3); }
.section__lede {
  font-size: var(--ws-type-lead-size);
  line-height: var(--ws-type-lead-lh);
  color: var(--ws-text-secondary);
  max-width: 68ch;
  margin-bottom: var(--ws-spacing-8);
}
.eyebrow {
  font-size: var(--ws-type-eyebrow-size, 12px);
  line-height: 18px;
  font-weight: var(--ws-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ws-color-accent-dataBlue-700);
  margin-bottom: var(--ws-spacing-2);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-component-button-gap);
  min-height: var(--ws-component-button-largeHeight);
  padding: 0 var(--ws-spacing-6);
  border-radius: var(--ws-component-button-radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--ws-type-button-size);
  line-height: var(--ws-type-button-lh);
  font-weight: var(--ws-type-button-weight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ws-motion-duration-fast) var(--ws-motion-easing-standard),
              border-color var(--ws-motion-duration-fast) var(--ws-motion-easing-standard),
              color var(--ws-motion-duration-fast) var(--ws-motion-easing-standard);
}
.btn__icon { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--ws-action-primary-bg); color: var(--ws-action-primary-text); }
.btn--primary:hover { background: var(--ws-action-primary-hover); color: var(--ws-action-primary-text); }
.btn--primary:active { background: var(--ws-action-primary-active); }

.btn--accent { background: var(--ws-action-accent-bg); color: var(--ws-action-accent-text); }
.btn--accent:hover { background: var(--ws-action-accent-hover); color: var(--ws-action-accent-text); }

.btn--secondary {
  background: var(--ws-action-secondary-bg);
  color: var(--ws-action-secondary-text);
  border-color: var(--ws-action-secondary-border);
}
.btn--secondary:hover { background: var(--ws-action-secondary-hover); color: var(--ws-action-secondary-text); }

.btn--ghost { background: transparent; color: var(--ws-text-link); padding-inline: var(--ws-spacing-2); }
.btn--ghost:hover { text-decoration: underline; }

.btn--compact { min-height: var(--ws-component-button-defaultHeight); padding-inline: var(--ws-spacing-4); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-spacing-3);
  margin-block: var(--ws-spacing-6) 0;
}
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ws-surface-primary);
  border-bottom: 1px solid var(--ws-border-default);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--ws-spacing-6);
  min-height: var(--ws-layout-navigation-topbar);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { display: block; width: 190px; height: auto; }

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--ws-spacing-1); list-style: none; margin: 0; padding: 0; }
.nav__item { margin: 0; position: static; }
.nav__item--action { margin-left: var(--ws-spacing-2); }

.nav__trigger, .nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ws-spacing-1);
  min-height: 40px;
  padding: 0 var(--ws-spacing-3);
  border: 0;
  background: transparent;
  border-radius: var(--ws-radius-md);
  color: var(--ws-text-primary);
  font-family: inherit;
  font-size: var(--ws-type-navigation-size);
  font-weight: var(--ws-type-navigation-weight);
  line-height: var(--ws-type-navigation-lh);
  text-decoration: none;
  cursor: pointer;
}
.nav__trigger:hover, .nav__link:hover { background: var(--ws-surface-secondary); color: var(--ws-text-primary); }
.nav__link[aria-current="page"] { color: var(--ws-text-link); }
.nav__chevron { width: 16px; height: 16px; transition: transform var(--ws-motion-duration-fast) var(--ws-motion-easing-standard); }
.nav__trigger[aria-expanded="true"] { background: var(--ws-surface-secondary); }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.megamenu {
  /* Positioned against .site-header__inner (the container), so the panel aligns with
     the logo and the sticky header keeps working. */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ws-surface-elevated);
  border: 1px solid var(--ws-border-default);
  border-top: 0;
  border-radius: 0 0 var(--ws-radius-lg) var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-lg);
}
.megamenu[hidden] { display: none; }
.megamenu__inner {
  padding-inline: var(--ws-spacing-6);
  display: grid;
  gap: var(--ws-spacing-8);
  padding-block: var(--ws-spacing-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1200px) { .megamenu__inner { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); } }
.megamenu__cols {
  display: grid;
  gap: var(--ws-spacing-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.megamenu__heading {
  font-size: var(--ws-type-caption-size);
  line-height: var(--ws-type-caption-lh);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin-bottom: var(--ws-spacing-3);
}
.megamenu__list { list-style: none; margin: 0; padding: 0; }
.megamenu__list li { margin-bottom: var(--ws-spacing-1); }
.megamenu__link {
  display: block;
  padding: var(--ws-spacing-2) var(--ws-spacing-3);
  margin-inline: calc(var(--ws-spacing-3) * -1);
  border-radius: var(--ws-radius-md);
  color: var(--ws-text-secondary);
  font-size: var(--ws-type-bodySmall-size);
  line-height: var(--ws-type-bodySmall-lh);
  font-weight: var(--ws-weight-medium);
  text-decoration: none;
}
.megamenu__link:hover { background: var(--ws-surface-secondary); color: var(--ws-text-primary); }

.megamenu__featured {
  display: flex;
  flex-direction: column;
  gap: var(--ws-spacing-1);
  padding: var(--ws-spacing-5);
  background: var(--ws-color-neutral-50);
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-radius-lg);
  text-decoration: none;
  color: var(--ws-text-primary);
}
.megamenu__featured:hover { border-color: var(--ws-border-strong); background: var(--ws-surface-secondary); color: var(--ws-text-primary); }
.megamenu__featured-eyebrow {
  font-size: var(--ws-type-caption-size);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-color-accent-dataBlue-700);
}
.megamenu__featured-label { font-weight: var(--ws-weight-semibold); }
.megamenu__featured-icon { width: 18px; height: 18px; color: var(--ws-text-muted); }

.drawer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-radius-md);
  background: var(--ws-surface-primary);
  color: var(--ws-text-primary);
  cursor: pointer;
}
.drawer-toggle svg { width: 22px; height: 22px; }
.drawer-toggle__close { display: none; }
.drawer-toggle[aria-expanded="true"] .drawer-toggle__open { display: none; }
.drawer-toggle[aria-expanded="true"] .drawer-toggle__close { display: block; }

.drawer {
  position: fixed;
  inset: var(--ws-layout-navigation-topbar) 0 0 0;
  z-index: 39;
  background: var(--ws-surface-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.drawer[hidden] { display: none; }
.drawer__inner { padding: var(--ws-spacing-4) var(--ws-layout-gutter-mobile) var(--ws-spacing-16); }
.drawer__group { border-bottom: 1px solid var(--ws-divider); }
.drawer__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: var(--ws-spacing-3) 0;
  border: 0;
  background: transparent;
  color: var(--ws-text-primary);
  font-family: inherit;
  font-size: var(--ws-type-h5-size);
  font-weight: var(--ws-weight-semibold);
  text-align: left;
  cursor: pointer;
}
.drawer__chevron { width: 20px; height: 20px; flex: none; transition: transform var(--ws-motion-duration-fast) var(--ws-motion-easing-standard); }
.drawer__trigger[aria-expanded="true"] .drawer__chevron { transform: rotate(180deg); }
.drawer__panel { padding-bottom: var(--ws-spacing-4); }
.drawer__panel[hidden] { display: none; }
.drawer__heading {
  margin: var(--ws-spacing-3) 0 var(--ws-spacing-1);
  font-size: var(--ws-type-caption-size);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list .megamenu__link { min-height: 44px; display: flex; align-items: center; margin-inline: 0; padding-inline: 0; }
.drawer__direct {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: var(--ws-type-h5-size);
  font-weight: var(--ws-weight-semibold);
  color: var(--ws-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--ws-divider);
}
.drawer__actions { display: grid; gap: var(--ws-spacing-3); margin-top: var(--ws-spacing-6); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .drawer-toggle, .drawer { display: none; }
  /* The header stays sticky; .site-header__inner is the positioning context that the
     mega-menu panels resolve against. */
  .site-header__inner { position: relative; }
}

/* ------------------------------------------------------------- breadcrumbs */

.crumbs { border-bottom: 1px solid var(--ws-divider); background: var(--ws-surface-primary); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ws-spacing-1);
  list-style: none;
  margin: 0;
  padding-block: var(--ws-spacing-3);
  padding-left: 0;
  font-size: var(--ws-type-bodySmall-size);
  color: var(--ws-text-muted);
}
.crumbs__item { display: inline-flex; align-items: center; gap: var(--ws-spacing-1); margin: 0; }
.crumbs__item a { color: var(--ws-text-secondary); text-decoration: none; }
.crumbs__item a:hover { text-decoration: underline; }
.crumbs__sep { width: 14px; height: 14px; color: var(--ws-text-disabled); }

/* -------------------------------------------------------------------- hero */

.hero {
  background: var(--ws-gradient-automation-aurora);
  border-bottom: 1px solid var(--ws-divider);
  padding-block: var(--ws-spacing-12) var(--ws-spacing-12);
}
@media (min-width: 1024px) { .hero { padding-block: var(--ws-spacing-20); } }
.hero__inner { max-width: 900px; }
.hero__eyebrow {
  font-size: var(--ws-type-caption-size);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ws-color-accent-dataBlue-700);
  margin-bottom: var(--ws-spacing-3);
}
.hero__title {
  font-size: clamp(30px, 5vw, var(--ws-type-display-size));
  line-height: 1.15;
  letter-spacing: var(--ws-type-display-ls);
  margin-bottom: var(--ws-spacing-4);
}
.hero__lede {
  font-size: var(--ws-type-lead-size);
  line-height: var(--ws-type-lead-lh);
  color: var(--ws-text-secondary);
  max-width: 68ch;
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-spacing-2);
  list-style: none;
  margin: var(--ws-spacing-8) 0 0;
  padding: 0;
}
.hero__proof li {
  margin: 0;
  padding: var(--ws-spacing-1) var(--ws-spacing-3);
  background: var(--ws-surface-primary);
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-radius-pill);
  font-size: var(--ws-type-caption-size);
  font-weight: var(--ws-weight-medium);
  color: var(--ws-text-secondary);
}
.hero--compact { background: var(--ws-surface-primary); padding-block: var(--ws-spacing-10); }

/* ------------------------------------------------------------------- prose */

.prose { max-width: 74ch; }
.prose > h2 { margin-top: var(--ws-spacing-12); }
.prose > h3 { margin-top: var(--ws-spacing-8); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--ws-spacing-4); }
.prose li { line-height: var(--ws-type-body-lh); }

.lede { font-size: var(--ws-type-lead-size); line-height: var(--ws-type-lead-lh); color: var(--ws-text-secondary); }
.muted { color: var(--ws-text-muted); }
.small { font-size: var(--ws-type-bodySmall-size); line-height: var(--ws-type-bodySmall-lh); }
.center { text-align: center; }

/* ------------------------------------------------------------------- cards */

.grid { display: grid; gap: var(--ws-spacing-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  padding: var(--ws-component-card-paddingMobile);
  background: var(--ws-surface-primary);
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-component-card-radius);
  box-shadow: var(--ws-shadow-xs);
}
@media (min-width: 768px) { .card { padding: var(--ws-component-card-paddingDesktop); } }
.card__title { font-size: var(--ws-type-h4-size); line-height: var(--ws-type-h4-lh); margin-bottom: var(--ws-spacing-2); }
.card__body { color: var(--ws-text-secondary); margin-bottom: 0; }
.card__link { display: inline-flex; align-items: center; gap: var(--ws-spacing-1); margin-top: var(--ws-spacing-4); font-weight: var(--ws-weight-semibold); font-size: var(--ws-type-bodySmall-size); text-decoration: none; }
.card__link:hover { text-decoration: underline; }
.card--link { transition: border-color var(--ws-motion-duration-fast) var(--ws-motion-easing-standard), box-shadow var(--ws-motion-duration-fast) var(--ws-motion-easing-standard); }
.card--link:hover { border-color: var(--ws-border-strong); box-shadow: var(--ws-shadow-sm); }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--ws-spacing-6); }
.steps > li { counter-increment: step; position: relative; padding-left: var(--ws-spacing-12); margin: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--ws-radius-pill);
  background: var(--ws-color-brand-slate-800);
  color: var(--ws-text-inverse);
  font-size: var(--ws-type-bodySmall-size);
  font-weight: var(--ws-weight-bold);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--ws-type-h5-size); line-height: var(--ws-type-h5-lh); margin-bottom: var(--ws-spacing-1); }
.steps p { color: var(--ws-text-secondary); margin-bottom: 0; }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: var(--ws-spacing-8); margin-bottom: var(--ws-spacing-3); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: var(--ws-radius-pill);
  background: var(--ws-success-bg);
  border: 1px solid var(--ws-success-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23537418' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.crosslist { list-style: none; padding: 0; }
.crosslist li { position: relative; padding-left: var(--ws-spacing-8); margin-bottom: var(--ws-spacing-3); color: var(--ws-text-secondary); }
.crosslist li::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: var(--ws-radius-pill);
  background: var(--ws-color-neutral-100);
  border: 1px solid var(--ws-border-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626D7A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

.callout {
  padding: var(--ws-spacing-5);
  border-radius: var(--ws-radius-lg);
  border: 1px solid var(--ws-info-border);
  background: var(--ws-info-bg);
  color: var(--ws-text-primary);
  margin-block: var(--ws-spacing-6);
}
.callout__title { font-size: var(--ws-type-h5-size); margin-bottom: var(--ws-spacing-2); color: var(--ws-info-fg); }
.callout--warning { border-color: var(--ws-warning-border); background: var(--ws-warning-bg); }
.callout--warning .callout__title { color: var(--ws-warning-fg); }

/* ------------------------------------------------------- demo product UI */

.panel {
  background: var(--ws-surface-primary);
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-md);
  overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ws-spacing-4);
  padding: var(--ws-spacing-3) var(--ws-spacing-4);
  background: var(--ws-color-brand-slate-900);
  color: var(--ws-text-inverse);
  font-size: var(--ws-type-bodySmall-size);
  font-weight: var(--ws-weight-semibold);
}
.panel__bar span:last-child { color: var(--ws-color-neutral-300); font-weight: var(--ws-weight-regular); }
.panel__body { padding: var(--ws-spacing-4); }
@media (min-width: 768px) { .panel__body { padding: var(--ws-spacing-6); } }
.panel__caption {
  padding: var(--ws-spacing-3) var(--ws-spacing-4);
  border-top: 1px solid var(--ws-divider);
  background: var(--ws-surface-secondary);
  color: var(--ws-text-muted);
  font-size: var(--ws-type-caption-size);
  line-height: var(--ws-type-caption-lh);
  margin: 0;
}

.kpis { display: grid; gap: var(--ws-spacing-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi {
  padding: var(--ws-spacing-4);
  border: 1px solid var(--ws-border-default);
  border-radius: var(--ws-radius-md);
  background: var(--ws-surface-primary);
}
.kpi__label { font-size: var(--ws-type-kpiLabel-size); font-weight: var(--ws-type-kpiLabel-weight); color: var(--ws-text-muted); margin-bottom: var(--ws-spacing-1); }
.kpi__value {
  font-size: var(--ws-component-kpiCard-valueMobile);
  line-height: 1.1;
  font-weight: var(--ws-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
@media (min-width: 768px) { .kpi__value { font-size: var(--ws-component-kpiCard-valueDesktop); } }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--ws-spacing-2); font-size: var(--ws-type-caption-size); font-weight: var(--ws-weight-semibold); font-variant-numeric: tabular-nums; }
.kpi__delta--up { color: var(--ws-success-fg); }
.kpi__delta--down { color: var(--ws-error-fg); }
.kpi__delta--flat { color: var(--ws-text-muted); }

.bars { display: grid; gap: var(--ws-spacing-3); margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: var(--ws-spacing-3); margin: 0; font-size: var(--ws-type-bodySmall-size); }
.bars .bar__track { height: 10px; border-radius: var(--ws-radius-pill); background: var(--ws-color-neutral-100); overflow: hidden; }
.bars .bar__fill { display: block; height: 100%; border-radius: var(--ws-radius-pill); background: var(--ws-chart-series-2); }
.bars .bar__fill--alt { background: var(--ws-chart-series-3); }
.bars .bar__value { font-variant-numeric: tabular-nums; color: var(--ws-text-secondary); }

.table-wrap { overflow-x: auto; margin-block: var(--ws-spacing-6); border: 1px solid var(--ws-border-default); border-radius: var(--ws-radius-lg); background: var(--ws-surface-primary); }
table { width: 100%; border-collapse: collapse; font-size: var(--ws-type-table-size); }
caption { text-align: left; padding: var(--ws-spacing-3) var(--ws-spacing-4); color: var(--ws-text-muted); font-size: var(--ws-type-caption-size); }
th, td { padding: var(--ws-component-table-cellPaddingY) var(--ws-component-table-cellPaddingX); text-align: left; border-bottom: 1px solid var(--ws-divider); vertical-align: top; }
thead th { background: var(--ws-surface-secondary); font-weight: var(--ws-weight-semibold); color: var(--ws-text-primary); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex; align-items: center; gap: var(--ws-component-badge-gap);
  height: var(--ws-component-badge-height);
  padding: 0 var(--ws-component-badge-paddingX);
  border-radius: var(--ws-component-badge-radius);
  font-size: var(--ws-type-caption-size);
  font-weight: var(--ws-weight-semibold);
  border: 1px solid transparent;
}
.badge--success { background: var(--ws-success-bg); color: var(--ws-success-fg); border-color: var(--ws-success-border); }
.badge--info { background: var(--ws-info-bg); color: var(--ws-info-fg); border-color: var(--ws-info-border); }
.badge--warning { background: var(--ws-warning-bg); color: var(--ws-warning-fg); border-color: var(--ws-warning-border); }
.badge--pending { background: var(--ws-pending-bg); color: var(--ws-pending-fg); border-color: var(--ws-pending-border); }
.badge--neutral { background: var(--ws-color-neutral-100); color: var(--ws-text-secondary); border-color: var(--ws-border-default); }

.plan-grid { display: grid; gap: var(--ws-spacing-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.plan { display: flex; flex-direction: column; height: 100%; }
.plan__name { font-size: var(--ws-type-h4-size); margin-bottom: var(--ws-spacing-1); }
.plan__price { display: flex; align-items: baseline; gap: var(--ws-spacing-1); margin-bottom: var(--ws-spacing-2); }
.plan__amount { font-size: var(--ws-type-kpiValue-size); font-weight: var(--ws-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.plan__period { color: var(--ws-text-muted); font-size: var(--ws-type-bodySmall-size); }
.plan__summary { color: var(--ws-text-secondary); margin-bottom: var(--ws-spacing-4); }
.plan__features { margin-bottom: var(--ws-spacing-6); }
.plan .btn-row { margin-top: auto; }
.plan--featured { border-color: var(--ws-selected-border); box-shadow: var(--ws-shadow-sm); }

/* --------------------------------------------------------------------- FAQ */

.section--faq { background: var(--ws-surface-secondary); }
.faq { border-top: 1px solid var(--ws-border-default); }
.faq__item { border-bottom: 1px solid var(--ws-border-default); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ws-spacing-4);
  padding: var(--ws-spacing-5) 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--ws-type-h5-size);
  line-height: var(--ws-type-h5-lh);
  font-weight: var(--ws-weight-semibold);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chevron { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--ws-text-muted); transition: transform var(--ws-motion-duration-fast) var(--ws-motion-easing-standard); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--ws-spacing-5); color: var(--ws-text-secondary); max-width: 72ch; }
.faq__a > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- final CTA */

.section--cta { background: var(--ws-surface-dark); color: var(--ws-text-inverse); }
.cta-panel { max-width: 760px; margin-inline: auto; text-align: center; }
.cta-panel__heading { color: var(--ws-text-inverse); margin-bottom: var(--ws-spacing-3); }
.cta-panel__body { color: var(--ws-color-neutral-300); font-size: var(--ws-type-lead-size); line-height: var(--ws-type-lead-lh); }
.cta-panel__note { margin-top: var(--ws-spacing-4); color: var(--ws-color-neutral-400); font-size: var(--ws-type-bodySmall-size); }
.section--cta .btn--secondary { background: transparent; color: var(--ws-text-inverse); border-color: var(--ws-color-neutral-500); }
.section--cta .btn--secondary:hover { background: rgba(255,255,255,.08); color: var(--ws-text-inverse); }
.section--cta .btn--primary { background: var(--ws-action-accent-bg); }
.section--cta .btn--primary:hover { background: var(--ws-action-accent-hover); }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--ws-color-brand-slate-950); color: var(--ws-color-neutral-300); padding-block: var(--ws-spacing-16) var(--ws-spacing-8); }
.site-footer__top { display: grid; gap: var(--ws-spacing-10); }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--ws-spacing-16); } }
.site-footer__logo { width: 200px; height: auto; }
.site-footer__tagline { margin: var(--ws-spacing-4) 0 var(--ws-spacing-2); color: var(--ws-color-neutral-0); font-weight: var(--ws-weight-semibold); }
.site-footer__pitch { color: var(--ws-color-neutral-400); font-size: var(--ws-type-bodySmall-size); line-height: var(--ws-type-bodySmall-lh); max-width: 46ch; }
.site-footer__app { display: inline-flex; align-items: center; gap: var(--ws-spacing-2); margin-top: var(--ws-spacing-4); color: var(--ws-color-brand-green-300); font-size: var(--ws-type-bodySmall-size); font-weight: var(--ws-weight-semibold); text-decoration: none; }
.site-footer__app:hover { color: var(--ws-color-brand-green-200); text-decoration: underline; }
.site-footer__app-icon { width: 16px; height: 16px; }
.site-footer__groups { display: grid; gap: var(--ws-spacing-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer__heading { font-size: var(--ws-type-caption-size); font-weight: var(--ws-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ws-color-neutral-0); margin-bottom: var(--ws-spacing-3); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: var(--ws-spacing-2); }
.site-footer__link { display: inline-block; min-height: 24px; color: var(--ws-color-neutral-300); font-size: var(--ws-type-bodySmall-size); line-height: 24px; text-decoration: none; }
.site-footer__link:hover { color: var(--ws-color-neutral-0); text-decoration: underline; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--ws-spacing-4);
  align-items: center; justify-content: space-between;
  margin-top: var(--ws-spacing-12);
  padding-top: var(--ws-spacing-6);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--ws-type-caption-size);
}
.site-footer__legal { margin: 0; color: var(--ws-color-neutral-400); }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: var(--ws-spacing-4); margin: 0; align-items: center; }
.site-footer__meta a { color: var(--ws-color-neutral-300); text-decoration: none; }
.site-footer__meta a:hover { color: var(--ws-color-neutral-0); text-decoration: underline; }
.site-footer__prefs { border: 0; background: none; padding: 0; color: var(--ws-color-neutral-300); font: inherit; cursor: pointer; text-decoration: underline; }
.site-footer__prefs:hover { color: var(--ws-color-neutral-0); }

/* ------------------------------------------------------------------- forms */

.form { display: grid; gap: var(--ws-spacing-5); max-width: 640px; }
.field { display: grid; gap: var(--ws-component-input-labelGap); }
.field__label { font-size: var(--ws-type-label-size); font-weight: var(--ws-type-label-weight); }
.field__req { color: var(--ws-error-fg); }
.field__hint { font-size: var(--ws-type-caption-size); color: var(--ws-text-muted); }
.field__error { font-size: var(--ws-type-caption-size); font-weight: var(--ws-weight-semibold); color: var(--ws-error-fg); display: none; }
.field__error::before { content: "! "; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--ws-error-border); background: var(--ws-error-bg); }

input[type="text"], input[type="email"], input[type="url"], select, textarea {
  width: 100%;
  min-height: var(--ws-component-input-height);
  padding: var(--ws-spacing-2) var(--ws-component-input-paddingX);
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-component-input-radius);
  background: var(--ws-surface-primary);
  color: var(--ws-text-primary);
  font: inherit;
}
textarea { min-height: var(--ws-component-input-textareaMinHeight); resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ws-border-focus); }

.form__status { padding: var(--ws-spacing-4); border-radius: var(--ws-radius-md); border: 1px solid var(--ws-border-default); background: var(--ws-surface-secondary); }
.form__status[hidden] { display: none; }
.form__status--error { border-color: var(--ws-error-border); background: var(--ws-error-bg); color: var(--ws-error-fg); }
.form__status--success { border-color: var(--ws-success-border); background: var(--ws-success-bg); color: var(--ws-success-fg); }
.form__status--info { border-color: var(--ws-info-border); background: var(--ws-info-bg); color: var(--ws-info-fg); }

/* ----------------------------------------------------------------- consent */

.consent {
  position: fixed;
  left: var(--ws-spacing-4); right: var(--ws-spacing-4); bottom: var(--ws-spacing-4);
  z-index: 60;
  max-width: 460px;
  padding: var(--ws-spacing-5);
  background: var(--ws-surface-elevated);
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-overlay);
}
.consent[hidden] { display: none; }
.consent__heading { font-size: var(--ws-type-h5-size); margin-bottom: var(--ws-spacing-2); }
.consent__body { font-size: var(--ws-type-bodySmall-size); line-height: var(--ws-type-bodySmall-lh); color: var(--ws-text-secondary); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--ws-spacing-2); margin-top: var(--ws-spacing-4); }
.consent__status { margin-top: var(--ws-spacing-3); font-size: var(--ws-type-caption-size); color: var(--ws-text-muted); }
.consent__status:empty { margin: 0; }

/* ------------------------------------------------------------ system pages */

.syspage { padding-block: var(--ws-spacing-24); }
.syspage__code { font-size: var(--ws-type-caption-size); font-weight: var(--ws-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-text-muted); }
.syspage__title { margin-bottom: var(--ws-spacing-4); }
.syspage__lede { font-size: var(--ws-type-lead-size); line-height: var(--ws-type-lead-lh); color: var(--ws-text-secondary); }
.syspage__links { list-style: none; padding: 0; margin-top: var(--ws-spacing-6); }
.syspage__link { display: inline-flex; min-height: 44px; align-items: center; font-weight: var(--ws-weight-semibold); }

/* ---------------------------------------------------------- print/motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .drawer, .consent, .section--cta, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------- legal documents */

.legal-dates { color: var(--ws-text-muted); font-size: var(--ws-type-bodySmall-size); }

/* ------------------------------------------------------------ HTML sitemap */

.sitemap { display: grid; gap: var(--ws-spacing-10); }
@media (min-width: 768px) { .sitemap { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.sitemap__group { break-inside: avoid; }
.sitemap__list { list-style: none; padding: 0; margin: 0; }
.sitemap__list li { margin-bottom: var(--ws-spacing-3); }
.sitemap__list a { display: inline-block; min-height: 24px; font-weight: var(--ws-weight-semibold); }
.sitemap__desc { display: block; font-size: var(--ws-type-caption-size); line-height: var(--ws-type-caption-lh); color: var(--ws-text-muted); }