/* Aggregated styles for the shadow-DOM element. Imported `?inline` by element.ts and
   injected into the shadow root, so the element is self-contained and its CSS neither
   leaks into the host nor is affected by the host's global CSS. Order matters:
   tokens (CSS variables) first. */
/* Font @font-face rules live in fonts.css (injected into document.head by element.ts —
   @font-face is unreliable inside a shadow root). */

/* `:host` so the tokens apply when this file is injected into the element's shadow root
   (`:root` doesn't match inside a shadow tree); `:root` keeps it working in light DOM.
   Custom properties set on the host inherit into the shadow content. */
:host,
:host {
  /* ============ Gray scale ============ */
  --gray-1: #f9fafb;
  --gray-2: #f5f6f7;
  --gray-3: #e9eaed;
  --gray-4: #dfe2e6;
  --gray-5: #d9dce1;
  --gray-6: #8f95a0;
  --gray-7: #717479;
  --gray-8: #555d6f;
  --gray-9: #282f40;
  --gray-10: #18202d;
  --gray-11: #111822;

  /* ============ Blue ============ */
  --blue-1: #fcfdfe;
  --blue-2: #f6f9ff;
  --blue-3: #ecf2ff;
  --blue-4: #ddeaff;
  --blue-5: #cddfff;
  --blue-6: #b9d2ff;
  --blue-7: #a2bfff;
  --blue-8: #81a6f8;
  --blue-9: #386af5;
  --blue-10: #325fdb;
  --blue-11: #2f5bd7;
  --blue-12: #182d63;

  /* ============ Rose ============ */
  --rose-1: #fffcfd;
  --rose-2: #fff7f8;
  --rose-3: #ffe9ed;
  --rose-4: #ffdbe2;
  --rose-5: #ffcdd6;
  --rose-6: #f8bdc8;
  --rose-7: #f0aab7;
  --rose-8: #e791a3;
  --rose-9: #f53878;
  --rose-10: #e6276c;
  --rose-11: #d0025d;
  --rose-12: #67102e;

  /* ============ Yellow ============ */
  --yellow-1: #fefdfb;
  --yellow-2: #fff9e9;
  --yellow-3: #fff1c1;
  --yellow-4: #ffe7a8;
  --yellow-5: #ffdc88;
  --yellow-6: #ffcf73;
  --yellow-7: #f0bd63;
  --yellow-8: #dfa531;
  --yellow-9: #ffc001;
  --yellow-10: #feb70a;
  --yellow-11: #a06b00;
  --yellow-12: #48381c;

  /* ============ Green ============ */
  --green-1: #fbfefd;
  --green-2: #f4fbf7;
  --green-3: #e4f7ee;
  --green-4: #d4f1e3;
  --green-5: #c2e9d7;
  --green-6: #abdec7;
  --green-7: #8bceb1;
  --green-8: #5ab994;
  --green-9: #29a37a;
  --green-10: #20956f;
  --green-11: #00815a;
  --green-12: #1c3b2e;

  /* ============ Red ============ */
  --red-1: #fffcfc;
  --red-2: #fff8f6;
  --red-3: #ffebe8;
  --red-4: #ffdbd5;
  --red-5: #ffccc5;
  --red-6: #ffbcb3;
  --red-7: #f8a79d;
  --red-8: #f08c81;
  --red-9: #d92626;
  --red-10: #c90615;
  --red-11: #d52022;
  --red-12: #641b17;

  /* ============ Purple ============ */
  --purple-1: #fdfcff;
  --purple-2: #fbf8fe;
  --purple-3: #f5eeff;
  --purple-4: #efe3fe;
  --purple-5: #e7d6fb;
  --purple-6: #dcc6f6;
  --purple-7: #ceb0ef;
  --purple-8: #bc94e6;
  --purple-9: #8e4ec6;
  --purple-10: #7f43b3;
  --purple-11: #8145b5;
  --purple-12: #411f5f;

  /* ============ Cyan ============ */
  --cyan-1: #fafdfe;
  --cyan-2: #f2fafd;
  --cyan-3: #dff6fe;
  --cyan-4: #cceffc;
  --cyan-5: #b8e7f8;
  --cyan-6: #a1dbf0;
  --cyan-7: #82cce5;
  --cyan-8: #47b6d8;
  --cyan-9: #00a2c7;
  --cyan-10: #0195b7;
  --cyan-11: #007da0;
  --cyan-12: #0e3c49;

  --white: #ffffff;
  --black: #000000;

  /* ============ Semantic tokens (match _colors.scss) ============ */

  /* Brand gradient */
  --ai-gradient: radial-gradient(
    100% 100% at 50% 0%,
    #fcb500 0%,
    var(--rose-9) 33%,
    var(--blue-9) 78%
  );

  /* Text */
  --text-primary: var(--gray-11);
  --text-secondary: var(--gray-8);
  --text-tertiary: var(--gray-7);
  --text-placeholder: var(--gray-6);
  --text-on-solid: var(--white);
  --text-accent: var(--blue-11);
  --text-accent-high-contrast: var(--blue-12);
  --text-error: var(--red-11);
  --text-error-high-contrast: var(--red-12);
  --text-warning: var(--yellow-11);
  --text-warning-high-contrast: var(--yellow-12);
  --text-success: var(--green-11);
  --text-success-high-contrast: var(--green-12);
  --text-promo: var(--rose-11);
  --text-promo-high-contrast: var(--rose-12);

  /* Background */
  --background-panel: var(--white);
  --background-base: var(--gray-1);
  --background-surface: var(--white);
  --background-input-on-white: var(--gray-2);
  --background-input-on-white-hover: var(--gray-3);
  --background-input-on-gray: var(--white);
  --background-input-on-gray-hover: var(--gray-1);
  --background-input-read-only: var(--gray-3);
  --background-toggle-track: var(--gray-3);

  /* Border */
  --border-primary: var(--gray-4);
  --border-secondary: var(--gray-3);
  --border-primary-overlay: color-mix(
    in srgb,
    var(--gray-10) 7.5%,
    transparent
  );
  --border-primary-alpha: rgba(24, 32, 45, 0.08);
  --border-secondary-alpha: rgba(24, 32, 45, 0.05);

  /* Interaction effects */
  --effect-hover-darken: rgba(24, 32, 45, 0.05);
  --effect-active-darken: rgba(24, 32, 45, 0.1);
  --effect-hover-brighten: rgba(255, 255, 255, 0.08);
  --effect-active-brighten: rgba(255, 255, 255, 0.1);

  /* Skeleton */
  --skeleton-primary: var(--gray-5);
  --skeleton-secondary: var(--gray-3);
  --skeleton-tertiary: var(--gray-2);

  /* Button */
  --button-primary: linear-gradient(
    180deg,
    var(--gray-9) 14%,
    var(--gray-10) 100%
  );
  --button-primary-hover:
    linear-gradient(
      0deg,
      var(--effect-hover-brighten) 0%,
      var(--effect-hover-brighten) 100%
    ),
    linear-gradient(180deg, var(--gray-9) 14%, var(--gray-10) 100%);
  --button-primary-box-shadow:
    0 1px 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 1px 0 rgba(0, 0, 0, 0.24) inset, 0 1px 3px -1px rgba(0, 0, 0, 0.08);
  --button-secondary-hover:
    linear-gradient(
      0deg,
      var(--effect-hover-darken) 0%,
      var(--effect-hover-darken) 100%
    ),
    var(--background-surface);
  --button-secondary-active:
    linear-gradient(
      0deg,
      var(--effect-active-darken) 0%,
      var(--effect-active-darken) 100%
    ),
    var(--background-surface);
  --button-secondary-box-shadow:
    0 -1px 1px 0 rgba(0, 0, 0, 0.04) inset, 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --button-danger: linear-gradient(
    180deg,
    var(--red-9) 14%,
    var(--red-10) 100%
  );
  --button-danger-hover:
    linear-gradient(
      0deg,
      var(--effect-hover-brighten) 0%,
      var(--effect-hover-brighten) 100%
    ),
    linear-gradient(180deg, var(--red-9) 14%, var(--red-10) 100%);
  --button-danger-box-shadow:
    0 1px 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 1px 0 rgba(0, 0, 0, 0.24) inset, 0 1px 3px -1px rgba(0, 0, 0, 0.08);

  /* ============ Typography ============ */
  --font-family: "Inter", system-ui, -apple-system, sans-serif;
  --font-family-heading: "Satoshi", "Inter", system-ui, sans-serif;

  /* Base body text size (13px against the 16px root). Not applied to <html>. */
  --fontSize: 0.8125rem;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-450: 450;
  --font-weight-medium: 500;
  --font-weight-550: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============ Type scale ============
     Each level exposes size/line/tracking/weight so component CSS can
     consume the design system without duplicating literal values. The
     `.sw-text-*` utility classes below reference these same variables. */
  --text-display-size: 3rem; /* 48px */
  --text-display-line: 3.5rem; /* 56px */
  --text-display-tracking: -0.72px;
  --text-display-weight: var(--font-weight-bold);

  --text-title-size: 1.75rem; /* 28px */
  --text-title-line: 2.25rem; /* 36px */
  --text-title-tracking: -0.56px;
  --text-title-weight: var(--font-weight-bold);

  --text-h1-size: 1.5rem; /* 24px */
  --text-h1-line: 2rem; /* 32px */
  --text-h1-tracking: -1.5%;
  --text-h1-weight: var(--font-weight-semibold);

  --text-h2-size: 1.25rem; /* 20px */
  --text-h2-line: 1.75rem; /* 28px */
  --text-h2-tracking: -0.1%;
  --text-h2-weight: var(--font-weight-semibold);

  --text-h3-size: 1rem; /* 16px */
  --text-h3-line: 1.5rem; /* 24px */
  --text-h3-tracking: -0.5%;
  --text-h3-weight: var(--font-weight-semibold);

  --text-h4-size: 0.875rem; /* 14px */
  --text-h4-line: 1.25rem; /* 20px */
  --text-h4-tracking: 0;
  --text-h4-weight: var(--font-weight-550);

  --text-h5-size: 0.8125rem; /* 13px */
  --text-h5-line: 1.25rem; /* 20px */
  --text-h5-tracking: 0;
  --text-h5-weight: var(--font-weight-550);

  --text-body-reg-size: 0.8125rem; /* 13px */
  --text-body-reg-line: 1.25rem; /* 20px */
  --text-body-reg-tracking: 0;
  --text-body-reg-weight: var(--font-weight-450);
  --text-body-reg-weight-bold: var(--font-weight-550);

  --text-body-large-size: 0.875rem; /* 14px */
  --text-body-large-line: 1.25rem; /* 20px */
  --text-body-large-tracking: 0;
  --text-body-large-weight: var(--font-weight-regular);
  --text-body-large-weight-bold: var(--font-weight-550);

  --text-cap-size: 0.75rem; /* 12px */
  --text-cap-line: 1rem; /* 16px */
  --text-cap-tracking: 0;
  --text-cap-weight: var(--font-weight-regular);
  --text-cap-weight-bold: var(--font-weight-550);

  --text-label-size: 0.75rem; /* 12px */
  --text-label-line: 1rem; /* 16px */
  --text-label-tracking: 0;
  --text-label-weight: var(--font-weight-medium);

  --text-overline-size: 0.6875rem; /* 11px */
  --text-overline-line: 1rem; /* 16px */
  --text-overline-tracking: 0.33px;
  --text-overline-weight: var(--font-weight-semibold);
}

* {
  box-sizing: border-box;
}

/* Root stays at the browser default 16px so 1rem = 16px, exactly like
   studio-ui. --fontSize (13px) is the *body text* value only — applying it
   to <html> would rescale every rem-based type token. */
html {
  font-size: 16px;
}

/* `:host` so the base font/color/features apply to the shadow content (a `body` selector
   doesn't match inside a shadow root; without this, shadow content inherits the browser
   default serif). `body` keeps it working in light DOM. */
:host,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--fontSize);
  color: var(--text-primary);
  background: var(--background-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Enable OpenType features for Inter and Satoshi (matches studio-ui).
     Inter uses: ss01, ss03, cv06, cv11. Satoshi uses: ss01. Both: kern, liga, calt.
     Fonts ignore features they don't support. */
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1,
    "ss01" 1,
    "ss03" 1,
    "cv06" 1,
    "cv11" 1;
  font-variant-ligatures: common-ligatures contextual;
}

/* Form controls reset these via user-agent styles, so typed text wouldn't
   pick up the body-level OpenType features. Re-inherit them. */
button,
input,
optgroup,
select,
textarea {
  font-feature-settings: inherit;
  font-variant-ligatures: inherit;
}

/* ============ Type scale ============
   These utility classes are thin wrappers around the `--text-*` custom
   properties defined in :root. Component CSS can use either the class
   directly OR consume the same custom properties to stay in step with
   the design system without duplicating literal values. */
.sw-text-heading-1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  color: var(--text-primary);
}
.sw-text-heading-2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  color: var(--text-primary);
}
.sw-text-heading-3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
  color: var(--text-primary);
}
.sw-text-heading-4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line);
  color: var(--text-primary);
}
.sw-text-heading-5 {
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line);
  color: var(--text-primary);
}
.sw-text-body-reg {
  font-size: var(--text-body-reg-size);
  font-weight: var(--text-body-reg-weight);
  line-height: var(--text-body-reg-line);
  color: var(--text-primary);
}
.sw-text-body-reg-bold {
  font-size: var(--text-body-reg-size);
  font-weight: var(--text-body-reg-weight-bold);
  line-height: var(--text-body-reg-line);
  color: var(--text-primary);
}
.sw-text-body-large {
  font-size: var(--text-body-large-size);
  font-weight: var(--text-body-large-weight);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
}
.sw-text-body-large-bold {
  font-size: var(--text-body-large-size);
  font-weight: var(--text-body-large-weight-bold);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
}
.sw-text-cap {
  font-size: var(--text-cap-size);
  font-weight: var(--text-cap-weight);
  line-height: var(--text-cap-line);
  color: var(--text-tertiary);
}
.sw-text-cap-bold {
  font-size: var(--text-cap-size);
  font-weight: var(--text-cap-weight-bold);
  line-height: var(--text-cap-line);
  color: var(--text-primary);
}
.sw-text-label {
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line);
  color: var(--text-secondary);
}

.sw-text-body-reg-link {
  font-size: var(--text-body-reg-size);
  font-weight: var(--text-body-reg-weight);
  line-height: var(--text-body-reg-line);
  color: var(--text-accent);
}
.sw-text-body-large-link {
  font-size: var(--text-body-large-size);
  font-weight: var(--text-body-large-weight);
  line-height: var(--text-body-large-line);
  color: var(--text-accent);
}
.sw-text-cap-link {
  font-size: var(--text-cap-size);
  font-weight: var(--text-cap-weight);
  line-height: var(--text-cap-line);
  color: var(--text-accent);
}
.sw-text-button {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--text-primary);
}
.sw-text-button-lg {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--text-primary);
}

/* Mobile overrides (match _typography.scss $fontTypesMobile) */
@media (max-width: 767px) {
  .sw-text-body-reg {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sw-text-cap {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .sw-text-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.sw-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
  text-decoration: none;
  font-family: var(--font-family);
  white-space: nowrap;
  transition:
    opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background 150ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sw-button:active:not(:disabled) {
  transform: scale(0.97);
}

.sw-button:focus-visible {
  outline: 2px solid var(--blue-9);
  outline-offset: 2px;
}

.sw-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.sw-button--full-width {
  width: 100%;
}

/* Wrap the icon tightly so the container matches the glyph instead of
   stretching to the button's line-height. */
.sw-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============ Sizes ============ */
.sw-button--small {
  min-height: 2rem;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  gap: 6px;
}
.sw-button--medium {
  min-height: 2.25rem;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  gap: 6px;
}
.sw-button--large {
  min-height: 2.5rem;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  gap: 6px;
}

/* ============ Primary ============ */
.sw-button--primary {
  color: var(--text-on-solid);
  background: linear-gradient(180deg, var(--gray-9) 14%, var(--gray-10) 100%);
  box-shadow:
    0 1px 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 1px 0 rgba(0, 0, 0, 0.24) inset,
    0 1px 3px -1px rgba(0, 0, 0, 0.08);
}
.sw-button--primary:hover:not(:disabled) {
  background:
    linear-gradient(
      0deg,
      var(--effect-hover-brighten) 0%,
      var(--effect-hover-brighten) 100%
    ),
    linear-gradient(180deg, var(--gray-9) 14%, var(--gray-10) 100%);
}
.sw-button--primary:active:not(:disabled) {
  background: var(--gray-11);
  box-shadow: none;
}

/* ============ Secondary ============ */
.sw-button--secondary {
  color: var(--text-primary);
  background: var(--background-surface);
  border-color: var(--border-primary);
  box-shadow:
    0 -1px 1px 0 rgba(0, 0, 0, 0.04) inset,
    0 1px 2px -1px rgba(0, 0, 0, 0.08);
}
.sw-button--secondary:hover:not(:disabled) {
  background:
    linear-gradient(
      0deg,
      var(--effect-hover-darken) 0%,
      var(--effect-hover-darken) 100%
    ),
    var(--background-surface);
}
.sw-button--secondary:active:not(:disabled) {
  background:
    linear-gradient(
      0deg,
      var(--effect-active-darken) 0%,
      var(--effect-active-darken) 100%
    ),
    var(--background-surface);
  box-shadow: none;
}

.sw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: inherit;
}

/* SVGs ship at 1em × 1em with stroke="currentColor", so font-size on the
   wrapper controls size and the page's `color` controls fill/stroke. */
.sw-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* White full-bleed background, content capped at 1220px and centered. */
.pr-page {
  position: relative;
  isolation: isolate;
  background: var(--background-surface);
  min-height: 100vh;
  padding-bottom: 96px;
  overflow-x: clip;
  transition: opacity 150ms ease;
}
/* While any modal is open (the integrations modal and the app-user calculator
   both render the `pr-uam__backdrop` scrim), lift the page above the host
   site's fixed navbar so the modal header isn't hidden behind it. */
.pr-page:has(.pr-uam__backdrop) {
  z-index: 999;
}
/* Host-load gate (`ready={false}`): keep the page laid out but hidden until the
   host has set its async subscription-derived props, then fade in — mirrors the
   Angular modal's `pageLoaded` reveal and avoids a flash of default title/CTAs. */
.pr-page.is-loading {
  opacity: 0;
  pointer-events: none;
}

.pr-content {
  box-sizing: content-box;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Signup flow: "Skip for now" action shown instead of the comparison + marketing
   sections. */
.pr-skip {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.pr-skip__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
}
.pr-skip__btn:hover {
  color: var(--text-primary);
}

/* Decorative grid pattern that sits behind the hero + plans area, masked
   with a radial fade so it dissolves into the page background. */
.pr-bg-pattern {
  position: absolute;
  top: -40px;
  left: 50%;
  /* Nudged off-center so the grid doesn't sit perfectly symmetric. */
  transform: translateX(calc(-50% - 90px));
  width: 1920px;
  height: 1440px;
  pointer-events: none;
  z-index: -1;
  mask-repeat: no-repeat;
  mask-position: center top;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
}

.pr-bg-pattern__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============ Hero ============ */
.pr-hero {
  position: relative;
  /* Bottom padding = the gap from the billing toggle to the plan cards (40px). */
  padding: 64px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.pr-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* Trusted-by strip (heading + logos) under the hero title. */
.pr-trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pr-billing {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

/* Real gradient asset from Figma — vertically flipped, 25% opacity, as in the
   source (scale-y -1, opacity 0.25). */

.pr-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-family-heading);
  font-size: 40px;
  font-weight: var(--font-weight-bold);
  line-height: 48px;
  letter-spacing: -2%;
  text-align: center;
  margin: 0;
  color: var(--text-primary);
}
.pr-hero__subtitle {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line);
}

/* ============ Segmented control ============ */
.pr-segmented {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: var(--background-input-on-white);
  border-radius: 9px;
  border: 1px solid var(--border-secondary);
}

.pr-segmented__option {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 7px;
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-body-large-line);
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}

/* Promo label tucked inside the control, after the options. */
.pr-segmented__promo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-cap-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-cap-line);
  color: var(--text-promo);
  white-space: nowrap;
}
.pr-segmented__promo .sw-icon {
  color: var(--text-promo);
}

.pr-segmented__option:hover {
  color: var(--text-primary);
}

.pr-segmented__option.is-active {
  background: var(--white);
  color: var(--text-primary);
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
}

/* ============ Plans row ============ */
.pr-plans-wrap {
  position: relative;
  z-index: 1;
}
.pr-plans {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--pr-plan-cols, 4), 1fr);
  /* row 1 = header+CTA, row 2 = features (grows), row 3 = usage section
     (Builders/Additional + usage limits, collapsible). Rows 1 and 3 are
     equalized across cards via subgrid. */
  grid-template-rows: auto 1fr auto;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 10px 20px -2px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Cards inherit the outer rounding only at the TOP corners that touch the
   container's border. The bottom corners belong to the Usage limits toggle
   row (which sits as the last row inside .pr-plans). Removing
   `overflow: hidden` on .pr-plans lets the Popular badge extend above the
   card; without these per-card radii, the first/last cards would otherwise
   sit slightly past the rounded corner edge. */
.pr-plan:first-child {
  border-radius: 15px 0 0 0;
}
.pr-plan:last-of-type {
  border-radius: 0 15px 0 0;
}

.pr-plan {
  position: relative;
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 20px 24px;
  border-right: 1px solid var(--border-secondary);
  /* Default `min-width: auto` lets long content push the 1fr track wider
     than its share. min-width:0 forces all four tracks to equal width. */
  min-width: 0;
}

/* Header + CTA. Shares row 1 across all cards (subgrid), so taglines that
   wrap stay aligned; the CTA pins to the bottom of that shared row. */
.pr-plan__top {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pr-plan__top .pr-plan__cta {
  margin-top: auto;
}

/* ============ AI credits dropdown (under each plan CTA) ============ */
.pr-ai {
  position: relative;
  margin-top: 16px;
}
.pr-ai__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  /* Figma: 5px vertical, 10px left (before the icon), 8px right (after caret). */
  padding: 5px 8px 5px 10px;
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
}
.pr-ai__trigger:hover:not(:disabled) {
  border-color: var(--gray-6);
}
.pr-ai__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.pr-ai__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.pr-ai__value {
  flex: 1;
  text-align: left;
}
.pr-ai__chevron {
  flex-shrink: 0;
  color: var(--text-tertiary);
}
/* Paint the stars icon with the shared AI gradient (paint-server in PricingPage). */
.pr-ai__icon--gradient path[fill] {
  fill: url(#ai-credits-gradient);
}
.pr-ai__icon--gradient path[stroke] {
  stroke: url(#ai-credits-gradient);
}

/* Fixed-anchored menu — escapes the plan grid's overflow clip. */
.pr-ai__menu {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  box-shadow:
    0 12px 24px -6px rgba(0, 0, 0, 0.12),
    0 4px 8px -2px rgba(0, 0, 0, 0.08);
  max-height: 320px;
  overflow-y: auto;
}
.pr-ai__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
}
.pr-ai__opt:hover:not(:disabled) {
  background: var(--effect-hover-darken);
}
.pr-ai__opt:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.pr-ai__opt.is-active {
  background: var(--background-input-on-white);
}
.pr-ai__opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pr-ai__check {
  flex-shrink: 0;
  color: var(--blue-9);
}

.pr-plan:last-of-type {
  border-right: 0;
}

.pr-plan--popular {
  background:
    radial-gradient(
      186.92% 68.95% at 100% 1.69%,
      var(--blue-4) 0%,
      rgba(246, 249, 255, 0.13) 100%
    ),
    var(--background-surface);
}

/* Custom tab badge that sits ON TOP of the Business card — rounded top
   corners only, flat bottom, attached flush to the card's top edge. */
.pr-plans-badge {
  position: absolute;
  bottom: 100%;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px 8px 0 0;
  background: var(--blue-9);
  color: var(--text-on-solid);
  z-index: 2;
}

.pr-plans-badge .sw-icon {
  color: var(--text-on-solid);
}

.pr-plan__badge-label {
  font-size: var(--text-overline-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-cap-line);
  letter-spacing: 3%;
  text-transform: uppercase;
}

.pr-plan__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
}

.pr-plan__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.pr-plan__name {
  margin: 0;
}

.pr-plan__price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.pr-plan__price-amount {
  color: var(--text-primary);
}

.pr-plan__price-suffix {
  color: var(--text-secondary);
}

.pr-plan__tagline {
  margin: 0;
  color: var(--text-tertiary);
}

.pr-plan__cta--business {
  background: linear-gradient(180deg, var(--blue-9) 14%, var(--blue-10) 100%);
  border-color: transparent;
}

.pr-plan__cta--business:hover:not(:disabled) {
  background:
    linear-gradient(
      0deg,
      var(--effect-hover-brighten) 0%,
      var(--effect-hover-brighten) 100%
    ),
    linear-gradient(180deg, var(--blue-9) 14%, var(--blue-10) 100%);
}

/* ============ Features ============ */
.pr-plan__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  padding-bottom: 24px;
}

.pr-plan__features-header {
  margin: 0;
  color: var(--text-secondary);
}

.pr-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Shared row: features, usage panel, and seats all use this row shape.
   24px min-height; label and value share one row, value text wraps
   internally when narrow. */
.pr-feature {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 24px;
  color: var(--text-secondary);
}
/* Inner icon + label wrapper: hugs content. Icon aligns with the first
   line of the label (not the middle when the label wraps). */
.pr-feature__main {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* Inside usage panel + seats: keep the label area at its content width so
   the value (right side) absorbs any narrow-card squeeze instead. */
.pr-usage-list .pr-feature__main {
  flex-shrink: 0;
}

.pr-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.pr-feature__value {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Dashed-underline value (tooltip affordance, e.g. App users "Team: 5 +
   Client: 5"). Allows wrapping inside the value column so it stays on the
   same row as the label even on narrow cards. */
.pr-feature__value--underline {
  position: relative;
  cursor: help;
  white-space: normal;
  word-break: break-word;
  text-align: right;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* Inline link trigger (e.g. "Extra user starts at $2/month"). */
.pr-feature__link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: var(--text-primary);
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.pr-feature__link:hover {
  text-decoration-color: var(--gray-7);
}

/* Base label — plain by default (no underline / tooltip). */
.pr-feature__label {
  position: relative;
  color: var(--text-secondary);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pr-int__label {
  position: relative;
}

/* Plan/usage feature tooltip — element-based (`.pr-feature__tip`) so it can hold
   rich, multi-paragraph copy (and bold "lead" prefixes). The dotted-underline
   affordance sits on the label (`--tip`) or the App-users value; the bubble
   shows on hover. */
.pr-feature__label--tip {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.pr-feature__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px;
  padding: 14px;
  background: var(--gray-10);
  color: var(--white);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  border-radius: 12px;
  box-shadow:
    0 12px 24px -4px rgba(0, 0, 0, 0.24),
    0 2px 4px -1px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms;
  pointer-events: none;
}
/* Right-align under a right-column value so the bubble stays within the card. */
.pr-feature__tip--end {
  left: auto;
  right: 0;
}
.pr-feature__tip-lead {
  font-weight: var(--font-weight-semibold);
}
.pr-feature__label--tip:hover .pr-feature__tip,
.pr-feature__value--underline:hover .pr-feature__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Comparison-row tooltip — element-based (`.pr-cmp__tip`) so each can optionally
   include an image. Card + underline only render when the row has a tooltip. */
.pr-cmp__cell--label {
  position: relative;
}
/* Muted subtitle under a comparison row label (e.g. "All building blocks").
   As a flex item it's blockified, so the label cell's dotted underline does
   not bleed into it. */
.pr-cmp__sublabel {
  display: block;
  margin-top: 2px;
  font-size: var(--text-cap-size);
  line-height: var(--text-cap-line);
  font-weight: var(--font-weight-regular);
  color: var(--text-tertiary);
  text-decoration: none;
}

.pr-cmp__cell--label--tip {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.pr-cmp__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px;
  padding: 14px;
  background: var(--gray-10);
  color: var(--white);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  text-align: left;
  white-space: normal;
  border-radius: 12px;
  box-shadow:
    0 12px 24px -4px rgba(0, 0, 0, 0.24),
    0 2px 4px -1px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms;
  pointer-events: none;
}
.pr-cmp__tip-lead {
  font-weight: var(--font-weight-semibold);
}
.pr-cmp__cell--label--tip:hover .pr-cmp__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pr-cmp__tip-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Cell-value tooltip (e.g. "Light branding", "+ Dynamic logo"): dotted-underline
   affordance on the value, with the bubble centered above it. */
.pr-cmp__cell-tip-anchor {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.pr-cmp__tip--cell {
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.pr-cmp__cell-tip-anchor:hover .pr-cmp__tip--cell {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pr-plan__integrations {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

/* ============ Usage toggle (footer row inside the plans grid) ============
   Lives as the last child of .pr-plans, spanning all 4 columns. Owns the
   container's bottom rounded corners and the top divider between the cards
   row and the footer. */
.pr-usage-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-secondary);
  border-radius: 0 0 15px 15px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-550);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
}

.pr-usage-toggle:hover {
  background: var(--effect-hover-darken);
}

.pr-usage-toggle__icons {
  display: inline-flex;
  align-items: center;
  /* Right padding leaves room for the 14°-rotated 3rd tile, which would
     otherwise get clipped by overflow:hidden during the hide animation. */
  padding: 4px 6px 4px 6px;
  max-width: 200px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-width 240ms ease,
    opacity 200ms ease,
    margin-right 240ms ease;
}
.pr-usage-toggle__icons.is-hidden {
  max-width: 0;
  opacity: 0;
  /* Cancel the parent flex gap so the label slides flush. */
  margin-right: -12px;
  pointer-events: none;
}
.pr-usage-toggle__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  margin-right: -8px;
  transform-origin: center center;
}
/* Back: yellow, tilted right */
.pr-usage-toggle__tile:nth-child(3) {
  color: var(--yellow-9);
  transform: translateY(1px) rotate(14deg);
  z-index: 1;
  margin-right: 0;
}
/* Middle: rose, straight */
.pr-usage-toggle__tile:nth-child(2) {
  color: var(--rose-9);
  transform: translateY(-1px);
  z-index: 2;
}
/* Front: blue, tilted left */
.pr-usage-toggle__tile:nth-child(1) {
  color: var(--blue-9);
  transform: translateY(2px) rotate(-14deg);
  z-index: 3;
}

.pr-usage-toggle__chevron {
  color: var(--text-tertiary);
}

/* ============ Usage panel (per-card, shown when toggle is open) ============
   `margin-top: auto` pushes the panel to the bottom of each card so every
   card's usage rows align on the same baseline regardless of feature-list
   length (cards stretch to equal height via the .pr-plans grid). */
/* Animated open/close for the per-card usage panel. */
.pr-usage-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}
.pr-usage-wrap.is-open {
  grid-template-rows: 1fr;
}
.pr-usage-clip {
  overflow: hidden;
  min-height: 0;
}
/* Once open, stop clipping so hover tooltips can extend above the rows. */
.pr-usage-wrap.is-open .pr-usage-clip {
  overflow: visible;
}

.pr-usage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Seats list opens the expanded panel: a divider + top spacing separate it
   from the card's features above, and a tighter 2px gap sits between the
   Builders and Additional rows. */
.pr-seats-list {
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--border-secondary);
}

/* App-users list flows straight after the seats rows with the usual row gap —
   no divider between "Additional" and "App users". */
.pr-seats-list + .pr-usage-list {
  margin-top: 8px;
}

/* "Additional" seats row: its elbow icon sits in the icon column (no extra
   indent) so it reads as connecting up to the Builders row, rendered in a
   lighter tone as a sub-line. */
.pr-seat-additional .pr-feature__icon,
.pr-seat-additional .pr-feature__label,
.pr-seat-additional .pr-feature__value {
  color: var(--text-tertiary);
}

/* Clickable "Additional" row (App users → opens the calculator): an unstyled
   button that fills the row and keeps the label/value split. */
.pr-seat-additional__btn {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Bordered pill dropdown (AI credits "100/mo"). */
.pr-feature__select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-family);
  font-size: var(--text-body-reg-size);
  font-weight: var(--font-weight-450);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
}
.pr-feature__select .sw-icon {
  color: var(--text-secondary);
}

/* ===== App user calculator modal ===== */
.pr-uam__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 34, 0.4);
}

.pr-uam {
  display: flex;
  flex-direction: column;
  width: 760px;
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 24px;
  background: var(--background-surface);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  box-shadow:
    0 4px 12px -1px rgba(0, 0, 0, 0.1),
    0 24px 48px -8px rgba(0, 0, 0, 0.16);
}

.pr-uam__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.pr-uam__head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Heading 3 */
.pr-uam__title {
  margin: 0;
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h3-line);
  letter-spacing: -0.5%;
  color: var(--text-primary);
}
.pr-uam__subtitle {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-450);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
}
/* Inline "How additional user billing works?" link (button reset). */
.pr-uam__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--font-weight-450);
  color: var(--blue-9);
  cursor: pointer;
}
.pr-uam__link:hover {
  text-decoration: underline;
}
/* Back header (info view) — chevron + title, returns to the calculator. */
.pr-uam__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pr-uam__back .sw-icon {
  color: var(--text-secondary);
}
.pr-uam__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border-secondary);
  border-radius: 50%;
  background: var(--background-surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.06);
}
.pr-uam__close:hover {
  background: var(--effect-hover-darken);
}

/* Pro / Business toggle */
.pr-uam__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.pr-uam__tab {
  appearance: none;
  padding: 6px 16px;
  border: 1px solid var(--border-primary);
  border-radius: 99px;
  background: var(--background-surface);
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
  cursor: pointer;
}
.pr-uam__tab:hover {
  background: var(--effect-hover-darken);
}
.pr-uam__tab.is-active {
  border-color: var(--blue-9);
  background: var(--blue-2);
  color: var(--text-accent);
}

.pr-uam__body {
  display: flex;
  gap: 32px;
}

/* Left form (Team / Client rows + note) */
.pr-uam__form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pr-uam__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.pr-uam__row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Dotted-underline label + hover/focus tooltip. */
.pr-uam__tip {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  cursor: help;
  outline: none;
}
.pr-uam__label {
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-underline-offset: 4px;
}
.pr-uam__tip-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: 240px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: break-spaces;
  background: var(--text-primary);
  color: var(--white);
  font-size: var(--text-cap-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-cap-line);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    visibility 120ms ease;
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.15);
}
.pr-uam__tip:hover .pr-uam__tip-bubble,
.pr-uam__tip:focus-visible .pr-uam__tip-bubble {
  opacity: 1;
  visibility: visible;
}
.pr-uam__caption {
  margin: 0;
  font-size: var(--text-cap-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-cap-line);
  color: var(--text-tertiary);
}
.pr-uam__note {
  margin: 0;
  font-size: var(--text-body-reg-size);
  font-weight: var(--font-weight-450);
  line-height: var(--text-body-reg-line);
  color: var(--text-tertiary);
}

/* Stepper (minus / number / plus) */
.pr-uam__control {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.pr-uam__stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pr-uam__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--blue-9);
  color: var(--white);
  cursor: pointer;
  box-shadow:
    0 1px 3px -1px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 0 1px rgba(0, 0, 0, 0.24);
}
.pr-uam__step:disabled {
  opacity: 0.5;
  cursor: default;
}
.pr-uam__input {
  width: 80px;
  height: 36px;
  padding: 0 12px;
  text-align: left;
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  background: var(--background-input-on-white);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}
.pr-uam__input:focus {
  outline: 2px solid var(--blue-9);
  outline-offset: -1px;
}
.pr-uam__input.is-invalid {
  background: var(--background-surface);
  border-color: var(--yellow-9);
}
.pr-uam__input.is-invalid:focus {
  outline-color: var(--yellow-9);
}
/* "Max X" caption — aligned under the number input (past the minus button:
   32px button + 12px stepper gap). */
.pr-uam__error {
  margin: 0;
  margin-left: 44px;
  font-size: var(--text-cap-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-cap-line);
  color: var(--text-warning);
}

/* Right result box */
.pr-uam__result {
  flex: 0 0 260px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border-primary);
  border-radius: 20px;
}
.pr-uam__result-title {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-550);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
}
.pr-uam__result-included {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-550);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
}
.pr-uam__result-sum {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-uam__result-plus {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-550);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
}
/* Emphasised "Additional $X/mo" line — darker than the base-price line. */
.pr-uam__result-additional {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-550);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
}
.pr-uam__result-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-450);
  line-height: var(--text-body-large-line);
  color: var(--blue-9);
  cursor: pointer;
}
.pr-uam__result-link:hover {
  text-decoration: underline;
}

/* "How additional user billing works?" accordion (info view) */
.pr-uam__accordion {
  display: flex;
  flex-direction: column;
}
.pr-uam__acc-item {
  border-bottom: 1px solid var(--border-secondary);
}
.pr-uam__acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pr-uam__acc-title {
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-h2-line);
  color: var(--text-primary);
  letter-spacing: -1%;
}
.pr-uam__acc-head .sw-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
}
.pr-uam__acc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
}
.pr-uam__acc-text {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
}
.pr-uam__acc-list {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
}
.pr-uam__acc-list li + li {
  margin-top: 8px;
}

/* Mobile: bottom sheet, single column, result box below the form. */
@media (max-width: 639px) {
  .pr-uam__backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .pr-uam {
    width: 100%;
    max-width: 100%;
    min-height: min(600px, 90dvh);
    max-height: 90dvh;
    border-radius: 16px 16px 0 0;
  }
  .pr-uam__body {
    flex-direction: column;
    gap: 24px;
  }
  .pr-uam__result {
    flex: none;
    width: 100%;
    min-height: 200px;
  }
}

/* ============ Integration chips (shared) ============ */
.pr-int {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px;
}
.pr-int__logos {
  display: inline-flex;
  gap: 8px;
}
.pr-int__logo {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
/* Okta renders as an inline monochrome SVG (currentColor); size it to the logo
   box and paint it white on the dark enterprise card. */
.pr-int__logo--okta svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pr-enterprise .pr-int__logo--okta {
  color: var(--text-on-solid);
}
.pr-int__label {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
/* Button variant — pointer cursor + transparent button reset. */
button.pr-int__label--link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}
button.pr-int__label--link:hover {
  color: var(--blue-9);
  text-decoration-color: var(--blue-9);
}

/* ===== Integrations modal ===== */
/* Reuses the .pr-uam shell (backdrop, radius, mobile bottom-sheet). Header +
   pills stay fixed; the body scrolls. */
.pr-intmodal {
  width: 640px;
  max-width: 100%;
  height: 680px;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pr-intmodal__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.pr-intmodal__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
}
/* Close button: 28px in this modal (Figma), overriding the shared 32px. */
.pr-intmodal .pr-uam__close {
  width: 28px;
  height: 28px;
}
.pr-intmodal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 224px;
  max-width: 100%;
  margin-left: auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  background: var(--background-input-on-white);
  color: var(--text-tertiary);
}
.pr-intmodal__search:focus-within {
  border-color: var(--blue-9);
}
.pr-intmodal__search input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
}
.pr-intmodal__search input::-webkit-search-cancel-button {
  appearance: none;
}
.pr-intmodal__search-clear {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

/* Plan pills */
.pr-intmodal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.pr-intmodal__chip {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* Fixed height + border-box so the active pill's 1.5px border doesn't make it
     a different size from the rest (matches the studio picker-button, size S). */
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-primary);
  border-radius: 99px;
  background: var(--background-surface);
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  font-family: var(--font-family);
  font-size: var(--text-body-reg-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
}
.pr-intmodal__chip:hover:not(.is-active) {
  background: var(--effect-hover-darken);
}
.pr-intmodal__chip.is-active {
  border-width: 1.5px;
  border-color: var(--blue-9);
  background: var(--blue-2);
  color: var(--text-accent);
}

/* Enterprise note (replaces the "not included" section) */
.pr-intmodal__enterprise {
  margin: 0 0 24px;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-450);
  line-height: var(--text-body-large-line);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.pr-intmodal__enterprise-link {
  color: var(--blue-9);
}
.pr-intmodal__enterprise-link:hover {
  text-decoration: underline;
}

.pr-intmodal__body {
  flex: 1 1 auto;
  min-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pr-intmodal__loading {
  margin: 0;
  color: var(--text-tertiary);
}

.pr-intmodal__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pr-intmodal__section-title {
  margin: 0;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
}

.pr-intmodal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pr-intmodal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--background-surface);
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
}
.pr-intmodal__logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}
.pr-intmodal__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pr-intmodal__name {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-intmodal__tier {
  font-size: var(--text-cap-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-cap-line);
  color: var(--text-tertiary);
}

/* Search-with-no-results empty state (REST API upsell) */
.pr-intmodal__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.pr-intmodal__empty-title {
  margin: 0;
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h3-line);
  color: var(--text-primary);
}
.pr-intmodal__empty-text {
  margin: 0;
  max-width: 360px;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  color: var(--text-tertiary);
}

/* Mobile: bottom sheet (via .pr-uam), search below title, pills wrap, 2 cols. */
@media (max-width: 639px) {
  .pr-intmodal {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .pr-intmodal__head {
    flex-wrap: wrap;
  }
  .pr-intmodal__title {
    flex: 1 1 auto;
  }
  .pr-intmodal__close {
    order: 2;
  }
  .pr-intmodal__search {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .pr-intmodal__body {
    min-height: 0;
    overflow: visible;
  }
  .pr-intmodal__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Enterprise card ============ */
.pr-enterprise {
  position: relative;
  margin-top: 32px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: center;
  padding: 32px;
  /* Dark navy: gray-9 at the top with a gentle darkening toward the bottom.
     The gray-10 stop sits past 100% so the visible bottom only partly
     approaches it (~#1f2635), matching the subtle Figma gradient. */
  background: linear-gradient(180deg, var(--gray-9) 0%, var(--gray-10) 170%);
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  box-shadow:
    0 10px 20px -2px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Subtle inner highlight/edge to match the design. */
.pr-enterprise::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 0 1px rgba(0, 0, 0, 0.24);
}

/* Text + icons sit on the dark card: render them white (Figma uses pure
   white / text-on-solid for the heading, tagline, feature icons and labels). */
.pr-enterprise .pr-feature,
.pr-enterprise .pr-feature__icon,
.pr-enterprise .pr-feature__label,
.pr-enterprise .pr-int__label {
  color: var(--text-on-solid);
}

/* Heading 1 */
.pr-enterprise__name {
  margin: 0;
  color: var(--text-on-solid);
}

/* Body - Large */
.pr-enterprise__tagline {
  margin: 8px 0 0;
  color: var(--text-on-solid);
}

.pr-enterprise__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.pr-enterprise__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ----- Compliance seals (SOC 2, GDPR), below the tagline ----- */
.pr-enterprise__seals {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.pr-enterprise__seal {
  display: block;
  width: 60px;
  height: 60px;
}

/* ----- Inline integration logos row ----- */
.pr-feature--inline-logos {
  flex-wrap: wrap;
}
/* avatar stack */
.pr-avatars {
  display: inline-flex;
}
.pr-avatars__a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gray-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.pr-avatars--stack .pr-avatars__a + .pr-avatars__a {
  margin-left: -8px;
}
.pr-avatars__a--photo {
  object-fit: cover;
  background: var(--gray-3);
}

/* ============ Discount banner ============ */
.pr-discount {
  position: relative;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow:
    0 10px 20px -2px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Dot grid that fades out radially from the center of the card. */
.pr-discount::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--gray-4) 1px, transparent 1.5px) 0
    0 / 16px 16px;
  mask-image: radial-gradient(
    ellipse 60% 80% at center,
    #000 0%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 60% 80% at center,
    #000 0%,
    transparent 80%
  );
  pointer-events: none;
}

.pr-discount__center {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pr-discount__icon {
  display: inline-flex;
  color: var(--rose-9);
  font-size: 48px;
}

.pr-discount__text {
  margin: 0;
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-h2-line);
  color: var(--text-primary);
}
.pr-discount__text strong {
  font-weight: var(--font-weight-semibold);
  color: var(--rose-9);
}
/* `position: relative` alone lifts the button above the dot-grid `::before` (positioned
   elements paint in tree order) — no z-index, so the button never competes with modal
   backdrops or host-page stacking. */
.pr-discount .sw-button {
  position: relative;
  width: 200px;
  flex: 0 0 auto;
}

/* ============ Social proof ============ */
.pr-social {
  /* Distance from the discount banner to the testimonial carousel. */
  margin-top: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pr-social__heading {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  line-height: 28px;
  letter-spacing: -0.5%;
  color: var(--text-tertiary);
  text-align: center;
}

.pr-social__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  flex-wrap: wrap;
}

.pr-social__logo {
  height: 24px;
  object-fit: contain;
  opacity: 0.9;
}

/* ============ Testimonial carousel ============ */
.pr-testimonial {
  position: relative;
  width: 100%;
  padding: 60px 40px;
  background: var(--gray-2);
  border-radius: 32px;
  overflow: hidden;
}

/* Crossfade: every slide shares one grid cell (so the track sizes to the
   tallest slide) and opacity animates the active one in. */
.pr-testimonial__track {
  display: grid;
  width: 100%;
}
.pr-testimonial__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.pr-testimonial__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.pr-testimonial__content {
  display: flex;
  align-items: center;
  gap: 80px;
  max-width: 1216px;
  width: 100%;
  margin: 0 auto;
}

.pr-testimonial__photos {
  position: relative;
  flex-shrink: 0;
  width: 344px;
  height: 284px;
}

.pr-testimonial__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 229px;
  height: 283px;
  object-fit: cover;
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  box-shadow:
    0 1px 4px -1px rgba(0, 0, 0, 0.12),
    0 7px 18px -1px rgba(0, 0, 0, 0.06);
}
.pr-testimonial__photo--back1 {
  transform: translate(-50%, -50%) rotate(-7.5deg);
}
.pr-testimonial__photo--back2 {
  transform: translate(-50%, -50%) rotate(7.5deg);
}
.pr-testimonial__photo--front {
  transform: translate(-50%, -50%);
}

.pr-testimonial__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
  min-width: 0;
  padding-right: 45px;
}

.pr-testimonial__quote {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  line-height: 40px;
  letter-spacing: -0.32px;
}
.pr-testimonial__quote-strong {
  color: var(--text-primary);
}
.pr-testimonial__quote-muted {
  color: var(--text-secondary);
}

/* Author: logo | name+role, with a dashed rule top, bottom, and between.
   Shrinks to content; full-width on desktop (body stretches it), centered on
   tablet, stacked on mobile. */
.pr-testimonial__author {
  display: flex;
  /* Shrink to content (logo + name/role) so the dashed top/bottom rules reach
     only as far as the author info, not the full body width. */
  align-self: flex-start;
  align-items: stretch;
  border-top: 1px dashed var(--gray-5);
  border-bottom: 1px dashed var(--gray-5);
}
.pr-testimonial__author-logo {
  display: flex;
  align-items: center;
  padding: 20px 40px 20px 0;
  border-right: 1px dashed var(--gray-5);
}
.pr-testimonial__brand {
  height: 20px;
  width: auto;
  object-fit: contain;
}
.pr-testimonial__author-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0 24px 40px;
}
.pr-testimonial__author-name {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
.pr-testimonial__author-role {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--text-secondary);
}

.pr-testimonial__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease;
}
.pr-testimonial__nav:hover {
  background: var(--effect-hover-darken);
}
.pr-testimonial__nav--left {
  left: 40px;
}
.pr-testimonial__nav--right {
  right: 40px;
}

/* Tablet + mobile (< 1000px): stack vertically, arrows flank the photos. */
@media (max-width: 999px) {
  .pr-testimonial {
    padding: 80px 32px 64px;
  }
  .pr-testimonial__content {
    flex-direction: column;
    gap: 56px;
    text-align: center;
  }
  .pr-testimonial__photos {
    width: 280px;
    height: 231px;
  }
  .pr-testimonial__photo {
    width: 186.5px;
    height: 230px;
    border-radius: 8px;
  }
  .pr-testimonial__body {
    width: 100%;
    padding-right: 0;
  }
  .pr-testimonial__author {
    align-self: center;
  }
  .pr-testimonial__nav {
    top: 195px;
  }
  .pr-testimonial__nav--left {
    left: calc(50% - 222px);
  }
  .pr-testimonial__nav--right {
    right: calc(50% - 222px);
  }
}

/* Mobile (< 640px): smaller quote, author stacked + centered (no rules). */
@media (max-width: 639px) {
  .pr-testimonial {
    padding: 60px 20px 40px;
  }
  .pr-testimonial__content {
    gap: 32px;
  }
  .pr-testimonial__body {
    gap: 32px;
  }
  .pr-testimonial__quote {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.24px;
  }
  .pr-testimonial__author {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 0;
  }
  .pr-testimonial__author-logo {
    padding: 20px 0;
    border-right: 0;
  }
  .pr-testimonial__author-meta {
    padding: 0;
    align-items: center;
    text-align: center;
  }
  .pr-testimonial__nav {
    top: 176px;
  }
  .pr-testimonial__nav--left {
    left: calc(50% - 176px);
  }
  .pr-testimonial__nav--right {
    right: calc(50% - 176px);
  }
}

/* ============ Compare plans ============ */
.pr-compare {
  margin-top: 160px;
}

/* Headings/Heading 2, centered */
.pr-cmp__heading {
  margin: 0;
  text-align: left;
}
/* Hide the heading once the head row pins to the top. */
.pr-cmp__head.is-stuck .pr-cmp__heading {
  visibility: hidden;
}

/* Inline version of the group header that lives inside the sticky head. */
.pr-cmp__group.pr-cmp__group--inhead {
  padding: 0;
  background: transparent;
}

/* Fade in whenever the heading slot's content swaps (key-driven remount). */
.pr-cmp__head-cell--heading > * {
  animation: pr-cmp__heading-fade 220ms ease both;
}
@keyframes pr-cmp__heading-fade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pr-cmp__table-wrap {
  position: relative;
}
/* Collapsed: clip to a short peek of the first group. `clip-path` clips only
   the bottom (top extended) so a first-row hover tooltip can still escape
   upward instead of being cut off by the peek. */
.pr-cmp__table-wrap.is-collapsed {
  max-height: 296px;
  overflow: visible;
  clip-path: inset(-1000px 0 0 0);
}

/* White fade over the lower rows in the collapsed state. */
.pr-cmp__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--background-surface) 62%
  );
  pointer-events: none;
}

.pr-cmp__toggle {
  display: flex;
  justify-content: center;
}
/* Collapsed: button floats centered over the fade. */
.pr-cmp__toggle:not(.is-expanded) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
}
/* Expanded: button sits below the full table. */
.pr-cmp__toggle.is-expanded {
  margin-top: 24px;
}

/* Zero-height marker; when it scrolls past the top the header is pinned. */
.pr-cmp__sentinel {
  height: 1px;
  margin-bottom: -1px;
}

.pr-cmp__head {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--cmp-cols, 5), 1fr);
  align-items: end;
  /* No outer vertical padding; the plan-card cells own their top/bottom. */
  padding: 0;
  position: sticky;
  /* Pin line is themable from the host page: sites with a fixed header set
     --pr-cmp-head-top (e.g. 80px on softr.io) so the pinned head clears it.
     The is-stuck sentinel observer reads the resolved value — keep in sync. */
  top: var(--pr-cmp-head-top, 0px);
  z-index: 5;
  background: var(--background-surface);
  border-bottom: 1px solid transparent;
}
/* Divider only appears once the header is pinned. */
.pr-cmp__head.is-stuck {
  border-bottom-color: var(--border-primary);
}
/* Collapsed table: no need to pin the header. */
.pr-cmp__head--static {
  position: static;
}
.pr-cmp__head-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}
/* Heading cell: center its content vertically with the plan column stack. */
.pr-cmp__head-cell--heading {
  align-self: stretch;
  justify-content: center;
  padding: 0;
}
.pr-cmp__head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
/* Heading 3 */
.pr-cmp__col-name {
  letter-spacing: -0.5%;
}
.pr-cmp__col-price {
  color: var(--text-secondary);
}

.pr-cmp__table {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Each group is its own rounded card. */
.pr-cmp__group-block {
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  background: var(--white);
}
/* Round the last row so the tint respects the container radius. (Previously handled
   by `overflow: hidden`, removed so hover tooltips can escape the block.) */
.pr-cmp__group-block > .pr-cmp__row:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.pr-cmp__group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: var(--text-primary);
}
.pr-cmp__group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cmp-icon);
}

.pr-cmp__row {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--cmp-cols, 5), 1fr);
  align-items: center;
  padding: 12px 0;
}
/* First data row in each group is child 2 (group header is child 1) → tinted. */
.pr-cmp__row:nth-child(even) {
  background: var(--cmp-tint);
}

.pr-cmp__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 12px;
  font-size: var(--text-body-large-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-large-line);
  color: var(--text-primary);
  text-align: center;
}
.pr-cmp__cell--label {
  align-items: flex-start;
  padding-left: 20px;
  text-align: left;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gray-5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.pr-cmp__accent {
  color: var(--text-tertiary);
  font-size: var(--text-body-reg-size);
}

/* Center-align the calculator link when it lives inside a comparison cell. */
.pr-cmp__cell .pr-feature__link {
  text-align: center;
}
/* Normal (non-accent) sub-label, e.g. "+ Dynamic logo". */
.pr-cmp__note {
  color: var(--text-primary);
}
.pr-cmp__check {
  color: var(--green-9);
}

/* Gray "not included" minus-circle (solid). */
.pr-cmp__dash {
  color: var(--gray-4);
}

/* AI-credits style dropdown. */
.pr-cmp__select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  min-width: 84px;
  justify-content: space-between;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-primary);
  font-size: var(--text-body-reg-size);
}
.pr-cmp__select .sw-icon {
  color: var(--text-tertiary);
}

/* ============ FAQ ============ */
.pr-faq {
  margin-top: 200px;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  /* Left column stacks the title (top) and the contact block; the list spans
     both rows on the right. This lets the contact block drop below the list on
     narrow screens while the title stays on top. */
  grid-template-areas:
    "title list"
    "contact list";
  /* Title row hugs its content; the second row takes the slack so the contact
     block sits directly under the title (not dragged down by the tall list). */
  grid-template-rows: auto 1fr;
  column-gap: 80px;
  row-gap: 24px;
  align-items: start;
}

.pr-faq__contact {
  grid-area: contact;
}

/* Headings/Title */
.pr-faq__title {
  grid-area: title;
  /* Extra top padding so the title aligns with the first FAQ item's text
     (the item has 20px vertical padding). */
  padding-top: 16px;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 32px;
  font-weight: var(--font-weight-bold);
  line-height: 40px;
  letter-spacing: -2%;
  color: var(--text-primary);
}

.pr-faq__subtitle {
  /* No top margin: the 24px title→contact gap is the grid row-gap alone. */
  margin: 0 0 16px;
  color: var(--text-tertiary);
  font-weight: 450;
}

.pr-faq__list {
  grid-area: list;
  display: flex;
  flex-direction: column;
}

.pr-faq__item {
  border-bottom: 1px solid var(--border-primary);
}
.pr-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 12px 20px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 28px;
  letter-spacing: -1%;
  color: var(--text-primary);
  text-align: left;
}
.pr-faq__toggle {
  display: inline-flex;
  color: var(--text-tertiary);
}
/* Animated open/close: grid rows 0fr → 1fr gives a smooth height transition. */
.pr-faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}
.pr-faq__item.is-open .pr-faq__a-wrap {
  grid-template-rows: 1fr;
}
.pr-faq__a {
  overflow: hidden;
  min-height: 0;
}
.pr-faq__a-text {
  margin: 0;
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5%;
  color: var(--text-tertiary);
}
/* Space between stacked answer paragraphs (all but the last, which uses the
   padding-bottom above as the answer's bottom gap). */
.pr-faq__a-text:not(:last-child) {
  padding-bottom: 12px;
}
/* Bulleted answer block (e.g. "How are app users counted?"). */
.pr-faq__a-list {
  margin: 0;
  padding: 0 0 20px 1.25em;
  list-style: disc;
  color: var(--text-tertiary);
}
.pr-faq__a-list:not(:last-child) {
  padding-bottom: 12px;
}
.pr-faq__a-item {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5%;
}
.pr-faq__a-item:not(:last-child) {
  margin-bottom: 8px;
}
.pr-faq__a-bold {
  font-weight: var(--font-weight-550);
  color: var(--text-secondary);
}
.pr-faq__a-link {
  color: var(--blue-9);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pr-faq__a-link:hover {
  text-decoration: none;
}
/* Link-styled action trigger (e.g. "this calculator" opens the calculator). */
.pr-faq__a-linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ============================================================
   Responsive — desktop-first. Baseline (≥1280px) is everything above.
   Breakpoints: ≤1279 (1000–1279 design) · ≤999 (640–999) · ≤639 (<640).
   ============================================================ */

/* ---- ≤1279px: 4 narrow columns, stacked name/price ---- */
@media (max-width: 1279px) {
  /* Summary card: plan name and price on separate rows. */
  .pr-plan__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* Enterprise: narrower 240px intro column; limits become wrapping flex. */
  .pr-enterprise {
    grid-template-columns: 240px minmax(0, 1fr) 200px;
  }
  .pr-enterprise__features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Comparison header: hide the price next to plan names. */
  .pr-cmp__col-price {
    display: none;
  }

  /* FAQ: fixed 280px aside. */
  .pr-faq {
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 24px;
  }

  /* Discount → testimonial distance. */
  .pr-social {
    margin-top: 100px;
  }
}

/* ---- ≤999px: 2-column cards, expanded usage, larger buttons ---- */
@media (max-width: 999px) {
  /* Wide enough again for name + price on one row. */
  .pr-plan__title-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* 2×2 grid. Two stacked row-sets of `auto 1fr auto`; each card spans one set
     via subgrid so the two cards in a row keep their sub-sections aligned. */
  .pr-plans {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr auto auto 1fr auto;
  }
  .pr-plan {
    grid-row: span 3;
  }
  .pr-plan:first-child {
    border-radius: 15px 0 0 0;
  }
  .pr-plan:nth-child(2) {
    border-radius: 0 15px 0 0;
    border-right: 0;
  }
  .pr-plan:nth-child(3) {
    border-right: 1px solid var(--border-secondary);
  }
  /* Business is bottom-right in the 2×2 — round that corner, not the top-right
     it inherits from the base `last-of-type` rule (which notches mid-grid). */
  .pr-plan:nth-child(4) {
    border-radius: 0 0 15px 0;
  }
  .pr-plan:nth-child(1),
  .pr-plan:nth-child(2) {
    border-bottom: 1px solid var(--border-secondary);
  }

  /* Usage limits expanded by default; the toggle is hidden. */
  .pr-usage-toggle {
    display: none;
  }
  .pr-usage-wrap {
    grid-template-rows: 1fr;
  }
  .pr-usage-clip {
    overflow: visible;
  }

  /* No "Popular" tag. */
  .pr-plans-badge {
    display: none;
  }

  /* All buttons use Button-Large (16px / 550 / 24). */
  .pr-page .sw-button {
    font-size: 1rem;
    font-weight: 550;
    line-height: 1.5rem;
  }

  /* Enterprise: vertically stacked; intro keeps heading left, seals right. */
  .pr-enterprise {
    grid-template-columns: 1fr;
  }
  .pr-enterprise__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  /* Discount banner: vertical stack with the icon on top of the text. */
  .pr-discount {
    flex-direction: column;
    gap: 16px;
    padding: 40px 24px;
  }
  .pr-discount__center {
    flex-direction: column;
    text-align: center;
  }

  /* Discount → testimonial distance (< 1000px). */
  .pr-social {
    margin-top: 120px;
  }

  /* FAQ single column: title on top, then the questions, then the
     "Have other questions?" contact block at the bottom. */
  .pr-faq {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "title"
      "list"
      "contact";
    row-gap: 32px;
  }
  .pr-faq__title {
    padding-top: 0;
  }

  /* Compact (tabbed) comparison: sticky plan tabs + 2 equal columns. */
  .pr-cmp__tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 24px;
    padding: 12px 0;
    background: var(--background-surface);
  }
  .pr-cmp__tab {
    appearance: none;
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 24px;
    color: var(--text-tertiary);
  }
  .pr-cmp__tab.is-active {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
  }
  /* Left column = 50% capped at 240px; right column fills the rest. */
  .pr-cmp__row--compact {
    grid-template-columns: min(50%, 240px) 1fr;
  }
}

/* ---- ≤639px: single column ---- */
@media (max-width: 639px) {
  /* Standalone, fully-rounded cards with 24px gaps: the container drops its
     frame and each card carries its own border + radius + shadow. */
  .pr-plans {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  /* `.pr-plans .pr-plan` matches the ≤999 nth-child radius rules' specificity so
     it can reset them to a full 16px round on every card. */
  .pr-plans .pr-plan {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    padding: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow:
      0 10px 20px -2px rgba(0, 0, 0, 0.08),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* Smaller hero heading. */
  .pr-hero__title {
    font-size: 32px;
    line-height: 40px;
  }

  /* Enterprise limits: single column. */
  .pr-enterprise__features {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  /* Discount: fixed-width CTA. */
  .pr-discount .sw-button {
    width: 200px;
    flex: none;
  }

  /* Trusted-by / integration logos wrap. */
  .pr-int__logos {
    flex-wrap: wrap;
  }

  /* FAQ: 20px horizontal padding around the "Have other questions?" contact
     block, and a full-width "Contact sales" CTA. */
  .pr-faq__contact {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pr-faq__contact .sw-button {
    width: 100%;
  }

  /* FAQ title shrinks (Figma <640: 24/32, semibold). Question (20/28) and
     answer (16/24) already match desktop. */
  .pr-faq__title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.5%;
    font-weight: var(--font-weight-semibold);
  }
  .pr-faq__subtitle {
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.5%;
  }

  /* "Trusted by…" heading gets a fixed 320px width (centered). */
  .pr-social__heading {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- 640–999px only: enterprise CTA fixed width ---- */
@media (min-width: 640px) and (max-width: 999px) {
  .pr-enterprise__action .sw-button {
    width: 240px;
  }
}

/* ---- 1000–1279px only: hide App users Team/Client prefixes on narrow cards ---- */
@media (min-width: 1000px) and (max-width: 1279px) {
  .pr-au-prefix {
    display: none;
  }
}