/* ==================================================================
   Product Datasheet  (four-theme)
   ------------------------------------------------------------------
   Everything is scoped under .pds, so nothing here leaks into the
   rest of the site. Font families are inherited from the theme on
   purpose (Indivisible headings, Lato body).

   EDIT ME: the token block below is the whole look. The accent is
   set from the module's Style tab; the washes and deep greens are
   mixed from it, so changing one color re-themes the page.
   ================================================================== */
.pds {
  /* color */
  --pds-accent: #61A244;        /* theme --color-green (Style tab overrides this) */
  --pds-accent-deep: #3A6129;   /* text-safe green: links, small labels */
  --pds-accent-dark: #14321E;   /* theme --color-green-dark: quote box fill */
  --pds-accent-soft: #C0DCB4;   /* hairlines on tinted areas */
  --pds-accent-wash: #F1F7EE;   /* title band, benefits card, about band */
  --pds-ink: #1F2937;           /* headings */
  --pds-text: #494A52;          /* body copy (theme body color) */
  --pds-muted: #6B6959;         /* facts, captions */
  --pds-line: #DADBDC;          /* hairlines on white */
  --pds-panel: #F0F1F1;         /* plate behind screenshots */

  /* shape + layout */
  --pds-radius: 6px;
  --pds-max: 1180px;                    /* overall content width */
  --pds-gutter: clamp(20px, 4vw, 40px); /* left/right breathing room */
  --pds-side-w: 320px;                  /* sidebar width */
  --pds-gap: clamp(36px, 5vw, 72px);    /* space between body and sidebar */
  --pds-sticky-top: 24px;               /* Style tab overrides this */

  /* site header (module.js measures the real header and overwrites both) */
  --pds-header-h: 129px;                /* height of the banner behind the site navigation */
  --pds-fixed-header: 0px;              /* how much of the screen a fixed header covers while scrolling */
  --pds-band: var(--color-green-dark, #14321E);   /* theme dark green, same as the hero */

  display: block;
  color: var(--pds-text);
  font-size: 17px;
  line-height: 1.65;
  text-align: left;
}

/* Derive the supporting greens from whatever accent the editor picked. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .pds {
    --pds-accent-deep: color-mix(in srgb, var(--pds-accent) 60%, #000);
    --pds-accent-dark: color-mix(in srgb, var(--pds-accent) 30%, #000);
    --pds-accent-soft: color-mix(in srgb, var(--pds-accent) 38%, #fff);
    --pds-accent-wash: color-mix(in srgb, var(--pds-accent) 9%, #fff);
  }
}

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

.pds img { max-width: 100%; height: auto; }

.pds-wrap {
  width: 100%;
  max-width: var(--pds-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pds-gutter);
  padding-right: var(--pds-gutter);
}

/* Links inside the module (theme buttons keep their own colors). */
.pds a:not(.button) {
  color: var(--pds-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pds a:not(.button):hover { text-decoration-thickness: 2px; }
.pds a:focus-visible,
.pds button:focus-visible {
  outline: 3px solid var(--pds-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------
   0. Banner behind the site navigation
   The theme's navigation is transparent on page load and overlaps the
   top of the page. This strip gives its white links something dark to
   sit on (as the hero does elsewhere) and pushes the title block clear
   of it. Once the page scrolls, the theme's own translucent bar takes
   over; nothing here touches that.
   ------------------------------------------------------------------ */
.pds-navband {
  height: var(--pds-header-h);
  background-color: var(--pds-band);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

/* ------------------------------------------------------------------
   1. Title block
   ------------------------------------------------------------------ */
.pds-head {
  background: var(--pds-accent-wash);
  border-top: 4px solid var(--pds-accent);
  border-bottom: 1px solid var(--pds-accent-soft);
  padding: clamp(22px, 3vw, 32px) 0 clamp(20px, 2.6vw, 28px);
}

.pds-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-size: 15px;
  line-height: 1.4;
  color: var(--pds-muted);
}
.pds .pds-crumbs a.pds-crumbs__link { text-decoration: none; }
.pds .pds-crumbs a.pds-crumbs__link:hover { text-decoration: underline; }
.pds-crumbs__sep { color: var(--pds-accent); }
.pds-crumbs__here { color: var(--pds-text); }

.pds-head__row {
  display: grid;
  /* the badge may take up to 42% of the row, however wide it is set */
  grid-template-columns: minmax(0, 1fr) fit-content(42%);
  gap: 24px clamp(28px, 5vw, 72px);
  align-items: start;
}

.pds .pds-title {
  margin: 0;
  padding: 0;
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--pds-ink);
}

.pds .pds-lead {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 60ch;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.45;
  color: var(--pds-text);
}

/* The partner mark sits on its own white plate, so a logo with a white
   background (or a transparent one) looks deliberate either way. */
.pds-head__badge {
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--pds-accent-soft);
  border-radius: var(--pds-radius);
  padding: 14px 18px;
  line-height: 0;
}
/* --pds-badge-w is the Width typed on the Partner badge image field.
   Height is always automatic, so the picture keeps its proportions. */
.pds .pds-head__badge-img {
  display: block;
  width: var(--pds-badge-w, 190px);
  max-width: 100%;
  height: auto;
}

.pds-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(24px, 3.4vw, 40px);
  padding-top: 18px;
  border-top: 1px solid var(--pds-accent-soft);
}
.pds-meta__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--pds-muted);
}
.pds-meta__fact + .pds-meta__fact {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--pds-accent-soft);
}

/* Print button. The theme paints every <button> teal, so each property
   that the theme touches is pinned here on purpose. */
.pds .pds-print {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 16px 9px 13px !important;
  border: 1.5px solid var(--pds-accent-deep) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pds-accent-deep) !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.pds .pds-print::before,
.pds .pds-print::after { content: none !important; }
.pds .pds-print:hover,
.pds .pds-print:active {
  background: var(--pds-accent-deep) !important;
  color: #fff !important;
}
.pds-print__icon { flex: none; display: block; }

/* ------------------------------------------------------------------
   2. Body layout
   ------------------------------------------------------------------ */
.pds-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pds-side-w);
  column-gap: var(--pds-gap);
  align-items: start;
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.pds--side-left .pds-body { grid-template-columns: var(--pds-side-w) minmax(0, 1fr); }
.pds--side-left .pds-side { order: -1; }
.pds--no-side .pds-body { grid-template-columns: minmax(0, 780px); }

.pds-main { min-width: 0; }

.pds-section + .pds-section { margin-top: clamp(40px, 5vw, 60px); }

.pds .pds-section__title {
  margin: 0 0 14px;
  padding: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--pds-ink);
}

/* Rich text written by editors. */
.pds .pds-rich { max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--pds-text); }
.pds .pds-rich > :first-child { margin-top: 0; }
.pds .pds-rich > :last-child { margin-bottom: 0; }
.pds .pds-rich p { margin: 0 0 1em; font-size: inherit; line-height: inherit; color: inherit; }
.pds .pds-rich strong { color: var(--pds-ink); }
.pds .pds-rich--compact { font-size: 16px; line-height: 1.55; }

/* Bold-lead list */
.pds-list { display: grid; gap: 20px; margin-top: 22px; }
.pds-list__item { position: relative; padding-left: 26px; }
.pds-list__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pds-accent);
}
.pds .pds-list__lead {
  margin: 0 0 3px;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--pds-ink);
}

/* Image grid */
.pds-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 28px;
  margin-top: 26px;
}
.pds-plate {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  background: var(--pds-panel);
  border: 1px solid var(--pds-line);
  border-radius: var(--pds-radius);
  overflow: hidden;
}
.pds .pds-plate__img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  max-width: none;
  object-fit: contain;
}
.pds .pds-feature__title {
  margin: 0 0 6px;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--pds-ink);
}

/* Stand-alone figure with a caption ("Figure 1. ...") */
.pds-figure { margin: 28px 0 0; padding: 0; }
.pds .pds-figure__img {
  display: block;
  width: 100%;
  border: 1px solid var(--pds-line);
  border-radius: var(--pds-radius);
}
.pds-figure__caption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--pds-muted);
}

/* ------------------------------------------------------------------
   3. Sidebar
   ------------------------------------------------------------------ */
.pds-side { min-width: 0; }
/* Sticks below the site header when that header is fixed to the screen.
   module.js adds .pds--unstick when the screen is too short for the sidebar to fit. */
.pds--sticky .pds-side {
  position: sticky;
  top: calc(var(--pds-fixed-header, 0px) + var(--pds-sticky-top));
}
.pds--sticky.pds--unstick .pds-side { position: static; }

.pds-card { border-radius: var(--pds-radius); }
.pds-card + .pds-card { margin-top: 20px; }

.pds .pds-card__title {
  margin: 0 0 14px;
  padding: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--pds-ink);
}

.pds-card--benefits {
  padding: 22px 24px 26px;
  background: var(--pds-accent-wash);
  border-top: 4px solid var(--pds-accent);
  border-radius: 0 0 var(--pds-radius) var(--pds-radius);
}
.pds-ticks { display: grid; gap: 11px; }
.pds-ticks__item {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--pds-ink);
}
.pds-ticks__item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pds-accent);
}

.pds-card--cta {
  padding: 26px 24px 28px;
  background: var(--pds-accent-dark);
  color: #fff;
}
.pds .pds-card--cta .pds-card__title {
  margin-bottom: 0;
  font-size: 23px;
  font-weight: 500;
  color: #fff;
}
.pds .pds-card__text { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.pds .pds-card--cta .pds-btn { margin-top: 20px; }

/* ------------------------------------------------------------------
   4. About / procurement
   ------------------------------------------------------------------ */
.pds-about {
  background: var(--pds-accent-wash);
  border-top: 1px solid var(--pds-accent-soft);
  padding: clamp(40px, 5vw, 72px) 0;
}
.pds-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  column-gap: var(--pds-gap);
  row-gap: 36px;
  align-items: start;
}
.pds .pds-about__logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 200px;
  margin: 0 0 22px;
}
.pds .pds-about .pds-btn { margin-top: 24px; }

.pds .pds-contacts {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pds-accent-soft);
}
.pds-contacts__item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--pds-accent-soft);
}
.pds .pds-contacts__kind {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pds-muted);
}
.pds .pds-contacts__value {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pds-ink);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media screen and (max-width: 960px) {
  /* One column. The sidebar dissolves so its two cards can be placed
     separately: benefits before the body, quote box after it. */
  .pds-body,
  .pds--side-left .pds-body,
  .pds--no-side .pds-body { display: flex; flex-direction: column; align-items: stretch; }
  .pds-side,
  .pds--sticky .pds-side { display: contents; }
  .pds-card--benefits { order: -1; margin-bottom: clamp(32px, 6vw, 44px); }
  .pds-card--cta,
  .pds-card + .pds-card--cta { order: 2; margin-top: clamp(40px, 7vw, 56px); }

  .pds-about__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet: the benefits card is full width, so its list runs two across. */
@media screen and (min-width: 600px) and (max-width: 960px) {
  .pds-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

@media screen and (max-width: 720px) {
  .pds-head__row { grid-template-columns: minmax(0, 1fr); }
  .pds-head__badge { justify-self: start; padding: 10px 14px; }
  /* phones: the badge keeps its set size but never takes more than about half the screen */
  .pds .pds-head__badge-img { width: min(var(--pds-badge-w, 190px), 56vw); }
}

@media screen and (max-width: 560px) {
  .pds-features { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pds-contacts__item { grid-template-columns: 76px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pds *,
  .pds *::before,
  .pds *::after { transition: none !important; }
}

/* ------------------------------------------------------------------
   Print  ("Print to PDF" turns the page into a clean datasheet)
   ------------------------------------------------------------------ */
@media print {
  @page { margin: 14mm 14mm 16mm; }

  /* Site header/footer partials, cookie banner and chat bubble stay off the paper. */
  [data-global-resource-path],
  #hs-eu-cookie-confirmation,
  #hubspot-messages-iframe-container { display: none !important; }

  .pds {
    font-size: 10pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pds-wrap { max-width: none; padding-left: 0; padding-right: 0; }

  .pds .pds-print,
  .pds .button,
  .pds-navband { display: none !important; }

  .pds-head { background: none; padding: 10pt 0 12pt; }
  .pds-crumbs { margin-bottom: 14pt; font-size: 9pt; }
  .pds .pds-title { font-size: 30pt; }
  .pds .pds-lead { margin-top: 8pt; font-size: 12pt; }
  .pds-head__badge { padding: 8pt 10pt; }
  .pds .pds-head__badge-img { width: auto; max-width: 120pt; max-height: 64pt; }
  .pds-meta { margin-top: 12pt; padding-top: 8pt; }
  .pds-meta__facts { font-size: 9pt; }

  /* Page one keeps the datasheet shape: the first three sections run beside
     the sidebar, everything after that uses the full width of the paper.
     (.pds-main dissolves so each section can be placed on the grid itself.) */
  .pds-body,
  .pds--side-left .pds-body {
    grid-template-columns: minmax(0, 1fr) 31%;
    column-gap: 20pt;
    padding: 14pt 0 16pt;
  }
  .pds--no-side .pds-body { grid-template-columns: minmax(0, 1fr); }
  .pds-main { display: contents; }
  .pds-section { grid-column: 1 / -1; }
  .pds-section:nth-child(-n+3) { grid-column: 1; }
  .pds--no-side .pds-section:nth-child(-n+3) { grid-column: 1 / -1; }
  .pds-side,
  .pds--sticky .pds-side,
  .pds--side-left .pds-side {
    position: static;
    order: 0;
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .pds .pds-rich,
  .pds .pds-rich--compact { max-width: 82ch; font-size: 10pt; line-height: 1.45; }
  .pds .pds-section__title { margin-bottom: 6pt; font-size: 16pt; break-after: avoid; }
  .pds .pds-list__lead,
  .pds .pds-feature__title { font-size: 11.5pt; break-after: avoid; }
  .pds-section + .pds-section { margin-top: 15pt; }
  .pds-list { gap: 8pt; margin-top: 8pt; }
  .pds-list__item::before { top: 5pt; width: 6pt; height: 6pt; }
  .pds-features { gap: 14pt 18pt; margin-top: 12pt; }
  .pds-plate { aspect-ratio: 2.4 / 1; margin-bottom: 8pt; }
  .pds-list__item,
  .pds-feature,
  .pds-figure,
  .pds-card,
  .pds-contacts__item { break-inside: avoid; }

  .pds-card--benefits { padding: 12pt 14pt 14pt; }
  .pds .pds-card__title { margin-bottom: 8pt; font-size: 13pt; }
  .pds-ticks { gap: 6pt; }
  .pds-ticks__item { font-size: 10pt; }
  .pds-ticks__item::before { top: 4.5pt; width: 6pt; height: 6pt; }

  /* The quote box prints as a plain outlined note, not a block of dark ink. */
  .pds-card + .pds-card { margin-top: 12pt; }
  .pds-card--cta {
    padding: 12pt 14pt;
    background: none;
    border: 1pt solid var(--pds-accent-soft);
    color: var(--pds-text);
  }
  .pds .pds-card--cta .pds-card__title { margin: 0; font-size: 12pt; color: var(--pds-ink); }
  .pds .pds-card__text { color: var(--pds-text); }

  .pds-about { background: none; padding: 14pt 0 0; break-inside: avoid; }
  .pds-about__grid { grid-template-columns: minmax(0, 1fr) 36%; column-gap: 20pt; }
  .pds .pds-about__logo { height: 28pt; margin-bottom: 10pt; }
  .pds-contacts__item { padding: 6pt 0; }
  .pds .pds-contacts__kind,
  .pds .pds-contacts__value { font-size: 10pt; }
  .pds a:not(.button) { color: inherit; text-decoration: none; }
}