.pp-subfeature{margin-top:1.5rem}.pp-subfeature h3{font-size:1.05rem;margin-bottom:.7rem}.pp-model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.pp-model-grid article{padding:1.5rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px}.pp-model-grid h3{margin-bottom:.6rem}.pp-model-grid code{display:block;font-size:.8rem;overflow-wrap:anywhere}.pp-model-grid strong{font-size:.9rem}.pp-install-help .install-actions{flex-wrap:wrap;gap:1rem}.pp-install-help h3{margin-top:2rem}.pp-subfeature li{align-items:flex-start}.pp-subfeature li svg{flex-shrink:0}.feature-catalog article{scroll-margin-top:100px}.pp-models{scroll-margin-top:100px}@media(max-width:640px){.pp-model-grid{grid-template-columns:1fr}.pp-install-help .install-actions{align-items:flex-start;flex-direction:column}}
.pp-capture-grid figure{margin:0}.pp-capture-grid img{display:block;width:100%;height:auto;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:8px}.pp-capture-grid figcaption{padding:.7rem 0;font-size:.9rem}.pp-capture-grid a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
/* A light card must have its own foreground colors in both website themes. */
.knowledge-panel,.dark .knowledge-panel{background:#fff;color:#1c2d20;border-color:#ccd5c7;color-scheme:light}
.knowledge-panel h3,.dark .knowledge-panel h3{color:#1c2d20}
.knowledge-panel>.eyebrow,.dark .knowledge-panel>.eyebrow,.knowledge-panel>svg,.dark .knowledge-panel>svg{color:#425c33}
.knowledge-panel>p:not(.eyebrow),.dark .knowledge-panel>p:not(.eyebrow){color:#485447}
.knowledge-panel>div>span,.dark .knowledge-panel>div>span{background:#f3f6ef;color:#33442b;border-color:#bdcbb3}

.download-page .release-details{max-width:760px;padding:2rem;border-radius:16px;margin:2rem 0}.download-page .release-details .primary-cta{display:inline-flex;margin:1rem 0}.pp-capture-grid img{object-fit:contain;height:auto;max-width:100%}

/* Prepperpoint web animations – component styles.
   Uses the website's existing palette (reference/brand.json): #fbfcfd, #142a36, #16323f, #ec9c48, #536874. */
.pp-anim { margin: 0; }
.pp-anim__frame {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #d6dee3;
  background: #fbfcfd;
  aspect-ratio: 16 / 9;                 /* reserves space before anything loads (no layout shift) */
  box-shadow: 0 18px 36px -24px rgba(20, 42, 54, .35);
}
.pp-anim__frame[data-variant="mobile"] { aspect-ratio: 4 / 5; }
.pp-anim__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* video and frame have the same aspect, so nothing is cropped or distorted */
  background: #fbfcfd;
}
/* Pause/play toggle – bottom-left so the map attribution (bottom-right) is never covered. */
.pp-anim__toggle {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 42, 54, .82);
  color: #fff;
  font: 600 14px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.pp-anim__toggle:hover { background: rgba(20, 42, 54, .95); }
.pp-anim__toggle:focus-visible { outline: 3px solid #ec9c48; outline-offset: 2px; }
.pp-anim__toggle svg { width: 16px; height: 16px; flex: none; }
.pp-anim__toggle-text { white-space: nowrap; }
@media (max-width: 480px) {
  .pp-anim__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-anim__toggle { padding: 0; justify-content: center; }
}
.pp-anim__caption { margin-top: 10px; color: #536874; font: 15px/1.5 Arial, Helvetica, sans-serif; }
.pp-anim__caption small { display: block; margin-top: 4px; font-size: 13px; }

.pp-motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin:32px 0}.pp-motion-card:first-child:nth-last-child(3){grid-column:1/-1;max-width:1040px;width:100%;margin:auto}.pp-motion-card{min-width:0}.pp-motion-card h3{font-size:1.45rem;margin-bottom:10px}.pp-motion-card>p{margin-bottom:16px}.pp-anim__toggle[hidden]{display:none}.pp-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0}.pp-offer-grid article{border:1px solid #899ba54d;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px}.pp-offer-grid h3{font-size:1.4rem}.pp-offer-grid p{flex:1}.pp-offer-grid .primary-cta{align-self:flex-start}.pp-offer-note{max-width:1000px;font-size:.95rem;line-height:1.65}.pp-quote-fields{border:0;padding:0;margin:0 0 20px;display:grid;gap:16px;min-width:0}.pp-quote-fields legend{font-size:1.2rem;font-weight:700;margin-bottom:18px}.pp-quote-fields label{display:grid;gap:7px}.pp-quote-fields input,.pp-quote-fields select{width:100%;min-width:0;border:1px solid #899ba580;border-radius:8px;background:var(--background,#fff);color:inherit;padding:12px;font:inherit}.pp-quote-fields select option{background:#fbfcfd;color:#142a36}.pp-quote-fields :is(input,select):focus-visible{outline:3px solid #ec9c48;outline-offset:2px}.pp-anim__caption{color:inherit;opacity:.8}@media(max-width:760px){.pp-motion-grid,.pp-offer-grid{grid-template-columns:1fr}.pp-motion-card:first-child:nth-last-child(3){grid-column:auto}.pp-offer-grid article{padding:22px}}@media(max-width:600px){.pp-anim__frame{aspect-ratio:4/5}}

/* v08: breathing room around installation guide CTA, EN and SV. */
.download-next > .download-guide-link{display:inline-flex;margin-top:20px;margin-bottom:20px;}

.hero-image-link{display:block;cursor:zoom-in;border-radius:inherit}.hero-image-link:focus-visible{outline:3px solid #ec9c48;outline-offset:5px}