/* Products & Services and White Papers (shared): landing grids and detail pages. Values come from tokens.css only. */

/* Reveal targets start hidden only when motion runs (see motion-flag.js). */
.srv-motion [data-reveal] { opacity: 0; }

/* ---------- Landing ---------- */
.srv-products-hero { padding-bottom: var(--space-12); }
.srv-products-hero__title { margin-top: var(--space-4); }
.srv-products-hero__intro { max-width: var(--measure-lead); margin-top: var(--space-4); font: 300 var(--text-lead) var(--font-sans); }
.srv-products-list { padding-top: var(--space-12); } /* clear of the divider under the intro */

.srv-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.srv-products-grid > li { display: flex; }
.srv-product-card { flex: 1; }
.srv-product-card .srv-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--space-24) * 2);
  padding-right: calc(var(--space-6) + var(--btn-arrow-size));
}
.srv-product-card__number { color: var(--accent); font: 400 var(--text-code-sm) var(--font-mono); }
.srv-product-card__title { margin-top: var(--space-3); }
.srv-product-card__arrow {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  display: inline-grid;
  place-items: center;
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: transform var(--dur-base) var(--ease-reveal), border-color var(--dur-fast), color var(--dur-fast);
}
.srv-product-card__arrow svg { width: 60%; height: 60%; }
.srv-product-card:hover .srv-product-card__arrow,
.srv-product-card:focus-visible .srv-product-card__arrow {
  border-color: var(--accent);
  color: var(--accent);
  transform: translate(var(--space-1), calc(-1 * var(--space-1)));
}

/* ---------- Product page ---------- */
.srv-product-hero { padding-bottom: var(--space-12); }
.srv-product-hero__eyebrow { display: table; margin-top: var(--space-8); }
.srv-product-hero__title { max-width: calc(var(--content-width) * 0.8); margin-top: var(--space-4); }
.srv-product-hero__summary { max-width: var(--measure-lead); margin-top: var(--space-4); font: 300 var(--text-lead) var(--font-sans); }
.srv-product-hero__actions { margin-top: var(--space-8); }

.srv-product-body { padding-top: 0; }
.srv-product-body__description { max-width: calc(var(--content-width) * 0.6); font: 400 var(--text-body-lg) var(--font-sans); }
.srv-product-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.srv-product-nav { border-top: 1px solid var(--line); }
.srv-product-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.srv-product-nav__link--next { text-align: right; }
.srv-product-nav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  font: 500 var(--text-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.srv-product-nav__label svg { width: var(--space-4); height: var(--space-4); }
.srv-product-nav__title { display: block; margin-top: var(--space-2); font: 500 var(--text-h4) var(--font-display); }
.srv-product-nav__link:hover .srv-product-nav__title { color: var(--accent); }
.srv-product-nav__back { margin-top: var(--space-8); }

@media (max-width: 767px) {
  .srv-products-list { padding-top: var(--space-8); }
  .srv-product-nav__grid { grid-template-columns: 1fr; }
  .srv-product-nav__link--next { text-align: left; }
}

/* White paper pages have no description paragraph above the section cards:
   keep them clear of the divider, like the landing grids. */
.srv-product-sections--flush { margin-top: var(--space-12); }
@media (max-width: 767px) {
  .srv-product-sections--flush { margin-top: var(--space-8); }
}

/* PDF links and the embedded viewer (products) */
.srv-pdf-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.srv-pdf-links .srv-btn svg { width: 60%; height: 60%; }
.srv-pdf-links__placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-basis: 100%;
  color: var(--warning);
  font: 600 var(--text-overline) var(--font-sans);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}
.srv-pdf-links__placeholder svg { width: var(--space-4); height: var(--space-4); }
.srv-pdf .srv-pdf-links { margin-top: var(--space-6); }
.srv-pdf__frame { margin-top: var(--space-6); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card-inner); background: var(--surface); }
.srv-pdf__frame iframe { display: block; width: 100%; height: 80vh; min-height: calc(var(--space-32) * 4); border: 0; }
.srv-pdf__fallback { margin-top: var(--space-3); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }

/* White papers: one list, summary next to the PDF links */
.srv-wp-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.srv-wp { scroll-margin-top: calc(var(--header-height) + var(--header-inset) * 2); }
.srv-wp__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); }
.srv-wp__title { margin-top: var(--space-2); }
.srv-wp__inner .srv-pdf-links { justify-content: flex-end; max-width: calc(var(--space-32) * 3); }

@media (max-width: 767px) {
  .srv-wp__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .srv-wp__inner .srv-pdf-links { justify-content: flex-start; max-width: none; }
  .srv-pdf__frame iframe { height: 70vh; min-height: calc(var(--space-32) * 3); }
}

/* Page introductions (client wording): a paragraph, then one or two short lists */
.srv-intro-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-32) * 3)), 1fr)); gap: var(--space-6) var(--space-12); margin-top: var(--space-8); max-width: calc(var(--content-width) * 0.85); }
.srv-intro-list__title { margin: 0; color: var(--ink); font: 500 var(--text-h4) var(--font-display); }
.srv-intro-list ul { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.srv-intro-list li { position: relative; padding-left: var(--space-6); color: var(--ink-soft); font: 400 var(--text-body) var(--font-sans); }
.srv-intro-list li + li { margin-top: var(--space-2); }
.srv-intro-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-3) - 1px); width: var(--space-3); height: 2px; border-radius: var(--radius-pill); background: var(--accent); }