/* ==================================================================
   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 */

  /* buttons (the site's green pill) */
  --pds-btn-bg: var(--pds-accent);
  --pds-btn-ink: #FFFFFF;
  --pds-btn-hover-bg: var(--color-green-light, #B4E6AA);   /* theme light green */
  --pds-btn-hover-ink: #231F20;

  /* 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 (buttons are styled separately, below). */
.pds a:not(.pds-btn) {
  color: var(--pds-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pds a:not(.pds-btn):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;
}

/* ------------------------------------------------------------------
   Buttons: the site's green pill with the "+" that turns on hover.
   Styled here in full, so they look the same wherever the module is
   used and cannot pick up the theme's plain rectangular button.
   ------------------------------------------------------------------ */
.pds a.pds-btn {
  display: inline-block;
  margin: 0;
  padding: 15px 25px;
  border: 0;
  border-radius: 50px;
  background: var(--pds-btn-bg);
  box-shadow: none;
  color: var(--pds-btn-ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.4px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color .5s, color .5s;
}
.pds a.pds-btn::after {
  content: "+";
  display: inline-block;
  margin-left: 5px;
  transition: transform .5s;
}
.pds a.pds-btn:hover,
.pds a.pds-btn:focus-visible {
  background: var(--pds-btn-hover-bg);
  color: var(--pds-btn-hover-ink);
  text-decoration: none;
}
.pds a.pds-btn:hover::after,
.pds a.pds-btn:focus-visible::after { transform: rotate(45deg); }
.pds a.pds-btn:focus-visible { border-radius: 50px; }

/* ------------------------------------------------------------------
   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--no-side .pds-body { grid-template-columns: minmax(0, 780px); }

/* Each column is placed by name, so the layout does not depend on which
   comes first in the markup (module.js moves the sidebar ahead for printing). */
.pds-main { min-width: 0; grid-column: 1; grid-row: 1; }
.pds-side { grid-column: 2; grid-row: 1; }
.pds--side-left .pds-main { grid-column: 2; }
.pds--side-left .pds-side { grid-column: 1; }

.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;
  overflow-x: clip;   /* a logo slid sideways can never make the page scroll sideways */
}
.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-about__logo { margin: 0 0 22px; line-height: 0; }
/* --pds-logo-w is the Width typed on the Logo image field; height is automatic.
   --pds-logo-shift is the Logo alignment field: a share of the picture's own width,
   so the alignment holds at every size, on phones and on paper. */
.pds .pds-about__logo-img {
  display: block;
  width: var(--pds-logo-w, 120px);
  max-width: min(100%, 480px);
  height: auto;
  transform: translateX(var(--pds-logo-shift, 0%));
}
.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 {
  /* Always a portrait Letter sheet, whatever the print dialog last used. */
  @page { size: letter portrait; margin: 14mm 14mm 16mm; }

  /* Only the datasheet goes on paper. Just before printing, module.js tags
     everything else on the page (site header and footer, chat bubbles,
     cookie bars, other modules); the selectors after it are a fallback. */
  [data-pds-print-hide],
  [data-global-resource-path],
  #hs-eu-cookie-confirmation,
  #hubspot-messages-iframe-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !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 .pds-btn,
  .pds-navband { display: none !important; }

  /* title block */
  .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: calc(var(--pds-badge-w, 190px) * .55); max-width: 150pt; }
  .pds-meta { margin-top: 12pt; padding-top: 8pt; }
  .pds-meta__facts { font-size: 9pt; }

  /* body, layout A (pure CSS fallback): key benefits and the quote note run as a
     strip across the top, then every section uses the full width. */
  .pds-body,
  .pds--side-left .pds-body,
  .pds--no-side .pds-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14pt 0 16pt;
  }
  .pds-main { display: block; }
  .pds-side,
  .pds--sticky .pds-side,
  .pds--side-left .pds-side {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32%;
    column-gap: 12pt;
    margin: 0 0 16pt;
  }
  .pds-side > :only-child { grid-column: 1 / -1; }
  .pds-card + .pds-card { margin-top: 0; }
  .pds-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6pt 18pt; }

  /* body, layout B (the normal case): module.js moves the sidebar ahead of the
     text just before printing, so it can sit top right with the text wrapping
     around it, the way the page looks on screen. Wide sections (image grids,
     figures) start below it. */
  .pds[data-pds-print="float"] .pds-body { display: block; }
  .pds[data-pds-print="float"] .pds-body::after { content: ""; display: block; clear: both; }
  .pds[data-pds-print="float"] .pds-side {
    display: block;
    float: right;
    width: 31%;
    margin: 0 0 12pt 20pt;
  }
  .pds[data-pds-print="float"] .pds-card + .pds-card { margin-top: 12pt; }
  .pds[data-pds-print="float"] .pds-ticks { grid-template-columns: minmax(0, 1fr); }
  .pds[data-pds-print="float"] .pds-section--wide { clear: both; }

  /* text */
  .pds .pds-rich,
  .pds .pds-rich--compact { max-width: 88ch; font-size: 10pt; line-height: 1.45; orphans: 3; widows: 3; }
  .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; }
  /* list items become plain blocks so their text can wrap around the sidebar */
  .pds-list { display: block; margin-top: 8pt; }
  .pds-list__item + .pds-list__item { 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; }

  /* sidebar cards */
  .pds-card--benefits { padding: 12pt 14pt 14pt; }
  .pds .pds-card__title { margin-bottom: 8pt; font-size: 13pt; }
  .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--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); }

  /* procurement block */
  .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-about__logo { margin-bottom: 10pt; }
  .pds .pds-about__logo-img { width: calc(var(--pds-logo-w, 120px) * .7); max-width: 60%; }
  .pds-contacts__item { padding: 6pt 0; }
  .pds .pds-contacts__kind,
  .pds .pds-contacts__value { font-size: 10pt; }
  .pds a:not(.pds-btn) { color: inherit; text-decoration: none; }
}