/*
 * SEO Packages.
 *
 * Three metals on ivory. Silver, Gold and Platinum are treated as real foils
 * — brushed multi-stop gradients with a sheen that sweeps once when a tier is
 * chosen — laid on the warm cream ground the supplied hero artwork already
 * carries. Ink type, hairline rules, brand blue reserved for actions, and one
 * interactive comparison matrix at the centre of the page: choosing a tier
 * focuses its column, and on a phone it is the only column shown.
 *
 * Everything is scoped under .pk-page. landing.css still loads (the button
 * set and the shared FAQ accordion), so a few rules exist to unpick a shared
 * default — each says so.
 *
 * Motion contract (the HVAC/AIO one): [data-reveal] gets .is-in from
 * seo-packages.js on first intersection and each child staggers off its own
 * --i; the reveal is an ANIMATION with backwards fill, never a transition, so
 * it cannot replace a component's own hover transition. Hero elements carry
 * .pk-rise and animate on load. Hiding is gated on .pk-js, added by the
 * script at parse time — no script, nothing hidden, and no column hidden on a
 * phone either. Everything collapses to "visible, still" under
 * prefers-reduced-motion at the foot of this file.
 *
 * Order: tokens, foils, type, buttons, motion, hero (a centred stack: copy
 * above, art below), trust, saving (dials),
 * matrix, pricing band, industries, audit plate, responsive, reduced
 * motion. (The FAQ is the shared component, unrestyled.)
 */
.pk-page {
  --pk-ink: #0d1526;
  --pk-ink-2: #1a2438;
  --pk-muted: #5c6779;
  --pk-muted-2: #8791a3;

  --pk-cream: #fdf7f0;
  --pk-cream-2: #f7eee2;
  --pk-line: rgba(13, 21, 38, 0.1);
  --pk-line-2: rgba(13, 21, 38, 0.06);
  --pk-line-light: rgba(255, 255, 255, 0.16);

  --pk-blue: #1668ff;
  --pk-blue-dark: #0b4ed1;

  /* The three foils. Each is a brushed metal: light edge, body, highlight,
     body again — four stops, because two stops read as plastic. */
  --pk-silver: linear-gradient(
    135deg,
    #ffffff 0%,
    #dde4ee 24%,
    #b4c0d1 48%,
    #f2f5f9 68%,
    #c6d0dd 100%
  );
  --pk-gold: linear-gradient(
    135deg,
    #fff4d4 0%,
    #edc264 24%,
    #c4881d 48%,
    #ffeab3 68%,
    #d8a53a 100%
  );
  --pk-platinum: linear-gradient(
    135deg,
    #ffffff 0%,
    #d9e5f6 24%,
    #a2b8d6 48%,
    #f1f6fd 68%,
    #bccfe8 100%
  );

  --pk-silver-ink: #6f7f95;
  --pk-gold-ink: #a8761a;
  --pk-platinum-ink: #4f74a8;

  --pk-num: "Poppins", var(--heading-font);
  --pk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pk-sec-y: clamp(64px, 8vw, 118px);
  --pk-top: clamp(96px, 9vw, 124px); /* the theme's header-clearing offset */
  --pk-radius: 26px;

  background: #fff;
  color: var(--pk-ink);
  overflow-x: clip; /* the hero wave and the band art overhang; never scroll for them */
}

/* Per-tier variables, set on any element that carries a metal class. Every
   foil rule below reads --pk-metal / --pk-metal-ink, so a tier is one class. */
.pk-page .pk-m-silver {
  --pk-metal: var(--pk-silver);
  --pk-metal-ink: var(--pk-silver-ink);
}

.pk-page .pk-m-gold {
  --pk-metal: var(--pk-gold);
  --pk-metal-ink: var(--pk-gold-ink);
}

.pk-page .pk-m-platinum {
  --pk-metal: var(--pk-platinum);
  --pk-metal-ink: var(--pk-platinum-ink);
}

.pk-sec {
  position: relative;
  padding-block: var(--pk-sec-y);
}

.pk-cream {
  background: var(--pk-cream);
}

/* ---------- Type ---------- */
.pk-page .pk-h2 {
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

.pk-page .pk-h3 {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0;
}

.pk-h2-center,
.pk-lead-center {
  text-align: center;
}

.pk-h2-light,
.pk-h3-light {
  color: #fff;
}

.pk-page .pk-lead {
  color: var(--pk-muted);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  margin: 18px 0 0;
}

/* Page-scoped on purpose: `.pk-page .pk-lead` above sets the `margin`
   shorthand, so an unscoped `.pk-lead-center` loses its auto inline margins
   and every centred lead sits flush left in its head. */
.pk-page .pk-lead-center {
  max-width: var(--lead-w);
  margin-inline: auto;
}

.pk-page .pk-head-center {
  max-width: var(--head-w);
  margin-inline: auto;
}

/* The headline's foil words. Clipping a gradient to text needs saturated mid
   stops or the metal turns to mud between them. */
.pk-page .pk-foil {
  background: linear-gradient(
    100deg,
    #c4881d 0%,
    #edc264 22%,
    #8fa0b5 46%,
    #4f74a8 62%,
    #edc264 86%,
    #c4881d 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: pk-foil-drift 9s var(--pk-ease) infinite alternate;
}

@keyframes pk-foil-drift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* ---------- Buttons ---------- */
/* landing.css owns .btn-strategy; these only re-tint it for this page.
   style.css:2466 gives the disc a BLACK background and the arrow a white
   fill — invisible on an ink pill — so every pill here states both the disc
   colour and the arrow fill, at rest AND on hover (the shared :hover rule
   repaints both, so leaving either out puts the button back to black-on-black
   or white-on-white halfway through the transition). */
.pk-page .pk-btn {
  background: var(--pk-ink);
  border-color: var(--pk-ink);
  color: #fff;
}

.pk-page .pk-btn .icon-circle {
  background-color: #fff;
}

.pk-page .pk-btn .icon-circle svg path {
  fill: var(--pk-ink);
}

.pk-page .pk-btn:hover {
  background: var(--pk-blue);
  border-color: var(--pk-blue);
  box-shadow: 0 10px 26px rgba(22, 104, 255, 0.28);
}

.pk-page .pk-btn:hover .icon-circle {
  background-color: #fff;
}

.pk-page .pk-btn:hover .icon-circle svg path {
  fill: var(--pk-blue);
}

/* The light pill inverts it: dark disc on white, and the disc stays dark on
   hover — a white disc on the hover ground would disappear. */
.pk-page .pk-btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--pk-ink);
}

.pk-page .pk-btn-light .icon-circle,
.pk-page .pk-btn-light:hover .icon-circle {
  background-color: var(--pk-ink);
}

.pk-page .pk-btn-light .icon-circle svg path,
.pk-page .pk-btn-light:hover .icon-circle svg path {
  fill: #fff;
}

.pk-page .pk-btn-light:hover {
  background: var(--pk-cream);
  border-color: var(--pk-cream);
  color: var(--pk-ink);
  box-shadow: 0 10px 26px rgba(13, 21, 38, 0.24);
}

/* ---------- Motion ---------- */
.pk-js [data-reveal] > *,
.pk-js [data-reveal] > ol:not([aria-hidden="true"]) > li,
.pk-js [data-reveal] > ul:not([aria-hidden="true"]) > li {
  opacity: 0;
}

/* Decorative children are never hidden by the reveal — they carry their own
   ambient motion and have no --i of their own. The same goes for their list
   items: the per-li reveal rule sets `animation`, which silently replaced the
   marks' float on the closing CTA until the :not() was added above. */
.pk-js [data-reveal] > [aria-hidden="true"] {
  opacity: 1;
}

/* opacity: 1 is set here, not left to the animation: the fill is `backwards`,
   so once it finishes the element falls back to its own style — which is the
   opacity: 0 above. */
.pk-js [data-reveal].is-in > *,
.pk-js [data-reveal].is-in > ol:not([aria-hidden="true"]) > li,
.pk-js [data-reveal].is-in > ul:not([aria-hidden="true"]) > li {
  opacity: 1;
  animation: pk-in 0.72s var(--pk-ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes pk-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pk-js .pk-rise {
  animation: pk-in 0.9s var(--pk-ease) backwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

/* ---------- Hero ---------- */
.pk-hero {
  position: relative;
  padding-top: calc(var(--pk-top) + 18px);
  padding-bottom: clamp(44px, 5.5vw, 86px);
  background: linear-gradient(180deg, var(--pk-cream) 0%, #fff 92%);
  overflow: clip;
}

.pk-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 20%;
  opacity: 0.9;
  pointer-events: none;
}

.pk-hero-glow {
  position: absolute;
  top: -12%;
  right: -6%;
  width: min(760px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(237, 194, 100, 0.26) 0%,
    rgba(22, 104, 255, 0.08) 46%,
    transparent 70%
  );
  filter: blur(6px);
  pointer-events: none;
  animation: pk-breathe 11s ease-in-out infinite alternate;
}

@keyframes pk-breathe {
  from {
    transform: scale(1);
    opacity: 0.85;
  }
  to {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* One centred column: copy above, the art below it. */
.pk-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(26px, 3.4vw, 48px);
}

.pk-hero-copy {
  max-width: 920px;
}

.pk-page .pk-hero-title {
  font-family: var(--heading-font);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.pk-page .pk-hero-text {
  color: var(--pk-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.75;
  max-width: 68ch;
  margin: 22px auto 0;
}

.pk-hero-actions {
  margin-top: 30px;
}

.pk-hero-art {
  position: relative;
  width: 100%;
  /* The art is a wide 1672x500 banner (the replacement is cropped tight, with
     no transparent margin of its own), so it runs nearly the full column. */
  max-width: 1120px;
  /* initTilt publishes pixels as --tx/--ty; .pk-rise owns transform, so the
     drift uses the translate property instead of stacking a transform. */
  translate: var(--tx, 0px) var(--ty, 0px);
  transition: translate 0.5s var(--pk-ease);
  animation: pk-float 7s ease-in-out infinite alternate;
}

.pk-hero-art img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(13, 21, 38, 0.18));
}

@keyframes pk-float {
  from {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(10px);
  }
}

.pk-hero-pool {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 62%;
  height: 40px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(13, 21, 38, 0.2) 0%,
    transparent 70%
  );
  filter: blur(10px);
  animation: pk-pool 7s ease-in-out infinite alternate;
}

@keyframes pk-pool {
  from {
    opacity: 0.75;
    width: 58%;
  }
  to {
    opacity: 0.5;
    width: 66%;
  }
}

/* ---------- Trust bar ---------- */
.pk-trust {
  position: relative;
  padding-block: clamp(22px, 3vw, 38px);
  background: #fff;
  border-block: 1px solid var(--pk-line-2);
}

.pk-trust-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pk-trust-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  text-align: center;
  border-left: 1px solid var(--pk-line-2);
  transition: transform 0.45s var(--pk-ease);
}

.pk-trust-cell:first-child {
  border-left: 0;
}

.pk-trust-cell:hover {
  transform: translateY(-4px);
}

.pk-trust-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}

/* The supplied icons are dark line art on transparent; they sit muted until
   the cell is hovered, which brings them to full ink. */
.pk-trust-ico img {
  width: 100%;
  height: auto;
  opacity: 0.42;
  transition: opacity 0.45s var(--pk-ease), transform 0.45s var(--pk-ease);
}

.pk-trust-cell:hover .pk-trust-ico img {
  opacity: 1;
  transform: scale(1.06);
}

.pk-trust-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--pk-muted);
  transition: color 0.45s var(--pk-ease);
}

.pk-trust-cell:hover .pk-trust-label {
  color: var(--pk-ink);
}

/* ---------- Cost-saving section ---------- */
/* Centred head, then the artwork in a foil-edged frame beside the four
   factors as a 2x2 of tiles, then one centred CTA. The first version stacked
   all of it in one left column: it ran a screen and a half past the artwork
   next to it, and the hairline rail behind the four numbers read as broken
   segments rather than a scale. */
.pk-saving {
  background: linear-gradient(180deg, #fff 0%, var(--pk-cream) 100%);
}

.pk-saving-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(26px, 3.6vw, 60px);
  margin-top: clamp(30px, 3.6vw, 52px);
}

/* The artwork sits on a glass plate rather than a white card or the tilted
   plate before it: translucent, blurred, with a foil hairline. The halo
   behind it is what makes the glass legible as glass — over a flat cream
   section a blur has nothing to pick up.

   Safe here because this page's reveal animations fill BACKWARDS: a filled
   opacity animation on an ancestor makes it a backdrop root and starves
   backdrop-filter (the front page's .flow-thumb bug, 2026-09-18). */
.pk-saving-art {
  position: relative;
  padding: clamp(14px, 1.3vw, 22px);
  border-radius: calc(var(--pk-radius) + 4px);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 30px 66px rgba(13, 21, 38, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  /* The halo belongs to the plate: clipped to its rounded rectangle, never
     spilling onto the section behind it. */
  overflow: hidden;
}

/* No backdrop-filter (older Firefox, some in-app browsers): a plain frosted
   tint, still not flat white. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pk-saving-art {
    background: rgba(255, 255, 255, 0.82);
  }
}

/* Three metal lights behind the glass, drifting slowly, and sliding gently
   AGAINST the pointer so the plate has depth. */
.pk-saving-halo {
  position: absolute;
  inset: -18% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
      42% 52% at 18% 26%,
      rgba(162, 184, 214, 0.55) 0%,
      transparent 70%
    ),
    radial-gradient(
      46% 56% at 82% 30%,
      rgba(237, 194, 100, 0.45) 0%,
      transparent 72%
    ),
    radial-gradient(
      54% 60% at 50% 88%,
      rgba(22, 104, 255, 0.22) 0%,
      transparent 74%
    );
  filter: blur(6px);
  /* The slow drift owns `transform`, so the pointer response uses the
     `translate` property — the two compose instead of overwriting. */
  translate: calc(var(--tx, 0px) * -0.85) calc(var(--ty, 0px) * -0.85);
  transition: translate 0.6s var(--pk-ease);
  animation: pk-halo-drift 15s var(--pk-ease) infinite alternate;
}

@keyframes pk-halo-drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 2%, 0) scale(1.06);
  }
}

.pk-saving-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    130deg,
    rgba(162, 184, 214, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 34%,
    rgba(237, 194, 100, 0.75) 68%,
    rgba(162, 184, 214, 0.85) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.pk-saving-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pk-radius);
  /* initTilt publishes the pointer as --tx/--ty in pixels; the artwork takes
     more of that travel than the plate itself, so it reads as the picture
     moving inside the glass. */
  translate: calc(var(--tx, 0px) * 2.2) calc(var(--ty, 0px) * 2.2);
  transition: translate 0.45s var(--pk-ease), scale 0.6s var(--pk-ease);
}

.pk-saving-art:hover img {
  scale: 1.035;
}

.pk-saving-kicker {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pk-muted-2);
}

.pk-dials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pk-dial {
  position: relative;
  padding: 20px 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--pk-line-2);
  background: #fff;
  overflow: hidden;
  transition: transform 0.45s var(--pk-ease), box-shadow 0.45s var(--pk-ease),
    border-color 0.45s var(--pk-ease);
}

/* Each tile carries its own foil as a top edge that widens on hover. */
.pk-dial::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pk-metal);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform 0.55s var(--pk-ease);
}

.pk-dial:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(13, 21, 38, 0.12);
}

.pk-dial:hover::before {
  transform: scaleX(1);
}

.pk-dial-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--pk-num);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pk-metal-ink);
}

.pk-dial-title {
  display: block;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.pk-dial-text {
  display: block;
  margin-top: 6px;
  color: var(--pk-muted);
  font-size: 14px;
  line-height: 1.65;
}

.pk-saving-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 46px);
}

/* ---------- The matrix ---------- */
.pk-plans {
  background: var(--pk-cream);
}

.pk-matrix {
  margin-top: clamp(28px, 3.4vw, 46px);
}

.pk-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}

.pk-switch-hint {
  font-size: 13px;
  color: var(--pk-muted-2);
}

.pk-switch-set {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--pk-line-2);
  box-shadow: inset 0 1px 0 #fff;
}

.pk-switch-btn {
  position: relative;
  appearance: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 22px;
  background: transparent;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pk-muted);
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s var(--pk-ease);
}

.pk-switch-foil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pk-metal);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s var(--pk-ease), transform 0.4s var(--pk-ease);
}

.pk-switch-label {
  position: relative;
}

.pk-switch-btn:hover {
  color: var(--pk-ink);
}

.pk-switch-btn[aria-selected="true"] {
  color: #10192c;
}

.pk-switch-btn[aria-selected="true"] .pk-switch-foil {
  opacity: 1;
  transform: none;
}

.pk-table-wrap {
  border-radius: var(--pk-radius);
  border: 1px solid var(--pk-line-2);
  background: #fff;
  box-shadow: 0 30px 70px rgba(13, 21, 38, 0.08);
  /* clip, never auto/hidden: a scroll container on EITHER axis makes itself
     the scrollport the sticky heads resolve against, and a wrapper that never
     scrolls vertically means a head that never sticks. `clip` still rounds
     the table's corners off the radius. */
  overflow: clip;
}

.pk-table {
  width: 100%;
  /* No min-width: the table always fits its wrapper (table-layout is fixed,
     so cells wrap instead), which is what lets the wrapper clip rather than
     scroll — see .pk-table-wrap. */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pk-table col.pk-col-first {
  width: 24%;
}

/* ---- heads ---- */
.pk-page .pk-th,
.pk-page .pk-th-label {
  position: sticky;
  top: var(--pk-top);
  z-index: 3;
  padding: 20px 18px;
  text-align: left;
  vertical-align: bottom;
  background: #fff;
  border-bottom: 1px solid var(--pk-line);
}

.pk-page .pk-th-label {
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pk-muted-2);
  border-right: 1px solid var(--pk-line-2);
}

.pk-page .pk-th {
  overflow: hidden;
  transition: background-color 0.45s var(--pk-ease);
}

/* The foil sits behind the head, dimmed until its column is focused. */
.pk-th-foil {
  position: absolute;
  inset: 0;
  background: var(--pk-metal);
  opacity: 0.16;
  transition: opacity 0.5s var(--pk-ease);
}

/* The sheen: a single band of light that crosses the foil once, when the
   tier is chosen (.is-sweep, added by the script for one animation). */
.pk-th-foil::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 34%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.82) 50%,
    transparent 100%
  );
  transform: translateX(-140%) skewX(-14deg);
  opacity: 0;
}

.pk-th.is-sweep .pk-th-foil::after {
  animation: pk-sweep 0.95s var(--pk-ease);
}

@keyframes pk-sweep {
  from {
    transform: translateX(-140%) skewX(-14deg);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    transform: translateX(420%) skewX(-14deg);
    opacity: 0;
  }
}

.pk-th-flag,
.pk-th-name,
.pk-th-note {
  position: relative;
  display: block;
}

.pk-th-flag {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pk-metal-ink);
}

.pk-th-name {
  font-family: var(--heading-font);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pk-ink);
}

.pk-th-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--pk-muted-2);
}

/* ---- body ---- */
.pk-page .pk-row-label {
  padding: 16px 18px;
  text-align: left;
  vertical-align: middle;
  font-family: var(--heading-font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pk-ink);
  background: #fff;
  border-top: 1px solid var(--pk-line-2);
  border-right: 1px solid var(--pk-line-2);
}

.pk-row-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--pk-line);
  vertical-align: middle;
  transition: background-color 0.35s var(--pk-ease),
    box-shadow 0.35s var(--pk-ease);
}

.pk-table tbody tr:hover .pk-row-dot {
  background: var(--pk-blue);
  box-shadow: 0 0 0 3px rgba(22, 104, 255, 0.14);
}

.pk-page .pk-cell {
  position: relative;
  padding: 16px 18px;
  vertical-align: middle;
  border-top: 1px solid var(--pk-line-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pk-muted);
  transition: background-color 0.45s var(--pk-ease), color 0.45s var(--pk-ease);
}

.pk-table tbody tr:hover .pk-cell,
.pk-table tbody tr:hover .pk-row-label {
  background-color: rgba(253, 247, 240, 0.85);
}

.pk-cell-tick {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(13, 21, 38, 0.05);
  color: var(--pk-muted-2);
  vertical-align: -4px;
  transition: background-color 0.45s var(--pk-ease), color 0.45s var(--pk-ease);
}

.pk-cell-none {
  color: var(--pk-muted-2);
  font-style: italic;
  opacity: 0.8;
}

/* ---- focus: the chosen column, or the one under the pointer ---- */
.pk-matrix[data-tier="silver"] [data-col="silver"],
.pk-matrix[data-tier="gold"] [data-col="gold"],
.pk-matrix[data-tier="platinum"] [data-col="platinum"],
.pk-matrix[data-hover="silver"] [data-col="silver"],
.pk-matrix[data-hover="gold"] [data-col="gold"],
.pk-matrix[data-hover="platinum"] [data-col="platinum"] {
  background-color: rgba(255, 255, 255, 0.96);
  color: var(--pk-ink);
  box-shadow: inset 1px 0 0 rgba(13, 21, 38, 0.06),
    inset -1px 0 0 rgba(13, 21, 38, 0.06);
}

.pk-matrix[data-tier="silver"] .pk-th[data-col="silver"] .pk-th-foil,
.pk-matrix[data-tier="gold"] .pk-th[data-col="gold"] .pk-th-foil,
.pk-matrix[data-tier="platinum"] .pk-th[data-col="platinum"] .pk-th-foil,
.pk-matrix[data-hover="silver"] .pk-th[data-col="silver"] .pk-th-foil,
.pk-matrix[data-hover="gold"] .pk-th[data-col="gold"] .pk-th-foil,
.pk-matrix[data-hover="platinum"] .pk-th[data-col="platinum"] .pk-th-foil {
  opacity: 1;
}

.pk-matrix[data-tier="silver"] .pk-th[data-col="silver"] .pk-th-note,
.pk-matrix[data-tier="gold"] .pk-th[data-col="gold"] .pk-th-note,
.pk-matrix[data-tier="platinum"] .pk-th[data-col="platinum"] .pk-th-note,
.pk-matrix[data-hover="silver"] .pk-th[data-col="silver"] .pk-th-note,
.pk-matrix[data-hover="gold"] .pk-th[data-col="gold"] .pk-th-note,
.pk-matrix[data-hover="platinum"] .pk-th[data-col="platinum"] .pk-th-note,
.pk-matrix[data-tier="silver"] .pk-th[data-col="silver"] .pk-th-flag,
.pk-matrix[data-tier="gold"] .pk-th[data-col="gold"] .pk-th-flag,
.pk-matrix[data-tier="platinum"] .pk-th[data-col="platinum"] .pk-th-flag,
.pk-matrix[data-hover="silver"] .pk-th[data-col="silver"] .pk-th-flag,
.pk-matrix[data-hover="gold"] .pk-th[data-col="gold"] .pk-th-flag,
.pk-matrix[data-hover="platinum"] .pk-th[data-col="platinum"] .pk-th-flag {
  /* On a lit foil the muted greys disappear; both drop to ink. */
  color: rgba(16, 25, 44, 0.78);
}

.pk-matrix[data-tier="silver"] .pk-cell[data-col="silver"] .pk-cell-tick,
.pk-matrix[data-tier="gold"] .pk-cell[data-col="gold"] .pk-cell-tick,
.pk-matrix[data-tier="platinum"] .pk-cell[data-col="platinum"] .pk-cell-tick,
.pk-matrix[data-hover="silver"] .pk-cell[data-col="silver"] .pk-cell-tick,
.pk-matrix[data-hover="gold"] .pk-cell[data-col="gold"] .pk-cell-tick,
.pk-matrix[data-hover="platinum"] .pk-cell[data-col="platinum"] .pk-cell-tick {
  background: var(--pk-metal);
  color: #10192c;
}

/* ---- foot: the three buttons ---- */
.pk-page .pk-cell-foot,
.pk-page .pk-row-label-foot {
  padding: 22px 18px;
  border-top: 1px solid var(--pk-line);
  background-color: rgba(253, 247, 240, 0.55);
}

.pk-get {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pk-line);
  background: #fff;
  color: var(--pk-ink);
  font-family: var(--heading-font);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s var(--pk-ease), box-shadow 0.4s var(--pk-ease),
    border-color 0.4s var(--pk-ease), color 0.4s var(--pk-ease);
}

.pk-get-foil {
  position: absolute;
  inset: 0;
  background: var(--pk-metal);
  opacity: 0;
  transition: opacity 0.4s var(--pk-ease);
}

.pk-get-label,
.pk-get-arrow {
  position: relative;
}

.pk-get-arrow {
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--pk-ease);
}

.pk-get:hover,
.pk-get:focus-visible {
  transform: translateY(-2px);
  border-color: transparent;
  color: #10192c;
  box-shadow: 0 14px 30px rgba(13, 21, 38, 0.16);
}

.pk-get:hover .pk-get-foil,
.pk-get:focus-visible .pk-get-foil {
  opacity: 1;
}

.pk-get:hover .pk-get-arrow {
  transform: translateX(3px);
}

/* ---------- Pricing band ---------- */
/* A LIGHT plate, because the artwork is: a wide desk banner with its subjects
   at the two edges and an empty middle. The copy sits in that middle, over a
   cream veil that lifts it off the photograph; the foil hairline keeps the
   page's edge language. */
.pk-custom {
  background: var(--pk-cream);
}

.pk-custom-plate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 34vw, 480px);
  padding: clamp(40px, 5vw, 78px) clamp(24px, 4vw, 72px);
  border-radius: calc(var(--pk-radius) + 8px);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(13, 21, 38, 0.14);
}

/* A still foil hairline — the audit plate's edge turns, this one holds. */
.pk-custom-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    rgba(196, 136, 29, 0.85) 0%,
    rgba(255, 255, 255, 0.5) 28%,
    rgba(162, 184, 214, 0.75) 56%,
    rgba(237, 194, 100, 0.9) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.pk-custom-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pk-band-bg {
  position: absolute;
  inset: -8% 0 -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  /* initParallax publishes pixels as --py. */
  translate: 0 var(--py, 0px);
}

/* The veil is strongest through the middle, where the copy sits, and clears
   at the two edges so the charts and the laptop stay in the picture. */
.pk-custom-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      68% 86% at 50% 50%,
      rgba(255, 252, 247, 0.96) 0%,
      rgba(255, 252, 247, 0.88) 42%,
      rgba(255, 252, 247, 0.32) 76%,
      rgba(255, 252, 247, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(253, 247, 240, 0.35) 0%,
      rgba(253, 247, 240, 0) 38%
    );
}

.pk-custom-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}

.pk-band-text {
  color: var(--pk-muted);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  margin: 18px 0 0;
}

.pk-band-text-strong {
  color: var(--pk-ink-2);
  font-weight: 600;
}

.pk-band-actions {
  margin-top: 30px;
}

/* ---------- Industries ---------- */
/* A masonry mosaic. A grid, NOT CSS columns: a column box fills
   top-to-bottom, so the cards read 01-02-03-04 down the first column instead
   of across the row. The tiling is row spans measured by seo-packages.js
   (`.is-masonry`); without the script it stays an ordinary grid — same order,
   just an even row rhythm. Five frame ratios keep the columns from lining up.
   Copy is always open; the picture is muted until the pointer arrives. */
.pk-industries {
  background: linear-gradient(180deg, #fff 0%, var(--pk-cream) 100%);
}

.pk-mosaic {
  --pk-gutter: clamp(16px, 1.6vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--pk-gutter);
  margin-top: clamp(28px, 3.4vw, 46px);
}

/* Measured mode: rows become a fine unit and each card spans as many as its
   own height needs, so the columns tile with no gaps. `align-items: start`
   stays — a stretched card would grow into its own gutter row. */
.pk-mosaic.is-masonry {
  grid-auto-rows: 8px;
  row-gap: 0;
}

.pk-tile {
  position: relative;
  display: block;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13, 21, 38, 0.08);
  overflow: hidden;
  transition: transform 0.5s var(--pk-ease), box-shadow 0.5s var(--pk-ease);
}

.pk-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(13, 21, 38, 0.16);
}

/* The metal edge, drawn as a masked border so it can light on hover without
   moving the card a pixel. */
.pk-tile-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: var(--pk-metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--pk-ease);
  pointer-events: none;
}

.pk-tile:hover .pk-tile-edge {
  opacity: 1;
}

/* ---- the picture ---- */
.pk-tile-shot {
  position: relative;
  overflow: hidden;
  background: var(--pk-ink);
}

.pk-tile-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.02);
  transition: transform 0.9s var(--pk-ease), filter 0.6s var(--pk-ease);
}

.pk-tile:hover .pk-tile-shot img {
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1);
}

/* Five frames on a cycle of five, against three columns — the two counts
   share no factor, so the pattern never repeats down a column. */
.pk-f-tall .pk-tile-shot {
  aspect-ratio: 3 / 4;
}

.pk-f-short .pk-tile-shot {
  aspect-ratio: 16 / 10;
}

.pk-f-portrait .pk-tile-shot {
  aspect-ratio: 4 / 5;
}

.pk-f-wide .pk-tile-shot {
  aspect-ratio: 3 / 2;
}

.pk-f-square .pk-tile-shot {
  aspect-ratio: 1 / 1;
}

/* One band of light crossing the picture as the pointer arrives. */
.pk-tile-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 34%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-14deg);
  opacity: 0;
  pointer-events: none;
}

.pk-tile:hover .pk-tile-sheen {
  animation: pk-tile-sweep 0.9s var(--pk-ease);
}

@keyframes pk-tile-sweep {
  from {
    transform: translateX(-160%) skewX(-14deg);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    transform: translateX(460%) skewX(-14deg);
    opacity: 0;
  }
}

.pk-tile-num {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding-inline: 9px;
  border-radius: var(--r-pill);
  background: var(--pk-metal);
  font-family: var(--pk-num);
  font-size: 11.5px;
  font-weight: 700;
  color: #10192c;
  box-shadow: 0 6px 14px rgba(13, 21, 38, 0.2);
  translate: 0 -4px;
  opacity: 0;
  transition: opacity 0.45s var(--pk-ease), translate 0.45s var(--pk-ease);
}

.pk-tile:hover .pk-tile-num {
  opacity: 1;
  translate: 0 0;
}

/* ---- the copy ---- */
.pk-tile-body {
  position: relative;
  padding: 18px 18px 20px;
}

.pk-page .pk-tile-body .pk-h3 {
  font-size: 17px;
}

.pk-tile-text {
  margin: 8px 0 0;
  color: var(--pk-muted);
  font-size: 14px;
  line-height: 1.68;
}

/* ---------- Audit plate ---------- */
.pk-audit {
  background: var(--pk-cream);
}

/* The plate runs all three metals across itself, left to right in the
   matrix's own order - silver, gold, platinum - kept pale enough to carry ink
   type, and drifting slowly so the metal reads as a surface rather than a
   printed gradient. The white veil under the copy is what keeps the contrast
   honest over the gold. */
.pk-audit-plate {
  position: relative;
  padding: clamp(36px, 5vw, 76px) clamp(28px, 5vw, 80px);
  border-radius: calc(var(--pk-radius) + 6px);
  background-color: #fff;
  background-image: linear-gradient(
    var(--pk-plate-angle, 108deg),
    #fbfcfe 0%,
    #dfe7f1 10%,
    #c3cfdf 22%,
    #eef2f7 32%,
    #f9e9bd 44%,
    #e9cd85 52%,
    #fbf1d6 60%,
    #e4edf9 74%,
    #bdd0ea 88%,
    #f2f7fd 100%
  );
  /* Barely wider than the plate, so all three metals stay on screen in the
     matrix's order while the surface still breathes. Oversizing it (190%)
     pushed silver off the left edge and the band read gold-to-blue. */
  background-size: 124% 100%;
  background-position: 0% 50%;
  box-shadow: 0 34px 80px rgba(13, 21, 38, 0.16);
  overflow: hidden;
  animation: pk-plate-drift 18s var(--pk-ease) infinite alternate;
}

@keyframes pk-plate-drift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* A soft light pooled behind the copy: the gold band in the middle of the
   plate is the one place ink type would otherwise lose contrast. */
.pk-audit-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62% 80% at 50% 50%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.56) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

/* One sheen crossing the plate, on the same clock as the edge. */
.pk-audit-plate::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 26%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  animation: pk-plate-sheen 9s var(--pk-ease) infinite;
}

@keyframes pk-plate-sheen {
  0%,
  62% {
    transform: translateX(0) skewX(-12deg);
    opacity: 0;
  }
  68% {
    opacity: 1;
  }
  100% {
    transform: translateX(520%) skewX(-12deg);
    opacity: 0;
  }
}

/* The plate's edge: a slow conic foil, the page's one ambient loop. */
.pk-audit-foil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 0deg,
    #edc264,
    #f4ead7,
    #a2b8d6,
    #c4881d,
    #edc264
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pk-turn 14s linear infinite;
}

@keyframes pk-turn {
  to {
    rotate: 1turn;
  }
}

/* The owner's four marks, floating in the flanks the centred copy leaves
   empty. They are colour 3D artwork, so they sit on the plate bare — a foil
   plate behind them fought their own blues and yellows — with a soft light
   pooled underneath to lift them off the metal ramp. Decorative:
   aria-hidden in the markup, no labels. */
.pk-audit-icons {
  position: absolute;
  inset: clamp(20px, 2.6vw, 44px) clamp(18px, 2.4vw, 46px);
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.pk-audit-mark {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(62px, 6vw, 92px);
  aspect-ratio: 1;
  animation: pk-mark-float 7s var(--pk-ease) infinite alternate;
  animation-delay: calc(var(--i, 0) * 900ms);
}

/* The pool breathes with the bob, a beat behind it, so the mark reads as
   hovering over the plate rather than pasted onto it. */
.pk-audit-mark::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.34) 48%,
    rgba(255, 255, 255, 0) 74%
  );
  animation: pk-mark-pool 7s var(--pk-ease) infinite alternate;
  animation-delay: calc(var(--i, 0) * 900ms + 400ms);
}

/* The bob lives on the <li> (the `translate` property) and each mark's own
   character lives on the <img> (`transform`), so the two never overwrite
   each other and can run on different clocks. */
.pk-audit-mark img {
  position: relative;
  width: 100%;
  height: auto;
  transform-origin: 50% 60%;
  /* The artwork is saturated pop colour and shouted over the plate's pale
     metal ramp. Pulled back rather than repainted: saturation down, a little
     contrast out of the highlights, a touch of warmth from the sepia to sit
     the blues nearer the page's gold, and 8% transparency so the plate reads
     through them. The drop-shadow stays — it is what keeps them off the
     surface now that they are quieter. */
  filter: saturate(0.6) contrast(0.92) brightness(1.02) sepia(0.12)
    drop-shadow(0 12px 22px rgba(13, 21, 38, 0.18));
  opacity: 0.92;
}

/* 1 — the target: a slow pulse, like something being ranged in. */
.pk-audit-mark:nth-child(1) img {
  animation: pk-mark-pulse 4.6s var(--pk-ease) infinite;
}

/* 2 — the audit panel: a tilt, side to side. */
.pk-audit-mark:nth-child(2) img {
  animation: pk-mark-wobble 5.4s var(--pk-ease) infinite;
}

/* 3 — the growth chart: a sharper rock, leaning into the climb. */
.pk-audit-mark:nth-child(3) img {
  animation: pk-mark-rock 4.2s var(--pk-ease) infinite;
  animation-delay: 700ms;
}

/* 4 — the gear turns, because a gear turns. Slow enough not to pull the eye
   off the button. */
.pk-audit-mark:nth-child(4) img {
  animation: pk-mark-turn 22s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes pk-mark-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.08) rotate(-2deg);
  }
  64% {
    transform: scale(0.98) rotate(1deg);
  }
}

@keyframes pk-mark-wobble {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes pk-mark-rock {
  0%,
  100% {
    transform: rotate(4deg) translateY(0);
  }
  35% {
    transform: rotate(-6deg) translateY(-3px);
  }
  70% {
    transform: rotate(2deg) translateY(1px);
  }
}

@keyframes pk-mark-turn {
  to {
    transform: rotate(1turn);
  }
}

@keyframes pk-mark-pool {
  from {
    opacity: 0.75;
    scale: 0.92;
  }
  to {
    opacity: 1;
    scale: 1.06;
  }
}

/* Two down each flank, the lower pair pushed further in so the four read as
   a loose diagonal rather than a frame. */
.pk-audit-mark:nth-child(1) {
  top: 0;
  left: 1%;
  animation-duration: 6.2s;
}

.pk-audit-mark:nth-child(2) {
  top: 3%;
  right: 2%;
  animation-duration: 7.8s;
}

.pk-audit-mark:nth-child(3) {
  bottom: 1%;
  left: 2%;
  animation-duration: 5.6s;
}

.pk-audit-mark:nth-child(4) {
  bottom: 5%;
  right: 9%;
  animation-duration: 8.4s;
}

@keyframes pk-mark-float {
  from {
    translate: 0 -6px;
  }
  to {
    translate: 0 8px;
  }
}

.pk-audit-copy {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.pk-audit-actions {
  margin-top: 30px;
}

/* ---------- Body copy justification ---------- */
/* SEO Reseller precedent: long-form copy is justified, centred one-liners and
   labels are not. */
.pk-page .pk-ind-text,
.pk-page .pk-faq .faq-ans p {
  text-align: justify;
  hyphens: auto;
}

.pk-page .pk-lead-center,
.pk-page .pk-band-text,
.pk-page .pk-th-note,
.pk-page .pk-switch-hint {
  text-align: center;
  hyphens: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .pk-saving-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pk-saving-art {
    max-width: 680px;
    margin-inline: auto;
  }

  /* No flanks left to float in — the medallions sit above the heading. */
  .pk-audit-icons {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: clamp(22px, 4vw, 34px);
  }

  .pk-audit-mark {
    position: static;
    width: clamp(52px, 13vw, 68px);
  }

  .pk-saving-art {
    order: -1;
    max-width: 560px;
  }

  .pk-trust-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pk-trust-cell:nth-child(3n + 1) {
    border-left: 0;
  }

  .pk-trust-cell:nth-child(n + 4) {
    border-top: 1px solid var(--pk-line-2);
  }
}

/* Below this the three columns cannot be read side by side, so the matrix
   shows one at a time — the tab strip stops being a nicety and becomes the
   control. Gated on .pk-js: with no script, the table stays complete and
   scrolls sideways instead. */
@media (max-width: 860px) {
  /* One column at a time: the fixed layout's colgroup widths still count the
     hidden columns, so the table falls back to auto and the two visible cells
     share the full width. */
  .pk-js .pk-table {
    table-layout: auto;
  }

  .pk-js .pk-table col.pk-col-first,
  .pk-js .pk-table col.pk-col {
    width: auto;
  }

  .pk-js .pk-matrix[data-tier="silver"] [data-col="gold"],
  .pk-js .pk-matrix[data-tier="silver"] [data-col="platinum"],
  .pk-js .pk-matrix[data-tier="gold"] [data-col="silver"],
  .pk-js .pk-matrix[data-tier="gold"] [data-col="platinum"],
  .pk-js .pk-matrix[data-tier="platinum"] [data-col="silver"],
  .pk-js .pk-matrix[data-tier="platinum"] [data-col="gold"] {
    display: none;
  }

  .pk-switch {
    flex-direction: column;
    gap: 10px;
  }

  .pk-page .pk-th,
  .pk-page .pk-th-label,
  .pk-page .pk-row-label,
  .pk-page .pk-cell {
    padding: 14px 13px;
  }

  .pk-page .pk-row-label {
    font-size: 13.5px;
  }

  .pk-page .pk-cell {
    font-size: 13.5px;
  }
}

@media (max-width: 900px) {
  .pk-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  /* On a narrow, tall plate a near-horizontal ramp buries gold in the
     corners; the three metals run top to bottom instead. */
  .pk-audit-plate {
    --pk-plate-angle: 168deg;
  }

  /* The banner is 3:1 - cropped into a tall plate it shows only the empty
     middle of the desk. On a phone it becomes a strip across the top, framed
     on the left cluster (the charts, the magnifier, the pin), with the veil
     turned into a bottom fade so the copy below it stays clean. */
  .pk-custom-plate {
    display: block;
    min-height: 0;
    padding-top: clamp(172px, 46vw, 220px);
  }

  .pk-custom-shot {
    inset: 0 0 auto 0;
    height: clamp(150px, 42vw, 200px);
  }

  .pk-band-bg {
    object-position: 8% 50%;
  }

  .pk-custom-veil {
    background: linear-gradient(
      180deg,
      rgba(255, 252, 247, 0) 34%,
      rgba(255, 252, 247, 0.88) 82%,
      #fff 100%
    );
  }

  .pk-custom-copy {
    max-width: none;
  }

}

@media (max-width: 560px) {
  .pk-dials {
    grid-template-columns: minmax(0, 1fr);
  }

  .pk-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pk-trust-cell:nth-child(3n + 1) {
    border-left: 1px solid var(--pk-line-2);
  }

  .pk-trust-cell:nth-child(odd) {
    border-left: 0;
  }

  .pk-trust-cell:nth-child(n + 3) {
    border-top: 1px solid var(--pk-line-2);
  }

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

  .pk-switch-set {
    width: 100%;
    justify-content: space-between;
  }

  .pk-switch-btn {
    flex: 1;
    padding: 10px 8px;
  }

  .pk-get {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pk-page *,
  .pk-page *::before,
  .pk-page *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .pk-js [data-reveal] > *,
  .pk-js [data-reveal] > ol > li,
  .pk-js [data-reveal] > ul > li,
  .pk-js .pk-rise {
    opacity: 1 !important;
    transform: none !important;
  }

  .pk-page .pk-foil {
    background-position: 0 50%;
  }

  .pk-audit-plate {
    background-position: 50% 50%;
  }

  .pk-audit-plate::after {
    opacity: 0;
  }

  .pk-hero-art,
  .pk-band-bg,
  .pk-audit-mark {
    translate: none;
  }

  .pk-audit-mark img {
    transform: none;
  }

  .pk-audit-mark::before {
    opacity: 1;
    scale: 1;
  }

  .pk-saving-halo,
  .pk-saving-art img {
    transform: none;
    translate: none;
  }
}