/* ------------------------------------------------------------
   0. Global
   ------------------------------------------------------------ */
body * {
  font-family: "Open Sans", Arial !important;
  font-style: normal !important;
}
p, li {
  font-weight: 400 !important;
}


/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  --srv-text: #161616;
  --srv-white: #ffffff;
  --srv-bg-light: #f2f3f3;
  --srv-bg-dark: #161616;

  --srv-accent: #b99237;         /* gold on dark (eyebrow) */
  --srv-accent-text: #ad862b;    /* gold on white (labels) */

  --srv-rule: #d4d8d8;           /* light dividers */
  --srv-rule-mid: #a4adad;       /* audience column rule */
  --srv-rule-dark: #161616;      /* table rules */
  --srv-rule-on-dark: #3e4746;   /* rules on dark backgrounds */

  --srv-card-radius: 16px;
  --srv-card-radius-sm: 8px;
  --srv-card-shadow: 0 4px 32px rgba(22, 22, 22, 0.08);
  --srv-card-shadow-sm: 0 4px 16px rgba(22, 22, 22, 0.08);
}


/* ------------------------------------------------------------
   2. Shared primitives
   ------------------------------------------------------------ */

/* Block roots */
.product-banner,
.product-audience,
.product-requirements,
.product-requirements_v2,
.comparison-table,
.product-compare,
.product-steps,
.product-why {
  box-sizing: border-box;
  color: var(--srv-text);
  -webkit-font-smoothing: antialiased;
  padding: 80px 0;
}
:is(.product-banner, .product-audience, .product-requirements, .product-requirements_v2,
    .comparison-table, .product-compare, .product-steps, .product-why) *,
:is(.product-banner, .product-audience, .product-requirements, .product-requirements_v2,
    .comparison-table, .product-compare, .product-steps, .product-why) *::before,
:is(.product-banner, .product-audience, .product-requirements, .product-requirements_v2,
    .comparison-table, .product-compare, .product-steps, .product-why) *::after {
  box-sizing: inherit;
}

/* Backgrounds */
.product-audience,
.comparison-table,
.product-why { background: var(--srv-white); }
.product-requirements,
.product-requirements_v2,
.product-compare,
.product-steps { background: var(--srv-bg-light); }

/* Section titles (font-size comes from the site heading classes) */
.product-audience__title,
.product-requirements__title,
.product-requirements__title_v2,
.comparison-table__title,
.product-compare__title,
.product-steps__title,
.product-why__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

/* Body copy (16px) */
.product-audience__text,
.product-audience__item-text,
.product-requirements__card-text,
.product-requirements__card-text_v2,
.product-requirements__note,
.comparison-table__lead,
.product-compare__lead,
.product-steps__card-text,
.product-why__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Centered title + lead (after body copy so margin: 0 auto wins) */
.product-requirements__title,
.product-requirements__title_v2,
.comparison-table__title,
.product-compare__title,
.product-steps__title {
  margin: 0 auto 16px;
  text-align: center;
}
.product-requirements__lead,
.product-requirements__lead_v2,
.comparison-table__lead,
.product-compare__lead,
.product-steps__lead {
  margin: 0 auto;
  text-align: center;
}
.product-requirements__lead,
.product-requirements__lead_v2,
.product-steps__lead { font-size: 18px; }

/* Card titles (20px) */
.product-requirements__card-title,
.product-requirements__card-title_v2,
.product-compare__card-title,
.product-steps__card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Cards */
.product-requirements__card,
.product-requirements__card_v2,
.product-compare__card,
.product-steps__card {
  background: var(--srv-white);
  border-radius: var(--srv-card-radius);
  box-shadow: var(--srv-card-shadow);
}
.product-requirements__card,
.product-requirements__card_v2 {          /* smaller radius/shadow per their design */
  padding: 18px 24px 20px;
  border-radius: var(--srv-card-radius-sm);
  box-shadow: var(--srv-card-shadow-sm);
}
.product-requirements__card-title,
.product-requirements__card-title_v2 { margin-bottom: 10px; }

/* Card grids (column counts in the breakpoint section) */
.product-requirements__grid,
.product-requirements__grid_v2,
.product-steps__grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Centered CTA row under a block */
.comparison-table__actions,
.product-steps__actions {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* Visually hidden text */
.comparison-table__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------
   3. product-banner  (dark hero with stats)
   ------------------------------------------------------------ */
.product-banner {
  background: var(--srv-bg-dark);
  color: var(--srv-white);
  padding: 70px 0 40px;
}
.product-banner__hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 60px;
  align-items: center;
}
.product-banner__content { max-width: 600px; }
.product-banner__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700 !important;   /* a <p>: must beat the global p/li reset */
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--srv-accent);
}
.product-banner__title {
  margin: 0 0 24px;
  font-size: clamp(2.25rem, 1.2rem + 2.8vw, 3.5rem); /* 36px → 56px */
  font-weight: 700;
  line-height: 1.16;
}
.product-banner__text {
  margin: 0 0 40px;
  max-width: 590px;
  font-size: 18px;
  line-height: 28px;
}
.product-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.product-banner__media { margin: 0; }
.product-banner__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}
.product-banner__placeholder {              /* until a real image is dropped in */
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  background: #d9d9d9;
  color: var(--srv-text);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.product-banner__rule {
  height: 1px;
  margin: 60px 0 40px;
  border: 0;
  background: var(--srv-rule-on-dark);
}
.product-banner__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-banner__stat-value {
  display: block;
  margin: 0 0 4px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
}
.product-banner__stat-label {
  display: block;
  font-size: 18px;
  line-height: 28px;
}


/* ------------------------------------------------------------
   4. product-audience  (intro + icon list with vertical rule)
   ------------------------------------------------------------ */
.product-audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.product-audience__intro { padding-right: 64px; }
.product-audience__title { margin-bottom: 24px; }
.product-audience__text { max-width: 500px; }
.product-audience__list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0 0 0 64px;
  list-style: none;
  border-left: 1px solid var(--srv-rule-mid);
}
.product-audience__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.product-audience__icon {                 /* locked to 60×60 at every width */
  display: block;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  max-width: none;
  object-fit: contain;
}
.product-audience__item-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}


/* ------------------------------------------------------------
   5. product-requirements  (3 / 2 / 1 cards + footnote)
      product-requirements_v2  (4 / 2 / 1 cards)
   ------------------------------------------------------------ */
.product-requirements__title { max-width: 720px; margin-bottom: 20px; }
.product-requirements__lead {
  max-width: 720px;
  margin-bottom: 36px;
  line-height: 1.5;
}
.product-requirements__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-requirements__note { margin-top: 32px; }
.product-requirements__note strong { font-weight: 700; }
.product-requirements__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.product-requirements__link:hover { text-decoration-thickness: 2px; }
.product-requirements__link:focus-visible {
  outline: 2px solid var(--srv-text);
  outline-offset: 3px;
  border-radius: 2px;
}

.product-requirements__title_v2 { max-width: 870px; margin-bottom: 20px; }
.product-requirements__lead_v2 {
  max-width: 1000px;
  margin-bottom: 36px;
  line-height: 1.5;
}
.product-requirements__grid_v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ------------------------------------------------------------
   6. comparison-table  (sticky header + first column, highlight column)
   ------------------------------------------------------------ */
.comparison-table {
  --ct-sticky-top: 76px;              /* site header height; read by the sticky-header script */
  padding: 64px 0;
}
.comparison-table__title { max-width: 1000px; }
.comparison-table__lead { max-width: 720px; margin-bottom: 48px; }
.comparison-table__scroll { overflow: visible; }   /* table fits ≥ 992px; scroll box below */
.comparison-table__table {
  width: 100%;
  border-collapse: separate;          /* keeps borders attached to sticky cells */
  border-spacing: 0;
  font-size: 16px;
  line-height: 1.6;
}
.comparison-table__table th,
.comparison-table__table td {
  height: 82px;                       /* minimum; grows with content */
  padding: 16px 16px 16px 28px;
  background: var(--srv-white);       /* opaque so scrolled cells pass underneath */
  border-bottom: 1px solid var(--srv-rule-dark);
  text-align: left;
  vertical-align: middle;
}
.comparison-table__table th { font-weight: 700; }
.comparison-table__table thead th {
  position: sticky;
  top: var(--ct-sticky-top);
  z-index: 2;
  font-size: 18px;
  line-height: 1.5;
}
.comparison-table__table th:first-child {   /* pinned row labels */
  position: sticky;
  left: -1px;
  z-index: 1;
  width: 15%;
  padding-left: 0;
}
.comparison-table__table thead th:first-child { z-index: 3; }   /* corner cell wins */
.comparison-table__highlight {
  background: var(--srv-bg-dark) !important;
  color: var(--srv-white);
  border-bottom-color: #3f4646 !important;
}
.comparison-table__table tbody tr:last-child .comparison-table__highlight {
  border-bottom-color: var(--srv-bg-dark) !important;
}


/* ------------------------------------------------------------
   7. product-compare  (two aligned cards → one split panel on phones)
   ------------------------------------------------------------ */
.product-compare { --pc-rows: 5; }    /* 1 title row + 4 data rows */
.product-compare__title { max-width: 780px; }
.product-compare__lead { max-width: 720px; margin-bottom: 64px; }
.product-compare__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.product-compare__card { padding: 40px 40px 48px; }
.product-compare__card-title { margin-bottom: 16px; }
.product-compare__list { margin: 0; }
.product-compare__row {
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--srv-rule);
}
.product-compare .srv__text-gradient-light {   /* row label (site gradient class) */
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--srv-accent-text);
}
.product-compare__value {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}
@supports (grid-template-rows: subgrid) {      /* shared row tracks so both columns align */
  .product-compare__cards { grid-template-rows: repeat(var(--pc-rows), auto); }
  .product-compare__card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
  .product-compare__list {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / -1;
  }
}


/* ------------------------------------------------------------
   8. product-steps  (3 / 2 / 1 step cards with badge)
   ------------------------------------------------------------ */
.product-steps__title { max-width: 900px; }
.product-steps__lead {
  max-width: 960px;
  margin-bottom: 44px;
  line-height: 1.6;
}
.product-steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.product-steps__card {
  display: flex;
  flex-direction: column;
  padding: 40px;
}
.product-steps__badge,
.product-steps .srv__featured-box-tag { margin: 0 0 40px; }
.product-steps__card-title { margin-bottom: 8px; }


/* ------------------------------------------------------------
   9. product-why  (intro + Trustpilot + accordion)
   ------------------------------------------------------------ */
.product-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 15fr);   /* 520px / 600px at full width */
  column-gap: 104px;
  align-items: start;
}
.product-why__intro { max-width: 520px; }
.product-why__title { margin-bottom: 16px; }
.product-why__trustpilot-reviews {
  display: inline-flex;
  align-items: self-end;
  gap: 38px;
  margin-top: 40px;
}
.product-why__trustpilot {
  display: block;
  width: 150px;
  height: auto;
}
.product-why__accordion { padding-top: 14px; }   /* lines the accordion up with the design */


/* ------------------------------------------------------------
   10. Accordion variant of the site's feature block
       (.srv__pf-accordion-body--accordion; driven by SrvAccordion)
   ------------------------------------------------------------ */
.srv__pf-accordion-body--accordion { min-height: 0; }
.srv__pf-accordion-body--accordion .srv__pf-accordion-item { display: block; }
.srv__pf-accordion-body--accordion .pf-accordion-block {
  width: auto;                        /* not 100%: the site's margin-left makes room for the gold line */
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
}
.srv__pf-accordion-body--accordion .question-row { cursor: pointer; }
.srv__pf-accordion-body--accordion .question-row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.srv__pf-accordion-body--accordion .answer-row {
  max-height: 0;                      /* max-height is driven by the script */
  overflow: hidden;
  transition: max-height 300ms ease;
}


/* ============================================================
   11. Breakpoints
   ============================================================ */

/* ---- ≤ 1199px: small desktop ---- */
@media (max-width: 1199px) {
  .product-why__grid { column-gap: 56px; }
}

/* ---- ≤ 1150px: site header is shorter (matches main-v2.js) ---- */
@media (max-width: 1150px) {
  .comparison-table { --ct-sticky-top: 60px; }
}

/* ---- ≤ 991px: tablet ---- */
@media (max-width: 991px) {
  /* banner: hide the image, single column */
  .product-banner__hero { grid-template-columns: minmax(0, 1fr); }
  .product-banner__media { display: none; }

  /* audience: stack, vertical rule becomes horizontal */
  .product-audience__grid { grid-template-columns: minmax(0, 1fr); }
  .product-audience__intro { padding-right: 0; margin-bottom: 48px; }
  .product-audience__text { max-width: 640px; }
  .product-audience__list {
    padding: 48px 0 0;
    border-left: 0;
    border-top: 1px solid var(--srv-rule-mid);
  }

  /* card grids: two columns */
  .product-requirements__grid,
  .product-requirements__grid_v2,
  .product-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* table: horizontal scroll box with pinned first column;
     the header stays pinned via the script (CSS sticky can't through a scroll box) */
  .comparison-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .comparison-table__table { min-width: 960px; }
  .comparison-table__table thead th { top: auto; }
  .comparison-table__table th:first-child {
    width: 160px;
    min-width: 160px;
    box-shadow: 6px 0 8px -8px rgba(22, 22, 22, 0.35);
  }

  /* compare cards */
  .product-compare__card { padding: 32px 32px 40px; }

  /* why: stack */
  .product-why { padding: 64px 0 72px; }
  .product-why__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .product-why__intro { max-width: 640px; }
  .product-why__accordion { padding-top: 0; }
}

/* ---- ≤ 767px: phone ---- */
@media (max-width: 767px) {
  /* section spacing */
  .product-requirements,
  .product-requirements_v2,
  .comparison-table { padding: 48px 0; }
  .product-compare,
  .product-steps,
  .product-why { padding: 48px 0 56px; }
  .product-banner { padding: 56px 0 48px; }
  .product-audience { padding: 64px 0 56px; }

  /* titles, leads and CTA rows */
  .product-requirements__title,
  .product-requirements__title_v2 { margin-bottom: 16px; }
  .product-requirements__lead,
  .product-requirements__lead_v2 { margin-bottom: 28px; }
  .comparison-table__lead,
  .product-compare__lead,
  .product-steps__lead { margin-bottom: 32px; }
  .comparison-table__actions,
  .product-steps__actions { margin-top: 32px; }
  .product-requirements__note { margin-top: 28px; }

  /* banner */
  .product-banner__text {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 26px;
  }
  .product-banner__rule { margin: 48px 0 32px; }
  .product-banner__stats { grid-template-columns: minmax(0, 1fr); }
  .product-banner__stat-value { font-size: 28px; }

  /* audience */
  .product-audience__intro { margin-bottom: 40px; }
  .product-audience__text,
  .product-audience__item-text { line-height: 24px; }
  .product-audience__list { padding-top: 40px; gap: 28px; }
  .product-audience__item { gap: 16px; }
  .product-audience__item-title { font-size: 22px; }

  /* card grids: one column */
  .product-requirements__grid,
  .product-requirements__grid_v2,
  .product-steps__grid { grid-template-columns: minmax(0, 1fr); }
  .product-steps__card { padding: 32px; }
  .product-steps__badge,
  .product-steps .srv__featured-box-tag { margin-bottom: 28px; }

  /* compare: one white panel, two columns, vertical line between */
  .product-compare__cards {
    column-gap: 0;
    background: var(--srv-white);
    border-radius: var(--srv-card-radius);
    box-shadow: var(--srv-card-shadow);
  }
  .product-compare__card {
    padding: 24px 16px 28px;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .product-compare__card:first-child { border-right: 1px solid var(--srv-rule); }
  .product-compare__card-title { font-size: 18px; }
  .product-compare__value { font-size: 15px; line-height: 22px; }

  /* why */
  .product-why__trustpilot-reviews { margin-top: 32px; }
}

/* ---- ≤ 479px: small phone ---- */
@media (max-width: 479px) {
  .product-banner__actions { flex-direction: column; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .srv__pf-accordion-body--accordion .answer-row { transition: none; }
}