/* ==========================================================================
   Ping Payments — Components
   Header, footer, and reusable block styles.
   Block naming: .block .block--<name>  (maps 1:1 to ACF blocks in Phase B)
   ========================================================================== */

/* ======================================================================== *
   SITE HEADER
 * ======================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--pp-z-header);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--pp-dur) var(--pp-ease),
              box-shadow var(--pp-dur) var(--pp-ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--pp-line);
  box-shadow: var(--pp-shadow-sm);
}
/* Offset the sticky header below the WP admin bar when logged in.
   Mirrors WP's admin-bar breakpoints: 32px desktop, 46px ≤782px, and the
   bar stops being fixed ≤600px so the header returns to the top. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 2vw, 2.5rem);
  min-height: var(--pp-header-h);
}
.site-header__logo { flex: none; display: flex; align-items: center; }
.site-header__logo img { width: clamp(120px, 9vw, 150px); height: auto; display: block; }

.site-nav { margin-inline: auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, -0.3rem + 1.6vw, 1.6rem);
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav__link {
  position: relative;
  display: inline-block;
  font-size: var(--pp-fs-small);
  font-weight: var(--pp-fw-medium);
  color: var(--pp-muted);
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color var(--pp-dur-fast) var(--pp-ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--pp-blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pp-dur) var(--pp-ease);
}
.site-nav__link:hover { color: var(--pp-blue-ink); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }
.site-nav__link.is-active { color: var(--pp-blue); }

.site-header__actions { display: flex; align-items: center; gap: var(--pp-sp-3); flex: none; }

/* ---- Morphing hamburger button ---------------------------------------- */
.nav-toggle {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: #fff;
  cursor: pointer;
  color: var(--pp-blue-ink);
}
.nav-toggle__box { position: absolute; inset: 0; display: grid; place-items: center; }
.nav-toggle__bar {
  position: absolute;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--pp-dur) var(--pp-ease),
              opacity var(--pp-dur-fast) var(--pp-ease);
}
.nav-toggle__bar:nth-child(1) { transform: translateY(-6px); }
.nav-toggle__bar:nth-child(3) { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: rotate(-45deg); }

/* Backdrop behind the mobile menu */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--pp-z-header) - 1);
  background: rgba(10, 31, 68, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pp-dur) var(--pp-ease), visibility var(--pp-dur);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---- Mobile nav panel -------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .site-header__actions { margin-inline-start: auto; }

  .site-nav {
    position: fixed;
    inset: var(--pp-header-h) 0 auto 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--pp-line);
    box-shadow: var(--pp-shadow-lg);
    padding: var(--pp-sp-4) var(--pp-gutter) var(--pp-sp-6);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--pp-dur-slow) var(--pp-ease);
  }
  .site-nav.is-open { clip-path: inset(0 0 0 0); }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    padding: 1rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--pp-line);
    display: flex; align-items: center; justify-content: space-between;
    /* staggered reveal */
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease);
  }
  .site-nav.is-open .site-nav__link {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i, 0) * 55ms + 120ms);
  }
  .site-nav__link::after { display: none; }
  .site-nav__link.is-active { color: var(--pp-blue); }

  /* In-panel CTA shown only on small screens */
  .site-nav__cta { display: grid; gap: var(--pp-sp-3); margin-top: var(--pp-sp-5); }
}
@media (min-width: 1081px) { .site-nav__cta { display: none; } }

/* Tighten the desktop nav in the cramped laptop range so it never overflows */
@media (min-width: 1081px) and (max-width: 1360px) {
  .site-header__inner { gap: clamp(0.75rem, -0.5rem + 2vw, 1.75rem); }
  .site-header__logo img { width: clamp(108px, 8vw, 128px); }
  .site-nav__list { gap: clamp(0.35rem, -0.8rem + 1.5vw, 1.1rem); }
  .site-nav__link { font-size: 0.82rem; }
  .site-header__actions .btn { padding: 0.7rem 1.05rem; font-size: 0.82rem; }
}

@media (max-width: 640px) {
  .site-header__actions .btn:not(.nav-toggle) { display: none; }
}

/* ======================================================================== *
   BLOCK SCAFFOLD
 * ======================================================================== */
.block { position: relative; }
.block--tint { background: var(--pp-grad-page); }
.block--ink { background: var(--pp-blue-dark); color: #fff; }

/* ---- section-intro ----------------------------------------------------- */
.section-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.section-intro .eyebrow { margin-bottom: var(--pp-sp-3); }
.section-intro h1, .section-intro h2 { margin-bottom: var(--pp-sp-4); }
.section-intro p { font-size: var(--pp-fs-lead); }

/* ======================================================================== *
   HERO
 * ======================================================================== */
.hero { background: var(--pp-grad-hero); overflow: clip; }
.hero__inner {
  display: grid;
  grid-template-columns: .75fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.hero__content { max-width: 560px; }
.hero__content h1 { margin-block: var(--pp-sp-4) var(--pp-sp-5); }
.hero__lead { font-size: var(--pp-fs-lead); margin-bottom: var(--pp-sp-5); }
/* body paragraphs after the lead (e.g. About/API hero) get breathing room
   so the CTA buttons never sit flush against the text. */
.hero__content p:not(.hero__lead) { margin-bottom: var(--pp-sp-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--pp-sp-3); }
.hero__note {
  display: inline-flex; align-items: center; gap: var(--pp-sp-2);
  margin-top: var(--pp-sp-6);
  font-size: var(--pp-fs-small); color: var(--pp-muted);
}
.hero__note .icon { color: var(--pp-blue); }

.hero__media { position: relative; container-type: inline-size; }

@media (max-width: 880px) {
  /* stack with flex to avoid grid track min-width quirks */
  .hero__inner { display: flex; flex-direction: column; }
  .hero__content { order: -1; max-width: none; width: 100%; min-width: 0; }
  .hero__media { max-width: 520px; width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ======================================================================== *
   HERO FLOW NETWORK (canvas glow lines + DOM cards) — current hero visual
 * ======================================================================== */
/* The whole diagram is sized in `em`, and its root font-size scales with the
   CONTAINER width (cqi) — so it shrinks to fit its column and never overflows,
   keeping the exact same layout (incl. on mobile), just smaller.
   (Container established on .hero__media: container-type: inline-size.) */
.flow-net {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2em;
  padding-block: 0.5em;
  font-size: clamp(0.5rem, 2.7cqi, 0.9rem);

  /* Card width caps, per column. The pay-cards hold a short label ("Direktbank"
     is the longest at ~9.9em) so they can sit narrower than the receiver cards,
     which carry a two-line name + amount. Both are `white-space: nowrap`, so
     these must not drop below the intrinsic text width or the label will spill. */
  --pp-fn-card-max: 12em;
  --pp-fn-paycard-max: 10.5em;
}
.flow-net__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
/* Cards are capped and pushed to the OUTER edge of each column, leaving a clear
   channel between the cards and the hub for the glowing lines to flow through. */
.flow-net__col { position: relative; z-index: 2; display: grid; gap: 0.7em; }
.flow-net__col--in { justify-items: start; }
.flow-net__col--out { justify-items: end; }
.flow-net__col > * { width: 100%; max-width: var(--pp-fn-card-max); }
.flow-net__col--in > * { max-width: var(--pp-fn-paycard-max); }

/* payment-method card (left) */
.pay-card {
  display: flex; align-items: center; gap: 0.55em;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 1.15em;
  padding: 0.6em 0.72em;
  box-shadow: var(--pp-shadow);
  font-weight: var(--pp-fw-semibold);
  color: var(--pp-blue-ink);
  font-size: 1em; line-height: 1.1;
  white-space: nowrap;
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.pay-card:hover { transform: translateX(3px); box-shadow: var(--pp-shadow-md); }
.pay-card__logo {
  width: 2.5em; height: 2.5em; flex: none;
  display: grid; place-items: center;
  border-radius: 0.72em; background: #f3f7ff;
}
.pay-card__logo svg { width: 1.75em; height: 1.75em; }
.pay-card__logo img {
    width: 1.4rem;
}

/* center hub + badge */
.flow-net__center { position: relative; z-index: 2; display: grid; justify-items: center; }
.flow-net__core {
  position: relative;
  width: 8.6em;
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 1em;
  border-radius: 1.7em;
  background: linear-gradient(155deg, #143b86 0%, #0a2152 55%, #0a1f44 100%);
  box-shadow: var(--pp-shadow-lg), 0 0 0 6px rgba(37, 99, 235, 0.08),
              0 0 40px rgba(37, 99, 235, 0.25);
}
.flow-net__core::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.flow-net__core img { width: 82%; filter: brightness(0) invert(1); }

/* badge floats below the hub so it never widens the center column */
.flow-net__badge {
  position: absolute; top: calc(100% + 0.55em); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.45em;
  white-space: nowrap;
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  padding: 0.45em 0.8em;
  box-shadow: var(--pp-shadow-md);
  font-size: 0.84em; line-height: 1.1;
}
.flow-net__badge .check {
  width: 1.55em; height: 1.55em; flex: none; border-radius: 50%;
  background: var(--pp-green); color: #fff;
  display: grid; place-items: center;
}
.flow-net__badge .check svg { width: 0.9em; height: 0.9em; }
.flow-net__badge b { color: var(--pp-blue-ink); font-weight: var(--pp-fw-semibold); }
.flow-net__badge small { display: block; color: var(--pp-muted); font-size: 0.86em; }

/* receiver card (right) */
.recv-card {
  display: flex; align-items: center; gap: 0.55em;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 1.15em;
  padding: 0.6em 0.72em;
  box-shadow: var(--pp-shadow);
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.recv-card:hover { transform: translateX(-3px); box-shadow: var(--pp-shadow-md); }
.recv-card__icon {
  width: 2.5em; height: 2.5em; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--pp-blue-50); color: var(--pp-blue);
}
.recv-card__icon svg { width: 1.35em; height: 1.35em; }
.recv-card__body { display: grid; line-height: 1.15; min-width: 0; }
.recv-card__body span {
  font-size: 0.82em; color: var(--pp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recv-card__body strong { font-size: 1em; color: var(--pp-blue-ink); white-space: nowrap; }
.recv-card__check {
  margin-left: auto; width: 1.5em; height: 1.5em; flex: none; border-radius: 50%;
  background: var(--pp-green); color: #fff; display: grid; place-items: center;
}
.recv-card__check svg { width: 0.9em; height: 0.9em; }

/* Narrow containers (phones + small tablets): the em-scaling alone keeps the
   proportions, which leaves the hub too big and squeezes the line channel to
   ~20-30px — not enough for the 11px halo stroke plus its glow, so the curves
   read as cramped. Shrink the hub, trim its padding and narrow the cards to hand
   that space back to the lines. The threshold is 560px because the cards hit
   their 12em cap around there, so everything above it already has a wide channel.
   The canvas reads live DOM rects, so the curves re-fit automatically. */
@container (max-width: 560px) {
  .flow-net { gap: 3.2em; }
  .flow-net__col { gap: 0.85em; }
  /* Receiver cards get a wider cap (name + amount on two lines); the pay-cards
     inherit the narrower --pp-fn-paycard-max from the base rule. Keep these in
     `em` so they scale with the diagram — a fixed `rem` cap stops tracking the
     container and re-tightens the line channel as the container shrinks. */
  .flow-net { --pp-fn-card-max: 13em; }

  .flow-net__core {
    width: 5em;
    padding: 0.1em;
    border-radius: 1.2em;
    /* Lighter glow: the full-size shadow overpowers the smaller hub. */
    box-shadow: var(--pp-shadow-md), 0 0 0 4px rgba(37, 99, 235, 0.08),
                0 0 26px rgba(37, 99, 235, 0.22);
  }

  /* Keep the badge from spilling under the cards now the hub is narrower. */
  .flow-net__badge {
    top: calc(100% + 0.45em);
    font-size: 0.72em;
    padding: 0.4em 0.7em;
  }
}

/* ---- Hero payment-flow visual (Slide1) — animated [legacy/backup] ------ */
.flow-visual { position: relative; isolation: isolate; padding-block: clamp(0.5rem, 2vw, 1.25rem); }

/* WebGL aurora backdrop — sits behind the SVG lines + tiles.
   Decorative enhancement only; if WebGL fails it stays transparent and the
   SVG flow visual below remains the fallback (see assets/js/flow-gl.js). */
.flow-gl {
  position: absolute;
  inset: -8% -6%;
  width: 112%;
  height: 116%;
  z-index: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--pp-ease);
}
.flow-gl.is-gl-ready { opacity: 1; }

/* SVG connector layer sits behind the tiles */
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.flow-lines .track { fill: none; stroke: var(--pp-blue-100); stroke-width: 2; }
.flow-lines .flow {
  fill: none; stroke: url(#flowGrad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 7 10; stroke-dashoffset: 0;
}
html.js .flow-lines .flow { stroke-dashoffset: 340; }
html.js .flow-lines.is-visible .flow { animation: pp-flow 9s linear infinite; }
.flow-lines .spark { fill: var(--pp-blue); filter: drop-shadow(0 0 4px rgba(37,99,235,.7)); }
.flow-lines .spark.is-green { fill: var(--pp-green); filter: drop-shadow(0 0 4px rgba(34,197,94,.7)); }
.flow-lines .node { fill: #fff; stroke: var(--pp-blue-100); stroke-width: 1.5; }

@keyframes pp-flow { to { stroke-dashoffset: -340; } }

/* Tile grid layer */
.flow-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.35rem, 1.5vw, 1.4rem);
}
.flow-col { display: grid; gap: clamp(0.4rem, 1.3vw, 0.7rem); }

.flow-chip {
  display: flex; align-items: center; gap: var(--pp-sp-3);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 0.55rem 0.8rem;
  box-shadow: var(--pp-shadow);
  font-size: 0.8125rem;
  font-weight: var(--pp-fw-semibold);
  color: var(--pp-blue-ink);
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.flow-chip:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-md); }
.flow-chip__amt { margin-left: auto; color: var(--pp-muted); font-size: 0.7rem; font-weight: var(--pp-fw-medium); }
.flow-chip__check { margin-left: auto; color: var(--pp-green); width: 1rem; height: 1rem; }
.flow-chip__check + .flow-chip__amt { margin-left: 0; }

/* Brand / icon mark inside a chip */
.brand-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--pp-blue-50);
  overflow: hidden;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-mark--swish { background: #fff5fa; }
.brand-mark--green { background: #eafaf0; color: var(--pp-green); }
.brand-mark--ink { background: var(--pp-blue-50); color: var(--pp-blue); }

/* Center core */
.flow-core {
  position: relative;
  display: grid; place-items: center;
  width: clamp(116px, 15vw, 168px);
  aspect-ratio: 1;
  background-image: linear-gradient(155deg, #2f6bff, #0a2db5);
  border-radius: 22px;
  box-shadow: var(--pp-shadow-lg);
  color: #fff;
  padding: var(--pp-sp-4);
}
.flow-core img { width: 86%; }
/* pulsing rings */
.flow-core::before,
.flow-core::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(47, 107, 255, 0.5);
}
html.js .flow-core::before { animation: pp-pulse 3s var(--pp-ease) infinite; }
html.js .flow-core::after  { animation: pp-pulse 3s var(--pp-ease) infinite 1.5s; }

@keyframes pp-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.55); opacity: 0; }
}

.flow-core__badge {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.4rem;
  white-space: nowrap;
  background: #fff; color: var(--pp-blue-ink);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  padding: 0.4rem 0.75rem;
  box-shadow: var(--pp-shadow-md);
  font-size: 0.72rem; font-weight: var(--pp-fw-semibold);
}
.flow-core__badge .icon { color: var(--pp-green); width: 0.95rem; height: 0.95rem; }

/* Receiver tile (right) */
.badge-card {
  display: flex; align-items: center; gap: var(--pp-sp-2);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 0.55rem 0.75rem;
  box-shadow: var(--pp-shadow);
  font-size: 0.8125rem; font-weight: var(--pp-fw-semibold);
  color: var(--pp-blue-ink);
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.badge-card:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-md); }

@media (max-width: 520px) {
  .flow-lines { display: none; }
  .flow-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .flow-core { width: 100%; aspect-ratio: auto; padding: var(--pp-sp-5); justify-self: center; }
  .flow-core__badge { position: static; transform: none; margin-top: 0.5rem; }
}

/* ======================================================================== *
   FEATURE GRID  (icon + title + text)
 * ======================================================================== */
.feature-grid { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.feature {
  display: grid;
  gap: var(--pp-sp-3);
  padding: var(--pp-sp-5);
}
.feature__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-blue-50);
  color: var(--pp-blue);
}
.feature__icon .icon { width: 1.6rem; height: 1.6rem; }
.feature h4 { color: var(--pp-blue-ink); }
.feature p { font-size: var(--pp-fs-small); }
.feature__rating { display: inline-flex; gap: 2px; color: var(--pp-green); height: 48px; align-items: center; }
.feature__rating .icon { width: 1.15rem; height: 1.15rem; }
/* a touch more air between the icon tile and title (API dev features) */
.features--dev .feature__icon { margin-bottom: var(--pp-sp-2); }

/* Surface variant — sits inside a white rounded panel (Slide1 bottom) */
.feature-panel {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-xl);
  box-shadow: var(--pp-shadow);
  padding: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
.feature-panel .feature { padding: var(--pp-sp-4); }

/* ======================================================================== *
   CARD GRID  (image/icon + title + text + checklist + link)
 * ======================================================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--pp-sp-3);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-sp-5);
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur) var(--pp-ease),
              box-shadow var(--pp-dur) var(--pp-ease),
              border-color var(--pp-dur) var(--pp-ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--pp-shadow-md); border-color: var(--pp-blue-100); }
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-blue-50); color: var(--pp-blue);
}
.card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: var(--pp-blue-50);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card h4 { color: var(--pp-blue-ink); }
.card p { font-size: var(--pp-fs-small); flex: none; }
.card .checklist { margin-top: auto; padding-top: var(--pp-sp-2); }
.card__link {
  display: inline-flex; align-items: center; gap: var(--pp-sp-2);
  margin-top: var(--pp-sp-2);
  color: var(--pp-blue); font-weight: var(--pp-fw-semibold);
  font-size: var(--pp-fs-small);
}
.card__link .icon { transition: transform var(--pp-dur-fast) var(--pp-ease); }
.card__link:hover .icon { transform: translateX(3px); }

/* Cards in a row share row tracks, so icons, headings, images and checklists
   line up even when the text above them wraps to a different number of lines.
   Scoped to .card-grid so the icon-only compliance-card grid, which reuses
   .card, keeps its flex layout. Rows are assigned explicitly so a card missing
   a part leaves that track empty instead of pulling the parts below it up a
   row. Spacing comes from margins rather than gap, so those empty tracks
   collapse to nothing. */
@supports (grid-template-rows: subgrid) {
  .card-grid > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    gap: 0;
  }
  .card-grid > .card > * { margin-top: var(--pp-sp-3); }
  .card-grid > .card > *:first-child { margin-top: 0; }
  .card-grid > .card > .card__icon { grid-row: 1; }
  .card-grid > .card > h4 { grid-row: 2; }
  .card-grid > .card > p { grid-row: 3; }
  .card-grid > .card > .card__media { grid-row: 4; align-self: start; }
  .card-grid > .card > .checklist {
    grid-row: 5;
    align-self: start;
    margin-top: var(--pp-sp-4);
    padding-top: 0;
  }
  .card-grid > .card > .card__link { grid-row: 6; align-self: end; }
}

/* ======================================================================== *
   HIGHLIGHT CALLOUT
 * ======================================================================== */
.callout {
  display: flex; align-items: center; gap: var(--pp-sp-4);
  background: var(--pp-blue-50);
  border: 1px solid var(--pp-blue-100);
  border-radius: var(--pp-radius-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.callout__icon {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--pp-radius-sm);
  background: #fff; color: var(--pp-blue);
  box-shadow: var(--pp-shadow-sm);
}
.callout h4 { color: var(--pp-blue-ink); margin-bottom: 0.2rem; }
.callout p { font-size: var(--pp-fs-small); margin: 0; }
.callout .accent { color: var(--pp-blue); }
/* Wrap on narrow screens so the trailing button never forces overflow. */
@media (max-width: 560px) {
  .callout { flex-wrap: wrap; }
  .callout .btn { margin-left: 0 !important; }
}

/* ======================================================================== *
   CONTACT METHODS  (Slide10)
 * ======================================================================== */
.contact-list { display: grid; gap: var(--pp-sp-3); }
.contact-row {
  display: flex; align-items: center; gap: var(--pp-sp-4);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: var(--pp-sp-4) var(--pp-sp-5);
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur-fast) var(--pp-ease),
              box-shadow var(--pp-dur-fast) var(--pp-ease);
}
.contact-row:hover { transform: translateX(4px); box-shadow: var(--pp-shadow); }
.contact-row__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-blue-50); color: var(--pp-blue);
}
.contact-row__body { display: grid; }
.contact-row__body strong { color: var(--pp-blue-ink); }
.contact-row__body span { font-size: var(--pp-fs-small); color: var(--pp-muted); }
.contact-row__chevron { margin-left: auto; color: var(--pp-muted); }

.contact-media {
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow-md);
  min-height: 100%;
  /* graceful fallback if the photo fails to load */
  background: linear-gradient(150deg, var(--pp-blue-50), #dbe6ff);
}
.contact-media img { width: 100%; height: 100%; object-fit: cover; }

/* ======================================================================== *
   CTA BANNER
 * ======================================================================== */
.cta-banner {
  display: flex; align-items: center; gap: var(--pp-sp-5);
  flex-wrap: wrap;
  background: var(--pp-blue-dark);
  background-image: linear-gradient(135deg, #0a2540, #0a1f44);
  color: #fff;
  border-radius: var(--pp-radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  box-shadow: var(--pp-shadow-lg);
}
.cta-banner__icon {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--pp-radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--pp-green);
}
.cta-banner__body h3 { color: #fff; }
.cta-banner__body p { color: rgba(255, 255, 255, 0.75); margin: 0.25rem 0 0; }
.cta-banner__actions { margin-left: auto; display: flex; gap: var(--pp-sp-3); flex-wrap: wrap; }
.cta-banner--tint {
  background: var(--pp-blue-50);
  background-image: none;
  color: var(--pp-blue-ink);
  box-shadow: none;
  border: 1px solid var(--pp-blue-100);
}
.cta-banner--tint .cta-banner__body h3 { color: var(--pp-blue-ink); }
.cta-banner--tint .cta-banner__body p { color: var(--pp-muted); }
.cta-banner--tint .cta-banner__icon { background: #fff; color: var(--pp-blue); box-shadow: var(--pp-shadow-sm); }
/* Soft white card variant — stands out clearly on tinted sections. */
.cta-banner--soft {
  background: #fff;
  background-image: none;
  color: var(--pp-blue-ink);
  border: 1px solid var(--pp-blue-100);
  box-shadow: var(--pp-shadow);
}
.cta-banner--soft .cta-banner__body h3 { color: var(--pp-blue-ink); }
.cta-banner--soft .cta-banner__body p { color: var(--pp-muted); }
.cta-banner--soft .cta-banner__icon { background: var(--pp-blue-50); color: var(--pp-blue); }

@media (max-width: 720px) {
  .cta-banner__actions { margin-left: 0; width: 100%; }
}

/* ======================================================================== *
   GENERIC MEDIA HELPERS  (reused by hero figures, splits, highlights)
 * ======================================================================== */
/* Rounded, shadowed image frame with a graceful gradient fallback. */
.media-frame {
  position: relative;
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow-md);
  background: linear-gradient(150deg, var(--pp-blue-50), #dbe6ff);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 11; }

/* Two-column text + media split (compliance highlight, generic) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.split--tint {
  background: var(--pp-grad-page);
  border: 1px solid var(--pp-blue-100);
  border-radius: var(--pp-radius-xl);
  padding: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
}
.split__body h2, .split__body h3 { color: var(--pp-blue-ink); margin-bottom: var(--pp-sp-4); }
.split__body .prose { font-size: var(--pp-fs-lead); }
.split__media { align-self: stretch; min-height: 260px; }
.split__media .media-frame { height: 100%; }
.split--reverse .split__media { order: -1; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ======================================================================== *
   BENEFIT ROW  (home "För vem" — 4 inline benefits inside a panel)
 * ======================================================================== */
.benefit-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pp-sp-5);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}
.benefit { display: flex; align-items: flex-start; gap: var(--pp-sp-3); }
.benefit__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pp-blue-50); color: var(--pp-blue);
}
.benefit__icon .icon { width: 1.25rem; height: 1.25rem; }
.benefit strong { display: block; color: var(--pp-blue-ink); font-weight: var(--pp-fw-semibold); }
.benefit p { font-size: var(--pp-fs-small); margin-top: 0.15rem; }
@media (max-width: 900px) { .benefit-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .benefit-row { grid-template-columns: 1fr; } }

/* Centered feature variant (Om Ping values, compliance) */
.feature--center { text-align: center; justify-items: center; }
.feature--center .feature__icon { margin-inline: auto; }

/* Coloured feature icon tiles (compliance cards) */
.feature__icon--green  { background: #e7f8ee; color: var(--pp-green-600); }
.feature__icon--orange { background: #fff1e6; color: #ea6a16; }
.feature__icon--blue   { background: var(--pp-blue-50); color: var(--pp-blue); }
.feature__icon--purple { background: #f3ecfe; color: #8b3df0; }

/* ======================================================================== *
   LOGO WALL / LOGO GRID  (partner & customer marks — placeholder wordmarks)
 * ======================================================================== */
.logo-wall {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.logo-wall__item {
  flex: 1 1 auto; min-width: 0;
  display: grid; place-items: center;
  color: #8a99ad;
  font-weight: var(--pp-fw-bold);
  letter-spacing: -0.01em;
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity var(--pp-dur) var(--pp-ease), filter var(--pp-dur) var(--pp-ease);
}
.logo-wall__item svg, .logo-wall__item img { max-height: 26px; width: auto; }
.logo-wall__item:hover { filter: grayscale(0); opacity: 1; }

/* home "För vem" footer strip: divided logo row + tinted "passus" panel */
.partner-strip {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: var(--pp-sp-4); align-items: stretch;
  margin-top: clamp(2rem, 1rem + 3vw, 4rem);
}
.logo-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg); overflow: hidden;
}
.logo-cell {
  display: grid; place-items: center;
  padding: clamp(1rem, 0.5rem + 2vw, 2rem) var(--pp-sp-3);
  border-right: 1px solid var(--pp-line);
  filter: grayscale(1); opacity: 0.85;
  transition: opacity var(--pp-dur) var(--pp-ease), filter var(--pp-dur) var(--pp-ease);
}
.logo-cell img {
  display: block; width: auto; max-width: 100%;
  height: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); object-fit: contain;
}
.logo-cell:last-child { border-right: 0; }
.logo-cell:hover { filter: grayscale(0); opacity: 1; }

.passus {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.4rem 1rem;
  background: var(--pp-blue-50); border: 1px solid var(--pp-blue-100);
  border-radius: var(--pp-radius-lg);
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 1.75rem);
}
.passus__icon {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--pp-radius-sm); background: #fff; color: var(--pp-blue);
  box-shadow: var(--pp-shadow-sm);
}
.passus__title { grid-column: 2; grid-row: 1; color: var(--pp-blue-ink); font-weight: var(--pp-fw-semibold); }
.passus__btn { grid-column: 3; grid-row: 1; }
.passus__text { grid-column: 2 / -1; grid-row: 2; font-size: var(--pp-fs-small); margin: 0; }
@media (max-width: 980px) {
  .partner-strip { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .logo-row { grid-template-columns: repeat(2, 1fr); }
  .logo-cell:nth-child(2) { border-right: 0; }
  .logo-cell:nth-child(1), .logo-cell:nth-child(2) { border-bottom: 1px solid var(--pp-line); }
  .passus { grid-template-columns: auto 1fr; }
  .passus__btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .passus__text { grid-column: 1 / -1; }
}

/* continuous logo marquee (pure CSS, infinite) */
.logo-marquee { width: 100%; overflow: hidden; margin: var(--pp-sp-7) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track {
  display: flex; align-items: center;
  width: max-content;
  animation: pp-logo-marquee 45s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
  flex: 0 0 auto; display: grid; place-items: center;
  padding: 0 36px; /* uniform spacing so the two groups repeat exactly (seamless -50% wrap) */
  filter: grayscale(1); opacity: 0.7;
  transition: opacity var(--pp-dur) var(--pp-ease), filter var(--pp-dur) var(--pp-ease);
}
.logo-marquee__item img { height: clamp(26px, 2.4vw, 32px); width: auto; display: block; }
.logo-marquee__item:hover { filter: grayscale(0); opacity: 1; }
@keyframes pp-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* one full group → seamless wrap */
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: var(--pp-sp-4); }
}

/* ======================================================================== *
   PARTNERS  (Partners + Kunder side-by-side lists)  — About §3
 * ======================================================================== */
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .partners { grid-template-columns: 1fr; } }

.partners-col__title {
  font-weight: var(--pp-fw-semibold); color: var(--pp-blue-ink);
  padding-bottom: var(--pp-sp-3); margin: 0 0 var(--pp-sp-5);
  border-bottom: 2px solid var(--pp-blue);
}

.partner-list { display: grid; gap: var(--pp-sp-3); }
.partner-row {
  display: flex; align-items: center; gap: var(--pp-sp-4);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: var(--pp-sp-4);
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur-fast) var(--pp-ease), box-shadow var(--pp-dur-fast) var(--pp-ease);
}
.partner-row:hover { transform: translateX(4px); box-shadow: var(--pp-shadow); }
.partner-row__logo {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-blue-50); color: var(--pp-blue);
}
.partner-row__logo svg { width: 1.5rem; height: 1.5rem; }
/* Logotype images (often SVGs WP reports as 1×1) — size to the box. */
.partner-row__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.partner-row__body { display: grid; min-width: 0; }
.partner-row__body strong { color: var(--pp-blue-ink); }
.partner-row__body span { font-size: var(--pp-fs-small); color: var(--pp-muted); }
.partner-row__chevron { margin-left: auto; color: var(--pp-muted); flex: none; }

/* ======================================================================== *
   TEAM GRID + FOUNDER  (About §2)
 * ======================================================================== */
.team-panel {
  background: var(--pp-grad-page);
  border: 1px solid var(--pp-blue-100);
  border-radius: var(--pp-radius-xl);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}
.team-card {
  display: flex; flex-direction: column; gap: var(--pp-sp-2);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-sp-4);
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--pp-shadow-md); }
.team-card__photo {
  aspect-ratio: 1 / 1; border-radius: var(--pp-radius);
  overflow: hidden; margin-bottom: var(--pp-sp-2);
  background: linear-gradient(150deg, var(--pp-blue-50), #dbe6ff);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card strong { color: var(--pp-blue-ink); font-size: 1.05rem; }
.team-card .role { font-size: var(--pp-fs-small); color: var(--pp-blue); font-weight: var(--pp-fw-semibold); }
.team-card span { font-size: var(--pp-fs-small); color: var(--pp-muted); }
.team-card a { font-size: var(--pp-fs-small); color: var(--pp-blue); font-weight: var(--pp-fw-medium); }

.team-group__head { margin-bottom: var(--pp-sp-5); }
.team-group__title { color: var(--pp-blue-ink); margin-top: var(--pp-sp-2); }

/* Styrelse panel — visually distinct from the employee panel */
.team-panel--board {
  background: var(--pp-blue-ink);
  border-color: var(--pp-blue-ink);
}
.team-panel--board .team-group__title { color: #fff; }
.team-panel--board .team-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.team-panel--board .team-card strong { color: #fff; }

.founder {
  display: grid; grid-template-columns: 1fr 0.85fr; align-items: stretch;
  margin-top: var(--pp-sp-5);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-xl); overflow: hidden;
  box-shadow: var(--pp-shadow-sm);
}
.founder__body { padding: clamp(1.5rem, 1rem + 2vw, 3rem); align-self: center; }
.founder__body h3 { color: var(--pp-blue-ink); margin-bottom: var(--pp-sp-4); }
.founder__media { position: relative; min-height: 280px; background: linear-gradient(150deg, var(--pp-blue-50), #cdddf6); }
.founder__media img { width: 100%; height: 100%; object-fit: cover; }
.founder__name {
  position: absolute; left: var(--pp-sp-5); bottom: var(--pp-sp-5);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-radius: var(--pp-radius-sm); padding: var(--pp-sp-3) var(--pp-sp-4);
  box-shadow: var(--pp-shadow-sm);
}
.founder__name strong { display: block; color: var(--pp-blue-ink); }
.founder__name span { font-size: var(--pp-fs-small); color: var(--pp-muted); }
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; }
  .founder__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ======================================================================== *
   CODE BLOCK + SPEC LIST  (API §2)
 * ======================================================================== */
.code-stack { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: stretch; }
@media (max-width: 860px) { .code-stack { grid-template-columns: 1fr; } }

/* .code-block {
  display: flex; flex-direction: column;
  background: var(--pp-blue-dark);
  background-image: linear-gradient(160deg, #0c2550, #0a1124);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-lg);
  overflow: hidden;
} */
.code-block {
    display: flex;
    flex-direction: column;
    background: #f7f9ff;
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow-lg);
    overflow: hidden;
    background-image: url('/wp-content/uploads/2026/07/Dev-portal.jpg');
    background-size: contain;
}
.code-block * {
    opacity: 0;
}
.code-block__body { padding: var(--pp-sp-5); flex: 1; min-width: 0; }
.code-block__panes { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--pp-sp-5); }
.code-block pre {
  margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem; line-height: 1.65; color: #cfe3ff;
  white-space: pre; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.code-block pre::-webkit-scrollbar { height: 6px; }
.code-block pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
.code-block pre::-webkit-scrollbar-track { background: transparent; }
.code-block pre .k { color: #7ee0a8; }   /* keys / strings */
.code-block pre .c { color: #6b87b5; }   /* comments / dim */
.code-block__panes > pre + pre { border-left: 1px solid rgba(255,255,255,0.1); padding-left: var(--pp-sp-5); }
.code-block__bar {
  display: flex; align-items: center; gap: var(--pp-sp-4);
  padding: var(--pp-sp-3) var(--pp-sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.code-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: var(--pp-fs-small); font-weight: var(--pp-fw-medium);
  color: rgba(255,255,255,0.6); padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.code-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--pp-blue); }
.code-tab:hover { color: #fff; }
.code-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--pp-sp-2);
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--pp-radius-pill);
  padding: 0.4rem 0.9rem; font-size: var(--pp-fs-small);
}
.code-copy:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 560px) { .code-block__panes { grid-template-columns: 1fr; }
  .code-block__panes > pre + pre { border-left: 0; padding-left: 0; padding-top: var(--pp-sp-4); border-top: 1px solid rgba(255,255,255,0.1); } }

.spec-list { display: grid; gap: var(--pp-sp-4); align-content: space-between; }
.spec {
  display: flex; align-items: flex-start; gap: var(--pp-sp-4);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius); padding: var(--pp-sp-4);
  box-shadow: var(--pp-shadow-sm);
}
.spec__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--pp-radius-sm); background: var(--pp-blue-50); color: var(--pp-blue);
}
.spec strong { display: block; color: var(--pp-blue-ink); }
.spec p { font-size: var(--pp-fs-small); margin-top: 0.1rem; }

/* ======================================================================== *
   MEDIA BANNER  (illustration + text — News/API/Contact help)
 * ======================================================================== */
.media-banner {
  display: grid; grid-template-columns: minmax(180px, 0.7fr) 1.3fr;
  gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: center;
  background: var(--pp-grad-page);
  border: 1px solid var(--pp-blue-100);
  border-radius: var(--pp-radius-xl);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}
.media-banner__art { display: grid; place-items: center; }
.media-banner__art img, .media-banner__art svg { width: 100%; max-width: 280px; height: auto; }
.media-banner__body h3 { color: var(--pp-blue-ink); margin-bottom: var(--pp-sp-3); }
.media-banner__body p { margin-bottom: var(--pp-sp-4); }
@media (max-width: 700px) {
  .media-banner { grid-template-columns: 1fr; text-align: left; }
  .media-banner__art { max-width: 220px; }
}

/* ======================================================================== *
   NEWS GRID + FILTERS  (News page)
 * ======================================================================== */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--pp-sp-4); margin-bottom: var(--pp-sp-6);
}
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--pp-sp-2); }
.filter-pill {
  appearance: none; cursor: pointer;
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  padding: 0.5rem 1rem; font-size: var(--pp-fs-small); font-weight: var(--pp-fw-medium);
  color: var(--pp-muted);
  transition: all var(--pp-dur-fast) var(--pp-ease);
}
.filter-pill[aria-pressed="true"], .filter-pill:hover { color: var(--pp-blue); border-color: var(--pp-blue-100); background: var(--pp-blue-50); }
.search {
  display: inline-flex; align-items: center; gap: var(--pp-sp-2);
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill); padding: 0.5rem 0.9rem;
  color: var(--pp-muted); min-width: 220px;
}
.search .icon { width: 1.05rem; height: 1.05rem; }
.search input { border: 0; outline: 0; background: none; width: 100%; font-size: var(--pp-fs-small); }
.search input:focus-visible { box-shadow: none; }

.news-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg); overflow: hidden;
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease);
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--pp-shadow-md); border-color: var(--pp-blue-100); }
.news-card__media { display: block; background: var(--pp-blue-50); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--pp-dur-slow) var(--pp-ease); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body { display: flex; flex-direction: column; gap: var(--pp-sp-2); padding: var(--pp-sp-5); flex: 1; }
.news-card__meta { display: flex; align-items: center; gap: var(--pp-sp-3); }
.tag {
  font-size: 0.72rem; font-weight: var(--pp-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pp-blue); background: var(--pp-blue-50); border-radius: var(--pp-radius-pill);
  padding: 0.25rem 0.6rem;
}
.news-card__meta time { font-size: var(--pp-fs-small); color: var(--pp-muted); }
.news-card h4 { color: var(--pp-blue-ink); margin-block: var(--pp-sp-3) var(--pp-sp-2); }
.news-card h4 a:hover { color: var(--pp-blue); }
.news-card p { font-size: var(--pp-fs-small); flex: 1; }
.news-card .card__link { margin-top: var(--pp-sp-2); }
.news-card .card__link:hover { color: var(--pp-blue-hover); }

/* ======================================================================== *
   CONTACT FORM  (Contact page)
 * ======================================================================== */
.contact-form {
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2rem);
  box-shadow: var(--pp-shadow);
  display: grid; gap: var(--pp-sp-4);
}
.contact-form h3 { color: var(--pp-blue-ink); }
.field { display: grid; gap: var(--pp-sp-2); }
.field label { font-size: var(--pp-fs-small); font-weight: var(--pp-fw-medium); color: var(--pp-blue-ink); }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--pp-line); border-radius: var(--pp-radius-sm);
  background: var(--pp-surface);
  padding: 0.75rem 0.9rem; font-size: var(--pp-fs-small);
  transition: border-color var(--pp-dur-fast) var(--pp-ease), box-shadow var(--pp-dur-fast) var(--pp-ease);
}
.field input:focus, .field textarea:focus { border-color: var(--pp-blue); box-shadow: var(--pp-ring); outline: 0; }
.field textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { width: 100%; justify-content: center; }

/* ======================================================================== *
   FLOW DIAGRAM  (home §3 "Så fungerar det")  — CSS only, no canvas
 * ======================================================================== */
.flow-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 2.05fr auto 1fr;
  align-items: stretch;
  gap: clamp(0.75rem, 0.3rem + 2vw, 2.5rem);
}
/* keep the boxes above the dashed wire layer */
.flow-diagram > .flow-side,
.flow-diagram > .flow-arrow,
.flow-diagram > .flow-platform,
.flow-diagram > .flow-diagram__foot { position: relative; z-index: 2; }

/* animated dashed connector lines (SVG layer; positions set by flow-diagram.js) */
.flow-diagram__wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; overflow: visible; pointer-events: none;
}
.flow-diagram__wires .wire {
  fill: none; stroke: #bcc8de; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 5 7;
  animation: fd-flow 1.1s linear infinite;
}
.flow-diagram__wires .wire--loop { stroke: #cdd8e8; }
.flow-diagram__wires .wire-dot { fill: var(--pp-blue); filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.6)); }
@keyframes fd-flow { to { stroke-dashoffset: -24; } }
.flow-side {
  background: #fff; border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow-sm);
  padding: var(--pp-sp-5);
  display: grid; gap: var(--pp-sp-3); align-content: start;
}
.flow-side__label {
  font-size: var(--pp-fs-small); font-weight: var(--pp-fw-semibold);
  color: var(--pp-blue-ink); text-align: center; margin-bottom: var(--pp-sp-2);
}
.flow-item {
  display: flex; align-items: center; gap: var(--pp-sp-3);
  background: var(--pp-surface); border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius); padding: var(--pp-sp-3);
  font-size: var(--pp-fs-small); font-weight: var(--pp-fw-medium); color: var(--pp-blue-ink);
}
.flow-item__icon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: var(--pp-radius-sm); background: #e7f0e9; color: var(--pp-green-600);
}
.flow-item__icon .icon { width: 1.2rem; height: 1.2rem; }

.flow-arrow {
  align-self: center; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--pp-line); color: var(--pp-blue);
  box-shadow: var(--pp-shadow-sm);
}
.flow-arrow .icon { width: 1.1rem; height: 1.1rem; }

.flow-platform {
  background: var(--pp-blue-dark);
  background-image: linear-gradient(160deg, #2f6bff 0%, #1746c9 45%, #0a2db5 100%);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-lg);
  color: #fff; padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  display: grid; grid-template-rows: auto 1fr; gap: var(--pp-sp-5);
}
.flow-platform__head { display: flex; align-items: center; gap: var(--pp-sp-3); }
.flow-platform__head img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.flow-platform__head span { font-weight: var(--pp-fw-semibold); }
.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pp-sp-3); align-content: center; }
.flow-step { text-align: center; display: grid; gap: var(--pp-sp-2); justify-items: center; }
.flow-step__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--pp-radius-sm); background: rgba(255,255,255,0.12); color: #fff;
}
.flow-step strong { font-size: var(--pp-fs-small); color: #fff; font-weight: var(--pp-fw-semibold); }
.flow-step span { font-size: 0.72rem; color: rgba(255,255,255,0.7); line-height: 1.35; }

.flow-diagram__foot {
  grid-column: 1 / -1; margin-top: var(--pp-sp-5);
  display: grid; justify-items: center; gap: var(--pp-sp-2); text-align: center;
}
.flow-diagram__foot .flow-arrow { background: #e7f0e9; color: var(--pp-green-600); border-color: transparent; }
.flow-diagram__foot strong { color: var(--pp-blue-ink); }
.flow-diagram__foot p { font-size: var(--pp-fs-small); margin: 0; }

@media (max-width: 900px) {
  .flow-diagram { grid-template-columns: 1fr; gap: var(--pp-sp-3); }
  .flow-arrow--gap { transform: rotate(90deg); }
  .flow-diagram__wires { display: none; } /* stacked layout uses the rotated arrow chips */
}
@media (max-width: 540px) {
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================== *
   SITE FOOTER
 * ======================================================================== */
.site-footer {
  background: var(--pp-blue-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--pp-sp-6);
}
.site-footer a { color: rgba(255, 255, 255, 0.72); transition: color var(--pp-dur-fast) var(--pp-ease); }
.site-footer a:hover { color: #fff; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--pp-sp-6);
  padding-bottom: var(--pp-sp-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand__logo img {
  width: 158px; height: auto; display: block;
  /* render the multi-blue logo as solid white on the dark footer */
  filter: brightness(0) invert(1);
}
.footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: var(--pp-fs-small); margin-top: var(--pp-sp-4); max-width: 30ch; }
.footer-brand .pill {
  margin-top: var(--pp-sp-4);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
.footer-brand .pill .icon { color: var(--pp-green); }

/* Linked variant of the FI pill: same shape, but it has to read as clickable. */
.footer-brand .pill--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pp-dur-fast) var(--pp-ease),
              border-color var(--pp-dur-fast) var(--pp-ease),
              color var(--pp-dur-fast) var(--pp-ease);
}
.footer-brand .pill--link:hover,
.footer-brand .pill--link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.footer-brand .pill--link:focus-visible {
  outline: 2px solid var(--pp-blue);
  outline-offset: 2px;
}
.footer-col h5 {
  font-size: var(--pp-fs-small);
  font-weight: var(--pp-fw-semibold);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--pp-sp-4);
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--pp-sp-3); }
.footer-col a { font-size: var(--pp-fs-small); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--pp-sp-3);
  padding-top: var(--pp-sp-5);
  font-size: var(--pp-fs-small);
}
.footer-social { display: flex; gap: var(--pp-sp-3); }
.footer-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ======================================================================== *
   Generic blocks — rich-text, accordion, testimonials, stats, steps,
   pricing, buttons, spacer, video, image, gallery.
 * ======================================================================== */

/* ---- Rich text / prose ------------------------------------------------- */
.prose { color: var(--pp-muted); font-size: var(--pp-fs-body); line-height: var(--pp-lh-body); }
.prose > * + * { margin-top: var(--pp-sp-4); }
.prose h2, .prose h3, .prose h4 { color: var(--pp-blue-ink); }
.prose h2 { margin-top: var(--pp-sp-6); }
.prose a { color: var(--pp-blue); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--pp-blue-hover); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--pp-sp-2); }
.prose img { border-radius: var(--pp-radius); }
.prose blockquote {
  border-left: 3px solid var(--pp-blue-100);
  padding-left: var(--pp-sp-4);
  color: var(--pp-ink);
  font-style: italic;
}

/* ---- Two-column sections (text-columns / image-columns) ---------------- */
/* Both stack to a single column on narrow screens. `align-items: start` keeps
   columns of unequal length top-aligned instead of stretching to match. */
.text-cols,
.image-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--pp-sp-5), 3vw, var(--pp-sp-7));
  align-items: start;
}
.text-cols--center { align-items: center; }

/* A single authored column shouldn't sit in a half-width cell. */
.text-cols > :only-child,
.image-cols > :only-child { grid-column: 1 / -1; }

/* The column is the prose root, so its first child must not add a stray top
   margin and knock the two columns out of alignment. */
.text-cols__col > :first-child { margin-top: 0; }

/* Images keep their natural aspect ratio, so a mismatched pair renders at
   different heights rather than being cropped to match. Add `aspect-ratio` to
   .image-cols .media-frame if you'd rather have a uniform pair (it crops, since
   .media-frame img is object-fit: cover). */
.image-cols__col { margin: 0; }

@media (max-width: 780px) {
  .text-cols,
  .image-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Accordion / FAQ --------------------------------------------------- */
.accordion { display: grid; gap: var(--pp-sp-3); }
.accordion__item {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 0 var(--pp-sp-5);
  box-shadow: var(--pp-shadow-sm);
}
.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-sp-3);
  padding: var(--pp-sp-5) 0;
  font-family: var(--pp-font-head);
  font-weight: var(--pp-fw-semibold);
  color: var(--pp-blue-ink);
  cursor: pointer;
  list-style: none;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q .icon { color: var(--pp-blue); flex: none; transition: transform var(--pp-dur) var(--pp-ease); }
.accordion__item[open] .accordion__q .icon { transform: rotate(90deg); }
.accordion__a { padding-bottom: var(--pp-sp-5); color: var(--pp-muted); font-size: var(--pp-fs-small); }
.accordion__a > * + * { margin-top: var(--pp-sp-3); }

/* ---- Testimonials ------------------------------------------------------ */
.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--pp-sp-4);
  height: 100%;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-sp-6);
  box-shadow: var(--pp-shadow-sm);
}
.quote-card__mark { color: var(--pp-blue-100); display: inline-flex; }
.quote-card__mark .icon { width: 1.5rem; height: 1.5rem; }
.quote-card__text { color: var(--pp-ink); font-size: var(--pp-fs-lead); line-height: var(--pp-lh-body); }
.quote-card__author { display: flex; align-items: center; gap: var(--pp-sp-3); margin-top: auto; }
.quote-card__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--pp-blue-50); }
.quote-card__name { color: var(--pp-blue-ink); font-weight: var(--pp-fw-semibold); }
.quote-card__role { font-size: var(--pp-fs-small); color: var(--pp-muted); }

/* ---- Stats ------------------------------------------------------------- */
.stat-row { text-align: center; }
.stat__value {
  font-family: var(--pp-font-head);
  font-weight: var(--pp-fw-bold);
  color: var(--pp-blue);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
}
.stat__label { color: var(--pp-muted); font-size: var(--pp-fs-small); margin-top: var(--pp-sp-2); }
.block--ink .stat__value { color: #fff; }
.block--ink .stat__label { color: rgba(255, 255, 255, 0.7); }

/* ---- Steps ------------------------------------------------------------- */
.steps { counter-reset: step; }
.step {
  counter-increment: step;
  display: grid;
  gap: var(--pp-sp-3);
  align-content: start;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: var(--pp-sp-6);
  box-shadow: var(--pp-shadow-sm);
}
.step__num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--pp-blue);
  color: #fff;
  font-family: var(--pp-font-head);
  font-weight: var(--pp-fw-bold);
  display: grid;
  place-items: center;
}
.step__num::before { content: counter(step); }
.step h4 { color: var(--pp-blue-ink); }
.step p { font-size: var(--pp-fs-small); }

/* ---- Pricing ----------------------------------------------------------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pp-sp-4);
  height: 100%;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-sp-6);
  box-shadow: var(--pp-shadow-sm);
}
.price-card--featured { border-color: var(--pp-blue); box-shadow: var(--pp-shadow-md); }
.price-card__tag { position: absolute; top: calc(-1 * var(--pp-sp-3)); left: var(--pp-sp-6); }
.price-card__name { color: var(--pp-blue-ink); font-weight: var(--pp-fw-semibold); font-family: var(--pp-font-head); }
.price-card__price {
  font-family: var(--pp-font-head);
  font-weight: var(--pp-fw-bold);
  color: var(--pp-blue-ink);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.6rem);
  line-height: 1;
}
.price-card__period { font-size: var(--pp-fs-small); color: var(--pp-muted); font-weight: var(--pp-fw-regular); }
.price-card__desc { font-size: var(--pp-fs-small); color: var(--pp-muted); }
.price-card .checklist { margin-bottom: var(--pp-sp-2); }
.price-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ---- Button group ------------------------------------------------------ */
.btn-group { display: flex; flex-wrap: wrap; gap: var(--pp-sp-3); }
.btn-group--center { justify-content: center; }
.btn-group--right { justify-content: flex-end; }

/* ---- Spacer / divider -------------------------------------------------- */
.pp-spacer { width: 100%; }
.pp-spacer hr { border: 0; border-top: 1px solid var(--pp-line); margin: 0; }

/* ---- Video embed ------------------------------------------------------- */
.video-embed {
  position: relative;
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow-md);
  background: var(--pp-blue-dark);
}
.video-embed iframe,
.video-embed video,
.video-embed > * { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }
.video-embed__caption { text-align: center; font-size: var(--pp-fs-small); color: var(--pp-muted); margin-top: var(--pp-sp-3); }

/* ---- Single image ------------------------------------------------------ */
.figure { margin: 0; }
.figure figcaption { text-align: center; font-size: var(--pp-fs-small); color: var(--pp-muted); margin-top: var(--pp-sp-3); }

/* ==========================================================================
   Demo video modal
   ========================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--pp-z-overlay) + 50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pp-sp-5);
}
.video-modal[hidden] { display: none; }

.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.video-modal.is-open .video-modal__overlay { opacity: 1; }

.video-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-xl);
  box-shadow: var(--pp-shadow-lg);
  padding: var(--pp-sp-3);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.video-modal.is-open .video-modal__dialog { opacity: 1; transform: none; }

.video-modal__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  background: #000;
}
.video-modal__media iframe,
.video-modal__media video,
.video-modal__media embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-white);
  color: var(--pp-ink);
  box-shadow: var(--pp-shadow-md);
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.video-modal__close:hover { color: var(--pp-blue); transform: scale(1.06); }
.video-modal__close svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
  .video-modal__close { top: -10px; right: -10px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal__overlay,
  .video-modal__dialog { transition: none; }
}

/* ======================================================================== *
   ARTICLE BODY  (single.php the_content() — WYSIWYG editor output)
 * ======================================================================== */
.article-body { color: var(--pp-ink); font-size: var(--pp-fs-lead); line-height: var(--pp-lh-body); }
.article-body > * + * { margin-top: var(--pp-sp-5); }
.article-body > * + h2,
.article-body > * + h3 { margin-top: var(--pp-sp-8); }
.article-body h2 { font-size: var(--pp-fs-h3); }
.article-body h3 { font-size: var(--pp-fs-h4); }
.article-body h2 + *,
.article-body h3 + *,
.article-body h4 + * { margin-top: var(--pp-sp-3); }
.article-body a { color: var(--pp-blue); text-decoration: underline; text-underline-offset: 0.15em; }
.article-body a:hover { color: var(--pp-blue-hover); }
.article-body ul,
.article-body ol { padding-left: 1.25em; display: grid; gap: var(--pp-sp-2); }
.article-body li { padding-left: 0.25em; }
.article-body li > ul,
.article-body li > ol { margin-top: var(--pp-sp-2); }
.article-body blockquote {
  border-left: 3px solid var(--pp-blue-100);
  padding-left: var(--pp-sp-5);
  font-style: italic;
  color: var(--pp-blue-ink);
}
.article-body img,
.article-body figure { border-radius: var(--pp-radius-lg); overflow: hidden; }
.article-body figcaption { margin-top: var(--pp-sp-2); font-size: var(--pp-fs-small); color: var(--pp-muted); text-align: center; }
.article-body hr { border: 0; border-top: 1px solid var(--pp-line); }
.article-body table { width: 100%; border-collapse: collapse; font-size: var(--pp-fs-small); }
.article-body th,
.article-body td { padding: var(--pp-sp-3); border-bottom: 1px solid var(--pp-line); text-align: left; }

/* ==========================================================================
   Site popup (once per session)
   ========================================================================== */
.site-popup {
  position: fixed;
  inset: 0;
  z-index: calc(var(--pp-z-overlay) + 60);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pp-sp-5);
}
.site-popup[hidden] { display: none; }

.site-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.site-popup.is-open .site-popup__overlay { opacity: 1; }

.site-popup__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  max-height: calc(100vh - var(--pp-sp-7));
  /* dvh tracks the collapsing mobile browser chrome; vh above is the fallback. */
  max-height: calc(100dvh - var(--pp-sp-7));
  /* The BODY scrolls, not the dialog — otherwise the absolutely positioned close
     button scrolls out of view on short screens. */
  overflow: hidden;
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-xl);
  box-shadow: var(--pp-shadow-lg);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.site-popup.is-open .site-popup__dialog { opacity: 1; transform: none; }

.site-popup__body {
  overflow-y: auto;
  /* Don't chain the scroll to the page behind once the body hits its end. */
  overscroll-behavior: contain;
  /* NOTE: no `-webkit-overflow-scrolling: touch` here. On iOS it promotes this
     element to its own compositing layer, which then paints over the absolutely
     positioned close button and swallows taps on it — the button worked on
     Android but not iPhone. It has been the default since iOS 13 anyway. */
  text-align: center;
  padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.5rem, 0.5rem + 4vw, 4rem);
}
.site-popup__body .eyebrow { margin-bottom: var(--pp-sp-4); }

.site-popup__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: var(--pp-lh-snug);
  color: var(--pp-blue-ink);
  margin-bottom: var(--pp-sp-5);
  text-wrap: balance;
}

/* Rich text (WYSIWYG "Content" field). Mirrors .article-body, scaled for the
   popup and centre-aligned; lists get left-aligned so they stay readable. */
.site-popup__text {
  margin-inline: auto;
  font-size: var(--pp-fs-body);
  line-height: var(--pp-lh-body);
  color: var(--pp-muted);
}
.site-popup__text > * + * { margin-top: var(--pp-sp-5); }

.site-popup__text h2,
.site-popup__text h3,
.site-popup__text h4,
.site-popup__text h5,
.site-popup__text h6 { color: var(--pp-blue-ink); }
.site-popup__text h2 { font-size: var(--pp-fs-h3); }
.site-popup__text h3 { font-size: var(--pp-fs-h4); }
.site-popup__text h4,
.site-popup__text h5,
.site-popup__text h6 { font-size: var(--pp-fs-body); font-weight: var(--pp-fw-semibold); }
.site-popup__text > * + :is(h2, h3, h4) { margin-top: var(--pp-sp-6); }
.site-popup__text :is(h2, h3, h4, h5, h6) + * { margin-top: var(--pp-sp-3); }

.site-popup__text a {
  color: var(--pp-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.site-popup__text a:hover { color: var(--pp-blue-hover); }
.site-popup__text strong { color: var(--pp-ink); font-weight: var(--pp-fw-semibold); }
.site-popup__text em { font-style: italic; }

.site-popup__text ul,
.site-popup__text ol {
  display: grid;
  gap: var(--pp-sp-2);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-left: 1.25em;
  text-align: left;
}
.site-popup__text ul { list-style: disc; }
.site-popup__text ol { list-style: decimal; }
.site-popup__text li > ul,
.site-popup__text li > ol { margin-top: var(--pp-sp-2); }

.site-popup__text blockquote {
  margin-inline: auto;
  padding-left: var(--pp-sp-4);
  border-left: 3px solid var(--pp-blue);
  text-align: left;
  color: var(--pp-ink);
  font-style: italic;
}

.site-popup__text img { max-width: 100%; height: auto; border-radius: var(--pp-radius); }
.site-popup__text figure { margin-inline: auto; }
.site-popup__text figcaption { margin-top: var(--pp-sp-2); font-size: var(--pp-fs-small); color: var(--pp-muted); }
.site-popup__text hr { border: 0; border-top: 1px solid var(--pp-line); }

.site-popup__text table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pp-fs-small);
  text-align: left;
}
.site-popup__text :is(th, td) { padding: var(--pp-sp-3); border-bottom: 1px solid var(--pp-line); }

.site-popup__text code {
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-blue-50);
  color: var(--pp-blue-ink);
}
.site-popup__text pre {
  overflow-x: auto;
  padding: var(--pp-sp-4);
  border-radius: var(--pp-radius);
  background: var(--pp-blue-50);
  text-align: left;
}
.site-popup__text pre code { padding: 0; background: none; }

.site-popup__close {
  position: absolute;
  top: var(--pp-sp-4);
  right: var(--pp-sp-4);
  /* Explicit z-index so the button always composites above the scrolling body —
     an auto-z positioned element can end up beneath a promoted scroll layer. */
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-white);
  color: var(--pp-ink);
  box-shadow: var(--pp-shadow-sm);
  cursor: pointer;
  /* Skip the double-tap-zoom wait so the tap registers immediately on iOS. */
  touch-action: manipulation;
  transition: transform 0.15s ease, color 0.15s ease;
}
.site-popup__close:hover { color: var(--pp-blue); transform: scale(1.06); }
/* The icon must never be the event target, or delegation has to walk up out of
   the SVG tree to find the button. */
.site-popup__close svg { width: 18px; height: 18px; pointer-events: none; }

/* ---- Mobile: bottom sheet ---------------------------------------------- */
/* Anchored to the bottom of the viewport rather than centred: it's within thumb
   reach, and capping the height at 82dvh keeps the page visible behind it so the
   popup reads as a layer rather than a full takeover. */
@media (max-width: 600px) {
  .site-popup {
    align-items: flex-end;
    padding: 0;
  }

  .site-popup__dialog {
    width: 100%;
    max-height: 82vh;
    max-height: 82dvh;
    /* Only the top corners are rounded — the sheet is flush with the bottom. */
    border-radius: var(--pp-radius-xl) var(--pp-radius-xl) 0 0;
    border-bottom: 0;
    /* Slide up from the bottom instead of the centred scale-in. */
    transform: translateY(100%);
  }
  .site-popup.is-open .site-popup__dialog { transform: none; }

  .site-popup__body {
    padding: var(--pp-sp-7) var(--pp-sp-5) var(--pp-sp-6);
    /* Clear the iOS home indicator on gesture-nav devices. */
    padding-bottom: max(var(--pp-sp-6), env(safe-area-inset-bottom) + var(--pp-sp-4));
  }

  .site-popup__close {
    top: var(--pp-sp-3);
    right: var(--pp-sp-3);
    width: 36px;
    height: 36px;
  }

  .site-popup__title { margin-bottom: var(--pp-sp-4); }
  .site-popup__text > * + * { margin-top: var(--pp-sp-4); }
}

/* Short screens (landscape phones, small devices): trade padding for content
   room so the close button and a usable scroll area both stay on screen. */
@media (max-width: 600px) and (max-height: 620px) {
  .site-popup__dialog { max-height: 92dvh; }
  .site-popup__body { padding-top: var(--pp-sp-6); }
  .site-popup__title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-popup__overlay,
  .site-popup__dialog { transition: none; }
}