/*
Theme Name: PKWARE Exodus
Theme URI: https://www.pkware.com
Description: PKWARE Custom AI Integrated Marketing Website. Claude Code and Desktop Integration. Minimal classic theme rendering hand-authored HTML with a consolidated design system. No page builder.
Author: Bob Cristello
Author URI: https://www.pkware.com
Tags: one-column, custom-logo, custom-menu, editor-style, featured-images, translation-ready
Version: 1.14.0
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary. Copyright (c) 2026 PKWARE, Inc. All rights reserved.
License URI: https://www.pkware.com
Text Domain: pkware
*/

/*
   LICENSING NOTE - set 2026-08-12 at Bob's direction.

   This theme and the three companion plugins are PROPRIETARY to PKWARE, Inc. and are
   not distributed. That is a coherent position only while it stays true: a WordPress
   theme calling WordPress functions is widely treated as a derivative work of
   WordPress, which is GPLv2, but GPL obligations attach to DISTRIBUTION rather than
   use. Running this on PKWARE's own site is not distribution. Handing it to anyone
   outside PKWARE is a legal question, not an engineering one - raise it, do not just
   change this header.

   Two provenance items were open when the license was changed and are recorded here
   rather than left to be rediscovered:

     1. pkware-shortcodes/inc/shortcodes.php is a 55,726-byte block ported byte for
        byte from the previous site. Its own header refers to "the original author"
        without naming them and states no license. If it did not originate in-house,
        PKWARE cannot relicense it.
     2. Some CSS below was extracted from pages whose styling Avada generated. Avada
        is commercially licensed and its generated CSS is not PKWARE's to relabel.
        Hand-authored rules are unaffected.

   The theme DIRECTORY is still "pkware" and must stay that way. WordPress identifies a
   theme by its directory - that is the value in the stylesheet/template options - so
   renaming the folder installs a second theme and deactivates this one. "PKWARE Exodus"
   is the display name only, exactly as "PKWARE Exodus Core" is for the plugin.
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS

   1. Header block ................ the WordPress theme header above
   2. Font face declarations ...... self-hosted Lato
   3. Design tokens ............... brand palette, scales, custom properties
   4. Reset and normalize
   5. Base elements and typography
   6. Layout and containers
   7. Site header and navigation
   8. Ported page components ...... per page; NOT pk27- (those are a plugin)
   9. Site footer
  10. Utilities
  11. Accessibility
  12. Print

   Conventions
   -----------
   - Every colour in this file comes from the PKWARE palette in section 3.
     Borders, shadows and focus rings are derived from palette tokens via the
     -rgb triplet variables, never from new hex values.
   - Page and post content is hand-authored HTML. This stylesheet must style
     that content without assuming any wrapper markup the author did not write.
   ========================================================================== */


/* ==========================================================================
   2. FONT FACE DECLARATIONS
   --------------------------------------------------------------------------
   Lato is self-hosted from assets/fonts/ rather than loaded from Google's
   CDN. Requesting a font from fonts.gstatic.com transmits the visitor's IP
   address to a third party on every page view, which is exactly the GDPR
   exposure the site's consent-management work is intended to remove. Serving
   the files from our own origin keeps that data on our infrastructure and
   means no font request is gated behind consent.

   Drop the .woff2 files into assets/fonts/ using the names below. Until they
   are present the stack falls through to the system sans-serif; nothing
   breaks. font-display: swap renders fallback text immediately rather than
   blocking paint.
   ========================================================================== */

@font-face {
	font-family: 'Lato';
	src: url('assets/fonts/lato-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('assets/fonts/lato-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('assets/fonts/lato-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('assets/fonts/lato-900.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   3. DESIGN TOKENS
   --------------------------------------------------------------------------
   The official PKWARE brand palette, and nothing outside it. If a value is
   needed that is not here, derive it from these tokens - do not add a hex.

   The -rgb triplets exist so translucent borders, shadows and overlays can be
   built with rgba() while still being palette colours. This is the only
   sanctioned way to produce a semi-transparent brand colour.
   ========================================================================== */

:root {

	/* --- Brand palette ------------------------------------------------- */
	--pk-navy: #1e3074;
	--pk-frost: #0fe4a2;
	--pk-cyan: #09bcef;
	--pk-white: #FFFFFF;
	--pk-deep-purple: #25275c;
	--pk-blue: #1152be;
	--pk-tech-purple: #273074;
	--pk-silicone: #47494c;
	--pk-slate: #4c5c68;
	--pk-coral: #f95557;
	--pk-web-purple: #616bce;
	--pk-grey: #f1f5fa;

	/* --- Palette RGB triplets, for rgba() derivation ------------------- */
	--pk-navy-rgb: 30, 48, 116;
	--pk-frost-rgb: 15, 228, 162;
	--pk-cyan-rgb: 9, 188, 239;
	--pk-white-rgb: 255, 255, 255;
	--pk-deep-purple-rgb: 37, 39, 92;
	--pk-blue-rgb: 17, 82, 190;
	--pk-tech-purple-rgb: 39, 48, 116;
	--pk-silicone-rgb: 71, 73, 76;
	--pk-slate-rgb: 76, 92, 104;
	--pk-coral-rgb: 249, 85, 87;
	--pk-web-purple-rgb: 97, 107, 206;
	--pk-grey-rgb: 241, 245, 250;

	/* --- Semantic assignments ------------------------------------------ */
	--pk-color-text: var(--pk-silicone);
	--pk-color-heading: var(--pk-navy);
	--pk-color-link: var(--pk-blue);
	--pk-color-link-hover: var(--pk-navy);
	--pk-color-bg: var(--pk-white);
	--pk-color-bg-alt: var(--pk-grey);
	--pk-color-accent: var(--pk-frost);

	/* Derived, not new colours */
	--pk-color-border: rgba(var(--pk-slate-rgb), 0.18);
	--pk-color-border-strong: rgba(var(--pk-navy-rgb), 0.32);
	--pk-color-focus: var(--pk-cyan);
	--pk-shadow-sm: 0 1px 2px rgba(var(--pk-navy-rgb), 0.08);
	--pk-shadow-md: 0 4px 12px rgba(var(--pk-navy-rgb), 0.12);
	--pk-shadow-lg: 0 12px 32px rgba(var(--pk-navy-rgb), 0.18);
	--pk-overlay: rgba(var(--pk-deep-purple-rgb), 0.72);

	/* --- Spacing scale ------------------------------------------------- */
	--pk-space-3xs: 0.25rem;
	--pk-space-2xs: 0.5rem;
	--pk-space-xs: 0.75rem;
	--pk-space-sm: 1rem;
	--pk-space-md: 1.5rem;
	--pk-space-lg: 2rem;
	--pk-space-xl: 3rem;
	--pk-space-2xl: 4rem;
	--pk-space-3xl: 6rem;

	/* --- Type scale ---------------------------------------------------- */
	--pk-font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--pk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* HEADING SERIF, ADDED 1.10.82. Georgia is a system font, so nothing loads.
	   The value already existed as `--serif` further down this file, but that one
	   is declared INSIDE the #pkw block and is therefore invisible to anything
	   outside it - which is why the term archives could not use it and ended up
	   with the sans h1 that made them look unlike every other page. Same stack,
	   declared where the whole document can see it. */
	--pk-font-serif: Georgia, "Times New Roman", serif;

	--pk-text-xs: 0.75rem;
	--pk-text-sm: 0.875rem;
	--pk-text-base: 1rem;
	--pk-text-lg: 1.125rem;
	--pk-text-xl: 1.375rem;
	--pk-text-2xl: 1.75rem;
	--pk-text-3xl: 2.25rem;
	--pk-text-4xl: 3rem;
	--pk-text-5xl: 3.75rem;

	--pk-leading-tight: 1.15;
	--pk-leading-snug: 1.35;
	--pk-leading-normal: 1.6;
	--pk-leading-loose: 1.8;

	--pk-weight-regular: 400;
	--pk-weight-bold: 700;
	--pk-weight-black: 900;

	/* --- Layout -------------------------------------------------------- */
	--pk-container-max: 1200px;
	--pk-container-narrow: 780px;
	--pk-container-pad: var(--pk-space-md);
	--pk-header-height: 5rem;

	/* --- Border radius ------------------------------------------------- */
	--pk-radius-none: 0;
	--pk-radius-sm: 2px;
	--pk-radius-md: 6px;
	--pk-radius-lg: 12px;
	--pk-radius-pill: 999px;

	/* --- Transition timing --------------------------------------------- */
	--pk-duration-fast: 120ms;
	--pk-duration-base: 200ms;
	--pk-duration-slow: 320ms;
	--pk-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pk-transition: var(--pk-duration-base) var(--pk-ease);

	/* --- Elevation ----------------------------------------------------- */
	--pk-z-header: 100;
	--pk-z-nav: 200;
	--pk-z-skiplink: 300;

	/* --- Page edge inset ----------------------------------------------
	   THE SINGLE SOURCE OF THE HORIZONTAL PAGE INSET. Added 2026-08-12 for Bob:
	   "can we consistently left align all work to the header at 1300px, leaving
	   padding for tablet and mobile please?"

	   Three containers consume it - .pk-header__inner, .pk-crumbs__wrap and
	   #pkw .wrap - and all three are capped at 1300px. Because they share both the
	   cap and this inset, their left edges are identical at every viewport. Change
	   THIS, not the individual rules, or they drift apart again.

	   Zero on desktop is deliberate and is what makes the alignment work: with a
	   1300px cap and no padding, every container's left edge is (V - 1300) / 2. Add
	   padding at that width and the container moves inward while the header does not.
	   Below 1300px the cap stops applying, so the inset below is the only thing
	   keeping content off the window edge - which is why it is not zero there.

	   It must live on :root, NOT #pkw. The header and breadcrumb render outside #pkw,
	   and a var() whose token is out of scope invalidates the whole declaration
	   silently. See --maxw, which is #pkw-scoped for exactly the opposite reason.

	   Overrides are in the two media queries immediately after this block. */
	--pk-edge: 0px;
}

/* The only two overrides of --pk-edge. Kept adjacent to the definition on purpose:
   an inset scattered across four section-specific media queries is how the header,
   breadcrumb and page content drifted apart in the first place.

   1340px, not 1300px: at exactly 1300px a 1300px-capped container would sit edge to
   edge with nothing to spare, so the inset starts a little before the cap binds. */
@media (max-width: 1340px) {
	:root { --pk-edge: 20px; }
}
@media (max-width: 480px) {
	:root { --pk-edge: 12px; }
}


/* ==========================================================================
   4. RESET AND NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}


/* ==========================================================================
   5. BASE ELEMENTS AND TYPOGRAPHY
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--pk-color-bg);
	color: var(--pk-color-text);
	font-family: var(--pk-font-sans);
	font-size: var(--pk-text-base);
	font-weight: var(--pk-weight-regular);
	line-height: var(--pk-leading-normal);
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--pk-color-heading);
	font-weight: var(--pk-weight-bold);
	line-height: var(--pk-leading-tight);
	margin-block-end: var(--pk-space-sm);
}

h1 { font-size: var(--pk-text-4xl); font-weight: var(--pk-weight-black); }
h2 { font-size: var(--pk-text-3xl); }
h3 { font-size: var(--pk-text-2xl); }
h4 { font-size: var(--pk-text-xl); }
h5 { font-size: var(--pk-text-lg); }
h6 { font-size: var(--pk-text-base); text-transform: uppercase; letter-spacing: 0.06em; }

p {
	margin-block-end: var(--pk-space-sm);
}

a {
	color: var(--pk-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--pk-transition);
}

a:hover,
a:focus {
	color: var(--pk-color-link-hover);
}

strong, b { font-weight: var(--pk-weight-bold); }

small { font-size: var(--pk-text-sm); }

hr {
	border: 0;
	border-block-start: 1px solid var(--pk-color-border);
	margin-block: var(--pk-space-xl);
}

blockquote {
	border-inline-start: 3px solid var(--pk-color-accent);
	padding-inline-start: var(--pk-space-md);
	margin-block: var(--pk-space-lg);
	color: var(--pk-slate);
}

code, kbd, samp, pre {
	font-family: var(--pk-font-mono);
	font-size: var(--pk-text-sm);
}

code {
	background-color: var(--pk-color-bg-alt);
	border-radius: var(--pk-radius-sm);
	padding: 0.1em 0.35em;
}

pre {
	background-color: var(--pk-color-bg-alt);
	border-radius: var(--pk-radius-md);
	overflow-x: auto;
	padding: var(--pk-space-sm);
}

pre code {
	background: none;
	padding: 0;
}

th, td {
	border-block-end: 1px solid var(--pk-color-border);
	padding: var(--pk-space-2xs) var(--pk-space-xs);
	text-align: start;
}

th {
	color: var(--pk-color-heading);
	font-weight: var(--pk-weight-bold);
}

figcaption {
	color: var(--pk-slate);
	font-size: var(--pk-text-sm);
	margin-block-start: var(--pk-space-3xs);
}


/* ==========================================================================
   6. LAYOUT AND CONTAINERS
   ========================================================================== */

.pk-container {
	margin-inline: auto;
	max-width: var(--pk-container-max);
	padding-inline: var(--pk-container-pad);
	width: 100%;
}

.pk-container--narrow {
	max-width: var(--pk-container-narrow);
}

/* Top padding only. The ported header is sticky, so main needs a little
   clearance below it; the footer supplies its own top padding, so a bottom value
   here would double up. Set explicitly per Bob 2026-08-10 - the literal values
   are intentional rather than tokens, and the zeroes are written out so nothing
   inherits a surprise. */
.site-main {
	display: block;
	padding-top: 20px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.entry-header {
	margin-block-end: var(--pk-space-lg);
}

.entry-meta {
	color: var(--pk-slate);
	font-size: var(--pk-text-sm);
}

/* Hand-authored content owns its own layout. Only spacing rhythm is applied
   here - no width constraint, no assumed wrappers. */
.entry-content > * + * {
	margin-block-start: var(--pk-space-sm);
}

.post-list {
	display: grid;
	gap: var(--pk-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-list__item {
	border-block-end: 1px solid var(--pk-color-border);
	padding-block-end: var(--pk-space-lg);
}

.post-list__item:last-child {
	border-block-end: 0;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pk-space-2xs);
	margin-block-start: var(--pk-space-xl);
}

.pagination .page-numbers {
	border: 1px solid var(--pk-color-border);
	border-radius: var(--pk-radius-md);
	padding: var(--pk-space-3xs) var(--pk-space-2xs);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background-color: var(--pk-navy);
	border-color: var(--pk-navy);
	color: var(--pk-white);
}


/* ==========================================================================
   7. SITE HEADER AND NAVIGATION
   --------------------------------------------------------------------------
   PORTED FROM PRODUCTION - 2026-08-10.
   Source: incoming/sticky-light-header/sticky-light-header.css

   Header variant: STICKY LIGHT. This is the first of three headers; when the
   others arrive, each gets its own delimited block here and its own partial in
   template-parts/.

   Markup: template-parts/header-sticky-light.php, rendered at body level by
   header.php. Behaviour: assets/js/navigation.js.

   Desktop dropdowns and the three-level flyouts are pure CSS :hover and
   :focus-within. JavaScript only handles the mobile burger, the mobile
   accordion, the search panel, and the stuck shadow.

   CHANGES FROM THE SOURCE FILE
   ---------------------------------------------------------------------------
   1. Two Avada-only rules removed - they targeted .fusion-fullwidth and
      nav.fusion-breadcrumbs, neither of which exists in this theme. Zero
      fusion- references remain.
   2. Three local custom properties deleted because they redeclared section 3
      tokens with identical values: --pk-navy, --pk-cyan, --pk-white. They now
      inherit from :root, so there is one definition per colour.
   3. --pk-hover-bg and --pk-max repointed at var(--pk-grey) and
      var(--pk-container-max), whose values they were duplicating.

   KNOWN EXCEPTION TO THE PALETTE RULE
   ---------------------------------------------------------------------------
   Section 3 states no colour outside the brand palette may be introduced. This
   ported block breaks that, and the values are left verbatim on purpose -
   rewriting production colours by eye during a port makes a porting mistake
   indistinguishable from a deliberate change. Map them to tokens as a separate
   reviewable pass. The off-palette values are --pk-ink (#292929), --pk-active
   (#0a58ca), the search input background, the mega icon hover, and a number of
   rgba(0,0,0,...) shadows and hairline borders.
   ========================================================================== */

/* ============================================================
   PKWARE header - styles
   Three-level cascading flyouts. Everything scoped under
   .pk-header / .pk-nav / .pk-search
   ============================================================ */

.pk-header {
  --pk-ink:         #292929;
  --pk-active:      #0a58ca;
  --pk-hover-bg:    var(--pk-grey);   /* palette: --pk-grey */
  --pk-radius:      12px;
  --pk-gap:         18px;
  --pk-font:        18px;
  --pk-sub-font:    16px;
  --pk-row-pad-y:   12px;
  --pk-row-pad-x:   20px;
  --pk-panel-pad-y: 8px;
  --pk-logo-w:      200px;
  --pk-max:         var(--pk-container-max);
  --pk-h:           84px;

  position: sticky;
  top: 0;
  z-index: 999999;
  background: var(--pk-white);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: box-shadow .2s ease;
}
.pk-header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.10); }
.pk-header *, .pk-header *::before, .pk-header *::after { box-sizing: border-box; }

/* Bob's values, 2026-08-12. max-width was ALREADY 1300px - what actually changed is
   padding 0 20px -> 0.

   That is the meaningful edit, not the max-width: .pk-header sets box-sizing:border-box
   two rules up, so the 20px was subtracted from the 1300px and the header CONTENT was
   spanning 1260px. Removing it makes the box genuinely 1300px, which also lines the
   header up with .pkbc-container (1300px, no padding).

   The 480px block further down still sets padding: 0 12px, so phones keep an inset.
   BETWEEN 481px AND 1300px THERE IS NOW NO HORIZONTAL INSET - the logo and hamburger
   sit flush against the window edge. That is the literal consequence of padding 0,
   left as asked rather than silently guarded. */
.pk-header__inner {
  max-width: calc(1300px + 2 * var(--pk-edge));
  margin: 0 auto;
  padding: 0 var(--pk-edge);
  min-height: var(--pk-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---------- logo ---------- */
.pk-header__logo { flex: 0 0 auto; line-height: 0; }
.pk-header__logo img { width: var(--pk-logo-w); max-width: 100%; height: auto; display: block; }

/* ---------- panel wrapper ---------- */
.pk-header__panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---------- level 1 ---------- */
.pk-nav { flex: 1 1 auto; }

.pk-nav__l1 {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--pk-gap);
}

.pk-nav__item { position: relative; }

.pk-nav__item > a {
  display: block;
  padding: 10px 2px;
  font-size: var(--pk-font);
  font-weight: 400;
  line-height: 1.2;
  color: var(--pk-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.pk-nav__item > a:hover,
.pk-nav__item > a:focus-visible,
.pk-nav__item.is-open > a { color: var(--pk-active); }

/* down caret on level-1 parents */
.pk-nav__item--parent > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  vertical-align: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .15s ease;
}
.pk-nav__item--parent:hover > a::after,
.pk-nav__item--parent:focus-within > a::after,
.pk-nav__item--parent.is-open > a::after { transform: rotate(-135deg); }

.pk-nav__toggle { display: none; background: none; border: 0; cursor: pointer; }

/* ---------- level 2 panel ---------- */
.pk-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 280px;
  padding: var(--pk-panel-pad-y) 0;
  /* THE DROPDOWN COLOUR SCHEME IS FIFTEEN TOKENS - 2026-08-19. Bob: "I want the entire
     menu to be consistent, light grey back, navy hovers, reverse of what it is now...
     But in the future I may want the reverse."

     LIGHT IS THE DEFAULT and .pk-nav__panel--dark below restores exactly what shipped
     until today, so reversing is one class on one div - not a second header. That was the
     alternative Bob asked about and it would have meant a second copy of 25 links and 29
     hand-drawn icons with nothing keeping them in step.

     The pattern is .pkw-dark's: redeclare tokens, never restyle children. Every rule that
     paints a dropdown consumes these, so neither scheme knows the other exists, and the
     icons need no work at all - they are stroke:currentColor, which the original Platform
     comment already anticipated: "same SVGs go light on navy / dark on a future white
     panel".

     ALPHAS OF WHITE DO NOT INVERT, and that is the one part that could not be mechanical.
     The old muted values were rgba(255,255,255,.55) and .62; on light grey they vanish.
     The light scheme uses --pk-slate, a real colour, at roughly 5.5:1 on --pk-grey.

     THE OLD HOVER WAS --pk-hover-bg, WHICH IS --pk-grey - the exact colour that is now the
     BASE. Base and hover would have collided, so the hover had to be tokenised too. */
  --pk-panel-bg:           var(--pk-grey);
  --pk-panel-border:       rgba(30,48,116,.12);
  --pk-panel-fg:           var(--pk-navy);
  --pk-panel-muted:        var(--pk-slate);
  --pk-panel-ico-bg:       var(--pk-white);
  --pk-panel-ico-fg:       var(--pk-navy);
  --pk-panel-hover-bg:     var(--pk-navy);
  --pk-panel-hover-fg:     var(--pk-white);
  --pk-panel-hover-muted:  rgba(255,255,255,.72);
  --pk-panel-hover-ico-bg: rgba(255,255,255,.14);
  --pk-panel-hover-ico-fg: var(--pk-white);
  --pk-panel-tag-fg:       var(--pk-navy);
  --pk-panel-tag-bg:       rgba(9,188,239,.22);
  /* WHITE, NOT CYAN - corrected 2026-08-19 after computing it. Cyan #09bcef on the hover
     chip (14% white over navy, #3e4d87) is 3.61:1, and the tag is 9.5px bold, so it needs
     4.5:1. White on the same chip is 8.03:1. The rest-state pill is fine at 9.30:1 - navy on
     22% cyan over grey - so only the hover half was wrong. */
  --pk-panel-hover-tag-fg: var(--pk-white);
  --pk-panel-hover-tag-bg: rgba(255,255,255,.14);

  background: var(--pk-panel-bg);
  /* A hairline, because the box-shadow was tuned to separate NAVY from a white page. */
  border: 1px solid var(--pk-panel-border);  border-radius: var(--pk-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

/* THE PREVIOUS SCHEME, KEPT AND DORMANT. Add pk-nav__panel--dark to a panel's div to put
   that one panel back to navy. Nothing carries it today.

   ONE DELIBERATE CONSOLIDATION rather than a byte-exact restore: plain dropdown links used
   to hover to --pk-cyan while mega titles hovered to --pk-active. Both now share
   --pk-panel-hover-fg, so in dark mode a plain link hovers --pk-active rather than cyan.
   Stated because it is a real difference in a dormant scheme, not a no-op. */
.pk-nav__panel--dark {
  --pk-panel-bg:           var(--pk-navy);
  --pk-panel-border:       transparent;
  --pk-panel-fg:           var(--pk-white);
  --pk-panel-muted:        rgba(255,255,255,.60);
  --pk-panel-ico-bg:       rgba(255,255,255,.10);
  --pk-panel-ico-fg:       var(--pk-white);
  --pk-panel-hover-bg:     var(--pk-grey);
  --pk-panel-hover-fg:     var(--pk-active);
  --pk-panel-hover-muted:  var(--pk-ink);
  --pk-panel-hover-ico-bg: #e7f0f9;
  --pk-panel-hover-ico-fg: var(--pk-navy);
  --pk-panel-tag-fg:       var(--pk-cyan);
  --pk-panel-tag-bg:       rgba(9,188,239,.16);
  --pk-panel-hover-tag-fg: var(--pk-navy);
  --pk-panel-hover-tag-bg: rgba(30,48,116,.12);
}
.pk-nav__item:hover > .pk-nav__panel,
.pk-nav__item:focus-within > .pk-nav__panel,
.pk-nav__item.is-open > .pk-nav__panel,
.pk-nav__panel:hover { display: block; }

.pk-nav__l2, .pk-nav__l3 { list-style: none; margin: 0; padding: 0; }

.pk-nav__sub { position: relative; }

/* shared row styling for links and non-link group labels */
.pk-nav__l2 > li > a,
.pk-nav__l3 > li > a,
.pk-nav__row {
  display: block;
  padding: var(--pk-row-pad-y) var(--pk-row-pad-x);
  font-size: var(--pk-sub-font);
  line-height: 1.35;
  color: var(--pk-panel-fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

/* hover state: light background, cyan text */
.pk-nav__l2 > li > a:hover,
.pk-nav__l2 > li > a:focus-visible,
.pk-nav__l3 > li > a:hover,
.pk-nav__l3 > li > a:focus-visible,
.pk-nav__sub--parent:hover > .pk-nav__row,
.pk-nav__sub--parent:focus-within > .pk-nav__row {
  background: var(--pk-panel-hover-bg);
  color: var(--pk-panel-hover-fg);
}

/* right caret on level-2 parents */
.pk-nav__sub--parent > .pk-nav__row::after {
  content: "";
  position: absolute;
  right: var(--pk-row-pad-x);
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(-45deg);
}
.pk-nav__sub--parent > .pk-nav__row { padding-right: calc(var(--pk-row-pad-x) * 2 + 8px); }

/* ---------- level 3 flyout ---------- */
.pk-nav__l3 {
  display: none;
  position: absolute;
  left: 100%;
  top: calc(var(--pk-panel-pad-y) * -1);
  z-index: 11;
  min-width: 260px;
  padding: var(--pk-panel-pad-y) 0;
  background: var(--pk-panel-bg);
  border-radius: var(--pk-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.pk-nav__sub--parent:hover > .pk-nav__l3,
.pk-nav__sub--parent:focus-within > .pk-nav__l3,
.pk-nav__sub--parent.is-open > .pk-nav__l3,
.pk-nav__l3:hover { display: block; }

/* flip the flyout to the left if it would run off the right edge */
.pk-nav__item:nth-last-child(-n+3) .pk-nav__l3 { left: auto; right: 100%; }

/* ---------- actions ---------- */
.pk-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }

.pk-header__search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--pk-ink); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.pk-header__search-btn svg { fill: currentColor; }
.pk-header__search-btn:hover,
.pk-header__search-btn[aria-expanded="true"] { color: var(--pk-active); background: rgba(0,0,0,.05); }

.pk-header__cta {
  display: inline-block;
  padding: 16px 20px;
  background: var(--pk-cyan);
  color: #000;
  font-size: 16px; font-weight: 700; line-height: 1;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: filter .15s ease, border-color .15s ease;
}
.pk-header__cta:hover, .pk-header__cta:focus-visible {
  filter: brightness(.92); border-color: var(--pk-white); color: #000;
}
/* Avada resets button radius, so force the pill with raised specificity */
.pk-header .pk-header__actions a.pk-header__cta,
.pk-header .pk-header__actions a.pk-header__cta:hover,
.pk-header .pk-header__actions a.pk-header__cta:focus-visible {
  border-radius: 200px !important;
}

/* THE FORM-CARD PULSE, PORTED TO THE HEADER CTA - 2026-08-19. Bob: "Can we do the same
   effect for the book a demo button in the header?" Same ring, same 3.8s ease-out, same
   colour. rgba(9,188,239,.34) IS --pk-cyan #09bcef at 34 percent, written literally
   because box-shadow needs an alpha and the token is a hex.

   ONLY HALF THE EFFECT PORTS, AND THE OTHER HALF IS LEFT OUT ON PURPOSE. The card's second
   layer is a conic-gradient rotating through a 2px transparent border, and it reads there
   because the fill behind it is --panel, near white. This button's fill IS cyan and the
   conic runs cyan -> frost -> navy -> frost -> cyan, so everything except the 30 percent
   navy segment would be cyan on cyan and the rotation would be invisible. It would also
   fight the hover directly above, which reveals a white border in the same border the conic
   needs to paint. The pulse is the attention-getter and it is the half that works on any
   fill.

   THE RING IS 14px, NOT THE CARD'S 16px. The button is 48px tall inside an 84px header, so
   it has 18px of clearance; 14px keeps the ring inside the header band rather than bleeding
   over the announcement bar above it. Nothing clips it - neither .pk-header nor
   .pk-header__inner sets overflow - so this is about where it reads, not about whether it
   survives. The spread is a custom property so the 1200px block can bring it down to 10px
   for the 33px button in the wrapped header.

   IT STOPS WHEN THE BUTTON IS IN USE, the same as the card, and the same cascade trap
   applies: an animated property beats a normal declaration, so the pulse has to be DROPPED
   with animation:none, not overridden with a box-shadow. The brightness and white-border
   hover above are untouched.

   REDUCED MOTION NEEDS ITS OWN RULE HERE, and that is the finding worth keeping. The
   theme's only guard is `@media(prefers-reduced-motion:reduce){#pkw *{animation:none
   !important}}` - scoped to #pkw, no line number cited here because it moves. THE
   HEADER IS OUTSIDE #pkw, so nothing in that block has ever reached it, and any animation
   added to the header from here on has to carry its own opt-out. */
/* .pk-btn-demo - THE BOOK A DEMO BUTTON, AS ITS OWN COMPONENT - 2026-08-19. Bob: "this
   button should be it's own unique class."

   ADDITIVE, NOT A RENAME, and that was a deliberate choice. .pk-header__cta is the imported
   header component - it still owns the geometry, the pill radius, the cyan fill and the two
   responsive step-downs, and it is untouched above. Everything specific to THIS button
   lives here under one unique class, so it can be restyled, moved or dropped without
   reading the header component at all.

   A rename was the other option and was rejected: .pk-header__cta appears in
   incoming/sticky-light-header/ - the source this header was imported from - and in 40-odd
   extracted staging stylesheets under outgoing/. Renaming would have put the theme out of
   step with its own import for no visual gain.

   text-transform:none rather than deleting `uppercase` from the base rule, for the same
   reason: the base keeps the generic header-button treatment, this button opts out.
   The label now renders exactly as authored in the template - "Book A Demo", with a capital
   A, which is what the markup has always said. Left as authored; changing it is a content
   call, not a CSS one.

   HOVER IS A BACKGROUND SWAP, SO THE BASE HOVER HAS TO BE NEUTRALISED, not just added to.
   .pk-header__cta:hover sets filter:brightness(.92), which would darken frost instead of
   showing it, and border-color:#fff, which is invisible against a white header once the
   fill is doing the work. Both are cancelled here rather than left to fight. Same
   specificity as the base hover (0,2,0), so this wins on source order - it must stay below.

   Black on frost #0fe4a2 is a high-contrast pair, so the label colour does not move. */
.pk-btn-demo { text-transform: none; transition: background-color .15s ease, border-color .15s ease; }
.pk-btn-demo:hover,
.pk-btn-demo:focus-visible {
  background: var(--pk-frost);
  color: #000;
  filter: none;
  border-color: transparent;
}

/* The pulse, ported from #pkw .form-card - see the note above this block. It lives on the
   unique class, not on .pk-header__cta, so the header component carries no animation. */
.pk-btn-demo { --pk-cta-ring: 14px; animation: pk-cta-pulse 3.8s ease-out infinite; }
.pk-btn-demo:hover,
.pk-btn-demo:focus-visible { animation: none; }
@keyframes pk-cta-pulse {
  0%   { box-shadow: 0 0 0 0                       rgba(9,188,239,.34); }
  70%  { box-shadow: 0 0 0 var(--pk-cta-ring,14px) rgba(9,188,239,0);   }
  100% { box-shadow: 0 0 0 0                       rgba(9,188,239,0);   }
}
@media (prefers-reduced-motion: reduce) {
  .pk-btn-demo { animation: none; }
}

/* ---------- search ---------- */
.pk-search { border-top: 1px solid rgba(0,0,0,.08); background: var(--pk-white); }
.pk-search[hidden] { display: none; }
.pk-search__form {
  max-width: var(--pk-max); margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; gap: 10px;
}
.pk-search__input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 16px; font-size: 18px;
  color: var(--pk-ink); background: #f5f7fa;
  border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
}
.pk-search__input:focus { outline: 2px solid var(--pk-cyan); outline-offset: 1px; }
.pk-search__submit, .pk-search__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
}
.pk-search__submit { background: var(--pk-cyan); color: #000; }
.pk-search__close  { background: transparent; color: var(--pk-ink); }
.pk-search__submit svg, .pk-search__close svg { fill: currentColor; }
.pk-search__close:hover { background: rgba(0,0,0,.06); }

/* ---------- burger ---------- */
.pk-header__burger {
  display: none; flex: 0 0 auto; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.pk-header__burger-bar {
  display: block; height: 2px; background: var(--pk-ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.pk-header__burger-bar + .pk-header__burger-bar { margin-top: 5px; }
.pk-header__burger[aria-expanded="true"] .pk-header__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pk-header__burger[aria-expanded="true"] .pk-header__burger-bar:nth-child(2) { opacity: 0; }
.pk-header__burger[aria-expanded="true"] .pk-header__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE / TABLET - single tree, reflowed as a nested accordion
   ============================================================ */
@media (max-width: 1200px) {

  .pk-header__inner { gap: 12px; flex-wrap: wrap; }
  .pk-header__burger { display: block; }

  .pk-header__panel {
    flex: 0 0 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s ease, visibility .28s;
  }
  .pk-header__panel.is-open {
    max-height: calc(100vh - var(--pk-h));
    overflow-y: auto; visibility: visible; padding-bottom: 20px;
  }

  .pk-nav__l1 { flex-direction: column; align-items: stretch; gap: 0; }
  .pk-nav__item { border-bottom: 1px solid rgba(0,0,0,.08); }
  .pk-nav__item > a { padding: 16px 4px; font-size: 18px; white-space: normal; }

  /* level-1 rows become label + toggle */
  .pk-nav__item--parent { display: grid; grid-template-columns: 1fr 48px; align-items: center; }
  .pk-nav__item--parent > a { grid-column: 1; }
  .pk-nav__item--parent > a::after { content: none; }

  /* level-2 parents likewise */
  .pk-nav__sub--parent { display: grid; grid-template-columns: 1fr 48px; align-items: center; }
  .pk-nav__sub--parent > .pk-nav__row { grid-column: 1; }
  .pk-nav__sub--parent > .pk-nav__row::after { content: none; }
  .pk-nav__sub--parent > .pk-nav__row { padding-right: var(--pk-row-pad-x); }

  .pk-nav__toggle {
    display: block; grid-column: 2;
    width: 48px; height: 48px; position: relative;
  }
  .pk-nav__toggle::before, .pk-nav__toggle::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 14px; height: 2px; background: var(--pk-ink);
    transform: translate(-50%,-50%); transition: transform .2s ease;
  }
  .pk-nav__toggle::after { transform: translate(-50%,-50%) rotate(90deg); }
  .pk-nav__toggle[aria-expanded="true"]::after { transform: translate(-50%,-50%) rotate(0deg); }
  /* level-2 toggle bars sit on the navy panel */
  .pk-nav__toggle--sub::before, .pk-nav__toggle--sub::after { background: var(--pk-white); }

  /* panels become in-flow, driven only by .is-open */
  .pk-nav__panel, .pk-nav__l3 {
    display: none;
    position: static;
    grid-column: 1 / -1;
    min-width: 0;
    box-shadow: none;
    border-radius: 8px;
    z-index: auto;
    left: auto; right: auto; top: auto;
  }
  .pk-nav__panel { margin: 0 0 12px; }
  .pk-nav__l3    { margin: 0; border-radius: 0; background: rgba(0,0,0,.18); }

  .pk-nav__item:hover > .pk-nav__panel,
  .pk-nav__item:focus-within > .pk-nav__panel,
  .pk-nav__panel:hover,
  .pk-nav__sub--parent:hover > .pk-nav__l3,
  .pk-nav__sub--parent:focus-within > .pk-nav__l3,
  .pk-nav__l3:hover { display: none; }

  .pk-nav__item.is-open > .pk-nav__panel,
  .pk-nav__sub--parent.is-open > .pk-nav__l3 { display: block; }

  .pk-nav__l2 > li > a,
  .pk-nav__l3 > li > a,
  .pk-nav__row { white-space: normal; }

  .pk-nav__item--wide .pk-nav__panel { width: auto; max-width: none; }

  /* actions stay in the header row, centred between logo and burger */
  .pk-header__logo    { order: 1; }
  .pk-header__actions { order: 2; margin-left: auto; margin-right: auto; gap: 10px; }
  .pk-header__burger  { order: 3; margin-left: 0; }
  .pk-header__panel   { order: 4; }

  .pk-header__cta { padding: 10px 16px; font-size: 13px; }
  /* 33px button in the wrapped header - the ring comes down with it. On .pk-btn-demo, with
     the pulse, rather than on the header component. */
  .pk-btn-demo { --pk-cta-ring: 10px; }
  .pk-header__search-btn { width: 34px; height: 34px; }
  .pk-header__search-btn svg { width: 19px; height: 19px; }
}

@media (max-width: 480px) {
  .pk-header { --pk-logo-w: 132px; --pk-h: 68px; }
  /* Horizontal padding removed - it now comes from --pk-edge, which is 12px at this
     width. Hardcoding it here would put the header back out of step with the
     breadcrumb and page content. */
  .pk-header__inner { gap: 8px; }
  .pk-header__actions { gap: 6px; }
  .pk-header__cta { padding: 9px 12px; font-size: 11px; }
  .pk-header__search-btn { width: 30px; height: 30px; }
  .pk-header__search-btn svg { width: 17px; height: 17px; }
  .pk-search__form { flex-wrap: wrap; }
  .pk-search__input { flex: 1 1 100%; order: 1; }
}
/* ============================================================
   v3 - SECTION ONE: PLATFORM NAVY MEGA PANEL
   Reworks ONLY the Platform dropdown into a headed two-column
   card grid on the SAME navy panel. Scoped to .pk-nav__panel--mega
   so the other dropdowns are untouched. Icons use
   stroke:currentColor -> same SVGs go light on navy / dark on a
   future white panel (only .pk-mega__ico color flips).
   ============================================================ */
.pk-nav__panel--mega { left: 0; min-width: 640px; padding: 22px; }
.pk-mega__head { margin: 0 0 8px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pk-panel-muted); }
.pk-mega__head--spaced { margin-top: 18px; }
.pk-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
.pk-mega__link { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background .15s ease, color .15s ease; }
.pk-mega__link--compact { align-items: center; padding: 7px 10px; }
.pk-mega__ico { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 9px; background: var(--pk-panel-ico-bg); color: var(--pk-panel-ico-fg); transition: background .15s ease, color .15s ease; }
.pk-mega__ico svg { width: 18px; height: 18px; display: block; }
.pk-mega__body { display: block; min-width: 0; }
.pk-mega__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--pk-panel-fg); }
.pk-mega__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--pk-panel-muted); white-space: normal; }
.pk-mega__tag { flex: 0 0 auto; font-style: normal; font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: var(--pk-panel-tag-fg); background: var(--pk-panel-tag-bg); }
/* hover: light-surface flip, matching the existing navy-dropdown hover */
.pk-mega__link:hover, .pk-mega__link:focus-visible { background: var(--pk-panel-hover-bg); }
.pk-mega__link:hover .pk-mega__title, .pk-mega__link:focus-visible .pk-mega__title { color: var(--pk-panel-hover-fg); }
.pk-mega__link:hover .pk-mega__desc, .pk-mega__link:focus-visible .pk-mega__desc { color: var(--pk-panel-hover-muted); }
.pk-mega__link:hover .pk-mega__ico, .pk-mega__link:focus-visible .pk-mega__ico { background: var(--pk-panel-hover-ico-bg); color: var(--pk-panel-hover-ico-fg); }
.pk-mega__link:hover .pk-mega__tag, .pk-mega__link:focus-visible .pk-mega__tag { color: var(--pk-panel-hover-tag-fg); background: var(--pk-panel-hover-tag-bg); }
/* ============================================================
   SECTION TWO: SOLUTIONS NAVY MEGA PANEL, THREE COLUMNS - 2026-08-19
   Bob: "I want the second drop down to be a 3 column mega menu... capabilities
   is not a clickable link, so it would be a column header, with all these links
   under it."

   WHAT IT REPLACES. Solutions was a plain .pk-nav__panel holding ul.pk-nav__l2
   whose three rows were <span class="pk-nav__row"> - correctly not links -
   each opening a CSS-hover ul.pk-nav__l3 flyout. Those three spans are now
   .pk-mega__head column headings and their 25 links are .pk-mega__link
   --compact, icon plus title, no description, at Bob's direction: "Just the
   Page Title as it currently is in the Menu html, no description."

   All 25 labels and all 25 hrefs are carried over byte for byte, including the
   bare & in "Banking & Financial Services", which is what the old l3 markup
   said. THE THREE .pk-nav__toggle--sub BUTTONS ARE GONE - they existed only to
   open the l3 flyouts on mobile, and there are no l3 flyouts now. The parent
   .pk-nav__toggle on the Solutions <li> stays; it is what opens the whole panel
   in the burger menu.

   BOTH MEGA PANELS OPEN AT THE SAME X, and that took a change of positioning
   context rather than an offset. Bob: "can we open the three column at the same
   spot we open the 2 column, it looks off popping up where it is." Every
   .pk-nav__panel is absolutely positioned at left:0 of its own <li>, so the
   Platform panel opened under Platform and the Solutions panel opened 82px
   further right, under Solutions.

   The fix is at the bottom of this block: .pk-nav__l1 becomes the containing
   block and the two --mega items go position:static, so left:0 now means the
   left edge of the nav LIST for both of them. Platform does not move at all -
   it is the first flex child of a ul with padding:0, so the list's left edge and
   Platform's left edge are the same pixel. A negative left offset on the
   Solutions panel would have produced the same picture today and drifted the
   moment the word "Platform" changed or --pk-gap moved.

   THE WIDTH IS STILL CLAMPED AGAINST THE VIEWPORT. The panel now starts at the
   nav list, 224px in - logo 200px plus the 24px .pk-header__inner gap - so
   920px fits any viewport this panel appears on (224 + 920 = 1144, and below
   1201px it is in the burger drawer). min() is kept as the guard rather than
   removed, because it costs nothing and the alternative is a document that
   scrolls sideways: the header is outside #pkw, so it gets none of the
   overflow-x:clip that would otherwise hide a mistake here.

   LONG TITLES WRAP, and that is fine. "Atakama Multifactor Encryption
   Replacement" and "Microsoft Purview Integration" take two lines at 920px.
   .pk-mega__title is a flex container with one text node, which wraps normally;
   nothing here sets nowrap, unlike the .pk-nav__l2 rows this replaces.

   ICONS ARE NEW, hand-drawn to match the four existing ones exactly - 24x24
   viewBox, fill:none, stroke:currentColor at 1.8, round caps and joins - so
   they inherit the same light-on-navy / dark-on-hover flip through
   .pk-mega__ico with no extra rules. One deliberate exception: the Redaction
   glyph carries fill="currentColor" stroke="none" on its bar, because a
   redaction mark that is only an outline does not read as one.
   ============================================================ */
/* FOUR COLUMNS, AND BY USE CASE IS ONE GROUP ACROSS TWO OF THEM - 2026-08-19. Bob:
   "instead of a three column, can we make it a four column, and make column 3 a second By
   Use Case Section, with the links aligned with the links in column 2, but no column 3
   header, starting with Mergers and acquisitions", and "I want everything to read this,
   crawlers, bots, anything that consumes our site."

   THOSE TWO REQUIREMENTS PULL AGAINST EACH OTHER, AND THE GRID IS WHAT RECONCILES THEM. A
   literal fourth column with no header would tell a screen reader and a parser that there
   are TWO use-case groups and that the second one is unnamed. So the markup is ONE <ul> of
   11 items spanning two grid tracks. .pk-mega__list--split flows ten of them 5 then 5 with
   grid-auto-flow:column over five explicit rows, and pins the long eleventh at row 6 of the
   first track. Semantically one named list; visually the two columns Bob asked for, with
   Mergers and Acquisitions at the top of the second.

   THE ALIGNMENT IS FREE, WHICH IS THE REASON TO DO IT THIS WAY. "links aligned with the
   links in column 2" needs no spacer and no padding compensation for the missing header,
   because both visual columns are rows of the SAME grid - they cannot drift.

   REAL <ul>/<li>, NOT role="list". Putting role="listitem" on an <a> REPLACES its implicit
   link role, so the very tool this is for stops announcing them as links. Each list is named
   by its heading through aria-labelledby, so assistive tech reads "By Use Case, list, 11
   items" - which is also what the old nested-ul markup gave and what the flat
   div-plus-25-anchors version destroyed.

   list-style/margin/padding are reset here because this panel renders OUTSIDE #pkw, so none
   of the theme's list resets reach it - only .pk-nav__l1 and .pk-footer ul have their own.

   1180px, and the clamp is the same guard as before: the panel is absolutely positioned at
   the nav list's left edge, 224px in, so 1180 + 224 = 1404. Above that it renders at full
   width; below it the min() gives back whatever the viewport has. The header is outside #pkw
   and gets no overflow-x:clip, so an unclamped panel scrolls the document sideways. */
/* CENTRED ON THE VIEWPORT - 2026-08-19. Bob: "can we fix that so it centers on the screen?"

   THIS SUPERSEDES THE SHARED-ORIGIN RULE FOR THIS PANEL ONLY, and that is worth stating
   rather than discovering. Earlier today both mega panels were made to open at the same x by
   anchoring them to .pk-nav__l1, because the Platform panel is 640px and the Solutions panel
   was 920px and they looked misaligned. At 1180px that no longer holds: a panel this wide
   cannot both start at Platform's left edge and sit centred. Platform keeps the shared
   origin; this one is centred.

   THE MATH, BECAUSE left IS RELATIVE TO .pk-nav__l1 AND NOT TO THE VIEWPORT.

   THE FIRST ATTEMPT WAS WRONG AND PUSHED IT FURTHER RIGHT. It used
   `(100vw - W)/2 - --pk-edge - --pk-logo-w - 24px`, treating the nav list as sitting
   (edge + logo + gap) from the window. IT DOES NOT. .pk-header__inner is
   max-width:calc(1300px + 2 * --pk-edge) with margin:0 auto, so IT is centred too, and on a
   1920px window that adds (1920 - 1300) / 2 = 310px I never subtracted. Bob: "It is now way
   off to the right." A containing block inside a centred container has two offsets, not one.

   THE CORRECT FORM CENTRES WITHIN THE CONTAINER, which is equivalent because the container is
   itself centred - and it drops the viewport term entirely on wide screens:

       container = min(1300px, 100vw - 2 * --pk-edge)     the inner's CONTENT box
       left      = (container - W) / 2  -  --pk-logo-w  -  24px

   Checked in both regimes. At 1920px, --pk-edge 0: container 1300, left = 60 - 224 = -164px;
   the nav list starts at 310 + 224 = 534, so the panel lands at 370, and (1920 - 1180) / 2 =
   370. At 1294px, --pk-edge 20: the inner is narrower than its max-width so it fills the
   window, container = 1254, left = 37 - 224 = -187px; the nav list starts at 244, panel at
   57, and (1294 - 1180) / 2 = 57. Centred at both.

   EVERY TERM IS A TOKEN OR A DECLARED VALUE - no numbers measured off a screenshot. --pk-edge
   and --pk-logo-w are inherited from .pk-header; 1300px is the inner's max-width and 24px its
   gap, both a few rules above. If the logo width, the edge or the container width changes,
   this follows.

   THE WIDTH CLAMP CHANGED FROM (100vw - 260px) TO (100vw - 48px). The old figure existed to
   stop a left-anchored panel running off the right edge; a centred panel cannot do that, so
   the only constraint left is a small breathing margin. */
.pk-nav__panel--mega4 {
  min-width: 0;

  /* WIDTH IS NOW CONTENT-DERIVED - 2026-08-19. Bob: "Too much space between column 2 and
     column 3 an probably between colum 3 and 4, if you base it on the last text width that is
     the largest, even if rolled under."

     Every column is fit-content(250px): it takes its own content width, and only the labels
     that exceed 250px wrap - "Atakama Multifactor Encryption Replacement" and "Banking &
     Financial Services" already did. So the tracks are as wide as their widest label needs
     and no wider, the panel shrinks to their sum, and the inter-column gaps are the 14px
     grid gap rather than leftover fr space.

     THE CENTRING HAD TO CHANGE MECHANISM, and this is the reason. The old calc subtracted
     half the panel's width, which only works when that width is a number we can name. A
     content-derived width cannot be referenced in a calc, so the panel is now positioned by
     its CENTRE - left lands on the container's midpoint and translateX(-50%) does the rest.
     That is width-agnostic, so it keeps working whatever the content does.

     The container is centred in the viewport, so its midpoint measured from the nav list is
     (container / 2) - logo - the 24px inner gap. Checked: at 1920px with --pk-edge 0 that is
     650 - 224 = 426, the nav list starts at 310 + 224 = 534, so the centre lands at 960 =
     1920 / 2. At 1294px with --pk-edge 20, container 1254, it is 627 - 224 = 403, nav list at
     244, centre at 647 = 1294 / 2. */
  width: max-content;
  max-width: min(1180px, calc(100vw - 48px));
  left: calc(min(1300px, calc(100vw - 2 * var(--pk-edge))) / 2 - var(--pk-logo-w) - 24px);
  transform: translateX(-50%);
}
.pk-mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
/* THE SHORT-LABEL COLUMNS SIZE TO THEIR CONTENT - 2026-08-19. Bob: "Too much space between
   the end of DLP Enhancement and the By Use Case Column, you can tighten that up, and still
   make it pop up as center."

   repeat(4, minmax(0, 1fr)) gave all four tracks the same width, so Capabilities - whose
   longest label is "DLP Enhancement" at roughly 200px including its icon and padding - got
   the same ~274px as a column holding "Atakama Multifactor Encryption Replacement". The
   leftover sat as dead space at the right of column 1, which is the gap Bob is pointing at.

   auto ON TRACKS 1 AND 4, 1fr ON 2 AND 3. In a grid that also has 1fr tracks, `auto` settles
   at max-content because the fr tracks absorb every bit of free space - so Capabilities and
   By Industry shrink to exactly what they need and the slack goes to the two use-case
   columns, which are the ones with labels long enough to wrap. Tighter on the left, fewer
   two-line links in the middle, and nothing is a magic number.

   THE CENTRING IS UNTOUCHED. The panel is still exactly --pk-mega4-w wide; this only
   redistributes tracks inside it, so the left calc above needs no change. */
/* THE CAP MOVED 250px -> 280px WITH THE SMALLER TYPE - 2026-08-19. Bob, after asking for 14px
   titles and 18px icons: "I bet you can reduce some spacing in the second mega menu because of
   that."

   He is right, and it works out better than holding the cap. The per-link chrome dropped from
   about 70px to 50px - a 34px icon plus a 12px gap became 18px plus 10px, and the link padding
   went from 9/12 to 7/10 - and 14px Lato bold measures roughly 7.65px per character against
   8.2px at 15px. So a label needs LESS width than before even at a bigger cap: at 280px only
   "Atakama Multifactor Encryption Replacement" still wraps, against eight labels wrapping at
   250px with the old type.

   And the panel still gets NARROWER, which is the counter-intuitive part: tracks come out near
   165 + 280 + 280 + 264 plus gaps and padding, roughly 1075px against the 1180px it was using.
   Tighter panel, one wrapped label instead of eight. */
.pk-mega__cols--4 { grid-template-columns: fit-content(280px) max-content fit-content(280px); }
.pk-mega__col--span2 { grid-column: auto; }
.pk-mega__list { list-style: none; margin: 0; padding: 0; }
.pk-mega__list--split {
  display: grid;
  grid-template-columns: repeat(2, fit-content(280px));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 0 14px;
}
/* .pk-mega__item--tail - THE LONG USE-CASE ITEM, PINNED UNDER THE FIRST TRACK - 2026-08-19.
   It spanned both tracks for one revision, which read as a rule under the columns rather than
   an item in one of them. Bob: "now it looks wrong, Please make the atakama entry roll under
   for the single column 2, and not bleed across to column 3."

   IT STILL HAS TO BE PLACED BY HAND. Five explicit rows with grid-auto-flow:column means an
   eleventh auto-placed item lands in an implicit THIRD column, not under the first - so row 6
   of column 1 has to be named. A placement, not a second list: still one <ul>, still
   "By Use Case, list, 11 items".

   IT WRAPS ON PURPOSE. "Atakama Multifactor Encryption Replacement" is 42 characters, roughly
   371px of text and chrome against a fit-content(280px) track, so it sets on two lines. That
   also makes 280px the widest thing in the track, up from "De-Identify Dev/Test Data" at
   roughly 241px, so the panel grows by about 39px. That is the price of the wrap, and the
   wrap is the ask.

   DOM POSITION IS SIXTH, NOT LAST. A sighted reader goes down column one and hits this last,
   so source order has to agree - left last, a crawler would read it after Securely Enable AI
   at the bottom of the second column. Sixth is also exactly where Bob first put it: "Move it
   under Mainframe Modernization." */
.pk-mega__list--split > .pk-mega__item--tail { grid-column: 1; grid-row: 6; }

/* .pk-mega__item--tail-b - THE SAME TREATMENT FOR THE SECOND TRACK - 2026-08-28.
   Added with /solutions/encrypted-file-inspection (MAR-2276 item 2.1). Bob: "insert this
   into Mega Menu 2, Column 3, Under Securely Enable AI."

   THE RULE ABOVE ALREADY EXPLAINS WHY THIS CANNOT BE LEFT TO AUTO-PLACEMENT, and it is the
   same trap one item further on: five explicit rows with grid-auto-flow:column means a
   TWELFTH auto-placed item lands in an implicit THIRD column, floating clear of the panel.
   Column 2 row 6 has to be named, exactly as column 1 row 6 was.

   STILL ONE <ul>, NOW TWELVE ITEMS. Two placements, not a second list, so the accessible
   announcement stays "By Use Case, list, 12 items" and the three named groups PO-20
   restored are untouched.

   DOM POSITION IS LAST, AND THAT IS CORRECT HERE - the opposite of --tail. A sighted reader
   goes down column one, hits Atakama at its foot, crosses to column two and hits this at the
   bottom, so last in source order IS reading order. --tail is sixth for the same reason.

   NO PANEL RESIZE. "Encrypted File Inspection" is 25 characters against "Microsoft Purview
   Integration" at 29 in the same track, so fit-content(280px) does not move and the panel
   keeps the width it settled on in PO-21. */
.pk-mega__list--split > .pk-mega__item--tail-b { grid-column: 2; grid-row: 6; }
.pk-mega__col > .pk-mega__head { margin-bottom: 6px; }

/* .pk-nav__panel--icons - THE THREE SMALL DROPDOWNS, NOW WITH ICONS - 2026-08-19. Bob: "can
   you run through the rest of the menu, and give them all icons now please, so they match the
   mega menus?"

   Why PKWARE? (3), Resources (6) and Company (7) were ul.pk-nav__l2 lists of plain text rows.
   They are now the SAME structure the mega panels use - ul.pk-mega__list of
   .pk-mega__link--compact, icon chip plus title - so they inherit every one of the fifteen
   panel tokens and match without a single new colour. 16 new icons, drawn to the same spec as
   the other 29: 24x24 viewBox, fill:none, stroke:currentColor at 1.8, round caps and joins.

   TWO DECLARATIONS IS THE WHOLE COST of reusing the mega link. min-width overrides
   .pk-nav__panel's 280px floor, which would otherwise pad a three-item list out to a box wider
   than its content, and width:max-content lets each panel be exactly as wide as its longest
   label. 14px rather than the mega's 22px because there are no column headings to sit inside.

   THEY ARE DELIBERATELY NOT --mega PANELS. .pk-nav__item--mega makes the <li> position:static
   so the panel anchors to the nav LIST - right for a full-width mega, wrong here: these should
   open directly under their own label, which is what the default .pk-nav__item positioning
   already does.

   Each <ul> carries an aria-label naming its section. The megas get their name from a visible
   .pk-mega__head through aria-labelledby; these have no heading, so the name is stated. */
.pk-nav__panel--icons { min-width: 0; width: max-content; padding: 14px; }

/* THE PLATFORM PANEL'S UPPER HALF IS TWO COLUMNS - 2026-08-19. Bob: "What if we moved Pk
   Encrypt Under PK Protect / Put a title in that column where PK Encrypt Was called Latest
   Publicatioins / ... matching columns", and then, when I had misread the scope: "First
   everything by environment and below, stays the same, we are talking about the upper
   section."

   So BY ENVIRONMENT and its 2x2 grid are byte-identical - only the products row changed.
   Products stack in the left column under their existing heading; the right column, which
   became dead space the moment PK Encrypt moved down, holds the two most recent posts.

   .pk-mega__upper matches .pk-mega__grid's geometry exactly - two equal columns, 20px apart -
   so the new right column lines up with the BY ENVIRONMENT grid directly beneath it rather
   than introducing a second rhythm.

   THE THUMBNAIL IS 96x54 AND SHIPS AT FULL SIZE, which is the one real debt here. These
   featured images are 800x450 with no intermediate sizes generated - two of the three most
   recent posts have none at all - and the theme registers zero add_image_size. Registering one
   would only help images uploaded after it exists, so making this cheap needs a thumbnail
   regeneration across the media library. Recorded rather than done quietly.

   aspect-ratio plus object-fit rather than a fixed height, so a non-16:9 featured image crops
   instead of distorting. overflow:hidden on the wrapper is what makes the radius clip it. */
.pk-mega__upper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.pk-mega__pub { align-items: center; }
.pk-mega__thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--pk-panel-ico-bg);
}
.pk-mega__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-mega__pill {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pk-panel-muted);
}
.pk-mega__pub .pk-mega__title { display: block; }

/* Anchor both mega panels to the nav list instead of to their own <li>. Desktop
   only, and provably a no-op below the breakpoint: the 1200px block sets
   .pk-nav__panel{position:static} for the burger drawer, so the containing block
   stops mattering there. top:100% is unchanged - the list's height is its tallest
   item and every level-1 <li> is the same height, so the panels drop to the same
   y as before. */
@media (min-width: 1201px) {
  .pk-nav__l1 { position: relative; }
  .pk-nav__item--mega { position: static; }
}

@media (max-width: 1200px) {
  .pk-nav__panel--mega,
  .pk-nav__panel--icons { min-width: 0; width: auto; padding: 4px 0 10px; }
  /* width:auto is REQUIRED, not tidy-up. The desktop rule above sets an explicit
     width, which would otherwise survive into the burger panel and hold the
     stacked list at 920px inside a phone-width drawer. */
  /* width:auto is REQUIRED, not tidy-up: the desktop rule sets an explicit width, which
     would otherwise hold the stacked list at 1180px inside a phone-width drawer. The
     span and the split list are unwound for the same reason - one column in a drawer. */
  .pk-nav__panel--mega4 { width: auto; max-width: none; left: auto; transform: none; }
  .pk-nav__panel--mega .pk-mega__col--span2 { grid-column: auto; }
  .pk-nav__panel--mega .pk-mega__list--split {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
  /* The wide item goes back into the flow. A pinned row 7 in a one-column row-flow grid would
     collide with the auto-placed items and jump it out of order in the drawer. */
  .pk-nav__panel--mega .pk-mega__list--split > .pk-mega__item--tail {
    grid-column: auto;
    grid-row: auto;
  }
  .pk-nav__panel--mega .pk-mega__cols { grid-template-columns: 1fr; }
  .pk-nav__panel--mega .pk-mega__upper { grid-template-columns: 1fr; gap: 0; }
  .pk-nav__panel--mega .pk-mega__grid { grid-template-columns: 1fr; gap: 0; }
  .pk-nav__panel--mega .pk-mega__head { padding: 12px 4px 4px; }
  .pk-nav__panel--mega .pk-mega__link,
  .pk-nav__panel--icons .pk-mega__link { padding: 12px 4px; }
  /* THE FIVE HOVER OVERRIDES THAT WERE HERE ARE DELETED - 2026-08-19. They existed only
     because the drawer panel was NAVY while the desktop hover was light grey, so hover
     needed re-stating for the drawer. The panel is now the same light grey in both places
     and the tokens cover both, so these would have fought the new scheme rather than
     supporting it. They are recoverable from git if the drawer ever diverges again. */
}
/* ==========================================================================
   8. PORTED PAGE COMPONENTS
   --------------------------------------------------------------------------
   CSS ported from real production pages, in delimited blocks that name their
   source page.

   This section was originally reserved for the pk27- component styles and
   marked "intentionally empty". Both of those are now wrong, and the header
   is renamed so nobody ports by the old instruction:

   - It is not empty. It holds the home page's #pkw block and .promo.
   - pk27- rules do NOT belong here. They are printed by the PKWARE
     Shortcodes plugin, from pk27_styles(), pk27f_styles(), pk27e_styles()
     and pk27s_styles(). Putting them here creates two sources for the same
     selectors, which already happened once - see the .pk27-grid note further
     down this section.

   Rely on the tokens in section 3 rather than reintroducing literal hex
   values. The one documented exception: colours arriving verbatim in a port
   are left exactly as ported and recorded, so a porting mistake stays
   distinguishable from a deliberate change.
   ========================================================================== */

/* --- begin ported page components --- */

/*
 * PORTED FROM PRODUCTION - 2026-08-10
 * -------------------------------------------------------------------------
 * Source: the live home page, https://staging.pkware.com/ (page id 6),
 * extracted to outgoing/home/. That page's rendered document loads 17 CSS
 * sources; only three are bespoke AND referenced by the hand-authored markup.
 * The other fourteen are Avada, Formidable and Complianz framework and were
 * deliberately NOT ported:
 *
 *   ported:
 *     block [14]  #pkw ...........  36,523 bytes  home page content styles
 *     block [15]  .pk27-grid ......   2,361 bytes  pk27 component
 *     block [12]  .promo ..........     692 bytes
 *
 *   present in production but NOT ported, and why:
 *     block [13]  .pk-header / .pk-nav      the mega menu - no markup for it
 *                                           yet; arrives with the menu port
 *     block [16]  .pk-footer                same, for the site footer
 *     block [17]  .embeddedMessaging*       Salesforce chat widget overrides
 *     block [11]  .with_frm_style           Formidable form overrides
 *     fusion-dynamic-css, formidable-css, cmplz-*, child-style-css,
 *     css-fb-visibility ......... 1.23 MB of framework being retired
 *
 * KNOWN EXCEPTION TO THE PALETTE RULE
 * -------------------------------------------------------------------------
 * Section 3 states that no colour outside the brand palette may be introduced.
 * This ported block breaks that rule: it carries 39 distinct hex values, of
 * which 33 are off-palette (one more, #fff, is simply shorthand for white).
 *
 * They are left verbatim ON PURPOSE. Rewriting production values by eye during
 * a port would change the rendering and make it impossible to tell a porting
 * mistake from a deliberate colour change. Map them to tokens as a separate,
 * reviewable pass once the page is confirmed rendering correctly.
 *
 * SCOPE NOTE
 * -------------------------------------------------------------------------
 * Block [14] is scoped entirely under #pkw and applies to one page, but ships
 * in the site-wide stylesheet, so every page downloads ~36 KB it does not use.
 * The alternative is leaving it inline in that page's content. Kept here for
 * now because it is easier to review in one place.
 */

/* =========== PROMO BAR =========== */
.promo{background:linear-gradient(90deg,#09BCEF,#0FE4A2);color:#082b52;
  font-weight:700;font-size:14.5px;text-align:center;padding:11px 20px;position:relative;z-index:60}
.promo .wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 26px}
.promo .pill{display:inline-flex;align-items:center;gap:8px;background:#1E3074;color:#fff;
  padding:8px 18px;border-radius:999px;font-size:13px;transition:transform .28s,background .28s}
.promo .pill:hover{transform:translateY(-1px);background:#152357}
.promo .pill svg{width:14px;height:14px}

/* Google Fonts: Lato (body/UI). Georgia is a system serif, no load needed. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* ============================================================
   PKWARE.com - Homepage
   Scoped under #pkw. Georgia (display) + Lato (body/UI) only.
   Dark-and-luminous default; .pkw-light / .pkw-grey remap tokens.
   ============================================================ */
#pkw *,#pkw *::before,#pkw *::after{box-sizing:border-box}
#pkw{
  --navy:#1E3074; --cyan:#09BCEF; --cyan-700:#057FA3; --frost:#0FE4A2; --frost-deep:#0B6E4E; --coral:#F95557;
  /* light-forward default */
  --bg:#FFFFFF; --bg-2:#F4F8FD; --bg-3:#EDF4FB; --panel:#FFFFFF;
  --tx:#3D4457; --tx-2:#5C6472; --tx-3:#8A93A8;
  --head:#1E3074; --eb:var(--frost-deep);
  --brd:#E7EAF1; --brd-2:#D8DEE9;
  --glass:#F7F9FC; --glass-2:#FFFFFF;
  --frost-glow:rgba(15,228,162,.40); --cyan-glow:rgba(9,188,239,.42);
  --card-shadow:0 20px 50px -28px rgba(30,48,116,.26);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:calc(1300px + 2 * var(--pk-edge)); --gutter:26px;
  font-family:var(--sans); color:var(--tx); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:18px; line-height:1.7; position:relative; overflow-x:clip;
}
#pkw h1,#pkw h2,#pkw h3,#pkw h4{font-family:var(--serif);font-weight:400;color:var(--head);margin:0;letter-spacing:-.01em}
#pkw p{margin:0}
#pkw a{color:inherit;text-decoration:none}

/* 1.10.56 - AN INLINE LINK IN BODY COPY HAS TO LOOK LIKE A LINK.
   `#pkw a` above is color:inherit with no underline, which is right for the things that
   ARE links but do not look like text - .btn, .tlink, .card, .gpi-card, nav. It is wrong
   for a link inside a sentence: it takes the paragraph's own colour and has no underline,
   so it is completely invisible on EVERY background.

   Bob 2026-08-13, on the Trust Center link: "This block goes back to white background, so
   the link can be seen." The tint was not the cause and white alone would not have fixed
   it - which is why this rule exists as well as the background change.

   IT WAS NEVER A ONE-PAGE PROBLEM: 44 inline links across 15 fragments were affected,
   including real editorial links like /blog/data-compliance-is-good-for-business sitting
   on the word "compliance". Readers could not see any of them.

   `p a:not([class])` IS THE WHOLE TRICK, and it is why this is safe. Every styled link in
   this theme carries a class - .btn, .tlink, .gpi-card, .office-map, .pkbc-btn. An
   editorial link written into a sentence carries none. So the selector reaches exactly the
   links that need to look like links and cannot touch a button that happens to sit inside
   a paragraph. The battle cards are excluded twice over: they render in .pkbc-page, not
   #pkw, and their in-paragraph links are .pkbc-btn.

   Colour AND underline, not colour alone: colour on its own fails WCAG 1.4.1, because a
   reader who cannot distinguish the hue has no remaining cue that the text is a link. */
#pkw p a:not([class]) { color: var(--cyan-700); text-decoration: underline;
                        text-decoration-thickness: 1px; text-underline-offset: 2px; }
#pkw p a:not([class]):hover { text-decoration-thickness: 2px; }
#pkw img{max-width:100%;display:block}
#pkw ul{margin:0;padding:0;list-style:none}
#pkw button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
#pkw :focus-visible{outline:2px solid var(--frost);outline-offset:3px;border-radius:6px}

/* ---- section shells & rhythm ---- */
/* 118px -> 60px, Bob's value, 2026-08-12. Applied globally to every .sec as given. */
#pkw .sec{position:relative;padding:var(--pk-sec-y) 0;background-color:var(--bg)}
/* ALIGNED TO THE HEADER 2026-08-12. --maxw went 1240px -> 1300px and the horizontal
   padding moved from --gutter (26px) to --pk-edge, which is 0 on desktop. Both were
   needed: the narrower cap contributed 30px of the misalignment and the gutter the
   other 26px, for the 56px indent Bob saw on home, products and why-pk-protect.
   --gutter is left defined at 26px because it is a #pkw token other ports may still
   reach for; it simply no longer sets the page edge. */
#pkw .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pk-edge);position:relative;z-index:2}
#pkw .pkw-light{background-color:#FFFFFF;color:#484848;
  --head:#1E3074; --tx:#484848; --tx-2:#5C6472; --tx-3:#8A93A8;
  --eb:var(--frost-deep); --brd:#E7EAF1; --brd-2:#D8DEE9;
  --glass:#F7F9FC; --glass-2:#FFFFFF;}
#pkw .pkw-grey{background-color:#EDF4FB;
  background-image:radial-gradient(1100px 460px at 82% -12%,rgba(9,188,239,.09),transparent 60%),radial-gradient(900px 420px at 8% 118%,rgba(15,228,162,.07),transparent 60%);
  color:#484848;
  --head:#1E3074; --tx:#484848; --tx-2:#5C6472; --tx-3:#8A93A8;
  --eb:var(--frost-deep); --brd:#E1E7F1; --brd-2:#D2DAE7;
  --glass:#FFFFFF; --glass-2:#FFFFFF;}
/* strategic dark anchor sections */
#pkw .pkw-dark{background-color:#070C24;color:#EEF2FF;
  --bg:#070C24; --head:#FFFFFF; --tx:#EEF2FF; --tx-2:#AEB8DC; --tx-3:#8791B8;
  --eb:var(--frost); --brd:rgba(255,255,255,.10); --brd-2:rgba(255,255,255,.17);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);}
#pkw .pkw-dark .eyebrow::before{background:var(--frost);box-shadow:0 0 10px var(--frost-glow)}
#pkw .pkw-dark .frost-word{color:var(--frost)}
#pkw .pkw-dark .card{box-shadow:0 24px 60px -34px rgba(0,0,0,.7)}
/* THE .wash RULES WERE DELETED HERE - 2026-08-17. Three of them:

       #pkw .wash          position:absolute; inset:0; overflow:hidden
       #pkw .wash::before  780x780 circle, top:-340px right:-180px,
                           radial-gradient(circle, rgba(9,188,239,.22), transparent 62%)
       #pkw .wash::after   640x640 circle, bottom:-320px left:-160px,
                           radial-gradient(circle, rgba(15,228,162,.17), transparent 62%)

   Bob: "I want the wash off the headers, all of them, alltogether." The <div class="wash">
   is gone from all 41 heroes, so these matched nothing - but dead CSS is not harmless here:
   it would repaint the moment anyone pasted a hero shape carrying that div, which is
   exactly how the rule broke the last time (see "A TEXT-ONLY HERO GETS NO .wash" in
   component-registry.md - the div got copied in by reflex one day after the rule was
   written, which is why verify-fragment.ps1 checks for it).

   verify-fragment.ps1's `wash on a text-only hero` assertion still passes - it asserts
   ZERO, and there are now zero everywhere, not just on text-only heroes.

   STAGING NEVER HAD THIS. It has no .wash element on any page. See the note further down
   for what staging actually does, on the image column rather than the section. */#pkw .pkw-light .card,#pkw .pkw-grey .card{box-shadow:0 16px 44px -24px rgba(30,48,116,.28)}

/* ---- eyebrow / label ---- */
#pkw .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--eb);margin:0 0 22px}
#pkw .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--frost);
  box-shadow:0 0 10px var(--frost-glow)}
#pkw .pkw-light .eyebrow::before,#pkw .pkw-grey .eyebrow::before{background:var(--frost-deep);box-shadow:none}

/* ---- type helpers ---- */
#pkw .h1{font-size:clamp(38px,5vw,62px);line-height:1.08}
#pkw .h2{font-size:clamp(30px,3.5vw,46px);line-height:1.16}
#pkw .h3{font-size:clamp(24px,2.4vw,36px);line-height:1.28}
#pkw .lead{font-size:20px;line-height:1.7;color:var(--tx-2);max-width:56ch}
#pkw .frost-word{color:var(--frost-deep)}
#pkw .pkw-light .frost-word{color:var(--frost-deep)}
#pkw .kicker-num{font-family:var(--serif);color:var(--frost)}

/* ---- buttons ---- */
#pkw .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;
  font-size:15.5px;line-height:1;padding:15px 26px;border-radius:999px;transition:all .28s cubic-bezier(.4,0,.2,1);
  border:1.5px solid transparent;white-space:nowrap}
#pkw .btn svg{width:16px;height:16px;transition:transform .28s ease}
#pkw .btn-green{background:var(--frost);color:#062B20}
#pkw .btn-green:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px var(--frost-glow);filter:brightness(1.06)}
#pkw .btn-cyan{background:var(--cyan);color:#fff}
#pkw .btn-cyan:hover{background:var(--navy);transform:translateY(-2px)}
#pkw .btn-outline{border-color:var(--brd-2);color:var(--head)}
#pkw .btn-outline:hover{background:var(--cyan);border-color:var(--cyan);color:#fff;transform:translateY(-2px)}
#pkw .btn:hover svg{transform:translateX(4px)}
#pkw .btn-lg{padding:18px 32px;font-size:16.5px}
#pkw .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--eb)}
#pkw .tlink svg{width:15px;height:15px;transition:transform .28s ease}
#pkw .tlink:hover svg{transform:translateX(5px)}

/* ---- chips ---- */
#pkw .chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:999px;
  border:1px solid var(--brd-2);color:var(--tx-2);background:var(--glass)}

/* ---- generic card ---- */
#pkw .card{background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--brd);
  border-radius:18px;transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .28s,box-shadow .28s}

/* ---- aurora atmosphere (dark sections) ---- */
/* THE BLOB LAYER IS CONSTRAINED TO THE 1300px CONTAINER - 2026-08-19, Bob's rule, tested in
   devtools and applied verbatim: "If the blob layer was just limited to 1300 px width I would
   be golden... This fixes it for me, simply."

   WHY IT WORKS, AND WHY IT BEATS MOVING THE BLOBS. .aurora is position:absolute with inset:0,
   so left:0 + right:0 + auto margins centres it - the classic trick. That makes the layer a
   1300px box centred in a full-bleed section, and every blob inside it is suddenly measured
   from the CONTAINER edge instead of the window edge. The alternative was per-blob calc()
   arithmetic on b1 and b2; this is two declarations and any blob added later inherits the
   anchoring for free.

   DELIBERATELY NOT transform:translateX(-50%). That would make .aurora a stacking context,
   and .blob carries mix-blend-mode:screen - the blobs would blend against the layer instead
   of the navy behind it. Auto margins create no stacking context.

   overflow WENT FROM hidden TO visible, and that is required rather than incidental. Clipping
   a 1300px layer would cut the glow into a crisp rectangle and leave a visible vertical seam
   at 1300px on any wider monitor; blur does not survive a clip. It is safe for the 42 CTA
   bands because #pkw .cta-ads-inline sets overflow:hidden itself, so the section still stops
   the bleed at the window edge.

   THE TWO NON-CTA AURORAS DO NOT GET THAT PROTECTION, and this is the one thing to watch. The
   b3 navy blob on / and on /why-pk-protect sits in a plain `sec pkw-dark`, which sets no
   overflow, so `visible` removes the only clip it had. #pkw is overflow-x:clip, so nothing
   spills sideways, but a tall b3 can now bleed VERTICALLY into the next section. Reported to
   Bob with both URLs rather than pre-empted. If it shows, the fix is to scope `overflow:
   visible` to `#pkw .cta-ads-inline .aurora` and leave this rule hidden.

   The !important is Bob's and is kept. It is currently redundant - measured, 0 other rules in
   this file set max-width on .aurora - so it can come out whenever someone wants a
   per-section override, which is the one thing it blocks. */
#pkw .aurora {
	position: absolute;
	inset: 0;
	overflow: visible;
	z-index: 0;
	pointer-events: none;
	max-width: 1300px !important;
	margin-left: auto;
	margin-right: auto;
}
#pkw .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen}
/* b1 AND b2 REPOSITIONED AGAINST THE 1300px LAYER - 2026-08-19, Bob's values, arrived at
   visually and applied verbatim. b1 top -220 -> -280, right -160 -> -300. b2 bottom -240 ->
   -160, left -140 -> -280. Widths, colours, opacity and both drift animations are unchanged.

   These are container-relative now, which is what makes them worth reading: the rule above
   caps .aurora at 1300px, so an offset here is measured from the CONTENT edge, not the window.
   b2 at left:-280px is exactly minus half of its 560px, so its centre sits ON 0 - the target
   from the original question. b1 at right:-300px puts its centre at 1280px, 20px inside the
   right edge rather than on it; -320px would be dead on 1300. Left at Bob's number, because he
   set it by eye and the eye outranks the arithmetic here.

   No media query needed for "desktop and tablet" - the block below already hides both under
   860px, so these values only ever render above it. */
#pkw .blob.b1{width:640px;height:640px;background:radial-gradient(circle,var(--cyan),transparent 62%);top:-280px;right:-300px;animation:drift1 38s ease-in-out infinite}
#pkw .blob.b2{width:560px;height:560px;background:radial-gradient(circle,var(--frost),transparent 62%);bottom:-160px;left:-280px;opacity:.34;animation:drift2 44s ease-in-out infinite}
#pkw .blob.b3{width:420px;height:420px;background:radial-gradient(circle,var(--navy),transparent 60%);top:30%;left:40%;opacity:.6;animation:drift1 32s ease-in-out infinite}
/* b1 AND b2 ARE HIDDEN ON MOBILE - 2026-08-19. Bob: "make them display:none for mobile
   please, it looks awful, just the two blobs .blob.b1 and .blob.b2."

   THE CAUSE IS THE RULE ABOVE, and it is worth naming. Once .aurora is capped at 1300px it
   goes FULL WIDTH below that, so a 640px and a 560px ball land hard against both screen
   edges of a phone instead of sitting inside a wide band. The treatment reads as atmosphere
   at 1600px and as two coloured smears at 390px.

   860px, BECAUSE THAT IS THIS FILE'S BREAKPOINT, not a new one - 14 existing blocks use it,
   more than any other, and it is where most of the site's grids collapse to one column. If it
   should hold on longer, 640px and 560px are the next two the file already uses; it is one
   number.

   b3 IS DELIBERATELY LEFT ALONE, per "just the two blobs". It is the interior navy ball on /
   and /why-pk-protect and it is not part of the ad. This selector is unscoped and still
   touches only the 42 ad bands, because b1 and b2 exist nowhere else - measured: 84 of the
   86 .blob elements on the site are the ads' b1/b2 pairs, and both strays are b3. */
@media (max-width: 860px) {
  #pkw .blob.b1,
  #pkw .blob.b2 { display: none; }
}
/* atmospheric depth - film grain + soft light, no AI grid */
#pkw .grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#pkw .sweep{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#pkw .sweep::before{content:"";position:absolute;top:-40%;left:-10%;width:52%;height:180%;
  background:linear-gradient(105deg,transparent,rgba(9,188,239,.05) 45%,rgba(15,228,162,.06) 55%,transparent);
  transform:rotate(8deg);filter:blur(6px)}

/* THE SWEEP NOW TRAVELS - 2026-08-19. Bob: "can you do something with that navy background,
   that would render a cool html5 background, slightly animated, to get peoples attention?"

   NOTHING NEW WAS ADDED TO THE MARKUP, AND THAT IS THE POINT. .sweep is already a 52%-wide,
   180%-tall diagonal band of faint cyan and frost, blurred 6px, sitting in all 42 ad bands -
   and it was completely static. Measured: `class="sweep"` appears 42 times inside
   .cta-ads-inline sections, 0 times anywhere else on any page, and 0 times in all 345 posts.
   So this is a light pass across the band using an element that was already there, costing one
   keyframe.

   THE BLOBS ARE UNTOUCHED. b1 and b2 keep the positions Bob set by eye this afternoon, keep
   their drift, and keep the 860px hide. That is deliberate: the dormant
   .cta-ads-inline--mesh modifier further down is the bigger swing, and it works by hiding
   .aurora and .sweep entirely - so folding that in would throw away this afternoon's tuning.
   His call, not an assumption.

   rotate(8deg) IS REPEATED IN EVERY KEYFRAME because `animation` replaces the WHOLE transform
   property. Omitting it would drop the 8-degree tilt for the duration of the pass and snap it
   back at the end - the same trap that governs the .form-card pulse and the .blob drift.

   TRAVEL, CHECKED RATHER THAN GUESSED. translateX percentages resolve against the element's
   OWN width, which is 52% of the section. So -40% puts its left edge at -10% - 20.8% = -30.8%
   (fully clear to the left) and 210% puts it at -10% + 109.2% = 99.2% (fully clear to the
   right). It enters and exits off-frame at both ends.

   linear, NOT ease-in-out: ease would be fastest through the middle, and a light pass that
   accelerates across the centre of the band reads as a glitch rather than as light.

   IT RESTS. The transform finishes at 70% of the cycle and the last 30% - about 7 seconds - is
   empty. A pass with no gap reads as a loading shimmer, which is the opposite of subtle.

   REDUCED MOTION IS ALREADY FREE: `#pkw *{animation:none!important}` drops this to the base
   rule above, which is exactly the static band the site renders today. */
@keyframes pk-cta-sweep {
  0%   { transform: translateX(-40%) rotate(8deg); opacity: 0; }
  8%   { opacity: .9; }
  55%  { opacity: .9; }
  70%  { transform: translateX(210%) rotate(8deg); opacity: 0; }
  100% { transform: translateX(210%) rotate(8deg); opacity: 0; }
}
/* SWEEP AND GRAIN WERE BOTH RUNNING AND NEITHER WAS VISIBLE - 2026-08-19. Bob: "what about
   sweep and grain, doing anything at all?" Measured before answering: each appears in exactly
   the 42 ad bands, 0 elsewhere on any page, 0 in all 345 posts. Both are ad-exclusive, so
   raising them cannot reach anything else.

   THE SWEEP was animating since 1.12.81 but its own gradient is rgba(...,.05) and .06 - five
   and six percent - blurred 6px, against a plane that now swings up to #1B2C6B. It was
   arithmetically present and visually absent. Alphas roughly tripled here, in the CTA-scoped
   rule rather than in the base #pkw .sweep::before, so the original stays intact for any future
   non-ad use.

   THE GRAIN was opacity .045 and completely STATIC. Now .075 and shifted on a 4-step
   steps(1,end) loop - the 140px noise tile jumps to a different offset about three times a
   second, which is film grain rather than a slide. steps() is the whole point: interpolating
   the position would smear the noise into a moving texture, which reads as cheap. This is
   theory B from the list.

   1.4s / 4 STEPS IS ~3fps, chosen because that is roughly projected film. Slower reads as a
   glitch, faster reads as TV static. It is one number.

   BOTH DIE UNDER REDUCED MOTION, being inside #pkw - the grain holds at one offset and the
   sweep at opacity 0. That is the right outcome and it is Bob's stated preference. */
#pkw .cta-ads-inline .sweep::before {
  background: linear-gradient(105deg, transparent, rgba(9,188,239,.16) 45%, rgba(15,228,162,.18) 55%, transparent);
  animation: pk-cta-sweep 24s linear infinite;
}
#pkw .cta-ads-inline .grain {
  opacity: .075;
  animation: pk-grain-shift 1.4s steps(1, end) infinite;
}
@keyframes pk-grain-shift {
  0%   { background-position:    0    0; }
  25%  { background-position: -37px  21px; }
  50%  { background-position:  23px -44px; }
  75%  { background-position: -18px -12px; }
  100% { background-position:    0    0; }
}

/* THE BLOBS BREATHE INSTEAD OF WANDERING - 2026-08-19. Bob: "well, the blobs are not
   animated, I am trying to do something simple here, not reinvent this."

   HE IS RIGHT IN EFFECT AND WRONG ON THE LETTER, which is worth recording because it explains
   the fix. b1 and b2 DO carry animations - drift1 38s and drift2 44s - but those translate by
   60-70px over about 19 seconds on a ball with an 80px blur. That is below the threshold of
   noticing. Declared, not perceptible.

   SCALE AND OPACITY, NOT TRANSLATE, AND THAT IS THE WHOLE IDEA. Bob set b2's centre exactly on
   0 and b1's at 1280px by eye this afternoon. Making the drift big enough to see would move
   both off those positions - so the motion goes into size and brightness instead, and the
   centres do not move at all. A blurred glow that swells and dims reads as alive; the same
   glow sliding 60px does not.

   drift1 AND drift2 ARE LEFT ALONE ON PURPOSE. b3 - the navy ball on / and /why-pk-protect -
   shares drift1, and it is not part of the ad. Editing those keyframes to make the ad move
   would have moved a blob on two unrelated pages.

   NO translate() IN THESE KEYFRAMES, so scale is the entire transform and there is nothing to
   clobber. Different durations on the two balls so they never pulse in unison, which is what
   would make it read as a mechanism rather than as atmosphere. b2 keeps its .34 base opacity
   as the ceiling - it is the frost ball and Bob set that value.

   ONE DIAL: the scale figure. 1.18 and 1.15 are visible without drawing the eye off the
   heading. Lower them toward 1.08 for a whisper, raise toward 1.3 for a pulse. */
@keyframes pk-blob-breathe-1 {
  0%, 100% { transform: scale(1);    opacity: .38; }
  50%      { transform: scale(1.18); opacity: .58; }
}
@keyframes pk-blob-breathe-2 {
  0%, 100% { transform: scale(1);    opacity: .22; }
  50%      { transform: scale(1.15); opacity: .34; }
}
#pkw .cta-ads-inline .blob.b1 { animation: pk-blob-breathe-1 11s ease-in-out infinite; }
#pkw .cta-ads-inline .blob.b2 { animation: pk-blob-breathe-2 14s ease-in-out infinite; }
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-40px) scale(1.1)}}

/* ---- reveal on scroll ---- */
#pkw .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
#pkw .reveal.in{opacity:1;transform:none}


/* =========== HERO =========== */
/* PADDING-BOTTOM BROUGHT INTO THE SECTION RHYTHM - 1.10.41, 2026-08-13.
   Was 104px. Bob, looking at /demo: "I think there is too much padding here, I
   thought we set the hero padding to a specific margin, this has 104px on the
   bottom."

   He was right that a decision existed and right that this violated it. #pkw .sec is
   60px top and bottom, set at his request. The hero's 104px was NOT a decision - it
   is a leftover from the Avada-era page CSS, where sections were 104px throughout,
   and it never got brought in line when .sec went to 60px. The hero was silently the
   only section edge on the site that did not follow the rhythm.

   The visible cost was additive and that is why it read as excessive: 104px of hero
   bottom plus 60px of the next section's top is 164px of whitespace, where every
   other section boundary on the site is 60 + 60 = 120px.

   padding-top stays 0px. THAT one IS Bob's setting and is deliberate - see the note
   in the breadcrumbs block, where .pk-crumbs' negative top margin and the 640px
   query both depend on it.

   Site-wide: this changes the hero on all 33 earlier pages too, which is the point.
   If 120px between sections is itself too much, that is a separate one-number change
   to #pkw .sec affecting every section boundary, and it is Bob's call. */
#pkw .hero{padding:0px 0 var(--pk-sec-y-hero);position:relative;overflow:hidden;background-color:var(--bg)}

/* THE FIRST SECTION ON A PAGE HAS NO TOP PADDING - 2026-08-19. Bob: "can we tighten up the
   hero or whatever these are, there is way too much padding in the very top section", naming
   /technical-support and /contact, with "/partners has a really nice tight header when there is
   no image or anything in the hero section".

   WHAT MAKES /partners TIGHT IS THE RULE DIRECTLY ABOVE: .hero is padding:0 0 30px. Zero on
   top. So the effect he likes is not a hero treatment at all, it is simply the page's first
   band starting flush under the breadcrumbs. This generalises that to any first section.

   MEASURED: only 5 published pages do not open with a .hero, and two of those are
   /landing/cmmc-compliance and /landing/youve-secured-the-ehr-phi-went-somewhere-else, which
   sit in #pk-landing-wrapper and carry NO #pkw at all - so this selector cannot reach them and
   /landing stays out of scope as instructed. That leaves three:

       /contact             was 88px, because the padding routine gave its first .sec
                            sec--roomy - a real over-correction, and Bob spotted it
       /technical-support   was 30px on the token
       /events             was on .pk-archive. NOT a page Bob named - listed here because a
                            general rule reaches it and he should be able to veto that

   ON THE 45 PAGES THAT DO OPEN WITH A .hero THIS CHANGES NOTHING, because their top padding is
   already 0. The rule is a no-op there by construction rather than by luck.

   :first-of-type, NOT :first-child. #pkw's first child node is not reliably the section - there
   are authoring comments and whitespace in that position on several pages - and :first-child
   would silently fail on those. :first-of-type matches the first <section> among its siblings
   regardless of what precedes it.

   IT BEATS .sec--roomy ON SPECIFICITY, not on source order: #pkw > section:first-of-type is
   (1 id, 1 pseudo-class, 1 element) against #pkw .sec--roomy's (1 id, 1 class). That matters
   because this rule sits ~900 lines EARLIER in the file than .sec--roomy, so an order-based
   win was never available. Bottom padding is untouched - only the top is the complaint. */
#pkw > section:first-of-type { padding-top: 0; }
#pkw .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
#pkw .hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:var(--glass);border:1px solid var(--brd-2);font-weight:700;font-size:13px;color:var(--tx-2);margin-bottom:26px}
#pkw .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 10px var(--frost-glow)}
#pkw .hero h1{font-size:clamp(38px,5vw,62px);line-height:1.07;margin-bottom:24px;text-wrap:balance}
#pkw .hero .frost-word{color:var(--cyan-700)}
#pkw .hero .lead{margin-bottom:34px}
#pkw .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
#pkw .hero-cta .micro{font-size:13.5px;color:var(--tx-3);flex-basis:100%;margin-top:2px}
#pkw .hero-trust{margin-top:36px;padding-top:24px;border-top:1px solid var(--brd)}
#pkw .hero-trust .lbl{display:block;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px}
#pkw .hero-stats{display:flex;align-items:stretch;gap:32px;flex-wrap:wrap}
#pkw .hs{display:flex;flex-direction:column;gap:5px}
#pkw .hs-n{font-family:var(--serif);font-size:28px;color:var(--tx);line-height:1;display:flex;align-items:baseline;gap:7px}
#pkw .hs-n em{font-style:normal;font-size:13px;color:var(--tx-3);font-family:var(--sans);font-weight:700;letter-spacing:.02em}
#pkw .hs-l{font-size:13px;color:var(--tx-3);font-weight:700}
#pkw .hs-div{width:1px;background:var(--brd-2);flex:none;align-self:stretch}
#pkw .award{display:inline-flex;align-items:center;gap:18px;margin-bottom:24px;padding:14px 22px 14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--brd-2)}
#pkw .award img{width:92px;height:92px;flex:none}
#pkw .award .aw-t{font-family:var(--serif);font-size:18px;line-height:1.28;color:var(--head);max-width:22ch}
#pkw .award .aw-t em{display:block;font-family:var(--sans);font-style:normal;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--frost-deep);margin-bottom:6px}

/* staggered hero rise */
#pkw .rise{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.6,.2,1) forwards}
#pkw .rise.d1{animation-delay:.05s}#pkw .rise.d2{animation-delay:.17s}#pkw .rise.d3{animation-delay:.29s}
#pkw .rise.d4{animation-delay:.41s}#pkw .rise.d5{animation-delay:.53s}
@keyframes rise{to{opacity:1;transform:none}}

/* =========== COVERAGE PANEL (signature) =========== */
#pkw .cov-stage{perspective:1600px;position:relative}
#pkw .cov-stage{perspective:1600px;position:relative}
/* THE BLANKET IMAGE GLOW WAS REMOVED HERE - 2026-08-17. It was:

       #pkw .cov-stage::before{content:"";position:absolute;z-index:0;inset:-8% -12%;
         pointer-events:none;
         background:radial-gradient(56% 52% at 66% 32%,rgba(9,188,239,.32),transparent 70%),
                    radial-gradient(46% 46% at 34% 82%,rgba(15,228,162,.26),transparent 72%)}

   Two reasons, and the second is why it could not just be retuned.

   IT WAS THE WRONG TRANSLATION OF STAGING'S EFFECT. Staging paints two 300px SOLID circles
   with filter:blur(70px) at opacity .4 in ONE colour. This was percentage-sized
   radial-gradients in TWO colours - cyan and frost. Bob, comparing them: "I want the
   correct wash on the images, in the header, which is different I believe... that is a
   major problem for me."

   AND IT APPLIED TO EVERY .cov-stage. Measured against staging page by page, matching on
   the hero image's own filename: 21 hero image columns carry gradientCircles--cyan, one
   carries --pknavy, and 19 CARRY NOTHING. A blanket rule cannot express that, so the glow
   is now the opt-in .pk-glow component below.

   The filename test mattered. /careers and /company both carry gradientCircles on staging,
   but on mid-page VIDEO blocks, not on the hero - the registry already recorded
   --pknavy-tight as "for videos on company". Counting the class per page would have put a
   hero glow on two pages that have none. */

/* ---------- .cta-final-post - the closing CTA band, for POSTS ---------------
   Added 2026-08-17. Bob: "focus on buidling a cta-final-post class then, so at least they
   are consisten on the 2026 data breach report, and other cta we need to convert or share
   with posts."

   WHY IT CANNOT JUST BE .cta-final. All eight cta-final rules are scoped `#pkw .sec.cta-final`
   and a POST DOES NOT RENDER INSIDE #pkw - measured on /blog/2026-data-breaches, the chain is
   body > #main.site-main > article.entry--single > .entry-content > .pkb. Dropping the
   existing class on a post emits correct markup that matches no rule. That is the same trap
   that made the trust band render unstyled inside #pk-landing-wrapper.

   THIS IS A PORT OF WHAT IS THERE, NOT A REDESIGN. Every value below is read off the
   inline-styled block it replaces - 1,225 characters repeated 6 times on the 2026 round-up
   and 11 times on 2025, with ZERO classes on any element, so nothing about it could be
   changed in one place. Layout stays a two-column row with the copy left and the button
   right, because that is what the page does today.

   1300px, NOT 1240px. Five of the six said 1300 and the first said 1240 - same character
   count, so only an ordinal comparison found it. Bob: "we should be at 1300px". The class
   ends that class of drift by having one value.

   SPECIFICITY IS DELIBERATE AND IT IS THE WHOLE REASON THIS NEEDED CARE. Inline styles beat
   everything, so the old block was immune to the page's own rules. Classes are not:

       .pkb a { color:#1E3074 }                (0,2,0)  would repaint the button text navy
       .entry-content > * + * { margin-block-start } already applies to the section today

   So the button is `.cta-final-post a.cta-final-post__btn` at (0,2,1), which beats .pkb a
   without resorting to an id or !important. The heading and paragraph are (0,2,0) for the
   same reason - .entry-content and .pkb are free to add element rules later.

   TOKENS WHERE THEY MATCH, LITERALS WHERE THEY DO NOT. --serif is already
   Georgia,"Times New Roman",serif and --frost is already #0FE4A2, so those are var() with
   the literal as fallback - the fallback is what applies here, because both are declared on
   #pkw and a post cannot see them. #AEB8DC and #062B20 stay literals: #AEB8DC is the
   footer's light-on-dark text and is deliberately literal elsewhere in this file too, and
   #062B20 is the ink on the frost pill and has no token.

   THE ICON STAYS <i data-lucide="arrow-right">. assets/js/breach-page.js swaps it for an
   inline SVG at runtime, which is why viewing the DOM shows an <svg class="pkb-icon"> that
   is nowhere in the database. Sizing is here rather than inline on the <i> so it survives
   the swap. */
.cta-final-post { position: relative; overflow: hidden; background: #070C24; }
/* TRIED AND ROLLED BACK, 2026-08-19, same day. The page ad's treatment was extended to this
   band - the ::before glows capped to 1300px and breathing, plus a travelling sheen on ::after
   reusing pk-cta-sweep, with its own reduced-motion guard. Bob looked at it and declined:
   "roll that back on the data breaches, I will live without it." This ::before is back to the
   two static glows exactly as they were.

   KEPT AS A NOTE BECAUSE ONE FINDING IN IT IS STILL TRUE AND STILL COSTS TIME: A POST HAS NO
   #pkw. Verified on the served page, 0 occurrences of id="pkw". So nothing scoped to #pkw
   reaches this class - not .aurora, .blob or .sweep - and neither does
   `@media(prefers-reduced-motion:reduce){#pkw *{animation:none!important}}`. Anything animated
   here in future must carry its own guard. That is the second place today where the missing
   #pkw mattered, after .pk-btn-demo in the header.

   Scope, measured at the time: 17 sections across exactly 2 posts - /blog/2026-data-breaches
   (6) and /blog/2025-data-breaches (11) - and 0 on pages. */
.cta-final-post::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(680px 440px at 82% -14%, rgba(9,188,239,.24), transparent 62%),
              radial-gradient(560px 400px at 8% 116%, rgba(15,228,162,.16), transparent 62%);
}
.cta-final-post .cta-final-post__inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 92px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}
.cta-final-post .cta-final-post__copy { max-width: 60ch; }
.cta-final-post .cta-final-post__h {
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-weight: 400;
  color: #FFFFFF;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.16;
  margin: 0 0 16px;
}
.cta-final-post .cta-final-post__p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #AEB8DC;
}
.cta-final-post a.cta-final-post__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16.5px;
  padding: 18px 32px;
  border-radius: 999px;
  background: var(--frost, #0FE4A2);
  color: #062B20;
  white-space: nowrap;
  text-decoration: none;
}
.cta-final-post a.cta-final-post__btn:hover { color: #062B20; }
.cta-final-post a.cta-final-post__btn > i,
.cta-final-post a.cta-final-post__btn > svg { width: 16px; height: 16px; flex: none; }
/* ---------- NO GRADIENT BALLS ON HEROES OR HERO IMAGES ----------------------
   Removed 2026-08-17 at Bob's direction: "better yet, strip all the gradient balls from
   the images too / you and I can start again, and use html5 to spice this up".

   Three things were painting them and all three are gone:
     #pkw .wash                 two 780px/640px radial-gradient balls across the whole
                                full-bleed hero, cyan AND frost. Not on staging at all.
     #pkw .cov-stage::before    a second glow behind every hero image, percentage-sized
                                radial-gradients, also two colours.
     .pk-glow / --cyan / --navy the faithful port of staging's, added and removed the
                                same hour. It rendered top-right but not bottom-left.

   STAGING'S VALUES, RECORDED BECAUSE DERIVING THEM WAS THE EXPENSIVE PART. From
   /wp-content/themes/Avada-Child-Theme/style.css, read 2026-08-17. The class sits on the
   COLUMN THAT HOLDS THE HERO IMAGE, never on the section:

       .gradientCircles--cyan::before, ::after {
         width:300px; height:300px; border-radius:50%;
         background:#09bcef;  filter:blur(70px);  opacity:.4;  pointer-events:none }
       ::before { bottom:-30px; left:0;  z-index:-1 }
       ::after  { top:-30px;   right:0;  z-index:-1 }

       --pknavy        the same, background:#1e3074
       --pknavy-tight  the same, offsets +40px instead of -30px, and it adds
                       `img { border-radius:20px !important }` - the video treatment

   WHICH PAGES HAVE IT ON STAGING, measured page by page and matched on the hero image's
   own FILENAME rather than by counting the class: 21 hero image columns carry --cyan, one
   (/company/pkware-responsible-ai) carries --pknavy, and 19 CARRY NOTHING. /careers and
   /company carry the class on mid-page video blocks, not on the hero - counting per page
   would have put a hero glow on two pages that have none.

   AND THE UNSOLVED PART, worth knowing before anyone tries again. The port rendered the
   top-right circle and not the bottom-left. Not diagnosed - Bob called the whole approach
   off first. The suspects, in order: #pkw .hero is overflow:hidden and the bottom circle
   sits 30px BELOW its box; .cov-art carries a mask that fades its own bottom; and
   .cov-stage has no height of its own on 34 of the 41 heroes because .cov-art is absolute,
   so `bottom` has little to anchor to even with align-self:stretch. Whatever replaces this
   should not be anchored to .cov-stage without giving it a real box first. */
#pkw .cov-art{position:absolute;z-index:1;pointer-events:none;width:132%;right:-15%;top:-72px;
  filter:drop-shadow(0 34px 62px rgba(9,188,239,.42));
  -webkit-mask:linear-gradient(180deg,#000 76%,transparent);mask:linear-gradient(180deg,#000 76%,transparent);
  animation:artfloat 7.5s ease-in-out infinite}
/* .cov-art--crisp - NO BOTTOM FADE. Added 2026-08-19. Bob, after the 37 hero images moved to
   the featured image: "there is like a haze at the bottom of each image, that needs to go
   away for these, that has to be crisp but leave it in everywhere else, even if you have to
   build a new class just for these."

   THE HAZE IS THE MASK ON .cov-art ABOVE - linear-gradient(180deg,#000 76%,transparent),
   which dissolves the bottom quarter of the image. It was written for the near-square product
   renders, where the art bleeds off the bottom of the stage and the fade hides the cut. The
   800x450 featured images have a real bottom edge, and fading it reads as a smudge rather
   than as depth.

   REMOVING THE MASK IS THE WHOLE RULE. The drop-shadow and the artfloat animation are left
   alone deliberately - Bob asked for the haze, not the glow or the motion.

   IT IS APPLIED BY THE SHORTCODE, NOT BY A PAGE. pkware_sc_hero_art() emits
   `class="cov-art cov-art--crisp"`, so the split is exactly "rendered from the featured image
   or not" and no content carries the decision. Anything still holding an inline
   <img class="cov-art"> keeps the fade - today that is the home page and nothing else.

   Both prefixes, because the unprefixed mask property is not universal on older Safari, and
   the rule above sets both. Overriding only one would leave the fade in place there.

   border-radius:20px ADDED SAME DAY, and ONE declaration does what Bob asked for twice. Bob:
   "Can we make both the hazy background image holder, and the image itself, like 20px border
   radius so it matches the rest of the site?"

   THERE IS NO HOLDER ELEMENT. The rendered hero is a .cov-stage containing nothing but the
   img - the old #pkw .cov-stage::before glow was deleted on 2026-08-17 and .pk-glow is opt-in
   and not used here. The "hazy background" he is seeing is the image's OWN
   filter:drop-shadow(0 34px 62px rgba(9,188,239,.42)), and a drop-shadow is generated from
   the element's rendered ALPHA SHAPE - so clipping the img with border-radius rounds the glow
   with it, for free, in the same declaration. Adding a second rounded box behind it would
   have been a second element painting the same corner twice.

   20px is the site's card radius - .quote-card, .form-card and .cov all use it - so this is
   the existing token value rather than a new one. */
#pkw .cov-art--crisp { -webkit-mask: none; mask: none; border-radius: 20px; }
@keyframes artfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
#pkw .cov{z-index:2;position:relative;margin:var(--pk-gap-xl) auto 0;max-width:86%;background:linear-gradient(165deg,rgba(19,28,72,.95),rgba(10,16,44,.99));
  border:1px solid var(--brd-2);border-radius:20px;padding:22px;overflow:hidden;
  box-shadow:0 64px 120px -44px rgba(6,12,40,.9),0 24px 48px -28px rgba(9,188,239,.35),0 0 0 1px rgba(255,255,255,.04) inset;
  transform:rotateY(-10deg) rotateX(5deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#pkw .cov-stage:hover .cov{transform:rotateY(-4deg) rotateX(2deg) translateY(-4px)}

/* ---------- hero art with no coverage panel ---------------------------------
   Added 2026-08-12. Bob: "That imagery on the right, on only these two pages, is too
   low, can it align with the Headline please? Most of the PKWARE OLD Created pages
   have this image in that spot."

   WHY IT SAT LOW. .cov-art is position:absolute, so it contributes no height. On the
   HOME page that is fine because .cov-stage also holds .cov - the live-coverage panel -
   which is in normal flow and gives the stage real height. On products and
   why-pk-protect the stage holds ONLY the absolute image, so it is a ZERO-HEIGHT box.
   .hero-grid is align-items:center, so that empty box gets centred against the tall
   text column and the art's top:-72px is measured from the middle of the headline
   block rather than the top of it.

   So the condition is not "which page" - it is "does this stage have an in-flow panel".
   :has() expresses that exactly and needs no markup change, which matters because more
   old pages are coming with this same structure and will be fixed automatically.

   If :has() is unsupported the whole selector is dropped and the art simply renders as
   before - degrades to the old look, never to a broken one. Supported in Chrome 105+,
   Safari 15.4+, Firefox 121+; all shipping since late 2023.

   These are the only :has() selectors in the stylesheet.

   WHY top IS 30px AND NOT 0. Bob, after seeing top:0: "I think this is too high by about
   30px, the thing moves a bit, and needs room to breathe." The movement is real - .cov-art
   carries `animation: artfloat`, whose keyframes are translateY(0) -> translateY(-11px) at
   50%. So the art drifts 11px UPWARD mid-cycle, and at top:0 it was overshooting the top of
   the hero on every pass. At 30px it rests 30px down and peaks at 19px, so there is always
   clearance. If this value is retuned, keep it above 11px or the float will clip again.

   MIN-WIDTH 1241px IS DELIBERATE. These rules only make sense where .cov-art is absolutely
   positioned. Below 1241px the responsive block turns it static and stacks it under the
   copy, and `top` does not apply to a static element - so this would be harmless there
   anyway, but the media query says so explicitly rather than relying on that. It also
   stops these selectors, which outrank the tablet rule on specificity (1,3,0 vs 1,1,0),
   from being something a future edit has to reason about. */
@media (min-width: 1241px) {
  #pkw .hero-grid > .cov-stage:not(:has(.cov)) { align-self: start; }
  /* width and right also constrained here, 2026-08-12. Bob: "Everything else on the page
     renders within the 1300px window, but the headers have these top images way past
     1300px."

     He is right, and it is arithmetic rather than a rendering quirk. .cov-art is
     width:132% / right:-15% of its grid column, and the column is 610px of the 1300px
     .wrap, so the art is 805px and its right edge lands 92px OUTSIDE the container. The
     hero's own overflow:hidden clips it at the section, not at the container, so it runs
     toward the viewport edge.

     That bleed is deliberate on the HOME page, where the art sits behind the live-coverage
     panel and is meant to escape the column. It is wrong on a product page whose art is a
     plain photograph, which is exactly the set this :not(:has(.cov)) condition already
     selects - home has the .cov panel and is excluded, and the battle cards do not use
     .cov-art at all. 100% / 0 keeps the art inside its column and therefore inside
     1300px. */
  #pkw .cov-stage:not(:has(.cov)) > .cov-art { top: 30px; width: 100%; right: 0; }

  /* 1.10.53 - .cov-stage--tall: PUT THE ART IN FLOW so the hero grows to fit it.
     Bob 2026-08-13 on /company/pkware-responsible-ai: "The image header doesn't expand
     to accommodate the image like solutions does."

     THE CAUSE IS THAT .cov-art IS ABSOLUTE, so it contributes no height and the hero
     row's height comes entirely from the copy column. That is deliberate - the art is
     masked to fade out at the bottom and is meant to bleed rather than dictate height -
     and it works on 35 of the 36 pages using this shape, because they all carry a
     hero H1, a lead AND a .hero-cta button, and their art is roughly 16:9.

     This page is the outlier twice over: staging gives it no hero button, so the copy
     column is short, and its image is 872x738 - a 0.846 ratio against the ~0.56 the
     shape assumes. At full column width that art needs about 500px and the copy column
     supplies about 230px, so it overflowed and was clipped at the section edge.

     WHY A MODIFIER RATHER THAN CHANGING THE SHARED RULE. Reflowing every no-.cov stage
     would make the masked fade occupy real height on 35 already-approved heroes, adding
     dead space below art that currently bleeds by design. A modifier is opt-in: nothing
     changes anywhere until a page asks for it, and any future page with a tall hero image
     has a documented answer instead of a per-page rule.

     It mirrors the mobile treatment exactly - static, full width, no mask - because that
     is already how this stage behaves once the grid collapses. The mask goes because a
     faded bottom edge reads as a mistake when the image is sizing its own container
     rather than bleeding past it. */
  #pkw .cov-stage--tall > .cov-art { position: static; width: 100%; top: auto; right: auto;
                                     margin-top: 30px; -webkit-mask: none; mask: none; }
}
#pkw .cov::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--frost),var(--cyan),transparent);
  box-shadow:0 0 18px var(--frost-glow);animation:scan 4.5s ease-in-out infinite;z-index:5}
@keyframes scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
#pkw .cov-head{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--brd);margin-bottom:16px}
#pkw .cov-live{width:9px;height:9px;border-radius:50%;background:var(--frost);box-shadow:0 0 0 0 var(--frost-glow);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--frost-glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
#pkw .cov-head .ttl{font-weight:700;font-size:14px;color:#fff}
#pkw .cov-head .sub{font-size:12px;color:var(--tx-3);margin-left:auto}
#pkw .cov-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
#pkw .cov-stat{background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:13px;padding:15px}
#pkw .cov-stat .k{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
#pkw .cov-stat .v{font-family:var(--serif);font-size:34px;color:#fff;line-height:1;margin-top:9px;display:flex;align-items:baseline;gap:8px}
#pkw .cov-stat .v small{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--frost)}
#pkw .ring{position:relative;width:56px;height:56px;flex:none}
#pkw .ring svg{transform:rotate(-90deg)}
#pkw .ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:15px;color:#fff}
#pkw .cov-stat.ringcell .v{align-items:center;gap:13px;font-size:26px}
#pkw .cov-rows{display:flex;flex-direction:column;gap:8px}
#pkw .cov-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--brd)}
#pkw .cov-row.mf{background:linear-gradient(90deg,rgba(9,188,239,.1),rgba(255,255,255,.02));border-color:rgba(9,188,239,.28)}
#pkw .cov-row .srf{font-weight:700;font-size:13.5px;color:#fff;display:flex;align-items:center;gap:8px;min-width:96px}
#pkw .cov-row .srf svg{width:15px;height:15px;color:var(--cyan)}
#pkw .badge-mf{font-family:var(--sans);font-weight:700;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;color:var(--cyan);background:rgba(9,188,239,.16);border:1px solid rgba(9,188,239,.35)}
#pkw .cov-chips{display:flex;gap:6px;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end}
#pkw .dchip{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;
  color:var(--frost);background:rgba(15,228,162,.11);border:1px solid rgba(15,228,162,.3);
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s}
#pkw .cov.armed .dchip{opacity:1;transform:none}
#pkw .cov-cap{text-align:center;font-size:11px;color:var(--tx-3);margin-top:14px}

/* =========== TRUST / GARTNER =========== */
#pkw .marquee{overflow:hidden;position:relative;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#pkw .marquee-track{display:flex;align-items:center;gap:70px;width:max-content;animation:marq 36s linear infinite}
#pkw .marquee:hover .marquee-track{animation-play-state:paused}
#pkw .marquee .lg-img{height:34px;width:auto;opacity:.55;filter:brightness(0) saturate(0);transition:opacity .3s}
#pkw .marquee .lg-img:nth-child(4n+3){height:28px}
#pkw .marquee .lg-img:nth-child(4n){height:40px}
#pkw .marquee .lg-img:hover{opacity:.9}

/* ---------- quote card ------------------------------------------------------
   A customer testimonial beside a case-study cover. Home has one for Fiserv and
   /products/pk-data-store-manager has one for Western Union, so this is the second
   identical occurrence and becomes a component.

   The values are home's, lifted from the SIX inline style attributes it carries on this
   block - the panel padding and background, the quote mark, the quote type, and the
   attribution name and role. Reusing that pattern by copying would have imported all six
   into every future testimonial, which is the opposite of where this is going.

   #F1F5FA in home's inline style is exactly --pk-grey, so it is tokenised here. The
   existing .quote-mark rule is 90px for the big dark pull-quote section; this scopes the
   smaller 64px treatment to the card. */
#pkw .quote-card { padding: 44px; background: var(--pk-grey); border-radius: 20px; }
#pkw .quote-card .quote-mark { color: var(--frost-deep); opacity: .55; font-size: 64px; height: 32px; }
#pkw .quote-card__text { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.42; color: var(--head); max-width: 30ch; }
#pkw .quote-card__attr { margin-top: 26px; }
#pkw .quote-card__name { font-weight: 700; color: var(--head); }
#pkw .quote-card__role { font-size: 14px; color: var(--tx-3); }

/* THREE FIXES TO .two-col, all from Bob comparing /solutions/data-discovery against staging
   on 2026-08-12. Each was a MISSING RULE rather than a page-level mistake, so each is fixed
   once here rather than patched per page.

   1. VERTICAL CENTRING. Base .two-col is align-items:start, right when both columns are text.
      With copy beside a single image, staging centres the image against the copy; ours pinned
      it to the top. Bob: "Image is centered vertically on staging / At the top on development."

      A modifier, not a change to the base, because start IS correct for two text columns. It
      also replaces what the old pages did inline - products and why-pk-protect each carried
      style="align-items:center" three times before conversion.

   2. NO GAP UNDER THE HEADING. #pkw h1..h4 sets margin:0 and only .cta-final h2 overrode it,
      so an h2 above a paragraph in a column sat flush against it. Bob: "Title needs some bottom
      padding or this needs some top padding." The old pages hid this with an inline
      margin-bottom:24px on the PARAGRAPH - the heading was always the thing missing a margin.
      18px matches the one value already in the theme, .cta-final h2.

   3. QUOTE TOO LARGE IN A COLUMN. .quote-card__text is clamp(21px,2.3vw,30px), set when the
      card had a full-width section to itself on pk-data-store-manager. In a half-width column
      30px serif overwhelms the copy beside it. Bob: "I think the quote font might be too big."
      Scoped to .two-col so the full-width use on that page is untouched. */
#pkw .two-col--center { align-items: center; }
#pkw .two-col .h2 { margin-bottom: 18px; }
#pkw .two-col .quote-card__text { font-size: clamp(18px, 1.45vw, 21px); max-width: none; }

/* STACKED COLUMN CONTENT - added 2026-08-12 for the Western Union case study, where Bob asked
   for copy and image stacked in the left column and the quote plus button in the right, rather
   than copy beside a single image.
      "What if we moved the image, to the left, under the title and the opening paragraph, and
       on the right that was the Harveer quote, title, and button"

   #pkw p{margin:0} is site-wide, so an image following a paragraph sits flush against it with
   nothing to separate them. Adjacency rather than a blanket img margin, so an image that is the
   only thing in its column - every other .two-col on the site - is unaffected.

   max-width:none above goes with it: .quote-card__text caps at 30ch, which was right when the
   card sat beside body copy but leaves a third of the card empty once the quote owns a whole
   column. The cap stays for the full-width use on pk-data-store-manager. */
#pkw .two-col p + img { margin-top: 26px; }

/* MOBILE OVERFLOW IN A .two-col COLUMN - fixed 2026-08-12. Bob: "Mobile clearly bleeds too far
   to the right for this section."

   ROOT CAUSE, and it is not this section. #pkw .btn sets white-space:nowrap. The Western Union
   CTA label plus its arrow computes to roughly 430px at 15.5px bold with 52px of padding, and a
   375px phone with --pk-edge 12px offers about 351px. Grid and flex children default to
   min-width:auto, so THE UN-WRAPPABLE BUTTON SIZES THE WHOLE COLUMN to its own min-content
   width - dragging the heading, paragraph, image and quote card out with it. Every one of them
   is clipped at the same edge, which is why it read as the section bleeding rather than as one
   button being too wide.

   Why nobody noticed earlier: #pkw sets overflow-x:clip. Unlike scrolling, clip produces NO
   scrollbar, so horizontal overflow is silently cut off instead of announcing itself. Any future
   "content is cut off on mobile" report should start by looking for a nowrap child, not for a
   too-wide container.

   Two rules, because either alone is insufficient. min-width:0 stops a long child sizing the
   column; white-space:normal stops the button overflowing its own box once the column no longer
   grows for it. nowrap is right on a desktop button and wrong on a phone. */
#pkw .two-col > * { min-width: 0; }
@media (max-width: 820px) {
  #pkw .btn { white-space: normal; }
}

/* Quote card pushed down so it sits below the heading rather than level with it. Bob arrived at
   this visually as margin-top:20% and asked what I thought.

   THE EFFECT IS RIGHT, THE UNIT IS NOT. A percentage margin resolves against the containing
   block's WIDTH, never its height - so 20% is 20% of the column, which is about 125px at the
   1300px desktop container, 86px on a tablet, and about 70px on a phone where the columns have
   already stacked and no offset is wanted at all. It couples vertical rhythm to horizontal
   width, so any change to the column count or gap silently moves it.

   124px is what his 20% produced at the width he was looking at: (1300 - 48) / 2 = 626px column,
   20% of which is 125px. Fixed, so it holds at every width, and dropped entirely once the
   columns stack. */
#pkw .two-col .quote-card { margin-top: 0; }
@media (min-width: 821px) {
  #pkw .two-col .quote-card { margin-top: 124px; }
}

/* ---------- section header / footer utilities --------------------------------
   Added 2026-08-12 while converting /products/pk-endpoint-manager. That page needed
   23 inline style attributes to reproduce patterns the existing pages express inline,
   and adding 23 more to the backlog contradicts Bob's standing rule: "Eliminate inline
   style as much as possible." These four classes take it to 2.

   THREE NEAR-DUPLICATES WERE NORMALISED, per "standardize to the best of my ability".
   The existing pages use margin-bottom 40px, 44px and 48px for the same centred
   section header, and margin-top 40px and 44px for the same centred trailing link.
   Collapsed to 48px and 44px. Differences of 4-8px in section rhythm; logged in the
   component registry's unification log.

   --narrow carries the max-width:46ch that some headers have and others do not. It is
   a separate modifier rather than baked in, because applying it everywhere would
   re-wrap short headings that currently run full width. */
#pkw .sec-head { text-align: center; margin: 0 auto var(--pk-sec-head-gap); }
#pkw .sec-head--narrow { max-width: 46ch; }

/* ---------- .sec-head--wide - 1.10.74 ----------------------------------------
   For a section header whose h2 is LONG. Bob, 2026-08-14, on /data-breach-calculator:
   "Can this section please go wider?"

   THE CAUSE, AND IT IS A UNIT BUG RATHER THAN A TASTE CALL. `--narrow` caps the
   CONTAINER at 46ch, and `ch` resolves against the element it is declared on - the
   container, whose font-size is #pkw's 18px. So:

     46ch at 18px Lato ("0" advance ~0.55em)        = 455px
     an h2 at clamp(30px,3.5vw,46px), so 46px,
       averages ~22.0px per character (~0.478em)
     455 / 22.0                                     = ~21 characters per line

   **46ch is 46 characters of body text but only ~21 characters of h2.** So `--narrow`
   is tuned for the paragraph - 53 characters a line, comfortably inside the 50-80 band -
   and ignores the heading sharing the box. Measured on this page:

     "Your Results-Backed by Two Decades of Industry Insight"            54 ch -> 3 lines
     "The Enterprise Data Security Solution with Preemptive Protection"  64 ch -> 4 lines
     "PK Protect Provides Broad Platform Integration"                    46 ch -> 3 lines
     "Cost Breakdown After a Security Incident"                          40 ch -> 2 lines

   THE FIX IS TO CAP EACH CHILD IN ITS OWN em, not the pair in the parent's. The h2's
   38ch is measured at 46px, the paragraph's 68ch at 18px, so neither number is at the
   mercy of the other's font size - which is the whole defect above.

     h2  38ch at 46px = ~961px = ~44 characters a line
           54 -> 2 lines, 64 -> 2, 46 -> 2, 40 -> 1
     p   68ch at 18px = ~673px = ~78 average characters
           the top of the comfortable 50-80 measure, deliberately - the point of the
           class is more width, and the paragraph should not be the thing that refuses

   961px sits inside the 1300px .wrap cap at every viewport, and because .h2 is a clamp
   on vw, the characters-per-line figure holds as both shrink together.

   `text-wrap:balance` is new here and not on `.h2` generally: a two-line heading with a
   one-word second line is the usual result of a hard cap, and balancing is only worth
   the cost on headings known to wrap.

   `max-width:none` on the container is deliberate belt-and-braces. `--wide` REPLACES
   `--narrow` and is not meant to be written alongside it, but the two have identical
   specificity, so if both ever appear the winner would be decided by position in this
   file. This makes the outcome the same either way.

   NOT APPLIED TO SHORT HEADINGS. "Latest Publications" (19ch) and "FAQs" (4ch) keep
   `--narrow`, which is correct for them: they already fit one line, and `--narrow` is
   what holds their paragraph at a sensible measure.

   DEGRADES CLEANLY, which is the test the leadership six-across established. Written as
   `class="sec-head sec-head--wide"`, a page deployed before this CSS lands renders as a
   bare `.sec-head` - centred at the full .wrap width. Wider than intended, but that is
   an existing pattern used on 56 blocks across the site, 39 of them with a paragraph.
   Nothing breaks in the window. */
#pkw .sec-head--wide { max-width: none; }
#pkw .sec-head--wide > .h2 { max-width: 38ch; margin-inline: auto; text-wrap: balance; }
#pkw .sec-head--wide > p:not(.eyebrow) { max-width: 68ch; margin-inline: auto; }
#pkw .sec-head .eyebrow { display: flex; justify-content: center; }
/* Supporting line under a centred section heading. Three of the /solutions pages carry one
   (dspm, data-privacy, compliance) and staging renders it as a second title element rather
   than body copy. Needed as a rule because `#pkw h1..h4{margin:0}` and `#pkw p{margin:0}`
   leave the paragraph butted against the heading with no space at all - the same missing-rule
   cause behind every inline margin found in the ported pages. :not(.eyebrow) so the eyebrow,
   which sits in the same block and has its own rule above, is untouched.

   `margin-inline: auto` added 2026-08-18. Bob, on /landing/data-security-maturity-assessment:
   "the text paragraph should be centered." `.sec-head` is `text-align: center` and
   `margin: 0 auto`, so the BLOCK was centred and the words inside the paragraph were centred -
   but the paragraph itself is capped at 56ch by `#pkw .lead` with no inline margins, so it sat
   flush against the left edge of a full-width `.sec-head`. Centred text in a box parked on the
   left, which reads as a broken indent rather than as a centring bug, and is why it survived
   the page's own review.

   THE FIX IS THE ONE `.sec-head--wide` HAS HAD ALL ALONG - line 1757 pairs its 68ch cap with
   `margin-inline: auto`. The base rule simply never got the same pairing. Any capped paragraph
   in a centred heading block wants both; a cap without auto margins is the bug.

   BLAST RADIUS IS FIVE URLS, measured not assumed - `/company`, `/solutions`,
   `/solutions/data-encryption`, `/landing/application-level-encryption` and
   `/landing/data-security-maturity-assessment`. Nothing else moves, because `#pkw p` sets no
   max-width: an uncapped paragraph already fills the block and auto margins do nothing to it.
   So this reaches exactly the paragraphs carrying a cap, which is exactly the defect. */
#pkw .sec-head p:not(.eyebrow) { margin-top: 14px; margin-inline: auto; color: var(--tx-2); }
#pkw .sec-foot { text-align: center; margin-top: 44px; }
#pkw .sec-foot .tlink { justify-content: center; }

/* 1.10.45 - a BUTTON in a section footer centres, exactly as a text link does.
   .sec-foot's text-align:center cannot do this on its own: .btns is display:flex and
   text-align does not position flex children, so the button sat at flex-start under a
   centred heading on /products/securezip and read as a mistake.
   The .tlink rule directly above is the same fix for the same reason, which is why this
   belongs here rather than in a page-specific block. .cta-final has its own copy of this
   declaration because its .btns is not inside a .sec-foot. */
#pkw .sec-foot .btns { justify-content: center; }

/* ============================================================================
   1.10.46 - PHOTOGRAPHS, and a hand-maintained table. Added for /careers, which is
   a one-off, but written generically because neither of these is careers-specific.

   WHY A PHOTO COMPONENT DID NOT ALREADY EXIST, and why .shot-frame is not it. This
   theme's only image frame is .shot-frame, a browser-chrome surround with a fake
   title bar of dots (.shot-bar) intended for product screenshots - and it is
   display:none below its breakpoint, because a chrome frame is decoration. Wrapping
   a photograph of people at a charity event in a fake browser window would be
   wrong, and losing it entirely on a phone would be worse.

   .photo-grid RIDES ON .grid-3 and adds ONLY an image rule. Use them together:
   <div class="grid-3 photo-grid">. That inherits the three columns, the 18px gap
   and the existing responsive collapse to two columns and then one, so there are no
   new media queries here and no second opinion about where a grid breaks.

   THE 4/3 CROP IS THE POINT. The six PK Cares photographs have six different
   aspect ratios, and a grid of untouched images stair-steps: each row is as tall as
   its tallest member and every other cell has dead space. object-fit:cover with a
   fixed ratio makes them line up. It does crop, which is acceptable for event
   photography and would NOT be acceptable for a product screenshot or a diagram -
   use .photo-wide for anything where the whole frame carries meaning. */
#pkw .photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
                       border-radius: 16px; border: 1px solid var(--brd); }

/* A single wide photograph, uncropped - no grid, no chrome, just a framed image that
   fills the wrap. Used for the careers collage, which is one image that IS the
   section. aspect-ratio is deliberately absent: the image keeps its own proportions. */
#pkw .photo-wide { display: block; width: 100%; height: auto; border-radius: 16px;
                   border: 1px solid var(--brd); }

/* A HAND-MAINTAINED HTML TABLE. Bob edits the careers jobs table directly - "The
   Careers section is a html table, that I update if we have any jobs" - so the markup
   it styles is deliberately plain: <table><thead><tr><th>, <tbody><tr><td>. No
   wrapper classes on the rows or cells, nothing to remember, add and remove <tr>.

   The overflow-x on the wrapper is not optional. Five columns do not fit a phone, and
   without it the table widens the page and the whole document scrolls sideways. The
   wrapper scrolls instead. */
#pkw .jobs { overflow-x: auto; }
#pkw .jobs table { width: 100%; border-collapse: collapse; }
#pkw .jobs th { padding: 14px 16px; border-bottom: 2px solid var(--head); text-align: left;
                font-family: var(--sans); font-size: 12px; font-weight: 800;
                letter-spacing: .12em; text-transform: uppercase; color: var(--head);
                white-space: nowrap; }
#pkw .jobs td { padding: 16px; border-bottom: 1px solid var(--brd); color: var(--tx-2);
                vertical-align: top; }
#pkw .jobs tbody tr:last-child td { border-bottom: 0; }

/* A RICHER REVEAL CARD. Until /careers every .pk-toggle-reveal held one .fh and one
   .fnote - "Thank you" and a sentence. Careers' reveal, ported from staging, is a
   thank-you AND a second heading with a six-item list, so the card needed two things
   the one-line version never exercised:

   - a list that reads as body copy rather than as page-level content. .bullets on its
     own inherits the 17px body size, which is louder than the .fnote sentence directly
     above it; 15px and --tx-2 match .fnote exactly.
   - room above a SECOND .fh. A 26px serif heading sitting 6px under a paragraph reads
     as a mistake. .fh's own margin-bottom is 6px because it is normally followed by
     .fsub, which supplies its own 22px. */
#pkw .form-card .bullets { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--tx-2); }
#pkw .form-card .fnote + .fh { margin-top: 22px; }

/* 1.10.48 - A FULL URL PRINTED AS ITS OWN VISIBLE LINK TEXT, for the /careers scam-alert
   block that PKWARE requires displayed that way for legal compliance.

   overflow-wrap:anywhere is the whole reason this class exists. The LinkedIn address is
   88 characters with no spaces, sitting in a two-column card; a long unbroken token does
   not wrap on its own and would push out of the card and widen the page. `anywhere` and
   not `break-word`, because break-word only breaks a word that could not fit on a line
   BY ITSELF - it still lets the token overflow when there is other content beside it.

   The 15px is deliberate too: a raw URL at body size shouts louder than the sentence
   explaining it, and this block is a reference, not the message. */
#pkw .legal-urls { overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; }

/* 1.10.62 - A LAWYER-WRITTEN DOCUMENT AS A PAGE. The archetype's whole component, for
   /license-terms-gtbm and the legal pages behind it. Bob: "this is written by the lawyer,
   don't make a single change, just as is, with the new header and footer we use."

   WHY IT HAS TO EXIST AT ALL: `#pkw p{margin:0}` is the site-wide base, correct for a
   theme whose body copy lives in cards and section heads where the container supplies the
   spacing. A legal page is the first thing built here that is fifty consecutive text
   elements in one container, and with margin:0 they collapse into a single unreadable
   slab. Nothing else in the stylesheet spaces sibling prose - `.card p + p` is 14px and
   scoped to a card.

   20px IS STAGING'S NUMBER, from `.post-content p{margin-bottom:20px}` in the Avada child
   theme. Not chosen, read off the source.

   THE OWL SELECTOR RATHER THAN `p + p`, and that is the one real decision here. `.doc` is
   the component for the archetype, not for this page: the next legal document may hold
   h3s, ordered lists or a signature block, and each would otherwise need its own rule to
   get the same rhythm. One declaration covers every sibling pair whatever the tags are.
   The cost is that staging gives its h2 a 10px bottom margin where this gives 20px - a
   10px difference on exactly one boundary in the page, traded for not growing a rule per
   element type.

   NO MEASURE CAP, deliberately, and it needed no rule to get there. Staging's row is
   max-width:1300px and `#pkw .wrap` is the same 1300px, so the line length matches the
   source with nothing declared. If a narrower measure is ever wanted for reading comfort,
   it belongs here as an opt-in modifier beside .lead--full and .sec-head--narrow - never
   as a cap on .doc itself, which would re-wrap every legal page at once. */
#pkw .doc > * + * { margin-top: 20px; }

/* 1.10.63 - THE LEGAL DOCUMENT, EXTENDED FOR /privacy: headings, lists and tables.
   The first two legal pages were paragraphs and nothing else. This one is a real document -
   21 h3, 11 h4, 8 h5, 16 unordered and 6 ordered lists holding 75 items, 4 tables.

   READ SECTION 5 BEFORE ADDING TO THIS BLOCK. Section 5 already styles h3, h4, h5, th and
   td at element level, and the first draft of this block did not check - it declared
   font-sizes of 26/21/18 on the reasoning that bare headings were falling back to browser
   defaults and that h5 was rendering at 15px, SMALLER than body copy. All of that was
   wrong. Section 5 gives h3 1.75rem (28px), h4 1.375rem (22px), h5 1.125rem (18px), and
   `th, td` a bottom border with 0.5/0.75rem padding. The scale was already sensible and
   two of those three font-size rules had no defect behind them, so they are gone. What
   follows is only what was actually broken.

   H5 WAS THE ONLY HEADING OUT OF FAMILY, and in two ways at once. `#pkw h1,h2,h3,h4` does
   not reach it, so it kept section 5's sans face at weight 700 - reading as a bold
   PARAGRAPH rather than as the fourth level of a heading scale - and it kept section 5's
   `margin-block-end: 1rem`, which h1 through h4 have zeroed, so it alone carried 16px of
   space beneath it. Face and weight only; the 18px size and the navy are already right.

   HEADING RHYTHM, which does more work than it looks like. `.doc`'s 20px is uniform by
   design: right for paragraph after paragraph, wrong at a section boundary, where a 28px
   heading sitting 20px under the previous sentence does not read as a new section. This is
   what gives the document its structure now that its 13 wrapper divs are flattened - and it
   is the honest version of what /terms-of-use does with 22 empty spacer paragraphs.
   `* + h3` rather than `h3`, so the first element in the document gets no margin above it.
   These come AFTER the h5 rule on purpose: same specificity, so source order decides.

   LISTS. `#pkw ul{margin:0;padding:0;list-style:none}` is the base, and it is right for the
   nav-like and card-like lists it was written for. Applied to 75 prose list items it is a
   defect: no markers, no indent, every item rendering as a run-together line. Discs and
   decimals are restored INSIDE the document block only, at (1,1,1) against the base's
   (1,0,1) - the same specificity trick `.bullets` uses.

   `.doc-plain` is the opt-out, for the two label lists whose items each open with a bold
   letter heading - "A. Identifiers:" - where a bullet beside the letter is noise. Staging
   had that as an inline `list-style-type`; this is the same intent without the inline style.
   (1,2,0) beats the list rule's (1,1,1).

   `li ul` / `li ol` covers the two nested lists, which would otherwise butt against the
   text of the item holding them.

   TABLES - MODELLED ON `.jobs`, NOT INVENTED, and only where section 5 falls short. Section
   5 gives cells a bottom border, 8px/12px padding and `text-align: start`, which is fine for
   a compact table and thin for three columns of full sentences. Three things are added:

     1. FULL BORDERS instead of a bottom rule, in `--brd` so the table sits in the same
        palette as the rest of the component. A two-column table of rights against their
        descriptions needs the vertical division; section 5's default has none.
     2. A TINTED HEADER. Section 5 already makes `th` navy and 700, which is most of the
        job - the background is what separates a header row from the first data row.
        Deliberately NOT `.jobs`' 12px uppercase letter-spaced `nowrap` treatment: one header
        cell here reads "Information we collect from you with third-party processors", which
        `nowrap` would turn into a single 600px column, and in two of the three tables `th`
        is also the ROW label ("Access", "Portability", "A. Identifiers.") - content, not a
        column caption, and mangled by uppercasing.
     3. FIXED LAYOUT WITH A FLOOR AND A SCROLL WRAPPER - one decision in three parts.
        `width:100%` and `border-collapse:collapse` are already global in section 4. Fixed
        layout divides the columns evenly and makes long cell prose WRAP rather than widen
        the table, which auto layout does badly here. But fixed layout alone would squeeze
        three columns into ~110px each on a phone, so the 560px floor stops that and
        `.doc-scroll` scrolls instead. On desktop the floor never applies and the wrapper
        never scrolls. */
#pkw .doc h5 { font-family: var(--serif); font-weight: 400; margin-bottom: 0; }
#pkw .doc > * + h3 { margin-top: 44px; }
#pkw .doc > * + h4,
#pkw .doc > * + h5 { margin-top: 30px; }

#pkw .doc ul { list-style: disc; padding-left: 1.15em; }
#pkw .doc ol { list-style: decimal; padding-left: 1.3em; margin: 0; }
#pkw .doc li + li { margin-top: 8px; }
#pkw .doc li ul,
#pkw .doc li ol { margin-top: 8px; }
#pkw .doc .doc-plain { list-style: none; padding-left: 0; }

#pkw .doc-scroll { overflow-x: auto; }
#pkw .doc table { table-layout: fixed; min-width: 560px; }
#pkw .doc th,
#pkw .doc td { padding: 12px 14px; border: 1px solid var(--brd); vertical-align: top; }
#pkw .doc th { background: var(--bg-2); }

/* 1.10.66 - THE EIGHT-LANGUAGE DOWNLOAD PAGE, /products/pkprotect-reader.
   Three rules. Staging presents the eight languages as an Avada tabs component; Bob chose
   to stack them with a jump list rather than rebuild a tab widget - "no JavaScript at all,
   every language always present." On a page whose readers are legal departments in eight
   markets, a switcher that can fail is a page that can show them nothing.

   .lang-jump is the old tab strip doing the same job in a different shape: same labels,
   same href targets, so existing deep links keep working. `#pkw ul` already removes markers
   and padding site-wide, so the list needs neither.

   .lang-block separates the eight. A rule and generous space rather than a box, because
   each block is already a heading plus a card plus prose and does not need a second frame
   around it.

   .dl-card IS A NEW CLASS ON PURPOSE, and the reason is worth keeping. Staging styles this
   block with .form-rev.no-fc, and the Avada child theme defines that exactly once: a DARK
   navy gradient card with white text. The copy of it in section 8 of this file describes
   itself as "the card, light variant" and is wrong about the only definition that exists.

   IT WAS NOT CORRECTED. Five live pages - careers, contact, demo, share-pittsburgh and
   pkzip - use .form-rev.no-fc as their white form card, and flipping it to the dark
   original would break all five at once. Bob: "create a new one, or use one with a white
   background." So this page gets its own class and the shared one is left alone.

   IT ALSO SIDESTEPS THE .card PADDING TRAP. `#pkw .card` has no padding of its own and only
   receives it inside five named containers; a .card in any other container renders with its
   text against its border, which is what happened on /careers. .dl-card carries its own.

   The panels themselves reuse .doc - they are exactly what that component is for, a stack
   of prose needing rhythm, and it already spaces headings against paragraphs. That is why
   there is no per-panel spacing rule here. */
#pkw .lang-jump { margin-bottom: 44px; }
#pkw .lang-jump ul { display: flex; flex-wrap: wrap; gap: 10px 10px; }
#pkw .lang-jump a { display: inline-block; padding: 9px 16px; border: 1px solid var(--brd);
                    border-radius: 999px; background: var(--panel); font-size: 15px;
                    color: var(--tx-2); transition: border-color .2s ease, color .2s ease; }
#pkw .lang-jump a:hover { border-color: var(--cyan); color: var(--head); }

#pkw .lang-block + .lang-block { margin-top: 56px; padding-top: 56px;
                                 border-top: 1px solid var(--brd); }
#pkw .lang-block > .h2 { margin-bottom: 26px; }

#pkw .dl-card { padding: 24px 26px; border: 1px solid var(--brd); border-radius: 16px;
                background: var(--panel); }
#pkw .dl-card h3 { margin-bottom: 12px; }
#pkw .dl-card p + p { margin-top: 8px; }
/* Stacked full-width feature rows - image one side, copy the other, alternating.
   A wrapper with a gap rather than 'two-col + two-col', which would silently add
   spacing to any existing page that happens to have two adjacent .two-col blocks. */
#pkw .feature-rows { display: grid; gap: 64px; }

/* A section whose entire content is a logo band. Bob's value, 2026-08-12: "this should be
   set in css, not inline in that component for the trust logos."

   #pkw .sec is 118px top and bottom, which is right for a section with a heading and a
   grid and far too much for a strip of logos. The three pages carrying the trust strip had
   three different inline answers - 80px on home, 72px on products, and nothing at all on
   pk-endpoint-manager, which therefore inherited the full 118px.

   SCOPED, NOT GLOBAL. Bob supplied it as `section.sec { padding: 20px 0 }`, which would
   have applied to all 39 .sec sections across the four built pages and collapsed the
   vertical rhythm of every one. This is the same value on a modifier instead.

   A CLASS RATHER THAN .sec:has(.trust-strip), which would have been automatic and needed
   no markup change - but on home that section holds the trust strip AND the Gartner block,
   so a parent selector would squash the Gartner card too. The modifier only goes on
   sections whose whole content is the band.

   THAT LAST PARAGRAPH IS NO LONGER TRUE - corrected 2026-08-17, and it is kept rather
   than deleted because it explains why the padding lived here for five days. Measured
   this run: all 43 .sec--tight sections that hold the band contain the band and nothing
   else, home included - `<section class="sec sec--tight"><div class="wrap">
   [pkware_trust_logos]</div></section>`, byte for byte, 43 times. The Gartner block sits
   in its own section now. So the parent selector IS safe, and the rule below uses it.

   .sec--tight ITSELF STAYS AT 20px, because it is not only the band's: /contact uses it
   for a media-requests block. That is 1 of the 44 uses, and zeroing the class outright
   would have moved a page nobody was looking at. */
#pkw .sec--tight { padding: 20px 0; }

/* .sec--roomy - THE OPPOSITE MODIFIER. Added 2026-08-19. Bob on the home page: "the what we
   do Block, not enough padding at the top and bottom", with COMPLIANCE COVERAGE named as the
   one that is right.

   THE CAUSE IS THE TOKEN, MEASURED: --pk-sec-y is 30px, so every #pkw .sec on the page gets
   30px top and bottom. The section Bob likes carries an inline style="padding:88px 0" and is
   the only one on the page that does. So this is not one bad section, it is one good section
   among twelve short ones - which is why he said he needs to go through all the pages.

   88px IS HIS VALUE, taken from the section he approved, and it is declared once as
   --pk-sec-y-roomy so the site-wide pass has a single number to turn.

   A MODIFIER RATHER THAN A CHANGE TO --pk-sec-y, deliberately. Raising the token would repad
   every .sec on 82 pages in one move, including sections nobody has looked at and every
   global component's wrapper. Opt-in per section keeps the blast radius at exactly what has
   been reviewed. If the sweep later shows that 88px is right everywhere, the token is the
   right answer then and this modifier becomes redundant - that is a decision with evidence
   behind it rather than ahead of it.

   NO MOBILE OVERRIDE, AND THAT IS A CHOICE TO REVISIT. There is no live mobile rule for
   .sec at all - the `#pkw .sec{padding:44px 0}` at the 820px breakpoint is inside a comment,
   as a worked example of what to reinstate. So 88px will apply at every width. Narrow
   viewports usually want less, so this is the first thing to look at if the home page reads
   too airy on a phone. */
#pkw .sec--roomy { padding: var(--pk-sec-y-roomy, 88px) 0; }

/* ---------- vertical rhythm for the trust band ------------------------------
   Bob, 2026-08-17, looking at the band on a landing page: "it needs a little more
   paddig at the top and bottom".

   THE PADDING GOES ON THE COMPONENT, NOT ON THE SECTION, because the band appears in
   two different places and only one of them is a section of its own:

       43 pages   <section class="sec sec--tight"><div class="wrap">[shortcode]</div>
       16 pages   inside the HERO section's own .wrap, under the form - no section,
                  and therefore no section padding, which is why it read as tight

   Padding on .trust-strip is the only thing that reaches both. One token, 30px, so the
   band obeys the same rhythm as everything else rather than carrying its own number.

   AND THE SECTION MUST THEN STOP ADDING ITS OWN, or the 43 would go from 20px to 50px -
   more than "a little more". :has(.trust-strip) zeroes it for exactly the sections that
   hold the band and leaves /contact alone. If :has() is unsupported the section keeps its
   20px and the strip adds 30px: 50px, roomier than intended but not broken. */
#pkw .trust-strip { padding-block: var(--pk-sec-y); }
#pkw .sec--tight:has(.trust-strip) { padding: 0; }
/* Same rule for the landing system's trust section, added 2026-08-17 when
   /landing/cmmc-compliance and /landing/youve-secured-the-ehr-phi-went-somewhere-else
   moved onto the band. .pk-py-trust is 24px top and bottom, which would have stacked with
   the component's 30px to 54px. Scoped with :has() so it only fires where the band
   actually is - .pk-py-trust is the landing system's and may be used elsewhere. */
#pk-landing-wrapper .pk-py-trust:has(.trust-strip) { padding-top: 0; padding-bottom: 0; }

/* ---------- the band's proof line, [pkware_trust_logos note="..."] ----------
   Added 2026-08-17 with the `note` attribute, so the last three pages showing this
   band as their own design could move onto the component without losing copy.

   CENTRED AND CONSTRAINED, unlike pkencrypt's original. There the line sat in a narrow
   left-hand hero column and was left-aligned at max-width 52ch, which is right for a
   column and wrong for a full-width band - at 1300px a 52ch line hugging the left edge
   under centred logos reads as a mistake. Same type size and colour, centred, with the
   width cap kept so it wraps rather than running the full 1300px.

   26px, matching pkencrypt's margin-top, so the logos-to-line gap is unchanged from
   the design this was lifted from. */
#pkw .trust-strip .lstrip {
  margin: 26px auto 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tx-2);
  text-align: center;
  text-wrap: balance;
}

/* PKENCRYPT'S HERO KEEPS ITS OWN FRAME. Its band was a .trusted block inside
   .hero-copy, which is a flex column: the block carried `order: 6` to sit last, plus a
   top rule and 38px of padding above it. Replacing the markup with the shortcode drops
   .trusted, so those three properties have to be re-attached to .trust-strip in that
   one context or the band jumps to the top of the hero column with no separator.

   padding-block is overridden here rather than inherited: the 30px rhythm is for a
   full-width band between sections, and this one sits inside a hero column under a
   rule, where pkencrypt's own 38px/0 is the measured value. */
#pkw.pkenc .hero-copy > .trust-strip {
  order: 6;
  margin-top: 52px;
  padding: 38px 0 0;
  border-top: 1px solid var(--rule);
}
#pkw.pkenc .hero-copy > .trust-strip .lstrip { margin-inline: 0; text-align: left; }

/* ================= VARIANT: column ===========================================
   [pkware_trust_logos variant="column"] - the same scrolling marquee, sized for a hero
   column beside a form. /products/pkencrypt. Bob: "a half column version of the full one
   we have now, scrolling images and all, that could be used in headers like this."

   THE ONE PIECE OF ARITHMETIC, AND IT IS WHY FORCING pkencrypt INTO THE FULL BAND WAS
   WRONG. .marquee-track animates to translateX(-50%), so the repeating unit is half the
   track, and that half must be at least as wide as its container or the right-hand side
   empties mid-cycle. The band is tuned for a 1300px container. This is not 1300px:

       #pkw.pkenc .hero-grid is minmax(0,1fr) minmax(0,424px) with an 80px gap, inside
       --maxw (calc(1300px + 2 * --pk-edge), and --pk-edge is 0), so the copy column is
       1300 - 80 - 424 = 796px

       repeats 2   half   642px   FAILS against 796
       repeats 4   half 1,284px   passes
       repeats 6   half 1,926px   passes with 1,130px to spare

   REPEATS STAY AT SIX. Four would do here, but the count is shared with the band and a
   per-variant count is two numbers to keep right instead of one. Six is already correct
   for both, and the repeats are the same four URLs, so they are cache hits - the cost is
   DOM nodes, not bandwidth.

   SO ONLY THE DURATION CHANGES, to hold the speed. Staging's band moves at 23.3px per
   second and staging is the authority; 1,926 / 23.3 = 83s. Left at the band's 111s this
   column would crawl at 17px/s - visibly slower than every other instance of the same
   component, which is exactly the drift a component exists to prevent. RECOMPUTE IF THE
   SET, THE HEIGHTS OR THE COLUMN WIDTH CHANGE: duration = half-track / 23.3.

   LEFT-ALIGNED, not centred: it sits in a text column under a rule, beside a form. The
   band's centring is for a full-width section. */
.trust-strip--column .trust-strip__label { justify-content: flex-start; }
.trust-strip--column .marquee-track { animation-duration: 83s; }
.trust-strip--column .lstrip { margin-inline: 0; text-align: left; }

/* The mask fades 12% either side. On 1300px that is 156px against a 70px logo gap and
   reads as a soft edge; on 796px it is 96px, and a logo can sit inside the fade for most
   of its pass. 6% is 48px here - the same visual bite as the band has. */
.trust-strip--column .marquee {
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

/* ================= THE BAND, SELF-CONTAINED ==================================
   Added 2026-08-17. Bob: "I want them all to be the same, so I can say, I want to
   change this, in this component, and have it be sitewide."

   WHY THIS BLOCK HAS TO EXIST. Everything above is scoped to #pkw. Two of the three
   pages that were still showing this band as their own design -
   /landing/cmmc-compliance and /landing/youve-secured-the-ehr-phi-went-somewhere-else -
   do not render inside #pkw at all. They render inside #pk-landing-wrapper. Dropping
   the shortcode into them would have emitted correct markup that matched no rule: no
   overflow, no mask, no animation, no logo heights - four full-size images stacked down
   the page. Measured, not assumed: #pk-landing-wrapper defines none of .eyebrow,
   .marquee, .marquee-track, .lg-img, .trust-strip or .lstrip, so there is nothing to
   collide with either.

   SCOPED TO .trust-strip, NOT TO A WRAPPER, which is the actual fix. The band now
   carries its own definition and works wherever it is dropped - that is what makes it a
   component rather than a block that happens to work in one design system. The #pkw
   rules above are left exactly as they were: they are (1,1,0) or higher and these are
   (0,2,0), so inside #pkw the old rules still win. Their values are identical to these,
   so nothing moves on the 60 pages already rendering it. Verify that before changing
   either copy - if they drift, in-#pkw and out-of-#pkw pages will look different.

   THE var() FALLBACKS ARE THE POINT OF THE SECOND HALF. --sans, --eb, --frost,
   --frost-glow and --tx-2 are declared on #pkw and nowhere a landing page can see. Each
   use below carries the #pkw literal as its fallback, so inside #pkw the token wins and
   outside it the literal does. IF A TOKEN IS RETUNED, RETUNE THE FALLBACK - a stale
   fallback here shows up only on the two landing pages, which is exactly where nobody
   looks. Values read off #pkw on 2026-08-17:
       --sans "Lato",-apple-system,...   --eb var(--frost-deep) = #0B6E4E
       --frost #0FE4A2                   --frost-glow rgba(15,228,162,.40)
       --tx-2 #5C6472
   -------------------------------------------------------------------------------- */
.trust-strip { padding-block: var(--pk-sec-y, 30px); }

/* THE LABEL HAS ITS OWN CLASS, and this is the reason. It was .eyebrow, the theme's
   shared component, until 2026-08-17 - when Bob put the band and the column side by side:
   "look at the difference between the eyebrow piece or whatever you call it". On
   pkencrypt the label came out 20px cyan with a 34px dash instead of 12.5px green with a
   dot, because that page redefines the shared class at equal specificity:

       #pkw.pkenc .eyebrow        (1,2,0)   font-size:20px; color:var(--cyan)
       #pkw .trust-strip .eyebrow (1,2,0)   the band's own

   A tie, so source order decided it and the page won. NO SELECTOR WITHOUT AN ID COULD
   HAVE WON, and adding one would only move the collision to the next system that
   restyles .eyebrow - the stylesheet has eleven such overrides. A component cannot
   borrow a class the page is allowed to redefine.

   Declarations below are the ones #pkw .eyebrow produced for this band, unchanged, so
   the 59 band pages do not move. --eb still comes from the section, which is why
   /landing/securezip-upgrade's hero-blue label stays #0FE4A2 rather than green. */
.trust-strip__label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  font-family: var(--sans, "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eb, #0B6E4E);
  margin: 0 0 22px;
}
.trust-strip__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--frost, #0FE4A2);
  box-shadow: 0 0 10px var(--frost-glow, rgba(15,228,162,.40));
  flex: none;
}
/* PORTED CONTEXT RULE, not a new decision. #pkw .pkw-light .eyebrow::before and its
   .pkw-grey twin flatten the dot to solid frost-deep with no glow, and three band pages
   sit in a `hero pkw-light` section - /landing/application-level-encryption,
   /landing/data-security-maturity-assessment and /landing/encryption. Without this the
   class change would have quietly re-lit their dot. It is the only one of the eleven
   .eyebrow overrides that reaches this band; the rest are scoped to places it never
   appears. Verified by grouping all 60 by their enclosing section class. */
.pkw-light .trust-strip__label::before,
.pkw-grey  .trust-strip__label::before {
  background: var(--frost-deep, #0B6E4E);
  box-shadow: none;
}

.trust-strip .marquee {
  overflow: hidden;
  position: relative;
  margin-top: 22px;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* 111s, not the generic 36s: six repeats of the set against a 1300px container. The
   arithmetic is in pkware_sc_trust_logos_repeats() - duration = half-track / 23.3px per
   second, matched to staging's speed. Recompute if the set or the repeat count changes. */
.trust-strip .marquee-track {
  display: flex;
  align-items: center;
  gap: 70px;
  width: max-content;
  animation: marq 111s linear infinite;
}
.trust-strip .marquee:hover .marquee-track { animation-play-state: paused; }

.trust-strip .lg-img {
  height: 34px;
  width: auto;
  opacity: .55;
  filter: brightness(0) saturate(0);
  transition: opacity .3s;
}
.trust-strip .lg-img:hover { opacity: .9; }
/* BY NAME, never by nth-child. The generic #pkw rules size the third and fourth logo of
   every four, which only works while the set is exactly four long - and the set is an
   editable array. */
.trust-strip .lg-img--jpmc   { height: 34px; }
.trust-strip .lg-img--truist { height: 34px; }
.trust-strip .lg-img--fiserv { height: 28px; }
.trust-strip .lg-img--wu     { height: 40px; }

.trust-strip .lstrip {
  margin: 26px auto 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tx-2, #5C6472);
  text-align: center;
  text-wrap: balance;
}

/* The Gartner block's 54px top margin existed to separate it from the logo strip ABOVE it,
   back when both shared one section on the home page. They are two sections now - the strip
   needs 20px and the Gartner card needs the full rhythm, which is what forced the inline
   value in the first place - so as the first thing in its own section that margin stacks on
   top of .sec's 118px. Zeroed only in that position; every other use keeps it. */
#pkw .wrap > .trust-flow:first-child { margin-top: 0; }

/* ---------- trust strip, the [pkware_trust_logos] component ------------------
   Added 2026-08-12. Two rules, and both exist to REPLACE inline style attributes
   that the hand-pasted version of this block carried on every page:

       <p class="eyebrow reveal" style="justify-content:center;display:flex">
       <div class="marquee reveal" style="margin-top:22px">

   Per Bob's standing rule - "Eliminate inline style as much as possible" - they are
   classed instead. Scoped under .trust-strip rather than given new element classes so
   .eyebrow and .marquee stay the shared components they already are; this only carries
   the two deltas.

   22px, not the .marquee default of 8px, because the strip sits directly under its own
   label here rather than under a section heading.

   THE EYEBROW HALF OF THAT REASONING DID NOT SURVIVE - 2026-08-17. "So .eyebrow stays the
   shared component it already is" is exactly what broke the label on pkencrypt: sharing a
   class means the page can redefine it, and #pkw.pkenc does. The label is now
   .trust-strip__label, defined once further down, and the rule that used to sit here is
   gone rather than repointed - the new rule already centres it. The .marquee half still
   holds: nothing redefines .marquee per page. */
#pkw .trust-strip .marquee { margin-top: 22px; }

/* PER-LOGO HEIGHTS, replacing the position-based sizing for this strip.

   The generic rules above give 28px to nth-child(4n+3) and 40px to nth-child(4n) - so
   whichever logo happens to sit third and fourth. That only holds while there are
   exactly FOUR logos, because four is also the cycle length. Add a fifth and every
   repeat sizes different logos. The whole point of the component is that Bob can edit
   the list, so it cannot depend on the count.

   These values are IDENTICAL to what the position rules produced for the current
   order, so this changes nothing visually - it just stops depending on order:
       jpmc 34px -> 61px wide     fiserv 28px ->  42px wide
       truist 34px -> 145px wide  wu     40px -> 149px wide

   Four classes deep on purpose. The rule being overridden is
   '#pkw .marquee .lg-img:nth-child(4n)', which is (1,3,0) - a pseudo-class counts as a
   class - so a three-part selector would only tie and win on source order. Adding
   .lg-img.lg-img--wu makes it (1,4,0) and unambiguous.

   A NEW LOGO NEEDS A RULE HERE. Without one it falls back to the 34px default, which is
   usually fine but will not be right for a tall or square mark. */
#pkw .trust-strip .marquee .lg-img.lg-img--jpmc   { height: 34px; }
#pkw .trust-strip .marquee .lg-img.lg-img--truist { height: 34px; }
#pkw .trust-strip .marquee .lg-img.lg-img--fiserv { height: 28px; }
#pkw .trust-strip .marquee .lg-img.lg-img--wu     { height: 40px; }

/* Scroll speed, matched to staging exactly.

   STAGING IS THE AUTHORITY for this component. Its rules were read off
   https://staging.pkware.com/ on 2026-08-12 and are byte-identical to the theme's -
   same 70px gap, same 'marq 36s', same per-position heights, same keyframes. With its
   images and its 1188px container that works out to:

       one set 595px, 2 repeats -> track 1680px, animated half 840px
       840px / 36s = 23.3 px/second

   Development repeats the set six times instead of two, because its container is 1300px
   rather than 1188px and the animated half must be at least the container width or the
   right side empties mid-cycle. Six repeats gives a half of 2,590px, so:

       2590px / 23.3 px/s = 111s

   The result is the same logos at the same sizes moving at the same speed as staging -
   only the track is longer, which is invisible.

   RECOMPUTE IF THE SET OR THE REPEAT COUNT CHANGES: duration = half-track-width / 23.3.
   Scoped to .trust-strip so the 24-logo marquees on the same pages keep their own
   timing. */
#pkw .trust-strip .marquee-track { animation-duration: 111s; }
@keyframes marq{to{transform:translateX(-50%)}}
#pkw .trust-proof{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.4;text-align:center;color:var(--tx);max-width:24ch;margin:0 auto}
#pkw .trust-proof b{color:var(--frost-deep);font-weight:700}
#pkw .gart{margin:16px auto 0;max-width:560px;border:1px solid var(--brd);border-radius:18px;padding:24px 28px;
  background:var(--glass);min-height:118px;display:flex;align-items:center;justify-content:center;gap:16px}
#pkw .gart-ph{display:flex;align-items:center;gap:14px;color:var(--tx-3);font-size:14px}
#pkw .gart-ph .spin{width:18px;height:18px;border:2px solid var(--brd-2);border-top-color:var(--frost);border-radius:50%;animation:spin 1s linear infinite}
#pkw .gart-cap{text-align:center;font-size:12.5px;color:var(--tx-3);margin-top:14px}
#pkw .gart-cap a{color:var(--cyan-700);font-weight:700}
#pkw .gpi-snip{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--brd);
  box-shadow:0 24px 56px -30px rgba(30,48,116,.4);transition:transform .3s,box-shadow .3s}
#pkw .gpi-snip:hover{transform:translateY(-4px);box-shadow:0 34px 68px -32px rgba(30,48,116,.5)}
#pkw .gpi-snip img{width:100%;display:block}
#pkw .gpi-card{display:block;background-color:var(--navy);border-radius:16px;overflow:hidden;padding:32px 34px;box-shadow:0 24px 56px -30px rgba(30,48,116,.4);transition:transform .3s,box-shadow .3s;text-decoration:none}
#pkw .gpi-card:hover{transform:translateY(-4px);box-shadow:0 34px 68px -32px rgba(30,48,116,.5)}
#pkw .gpi-prod{font-family:var(--sans);font-weight:700;font-size:15px;color:rgba(255,255,255,.72);margin:0 0 12px}
#pkw .gpi-quote{font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);line-height:1.32;color:#fff;margin:0}
#pkw .gpi-stars{display:flex;gap:5px;margin:16px 0 12px;color:#f5a623}
#pkw .gpi-stars svg{width:22px;height:22px;fill:currentColor}
#pkw .gpi-attr{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(255,255,255,.85);margin:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========== STAT GRID / cards ===== */
#pkw .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#pkw .stat{padding:26px;border-radius:16px;border:1px solid var(--brd);background:var(--glass)}
#pkw .stat .n{font-family:var(--serif);font-size:clamp(34px,4vw,48px);line-height:1;color:var(--head)}
#pkw .stat .l{font-size:14px;color:var(--tx-2);margin-top:10px;font-weight:700}

/* two-col narrative */
#pkw .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

/* =========== PROCESS - animated pipeline =========== */
/* padding-bottom added 2026-08-17. Bob, on home: "the what we do block, needs some
   padding at the bottom." The section itself only gives var(--pk-sec-y) - 30px - and the
   flow diagram's lowest elements are the three-line captions under Discover and Classify
   and the Quarantine/Delete card, which land almost on the next section's edge.
   A second 30px from the same rhythm token rather than a new number.
   SCOPED BY BEING .pipe: measured, .pipe appears on exactly one URL, the home page. */
#pkw .pipe{position:relative;margin-top:30px;padding-bottom:var(--pk-gap-xl)}
#pkw .flow{position:relative;display:flex;align-items:center;justify-content:center;gap:0;margin-top:40px;flex-wrap:nowrap}
#pkw .flow-seq{display:flex;align-items:center;gap:0}
#pkw .fstep{position:relative;width:74px;flex:none;display:flex;justify-content:center}
#pkw .fnode{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;position:relative;
  background:#fff;border:1.5px solid var(--brd-2);color:var(--frost-deep);
  box-shadow:0 16px 32px -20px rgba(30,48,116,.5);transition:transform .3s,box-shadow .3s,border-color .3s;
  animation:nodepop 4s ease-in-out infinite}
#pkw .flow-seq .fstep:nth-child(3) .fnode{animation-delay:.9s}
#pkw .fnode svg{width:30px;height:30px}
#pkw .fnode .pk{position:absolute;top:-10px;right:-10px;width:27px;height:27px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--serif);font-size:12.5px;display:grid;place-items:center;border:2px solid #fff}
#pkw .fstep:hover .fnode{transform:translateY(-6px);border-color:var(--frost);box-shadow:0 24px 42px -20px rgba(15,228,162,.5)}
#pkw .fcap{position:absolute;top:86px;left:50%;transform:translateX(-50%);width:124px;text-align:center;font-size:13px;color:var(--tx-2);line-height:1.45}
#pkw .fcap b{display:block;font-family:var(--sans);font-weight:900;font-size:17px;color:var(--head);margin-bottom:6px}
#pkw .fconn{width:64px;height:2px;flex:none;position:relative;background:var(--brd-2);border-radius:2px}
#pkw .fconn::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 12px var(--frost-glow);animation:conndot 3s ease-in-out infinite}
@keyframes conndot{0%{left:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
#pkw .flow-join{width:44px;height:2px;flex:none;background:var(--frost-deep);opacity:.45;border-radius:2px}
#pkw .flow-branch{position:relative;display:flex;flex-direction:column;gap:16px;flex:none;width:314px;height:268px;padding-left:34px}
#pkw .flow-branch::before{content:"";position:absolute;left:0;top:27px;bottom:27px;width:2px;border-radius:2px;background:var(--frost-deep);opacity:.4}
#pkw .branch-head{position:absolute;top:-30px;left:34px;font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--frost-deep)}
#pkw .bstep{position:relative;flex:1;display:flex;align-items:center;gap:13px;padding:0 18px;border-radius:16px;
  background:#fff;border:1.5px solid var(--brd);box-shadow:0 12px 30px -22px rgba(30,48,116,.5);transition:transform .3s,box-shadow .3s,border-color .3s}
#pkw .bstep::before{content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;margin-top:-1px;background:var(--frost-deep);opacity:.4}
#pkw .bstep:hover{border-color:var(--frost);transform:translateX(5px);box-shadow:0 18px 34px -20px rgba(15,228,162,.45)}
#pkw .bicon{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;color:var(--frost-deep);
  background:linear-gradient(145deg,rgba(15,228,162,.15),rgba(9,188,239,.12))}
#pkw .bicon svg{width:22px;height:22px}
#pkw .btxt b{display:block;font-family:var(--sans);font-weight:900;font-size:16px;color:var(--head);margin-bottom:2px}
#pkw .btxt span{font-size:13px;color:var(--tx-2);line-height:1.4}@keyframes nodepop{0%,22%,100%{border-color:var(--brd-2);box-shadow:0 16px 32px -20px rgba(30,48,116,.5)}
  8%{border-color:var(--frost);box-shadow:0 0 0 7px rgba(15,228,162,.13),0 20px 38px -18px rgba(15,228,162,.55)}}
#pkw .pipe-io{display:flex;justify-content:space-between;margin:var(--pk-gap-xl) 4% 0;gap:48px}
#pkw .pipe-io .io{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--tx-2);max-width:38ch}
#pkw .pipe-io .io b{font-weight:900;color:var(--head)}
#pkw .pipe-io .io .dot{width:9px;height:9px;border-radius:50%;flex:none}
#pkw .pipe-io .io .dot.raw{background:var(--coral)}
#pkw .pipe-io .io .dot.safe{background:var(--frost-deep)}

/* =========== product cards =========== */
#pkw .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#pkw .prod{padding:36px;border-radius:20px;position:relative;overflow:hidden}
#pkw .prod .tag{margin-bottom:18px}
#pkw .prod h3{font-size:30px;margin-bottom:6px}
#pkw .prod .q{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--head);margin:14px 0 12px;line-height:1.4}
#pkw .prod p{font-size:15.5px;color:var(--tx-2);line-height:1.6}
#pkw .prod .surf{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 24px}
#pkw .prod .surf .chip{font-size:11px;padding:6px 11px;color:var(--tx-2)}

/* =========== bento =========== */
#pkw .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
#pkw .bento .card{padding:30px;position:relative;overflow:hidden}
#pkw .bento .card:hover{transform:translateY(-4px);border-color:var(--brd-2)}
#pkw .bento .feat{grid-column:span 2;grid-row:span 2}
#pkw .bento .card h4{font-family:var(--serif);font-size:24px;color:#fff;margin-bottom:10px}
#pkw .bento .card p{font-size:15px;color:var(--tx-2);line-height:1.6}
#pkw .bento .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--glass-2);border:1px solid var(--brd);color:var(--frost)}
#pkw .bento .ico svg{width:22px;height:22px}

/* mini mainframe viz */
#pkw .mf-viz{margin-top:22px;display:flex;flex-direction:column;gap:7px}
#pkw .mf-bar{display:flex;align-items:center;gap:12px}
#pkw .mf-bar .nm{font-weight:700;font-size:12.5px;color:var(--tx-2);min-width:92px;display:flex;align-items:center;gap:7px}
#pkw .mf-bar .track{flex:1;height:9px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
#pkw .mf-bar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--frost));width:0;transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
#pkw .mf-bar.dim .fill{background:linear-gradient(90deg,#3a4780,#586099)}
#pkw .mf-bar .pc{font-weight:700;font-size:12px;color:var(--tx-3);min-width:38px;text-align:right}

/* =========== screenshot frame =========== */
#pkw .shot-frame{border-radius:16px;overflow:hidden;border:1px solid var(--brd-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);background:#0a1130}
#pkw .shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--brd)}
#pkw .shot-bar i{width:11px;height:11px;border-radius:50%;background:var(--brd-2);display:block}
#pkw .shot-bar .ttl{margin-left:10px;font-size:12.5px;color:var(--tx-3);font-weight:700}
#pkw .shot-frame img{width:100%;display:block}
#pkw .pkw-grey .shot-frame,#pkw .pkw-light .shot-frame{background:#fff;border-color:#D8DEE9;box-shadow:0 44px 96px -44px rgba(30,48,116,.4)}
#pkw .pkw-grey .shot-bar,#pkw .pkw-light .shot-bar{background:#EEF2F8;border-bottom-color:#E1E7F1}
#pkw .pkw-grey .shot-bar i,#pkw .pkw-light .shot-bar i{background:#C6CFDE}
#pkw .pkw-grey .shot-bar .ttl,#pkw .pkw-light .shot-bar .ttl{color:#8A93A8}

/* =========== testimonial =========== */
#pkw .quote-big{font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);line-height:1.32;color:#fff;max-width:100%;margin:0 auto;text-align:center;text-wrap:balance}
#pkw .quote-mark{font-family:var(--serif);font-size:90px;line-height:.6;color:var(--frost);opacity:.5;height:44px}
#pkw .quote-attr{text-align:center;margin-top:34px}
#pkw .quote-attr .nm{font-weight:700;color:#fff;font-size:16px}
#pkw .quote-attr .ro{font-size:14px;color:var(--tx-3);margin-top:3px}

/* =========== persona =========== */
#pkw .persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Generic 3-up card grid. Added 2026-08-12 for /products/pk-protect-for-zos, whose features
   section has three cards. Nothing existing served it: .persona-grid is repeat(4,1fr) and
   would have left an empty fourth column, .bento is repeat(3,1fr) but forces white headings
   for dark sections, and .pub-grid is publication-specific. Collapses at the same two
   breakpoints as .bento and .persona-grid, so the whole family steps together. */
#pkw .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* 2-UP CARD GRID - added 2026-08-12. Bob, on /solutions/data-encryption's four feature cards:
   "maybe it should be a 2 x 2, since there are four cards, let's try that please"

   A new class rather than a change to .persona-grid, which is repeat(4,1fr) and is what the home
   page's four persona cards use - retuning it to 2 columns would silently restack home. So
   .grid-2 sits beside .grid-3 as the same kind of utility, same 18px gap, and four cards in a
   2-column grid produce the 2x2 he asked for without a special case. */
#pkw .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
/* PADDING FOR .card INSIDE .grid-3. Bob, 2026-08-12, on /solutions: "there is no padding,
   the text is right up against the border lines." He was right and the cause is structural:
   base #pkw .card carries a border, background and radius but NO padding - padding lives only
   on the context rules .bento .card and .why-side .card, both 30px. A .card in .grid-3 got
   none, so its text sat flush against the border on /solutions and, latently, on
   /products/pk-protect-for-zos.

   SCOPED TO .grid-3 RATHER THAN FIXED ON BASE .card, deliberately. Moving padding onto
   #pkw .card looks like the tidier consolidation and would be identical for .bento and
   .why-side, which already restate 30px - but .card also appears in contexts beyond those
   three across home, why-pk-protect, pk-endpoint-manager and pk-data-store-manager. Padding
   the base rule would silently reflow all of them. Not worth it to save one selector.

   30px is not invented: it is what .card already uses in both other contexts, so this keeps
   one value for the component rather than introducing a third.

   THE IMAGE STAYS FULL-BLEED. Bob named the TEXT as the problem, and the image reaching the
   card edges is what the page already looked like. So the card is padded and the image is
   pulled back out by exactly that padding, which is why --card-pad exists rather than a
   literal 30px repeated in the calc - the two cannot drift apart.

   max-width:none IS LOAD-BEARING. #pkw img{max-width:100%} would clamp the negative-margin
   image straight back to the content box, so the bleed would silently do nothing while the
   margins still applied - the image would sit 30px too far left with a gap on the right.

   overflow:hidden clips the bled image to the card's 18px radius; without it the image's
   square corners poke through the rounded border. .bento .card already does this.

   Staging is not the authority here for once: /solutions on staging renders this content as
   a 50/50 Avada two-column layout, image beside text, with no card and no border at all.
   There was no padding value there to copy. */
/* EXTENDED TO .persona-grid 2026-08-12 for /solutions/data-encryption, whose features section
   presents FOUR parallel items rather than three. .persona-grid is already the 4-up grid
   (repeat(4,1fr), collapsing to 2x2 then 1), so it needed no new grid - only the same card
   treatment .grid-3 got, because .persona-grid .card had no padding either.

   Same 28px -> 30px side effect on home's icon cards as the .grid-3 change, and already logged
   in the unification log. The >img bleed cannot affect them: home's persona cards wrap their
   icon in <span class="ico">, so there is no direct img child to match. */
/* 1.10.48 - .two-col added to this list. A .card in a .two-col column had NO padding at
   all, so its text sat against its own border on /careers' scam-alert block.

   THE CAUSE IS A FOUR-WAY DUPLICATION. Every padding declaration for .card in this
   stylesheet is container-scoped - `.bento .card`, this rule, and `.why-side .card` - and
   there is NO base `.card` padding. So a card in any container nobody thought of renders
   unpadded, and this is the fourth container.

   THE PROPER FIX IS ONE BASE DECLARATION, and it is logged as consolidation debt rather
   than done here. Moving padding onto `#pkw .card` and letting containers override would
   collapse four declarations into one - but it touches 215 cards across 41 pages, and the
   >img full-bleed rule below is deliberately grid-scoped, so any card outside a grid with
   a direct child image would gain padding without the matching negative margin. That is a
   change to make with a visual pass behind it, not while Bob is mid-review.

   .two-col is safe to add here: careers' card is the only .card in a .two-col on any
   page, and it carries no image. */
#pkw .grid-2 .card,
#pkw .grid-3 .card,
#pkw .two-col .card,
#pkw .persona-grid .card{--card-pad:30px;padding:var(--card-pad);overflow:hidden}
#pkw .grid-2 .card>img,
#pkw .grid-3 .card>img,
#pkw .persona-grid .card>img{max-width:none;width:calc(100% + var(--card-pad)*2);
  margin:calc(var(--card-pad)*-1) calc(var(--card-pad)*-1) 20px}

/* SPACE UNDER A CARD HEADING. Bob, on the four feature cards: "Need more spacing between the
   title and the text here."

   Same root cause as the .two-col heading: #pkw h1..h4 sets margin:0, and only three card
   contexts ever overrode it - .bento .card h4 at 10px, .why-side .card h4 at 9px, .persona h4
   at 7px. A card in .grid-2, .grid-3 or .persona-grid matched none of them and got zero, so its
   heading sat directly on the paragraph.

   10px, matching .bento .card h4 - the closest analogue, being the other image-less card grid -
   rather than introducing a fourth value into a family that already had three within 3px.

   Side effect, deliberate and consistent with the 28px -> 30px padding decision already logged:
   this outranks #pkw .persona h4, so icon cards inside a grid move 7px -> 10px. */
/* 1.10.49 - .two-col added here too. THE SAME FOUR-WAY DUPLICATION AS THE PADDING RULE,
   biting the same card a second time: a card heading's bottom margin is declared three
   separate times in container scopes (.bento .card h4, this rule, .why-side .card h4)
   over a `#pkw h1..h4{margin:0}` base. So "Scam Alert:" on /careers sat directly on the
   sentence below it. Two container-scoped misses in one card is the argument for the base
   consolidation logged in the component registry. */
#pkw .grid-2 .card>h4,
#pkw .grid-3 .card>h4,
#pkw .two-col .card>h4,
#pkw .persona-grid .card>h4{margin-bottom:10px}

/* 1.10.49 - CONSECUTIVE PARAGRAPHS INSIDE A CARD. `#pkw p{margin:0}` is the base for the
   whole page, which is correct - paragraph spacing in this theme comes from the container -
   but no container rule ever covered a card holding more than one paragraph, so they ran
   together with no gap at all.

   THIS IS NOT A CAREERS FIX. 7 of the 215 cards on the site hold two or more paragraphs -
   on /careers, home, identity-access, pk-protect-for-zos and zip-reader - and every one has
   been rendering butted paragraphs. Bob spotted it on careers; the rule fixes all five.

   Deliberately `p + p` rather than a margin on every `p`: the first paragraph has to stay
   tight under the heading, which supplies its own 10px. */
/* 1.10.52 - a LIST inside a card gets the same gap as a sibling paragraph. The
   /company/pkware-responsible-ai "Protection of Customer Data" card is a paragraph, a
   two-item list, then a closing paragraph; without these two the list butts against both.
   Same 14px as p + p, because it is the same relationship. */
#pkw .card p + p,
#pkw .card p + ul,
#pkw .card ul + p { margin-top: 14px; }

/* 1.10.49 - a CARD FOLLOWING A PARAGRAPH needs air between them. Bob 2026-08-13: "see if
   you can fix this spacing issue by at least 30px with the Scam Alert" - the card was
   butted against the column copy above it. 30px matches the card's own padding, so the
   optical gap from the text above to the text inside is 60px.

   Scoped to `p + .card` and not to every .card in a .two-col: a card that OPENS a column
   should sit at the top of it, and only one that follows copy needs separating. */
#pkw .two-col p + .card { margin-top: 30px; }

/* ============================================================================
   1.10.50 - AN OFFICE: a linked map beside an address. Added for /contact.

   A media object, not a card - the map is a fixed 150px rail and the address takes the
   rest, and there is no panel, border or background because staging has none. Three of
   them stack in the second column of a .two-col.

   THE MAP IS A LINK, so .office-map is a block anchor rather than a bare img: an inline
   anchor would sit on the text baseline and leave a gap under the image, and it could not
   take a border-radius cleanly. Same reason the /demo screenshot link became a block.

   .office-tel IS RULED OFF from the address above it, which is what staging shows - a
   hairline between the postal address and the phone number. It is a border on the phone
   line rather than a separate <hr>, so an office with no postal address (International
   Sales has only phone numbers) still gets the rule in the right place without an empty
   element. */
#pkw .office { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; }
#pkw .office + .office { margin-top: 30px; }
#pkw .office h3 { font-size: 20px; margin-bottom: 8px; }
#pkw .office p { color: var(--tx-2); line-height: 1.6; }
#pkw .office-map { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--brd); }
#pkw .office-map img { display: block; width: 100%; height: auto; }
#pkw .office-tel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--brd); }

/* One column on a phone: a 150px rail beside text works down to tablet, but under that
   the address column gets too narrow to hold a street line without wrapping badly. */
@media (max-width: 560px) {
  #pkw .office { grid-template-columns: 1fr; gap: 16px; }
  #pkw .office-map { max-width: 220px; }
}
#pkw .persona{padding:28px;border-radius:16px;transition:transform .28s,border-color .28s}
#pkw .persona:hover{transform:translateY(-4px)}
#pkw .persona .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(30,48,116,.06);border:1px solid var(--brd-2);color:var(--navy)}
#pkw .persona .ico svg{width:23px;height:23px}
#pkw .persona h4{font-family:var(--serif);font-size:21px;color:var(--head);margin-bottom:7px}
#pkw .persona p{font-size:14px;color:var(--tx-2);line-height:1.5;margin-bottom:16px}

/* 1.10.54 - A PERSONA CARD THAT ENDS AT ITS HEADING. `.persona h4` carries a 7px bottom
   margin sized for the body copy that normally follows it, so a card that IS just an icon
   and a heading gets 28px of top padding against 35px at the bottom.
   /company/pkware-responsible-ai has three such cards, because staging gives those items
   no body and no destination.

   DELIBERATELY NOT `p:last-child` AS WELL. `.persona p` carries a 16px bottom margin for
   the Learn more .tlink that normally follows it, and the same argument applies - but
   measuring first showed **74 persona cards across 24 already-approved pages** end at a
   paragraph with no link. Zeroing that margin would tighten every one of them. The
   heading case affects exactly the three new cards and nothing else; the paragraph case
   is a site-wide spacing change and belongs in final styling, not in a page fix. */
#pkw .persona h4:last-child { margin-bottom: 0; }

/* =========== THE COMPANY HISTORY TIMELINE - 1.10.57 =========== */
/* Ported for /company from a [fusion_code] block on staging. NOT an Avada component -
   hand-written code Bob and this project wrote together. Bob, on how to convert it:
   "I wrote it with you, so you can add it however you want ... you and I built that, I
   trust it." So it is ported faithfully rather than simplified, and its behaviour lives
   in assets/js/components.js with the other shared component behaviour.

   ELEVEN DECLARATIONS FROM STAGING'S VERSION ARE GONE, every one of them because the
   theme already does the same thing. This is what "port" means here - not paste:

     - its whole `--pk-navy / --pk-cyan / --pk-frost / --pk-white` variable block. Three
       of those were EXACTLY the theme's tokens already (#1e3074, #09bcef, #0fe4a2), so
       they are now var(--navy), var(--cyan), var(--frost) and cannot drift from the rest
       of the site. --pk-slate #4c5c68 was NOT a theme colour and became --tx-2 #5C6472,
       which is what every other body paragraph on a white card uses.
     - `box-sizing: border-box` on every descendant - the global reset covers it.
     - `list-style:none; margin:0; padding:0` on .pkw-track - the reset's `ol[class]`
       rule covers it, and .pkw-track is an ol with a class.
     - `margin: 0` on .pkw-year and .pkw-card p - `#pkw p{margin:0}` is the base.
     - .pkw-title entirely: its own centred clamp in 'Playfair Display'. The title is now
       an h2.h2 inside a .sec-head. THE THEME HAS NO PLAYFAIR - --serif is Georgia, which
       was already the next name in staging's own font stack, so nothing changes visually
       and the heading now matches every other h2 on the site.
     - its section padding and `max-width: 1300px` - .sec and .wrap supply both, which is
       also what keeps this section aligned with the header like every other one.
     - its own @media(prefers-reduced-motion) block - folded into the shared one below.

   THE DARK CONTEXT IS DECLARED AS TOKEN OVERRIDES, the same way .pkw-dark does it,
   rather than as a hard-coded white on the heading. That is what makes .h2 and .eyebrow
   correct inside this section without a rule each.

   .pkw-card THEN PUTS THE LIGHT TOKENS BACK, because it is a white card sitting inside a
   dark section - inheriting the section's --tx-2 (#AEB8DC) would render its copy almost
   invisible. This is the one place in the theme where a light island sits inside a dark
   section, so it is stated explicitly rather than left to inheritance.

   ORDER MATTERS HERE: `#pkw .pkw-history` and `#pkw .sec` are both (1,1,0), so the
   gradient only beats .sec's background-color because this block sits later in the file.
   Do not move it above the section definitions. */
#pkw .pkw-history{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy) 0%,#25275C 100%);color:#EEF2FF;
  --head:#FFFFFF; --tx:#EEF2FF; --tx-2:#AEB8DC; --tx-3:#8791B8;
  --eb:var(--frost); --brd:rgba(255,255,255,.10); --brd-2:rgba(255,255,255,.17)}
#pkw .pkw-tl{position:relative}
#pkw .pkw-track{display:flex;padding:0 4px 8px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
#pkw .pkw-track::-webkit-scrollbar{display:none}
#pkw .pkw-track.pkw-dragging{cursor:grabbing;scroll-behavior:auto}
#pkw .pkw-track:focus-visible{outline:2px solid var(--frost);outline-offset:4px;border-radius:12px}
#pkw .pkw-item{flex:0 0 clamp(260px,78vw,340px);scroll-snap-align:start;
  display:flex;flex-direction:column;padding:0 14px}
#pkw .pkw-year{font-family:var(--serif);font-size:2rem;line-height:1;color:#FFFFFF;margin-bottom:18px}
#pkw .pkw-item-now .pkw-year{color:var(--frost)}
#pkw .pkw-rail{position:relative;height:34px;margin-bottom:18px}
#pkw .pkw-rail::before{content:"";position:absolute;left:-14px;right:-14px;top:50%;height:3px;
  transform:translateY(-50%);
  background-image:linear-gradient(90deg,var(--cyan),var(--frost),var(--cyan));
  background-size:220px 100%;animation:pkw-flow 6s linear infinite}
@keyframes pkw-flow{to{background-position:220px 0}}
#pkw .pkw-dot{position:absolute;left:0;top:50%;width:16px;height:16px;transform:translateY(-50%);
  border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 0 7px rgba(9,188,239,.22)}
#pkw .pkw-item-now .pkw-dot{background:var(--frost);
  box-shadow:0 0 0 4px rgba(255,255,255,.22),0 0 0 8px rgba(15,228,162,.28)}
/* The light island. See the note above before changing --tx-2 here. */
#pkw .pkw-card{flex:1 1 auto;--tx-2:#5C6472;color:var(--tx-2);background:#FFFFFF;
  border-radius:14px;padding:22px 22px 24px;
  box-shadow:0 14px 30px rgba(14,20,48,.28);border-top:3px solid var(--cyan)}
#pkw .pkw-item-now .pkw-card{border-top-color:var(--frost)}
#pkw .pkw-card p{font-size:15px;line-height:1.6}
/* THE REVEAL IS OPT-IN, and that is a deliberate no-JS guarantee rather than a style
   choice: .pkw-js is added by components.js only once the script is actually running, so
   if it never runs, every card stays fully visible instead of stuck at opacity 0. This is
   the same failure mode the theme's own .reveal has and the reason to copy the pattern. */
#pkw .pkw-history.pkw-js .pkw-item{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease}
#pkw .pkw-history.pkw-js .pkw-item.pkw-in{opacity:1;transform:none}
/* top: the year's 2rem line + its 18px margin + half the 34px rail = the rail's centre */
#pkw .pkw-nav{position:absolute;top:calc(2rem + 18px + 17px);transform:translateY(-50%);z-index:3;
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:none;border-radius:50%;
  background:#FFFFFF;color:var(--navy);box-shadow:0 6px 18px rgba(14,20,48,.35);cursor:pointer;
  transition:background .2s ease,transform .15s ease,opacity .2s ease}
#pkw .pkw-nav svg{width:20px;height:20px}
#pkw .pkw-nav:hover:not(:disabled){background:var(--frost);transform:translateY(-50%) scale(1.06)}
#pkw .pkw-nav:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
#pkw .pkw-nav:disabled{opacity:0;pointer-events:none}
#pkw .pkw-nav-prev{left:-6px}
#pkw .pkw-nav-next{right:-6px}
#pkw .pkw-scrub{max-width:520px;margin:34px auto 0;padding:0 8px}
#pkw .pkw-scrub-track{position:relative;height:6px;border-radius:6px;
  background:rgba(255,255,255,.16);cursor:pointer}
#pkw .pkw-scrub-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--cyan),var(--frost));pointer-events:none}
#pkw .pkw-scrub-thumb{position:absolute;top:50%;left:0;width:20px;height:20px;
  transform:translate(-50%,-50%);border-radius:50%;background:#FFFFFF;
  box-shadow:0 3px 10px rgba(14,20,48,.4);cursor:grab}
#pkw .pkw-scrub-thumb:active{cursor:grabbing}
#pkw .pkw-scrub-thumb:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
/* 640px IS THIS COMPONENT'S OWN BREAKPOINT, kept local rather than folded into the
   shared 820/560 queries. Below it a .pkw-item is at its 260px floor and the arrows,
   at left/right -6px, would sit on top of the cards. Adding 640 to the shared set would
   make it a fourth site-wide breakpoint for one component's geometry. */
@media(max-width:640px){
  #pkw .pkw-nav{display:none}
  #pkw .pkw-year{font-size:1.75rem}
}

/* =========== THE AWARD BADGE ROW - 1.10.57 =========== */
/* Four award marks on /company. Staging draws them through a fusion_images CAROUSEL, but
   read its own configuration: autoplay="no", show_nav="no", columns="4", four images. A
   carousel that never moves and shows everything at once is a row, so it is built as one
   and the jQuery + Slick behind it is not needed.

   NOT `.award`, WHICH ALREADY EXISTS AND IS A DIFFERENT COMPONENT: that is ONE badge
   beside a caption in a hero - inline-flex, glass panel, .aw-t heading, 92px mark. These
   are bare marks with no captions. Checked before naming, because reusing it would have
   put a panel and a border around each of the four.

   150px IS STAGING'S OWN SIZE, but declared as width-only against staging's
   `min/max-width AND min/max-height: 150px !important`. All four sources are square
   250x250 so this renders identically today, and a future badge that is not square will
   scale instead of distorting. */
#pkw .awards-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px}
#pkw .awards-row img{width:150px;height:auto;flex:none}

/* =========== THE CONNECTOR DIRECTORY - 1.10.58 =========== */
/* Built for /connectors, which lists 168 supported platforms in 16 categories. Two more
   pages of the same shape are coming, which is why this is a named component on the first
   page rather than after the second: Bob introduced it as "three pages that are similar".

   WHAT IT REPLACES. Staging renders each connector as a bare 250x250 image in a 1/6-width
   Avada column capped at 150px, with NO visible label - the connector's NAME lives only in
   the img `alt` and `title`. A page listing 168 platforms therefore published none of their
   names as text. `.conn` puts the name beside the mark as real content, which is both the
   readable and the findable version of the same page.

   THE IMG IS DECORATIVE HERE, alt="". The name is a `.conn-name` span immediately after it,
   so alt text would make a screen reader say every connector twice.

   AUTO-FILL IS THE RIGHT ANSWER HERE, AND IT DOES NOT CONTRADICT THE `grid-3` NOTE. That
   note says `repeat(auto-fit, minmax(280px,1fr))` is deliberately NOT used - but it is about
   REPOINTING `.grid-2/.grid-3`, where three cards must be guaranteed to sit in one row. This
   is a new class on a different problem: the category counts are 1, 1, 2, 3, 3, 3, 6, 6, 7,
   8, 12, 13 and 95, so a fixed column count would need thirteen decisions and would still
   leave ragged rows. A directory is exactly the case where reflowing by width is correct, and
   nothing existing changes. */
#pkw .conn-cat + .conn-cat{margin-top:52px}
/* A BARE h2, NOT `.h2`. `.h2` is clamp(30px,3.5vw,46px), sized for one section heading; at
   26px these category labels read as labels instead of competing with the page. The serif
   family, --head colour and margin:0 still come from the global `#pkw h1..h4` rule.

   1.10.59 - WAS `.conn-cat > h2`, NOW A DESCENDANT SELECTOR. /company/customers wraps the
   heading in a .conn-cat__head beside a case-study button, which made the h2 a grandchild and
   silently dropped it back to the global 18px body size. Measured before changing: all 15
   existing uses on /connectors are direct children, so a descendant selector matches exactly
   the same elements there and nothing moves. */
#pkw .conn-cat h2{font-size:26px;margin-bottom:20px}

/* 1.10.59 - A CATEGORY HEADING WITH A LINK BESIDE IT. Staging's /company/customers puts each
   industry heading in a 3/4 column and a "Featured Case Study" button in the 1/4 beside it, so
   the two share a row. flex-wrap means the button drops under the heading on a narrow screen
   rather than squeezing it. The wrapper owns the 20px gap to the grid, so the h2's own bottom
   margin is zeroed here rather than made conditional. */
#pkw .conn-cat__head{display:flex;align-items:center;justify-content:space-between;
  gap:16px 24px;flex-wrap:wrap;margin-bottom:20px}
#pkw .conn-cat__head h2{margin-bottom:0}

/* 1.10.61 - A LEAD PARAGRAPH THAT RUNS THE FULL CONTAINER WIDTH.
   Bob, on /company/customers' intro: "this block should run full width, create whatever you
   have to to make that happen."

   `#pkw .lead` caps itself at 56ch, which is right for the hero and the final CTA - the two
   places it started - and is what this page's 700-character intro was inheriting.

   A MODIFIER, NOT A CHANGE TO `.lead`. Measured first: `.lead` is used 62 times across the
   built fragments, every one of them relying on the 56ch measure. Removing the cap on the base
   class would re-wrap all 62 on 40-odd approved pages. This adds one opt-in class and moves
   nothing that already exists - the same reasoning as `.cov-stage--tall`.

   Named `--full` to sit beside `.sec-head--narrow`, which is the theme's existing modifier
   convention for the same axis. */
#pkw .lead--full{max-width:none}
#pkw .conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:14px}
#pkw .conn{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 14px;
  background:var(--panel);border:1px solid var(--brd);border-radius:14px;
  transition:transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s ease,border-color .25s ease}
#pkw .conn:hover{transform:translateY(-3px);border-color:var(--brd-2);box-shadow:var(--card-shadow)}
/* A FIXED-HEIGHT MARK SLOT, so wordmarks and square icons share a baseline. Every source is
   250x250, so max-height alone sizes them; the slot is what stops a row from going ragged
   when a future mark is not square. */
#pkw .conn-mark{display:grid;place-items:center;width:100%;height:58px}
#pkw .conn-mark img{width:auto;max-width:100%;max-height:58px}
#pkw .conn-name{font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.4;
  text-align:center;color:var(--tx-2)}

/* =========== FAQ =========== */
#pkw .faq{max-width:860px;margin:0 auto;border-top:1px solid var(--brd)}
#pkw .faq-item{border-bottom:1px solid var(--brd)}
#pkw .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 4px;text-align:left;font-family:var(--serif);font-size:21px;color:var(--head)}
#pkw .faq-q .ic{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--brd-2);display:grid;place-items:center;transition:transform .3s,background .3s;color:var(--eb)}
#pkw .faq-q .ic svg{width:14px;height:14px}
#pkw .faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--frost);color:#062B20;border-color:var(--frost)}
#pkw .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
#pkw .faq-a p{padding:0 4px 26px;font-size:16.5px;color:var(--tx-2);line-height:1.65;max-width:70ch}

/* ---------- the closing CTA band: .cta-ads-inline, with .cta-final kept beside it ----
   Renamed on the pages 2026-08-17. Bob: "let's convert all those sec cta-final pkw-dark to
   sec cta-ads-inline pkw-dark please, along with the css necessary."

   EVERY SELECTOR BELOW CARRIES BOTH NAMES RATHER THAN BEING RENAMED, deliberately. The 43
   in-scope bands were all exactly `sec cta-final pkw-dark`, and NONE of them are under
   /landing - measured before anything was touched. But /landing still has nine bands using
   cta-final in other combinations: five bare `sec cta-final`, three `sec cta-final cta-frost
   pkw-dark`, one `sec cta-final pkw-grey`. Renaming the selectors would have unstyled all
   nine, and /landing is out of scope, so it cannot be swept to follow.

   ONE SET OF DECLARATIONS, TWO NAMES - not two copies. A second copy is exactly how one band
   ends up looking different in two places, which is the problem this whole exercise removes.
   WHEN /landing COMES INTO SCOPE: sweep those nine, then drop cta-final from these eight
   selectors.

   THE INLINE PADDING IS STILL THERE AND STILL INCONSISTENT. `#pkw .sec.cta-ads-inline` sets
   var(--pk-sec-y-cta) = 30px, and 12 of the 43 override it inline at 118px or 112px, so the
   site renders this band at two very different heights. Bob flagged it on home: "Slightly
   taller than the rest." That is a content change rather than a CSS one, so it is not fixed
   here - it is the next decision on this band. */
/* ---------- .cta-ads-inline--mesh : the CSS-only background, opt-in -------------
   Added 2026-08-17. Bob: "I want to save that scheme on the background, but I want to try
   to change it, make it HTML5 using the same colors, but doing something very cool, and
   very 21st century ... Subtle, but like, whoa, what did Bob do?" - then, after weighing
   canvas against CSS: "let's try css then".

   NOTHING IS REPLACED. The existing scheme - .aurora, .blob.b1/.b2, .sweep, .grain, and the
   drift1/drift2 keyframes - is untouched and still what 42 of the 43 bands render. This is a
   MODIFIER, applied to one page, so comparing it is a matter of looking at two URLs and
   reverting is deleting one word from one page.

   WHY CSS AND NOT CANVAS, recorded because it was a real decision:
     - reduced motion is FREE here. @media(prefers-reduced-motion:reduce) already declares
       `#pkw *{animation:none!important}`, so both animations below stop and the gradients
       simply hold at their initial values. A canvas cannot be reached by a media query -
       it needs matchMedia plus a change listener or the OS setting is ignored outright,
       and only 1 of the theme's 12 JS files checks reduced motion today.
     - LiteSpeed cannot break it. Its JS defer / delay-until-interaction would show a static
       background and then pop when the script finally ran; and LiteSpeed is on live, the one
       host this project cannot test against.
     - no no-JS fallback to build, and nothing to maintain.

   HOW IT WORKS, and the one modern bit that matters: an UNREGISTERED custom property cannot
   be animated - the browser treats it as a string and swaps values with no interpolation.
   @property registers these as typed, which is what lets a keyframe move a gradient's
   position and a conic angle smoothly. This stylesheet had zero @property rules before now.

   TWO LAYERS, both on pseudo-elements the band was not using:
     ::before  three soft radial fields - cyan, frost, navy - orbiting on a 42s alternating
               cycle, blurred 40px, inset -10% so the blur never shows an edge
     ::after   a very wide conic sheen at 10% frost, rotating once every 28s, screen-blended
   `isolation:isolate` keeps that blend inside the section instead of reaching the page.
   #pkw .wrap is already position:relative z-index:2, so the copy stays above both.

   THE OLD LAYERS ARE HIDDEN under this modifier rather than removed from the markup, so the
   section keeps its .aurora/.sweep divs and the class alone decides which treatment renders.
   .grain STAYS ON - the noise is what stops a smooth gradient looking like plastic, and it
   is the one part of the original worth keeping.

   COLOURS ARE THE EXISTING ONES: #09BCEF cyan, #0FE4A2 frost, #1E3074 navy, on #070C24.
   No new colour is introduced. Opacities are higher than the old blobs' because the blur is
   lower and there are three fields instead of two.

   DEGRADES QUIETLY. No @property support - the gradients paint at their initial values and
   sit still. No conic-gradient - ::after paints nothing. Either way the band is a dark panel
   with soft brand light in it, which is the point. */

@property --pk-m1x { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
@property --pk-m1y { syntax: '<percentage>'; inherits: false; initial-value: -6%; }
@property --pk-m2x { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --pk-m2y { syntax: '<percentage>'; inherits: false; initial-value: 108%; }
@property --pk-m3x { syntax: '<percentage>'; inherits: false; initial-value: 52%; }
@property --pk-msheen { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

#pkw .cta-ads-inline--mesh { isolation: isolate; }

#pkw .cta-ads-inline--mesh .aurora,
#pkw .cta-ads-inline--mesh .sweep { display: none; }

#pkw .cta-ads-inline--mesh::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at var(--pk-m1x) var(--pk-m1y), rgba(9,188,239,.62),  transparent 62%),
    radial-gradient(38% 46% at var(--pk-m2x) var(--pk-m2y), rgba(15,228,162,.64), transparent 60%),
    radial-gradient(34% 40% at var(--pk-m3x) 116%,          rgba(30,48,116,.78),  transparent 66%);
  filter: blur(26px) saturate(1.15);
  animation: pk-mesh-drift 36s ease-in-out infinite alternate;
}

#pkw .cta-ads-inline--mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from var(--pk-msheen) at 64% 34%,
      transparent 0 58%, rgba(15,228,162,.20) 68%, rgba(9,188,239,.17) 74%, transparent 84%),
    conic-gradient(from calc(var(--pk-msheen) * -1) at 30% 66%,
      transparent 0 57%, rgba(15,228,162,.24) 67%, rgba(9,188,239,.12) 73%, transparent 83%);
  mix-blend-mode: screen;
  animation: pk-mesh-sheen 22s linear infinite;
}

@keyframes pk-mesh-drift {
  0%   { --pk-m1x: 88%; --pk-m1y: -10%; --pk-m2x: 10%; --pk-m2y:  96%; --pk-m3x: 58%; }
  50%  { --pk-m1x: 58%; --pk-m1y:  22%; --pk-m2x: 32%; --pk-m2y:  68%; --pk-m3x: 32%; }
  100% { --pk-m1x: 94%; --pk-m1y:   6%; --pk-m2x:  4%; --pk-m2y: 102%; --pk-m3x: 70%; }
}

@keyframes pk-mesh-sheen { to { --pk-msheen: 360deg; } }
/* =========== final CTA =========== */
#pkw .cta-final,
#pkw .cta-ads-inline{text-align:center;position:relative;overflow:hidden}

/* THE NAVY PLANE GETS DEPTH - 2026-08-19, theory A. Bob: "how do we approach the navy
   background, there has to be some effect there, theorize" -> "try A please."

   THE DIAGNOSIS THIS FIXES. #pkw .pkw-dark paints `background-color:#070C24` and nothing else:
   a FLAT colour. Every effect on this band - the two blobs, the travelling sweep, the grain -
   was therefore sitting ON the plane rather than IN it, which is why adding more floating
   objects never scratched the itch. Static, no animation: this is the ground the other layers
   stand on.

   IT IS background-image ON THE SECTION, NOT A PSEUDO-ELEMENT, and that is the reason it is
   two declarations instead of ten. background-image layers over the inherited
   background-color, and a parent's background always paints BELOW its children - so .aurora,
   .sweep and .grain keep their existing order with no z-index anywhere, and both ::before and
   ::after stay free for whatever comes next.

   ON .cta-ads-inline AND NOT ON .pkw-dark, deliberately. That class paints every dark anchor
   section on the site and redeclares the whole token set inside it; putting a gradient there
   would repaint sections with nothing to do with the ad.

   LAYER ORDER IS TOP-DOWN, so the vignette is written first:
     1. VIGNETTE - a radial that is transparent through the middle 38% and reaches 45% black at
        the corners. Its job is not decoration, it is direction: it pushes the eye to the centre,
        which is where the heading and the button are.
     2. FALLOFF - PK Navy #1E3074 lifted at the top, fading out by 38%, then 22% black at the
        bottom. A horizon, so the band has a top and a bottom instead of being one value.

   THE LIFT IS NAVY, NOT WHITE. White at low alpha over #070C24 desaturates toward grey and the
   band goes flat-cold; the navy token keeps the lift inside the brand family and reads as
   depth rather than as haze.

   IT CANNOT DIM THE BLOBS, which is worth knowing before anyone tries to tune it: b1 and b2
   are child ELEMENTS, so they paint above this entirely. The vignette shapes the plane only.
   Their mix-blend-mode:screen does see the darker corners as backdrop, so they will read very
   slightly stronger at the edges - the right direction, and the reason not to push the 45%
   any higher. */
/* THE PLANE ITSELF MOVES - 2026-08-19. Bob: "I wanted an animation effect on the background."

   THEORY A WAS BUILT AND REMOVED, and it is worth one line so nobody rebuilds it: a static
   depth gradient plus an edge vignette, which he declined outright - "no, I don't want that."
   The first pass at it was also invisible by arithmetic, because a percentage radius resolves
   against the BOX: 130% of a 1500px band is a 1950px radius, so a transparent stop at 38% ran
   to 741px against a 750px half-width and the ramp never got inside the element. Second
   geometry-by-percentage mistake on this project, after byte offsets versus character offsets.

   WHAT THIS DOES INSTEAD. One wide gradient of navy tones on the section's own background,
   sized to 300% of the band and slid from one end to the other and back over 34 seconds. The
   NAVY moves - a slow tide across the plane - rather than an object moving on top of it. Every
   existing layer is untouched: the two breathing blobs, the travelling sweep, the grain.

   background-position, NOT @property. Position is animatable natively, so this needs no typed
   custom property and no registration - the dormant mesh below needs @property only because it
   animates stops inside a conic. Fewer moving parts for the same result.

   COLOURS ARE THE BASE PLUS TWO LIFTS OF ITSELF: #070C24 is the .pkw-dark value, #0D1A44 and
   #071A3A are that colour lifted toward PK Navy and toward cyan-navy. No new hue is
   introduced, so it reads as the same band breathing rather than as a colour cycle.

   ease-in-out AND alternate-by-keyframe, so it slows and turns at each end instead of jumping
   back to the start - a background that snaps every 34s is worse than a static one.

   REDUCED MOTION IS FREE: this is inside #pkw, so `#pkw *{animation:none!important}` stops it
   and the band holds at 0% - a flat navy with a slight lift, which is the state to keep in mind
   when tuning, because that is what a reduced-motion visitor sees. */
/* AMPLITUDE RAISED - Bob: "can we make the navy background more apparent, I can always dial it
   back." Stops went from #0D1A44 / #071A3A to #1B2C6B / #0A2C57, and the cycle from 34s to 26s.

   #1B2C6B IS ESSENTIALLY PK NAVY #1E3074, one notch down, so the tide now runs from the near
   black #070C24 up to the brand navy and back. #0A2C57 is the same lift pulled toward cyan, so
   the middle of the pass reads cooler than its ends. Still no new hue - both are the existing
   palette, which is why it stays a navy band breathing rather than a colour cycle.

   THREE DIALS, IN THE ORDER THAT MATTERS:
     1. THE STOPS are amplitude. Toward #1E3074 for more, toward #070C24 for less. This is the
        one to move first.
     2. 26s is speed.
     3. background-size 300% is how much of the gradient is on screen at once - lower it toward
        200% for broader washes, raise it for tighter movement.

   REMEMBER WHAT REDUCED MOTION SEES when tuning: the animation stops and the band holds at the
   0% frame, which is flat #070C24. The louder the stops get, the bigger the gap between what
   most visitors see and what that visitor sees. */
#pkw .cta-ads-inline {
  background-image: linear-gradient(115deg,
    #070C24 0%, #1B2C6B 26%, #0A2C57 50%, #1B2C6B 74%, #070C24 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: pk-cta-plane 26s ease-in-out infinite;
}
@keyframes pk-cta-plane {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* MOVED OUT OF THE PAGE CONTENT 2026-08-12. Every converted page had been carrying these three
   as inline style attributes - `style="padding:118px 0"` on the section, `style="max-width:760px"`
   on the wrap, and `style="justify-content:center;display:flex"` on the eyebrow - which is exactly
   the inline styling the consolidation mandate exists to remove.

   Written as `.sec.cta-final`, not `.cta-final`, on purpose: `#pkw .sec` is redefined to 76px
   inside the max-width:820px query at the foot of this file, and a single-class selector would
   lose to it on mobile. Two classes outrank it in every query, so the value holds at one place.

   The eyebrow rule duplicates what `.sec-head .eyebrow` already does, because the final CTA's
   eyebrow is a direct child of .wrap and never sits inside a .sec-head.

   The five pages built before this still carry the inline attributes. They win over these rules
   but declare the identical values, so nothing moves; stripping them is a separate pass. */
#pkw .sec.cta-final,
#pkw .sec.cta-ads-inline{padding:var(--pk-sec-y-cta) 0}

/* A cta-final WITH NO BACKGROUND MODIFIER gets staging's light panel. Added 2026-08-17.
   Bob: "On staging, this is a light grey background ... can you fix the ones on demo
   please, to have the same apperance as staging."

   Staging declares it blanket: `.cta-final{text-align:center;background-color:var(--bg-2)}`
   and lets its dark variants override. --bg-2 is #F4F8FD on BOTH hosts, checked, so this is
   staging's value and not a new one.

   BLANKET WOULD HAVE BEEN WRONG HERE. #pkw .pkw-dark, #pkw .pkw-grey and #pkw .pkw-light all
   set background-color at (1,1,0) - identical specificity to `#pkw .cta-final` - so a blanket
   rule would be decided by source order against every one of them, including the 43
   cta-ads-inline bands that are all pkw-dark. The :not() chain fires only where no background
   modifier is present, which is exactly the five bare `sec cta-final` sections on the event
   landing pages: infosec-nashville-2026, pci-ssc-north-america-2026,
   chicago-cybersecurity-summit-2026, columbus-cybersecurity-summit-2026, share-pittsburgh-2026.

   NOT EXTENDED TO cta-ads-inline. All 43 of those carry pkw-dark, so the rule could never
   fire on them - adding the name would be a selector nobody can reach. */
#pkw .sec.cta-final:not(.pkw-dark):not(.pkw-grey):not(.pkw-light){background-color:var(--bg-2)}
#pkw .cta-final .wrap,
#pkw .cta-ads-inline .wrap{max-width:760px}
#pkw .cta-final .eyebrow,
#pkw .cta-ads-inline .eyebrow{display:flex;justify-content:center}
#pkw .cta-final h2,
#pkw .cta-ads-inline h2{margin-bottom:18px;text-wrap:balance}
#pkw .cta-final .lead,
#pkw .cta-ads-inline .lead{margin:0 auto 32px;text-align:center}
/* GENERALISED 2026-08-12. .btns was defined only as `.cta-final .btns`, so a button row
   anywhere else in the page had no styling at all. /solutions/data-discovery needs one in a
   body column - staging renders the Western Union case study with a real button, and the
   first conversion demoted it to a text link, which Bob caught: "no image, no button."

   Base + modifier rather than a second rule, so there is one definition of a button row.
   The rendered result for .cta-final is byte-identical: the same display, gap and flex-wrap
   now come from the base, and only justify-content stays as the centring modifier. */
#pkw .btns{display:flex;gap:14px;flex-wrap:wrap}
#pkw .cta-final .btns,
#pkw .cta-ads-inline .btns{justify-content:center}
#pkw .two-col .btns{margin-top:28px}
#pkw .cta-final .trust-line,
#pkw .cta-ads-inline .trust-line{margin-top:30px;font-size:14px;color:var(--tx-3)}

/* ---- Fiserv quote card with cover shot ---- */
#pkw .fiserv-quote{display:grid;grid-template-columns:1fr 288px;gap:48px;align-items:center}
#pkw .fiserv-cover{display:flex;flex-direction:column;gap:18px}
#pkw .fiserv-cover .cov-img{display:block;border-radius:12px;overflow:hidden;border:1px solid #D8DEE9;
  box-shadow:0 34px 64px -30px rgba(30,48,116,.55);transition:transform .3s,box-shadow .3s}
#pkw .fiserv-cover .cov-img:hover{transform:translateY(-5px);box-shadow:0 46px 80px -32px rgba(30,48,116,.62)}
#pkw .fiserv-cover .cov-img img{width:100%;display:block}
#pkw .fiserv-cover .read{justify-content:center;font-size:16px}

/* THE QUOTE WAS CAPPED AT 30ch INSIDE AN 876px TRACK - fixed 2026-08-19. Bob, looking at
   /solutions: "The text is not taking up enough room, this space between the text and the
   image is too far."

   #pkw .quote-card__text caps the measure at 30ch, written when the card had a full-width
   section to itself. In this grid the text track is 1fr: 1300px container, less 88px of
   .quote-card padding, less the 288px cover track and the 48px gap, is 876px. A 30ch cap at
   30px serif renders about 450px, so roughly 420px of the card sits empty between the words
   and the image. It reads as a layout fault rather than as a narrow paragraph because
   nothing occupies the hole.

   RELEASED RATHER THAN RAISED. Any cap short of the track leaves some hole, and the 48px
   grid gap is already the separation this design asks for. Same decision and the same
   reason as #pkw .two-col .quote-card__text at line 1626, which released the identical cap
   for the same complaint in a 626px column.

   THE PORTRAIT VARIANT NEEDS THE TRACK NARROWED TOO. /landing/encryption and
   /landing/application-level-encryption put a 150px .quote-portrait in the 288px cover
   track with justify-self:center, so 69px of the gap is inside the track and nothing done
   to the paragraph can reach it. :has() sizes the track to what is actually in it and needs
   no markup change; where :has() is unsupported the selector is dropped and those two pages
   keep today's spacing rather than breaking.

   THIS DOES NOT REACH THE HOME PAGE. Its quote paragraph carries the cap as an inline
   style="...max-width:30ch", which no class rule can override. Recorded, not worked around
   with !important. */
#pkw .fiserv-quote .quote-card__text { max-width: none; }
#pkw .fiserv-quote:has(.quote-portrait) { grid-template-columns: minmax(0, 1fr) 150px; }

/* THE FIFTH PAGE HAS A DIFFERENT FAULT, NOT THE SAME ONE. /why-pk-protect builds this
   design with .quote-big rather than .quote-card__text, and .quote-big is max-width:100%,
   so its paragraphs already fill the 964px track - the 30ch cap above never applied there
   and there is no hole beside the image to close. What it does inherit is
   text-align:center, which .quote-big carries for the full-width centred pull-quote band
   (the dark section on the home page). Centred copy in a 1fr track beside a cover shot rags
   on both sides and reads as a different component from the four cards above it. Aligned
   left to match them. This is an alignment correction, recorded separately because it is
   NOT the defect Bob reported. */
#pkw .fiserv-quote .quote-big { text-align: left; }

/* ---- Why PKWARE - coverage matrix ---- */
#pkw .why-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:stretch}
#pkw .why-feat{padding:38px;display:flex;flex-direction:column}
#pkw .why-feat h4{font-family:var(--serif);font-size:26px;color:var(--head);margin-bottom:12px}
#pkw .why-feat p.d{font-size:15.5px;color:var(--tx-2);line-height:1.6;max-width:52ch}
#pkw .why-side{display:flex;flex-direction:column;gap:22px}
#pkw .why-side .card{padding:30px;flex:1;display:flex;flex-direction:column;justify-content:center}
#pkw .why-side .card h4{font-family:var(--serif);font-size:21px;color:var(--head);margin-bottom:9px}
#pkw .why-side .card p{font-size:14.5px;color:var(--tx-2);line-height:1.55}
#pkw .why-side .ico,#pkw .why-feat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(9,188,239,.09);border:1px solid rgba(9,188,239,.22);color:var(--cyan-700)}
#pkw .why-side .ico svg,#pkw .why-feat .ico svg{width:22px;height:22px}
#pkw .cmatrix{margin-top:26px;border-top:1px solid var(--brd);padding-top:22px}
#pkw .cmx{display:grid;grid-template-columns:118px repeat(5,1fr);gap:9px 4px;align-items:center}
#pkw .cmx .col{text-align:center;font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3);line-height:1.25}
#pkw .cmx .col.mf{color:var(--cyan-700)}
#pkw .cmx .rlabel{font-weight:700;font-size:13px;color:var(--tx);display:flex;align-items:center;gap:7px}
#pkw .cmx .rlabel.dim{color:var(--tx-3)}
#pkw .cmx .rlabel .pkdot{width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 8px var(--frost-glow);flex:none}
#pkw .cmx .cell{display:grid;place-items:center;height:32px}
#pkw .cmx .yes{width:26px;height:26px;border-radius:50%;background:rgba(15,228,162,.18);border:1px solid rgba(11,110,78,.45);display:grid;place-items:center;color:var(--frost-deep)}
#pkw .cmx .yes svg{width:14px;height:14px}
#pkw .cmx .yes.cy{background:rgba(9,188,239,.16);border-color:rgba(5,127,163,.5);color:var(--cyan-700)}
#pkw .cmx .no{width:20px;height:2px;border-radius:2px;background:var(--brd-2)}
#pkw .cmx-cap{margin-top:16px;font-size:12.5px;color:var(--tx-3);display:flex;align-items:center;gap:8px}
#pkw .cmx-cap b{color:var(--cyan-700);font-weight:700}

/* ---- Trust section flow ---- */
#pkw .trust-flow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:54px}
/* THE 15ch CAP IS DELIBERATE AND IS NOT TO BE RELEASED - ruled 2026-08-19. At 36px serif
   this renders about 270px inside a 624px track, so roughly 355px of the track plus the
   52px gap sits empty before the Gartner block. That is the same geometry as the
   .quote-card__text fault fixed at line 3110, it was raised as a candidate on 12 landing
   pages for exactly that reason, and Bob ruled against it: "this is a permanent component,
   I don't want it flagged for this." The narrow measure IS the design here - a stacked
   display statement, not body copy that ran short. Recorded in
   instructions/outstanding.md under Withdrawn. Do not re-raise it. */
#pkw .trust-proof-l{font-family:var(--serif);font-size:clamp(25px,2.7vw,36px);line-height:1.3;color:var(--tx);max-width:15ch}
#pkw .trust-proof-l b{color:var(--frost-deep);font-weight:700}
#pkw .trust-flow .gart{margin:0;max-width:none}
#pkw .trust-flow .gart-cap{text-align:left;margin-top:12px}

/* =========== latest publications =========== */
#pkw .pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#pkw .pub{display:flex;flex-direction:column}
#pkw .pub-thumb{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--brd);
  box-shadow:0 18px 44px -26px rgba(30,48,116,.4);transition:transform .3s,box-shadow .3s}
#pkw .pub:hover .pub-thumb{transform:translateY(-6px);box-shadow:0 30px 58px -28px rgba(30,48,116,.52)}
#pkw .pub-thumb>img{width:100%;height:100%;object-fit:cover;display:block}
#pkw .pub-blog{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;color:#fff}
#pkw .pub-blog.g1{background:linear-gradient(120deg,var(--cyan),var(--frost))}
#pkw .pub-blog.g2{background:linear-gradient(125deg,var(--navy),var(--cyan))}
#pkw .pub-mark{position:absolute;top:20px;right:22px;height:17px;width:auto;opacity:.96}
#pkw .pub-blog-word{font-family:var(--serif);font-size:42px;color:#fff;line-height:1;margin-bottom:16px}
#pkw .pub-auth{font-size:12px;line-height:1.45;color:rgba(255,255,255,.92);max-width:26ch}
#pkw .pub-auth b{font-weight:700;font-size:13.5px;font-style:normal}
#pkw .pub-case{background:#0A1130}
#pkw .pub-case .pub-cover{width:100%;height:100%;object-fit:cover;object-position:top center}
#pkw .pub-case::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,12,36,.6),transparent 42%)}
#pkw .pub-case-label{position:absolute;top:16px;left:20px;z-index:2;font-weight:700;font-size:13px;color:#fff;letter-spacing:.02em}
#pkw .pub-chip{margin:20px 0 14px;align-self:flex-start;font-size:11px;color:var(--frost-deep);border-color:var(--frost-deep);background:rgba(11,110,78,.06)}
#pkw .pub-title{font-family:var(--serif);font-size:22px;color:var(--head);line-height:1.32;transition:color .2s}
#pkw .pub:hover .pub-title{color:var(--cyan-700)}

/* =========== responsive =========== */
@media(max-width:1240px){
  #pkw .hero-grid{grid-template-columns:1fr;gap:44px}
  #pkw .why-grid,#pkw .fiserv-quote,#pkw .trust-flow{grid-template-columns:1fr;gap:32px}
  #pkw .fiserv-cover{max-width:320px}
  #pkw .bento{grid-template-columns:1fr 1fr}
  #pkw .bento .feat{grid-column:span 2;grid-row:auto}
  #pkw .stat-grid{grid-template-columns:1fr 1fr}
  #pkw .persona-grid{grid-template-columns:1fr 1fr}
  #pkw .grid-3{grid-template-columns:1fr 1fr}
  #pkw .pub-grid{grid-template-columns:1fr 1fr}
  #pkw .flow{flex-direction:column;gap:44px}
  #pkw .flow-join{display:none}
  #pkw .cov-art{width:106%;right:-3%;top:-40px}
  #pkw .cov{margin-top:var(--pk-gap-xl);max-width:520px}
  #pkw .flow-branch{flex-direction:row;width:auto;height:auto;padding-left:0;gap:16px}
  #pkw .flow-branch::before{display:none}
  #pkw .bstep{flex:1 1 0;min-width:0}
  #pkw .bstep::before{display:none}
  #pkw .branch-head{top:-26px;left:50%;transform:translateX(-50%)}
  #pkw .fcap{position:static;transform:none;width:auto;margin-top:12px}
  #pkw .fstep{width:auto;flex-direction:column}
  #pkw .pipe-io{flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
}
@media(max-width:820px){
  /* #pkw .sec{padding:76px 0} DELETED - 1.10.43, 2026-08-13.
     Bob: "go with 60px for now."

     NOT set to 60px - REMOVED, because 60px is already the desktop value in
     #pkw .sec, so an override declaring it would do nothing. That is exactly the
     dead-rule pattern deleted from .trust-sec .eyebrow one version earlier: a rule
     whose declarations already apply is dead weight that reads as intent.

     Mobile now inherits 60px, so section rhythm is one number site-wide at every
     width. The 76px came from the era when sections were 104px - it was a REDUCTION
     then, and became an increase over desktop when Bob set 60px without this being
     revisited. Same origin as the hero's 104px fixed in 1.10.41.

     TO GIVE MOBILE ITS OWN VALUE LATER, reinstate one line here - and pick a number
     BELOW 60, since narrow viewports want less vertical padding, not more:

         #pkw .sec{padding:44px 0}
  */
  #pkw .two-col,#pkw .prod-grid{grid-template-columns:1fr;gap:28px}
  #pkw .flow-branch{flex-direction:column;width:100%;max-width:360px}
  #pkw .bstep{flex:none}
  #pkw .branch-head{position:static;transform:none;text-align:left;margin-bottom:4px}
  #pkw .hero-copy{text-align:center}
  #pkw .hero-copy .hero-badge,#pkw .hero-copy .eyebrow{justify-content:center}
  #pkw .hero-cta{justify-content:center}
  #pkw .hero-stats{justify-content:center}
  #pkw .award{margin-left:auto;margin-right:auto}
  #pkw .two-col .reveal{text-align:center}
  #pkw .two-col .eyebrow{justify-content:center}
  #pkw .trust-flow{text-align:center}
  #pkw .trust-flow .eyebrow{justify-content:center}
  #pkw .trust-proof-l{max-width:none}
}
@media(max-width:560px){
  #pkw .bento,#pkw .stat-grid,#pkw .persona-grid,#pkw .grid-3,#pkw .grid-2{grid-template-columns:1fr}
  #pkw .pub-grid{grid-template-columns:1fr}
  #pkw .cov-stats{grid-template-columns:1fr}
  #pkw .hero-stats{flex-wrap:nowrap;gap:14px;align-items:flex-start}
  #pkw .hs{flex:0 1 auto}
  #pkw .hs-n{font-size:19px;white-space:nowrap}
  #pkw .hs-l{font-size:11px}
  #pkw .flow{gap:0;align-items:stretch}
  #pkw .flow-seq{flex-direction:column;gap:0;width:100%;align-items:stretch}
  #pkw .fconn{display:none}
  #pkw .fstep{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:14px 0}
  #pkw .fnode{flex:none}
  #pkw .fcap{text-align:left;margin-top:0;width:auto}
  #pkw .fcap b{margin-bottom:2px}
  #pkw .flow-branch{max-width:none;width:100%;gap:12px;margin:8px 0}
  #pkw .branch-head{margin-bottom:8px}
  #pkw .award .aw-t{font-size:16px}
  #pkw .award img{width:76px;height:76px}
  /* 1.10.57 - four 150px award marks need 600px plus gaps to sit two-up */
  #pkw .awards-row{gap:22px}
  #pkw .awards-row img{width:120px}
  /* 1.10.58 - the connector grid. At 164px a phone gets ONE tile per row, which turns 95
     JDBC connectors into 95 full-width rows. 128px gives two, and the tile stays legible
     because the name wraps rather than the mark shrinking. */
  #pkw .conn-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  #pkw .conn{padding:16px 10px;gap:10px}
  /* 1.10.59 - descendant, matching the change above. As `> h2` this missed the heading on
     /company/customers, where it sits inside .conn-cat__head, leaving it at 26px on a phone. */
  #pkw .conn-cat h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  #pkw *{animation:none!important;transition:none!important}
  #pkw .reveal{opacity:1!important;transform:none!important}
  #pkw .rise{opacity:1!important;transform:none!important}
  #pkw .cov{transform:none!important}
  /* 1.10.57 - the timeline. `#pkw *` above already kills the rail's flow animation and
     the item transition, but NOT the `opacity:0` the .pkw-js reveal starts from, and a
     killed transition does not stop the IntersectionObserver from being the only thing
     that would have cleared it. Stated here for the same reason .reveal and .rise are. */
  #pkw .pkw-history.pkw-js .pkw-item{opacity:1!important;transform:none!important}
  #pkw .pkw-track{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   pk27 GRID CSS DELIBERATELY NOT HERE - removed 2026-08-10.

   It was duplicated. pk27_styles() prints the same rules inline as
   <style id="pk27-styles"> the first time a [2027_Get_Posts] shortcode
   renders. Having both meant two sources of truth for one component, with the
   inline copy silently winning because it comes later in the document.

   That function lived in the theme's functions.php when this note was first
   written, then in inc/shortcodes.php. As of theme 1.5.0 it lives in the
   PKWARE Shortcodes plugin. So this is no longer a judgement call about where
   to put CSS - the rules are not the theme's to hold. Pasting them back here
   would resurrect the duplicate AND recouple the theme to a plugin.

   It matches pk27f_styles(), pk27e_styles() and pk27s_styles() - none of which
   were ever in this stylesheet, so all four shortcode families behave the same
   way.

   Why the plugin prints its own CSS rather than shipping a stylesheet: only a
   handful of pages use these shortcodes, so site-wide delivery made ~83 pages
   download ~2.4 KB they never used. pk27_styles() has a static guard and emits
   once per page, only where a grid actually renders. That choice is also what
   let the shortcodes move out cleanly - markup, behaviour and styles travel
   together.
   -------------------------------------------------------------------------- */



/* --- begin why-pk-protect (page 48094), ported 2026-08-11 --------------------

   Two logo strips for the platform-integration section. Second row runs the
   other way.

   THIS REPLACES 134 KB OF JAVASCRIPT. Production built these with jQuery
   (87,553 bytes) + Slick (42,862) + a 4,113-byte inline script that injected the
   logos with innerHTML and then called .slick() on each row. The Slick config it
   passed was:

       arrows:false  autoplay:true  autoplaySpeed:0  speed:5000
       cssEase:'linear'  pauseOnHover:true  rtl:isOpposite  infinite:true

   No arrows, no dots, no paging, no interaction - a continuous linear scroll
   that pauses on hover, with the second row reversed. That is a CSS marquee
   described in JavaScript, so it is now the marquee already in this stylesheet.
   The logos are authored into the markup instead of injected at runtime, which
   also means they are in the HTML for crawlers and for anyone with JS off.

   The Slick responsive breakpoints (slidesToShow 8/6/5/3/2) have no equivalent
   here and need none - they existed to recompute slide widths. A marquee just
   scrolls, and shows however many logos fit.
   -------------------------------------------------------------------------- */

#pkw .pk-plat .marquee-track { gap: 46px; animation-duration: 48s; }
#pkw .pk-plat--rev .marquee-track { animation-direction: reverse; }
/* The 18px between the two counter-scrolling rows. It was an inline
   style="margin-top:18px" on the second row in the hand-authored markup, which the
   [pkware_platform_logos] shortcode did not reproduce - so the rows rendered flush on
   the first page built with it. Classed here so the shortcode is correct everywhere and
   one more inline style is gone. */
#pkw .pk-plat--rev { margin-top: 18px; }
#pkw .plat-img { height: 52px; width: auto; opacity: .9; transition: opacity .3s, transform .3s; }
#pkw .plat-img:hover { opacity: 1; transform: translateY(-2px); }

/* Reduced motion. A strip that never stops moving is a vestibular trigger, and
   Slick offered nothing here - this is a genuine improvement on what production
   does, not just a smaller version of it.

   The track is width:max-content with the logo set duplicated, so simply
   stopping the animation would leave a clipped row. Wrapping it instead keeps
   every logo reachable. */
@media (prefers-reduced-motion: reduce) {
  #pkw .marquee-track { animation: none; }
  #pkw .pk-plat .marquee-track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 22px; }
}
/* --- end why-pk-protect ---------------------------------------------------- */


/* --- begin stacked hero art, 2026-08-11 --------------------------------------
   Fixes the hero image on tablet: it was clipped, undersized, and crowding the
   CTA buttons.

   CAUSE. #pkw .cov-art is position:absolute with width:132%, right:-15% and
   top:-72px - deliberately overhanging its grid column in the desktop side-by-side
   layout. #pkw .cov-stage is only 'perspective + position:relative', so it has NO
   HEIGHT of its own; the art is meant to spill out of it and the row height comes
   from the copy column instead.

   That works while .hero-grid is two columns. At 1240px it collapses to 1fr, and
   the art is then absolutely positioned out of a zero-height block, pulled UPWARDS
   by its negative top, and clipped by #pkw .hero's overflow:hidden. Hence an image
   that overlaps the buttons above it and is cut off below.

   FIX. In the stacked range, let the art be a normal block: static position, full
   width, no negative offsets, and no bottom mask. It then gives .cov-stage real
   height, sits below the buttons with the grid gap between them, and is not clipped.

   perspective is dropped too - it exists for the 3D tilt of the desktop composition
   and does nothing useful once the art is a flat full-width block.

   Below 768px the whole container is display:none (see the block after this), so
   this range is effectively 769-1240px.
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  #pkw .cov-stage { perspective: none; }
  #pkw .cov-art {
    position: static;
    width: 100%;
    right: auto;
    top: auto;
    margin-top: 16px;
    -webkit-mask: none;
    mask: none;
  }
}
/* --- end stacked hero art -------------------------------------------------- */

/* --- begin mobile image suppression, 2026-08-11 -------------------------------
   Bob: "I want to remove these images on mobile only... These are extraneous as it
   is." Hides the two decorative image containers on phones:

     .cov-stage    the hero art panel
     .shot-frame   the browser-chrome screenshot frames

   768px because it is already a breakpoint in this file and it sits just under the
   820px where .two-col stacks - so between 768 and 820 the layout is stacked WITH
   the screenshot, and below 768 the screenshot goes. .hero-grid stacks at 1240px,
   so the hero art is stacked well before it disappears.

   NOTE ON THE SELECTORS. Bob supplied these from devtools as
   '.reveal.shot-frame.in' and '.cov-stage.rise.d3'. The extra classes are NOT part
   of the identity of these elements and are deliberately dropped here:
     .in       added at runtime by components.js when the IntersectionObserver fires
     .rise .d1-d5  hero entry-animation timing classes
   Matching on those would make the rule depend on whether an animation had run,
   which on a fast scroll or with reduced motion is a coin toss. Targeting
   .shot-frame and .cov-stage directly is what was actually meant.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #pkw .cov-stage,
  #pkw .shot-frame { display: none; }
}
/* --- end mobile image suppression ------------------------------------------ */

/* --- begin battle cards, added 2026-08-11 ------------------------------------

   THE COMPETITOR COMPARISON PAGES. /pkware-vs-spirion, /pkware-vs-varonis,
   /pkware-vs-bigid, and any that follow.

   SPIRION IS THE CANONICAL DESIGN, NOT THE HOME PAGE. Bob, 2026-08-11: "I did not
   want these three pages to be modeled on the home page that I gave you, period. I
   wanted all three to be modeled exactly on the PKware versus Spirian version so
   that all formatting and styling would be consistent among these three cards."

   So this is spirion's own stylesheet, moved out of page content and renamed from
   .pks- to .pkbc-. RENDERED VALUES ARE UNTOUCHED - every colour, size and spacing
   computes to exactly what staging serves.

   TOKENISED 2026-08-12. The brand colours are now var(--pk-*) rather than literal
   hex: 80 declarations across six values - cyan, frost, navy, grey, coral, white.
   The values did not change; only how they are written. Verified by substituting
   every token back to its literal and diffing against the original block, which
   matched exactly. Comments keep their literals on purpose, so the palette this
   was ported from stays readable.

   Safe because all six are defined on :root, unconditionally, at the top level of
   this file, with exactly one value each site-wide. THAT IS THE PRECONDITION - a
   var() whose token is out of scope invalidates the entire declaration, silently.
   The breadcrumb block learned this the hard way: it used #pkw-scoped tokens while
   rendering outside #pkw, and every one of them was dead. Do NOT introduce a
   #pkw-scoped token here. --tx is exactly such a token, which is why #484848 is
   still a literal below rather than var(--tx).

   Still literal, with no :root equivalent: #E5E5E7 and #E4EAF2 (two near-identical
   border greys, one from spirion and one from varonis - unifying them is a visual
   decision, not a mechanical one), #484848 body text, #55489D purple, #6E6E73,
   #B5651D.

   Do NOT wrap these pages in #pkw. The rules below scope under .pkbc-page, which is
   how spirion's original scoped under .pks-page. Wrapping in #pkw would silently
   pull in the home page's design tokens, which is the thing being avoided.

   WHY THERE IS NO JAVASCRIPT. Bob: "I would always prefer to reuse JavaScript or CSS
   if it is ever possible." The three pages shipped ~4.7 KB of inline script between
   them doing a scroll fade and an FAQ accordion. assets/js/components.js already does
   both, so the FAQ and fade adopt the class names it listens for and the scripts are
   simply gone:

     .pks-faq__item      -> .faq-item        JS does closest('.faq-item'), toggles .open
     .pks-faq__q         -> .faq-q           JS click target, sets aria-expanded
     .pks-faq__a         -> .faq-a           JS sets style.maxHeight from scrollHeight
     .pks-faq__a-inner   -> .pkbc-faq__inner
     .pks-fade           -> .reveal          JS IntersectionObserver adds .in
     .pks-fade.is-visible-> .reveal.in

   That substitution only works because spirion's CSS was already shaped for exactly
   this: .pks-faq__a was max-height:0 / overflow:hidden / transition:max-height, and
   the +/- indicator is keyed on [aria-expanded="true"] - which the theme's JS sets.

   AND components.js HAS TO KNOW ABOUT .pkbc-page. An earlier version of this comment
   said its selectors were "global, not #pkw-scoped". That was wrong and it cost a
   render: the selector strings are unprefixed, but they were queried against
   getElementById('pkw'), behind an early return. On these pages #pkw does not exist,
   so the script bailed, .reveal never got .in, and all three cards rendered BLANK -
   opacity 0 from top to bottom. Fixed in 1.10.2 by giving the script both scopes.

   So the CSS below and assets/js/components.js are coupled. If .pkbc-page is ever
   renamed, the selector at the top of that file must change with it.

   THE TAIL OF THIS BLOCK is the handful of utilities only bigid and varonis had, with
   no spirion equivalent - btn-icon, the fade-dN stagger delays, matrix-wrap, narrow,
   cta. Per Bob: where those two have something spirion does not, their own treatment
   is the model. Taken from bigid's stylesheet, renamed the same way.
   -------------------------------------------------------------------------- */
/* ---------- RESET (scoped) ---------- */
.pkbc-page .pkbc-page,
.pkbc-page * { box-sizing: border-box; }
.pkbc-page { 
  font-family: 'Lato', sans-serif;
  color: #484848;
  line-height: 1.7;
  font-size: 20px;
  background: var(--pk-white);
}
.pkbc-page p { margin: 0 0 1.25em 0; }
.pkbc-page a { color: var(--pk-cyan); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.pkbc-page a:hover { border-bottom-color: var(--pk-cyan); }
.pkbc-page ul, .pkbc-page ol { margin: 0 0 1.25em 1.25em; padding: 0; }
.pkbc-page li { margin-bottom: .5em; }

/* ---------- TYPOGRAPHY ---------- */
.pkbc-page .pkbc-h1 {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--pk-navy);
  margin: 0 0 .6em 0;
  letter-spacing: -0.01em;
}
.pkbc-page .pkbc-h2 {
  font-family: Georgia, serif;
  font-size: 46px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--pk-navy);
  margin: 0 0 .6em 0;
  letter-spacing: -0.01em;
}
.pkbc-page .pkbc-h3 {
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--pk-navy);
  margin: 0 0 .6em 0;
}
.pkbc-page .pkbc-h4 {
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--pk-navy);
  margin: 0 0 .5em 0;
}
.pkbc-page .pkbc-eyebrow {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pk-cyan);
  margin: 0 0 24px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pk-cyan);
}
.pkbc-page .pkbc-lead {
  font-size: 22px;
  line-height: 1.55;
  color: #484848;
  max-width: 760px;
}

/* ---------- LAYOUT ---------- */
/* Horizontal padding on --pk-edge, 2026-08-12, so the battle cards share one page inset
   with the header, breadcrumb and #pkw content instead of carrying their own 24px. On
   desktop it resolves to 0 and .pkbc-container's 1300px cap plus auto margins do the
   positioning - which is why these pages were already aligned with the header. Below
   1300px the cap stops binding and this becomes the only thing holding content off the
   window edge. Vertical rhythm is spirion's, untouched. */
.pkbc-page .pkbc-section {
  padding: var(--pk-sec-y) var(--pk-edge);
}
.pkbc-page .pkbc-section--hero { padding: 20px var(--pk-edge) var(--pk-sec-y-hero); }
.pkbc-page .pkbc-section--alt { background: var(--pk-grey); }
.pkbc-page .pkbc-section--dark { background: var(--pk-navy); }
.pkbc-page .pkbc-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* ---------- BUTTONS (pill-shaped per brand) ---------- */
.pkbc-page .pkbc-btn {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 16px 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  text-align: center;
  line-height: 1.2;
}
.pkbc-page .pkbc-btn:hover { border-bottom: 2px solid transparent; }
.pkbc-page .pkbc-btn--primary {
  background: var(--pk-cyan);
  color: var(--pk-white);
}
.pkbc-page .pkbc-btn--primary:hover {
  background: var(--pk-navy);
  color: var(--pk-white);
  border-color: var(--pk-navy);
}
.pkbc-page .pkbc-btn--green {
  background: var(--pk-frost);
  color: var(--pk-navy);
}
.pkbc-page .pkbc-btn--green:hover {
  background: var(--pk-white);
  color: var(--pk-navy);
}
.pkbc-page .pkbc-btn--outline {
  background: transparent;
  color: var(--pk-navy);
  border-color: var(--pk-navy);
}
.pkbc-page .pkbc-btn--outline:hover {
  background: var(--pk-cyan);
  color: var(--pk-white);
  border-color: var(--pk-cyan);
}
.pkbc-page .pkbc-btn--text {
  background: transparent;
  color: var(--pk-navy);
  padding: 16px 8px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid var(--pk-navy);
}
.pkbc-page .pkbc-btn--text:hover {
  color: var(--pk-cyan);
  border-bottom-color: var(--pk-cyan);
}
.pkbc-page .pkbc-btn-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

/* ---------- HERO ---------- */
.pkbc-page .pkbc-hero__intro { max-width: 920px; margin-bottom: var(--pk-gap-xl); }
.pkbc-page .pkbc-hero__sub {
  font-size: 22px;
  line-height: 1.55;
  color: #484848;
  max-width: 760px;
  margin-bottom: 40px;
}
.pkbc-page .pkbc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: var(--pk-gap-xl);
  border-top: 1px solid #E5E5E7;
  padding-top: 56px;
}
.pkbc-page .pkbc-stat__num {
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  color: var(--pk-navy);
  display: block;
  margin-bottom: 16px;
}
.pkbc-page .pkbc-stat__label {
  font-size: 17px;
  line-height: 1.5;
  color: #484848;
}

/* ---------- PROBLEM CARDS ---------- */
.pkbc-page .pkbc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 56px 0;
}
.pkbc-page .pkbc-card {
  padding: 40px;
  background: var(--pk-white);
  border: 1px solid #E5E5E7;
}
.pkbc-page .pkbc-section--alt .pkbc-card { background: var(--pk-white); }
.pkbc-page .pkbc-card__label {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-cyan);
  margin-bottom: 16px;
}
.pkbc-page .pkbc-card__title {
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--pk-navy);
  margin-bottom: 16px;
}
.pkbc-page .pkbc-callout {
  margin-top: 24px;
  padding: 40px;
  border-left: 4px solid var(--pk-cyan);
  background: var(--pk-white);
}
.pkbc-page .pkbc-section--alt .pkbc-callout { background: var(--pk-white); }
.pkbc-page .pkbc-callout p { font-size: 22px; line-height: 1.55; color: var(--pk-navy); margin: 0; }

/* ---------- MATRIX TABLE ---------- */
.pkbc-page .pkbc-matrix-intro { max-width: 800px; margin-bottom: 56px; }
.pkbc-page .pkbc-matrix-group { margin-bottom: 56px; }
.pkbc-page .pkbc-matrix-group__title {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pk-navy);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pk-cyan);
}
.pkbc-page .pkbc-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.pkbc-page .pkbc-matrix thead th {
  text-align: left;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pk-navy);
  padding: 18px 20px;
  border-bottom: 2px solid var(--pk-navy);
  background: transparent;
}
.pkbc-page .pkbc-matrix thead th:nth-child(2),
.pkbc-page .pkbc-matrix thead th:nth-child(3) {
  text-align: center;
  width: 160px;
}
.pkbc-page .pkbc-matrix thead th .pkbc-col-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.pkbc-page .pkbc-matrix thead th .pkbc-col-badge--pk {
  background: var(--pk-frost);
  color: var(--pk-navy);
}
.pkbc-page .pkbc-matrix thead th .pkbc-col-badge--rival {
  background: var(--pk-grey);
  color: var(--pk-navy);
}
.pkbc-page .pkbc-matrix tbody tr { border-bottom: 1px solid #E5E5E7; }
.pkbc-page .pkbc-matrix tbody td {
  padding: 20px;
  vertical-align: middle;
  color: #484848;
  line-height: 1.5;
}
.pkbc-page .pkbc-matrix tbody td:nth-child(2),
.pkbc-page .pkbc-matrix tbody td:nth-child(3) {
  text-align: center;
  font-weight: 700;
  font-size: 22px;
}
.pkbc-page .pkbc-matrix .pkbc-yes { color: var(--pk-frost); font-size: 26px; line-height: 1; }
.pkbc-page .pkbc-matrix .pkbc-no { color: var(--pk-coral); font-size: 26px; line-height: 1; }
.pkbc-page .pkbc-matrix .pkbc-partial {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #B5651D;
  text-transform: uppercase;
}

.pkbc-page .pkbc-matrix-footnote {
  font-size: 15px;
  line-height: 1.6;
  color: #6E6E73;
  margin-top: 40px;
  max-width: 900px;
  font-style: italic;
}

.pkbc-page .pkbc-note {
  margin-top: var(--pk-gap-xl);
  padding: 48px;
  background: var(--pk-white);
  border: 1px solid #E5E5E7;
  border-left: 4px solid #55489D;
}
.pkbc-page .pkbc-section--alt .pkbc-note { background: var(--pk-white); }
.pkbc-page .pkbc-note__label {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #55489D;
  margin-bottom: 16px;
}
.pkbc-page .pkbc-note__title {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--pk-navy);
  margin-bottom: 24px;
  line-height: 1.3;
}

/* ---------- COMPLIANCE CARDS ---------- */
.pkbc-page .pkbc-compliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
.pkbc-page .pkbc-compliance-card {
  padding: 40px;
  background: var(--pk-white);
  border: 1px solid #E5E5E7;
}
.pkbc-page .pkbc-section--alt .pkbc-compliance-card { background: var(--pk-white); }
.pkbc-page .pkbc-compliance-card__framework {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-cyan);
  margin-bottom: 12px;
}
.pkbc-page .pkbc-compliance-card__rule {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pk-navy);
  line-height: 1.3;
  margin-bottom: 20px;
}
.pkbc-page .pkbc-compliance-card p {
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- ARGUMENT NARRATIVE ---------- */
.pkbc-page .pkbc-argument {
  max-width: 800px;
}
.pkbc-page .pkbc-argument p { font-size: 20px; line-height: 1.7; margin-bottom: 1.5em; }
.pkbc-page .pkbc-argument .pkbc-pullout {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--pk-navy);
  line-height: 1.3;
  margin: 1.5em 0;
  padding-left: 32px;
  border-left: 4px solid var(--pk-cyan);
}

/* ---------- STEPS (Evaluation) ---------- */
.pkbc-page .pkbc-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.pkbc-page .pkbc-step__num {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--pk-cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pkbc-page .pkbc-step__title {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pk-navy);
  margin-bottom: 16px;
  line-height: 1.3;
}
.pkbc-page .pkbc-step p { font-size: 17px; line-height: 1.6; margin: 0; }

/* ---------- FAQ ACCORDION ---------- */
.pkbc-page .pkbc-faq { margin-top: 56px; max-width: 920px; }
.pkbc-page .faq-item { border-bottom: 1px solid #E5E5E7; }
.pkbc-page .faq-item:first-child { border-top: 1px solid #E5E5E7; }
.pkbc-page .faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  background: none;
  border: none;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pk-navy);
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
  font-style: normal;
}
.pkbc-page .faq-q:hover { color: var(--pk-cyan); }
.pkbc-page .faq-q::after {
  content: "+";
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--pk-cyan);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.pkbc-page .faq-q[aria-expanded="true"]::after { content: "−"; }
.pkbc-page .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.pkbc-page .pkbc-faq__inner {
  padding: 0 0 28px 0;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.7;
  color: #484848;
}

/* ---------- DARK CTA ---------- */
.pkbc-page .pkbc-section--dark .pkbc-h2,
.pkbc-page .pkbc-section--dark .pkbc-eyebrow { color: var(--pk-white); }
.pkbc-page .pkbc-section--dark .pkbc-eyebrow { border-bottom-color: var(--pk-frost); color: var(--pk-frost); }
.pkbc-page .pkbc-section--dark p { color: rgba(255,255,255,0.88); }
.pkbc-page .pkbc-section--dark .pkbc-cta-text {
  font-size: 22px;
  line-height: 1.55;
  max-width: 760px;
  margin-bottom: 40px;
}
.pkbc-page .pkbc-section--dark .pkbc-cta-footnote {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin-top: 24px;
}

/* ---------- ANIMATION (scroll fade-in) ---------- */
.pkbc-page .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.pkbc-page .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .pkbc-page .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .pkbc-page .pkbc-h1 { font-size: 40px; }
  .pkbc-page .pkbc-h2 { font-size: 34px; }
  .pkbc-page .pkbc-h3 { font-size: 28px; }
  .pkbc-page .pkbc-section { padding: var(--pk-sec-y) var(--pk-edge); }
  /* Top padding cut 80px -> 26px, 2026-08-12. Spirion authored 80px for a page with
     NO breadcrumb above it; with one, it renders as a tall empty white band between
     the crumbs and the eyebrow on a phone. 26px is not arbitrary - it is the value
     #pkw .hero already uses at 640px for exactly this problem, so the two families
     now agree instead of differing 3x. Bottom stays 80px (desktop is 112px). */
  .pkbc-page .pkbc-section--hero { padding: 26px var(--pk-edge) var(--pk-sec-y-hero); }
  .pkbc-page .pkbc-card-grid,
  .pkbc-page .pkbc-compliance-grid,
  .pkbc-page .pkbc-steps { grid-template-columns: 1fr; gap: 24px; }
  .pkbc-page .pkbc-stats { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; margin-top: 56px; }
  .pkbc-page .pkbc-stat__num { font-size: 44px; }
  .pkbc-page .pkbc-matrix { font-size: 15px; }
  .pkbc-page .pkbc-matrix thead th { padding: 14px 12px; font-size: 11px; }
  .pkbc-page .pkbc-matrix tbody td { padding: 14px 12px; }
  .pkbc-page .pkbc-matrix thead th:nth-child(2),
  .pkbc-page .pkbc-matrix thead th:nth-child(3) { width: 90px; }
  .pkbc-page .pkbc-note,
  .pkbc-page .pkbc-card,
  .pkbc-page .pkbc-compliance-card,
  .pkbc-page .pkbc-callout { padding: 28px; }
  .pkbc-page .pkbc-argument p,
  .pkbc-page .pkbc-argument .pkbc-pullout { font-size: 18px; }
  .pkbc-page .pkbc-argument .pkbc-pullout { font-size: 22px; padding-left: 20px; }
  .pkbc-page .faq-q { font-size: 18px; padding: 22px 0; }
  .pkbc-page .pkbc-hero__sub,
  .pkbc-page .pkbc-section--dark .pkbc-cta-text { font-size: 18px; }
}
.pkbc-page span.pkbc-stat__num.pkbc-frost {
    color: var(--pk-frost);
}

/* ---- utilities present only on bigid and varonis ---------------------------
   bigid declared a --pkv-* custom-property layer; spirion does not - it uses 83
   literal hex values and zero var(). Rather than import a token system the canonical
   design does not use, bigid's tokens are resolved to their literal values here:
     --pkv-navy #1E3074   --pkv-cyan #09BCEF   --pkv-frost #0FE4A2
     --pkv-white #FFFFFF  --pkv-border #E4EAF2
   Same rendered result, one convention instead of two.
   -------------------------------------------------------------------------- */
.pkbc-page .pkbc-cta .pkbc-btn--green { background: var(--pk-frost); color: var(--pk-navy); padding: 20px 40px; font-size: 15px; }
.pkbc-page .pkbc-cta .pkbc-btn--green:hover { background: var(--pk-white); color: var(--pk-navy); }
.pkbc-page .pkbc-cta .pkbc-eyebrow { color: var(--pk-frost); }
.pkbc-page .pkbc-cta .pkbc-eyebrow::before { background: var(--pk-frost); }
.pkbc-page .pkbc-cta { padding: var(--pk-sec-y-cta) 0; }
.pkbc-page .pkbc-cta h2 { color: var(--pk-white); max-width: 820px; }
.pkbc-page .pkbc-cta p.pkbc-cta-text { color: rgba(255,255,255,0.85); font-size: 19px; max-width: 620px; margin-bottom: 36px; }
.pkbc-page .pkbc-cta p.pkbc-cta-footnote { color: rgba(255,255,255,0.85); font-size: 15px; margin-top: 20px; line-height: 1.5; }
.pkbc-page .reveal.pkbc-d1 { transition-delay: 0.08s; }
.pkbc-page .reveal.pkbc-d2 { transition-delay: 0.16s; }
.pkbc-page .reveal.pkbc-d3 { transition-delay: 0.24s; }
.pkbc-page .pkbc-narrow { max-width: 820px; }
.pkbc-page .pkbc-btn-icon { color: var(--pk-navy); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  text-transform: none; padding: 16px 0; border-bottom: 2px solid var(--pk-navy); border-radius: 0;
  display: inline-flex; align-items: center; gap: 8px; }
.pkbc-page .pkbc-btn-icon:hover { color: var(--pk-cyan); border-color: var(--pk-cyan); }
/* ---------- CTA ---------- */
.pkbc-page .pkbc-cta { background: var(--pk-navy); padding: var(--pk-sec-y-cta) 0; }
/* ---------- MATRIX ---------- */
.pkbc-page .pkbc-matrix td.pkbc-cell-c { text-align: center; }
.pkbc-page .pkbc-matrix-wrap { overflow-x: auto; border: 1px solid #E4EAF2; margin-bottom: 24px; }

/* Matrix group header ROW. varonis and bigid put their capability groups in one table
   with a full-width header row; spirion instead uses a separate .pkbc-matrix-group
   div plus an h3 per group. There is no spirion equivalent, so per Bob these two keep
   their own treatment - values lifted from varonis with --pkv-* resolved to literals.

   It needs a distinct class from .pkbc-matrix-group. The first version reused that
   name, which put a container's `margin` on a <tr> - where margin does not apply -
   and the row rendered completely unstyled. Same class, two different structural
   roles, is exactly the collision this vocabulary exists to prevent. */
.pkbc-page .pkbc-matrix tbody tr.pkbc-matrix-grouprow td {
  background: var(--pk-grey); padding: 12px 24px; font-family: 'Lato', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pk-navy); border-bottom: 1px solid #E4EAF2;
}
/* --- end battle cards ------------------------------------------------------ */

/* --- begin breadcrumbs (inc/breadcrumbs.php), added 2026-08-11 ---------------
   Rendered by the THEME, above the content, so it lives OUTSIDE the #pkw wrapper.

   THAT IS THE WHOLE REASON THIS BLOCK LOOKS THE WAY IT DOES. Read before editing.

   The first version of this used --gutter, --bg-2, --brd, --tx-2, --tx-3, --head
   and --cyan-700. Every one of those is defined on #pkw, not :root. Outside #pkw
   they resolve to nothing, and a var() with no fallback makes the whole declaration
   invalid - so 'padding: 12px var(--gutter)' silently became no padding at all and
   the trail sat hard against the left edge, unstyled.

   Checking that a token is DEFINED is not enough. It has to be in SCOPE. So:

     - colours come from the :root --pk-* palette, which is always in scope
     - layout keeps the #pkw names but carries a literal fallback, so it matches the
       content container today and would still track it if those tokens ever move to
       :root

   --maxw is 1240px and --gutter 26px on #pkw; the fallbacks mirror them exactly so
   the trail lines up with .wrap rather than being inset by 20px.
   -------------------------------------------------------------------------- */
/* No background and no bottom border, per Bob - it read as a grey bar with an <hr>
   under it. The trail now sits on the page with only whitespace separating it from
   the hero. margin-bottom stays: the hero carries padding-top:0, so without it the
   badge pill butts straight against the trail.

   Brand colours, all three from the :root palette:
     links        --pk-navy
     hover/focus  --pk-frost
     current page --pk-cyan

   The underline on hover is kept deliberately. --pk-frost is #0fe4a2, which is about
   1.8:1 on white - not readable on its own - so the underline is what actually
   signals the hover, with the colour as reinforcement rather than the only cue. */
/* Bob's values, 2026-08-12, applied globally. The negative top margin pulls the
   breadcrumb up toward the header rather than letting it sit in its own band. Note
   the 640px block below still zeroes margin-bottom, so on mobile this is
   -30px top / 0 bottom - the top pull carries into mobile because only the bottom
   is overridden. */
.pk-crumbs { margin-bottom: 10px; margin-top: -30px; }
/* ALIGNED TO THE HEADER, 2026-08-12, at Bob's request: "can they left align with the
   header please?"

   It was max-width var(--maxw, 1240px) with padding 12px var(--gutter, 26px), which put
   its left edge 56px right of the logo at any viewport >= 1300px:

       header left edge     (V - 1300) / 2
       crumbs left edge     (V - 1240) / 2 + 26
       difference           30 + 26 = 56px

   The horizontal inset comes from --pk-edge, shared with .pk-header__inner and
   #pkw .wrap, so the three cannot drift apart. Only the VERTICAL padding is local to
   the breadcrumb. Do not hardcode a horizontal value here. */
.pk-crumbs__wrap { max-width: calc(1300px + 2 * var(--pk-edge)); margin: 0 auto; padding: 12px var(--pk-edge); }
.pk-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--pk-text-sm); line-height: var(--pk-leading-snug); }
.pk-crumbs__item { display: inline-flex; align-items: center; color: var(--pk-navy); }
.pk-crumbs__item + .pk-crumbs__item::before { content: '>'; margin: 0 9px; color: var(--pk-navy); opacity: .45; }
.pk-crumbs__item a { color: var(--pk-navy); text-decoration: none; }
.pk-crumbs__item a:hover, .pk-crumbs__item a:focus-visible { color: var(--pk-frost); text-decoration: underline; }
.pk-crumbs__item--current { color: var(--pk-cyan); font-weight: var(--pk-weight-bold); }

@media (max-width: 640px) {
  .pk-crumbs { margin-bottom: 0; }
  /* Vertical tighten only. The horizontal value stays on --pk-edge - a literal here
     is what broke alignment on tablets before. */
  .pk-crumbs__wrap { padding: 10px var(--pk-edge); }
  .pk-crumbs__list { font-size: var(--pk-text-xs); }

  /* On mobile the hero badge pill needs room to breathe. #pkw .hero carries
     padding-top:0 by Bob's setting, which is right on desktop where the pill has the
     full section to itself - but at this width the pill ends up crowded under the
     breadcrumb. Giving the space to the HERO rather than the breadcrumb keeps it
     inside the hero's background, so the gap is part of the panel instead of a white
     strip above it. The breadcrumb's own margin drops to 0 here to compensate. */
  #pkw .hero { padding-top: 26px; }
}

/* --- end breadcrumbs ------------------------------------------------------- */

/* --------------------------------------------------------------------------
   FORM / REVEAL PANE - the Formidable wrapper used by gated pages
   --------------------------------------------------------------------------
   PORTED FROM STAGING - 2026-08-13. THE LIGHT VARIANT.
   Source: https://staging.pkware.com/landing/share-pittsburgh-2026

   The markup this styles is FIXED and must not be renamed:

       <div class="fs-content-pane en">
         <div class="framecol">
           <div class="form-rev no-fc">
             <div>[formidable id=N]</div>

   Bob's instruction, 2026-08-13: the form implementation - Formidable, lead
   tracking, spam filtering, and the GTM conversion notice - stays exactly as it
   is until every page is in place and a form retrofit is scheduled. So these
   four class names are not ours to change, and that is why this is the ONE block
   in section 8 NOT scoped under #pkw. These are global selectors. Bear that in
   mind before adding to them: `.framecol` and `.form-rev` are generic enough to
   collide with something later.

   WHERE THE VALUES CAME FROM. Two sources on staging, and only two - Avada's
   generated stylesheet is 858 KB and contains none of these classes, checked:

     1. Avada-Child-Theme/style.css 4.2.28, loaded site-wide. Defines the DARK
        card - linear-gradient(180deg, #1e3074, #15214f) with white text.
     2. A 12.5 KB inline <style> block on the share-pittsburgh page, which
        overrides the card to WHITE. That page is the light example.

   What follows is those two CASCADED - what a visitor actually gets on
   share-pittsburgh - not a copy of either source on its own.

   THREE THINGS DROPPED, none of them visual:
     - !important on every declaration. It was there to outrank Avada's
       generated CSS. There is no Avada here, so there is nothing to outrank.
     - --awb-background-image and --awb-background-image-small, both `none`.
       Avada custom properties; this theme never reads them.
     - Four padding longhands collapsed into one shorthand at the same 20px.

   AND FOUR RULES LEFT BEHIND ON PURPOSE. The child theme's other .form-rev
   rules target HubSpot markup - .legal-consent-container, ul.inputs-list,
   .hs_email_opt_in__c, .hs-form-field - which Formidable does not emit. They are
   leftovers from a HubSpot-era form, dead on every page that exists today.
   -------------------------------------------------------------------------- */
/* margin-top:-20px IS PAGE-SPECIFIC IN ORIGIN, and is the one value here worth a
   second look. The child theme gives .fs-content-pane.en only width:100%; the
   -20px lift comes from the share-pittsburgh page's own inline block. It is
   included because Bob asked for that page's styling - but it now applies to
   EVERY page using this wrapper, so a ported /demo will sit 20px higher than
   staging's /demo does. Deleting this one declaration matches staging's /demo
   instead. Flagged 2026-08-13; not decided. */
.fs-content-pane.en { width: 100%; margin-top: -20px; }
/* THE FLOAT IS CONTAINED HERE - display:flow-root, added 1.10.40 on 2026-08-13.
   This is the fix the note below predicted, and it is needed rather than optional.

   WHAT WENT WRONG. .framecol is float:right, so it leaves normal flow and
   .fs-content-pane collapses to ZERO HEIGHT. On /demo that made .form-card render
   as a thin rounded strip with the entire Formidable form spilling out below it -
   no border around the form at all.

   AND WHY share-pittsburgh LOOKED FINE ANYWAY, which is the part worth keeping:
   it was an ACCIDENT. That page has .form-micro after the pane. A block box
   overlaps a float, but its LINE BOXES do not - so that paragraph's text was
   pushed down past the float, dragging the card's height with it and making the
   form look contained. Bob spotted the mechanism from the symptom: "maybe it's
   because there is no text above and below the specific form frame we built".

   So share had the identical latent bug. Delete its one line of trailing copy and
   it breaks the same way. flow-root fixes both, and makes the card independent of
   whatever copy happens to sit around the form - which matters across ~48 pages
   where that copy is a per-page design decision.

   flow-root, not overflow:hidden. Both establish a block formatting context and
   contain the float; overflow:hidden also clips anything that legitimately
   overhangs and can suppress scroll anchoring. flow-root does only the one job. */
.fs-content-pane { display: flow-root; }
/* float:right with width:100% has no horizontal effect - a full-width float
   cannot sit beside anything. It is kept because staging has it and rule zero
   makes staging the authority. Do NOT delete it now that the parent contains it:
   that would change staging's layout contract rather than reproduce it. */
.fs-content-pane .framecol { float: right; width: 100%; }
/* THE CARD, light variant: white ground, dark text, 16px radius, 20px inset.
   overflow:hidden is what clips .topper's negative margins to the radius.

   background uses --pk-white, which is #FFFFFF exactly - identical pixels, and
   it keeps this file's rule that colour comes from the section 3 palette.

   color:#000 IS A LITERAL AND IS OUTSIDE THE PALETTE. Left as staging has it
   rather than quietly swapped for --pk-color-text (#47494c), because that is a
   visual change nobody approved. var(--pk-color-text) is the palette-clean
   equivalent if Bob wants it. Most text inside the card is coloured by
   Formidable's own style, so this mainly governs stray content. */
.form-rev.no-fc { margin-bottom: 0; padding: 20px; border-radius: 16px; background: var(--pk-white); color: #000; overflow: hidden; }
/* Formidable centres the submit button via frm_center_submit on its own
   container. This keeps the fields themselves left-aligned inside the card. */
.form-rev form { text-align: left; }
/* .topper - INCLUDED BUT UNVERIFIED. The one rule here I could not confirm
   against a rendered page. Bob referred to it on 2026-08-13 as being styled
   correctly on share-pittsburgh, but the string "topper" appears ZERO times in
   that page's entire HTML, zero times on /demo, and zero times in Avada's
   generated CSS. The child theme's definition is the only one anywhere, and it
   is what is reproduced here.

   Two consequences. Its background is the DARK navy gradient, so dropped into
   the light card as-is it paints a dark serif band across the top of a white
   panel - which may be exactly the intent for a header strip, or may be a
   leftover from the dark variant. And #15214f is NOT in the section 3 palette:
   --pk-navy is #1e3074 and matches the first stop exactly, but the second stop
   has no token.

   The negative margins are how it bleeds to the card's edges - the card has 20px
   of padding and -22px pulls just past it, so THE TWO ARE COUPLED. Change the
   card's padding and this stops meeting the edge.

   Source order resolved, since the original declared several properties twice:
   margin-top:-22px wins over margin-top:0, and padding:20px wins over
   padding-top:20px. width:inherit was dropped - the parent sets no width, so it
   resolved to auto and did nothing. */
.form-rev .topper { margin: -22px -22px 20px; padding: 20px; border-radius: 4px; background: linear-gradient(180deg, #1e3074, #15214f); color: var(--pk-white); font-family: Georgia, serif; font-size: 25px; font-weight: 600; text-align: center; }

/* --- end form / reveal pane ------------------------------------------------ */

/* --------------------------------------------------------------------------
   GATED LANDING PAGE - the meeting-form card and its trust band
   --------------------------------------------------------------------------
   PORTED FROM STAGING - 2026-08-13.
   Source: https://staging.pkware.com/landing/share-pittsburgh-2026 (page 53003)

   The FIRST of ~48 gated form pages, and the template the rest replicate from.
   Bob, 2026-08-13: "I want all the forms to be built the same way, exactly, same
   styling, same layout." So anything added here is added for 48 pages, not one.

   HOW LITTLE THIS NEEDED. Every class in the source was cross-referenced against
   its own DOM and against this file. Of 60 classes its CSS declared:

     30  already existed here and are REUSED untouched - the whole trust/Gartner
         block (marquee, marquee-track, lg-img, trust-flow, trust-proof-l, the six
         gpi-*, gart-cap), plus sec, wrap, hero, hero-grid, eyebrow, lead, h2,
         btn, btn-green, btn-lg, chip, reveal, cta-final, btns, and the four
         form-pane classes added in 1.10.36.
     ~20  were DEAD - declared but absent from the page's own markup. The largest
         group is a NATIVE MOCK FORM that Formidable replaced: pardot-form, frow,
         field, form-sent, ok, .form-card.sent. The page's own JS says so -
         "07.23.2026 - native demo-submit handler removed". Also dead: the promo
         bar (promo/pill/dot/sep), btn-cyan, btn-outline, tlink, frost-word,
         hero-badge, and two fusion-* rules whose only job was hiding Avada's
         footer. NONE of it is ported. Do not port it "for completeness".
      6  are genuinely new, and they are all below.

   The page's own brandbar and slim dark footer are NOT here and are not in the
   fragment - the theme renders the header and footer. Bob 2026-08-13: "all
   headers and footers are already generated in development."

   ALSO DROPPED: the source's @import of Lato from fonts.googleapis.com. This
   theme self-hosts Lato from assets/fonts/ as a privacy decision - see the note
   in inc/enqueue.php - and a third-party font request on a page built around
   GDPR consent capture is the exact exposure that work exists to remove. No
   visual change: it is the same typeface, already being served.

   OUR VALUES, NOT THE SOURCE'S. Eight declarations had drifted between this page
   and the design system the other 33 pages use - .sec padding 104px vs 60px,
   .hero padding, .hero-grid ratio and alignment, .lead 19px vs 20px, .h2 clamp,
   --maxw 1200px vs ~1300px, --tx #484848 vs #3D4457, and .cta-final's background.
   The system's values win, because reusing a definition means reusing its value;
   overriding all eight would have meant a second design system for one page.

   ONE VISIBLE CONSEQUENCE, flagged to Bob: staging's .cta-final carries
   background-color var(--bg-2) (#F4F8FD, a token we do have) and OURS CARRIES NO
   BACKGROUND, so the closing CTA renders white here and grey on staging. Adding
   it to #pkw .cta-final would change that band on all 33 existing pages, so it
   was left alone. If Bob wants the grey on gated pages only, that is one scoped
   rule - not a change to the shared component.
   -------------------------------------------------------------------------- */
/* Chip row under the hero copy. Replaces an inline
   style="display:flex;gap:10px;flex-wrap:wrap;margin-top:2px" - #pkw .btns is the
   same idea but at gap 14px, and the 4px matters in a five-chip row that has to
   stay on one line at 1200px. */
#pkw .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
/* Centred eyebrow, as a modifier rather than an inline style. The source centred
   the trust band's eyebrow inline. Note this is NOT the same as the existing
   #pkw .cta-final .eyebrow rule (which centres by context) or the
   #pkw .trust-flow .eyebrow rule inside the 960px query (which centres only on
   mobile) - the trust band's top eyebrow sits outside .trust-flow and needs
   centring at every width. */
#pkw .eyebrow--center { display: flex; justify-content: center; }
/* THE MEETING FORM CARD. Wraps the Formidable block, and is also the reveal
   card - .pk-toggle-form and .pk-toggle-reveal are the same component with
   different contents, which is why the thank-you inherits the card for free.

   padding was `20px 20px 20px` in the source, collapsed. The box-shadow stays a
   literal rgba of --navy rather than a token: --pk-shadow-lg is a different
   geometry, and matching the source's lift mattered more than the token here. */
/* THE LIVE GRADIENT HAIRLINE IS NOW THE STANDARD, not a modifier - 2026-08-17. Bob: "make
   that happen on every form, on every page, on every post, make that a standard now."

   It was .form-card--edge on /demo for one iteration. Folded into the base rule instead of
   swept as a class, so every existing card gets it AND every future one does, with no
   content edit and nothing to remember.

   WHAT IT REACHES: `#pkw .form-card`, which is every card on a PAGE. It does NOT reach the
   9 /webinars/* POSTS - those render outside #pkw entirely - and it deliberately does not
   reach #pk-quantum-readiness or #pk-gartner-wrapper, which are separate wrappers with
   their own deliberate 8px cyan top border. Bob's standing rule makes a form on a post a
   hard stop, so those 9 are held pending his say rather than picked up quietly.

   border-color IS TRANSPARENT AND border-width IS 2px because the conic is painted on the
   border-box UNDERNEATH the border - the border is the window you see it through. At the
   original 1px it read as a thread; 2px is where the colour movement becomes legible.
   --brd is no longer used here; it survives on every other card and panel in the theme.

   THE FORM ITSELF IS UNTOUCHED. This is the wrapper only - no field, label, hidden input,
   Formidable markup or GTM hook is involved, and /demo was verified input-for-input before
   and after when this was still a modifier: 30 inputs before, 30 after. */
#pkw .form-card {
  position: relative;
  padding: 20px;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--pk-edge-a),
      rgba(9,188,239,.95)   0deg,
      rgba(15,228,162,.95)  85deg,
      rgba(30,48,116,.30)  170deg,
      rgba(15,228,162,.95) 265deg,
      rgba(9,188,239,.95)  360deg) border-box;
  box-shadow: 0 30px 70px -34px rgba(30, 48, 116, .30);
  animation:
    pk-edge-spin  16s linear infinite,
    pk-edge-pulse 3.8s ease-out infinite;
  transition: box-shadow .35s ease, transform .35s ease;
  /* 10px, Bob's value: "adding 10px top fixes all of this for me". The pulse ring throws
     16px of spread and the card often sits hard against the top of its column, so without
     this the top of the ring is clipped and the effect only reads on three sides. */
  margin-top: 10px;
}

/* The pulse is DROPPED, not overridden, when a field takes focus - an animated property
   beats a normal declaration, so leaving it running would win over the box-shadow here no
   matter how specific this selector is. Re-declaring `animation` with only the spin
   releases box-shadow back to the cascade. Idle the card invites; in use it holds steady. */
#pkw .form-card:focus-within {
  animation: pk-edge-spin 16s linear infinite;
  transform: translateY(-2px);
  box-shadow:
    0 30px 70px -34px rgba(30,48,116,.34),
    0 0 0 5px rgba(9,188,239,.12),
    0 0 30px -6px rgba(15,228,162,.38);
}

/* ---------- .form-card--edge : a live gradient hairline, opt-in ------------------
   Added 2026-08-17. Bob: "How about something cool on the form outline card, you know,
   pkware colors, but cool, 21st century."

   OPT-IN, ONE PAGE. The plain .form-card above is unchanged and is still what the other 30
   cards render. This is on /demo only, the same way the mesh band is on
   /solutions/data-discovery only. Reverting is deleting one class from one page.

   THE FORM ITSELF IS NOT TOUCHED. This styles the WRAPPER div and nothing inside it - no
   field, no label, no hidden input, no Formidable markup, no GTM hook. Bob's standing rule
   is that the form implementation stays exactly as it is, and a class on the box around it
   does not reach any of that.

   HOW THE MOVING HAIRLINE WORKS - two backgrounds, two clip boxes. `padding-box` paints the
   panel colour inside the border, `border-box` paints the conic UNDER the border, and the
   border is set transparent so the conic is what shows through it. That is the whole trick;
   there is no extra element and no pseudo-element in the way of the form. @property makes
   the angle animatable - an unregistered custom property is a string and would jump rather
   than rotate.

   NO OUTER GLOW RING, and this is a deliberate omission rather than an oversight. A blurred
   halo wants a pseudo-element at z-index:-1, and .form-card is position:relative with
   z-index:auto - so it establishes no stacking context and a -1 child paints behind the
   card's own background, i.e. invisible. Making it work means adding isolation and a
   stacking context around a live form, which is not worth it for a halo. The :focus-within
   ring below gives the same lift with a box-shadow and no new element.

   :focus-within IS THE PART WORTH HAVING. The card lifts and the ring brightens the moment
   the user is actually in the form, and fades when they leave. It costs one rule, needs no
   JS, and it is the kind of detail that reads as considered rather than decorated.

   COLOURS ARE THE EXISTING TOKENS: #09BCEF cyan, #0FE4A2 frost, #1E3074 navy. No new colour.

   ONE KNOWN CONFLICT, recorded rather than fixed: `#pkw .hero-blue .form-card` sets
   background at (1,2,0) and would beat this rule's (1,1,0), so the hairline would not show
   on a hero-blue landing page. Irrelevant while this is on /demo; if it is ever swept
   site-wide, that selector needs the modifier added to it.

   REDUCED MOTION is already handled by `#pkw *{animation:none!important}` - the hairline
   stops rotating and holds a fixed gradient, which still looks intentional. */

@property --pk-edge-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }


/* THE PULSE STOPS WHEN THE FORM IS IN USE, and that is the point of it. Idle, the card
   breathes a ring outward to invite; the moment a field takes focus the pulse animation is
   dropped and the steady :focus-within glow below takes over. A pulsing box-shadow under a
   cursor would be noise.

   IT HAS TO BE DROPPED RATHER THAN OVERRIDDEN: an animated property beats a normal
   declaration in the cascade, so leaving pk-edge-pulse running would win over the
   box-shadow below no matter how specific that rule is. Re-declaring `animation` with only
   the spin is what releases box-shadow back to the cascade. */

@keyframes pk-edge-spin { to { --pk-edge-a: 360deg; } }

/* The base drop shadow is repeated in every keyframe on purpose. `animation` on box-shadow
   replaces the WHOLE property, so omitting it would make the card lose its lift for the
   duration of the pulse and pop back at the end. */
@keyframes pk-edge-pulse {
  0%   { box-shadow: 0 30px 70px -34px rgba(30,48,116,.30), 0 0 0 0    rgba(9,188,239,.34); }
  70%  { box-shadow: 0 30px 70px -34px rgba(30,48,116,.30), 0 0 0 16px rgba(9,188,239,0);   }
  100% { box-shadow: 0 30px 70px -34px rgba(30,48,116,.30), 0 0 0 0    rgba(9,188,239,0);   }
}
#pkw .form-card .fh { margin-bottom: 6px; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--head); }
#pkw .form-card .fsub { margin-bottom: 22px; font-size: 15px; font-weight: 700; color: var(--tx-2); }
/* Body copy in the reveal card. Replaces an inline
   style="font-size:15px;color:var(--tx-2);margin-top:6px" - needed because
   #pkw p{margin:0} zeroes the gap under .fh. */
#pkw .form-card .fnote { margin-top: 6px; font-size: 15px; color: var(--tx-2); }
/* Scarcity line under the form. Centred and capped narrow on purpose. */
#pkw .form-micro { max-width: 36ch; margin: 16px auto 0; font-size: 13px; line-height: 1.5; text-align: center; text-wrap: balance; color: var(--tx-3); }
/* TRUST BAND, gated-page variant. Replaces an inline
   style="padding: 0px 0px 80px 0px" on the section: no top padding, because the
   hero above it already ends in space.

   NEAR-DUPLICATE OF .trust-strip, and logged as such in the component registry.
   .trust-strip is the same band on the older pages but more evolved - per-logo
   .lg-img--* heights and a 111s track. This one runs the base 36s marquee and
   restyles the eyebrow to a frost dot, which .trust-strip does not. Unifying
   them means editing the older pages, so it is a retrofit, not a fix. */
#pkw .sec.trust-sec { padding: 0 0 var(--pk-sec-y-hero); }
/* TWO RULES DELETED HERE - 1.10.42, 2026-08-13. They were entirely redundant, and I
   put them in the day before by porting share-pittsburgh's page CSS without checking
   its declarations against our base:

     #pkw .trust-sec .eyebrow { gap: 9px; color: var(--frost-deep); }
     #pkw .trust-sec .eyebrow::before { width:7px; height:7px; border-radius:50%;
                                        background:var(--frost); box-shadow:... }

   Every declaration already applied. #pkw .eyebrow is gap:9px, and its ::before is
   ALREADY the round frost dot with the same glow - byte for byte. And the colour
   override did nothing either: --eb resolves to var(--frost-deep), so the base rule
   was already painting frost-deep.

   THE AUDIT LESSON, worth more than the 4 lines saved: checking whether the CLASS
   exists is not enough. These were both new selectors, so the class audit said
   "new" - but their DECLARATIONS were already inherited. Compare the values, not
   just the names, or every ported page quietly re-states the design system.

   What share-pittsburgh's source actually differed on was its LOCAL --eb, which it
   set to var(--cyan-700) - so its eyebrows were cyan and only the trust band was
   frost. Our --eb is frost-deep site-wide, which makes the override moot. */
#pkw .trust-sec .marquee { margin-top: 22px; }
/* The Gartner Peer Insights label. Replaces an inline style="margin:0 0 14px";
   tighter than the base eyebrow's 22px because it labels the card directly
   below it. */
#pkw .trust-flow .gpi-label { margin: 0 0 14px; }

/* LISTS INSIDE THE ACCORDION - added 1.10.44, 2026-08-13 for /products/pkzip.
   #pkw .faq-a p is the only styled child of an answer, because until now every answer
   held exactly one paragraph. The pkzip download centre put NINE platforms into this
   component - Bob: "Reuse our existing accordion and see how that plays out, I have
   other pages that use that component" - and those answers carry lists of installer
   links, license-key prerequisites, and install commands.

   Reuses .bullets for the markers and the 8px item spacing rather than restating
   them; this rule only positions the list inside the answer and matches the type of
   the sibling paragraph. Specificity (1,2,0) beats #pkw .bullets at (1,1,0).

   THE ACCORDION IS A DISCLOSURE COMPONENT, NOT A FAQ. The class names say faq for
   historical reasons only. Do not generate FAQPage JSON-LD from a block just because
   it uses them - on pkzip these are platforms, not questions. */
#pkw .faq-a .bullets { padding: 0 4px 18px 22px; font-size: 16.5px; line-height: 1.65; color: var(--tx-2); }
#pkw .faq-a .bullets:last-child { padding-bottom: 26px; }

/* Form 32's consent checkbox needs air above it - Bob 2026-08-13: "Add it as a form
   scoped rule for the checkbox I believe, we wil see how it plays out."

   Staging carried this as an inline <style> block inside the page content, which a
   fragment may not do - check 3 asserts zero <style> tags, and content-embedded CSS is
   exactly what this project exists to remove. Scoped to the one Formidable field id so
   it cannot reach another form.

   IT TARGETS A FORMIDABLE-GENERATED ID, so it is only as stable as that id. If the
   gap disappears, check whether form 32's checkbox field was rebuilt - a new field
   gets a new id and this rule silently stops matching. */
#frm_checkbox_531-0 { margin-top: 50px; }

/* Inline video embed - added 2026-08-13 for /demo, and Bob says the Avada lightbox
   it replaces appears on other pages, so expect reuse.

   ONE RULE, ON THE IFRAME ITSELF. The usual padding-top percentage hack needs a
   positioned wrapper and two rules; aspect-ratio needs neither and is supported
   everywhere this theme's 6.9 baseline runs. Bob: "this doesnt need to be fancy".

   No border-radius and no frame, matching what staging shows - a bare 16:9 video in
   the flow. The poster image, the play button and the fullscreen control are all
   YouTube's own, which is why nothing here styles them and no thumbnail is stored
   locally.

   Load the src from youtube-nocookie.com, not youtube.com. inc/security.php lists
   only the -nocookie host in frame-src, so a plain youtube.com embed is a reported
   CSP violation by design. */
#pkw .video-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Bulleted body list. THE ONLY RULE ADDED FOR /demo - 2026-08-13.
   #pkw ul sets list-style:none, padding:0, which is right for the nav-like and
   card-like lists the other pages use. /demo has two lists that are primary
   content - "our unified platform provides" and the reveal's "did you know" -
   and rendering them as unmarked lines is not a replication, it is a regression.
   Specificity: (1,1,0) against #pkw ul at (1,0,1), so it wins without !important. */
#pkw .bullets { margin: 0; padding-left: 1.15em; list-style: disc; }
#pkw .bullets li { margin-top: 8px; }
#pkw .bullets li:first-child { margin-top: 0; }
/* Both /demo lists sit between two .lead paragraphs, and #pkw p{margin:0} means
   nothing separates them otherwise. */
#pkw .lead + .bullets, #pkw .bullets + .lead { margin-top: 18px; }

/* --- end gated landing page ------------------------------------------------ */

/* ==========================================================================
   1.10.64 - .pkv-page-whatsnew : /whats-new, PORTED NOT REDESIGNED
   --------------------------------------------------------------------------
   THE SECOND SELF-CONTAINED DESIGN SYSTEM IN THIS FILE, after .pkbc-page. Like the
   battle cards, /whats-new did not arrive as an Avada build to be mapped onto the home
   page - it arrived as a finished, fully namespaced page with its own tokens, its own
   type scale and its own changelog. The design rule's carve-out is exactly for this, and
   it was written after three pkware-vs-* rebuilds were thrown away for being mapped onto
   home. Bob asked to "go with this one" and did NOT ask for a new look, which he did ask
   for on the two pages immediately before it.

   SO THIS IS A VERBATIM PORT, scoped as the author already scoped it. Every selector
   below starts .pkv-page-whatsnew - verified, 101 rules, zero unscoped - so it can touch
   nothing else in the theme and nothing in the theme reaches it.

   THE TOKENS DUPLICATE SECTION 3 ON PURPOSE, and that is the same call .pkbc-page made:
   --navy #1E3074, --cyan #09BCEF, --frost #0FE4A2 are the same values #pkw uses, declared
   again on this wrapper because the page shipped that way and unifying them means editing
   a page nobody has asked to change. Logged as consolidation debt, not fixed.

   ---- TWO DECLARATIONS DROPPED IN THE PORT, and that is what "port" means -------------

   1. THE FULL-BLEED ESCAPE HATCH ON .pkv-section. As authored it was
      `width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw`, the
      standard trick for breaking a section out of a constrained container. It existed
      because Avada constrains content, and the author's own build notes say so: "Avada
      100% Width template, so full-bleed sections reach edges."

      THIS THEME DOES NOT CONSTRAIN CONTENT WIDTH. page.php states it - "Nothing wraps or
      constrains that markup here, so the author controls their own layout" - and the DOM
      confirms it: main > article.entry > .entry-content, and a grep of every rule naming
      those classes finds one spacing declaration and no width at all.

      So the hatch has nothing to escape from, and it cannot be harmless: 100vw counts the
      scrollbar gutter and the parent does not, so a full-width parent plus a 100vw child
      is a horizontal scrollbar on the whole document. Removed; `position:relative` and
      the 96px padding are kept, which is all the rule was otherwise doing.

   2. `.fusion-tb-footer.fusion-footer { margin-top:-20px }`, which was sitting at the end
      of the page's own stylesheet. An Avada selector, targeting a footer this theme does
      not render. It goes with the framework it names.

   ---- WHAT DID NOT CHANGE -------------------------------------------------------------

   Layout, type scale, colour, spacing, the card grid, the feature-large treatment, the
   status badges, the pulse keyframe and the responsive block are all untouched. The
   .pkv-fade-up reveal pairs with the IntersectionObserver now living in components.js.

   ---- THE FONTS ARE A SEPARATE PROBLEM, FLAGGED NOT FIXED -----------------------------

   This stylesheet asks for 'Lato' and the page carries three Google Fonts link tags to
   supply it. The theme is supposed to self-host Lato instead - section 2 declares four
   @font-face rules - but assets/fonts/ SHIPS EMPTY BY DESIGN and all four files return
   404. Measured, not assumed. So 50 of 53 pages currently render in the system fallback
   and only the three battle cards get real Lato, because only they still carry the link
   tags. Those tags are kept on this page for the same reason. Four woff2 files in
   assets/fonts/ closes it for the whole site at once.
   ========================================================================== */
/* ADDED IN THE PORT, not present on staging - one rule, for a seam this theme creates.

   `.entry-content > * + *` in section 5 puts 1rem above every child of the content root
   after the first. This fragment's first children are three font link tags and a JSON-LD
   script - invisible, but real elements - so the page wrapper is a LATER sibling and picks
   up 16px of margin.

   On .pkbc-page that is invisible, because the battle-card hero has padding and no
   background. Here the first section is .pkv-section-grey, so the 16px renders as a white
   band between the breadcrumb and the tinted hero. Same specificity as the rule it
   overrides, (0,2,0) against (0,2,0), so this wins on source order alone - it must stay
   BELOW section 5, which it is. */
.entry-content > .pkv-page-whatsnew { margin-block-start: 0; }
.pkv-page-whatsnew{--navy:#1E3074;--navy-2:#15224f;--cyan:#09BCEF;--frost:#0FE4A2;--coral:#F95557;--purple:#55489D;--ink:#484848;--ink-2:#6b7890;--grey:#F1F5FA;--grey-2:#E7ECF5;--line:#d9e0ec;--white:#fff;font-family:'Lato',-apple-system,sans-serif;color:var(--ink);line-height:1.7;font-size:20px;font-weight:400;}
.pkv-page-whatsnew *{box-sizing:border-box;margin:0;padding:0}
.pkv-page-whatsnew h1,.pkv-page-whatsnew h2,.pkv-page-whatsnew h3,.pkv-page-whatsnew h4{font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-weight:400;letter-spacing:-0.01em}
.pkv-page-whatsnew h1{font-size:clamp(2.4rem,5vw,3.4rem);line-height:1.08}
.pkv-page-whatsnew h2{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.2}
.pkv-page-whatsnew h3{font-size:clamp(1.3rem,2.2vw,1.55rem);line-height:1.3}
.pkv-page-whatsnew p{font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pkv-page-whatsnew a{color:var(--cyan);text-decoration:none}
.pkv-page-whatsnew a:hover{text-decoration:underline}

/* LAYOUT */
.pkv-page-whatsnew .pkv-wrap{max-width:1300px;margin:0 auto;padding:0 24px}
.pkv-page-whatsnew .pkv-narrow{max-width:760px}
.pkv-page-whatsnew .pkv-section{position:relative;padding:var(--pk-sec-y) 0}
.pkv-page-whatsnew .pkv-hero{padding:56px 0 28px}
.pkv-page-whatsnew .pkv-section-dark{background:radial-gradient(120% 120% at 85% 0%, rgba(9,188,239,0.10) 0%, rgba(9,188,239,0) 46%), linear-gradient(157deg,#21346f 0%,#15224f 100%)}
.pkv-page-whatsnew .pkv-section-grey{background:var(--grey)}
.pkv-page-whatsnew .pkv-section-dark h1,.pkv-page-whatsnew .pkv-section-dark h2,.pkv-page-whatsnew .pkv-section-dark h3{color:var(--white)}
.pkv-page-whatsnew .pkv-section-dark p{color:rgba(255,255,255,0.88)}
/* First content section after hero gets a tighter top so content rises above the fold */
.pkv-page-whatsnew .pkv-hero + .pkv-section{padding-top:48px}

/* TYPE HELPERS */
.pkv-page-whatsnew .pkv-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'Lato',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
.pkv-page-whatsnew .pkv-eyebrow::before{content:"";width:34px;height:2px;background:var(--cyan);display:inline-block}
.pkv-page-whatsnew .pkv-lead{font-size:1.2rem;line-height:1.6;color:var(--ink);max-width:680px}
.pkv-page-whatsnew .pkv-section-dark .pkv-lead{color:rgba(255,255,255,0.9)}

/* BUTTONS */
.pkv-page-whatsnew .pkv-btn{display:inline-block;border-radius:999px;padding:16px 34px;font-family:'Lato',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:all .25s;border:2px solid transparent;line-height:1.1;text-decoration:none!important}
.pkv-page-whatsnew .pkv-btn-primary{background:var(--cyan)!important;color:#06283c!important}
.pkv-page-whatsnew .pkv-btn-primary:hover{background:var(--navy)!important;color:#fff!important}
.pkv-page-whatsnew .pkv-btn-frost{background:var(--frost)!important;color:#06342a!important}
.pkv-page-whatsnew .pkv-btn-frost:hover{background:#fff!important;color:var(--navy)!important}
.pkv-page-whatsnew .pkv-btn-outline{background:transparent!important;border-color:var(--navy)!important;color:var(--navy)!important}
.pkv-page-whatsnew .pkv-btn-outline:hover{background:var(--cyan)!important;border-color:var(--cyan)!important;color:#06283c!important}
.pkv-page-whatsnew .pkv-btn-outline-light{background:transparent!important;border-color:rgba(255,255,255,0.5)!important;color:#fff!important}
.pkv-page-whatsnew .pkv-btn-outline-light:hover{background:#fff!important;color:var(--navy)!important;border-color:#fff!important}
.pkv-page-whatsnew .pkv-cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}

/* RELEASE BLOCK */
.pkv-page-whatsnew .pkv-release{margin-top:var(--pk-gap-xl)}
.pkv-page-whatsnew .pkv-release:first-of-type{margin-top:0}
.pkv-page-whatsnew .pkv-release-header{padding-bottom:28px;margin-bottom:40px;border-bottom:2px solid var(--grey-2)}
.pkv-page-whatsnew .pkv-release-title-row{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.pkv-page-whatsnew .pkv-version-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Lato',sans-serif;font-weight:900;font-size:0.85rem;letter-spacing:0.04em;color:var(--cyan);background:rgba(9,188,239,0.10);border:1px solid rgba(9,188,239,0.25);border-radius:999px;padding:6px 14px}
.pkv-page-whatsnew .pkv-version-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 0 4px rgba(15,228,162,0.18)}
.pkv-page-whatsnew .pkv-release-date{font-family:Georgia,serif;font-size:1.7rem;color:var(--navy);margin:0}
.pkv-page-whatsnew .pkv-release-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:18px}
.pkv-page-whatsnew .pkv-stat{font-family:'Lato',sans-serif}
.pkv-page-whatsnew .pkv-stat-num{display:block;font-family:Georgia,serif;font-size:1.7rem;color:var(--navy);font-weight:400;line-height:1}
.pkv-page-whatsnew .pkv-stat-label{display:block;font-size:0.74rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#7b8190;margin-top:6px}
.pkv-page-whatsnew .pkv-stat-versions{font-family:'Lato',sans-serif;font-size:0.85rem;color:#7b8190;letter-spacing:0.01em;line-height:1.6}
.pkv-page-whatsnew .pkv-stat-versions strong{color:var(--navy);font-weight:700}

/* CARD GRID */
.pkv-page-whatsnew .pkv-card-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.pkv-page-whatsnew .pkv-card-row.is-single{grid-template-columns:1fr}

/* SECTION DIVIDER (between Live now and Tech Preview within a release) */
.pkv-page-whatsnew .pkv-subsection-header{margin-top:var(--pk-gap-xl);padding-top:36px;border-top:1px dashed #cdd6e6}
.pkv-page-whatsnew .pkv-subsection-header .pkv-eyebrow{margin-bottom:14px}
.pkv-page-whatsnew .pkv-subsection-header h3{font-family:Georgia,serif;font-size:1.55rem;color:var(--navy);margin:0 0 10px;line-height:1.25}
.pkv-page-whatsnew .pkv-subsection-header p{font-size:1rem;color:var(--ink-2);max-width:640px;margin:0}

/* CARDS */
.pkv-page-whatsnew .pkv-card{background:#fff;border:1px solid var(--grey-2);border-radius:18px;overflow:hidden;transition:transform .28s ease, box-shadow .28s ease, border-color .25s ease;display:flex;flex-direction:column}
.pkv-page-whatsnew .pkv-card:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(30,48,116,0.10);border-color:#cdd6e6}
.pkv-page-whatsnew .pkv-card-art{position:relative;width:100%;aspect-ratio:16/9;background:var(--grey);overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--grey-2)}
.pkv-page-whatsnew .pkv-card-art svg{width:100%;height:100%;display:block}
.pkv-page-whatsnew .pkv-card-body{padding:32px 34px 30px;display:flex;flex-direction:column;flex:1}
.pkv-page-whatsnew .pkv-card-meta{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.pkv-page-whatsnew .pkv-status{display:inline-flex;align-items:center;gap:7px;font-family:'Lato',sans-serif;font-weight:700;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;line-height:1}
.pkv-page-whatsnew .pkv-status::before{content:"";width:7px;height:7px;border-radius:50%}
.pkv-page-whatsnew .pkv-status-live{color:#0a7a5b;background:rgba(15,228,162,0.13);border:1px solid rgba(15,228,162,0.35)}
.pkv-page-whatsnew .pkv-status-live::before{background:#0FE4A2;box-shadow:0 0 0 3px rgba(15,228,162,0.25);animation:pkv-pulse 2.4s ease-out infinite}
.pkv-page-whatsnew .pkv-status-request{color:#7b5300;background:rgba(255,193,7,0.13);border:1px solid rgba(255,193,7,0.4)}
.pkv-page-whatsnew .pkv-status-request::before{background:#F5B301}
.pkv-page-whatsnew .pkv-card h3{margin-bottom:12px;font-size:1.4rem;line-height:1.25}
.pkv-page-whatsnew .pkv-card.is-feature-large h3{font-size:1.7rem;line-height:1.22}
.pkv-page-whatsnew .pkv-card p{font-size:1rem;line-height:1.65;color:var(--ink)}
.pkv-page-whatsnew .pkv-card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:20px}
.pkv-page-whatsnew .pkv-tag{display:inline-block;font-family:'Lato',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#7b8190;background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.pkv-page-whatsnew .pkv-tag-product{color:var(--purple);border-color:rgba(85,72,157,0.3);background:rgba(85,72,157,0.06)}
.pkv-page-whatsnew .pkv-card-link{display:inline-block;margin-top:14px;font-family:'Lato',sans-serif;font-weight:700;font-size:0.88rem;color:var(--cyan)}
.pkv-page-whatsnew .pkv-card-link::after{content:" →";transition:transform .2s;display:inline-block}
.pkv-page-whatsnew .pkv-card-link:hover::after{transform:translateX(3px)}

/* HEADLINE CARD (full-width, dark, larger) */
.pkv-page-whatsnew .pkv-card.is-feature-large{grid-column:1 / -1;background:linear-gradient(157deg,#21346f 0%,#15224f 100%);border-color:transparent;color:#fff;flex-direction:row;align-items:stretch}
.pkv-page-whatsnew .pkv-card.is-feature-large .pkv-card-art{aspect-ratio:auto;width:48%;background:rgba(9,188,239,0.05);border-bottom:none;border-right:1px solid rgba(255,255,255,0.08)}
.pkv-page-whatsnew .pkv-card.is-feature-large .pkv-card-body{padding:48px 52px;width:52%}
.pkv-page-whatsnew .pkv-card.is-feature-large h3{color:#fff}
.pkv-page-whatsnew .pkv-card.is-feature-large p{color:rgba(255,255,255,0.86)}
.pkv-page-whatsnew .pkv-card.is-feature-large .pkv-tag{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18)}
.pkv-page-whatsnew .pkv-card.is-feature-large .pkv-tag-product{color:#a895e2;background:rgba(168,149,226,0.10);border-color:rgba(168,149,226,0.3)}
.pkv-page-whatsnew .pkv-card.is-feature-large .pkv-card-link{color:var(--frost)}
.pkv-page-whatsnew .pkv-card.is-feature-large .pkv-status-live{color:#0FE4A2;background:rgba(15,228,162,0.10);border-color:rgba(15,228,162,0.35)}

@keyframes pkv-pulse{0%{box-shadow:0 0 0 3px rgba(15,228,162,0.25)}70%{box-shadow:0 0 0 8px rgba(15,228,162,0)}100%{box-shadow:0 0 0 3px rgba(15,228,162,0)}}

/* CTA SECTION */
.pkv-page-whatsnew .pkv-cta-section{text-align:center;padding:var(--pk-sec-y-cta) 0}
.pkv-page-whatsnew .pkv-cta-section h2{margin-bottom:18px}
.pkv-page-whatsnew .pkv-cta-section .pkv-lead{margin:0 auto 36px;color:rgba(255,255,255,0.92)}
.pkv-page-whatsnew .pkv-cta-section .pkv-cta-row{justify-content:center}

/* ANIMATION */
.pkv-page-whatsnew .pkv-fade-up{opacity:0;transform:translateY(20px);transition:opacity .55s ease, transform .55s ease}
.pkv-page-whatsnew .pkv-fade-up.is-visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media (max-width: 860px) {
  .pkv-page-whatsnew .pkv-section{padding:64px 0}
  .pkv-page-whatsnew .pkv-hero{padding:32px 0 24px}
  .pkv-page-whatsnew .pkv-card-row{grid-template-columns:1fr}
  .pkv-page-whatsnew .pkv-card.is-feature-large{flex-direction:column}
  .pkv-page-whatsnew .pkv-card.is-feature-large .pkv-card-art{width:100%;aspect-ratio:16/9;border-right:none;border-bottom:1px solid rgba(255,255,255,0.08)}
  .pkv-page-whatsnew .pkv-card.is-feature-large .pkv-card-body{width:100%;padding:32px 28px}
  .pkv-page-whatsnew .pkv-card-body{padding:24px 24px 22px}
  .pkv-page-whatsnew .pkv-cta-section{padding:var(--pk-sec-y-cta) 0}
  .pkv-page-whatsnew .pkv-release-stats{gap:24px}
}


/* ==========================================================================
   1.10.65 - .pkv-quantum : /solutions/quantum-encryption, PORTED NOT REDESIGNED
   --------------------------------------------------------------------------
   THE THIRD SELF-CONTAINED DESIGN SYSTEM, after .pkbc-page and .pkv-page-whatsnew, by
   the same author. Same call as both: a page arriving with a complete design of its own
   is ported under its own wrapper, not mapped onto the home page.

   IT CONTAINS ITSELF BY PREFIX RATHER THAN BY WRAPPER - the one structural difference
   from the other two. Of 121 selectors, 23 are nested under .pkv-quantum and 96 are bare
   .pkvq- selectors. Verified with a brace-depth walk before leaving it alone: ZERO are
   element-level, so the prefix contains them as completely as nesting would. The rule
   that would genuinely have been dangerous unscoped - box-sizing plus the margin and
   padding reset on * - is already wrapper-scoped by the author.

   NOT REWRITTEN TO MATCH THE OTHER TWO. Prefixing 96 selectors raises their specificity
   uniformly, which changes which of them wins against the 23 already nested. A real risk
   taken for a theoretical one. THE TRADE: any future page using a pkvq- class inherits
   these rules. Recorded here rather than discovered later.

   ---- ONE DECLARATION DROPPED IN THE PORT ---------------------------------------------

   The full-bleed hatch on .pkvq-section, as authored:
       width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw
   The author's own note says what it was for: "sections now break out to 100vw so the
   colored backgrounds reach the screen edges inside Avada's content column."

   THIS THEME DOES NOT CONSTRAIN CONTENT WIDTH. page.php states it and the DOM confirms
   it: main > article.entry > .entry-content, one spacing declaration, no width. So the
   hatch has nothing to escape, and it is not neutral - 100vw counts the scrollbar gutter
   and the parent does not, so a full-width parent with a 100vw child is a horizontal
   scrollbar on the whole document. `position:relative` is kept, which is all the rule was
   otherwise doing. SECOND TIME THIS EXACT HATCH HAS BEEN REMOVED from a ported page; see
   the .pkv-page-whatsnew block above. Expect it on the next one too.

   The wrapper's own `overflow-x:hidden` is left in place. It was the author's guard for
   the hatch; with the hatch gone it has nothing to clip, and removing it would be a
   second change for no reason.

   ---- WHAT DID NOT CHANGE -------------------------------------------------------------

   The type scale, the dark and grey section treatments, the FAQ accordion, the Gartner
   Peer Insights card and its mandatory disclaimer line, the countdown rail, the three
   dashed product placeholders, the table, the video frame and the responsive block.

   .pkvq-reveal and .pkvq-faq-q pair with the IIFE now in components.js. WITHOUT THAT
   SCRIPT THE FAQ DOES NOT OPEN - the panels are driven by inline max-height, not by CSS -
   so it is behaviour, not decoration, and it is the reason the block could not stay
   inline under a script-src 'self' policy.

   ---- THE FONTS, AGAIN ----------------------------------------------------------------

   This stylesheet asks for 'Lato' and the page carries three Google Fonts link tags to
   supply it, kept for the reason recorded against .pkv-page-whatsnew: assets/fonts/ ships
   empty and all four self-hosted files 404. FIVE pages now carry those tags. Four woff2
   files removes them from all five at once.
   ========================================================================== */
.pkv-quantum{--navy:#1E3074;--cyan:#09BCEF;--frost:#0FE4A2;--coral:#F95557;--purple:#55489D;--ink:#484848;--grey:#F1F5FA;--white:#fff;font-family:'Lato',-apple-system,sans-serif;color:var(--ink);line-height:1.7;font-size:20px;font-weight:400;overflow-x:hidden}
.pkv-quantum *{box-sizing:border-box;margin:0;padding:0}
.pkv-quantum h1,.pkv-quantum h2,.pkv-quantum h3,.pkv-quantum h4{font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-weight:400;letter-spacing:-0.01em}
.pkv-quantum h1{font-size:clamp(2.3rem,5vw,3.25rem);line-height:1.1}
.pkv-quantum h2{font-size:clamp(1.9rem,4vw,2.875rem);line-height:1.2}
.pkv-quantum h3{font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.3}
.pkv-quantum p{font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pkv-quantum a{color:var(--cyan);text-decoration:none}
.pkvq-wrap{max-width:1300px;margin:0 auto;padding:0 10px}
.pkv-quantum .pkvq-section{position:relative}
.pkvq-narrow{max-width:760px}
.pkvq-section{padding:var(--pk-sec-y) 0}
.pkvq-hero{padding:22px 0 var(--pk-sec-y-hero)}
.pkvq-dark{background:radial-gradient(120% 120% at 85% 0%, rgba(9,188,239,0.10) 0%, rgba(9,188,239,0) 46%), linear-gradient(157deg,#21346f 0%,#15224f 100%)}
.pkvq-grey{background:var(--grey)}
.pkvq-dark h2,.pkvq-dark h3,.pkvq-dark h1{color:var(--white)}
.pkvq-dark p{color:rgba(255,255,255,0.88)}
.pkvq-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'Lato',sans-serif;font-size:18px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
.pkvq-eyebrow::before{content:"";width:34px;height:2px;background:var(--cyan);display:inline-block}
.pkvq-lead{font-size:1.2rem;line-height:1.6;color:var(--ink);max-width:680px}
.pkvq-dark .pkvq-lead{color:rgba(255,255,255,0.9)}
.pkv-quantum .pkvq-btn{display:inline-block;border-radius:999px;padding:16px 34px;font-family:'Lato',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s;border:2px solid transparent;line-height:1.1;text-decoration:none!important}
.pkv-quantum .pkvq-btn-primary{background:var(--cyan)!important;color:#06283c!important}
.pkv-quantum .pkvq-btn-primary:hover{background:var(--navy)!important;color:#fff!important}
.pkv-quantum .pkvq-btn-frost{background:var(--frost)!important;color:#06342a!important}
.pkv-quantum .pkvq-btn-frost:hover{background:#fff!important;color:var(--navy)!important}
.pkv-quantum .pkvq-btn-outline{background:transparent!important;border-color:var(--navy)!important;color:var(--navy)!important}
.pkv-quantum .pkvq-btn-outline:hover{background:var(--cyan)!important;border-color:var(--cyan)!important;color:#06283c!important}
.pkv-quantum .pkvq-btn-outline-light{background:transparent!important;border-color:rgba(255,255,255,0.5)!important;color:#fff!important}
.pkv-quantum .pkvq-btn-outline-light:hover{background:#fff!important;color:var(--navy)!important;border-color:#fff!important}
.pkvq-cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.pkvq-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pkvq-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pkvq-grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.pkvq-svg{width:100%;height:auto;display:block}
.pkvq-figure{margin:0}
.pkvq-figcap{font-size:0.85rem;color:#7b8190;margin-top:14px;font-style:italic}
.pkvq-dark .pkvq-figcap{color:rgba(255,255,255,0.6)}
.pkvq-move-num{font-family:Georgia,serif;font-size:1.1rem;color:var(--cyan);font-weight:700;letter-spacing:0.05em}
.pkvq-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:0.98rem}
.pkvq-table th{text-align:left;font-family:'Lato',sans-serif;font-weight:700;color:var(--navy);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;padding:14px 16px;border-bottom:2px solid #d9e0ec}
.pkvq-table td{padding:16px;border-bottom:1px solid #e3e9f2;color:var(--ink);vertical-align:top}
.pkvq-risk{color:var(--coral);font-weight:700}
.pkvq-safe{color:#0a9d72;font-weight:700}
.pkvq-foot{font-size:0.85rem;color:#7b8190;margin-top:18px}
.pkvq-proof-block h3{margin-bottom:10px}
.pkvq-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.pkvq-tag{border:1px solid #d3dcec;border-radius:999px;padding:8px 18px;font-size:0.82rem;font-weight:700;color:var(--navy);background:#fff}
.pkvq-getlist{list-style:none;margin:28px 0 0}
.pkvq-getlist li{position:relative;padding-left:34px;margin-bottom:16px;font-size:1.05rem}
.pkvq-getlist li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--frost)}
.pkvq-getlist li::after{content:"";position:absolute;left:6px;top:11px;width:5px;height:9px;border:solid #06342a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pkvq-quote{font-family:Georgia,serif;font-size:1.5rem;line-height:1.45;color:var(--navy);font-style:italic}
.pkvq-quote-attr{font-family:'Lato',sans-serif;font-style:normal;font-size:0.95rem;font-weight:700;color:var(--ink);margin-top:24px}
.pkvq-quote-attr span{display:block;font-weight:400;color:#7b8190}
.pkvq-trust{text-align:center}
.pkvq-trust-label{font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#9aa3b2;margin-bottom:28px}
.pkvq-trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:44px;align-items:center}
.pkvq-trust-row span{font-family:Georgia,serif;font-size:1.5rem;color:#aab2c0;letter-spacing:0.01em}
.pkvq-faq-item{border-bottom:1px solid #e0e6f0}
.pkvq-faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:26px 44px 26px 0;font-family:Georgia,serif;font-size:1.2rem;color:var(--navy);position:relative;line-height:1.4}
.pkvq-faq-q::after{content:"";position:absolute;right:6px;top:32px;width:11px;height:11px;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s}
.pkvq-faq-q[aria-expanded="true"]::after{transform:rotate(-135deg)}
.pkvq-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.pkvq-faq-a p{padding:0 44px 26px 0;font-size:1rem;color:var(--ink)}
.pkvq-callout{background:var(--navy);border-radius:14px;padding:44px 48px;margin-top:8px}
.pkvq-callout p{font-family:Georgia,serif;font-size:1.5rem;line-height:1.4;color:#fff;font-style:italic}
.pkvq-callout .pkvq-bar{width:46px;height:3px;background:var(--frost);margin-bottom:22px}
.pkvq-move-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:var(--pk-gap-xl)}
.pkvq-move-row:last-child{margin-bottom:0}
.pkvq-move-row.pkvq-rev .pkvq-move-copy{order:2}
.pkvq-move-copy h3{margin:10px 0 12px}
.pkvq-shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid #d9e0ec;box-shadow:0 12px 34px rgba(30,48,116,0.10)}
.pkvq-shot img{display:block;width:100%;height:auto}
.pkvq-shot::before{content:"";position:absolute;top:0;left:0;width:46px;height:46px;border-top:3px solid var(--frost);border-left:3px solid var(--frost);border-top-left-radius:14px;z-index:2;pointer-events:none}
.pkvq-shot-ph{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1209/1000;background:var(--grey);border-radius:14px;padding:28px;margin:0}
.pkvq-shot-ph .pkvq-ph-k{display:block;font-family:'Lato',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:#8a97ad}
.pkvq-shot-ph .pkvq-ph-d{display:block;font-family:'Lato',sans-serif;font-size:0.98rem;line-height:1.45;color:#6b7890;margin-top:10px;max-width:100%;}
.pkvq-gpi{margin-top:56px;border:1px solid #d9e0ec;border-radius:14px;padding:36px 40px;background:#fff}
.pkvq-gpi-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.pkvq-gpi-stars{color:#F5B301;font-size:1.3rem;letter-spacing:3px}
.pkvq-gpi-product{font-family:'Lato',sans-serif;font-weight:700;color:#7b8190;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase}
.pkvq-gpi-quote{font-family:Georgia,serif;font-size:1.3rem;line-height:1.45;color:var(--navy);font-style:italic}
.pkvq-gpi-attr{font-family:'Lato',sans-serif;font-weight:700;color:var(--ink);font-size:0.95rem;margin-top:18px}
.pkvq-gpi-link{display:inline-block;margin-top:14px;font-weight:700;font-size:0.9rem;color:var(--cyan)}
.pkvq-gpi-disc{margin-top:22px;font-size:0.72rem;line-height:1.5;color:#9aa3b2}
.pkvq-proof-quote{display:flex;flex-direction:column;justify-content:center}
.pkvq-gpi-card{background:radial-gradient(130% 130% at 100% 0%, rgba(15,228,162,0.12) 0%, rgba(15,228,162,0) 52%), linear-gradient(157deg,#21346f 0%,#162253 100%);border-radius:16px;padding:40px;height:100%}
.pkvq-gpi-card .pkvq-gpi-quote{color:#fff}
.pkvq-gpi-card .pkvq-gpi-attr{color:#fff}
.pkvq-gpi-card .pkvq-gpi-product{color:#9fb0d8}
.pkvq-gpi-card .pkvq-gpi-link{color:var(--frost)}
.pkvq-gpi-card .pkvq-gpi-disc{color:rgba(255,255,255,0.72)}
.pkvq-keep{display:inline-block;background:var(--frost);color:#06342a;font-weight:700;font-size:0.82rem;padding:3px 13px;border-radius:999px}
.pkvq-safe::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--frost);margin-right:9px;vertical-align:middle}
.pkvq-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid #d9e0ec;box-shadow:0 12px 34px rgba(30,48,116,0.12);margin-bottom:26px;background:#0d1840}
.pkvq-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pkvq-shot{transition:transform .28s ease, box-shadow .28s ease}
.pkvq-shot:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(30,48,116,0.18)}
.pkvq-gpi-card{transition:transform .28s ease, box-shadow .28s ease}
.pkvq-gpi-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(15,24,64,0.32)}
.pkvq-clock{background:#fff;border:1px solid #d9e0ec;border-radius:14px;padding:32px 34px}
.pkvq-clock-label{font-family:'Lato',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.13em;text-transform:uppercase;color:#7b8190;margin-bottom:22px}
.pkvq-clock ul{list-style:none;margin:0;padding:0}
.pkvq-clock li{position:relative;padding-left:26px;padding-bottom:22px;border-left:2px solid #e3e9f2;margin-left:5px;font-size:0.98rem;line-height:1.5;color:var(--ink)}
.pkvq-clock li:last-child{padding-bottom:0;border-left-color:transparent}
.pkvq-clock li::before{content:"";position:absolute;left:-8px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px #fff}
.pkvq-clock li.pkvq-clock-end::before{background:var(--frost)}
.pkvq-clock-date{display:block;font-family:Georgia,serif;font-size:1.1rem;color:var(--navy);font-weight:700;margin-bottom:4px}
.pkv-quantum.js .pkvq-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.pkv-quantum.js .pkvq-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pkv-quantum.js .pkvq-reveal{opacity:1;transform:none;transition:none}}
@media (max-width:860px){
  .pkvq-section{padding:64px 0}
  .pkvq-hero{padding:var(--pk-sec-y-hero) 0 44px}
  .pkvq-grid-2,.pkvq-grid-3,.pkvq-grid-4{grid-template-columns:1fr;gap:32px}
  .pkvq-move-row{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
  .pkvq-move-row.pkvq-rev .pkvq-move-copy{order:0}
  .pkvq-gpi{padding:28px 24px}
  .pkvq-callout{padding:32px 26px}
  .pkvq-callout p,.pkvq-quote{font-size:1.25rem}
  .pkvq-trust-row{gap:28px}
  .pkvq-trust-row span{font-size:1.2rem}
}
.pkvq-shot-ph .pkvq-ph-k {
  position: relative;
  transition: transform 0.4s ease;
  transform-origin: center;
}

.pkvq-shot-ph .pkvq-ph-k img {
  display: block;
  width: 100%;
  height: auto;
}

.pkvq-shot-ph .pkvq-ph-k:hover {
  transform: scale(1.15);
  z-index: 2;        /* lifts the grown tile above its neighbors */
}

/* --------------------------------------------------------------------------
   1.10.68 - .pkenc : /products/pkencrypt, PORTED NOT REDESIGNED

   The FOURTH self-contained page system, and the first one that arrived written
   in THIS THEME'S OWN VOCABULARY. Michael re-authored the page on staging
   2026-08-13; it came as four base64 [fusion_code] blocks, one of them a 31.7 KB
   <style>, and its markup opens <div id="pkw"> using .sec, .wrap, .eyebrow,
   .btn, .h2, .lead, .reveal and .faq-item.

   THAT SHARED VOCABULARY IS WHY EVERY SELECTOR HERE IS PREFIXED #pkw.pkenc.
   The page reuses our names with RETUNED VALUES. Measured selector by selector
   against this file before anything was written: 55 collide with different
   declarations. A sample, page value first:

       .sec        padding 132px 0      against  60px 0
       .eyebrow    20px, cyan, 34px bar against  12.5px, frost, 7px dot
       .btn        padding 18px 32px    against  15px 26px
       .h2         clamp(32px,3.5vw,47px) against clamp(30px,3.5vw,46px)
       .lead       19.5px / 1.75 / 58ch against  20px / 1.7 / 56ch
       #pkw        --tx #41475A, line-height 1.8, --gut, --rule, --surf
                                        against  --tx #3D4457, 1.7, --gutter

   Unscoped, that sheet would have restyled all 57 live pages. Re-measured after
   the transform: ZERO of these 393 selectors is shared with the rest of the
   theme. The (1,1,0) specificity also means the page wins where it does
   redefine something, and the theme fills any gap it leaves.

   THE ROOT KEEPS id="pkw" AND GAINS class="pkenc". That is deliberate:
   components.js collects scopes with querySelectorAll('#pkw,.pkbc-page'), so
   .reveal and the FAQ accordion work with no JavaScript change. A .pkenc-page
   root would have needed that selector edited, and .reveal is opacity:0 until
   the observer adds .in - the exact fault that rendered three battle cards
   blank.

   IT BORROWS EXACTLY THREE CLASSES FROM THE THEME: fs-content-pane, framecol
   and en - the form pane, which is section 8's one deliberately unscoped
   component, so it still resolves under a scoped root. The page's own sheet
   defines 109 of the 112 classes its markup uses, which is what makes scoping
   it safe rather than merely tidy.

   FOUR THINGS WERE REMOVED, none of them a matter of taste:
     - 13 rules for .hdr / .nav-item / .nav-trigger / .burger / .mobile-panel,
       a complete site header. Verified dead first: every one of those classes
       appears ZERO times in the page's markup, so they were already orphaned
       upstream. Our theme renders the header.
     - .fusion-tb-footer.fusion-footer { margin-top:-20px !important }. An Avada
       override, in the theme replacing Avada. Third time this has turned up in
       a sheet from this author.
     - two --awb-* custom properties inside the .form-rev.no-fc override.
     - the Google Fonts @import, which cannot travel into the middle of this
       file - @import is only honoured at the top of a sheet. The page carries
       the same weights as <link> tags instead.

   .form-rev.no-fc WAS THE NEAR-MISS AND IS WORTH THE PARAGRAPH. Three of the
   sheet's selectors were unscoped, and one of them overrode the SHARED form
   pane: zero padding and color:#fff where the theme has 20px and #000. Shipped
   as authored it would have broken the form card on careers, contact, demo,
   share-pittsburgh and pkzip - five live pages, white text on white ground.
   It is scoped here like everything else. Any future sheet from this author
   gets the same check: list the selectors that do NOT start with the page's own
   root, and look at each one.

   --hdr-h IS OURS, NOT THE PROTOTYPE'S. Every use in this block reads
   var(--hdr-h, 81px), with a 73px variant under 1180px - the header height
   Michael developed against. It positions .snav's sticky top, .tform-col's
   sticky top, and scroll-margin-top on every section, and our header is
   --pk-h: 84px stepping to 68px at 480px. At 81px the sticky section nav sits
   3px under a header with z-index 999999 and gets clipped. --pk-h is declared
   ON .pk-header and therefore does not inherit down to #pkw, so var(--pk-h)
   here would resolve to nothing and take position:sticky with it - the value is
   restated at the top of the token block instead, and the 480px step is matched
   at the bottom of this one.
   -------------------------------------------------------------------------- */


/* ==========================================================
   PKWARE — PK Encrypt trial page (v4).
   Lead-gen register: white + tinted surfaces, two navy anchors,
   sticky trial form in the right rail, real figure system.
   Scoped under #pkw. Georgia (display) + Lato (body/UI) only.
   ========================================================== */
#pkw.pkenc *,#pkw.pkenc *::before,#pkw.pkenc *::after{box-sizing:border-box}
#pkw.pkenc{
  /* our header, not the prototype's 81px - .pk-header sets --pk-h:84px */
  --hdr-h:84px;--navy:#1E3074;--navy-2:#152357;--navy-3:#0E1A45;--cyan:#09BCEF;--cyan-700:#057FA3;--frost:#0FE4A2;--frost-deep:#0B6E4E;--coral:#F95557;--coral-d:#B02F31;
--tx:#41475A;--tx-2:#666E82;--tx-3:#8A93A6;--rule:#E2E9F3;--rule-2:#CFD9E8;--surf:#F2F7FC;--surf-2:#E7F0F9;
--serif:Georgia,"Times New Roman",serif;--sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--maxw:1300px;--gut:36px;font-family:var(--sans);color:var(--tx);background:#fff;font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;overflow-x:clip}
#pkw.pkenc h1,#pkw.pkenc h2,#pkw.pkenc h3,#pkw.pkenc h4,#pkw.pkenc .h1,#pkw.pkenc .h2,#pkw.pkenc .h3,#pkw.pkenc .faq-q,#pkw.pkenc .qq,#pkw.pkenc .pull{text-wrap:balance}
#pkw.pkenc p,#pkw.pkenc li,#pkw.pkenc figcaption,#pkw.pkenc .cap,#pkw.pkenc .prose,#pkw.pkenc .lead{text-wrap:pretty}
#pkw.pkenc h1,#pkw.pkenc h2,#pkw.pkenc h3{font-family:var(--serif);font-weight:400;color:var(--navy);margin:0;letter-spacing:-.014em}
#pkw.pkenc h4,#pkw.pkenc h5{font-family:var(--sans);margin:0;color:var(--navy)}
#pkw.pkenc p{margin:0}
#pkw.pkenc a{color:var(--cyan-700);text-decoration:none}
#pkw.pkenc a:hover{color:var(--navy)}
#pkw.pkenc img{max-width:100%;display:block}
#pkw.pkenc ul,#pkw.pkenc ol{margin:0;padding:0;list-style:none}
#pkw.pkenc button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;text-transform:none !important;}
#pkw.pkenc summary::-webkit-details-marker{display:none}
#pkw.pkenc sup{font-size:.64em}
#pkw.pkenc :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:5px}
#pkw.pkenc .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
#pkw.pkenc .sec{padding:var(--pk-sec-y) 0;background-color:#fff;position:relative}
#pkw.pkenc .sec.surf{background-color:var(--surf)}
#pkw.pkenc .sec.tight{padding:var(--pk-sec-y) 0}
/* dark anchor register */
#pkw.pkenc .dark{background-color:var(--navy-3);color:#C9D3EE;--tx:#C9D3EE;--tx-2:#A3AFD4;--tx-3:#8290BC;--rule:rgba(255,255,255,.13);--rule-2:rgba(255,255,255,.22);--surf:rgba(255,255,255,.05)}
#pkw.pkenc .dark h1,#pkw.pkenc .dark h2,#pkw.pkenc .dark h3,#pkw.pkenc .dark h4{color:#fff}
#pkw.pkenc .dark .eyebrow{color:var(--frost)}#pkw.pkenc .dark .eyebrow::before{background:var(--frost)}
#pkw.pkenc .dark a{color:var(--frost)}#pkw.pkenc .dark a:hover{color:#fff}
#pkw.pkenc .dark a.btn-green,#pkw.pkenc .dark a.btn-green:hover{color:#052A1F}
#pkw.pkenc .dark a.btn-cyan,#pkw.pkenc .dark a.btn-cyan:hover{color:#04222F}
#pkw.pkenc .dark a.btn-ghost{color:#fff}#pkw.pkenc .dark a.btn-ghost:hover{color:var(--navy)}
#pkw.pkenc .glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#pkw.pkenc .glow::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;right:-320px;top:-420px;background:radial-gradient(circle,rgba(9,188,239,.24),transparent 62%)}
#pkw.pkenc .glow::after{content:"";position:absolute;width:720px;height:720px;border-radius:50%;left:-300px;bottom:-380px;background:radial-gradient(circle,rgba(15,228,162,.14),transparent 64%)}
#pkw.pkenc .dark .wrap{position:relative;z-index:2}

/* ---------- type ---------- */
#pkw.pkenc .h1{font-size:clamp(38px,4.2vw,55px);line-height:1.06;max-width:19ch}
#pkw.pkenc .h2{font-size:clamp(32px,3.5vw,47px);line-height:1.12}
#pkw.pkenc .h3{font-size:clamp(22px,2.1vw,29px);line-height:1.24}
#pkw.pkenc .lead{font-size:19.5px;line-height:1.75;color:var(--tx-2);max-width:58ch}
#pkw.pkenc .prose{font-size:18.5px;line-height:1.82;color:var(--tx);max-width:64ch}
#pkw.pkenc .prose+.prose{margin-top:24px}
#pkw.pkenc .prose.muted{color:var(--tx-2)}
#pkw.pkenc .eyebrow{display:flex;align-items:center;gap:15px;font-weight:700;font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 26px}
#pkw.pkenc .eyebrow::before{content:"";width:34px;height:2px;background:var(--cyan);flex:none}
#pkw.pkenc .eyebrow.ink{color:var(--cyan-700)}#pkw.pkenc .eyebrow.ink::before{background:var(--cyan-700)}
#pkw.pkenc .micro{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--tx-3)}
#pkw.pkenc .cap{font-size:14px;line-height:1.65;color:var(--tx-3)}

/* ---------- buttons ---------- */
#pkw.pkenc .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;line-height:1;padding:18px 32px;border-radius:999px;border:1.5px solid transparent;transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;white-space:nowrap}
#pkw.pkenc .btn svg{width:15px;height:15px;transition:transform .22s}
#pkw.pkenc .btn:hover svg{transform:translateX(4px)}
#pkw.pkenc .btn-cyan{background:var(--cyan);color:#04222F}
#pkw.pkenc .btn-cyan:hover{background:var(--navy);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(30,48,116,.5)}
#pkw.pkenc .btn-out{border-color:var(--rule-2);color:var(--navy)}
#pkw.pkenc .btn-out:hover{border-color:var(--navy);background:var(--navy);color:#fff;transform:translateY(-2px)}
#pkw.pkenc .btn-green{background:var(--frost);color:#052A1F}
#pkw.pkenc .btn-green:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(15,228,162,.6)}
#pkw.pkenc .btn-ghost{border-color:rgba(255,255,255,.36);color:#fff}
#pkw.pkenc .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
#pkw.pkenc .btn-sm{padding:13px 22px;font-size:14.5px}
#pkw.pkenc .tlink{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;color:var(--cyan-700)}
#pkw.pkenc .tlink svg{width:14px;height:14px;transition:transform .22s}
#pkw.pkenc .tlink:hover{color:var(--navy)}#pkw.pkenc .tlink:hover svg{transform:translateX(5px)}
#pkw.pkenc .dark .tlink{color:var(--frost)}#pkw.pkenc .dark .tlink:hover{color:#fff}

/* ---------- top rule + header ---------- */
#pkw.pkenc .topbar{height:5px;background:linear-gradient(90deg,var(--cyan),var(--frost))}
#pkw.pkenc .navbar{max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);display:flex;align-items:center;gap:8px}
#pkw.pkenc .logo{height:30px;width:auto;flex:none;margin-right:16px}
#pkw.pkenc .nav{display:flex;align-items:center;gap:2px}
#pkw.pkenc .nav-search{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;color:var(--navy)}
#pkw.pkenc .nav-search:hover{color:var(--cyan)}
#pkw.pkenc .nav-search svg{width:19px;height:19px}
#pkw.pkenc .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
#pkw.pkenc .nav-right .btn{padding:15px 28px;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase}
#pkw.pkenc .mega{position:absolute;top:calc(100% + 12px);left:-8px;min-width:610px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px;box-shadow:0 38px 76px -36px rgba(30,48,116,.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,transform .22s,visibility .22s;z-index:70}
#pkw.pkenc .mega.compact{min-width:300px}
#pkw.pkenc .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
#pkw.pkenc .mega-head{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin:0 0 10px;padding:0 10px}
#pkw.pkenc .mega-link{display:flex;gap:12px;padding:11px 10px;border-radius:10px;transition:background .18s;align-items:flex-start;color:inherit}
#pkw.pkenc .mega-link:hover{background:var(--surf)}
#pkw.pkenc .mega-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surf-2);color:var(--cyan-700)}
#pkw.pkenc .mega-ico svg{width:18px;height:18px}
#pkw.pkenc .mega-link .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--navy);line-height:1.4}
#pkw.pkenc .mega-link .d{display:block;font-size:13px;color:var(--tx-2);line-height:1.5;margin-top:2px}
#pkw.pkenc .mega-tag{font-weight:700;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:var(--frost-deep);background:rgba(15,228,162,.15)}
#pkw.pkenc .mega-link[aria-current] .t{color:var(--cyan-700)}
#pkw.pkenc .mega-num{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--serif);font-size:14px;color:var(--navy);background:var(--surf-2)}

/* ---------- breadcrumb + hero ---------- */
#pkw.pkenc .crumb{display:flex;gap:9px;align-items:center;font-size:14.5px;color:var(--navy);padding:26px 0 0;flex-wrap:wrap}
#pkw.pkenc .crumb span{color:var(--tx-3)}
#pkw.pkenc .crumb b{font-weight:400;color:var(--cyan)}
#pkw.pkenc .hero{padding:var(--pk-sec-y-hero) 0;position:relative;overflow:visible}
#pkw.pkenc .hero::before{content:"";position:absolute;z-index:0;width:1100px;height:900px;border-radius:50%;right:-420px;top:-380px;background:radial-gradient(circle,rgba(9,188,239,.13),transparent 62%);pointer-events:none}
#pkw.pkenc .hero .wrap{position:relative;z-index:2}
#pkw.pkenc .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,424px);gap:80px;align-items:start;padding-top:0px}
#pkw.pkenc .hero .lead{margin:30px 0 0;max-width:56ch}
#pkw.pkenc .hstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;border-top:1px solid var(--rule);padding-top:28px}
#pkw.pkenc .hstats .hs{padding-right:26px}
#pkw.pkenc .hstats .hs+.hs{padding-left:28px;border-left:1px solid var(--rule)}
#pkw.pkenc .hstats .n{font-family:var(--serif);font-size:27px;line-height:1;color:var(--navy)}
#pkw.pkenc .hstats .n{font-size:25px}
#pkw.pkenc .hstats .hs{padding-right:20px}
#pkw.pkenc .hstats .hs+.hs{padding-left:22px}
#pkw.pkenc .hstats .l{font-size:13.5px;line-height:1.5;color:var(--tx-3);margin-top:9px;max-width:20ch}
#pkw.pkenc .trusted{margin-top:var(--pk-gap-xl);padding:38px 0 0;border-top:1px solid var(--rule)}
#pkw.pkenc .trusted .micro{display:block;margin-bottom:26px}
#pkw.pkenc .logorow{display:flex;align-items:center;gap:56px;flex-wrap:wrap}
#pkw.pkenc .logorow img{height:28px;width:auto;filter:brightness(0) saturate(0);opacity:.36;transition:opacity .25s}
#pkw.pkenc .logorow img:hover{opacity:.6}
#pkw.pkenc .trusted .lstrip{margin-top:26px;font-size:15.5px;line-height:1.7;color:var(--tx-2);max-width:52ch}

/* ---------- trial form ---------- */
#pkw.pkenc .tform-col{position:sticky;top:calc(var(--hdr-h,81px) + 22px)}
#pkw.pkenc .tform{background:#fff;border:1px solid var(--rule-2);border-radius:14px;overflow:hidden;box-shadow:0 44px 84px -48px rgba(30,48,116,.45)}
#pkw.pkenc .tform-top{height:4px;background:linear-gradient(90deg,var(--cyan),var(--frost))}
#pkw.pkenc .tform-in{padding:32px 32px 30px}
#pkw.pkenc .tform h2{font-size:29px;line-height:1.2}
#pkw.pkenc .tform .fsub{margin-top:12px;font-size:15px;line-height:1.6;color:var(--tx-2)}
#pkw.pkenc .tform form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
#pkw.pkenc .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#pkw.pkenc .fld{display:flex;flex-direction:column;gap:7px}
#pkw.pkenc .fld label{font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}
#pkw.pkenc .fld input,#pkw.pkenc .fld select{font-family:inherit;font-size:16px;color:var(--navy);background:var(--surf);border:1px solid var(--rule-2);border-radius:7px;padding:13px 14px;width:100%;transition:border-color .2s,background .2s}
#pkw.pkenc .fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3074' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:14px;padding-right:38px}
#pkw.pkenc .fld input:focus,#pkw.pkenc .fld select:focus{border-color:var(--cyan);background:#fff;outline:none}
#pkw.pkenc .tform .btn{width:100%;justify-content:center;margin-top:24px}
#pkw.pkenc .tform .fmicro{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--tx-3)}
#pkw.pkenc .tform .fmicro b{color:var(--navy);font-weight:700}
#pkw.pkenc .optgrp{padding:20px;border-radius:9px;background:var(--surf-2);border:1px solid var(--rule-2);display:flex;flex-direction:column;gap:14px}
#pkw.pkenc .optlead{font-size:14px;line-height:1.55;color:var(--tx-2)}
#pkw.pkenc .optlead b{color:var(--navy);font-weight:700;display:block}
#pkw.pkenc .optdiv{height:1px;background:var(--rule-2);margin:6px 0 2px}
#pkw.pkenc .opthelp{font-size:13px;line-height:1.55;color:var(--tx-3)}
#pkw.pkenc .optskip{align-self:flex-start;background:none;border:0;padding:0;font-family:inherit;font-size:13.5px;color:var(--tx-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .18s}
#pkw.pkenc .optskip:hover{color:var(--navy)}
#pkw.pkenc .fconsent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 20px}
#pkw.pkenc .fconsent input{width:16px;height:16px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--navy)}
#pkw.pkenc .fconsent label{font-size:12.5px;line-height:1.55;color:var(--tx-3);letter-spacing:0}
#pkw.pkenc .fbrief{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--tx-3)}
#pkw.pkenc .fbrief a{color:var(--tx-3);text-decoration:underline;text-underline-offset:3px}
#pkw.pkenc .fbrief a:hover{color:var(--navy)}

/* ---------- section nav ---------- */
#pkw.pkenc .snav{position:sticky;top:var(--hdr-h,81px);z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#pkw.pkenc{scroll-behavior:smooth}
#pkw.pkenc .sec,#pkw.pkenc .cta{scroll-margin-top:calc(var(--hdr-h,81px) + 60px)}
#pkw.pkenc .snav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:34px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
#pkw.pkenc .snav-lbl{flex:none;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);padding-right:4px}
#pkw.pkenc .snav-in::-webkit-scrollbar{display:none}
#pkw.pkenc .snav a{padding:17px 0;font-weight:700;font-size:14px;color:var(--tx-2);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
#pkw.pkenc .snav a:hover{color:var(--navy)}
#pkw.pkenc .snav a.on{color:var(--navy);border-bottom-color:var(--cyan)}

/* ---------- editorial grid ---------- */
#pkw.pkenc .ed{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);gap:34px 100px;align-items:start}
#pkw.pkenc .ed-h{position:sticky;top:154px}
#pkw.pkenc .ed-h .h2{max-width:18ch}
#pkw.pkenc .ed-h .kick{margin-top:26px;font-size:17px;line-height:1.7;color:var(--tx-2);max-width:34ch}

/* ---------- figure system ---------- */
#pkw.pkenc .fig{margin-top:var(--pk-gap-xl)}
#pkw.pkenc .fig-head{display:flex;align-items:baseline;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:0}
#pkw.pkenc .fig-head .n{font-weight:700;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--cyan);flex:none}
#pkw.pkenc .fig-head .t{font-family:var(--serif);font-size:20px;color:var(--navy)}
#pkw.pkenc .dark .fig-head .t{color:#fff}
#pkw.pkenc .fig-head .legend{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
#pkw.pkenc .fig-head .legend span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--tx-3);white-space:nowrap}
#pkw.pkenc .fig-head .legend i{width:9px;height:9px;border-radius:50%;flex:none}
#pkw.pkenc .fig-body{padding:34px 0 0}
#pkw.pkenc .fig svg{width:100%;height:auto;display:block}
#pkw.pkenc .fig figcaption{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px;line-height:1.65;color:var(--tx-3);max-width:86ch}

/* ---------- quad cards ---------- */
#pkw.pkenc .quad{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--pk-gap-xl);border-top:1px solid var(--rule)}
#pkw.pkenc .quad .q{padding:40px 46px 40px 0;border-bottom:1px solid var(--rule)}
#pkw.pkenc .quad .q:nth-child(even){padding-left:46px;border-left:1px solid var(--rule)}
#pkw.pkenc .quad .q:nth-last-child(-n+2){border-bottom:0}
#pkw.pkenc .quad .num{font-family:var(--serif);font-size:15px;color:var(--cyan);display:block;margin-bottom:14px}
#pkw.pkenc .quad h3{font-size:24px;line-height:1.28;margin-bottom:14px;max-width:24ch}
#pkw.pkenc .quad p{font-size:17px;line-height:1.75;color:var(--tx-2);max-width:52ch}

/* ---------- consequence band ---------- */
#pkw.pkenc .conseq{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--pk-gap-xl);border-top:2px solid var(--navy)}
#pkw.pkenc .conseq>div{padding:40px 48px 0 0}
#pkw.pkenc .conseq>div+div{padding-left:48px;border-left:1px solid var(--rule)}
#pkw.pkenc .costnum{font-family:var(--serif);font-size:clamp(42px,4.8vw,62px);line-height:1;color:var(--navy);margin-bottom:18px}

/* ---------- dispatch matrix ---------- */
#pkw.pkenc .dmx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:0}
#pkw.pkenc .dmx-h{padding:0 0 18px;font-family:var(--serif);font-size:23px;color:#fff;border-bottom:1px solid var(--rule-2)}
#pkw.pkenc .dmx-h.plat{padding-left:26px}
#pkw.pkenc .dmx-h em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-top:8px}
#pkw.pkenc .dmx-r{padding:24px 26px 24px 0;font-weight:700;font-size:14.5px;line-height:1.5;color:#93A0C8;border-bottom:1px solid var(--rule)}
#pkw.pkenc .dmx-c{padding:24px 26px;font-size:15.5px;line-height:1.55;color:#E4E9F8;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule)}
#pkw.pkenc .dmx-c.hw{color:var(--frost)}
#pkw.pkenc .dmx>div:nth-last-child(-n+3){border-bottom:0}
#pkw.pkenc .stk-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);font-size:15px;color:var(--tx-2)}
#pkw.pkenc .stk-foot b{color:#fff}
#pkw.pkenc .platprose{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:var(--pk-gap-xl);padding-top:52px;border-top:1px solid var(--rule)}
#pkw.pkenc .platprose .pl{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
#pkw.pkenc .platprose p{font-size:17px;line-height:1.8;color:var(--tx)}
#pkw.pkenc .closer{margin-top:56px;padding-top:30px;border-top:1px solid var(--rule);font-size:17.5px;line-height:1.75;color:var(--tx-2);max-width:70ch}

/* ---------- keep / replace lanes ---------- */
#pkw.pkenc .lane{display:grid;grid-template-columns:190px minmax(0,1fr) 132px;gap:30px;align-items:center;padding:32px 0;border-top:1px solid var(--rule)}
#pkw.pkenc .lane:last-of-type{border-bottom:1px solid var(--rule)}
#pkw.pkenc .lane .alg{font-family:var(--serif);font-size:29px;line-height:1.12}
#pkw.pkenc .lane .alg em{display:block;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-top:8px}
#pkw.pkenc .lane .steps-in{display:flex;gap:10px;flex-wrap:wrap}
#pkw.pkenc .lane .steps-in span{font-size:14.5px;color:var(--tx-2);padding:10px 18px;border-radius:999px;background:var(--surf);border:1px solid var(--rule)}
#pkw.pkenc .lane .verdict{font-weight:900;font-size:13px;letter-spacing:.15em;text-transform:uppercase;text-align:center;padding:13px 8px;border-radius:999px}
#pkw.pkenc .lane.keep .alg{color:var(--frost)}
#pkw.pkenc .lane.keep .verdict{color:#052A1F;background:var(--frost)}
#pkw.pkenc .lane.repl .alg{color:#FF8E90}
#pkw.pkenc .lane.repl .verdict{color:#fff;background:rgba(249,85,87,.22);border:1px solid rgba(249,85,87,.5)}
#pkw.pkenc .callout{margin-top:var(--pk-gap-xl);padding:40px 44px;border-radius:10px;background:var(--surf);border-left:3px solid var(--frost)}
#pkw.pkenc .callout p{font-size:18.5px;line-height:1.75;color:var(--tx);max-width:64ch}
#pkw.pkenc .callout .tlink{margin-top:26px}
#pkw.pkenc .dark .callout{background:rgba(255,255,255,.05)}
#pkw.pkenc .lineage{margin-top:56px;padding-top:44px;border-top:1px solid var(--rule)}
#pkw.pkenc .lineage .prose{max-width:70ch}
#pkw.pkenc .qgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 76px;align-items:start}
#pkw.pkenc .qgrid .h2{max-width:20ch}
#pkw.pkenc .qgrid .prose{max-width:50ch}
#pkw.pkenc .qgrid .fig{margin-top:0}
#pkw.pkenc .qgrid .fig-body{padding-top:20px}
#pkw.pkenc .qgrid .lane{grid-template-columns:132px minmax(0,1fr) 104px;gap:20px;padding:26px 0}
#pkw.pkenc .qgrid .lane .alg{font-size:25px}
#pkw.pkenc .qgrid .lane .alg em{font-size:10.5px}
#pkw.pkenc .qgrid .lane .steps-in{gap:8px}
#pkw.pkenc .qgrid .lane .steps-in span{font-size:13.5px;padding:8px 14px}
#pkw.pkenc .qgrid .lane .verdict{font-size:11.5px;padding:11px 6px}
#pkw.pkenc .inline-cta{margin-top:44px}

/* ---------- code compare ---------- */
#pkw.pkenc .codegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#pkw.pkenc .codecard{border-radius:10px;overflow:hidden;background:var(--navy-3);box-shadow:0 34px 68px -40px rgba(11,17,48,.6)}
#pkw.pkenc .codecard .ch{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12.5px;font-weight:700;letter-spacing:.05em;color:#93A0C8}
#pkw.pkenc .codecard .ch i{width:8px;height:8px;border-radius:50%;flex:none;background:#7A85AC}
#pkw.pkenc .codecard.on{box-shadow:0 34px 68px -36px rgba(9,188,239,.45)}
#pkw.pkenc .codecard.on .ch{color:#fff}
#pkw.pkenc .codecard.on .ch i{background:var(--frost)}
#pkw.pkenc .codecard pre{margin:0;padding:24px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.9;color:#D6DDF5;overflow-x:auto}
#pkw.pkenc .codecard pre em{font-style:normal;color:#04222F;background:var(--cyan);padding:1px 6px;border-radius:3px}
#pkw.pkenc .codecard pre s{text-decoration:none;color:#616A90}

/* 1.10.69 - THE CODE CARDS WERE WASHED OUT, AND THE CAUSE WAS A BARE ELEMENT RULE
   IN THIS THEME, NOT ANYTHING IN THE PORT.

   Section 4's reset styles `pre` UNSCOPED:
       pre { background-color: var(--pk-color-bg-alt); border-radius: var(--pk-radius-md); ... }
   and --pk-color-bg-alt resolves to var(--pk-grey), a light grey.

   This page's own sheet sets a pre COLOUR - #D6DDF5, deliberately light - and no
   background, because on staging nothing painted `pre` and it inherited the dark
   .codecard behind it. Under this theme the light text landed on light grey and the
   JCL was effectively invisible. The two rules are byte-identical on both sides; the
   difference is entirely a theme rule that staging does not have.

   Reset for this page only. The theme's `pre` default is correct for ordinary
   content, and no other fragment contains a <pre> - checked, 2 of 2 are here.

   THE GENERAL TRAP, worth more than the fix: keeping id="pkw" on a ported page means
   every BARE element rule in sections 4 and 5 still applies to it. Specificity
   protects the properties the page DOES set and nothing else. So for a ported sheet,
   diff the theme's bare element rules against the elements the page uses, and look
   for properties the page never declares - that is the whole failure class, and
   background is the one that shows. */
#pkw.pkenc .codecard pre{background:none;border-radius:0}

/* ---------- steps / ordered lists ---------- */
#pkw.pkenc .steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--pk-gap-xl);border-top:1px solid var(--rule)}
#pkw.pkenc .steps .step{padding:36px 38px 10px 0}
#pkw.pkenc .steps .step+.step{padding-left:38px;border-left:1px solid var(--rule)}
#pkw.pkenc .steps .n{font-family:var(--serif);font-size:15px;color:var(--cyan);display:block;margin-bottom:14px}
#pkw.pkenc .steps h4{font-weight:900;font-size:18px;margin-bottom:10px}
#pkw.pkenc .steps p{font-size:16.5px;line-height:1.72;color:var(--tx-2)}
#pkw.pkenc .proveit{margin-top:var(--pk-gap-xl);padding-top:var(--pk-sec-y);border-top:2px solid var(--navy)}
#pkw.pkenc .seq{margin-top:var(--pk-gap-xl);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
#pkw.pkenc .seq .sq a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
#pkw.pkenc .seq .sq{padding:38px 40px 34px 0}
#pkw.pkenc .seq .sq+.sq{padding-left:40px;border-left:1px solid var(--rule)}
#pkw.pkenc .seq .n{font-family:var(--serif);font-size:38px;line-height:1;color:var(--cyan);display:block;margin-bottom:20px}
#pkw.pkenc .seq h4{font-weight:900;font-size:17.5px;margin-bottom:10px}
#pkw.pkenc .seq p{font-size:16px;line-height:1.7;color:var(--tx-2)}
#pkw.pkenc .seq code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--navy);background:var(--surf-2);padding:1px 6px;border-radius:4px}
#pkw.pkenc .intl{margin-top:52px;padding:26px 30px;border-radius:8px;background:var(--surf-2);font-size:16px;line-height:1.7;color:var(--tx);max-width:78ch}
#pkw.pkenc .intl b{color:var(--navy)}

/* ---------- routing ---------- */
#pkw.pkenc .routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
#pkw.pkenc .rcard{padding:34px;border-radius:12px;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--rule-2);transition:transform .26s,box-shadow .26s}
#pkw.pkenc .rcard:nth-child(1){border-top-color:var(--cyan)}
#pkw.pkenc .rcard:nth-child(2){border-top-color:var(--frost)}
#pkw.pkenc .rcard:nth-child(3){border-top-color:var(--navy)}
#pkw.pkenc .rcard:hover{transform:translateY(-4px);box-shadow:0 26px 52px -30px rgba(30,48,116,.34)}
#pkw.pkenc .rcard .qq{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--navy);min-height:3.2em}
#pkw.pkenc .rcard .aa{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);font-size:16px;line-height:1.7;color:var(--tx-2)}
#pkw.pkenc .rcard .aa b{color:var(--navy)}
#pkw.pkenc .footnote{margin-top:40px;font-size:14.5px;line-height:1.75;color:var(--tx-3);max-width:86ch}

/* ---------- FAQ ---------- */
#pkw.pkenc .faq-head{text-align:center;margin-bottom:48px}
#pkw.pkenc .faq-head .eyebrow{justify-content:center}
#pkw.pkenc .faq{max-width:880px;margin:0 auto;border-top:1px solid var(--rule)}
#pkw.pkenc .faq-item{border-bottom:1px solid var(--rule)}
#pkw.pkenc .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:28px 2px;text-align:left;font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--navy)}
#pkw.pkenc .faq-q .ic{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;color:var(--cyan-700);transition:transform .3s,background .3s,border-color .3s,color .3s}
#pkw.pkenc .faq-q .ic svg{width:13px;height:13px}
#pkw.pkenc .faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--frost);border-color:var(--frost);color:#052A1F}
#pkw.pkenc .faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
#pkw.pkenc .faq-a p{padding:0 2px 30px;font-size:17px;line-height:1.75;color:var(--tx-2);max-width:74ch}

/* ---------- CTA + footer ---------- */
#pkw.pkenc .cta{background-color:var(--navy);color:#fff;padding:var(--pk-sec-y-cta) 0;position:relative;overflow:hidden}
#pkw.pkenc .cta::after{content:"";position:absolute;width:880px;height:880px;border-radius:50%;right:-300px;top:-380px;background:radial-gradient(circle,rgba(9,188,239,.34),transparent 62%);pointer-events:none}
#pkw.pkenc .cta .wrap{position:relative;z-index:2;max-width:960px}
#pkw.pkenc .cta h2{color:#fff;max-width:20ch}
#pkw.pkenc .cta .eyebrow{color:var(--frost)}#pkw.pkenc .cta .eyebrow::before{background:var(--frost)}
#pkw.pkenc .cta p{font-size:19.5px;line-height:1.72;color:#C6D0EC;max-width:54ch;margin:24px 0 40px}
#pkw.pkenc .cta .btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
#pkw.pkenc .cta .tl-note{margin-top:36px;font-size:14.5px;color:#8E9BC4}
#pkw.pkenc .footer{background-color:#0B1130;padding:var(--pk-sec-y) 0 34px;color:#AEB8DC}
#pkw.pkenc .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:46px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)}
#pkw.pkenc .foot-top .logo{height:28px;margin-bottom:20px}
#pkw.pkenc .foot-top .tag{font-family:var(--serif);font-size:18px;line-height:1.5;color:#AEB8DC;max-width:26ch}
#pkw.pkenc .foot-col h5{font-weight:700;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#7A85AC;margin-bottom:16px}
#pkw.pkenc .foot-col a{display:block;font-size:15px;color:#AEB8DC;padding:7px 0}
#pkw.pkenc .foot-col a:hover{color:#fff}
#pkw.pkenc .foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:13.5px;color:#7A85AC}
#pkw.pkenc .foot-bot a{color:#7A85AC}#pkw.pkenc .foot-bot a:hover{color:#AEB8DC}

/* ---------- motion ---------- */
#pkw.pkenc .reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
#pkw.pkenc .reveal.in{opacity:1;transform:none}
#pkw.pkenc .rise{opacity:0;transform:translateY(18px);animation:rise .85s cubic-bezier(.2,.6,.2,1) forwards}
#pkw.pkenc .rise.d1{animation-delay:.04s}#pkw.pkenc .rise.d2{animation-delay:.14s}#pkw.pkenc .rise.d3{animation-delay:.26s}#pkw.pkenc .rise.d4{animation-delay:.38s}#pkw.pkenc .rise.d5{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  #pkw.pkenc .nav,#pkw.pkenc .nav-search,#pkw.pkenc .nav-right{display:none}
  #pkw.pkenc .hero-grid{grid-template-columns:1fr;gap:0}
  #pkw.pkenc .hero-copy{display:contents}
  #pkw.pkenc .hero-copy>.eyebrow{order:1}
  #pkw.pkenc .hero-copy>.h1{order:2}
  #pkw.pkenc .hero-copy>.lead{order:3}
  #pkw.pkenc .tform-col{order:4;margin-top:44px}
  #pkw.pkenc .hero-copy>.hstats{order:5}
  #pkw.pkenc .hero-copy>.trusted{order:6}
  #pkw.pkenc .tform-col{position:static;max-width:520px}
  #pkw.pkenc .ed{grid-template-columns:1fr;gap:30px}
  #pkw.pkenc .ed-h{position:static}
  #pkw.pkenc .ed-h .h2{max-width:26ch}
  #pkw.pkenc .snav{top:var(--hdr-h,73px)}
  #pkw.pkenc .dmx{grid-template-columns:1fr}
  #pkw.pkenc .dmx-h{display:none}
  #pkw.pkenc .dmx-r{padding:26px 0 4px;border-bottom:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
  #pkw.pkenc .dmx-c{padding:10px 0 10px 16px;border-left:2px solid var(--rule-2);border-bottom:0;font-size:15px}
  #pkw.pkenc .dmx-c::before{content:attr(data-plat);display:block;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#93A0C8;margin-bottom:4px}
  #pkw.pkenc .dmx-c.hw{border-left-color:rgba(15,228,162,.5)}
  #pkw.pkenc .qgrid{grid-template-columns:1fr;gap:34px}
  #pkw.pkenc .routes{grid-template-columns:1fr}
  #pkw.pkenc .rcard .qq{min-height:0}
  #pkw.pkenc .seq{grid-template-columns:1fr}
  #pkw.pkenc .seq .sq,#pkw.pkenc .seq .sq+.sq{padding:30px 0;border-left:0;border-top:1px solid var(--rule)}
  #pkw.pkenc .seq .sq:first-child{border-top:0}
}
@media(max-width:860px){
  #pkw.pkenc{font-size:17px}
  #pkw.pkenc .sec{padding:var(--pk-sec-y) 0}
  #pkw.pkenc .sec.tight{padding:var(--pk-sec-y) 0}
  #pkw.pkenc .trusted{margin-top:52px}
  #pkw.pkenc .logorow{gap:38px}
  #pkw.pkenc .steps,#pkw.pkenc .codegrid,#pkw.pkenc .quad,#pkw.pkenc .platprose,#pkw.pkenc .seq{grid-template-columns:1fr;gap:0}
  #pkw.pkenc .quad .q,#pkw.pkenc .quad .q:nth-child(even){padding:32px 0;border-left:0;border-bottom:1px solid var(--rule)}
  #pkw.pkenc .platprose{gap:38px;display:flex;flex-direction:column}
  #pkw.pkenc .hstats{grid-template-columns:1fr;gap:22px}
  #pkw.pkenc .hstats .hs+.hs{padding-left:0;border-left:0}
  #pkw.pkenc .conseq{grid-template-columns:1fr}
  #pkw.pkenc .conseq>div{padding:32px 0 0}
  #pkw.pkenc .conseq>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  #pkw.pkenc .steps .step+.step{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  #pkw.pkenc .steps .step{padding-right:0}
  #pkw.pkenc .seq .sq,#pkw.pkenc .seq .sq+.sq{padding:30px 0;border-left:0;border-top:1px solid var(--rule)}
  #pkw.pkenc .seq .sq:first-child{border-top:0}
  #pkw.pkenc .lane{grid-template-columns:1fr;gap:18px}
  #pkw.pkenc .qgrid .lane{grid-template-columns:1fr}
  #pkw.pkenc .lane .verdict{justify-self:start;padding:12px 28px}
  #pkw.pkenc .bignum{grid-template-columns:1fr;gap:16px}
  #pkw.pkenc .fig-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #pkw.pkenc .fig-body>svg{min-width:720px}
  #pkw.pkenc .snav-lbl{display:none}
  #pkw.pkenc .fig-head{flex-wrap:wrap;gap:10px}
  #pkw.pkenc .fig-head .legend{margin-left:0;width:100%}
  #pkw.pkenc .frow{grid-template-columns:1fr}
  #pkw.pkenc .tform-in{padding:26px 22px 24px}
}
@media(prefers-reduced-motion:reduce){
  #pkw.pkenc *{animation:none!important;transition:none!important}
  #pkw.pkenc .reveal,#pkw.pkenc .rise{opacity:1!important;transform:none!important}
}
/* Trial form reveal, toggled by ?clsid=true; message chosen by ?tid */
#pkw.pkenc .thanks-panel{display:none}
#pkw.pkenc.is-submitted .tform:not(.thanks-panel){display:none}
#pkw.pkenc.is-submitted .thanks-panel{display:block}
#pkw.pkenc .thanks-msg{display:none}
#pkw.pkenc.tid-ibmi .thanks-msg.msg-ibmi{display:block}
#pkw.pkenc.tid-zos .thanks-msg.msg-zos{display:block}
#pkw.pkenc.tid-error .thanks-msg.msg-error{display:block}
#pkw.pkenc .form-rev.no-fc{
    margin-bottom: 0px;
    color: #ffffff;
    overflow: hidden;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
#pkw.pkenc select#field_gwivc332{
    min-height: 40px;
}


/* --hdr-h tracks .pk-header's own 480px step down to 68px. */
@media (max-width:480px){ #pkw.pkenc{ --hdr-h:68px } }

/* --------------------------------------------------------------------------
   1.10.70 - PEOPLE CARDS AND THE BIO DIALOG, for /company/leadership

   Staging puts each of the 14 people in an Avada .fusion-modal with a jQuery
   hover reveal on the card. Bob: "I don't care about the Hover, I care that the
   information is there in the new style", and he chose a real dialog over an
   accordion: "A real modal, built properly."

   IT IS A NATIVE <dialog>, WHICH IS THE WHOLE REASON THIS IS SMALL. showModal()
   supplies the focus trap, Escape-to-close, the inert background and ::backdrop
   for free - all four of the things that make a hand-rolled modal a liability.
   There is no focus-restore code, no keydown handler and no aria-modal here
   because the platform already does them correctly.

   .person IS .card AS A BUTTON, not a new card. It sits in .grid-3 like every
   other card on the site, so it inherits the 30px padding and the full-bleed
   image treatment; aspect-ratio pins the 520x600 headshots to one shape so a
   row of three cannot go ragged. The button reset in section 5 already handles
   background, border, colour, cursor and font-family - only width, alignment
   and the hover lift are added.

   SCROLL LOCK IS SET FROM JAVASCRIPT, NOT CSS, on purpose. The obvious
   implementation is body.something{overflow:hidden}, but body is outside #pkw
   and that would be a new UNSCOPED rule - the exact class of thing that broke
   five form pages earlier in this run. components.js sets and clears
   body.style.overflow instead, so this block stays entirely inside #pkw.
   -------------------------------------------------------------------------- */

/* ---------- the card ---------- */
#pkw .person{width:100%;display:block;text-align:left;font-family:inherit;color:inherit}
#pkw .person > img{aspect-ratio:13 / 15;object-fit:cover;object-position:top center}
#pkw .person:hover,#pkw .person:focus-visible{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--card-shadow)}
#pkw .person h4{margin-bottom:6px}
#pkw .person .role{color:var(--tx-2);font-size:15.5px;line-height:1.5}
#pkw .person .more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--eb)}
#pkw .person svg{width:15px;height:15px}

/* ---------- .people-grid - six across ----------------------------------------
   1.10.71. Bob, 2026-08-14, comparing staging's dense 5-across grid against our
   3-across: "Can we please make development 6 across, instead of 3 across. If you
   have to create new classes or whatever, please do so."

   IT RIDES ON .grid-3, exactly as .photo-grid does - use them together:
   <div class="grid-3 people-grid">. Two reasons, and the second is the one that
   matters operationally:

   1. It inherits a working card as the baseline - the padding, the full-bleed
      image treatment and the h4 margin - so this block only states what differs.
   2. IT DEGRADES TO TODAY'S PAGE. The content and the stylesheet travel
      separately here: page content goes out over the REST API and style.css is
      FTPed by hand, so there is always a window where the new markup is live
      against the old CSS. A bare <div class="people-grid"> in that window has no
      display:grid at all, so fourteen buttons stack full-width - dramatically
      worse than what it replaced. Riding on .grid-3 means the window looks like
      the current 3-across page instead of a broken one.

   WHY NOT A GENERIC .grid-6. Because the column count and the card sizing are one
   decision, not two. Six columns of 1300px content is a 202px card, and .card's
   inherited 30px padding leaves 142px of content - too narrow for "Vice President
   of Product Management", and marginal even for "Spencer Kupferman" at h4's 18px.
   A .grid-6 that only set columns would hand every future caller a broken card.
   Named for its content, like .persona-grid and .pub-grid.

   THE h4 IS RESTATED FOR A SPECIFICITY REASON WORTH NAMING. #pkw .grid-3 .card>h4
   (1 id, 2 classes, 1 element) outranks #pkw .person h4 (1 id, 1 class, 1
   element), so the 6px set above has never actually applied - these headings have
   always used the grid's 10px. That is stated explicitly here rather than left to
   a cascade nobody had noticed.

   EVERY OVERRIDE BELOW WINS ON SOURCE ORDER, NOT SPECIFICITY. Each pair
   (.grid-3 X / .people-grid X) is identical in specificity, and media queries add
   none - so this block working at all depends on it staying BELOW the responsive
   section around line 2490. Do not move it up the file.

   THE LADDER STOPS AT TWO COLUMNS, NOT ONE. .grid-3 collapses to a single column
   at 560px, which for a 13/15 headshot is one photograph filling the viewport and
   fourteen screens of scrolling. Two columns of ~150px is still a legible face and
   keeps the block scannable, which is the whole job of these cards. 1240px is
   reused as the first step because it is already this file's wide breakpoint.
   -------------------------------------------------------------------------- */
#pkw .people-grid{grid-template-columns:repeat(5,1fr)}
#pkw .people-grid .card{--card-pad:16px}
#pkw .people-grid .card>img{margin-bottom:14px}
#pkw .people-grid .person>h4{font-size:16.5px;line-height:1.25;margin-bottom:4px}
#pkw .people-grid .person .role{font-size:13px;line-height:1.4}
#pkw .people-grid .person .more{margin-top:11px;font-size:12.5px;gap:6px}
#pkw .people-grid .person svg{width:13px;height:13px}

/* THREE STATES, 2026-08-20. Bob: "Can we default this to 5 across on desktop, 4 across on
   tablet, and full width for mobile please?"

   Was 6 / 4 / 3 / 2 across four steps. Now 5 / 4 / 1 across three, which is what he asked
   for - the intermediate 3-up and 2-up rungs are gone deliberately, not by accident.

   BREAKPOINTS ARE THE THEME'S OWN, not new ones. 1240px was already this grid's first step.
   860px is the most-used boundary in the whole stylesheet - 15 rules - so mobile breaks
   where everything else on the site breaks.

   ONE CONSEQUENCE WORTH KNOWING: a portrait tablet at 768px lands in the MOBILE band and
   gets full-width cards, not 4-up. That follows from 860px, and 4-up at 768 would give
   ~170px cards for a portrait photo plus name, role and a link - too tight to read. If
   iPad-portrait should be 4-up instead, the single number to change is 860 -> 700. */
@media (max-width:1240px){ #pkw .people-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px) { #pkw .people-grid{grid-template-columns:1fr;gap:14px} }

/* ---------- the dialog ---------- */
/* padding:0 and border:0 undo the UA defaults; a <dialog> arrives with 1em of
   padding and a solid border that no reset in this theme touches. */
/* WIDTH - 1.10.72. Bob: "can this popup be wider? Not full width, but maybe 80%
   or something? That would work on tablet and mobile, right?"

   A FLAT 80vw WOULD HAVE MADE IT NARROWER ON EVERY PHONE AND TABLET, which is the
   one thing worth answering directly. This dialog was already near-full-width on
   small screens - calc(100vw - 32px) is 92% of a 390px phone and 96% of a 768px
   tablet - so 80vw is a REDUCTION there, not a gain. 80% only reads as "wider"
   from a desktop, where the old 780px cap was the thing actually binding.

   So the width is a three-way min, and each term owns one range:
     calc(100vw - 32px)  phones and small tablets: near-full, exactly as before
     max(80vw, 780px)    the 80% Bob asked for, floored so it can never go below
                         the old fixed width
     1000px              large desktops: a cap, for the reason below

   Verified algebraically rather than by eye: this is >= the old width at every
   viewport, and monotonic - for W <= 812 it resolves to W-32 (unchanged), and
   above that all three terms are >= 780.

   WHY IT IS CAPPED AT 1000px AND NOT LEFT AT 80%. On a 1920px monitor 80% is
   1536px, which puts a 1460px line of 18px Lato on screen - about 170 characters.
   Comfortable prose is 50-80. A bio is one long run of body copy with no headings
   or images to break it, so line length is the whole readability story here, and
   an unbounded percentage makes a wider dialog HARDER to read, not easier. */
#pkw .bio{width:min(calc(100vw - 32px),max(80vw,780px),1000px);max-height:86vh;padding:0;border:1px solid var(--brd);
  border-radius:20px;background:var(--panel);color:var(--tx);
  box-shadow:0 40px 90px -30px rgba(30,48,116,.45)}
#pkw .bio::backdrop{background:rgba(15,22,54,.62)}
#pkw .bio__inner{position:relative;padding:34px 38px 38px}
#pkw .bio__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--tx-2);background:var(--bg-2);
  transition:color .2s ease,background .2s ease}
#pkw .bio__close:hover{color:var(--head);background:var(--bg-3)}
#pkw .bio__close svg{width:16px;height:16px}
#pkw .bio__head{display:flex;gap:24px;align-items:center;margin-bottom:28px;padding-right:44px}
#pkw .bio__head img{width:132px;flex:none;border-radius:14px;background:var(--bg-2)}
#pkw .bio__name{font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--head)}
#pkw .bio__role{margin-top:6px;color:var(--cyan-700);font-weight:700;font-size:15px}
#pkw .bio__li{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--eb)}
#pkw .bio__li svg{width:16px;height:16px}

@media (max-width:640px){
  #pkw .bio__inner{padding:26px 22px 30px}
  #pkw .bio__head{flex-direction:column;align-items:flex-start;gap:16px;padding-right:34px}
  #pkw .bio__head img{width:104px}
  #pkw .bio__name{font-size:25px}
}

/* TWO COLUMNS ONCE THERE IS SPARE WIDTH - 1.10.72, and this is what stops the
   extra width being spent on longer lines.

   Widening the dialog alone would have taken the measure from ~82 characters to
   ~107 at the new 1000px cap. Putting the portrait, name, role and LinkedIn into a
   left rail spends the new width on LAYOUT instead: the prose column lands at
   55-80 characters depending on viewport - at or below where it already was - so
   the dialog gets wider and shallower, which is the actual benefit. Less
   scrolling, same reading measure.

   NO MARKUP CHANGE. .bio__inner becomes a two-column grid and auto-placement does
   the rest: .bio__head takes cell 1 and .doc takes cell 2. .bio__close is
   position:absolute, so it is out of flow and consumes no cell - if that ever
   changes to static it will silently claim cell 1 and push everything along one.

   1000px IS THE THRESHOLD, NOT 1024. At a 1024px viewport the single-column form
   is 819px wide and its measure runs to ~86 characters, which is the worst point
   on the whole curve. Turning the rail on just below that removes it, and an iPad
   in landscape gets the two-column form rather than the longest lines on the site.

   .doc KEEPS A 44px RIGHT PAD in this mode because the close button is absolute at
   top-right, which in two columns is directly over the FIRST LINE of the prose
   column rather than over the header block as it is when stacked. */
@media (min-width:1000px){
  #pkw .bio__inner{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:34px;align-items:start}
  #pkw .bio__head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:0;padding-right:0}
  #pkw .bio__head img{width:100%}
  #pkw .bio .doc{padding-right:44px}
}

/* --------------------------------------------------------------------------
   LANDING CHROME - .pk-brandbar and .pk-landing-footer - 1.10.76
   --------------------------------------------------------------------------
   The header and footer for the /landing subtree. Bob, 2026-08-14: "Please bake these
   BrandBar, and Footer Bars, As Full header and footers, for the /landing page series,
   in the theme."

   Rendered by template-parts/header-landing.php and footer-landing.php, selected by
   pkware_header_variant() / pkware_footer_variant(). A landing page is NOT chromeless -
   it has a header and a footer like every other page, just a deliberately minimal pair.

   ==========================================================================
   THESE SELECTORS ARE NOT #pkw-SCOPED, AND THAT IS THE WHOLE REASON THEY WERE RENAMED
   ==========================================================================

   1.10.75 had these as `#pkw .brandbar` and `#pkw .footer`, ported verbatim from
   staging's Custom HTML block where the markup sits INSIDE the page content's #pkw
   wrapper. Moving the markup into theme partials moved it to BODY LEVEL, outside #pkw -
   so every one of those selectors would have stopped matching. Silently: correct CSS,
   correct markup, no rule applied, no error.

   Renamed rather than merely unscoped, because a bare `.footer` at body level would sit
   one typo from the theme's own `.pk-footer`. The `pk-` prefix is the convention for
   body-level chrome here - see .pk-header, .pk-footer, .pk-crumbs.

   THE SECOND HALF OF THE SAME TRAP: `var(--maxw)` had to go too. That token is declared
   ON #pkw, so at body level it is out of scope, and a var() whose token is out of scope
   invalidates the WHOLE declaration silently - the max-width would simply not exist and
   the bar would run the full window width. This is documented at --pk-edge in section 3,
   which lives on :root precisely because the header and breadcrumb render outside #pkw.

   So the cap is written the way .pk-header__inner and .pk-crumbs__wrap write it:
   calc(1300px + 2 * var(--pk-edge)) with padding 0 var(--pk-edge). All four containers
   then share a cap AND an inset, which is what makes their left edges identical at every
   viewport. Bob, 2026-08-12: "can we consistently left align all work to the header at
   1300px, leaving padding for tablet and mobile please?"

   STAGING'S OWN COPY CANNOT BE TRUSTED FOR THAT INSET. Its block declares its own
   --maxw:1200px and a 26px --gutter, so `padding:26px var(--gutter) 0` aligns with its
   own content and nothing else. Ported verbatim it would sit the logo 26px right of the
   hero heading directly beneath it. Only the 26px TOP is staging's.

   #05091c, #AEB8DC AND #6B739A ARE LEFT AS LITERALS ON PURPOSE. The footer is
   near-black; the darkest palette token, --pk-deep-purple, is #25275c and visibly
   different. Mapping them would be an unapproved visual change to an approved design.
   Flagged rather than silently normalised - see the component registry.
   -------------------------------------------------------------------------- */

.pk-brandbar {
	background-color: var(--pk-white);
}

.pk-brandbar__inner {
	max-width: calc(1300px + 2 * var(--pk-edge));
	margin: 0 auto;
	padding: 26px var(--pk-edge) 0;
}

.pk-brandbar__logo {
	display: inline-block;
}

.pk-brandbar__logo img {
	display: block;
	height: 28px;
	width: auto;
}

.pk-landing-footer {
	background-color: #05091c;
	color: #AEB8DC;
	padding: 44px 0;
}

.pk-landing-footer__inner {
	max-width: calc(1300px + 2 * var(--pk-edge));
	margin: 0 auto;
	padding: 0 var(--pk-edge);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.pk-landing-footer__logo img {
	display: block;
	height: 24px;
	width: auto;
}

.pk-landing-footer__links {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 13.5px;
}

.pk-landing-footer a {
	color: #AEB8DC;
}

.pk-landing-footer__copy {
	width: 100%;
	margin: 0;
	padding-top: 8px;
	font-size: 13px;
	color: #6B739A;
	text-align: left;
}

/* --------------------------------------------------------------------------
   THE DATA BREACH CALCULATOR - .dbc - 1.10.73
   --------------------------------------------------------------------------
   /data-breach-calculator only. This is the one block in this stylesheet that
   restyles a PLUGIN's output rather than our own markup, so it is worth being
   precise about how, and about what it deliberately does not do.

   WHAT IS BEING STYLED. Formidable form 9, key `data-breach-calculator`, rendered
   by the shortcode. None of the markup below is ours: the fields, the eleven
   conditional description panels, the readonly result boxes and the consent
   checkbox all come out of the Formidable database.

   NOTHING FORMIDABLE-SIDE WAS TOUCHED, and nothing here needs to be. Bob's
   standing instruction, 2026-08-13: "this form implementation, tracking leads,
   filtering spam, generated conversion notices for GTM, it has to stay as it is,
   we can come back to a Form Retrofit after we get all of them in place and this
   site done." Delete this whole block and the form returns to exactly its staging
   appearance - that is the test this was written to pass.

   ==========================================================================
   WHY THIS IS ALL CUSTOM PROPERTIES AND NOT ONE !important
   ==========================================================================

   Formidable drives its entire appearance from CSS custom properties on the form
   container, so the clean intervention is to re-declare the variables rather than
   fight the rules that consume them. That is the whole reason this block has no
   !important in it and needs none.

   THE FORM HAS TWO COMPETING VARIABLE BLOCKS, which is worth understanding before
   changing anything here, because the first reading of it was wrong:

     .with_frm_style                        (0,1,0)  form 9's own style, id 47959
     .frm_style_classic-blue.with_frm_style (0,2,0)  the classic-blue preset

   The container carries BOTH classes, so classic-blue wins on specificity wherever
   the two overlap, and the effective style is a merge of the two.

   AND THAT IS THE ENTIRE "ODDLY OLD" LOOK BOB ASKED ABOUT. Form 9's own style is
   already PKWARE-branded - Lato, --section-color:#1e3074, --submit-bg-color cyan,
   --border-color-active cyan. classic-blue then overrides precisely those: sections
   to #000, the submit to #000, the active border to #000, plus a 1px blue fieldset
   border with a white background and 32px of padding. The brand was there all
   along, sitting underneath a preset.

   So this block is not inventing a new appearance. It is re-asserting the values
   form 9 already carries, at (1,2,0) so they win, and adding house geometry.

   EVIDENCE IT WAS ALREADY BEING FOUGHT: staging's own page carried
   `button.frm_button_submit.frm_final_submit { background-color: #09bcef !important }`
   in an Avada code block - somebody had already forced the submit back to cyan with
   a sledgehammer. That declaration is NOT ported. Setting --submit-bg-color does the
   same job, and also fixes the hover and active states, which the !important left
   black.

   ==========================================================================
   WHAT WAS PORTED FROM STAGING'S TWO fusion_code STYLE BLOCKS, AND WHAT WAS NOT
   ==========================================================================

   PORTED, both now scoped under #pkw .dbc where they used to be global:
     div#frm_checkbox_230-0 { margin-top: 20px }   the Data Type checkbox gap
     .frm_opt_container     { margin-top / margin-left }
     the select colour fix  - a real iOS bug, see the note at that rule

   NOT PORTED, and why:
     .fusion-tb-header { height: 0 }          Avada template-builder header, absent
     .fusion-breadcrumbs a:hover { ... }      our breadcrumbs are our own
     .fusion-counter-circle-content-inner     belongs to the section Bob dropped
     .fusion-panel.panel-default { radius }   Avada's accordion, ours is .faq-item
     @media (max-width:768px) fieldset padding  moot once --fieldset-padding is 0

   THE ONE DELIBERATE IMPROVEMENT over staging is the select chevron. Staging's fix
   for invisible dropdown text on iOS sets -webkit-appearance:none, which also
   removes the native arrow and leaves the select looking like a plain text box with
   no affordance. The colour fix is kept - it is a real bug - and a chevron is drawn
   back in as a data: URI background. img-src in inc/security.php allows data:.
   -------------------------------------------------------------------------- */

#pkw .dbc .with_frm_style{
  /* Container chrome off: .form-card and .form-rev.no-fc already supply the card,
     and classic-blue's 32px fieldset padding would make the inset 72px. */
  --fieldset:0;
  --fieldset-color:transparent;
  --fieldset-bg-color:transparent;
  --fieldset-padding:0;

  /* Type. 17px sits between the theme's 18px body and the form's own 16px. */
  --font-size:17px;
  --field-font-size:16.5px;
  --description-font-size:14px;

  /* Brand values, re-asserted over classic-blue. Every one of these is what form
     9's own style already says; classic-blue is what turns them black. */
  --text-color:var(--tx);
  --check-label-color:var(--tx);
  --section-color:var(--head);
  --section-font-size:22px;
  --border-color:var(--brd-2);
  --border-color-active:var(--cyan);
  --border-radius:12px;

  /* Geometry. */
  --label-padding:0 0 8px 0;
  --field-pad:11px 14px 11px 14px;
  --field-margin:26px;

  /* The submit, matched to #pkw .btn.btn-cyan: cyan, white, 700, pill, 15px 26px.
     White on --cyan is the house pairing, not a new choice - see .btn-cyan. */
  --submit-font-size:15.5px;
  --submit-weight:700;
  --submit-padding:15px 26px;
  --submit-border-radius:999px;
  --submit-bg-color:var(--cyan);
  --submit-border-color:var(--cyan);
  --submit-text-color:#fff;
  --submit-hover-bg-color:var(--cyan-700);
  --submit-hover-color:#fff;
  --submit-hover-border-color:var(--cyan-700);
  --submit-active-bg-color:var(--cyan-700);
  --submit-active-color:#fff;
  --submit-active-border-color:var(--cyan-700);
  --submit-shadow-color:transparent;
}

/* The two section headings, "Calculate Your Risk" and "Results". Lato, not the
   Georgia the rest of this page used on staging - see the fragment's header. */
#pkw .dbc .frm_section_heading > h3{
  font-family:var(--sans);
  font-weight:900;
  letter-spacing:-.01em;
}

/* THE RESULTS PANEL. .roi_results_section is on field 235's container, which WRAPS
   fields 236-240, so tinting it encloses the whole result set in one panel and
   separates the computed half of the form from the answered half. */
#pkw .dbc .roi_results_section{
  margin-top:34px;
  padding:4px 22px 22px;
  border:1px solid var(--brd);
  border-radius:16px;
  background:var(--bg-2);
}

/* Total Breach Cost is the headline number, so it gets a top label like the four
   category fields rather than Formidable's frm_left_container side label - mixing
   the two inside one panel is what made staging's results look assembled by hand. */
#pkw .dbc #frm_field_236_container{display:block}
#pkw .dbc #frm_field_236_container .frm_primary_label{width:auto;padding:0 0 8px}
#pkw .dbc #field_total_breach_cost34{
  font-size:26px;
  font-weight:900;
  color:var(--head);
  height:auto;
  line-height:1.2;
}

/* The four readonly category boxes. Not editable, so they should not look it. */
#pkw .dbc #field_detectionescalation34,
#pkw .dbc #field_lostbusiness34,
#pkw .dbc #field_postbreachresponse34,
#pkw .dbc #field_notificationcost34,
#pkw .dbc #field_cost_per_record34{
  font-weight:700;
  color:var(--head);
  background:var(--panel);
}

/* The eleven conditional description panels - Formidable HTML fields 242-251 and
   254, each an icon plus a paragraph, shown by conditional logic to match what the
   visitor selected. Carded so they read as answers rather than as loose prose.

   Their inner divs carry inline `color:#000000!important; font-size:16px!important`
   in the Formidable database. That is not overridable from here and is not worth a
   Formidable edit - #000 at 16px on white is close enough to house body text. */
#pkw .dbc .frm_html_container{
  margin-top:16px;
  padding:18px 20px;
  border:1px solid var(--brd);
  border-radius:14px;
  background:var(--glass);
}
#pkw .dbc .frm_html_container p{margin:0;line-height:1.6}
#pkw .dbc .frm_html_container strong{color:var(--head);font-size:17px}

/* Checkbox and radio groups. Both values ported from staging's fusion_code block,
   minus its !important - at (1,3,0) this already outranks Formidable. */
#pkw .dbc div#frm_checkbox_230-0{margin-top:20px}
#pkw .dbc .frm_opt_container{margin-top:0;margin-left:16px}

/* SELECT COLOUR FIX - PORTED, AND IT IS A REAL BUG NOT A PREFERENCE.
   iOS Safari renders select text using -webkit-text-fill-color, which it inherits
   from an ancestor colour in some combinations, and the result on this form was
   invisible dropdown text. Setting both colour and -webkit-text-fill-color is the
   fix; appearance:none is what makes it stick.

   The chevron is the deliberate improvement noted above: appearance:none removes
   the native arrow, so it is drawn back as a data: URI rather than leaving the
   select looking like a text input. */
#pkw .dbc .frm_forms select,
#pkw .dbc select{
  color:#000;
  -webkit-text-fill-color:#000;
  -webkit-appearance:none;
  appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6472' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
  padding-right:38px;
}
#pkw .dbc .frm_forms select option{color:#000;background-color:#fff}
#pkw .dbc .frm_forms select:focus,
#pkw .dbc .frm_forms select:active{color:#000;-webkit-text-fill-color:#000}

/* The card is wide, so it needs less inset on a phone than the 40px the two nested
   paddings give it. Only the outer one is reduced; .form-rev.no-fc keeps its 20px
   so the white inner card still reads as a card. */
@media (max-width:640px){
  #pkw .dbc .form-card{padding:12px}
  #pkw .dbc .roi_results_section{padding:4px 14px 16px}
  #pkw .dbc #field_total_breach_cost34{font-size:22px}
}

/* ==========================================================================
   9. SITE FOOTER
   --------------------------------------------------------------------------
   PORTED FROM PRODUCTION - 2026-08-10.
   Source: incoming/global-footer/global-footer.css

   Footer variant: GLOBAL. Markup: template-parts/footer-global.php.
   Behaviour: assets/js/footer.js (mobile accordion only).

   Desktop and tablet layouts are pure CSS. The group headings are <button>
   elements made inert above 768px with pointer-events: none, so no breakpoint
   check is needed in JavaScript.

   CHANGES FROM THE SOURCE FILE
   ---------------------------------------------------------------------------
   1. Four local custom properties deleted because they redeclared section 3
      tokens with identical values: --pk-navy, --pk-cyan, --pk-frost,
      --pk-white. They now inherit from :root. Note that --pk-navy and
      --pk-frost were declared but never referenced in this block.
   2. The .pk-sr rule was removed - it was declared identically here and in
      section 7. One definition now lives in section 11 with the other
      screen-reader utility.
   3. A source comment describing the Avada wrapper this used to sit inside was
      rewritten to name the partial instead.

   --pk-max IS LEFT LITERAL AT 1300px ON PURPOSE. It does not match
   --pk-container-max (1200px), so aliasing it would silently narrow the footer.

   KNOWN EXCEPTION TO THE PALETTE RULE
   ---------------------------------------------------------------------------
   The background gradient uses #314593 and #0c132c, and the search field uses
   #292929, #6b7280 and #000. None are in the brand palette. Left verbatim for
   the same reason as sections 7 and 8: rewriting production colours by eye
   during a port makes a porting mistake indistinguishable from a deliberate
   change. The rgba(255,255,255,...) values are white at alpha and are
   palette-consistent in intent.
   ========================================================================== */

/* ============================================================
   PKWARE footer - single responsive tree
   Rendered by template-parts/footer-global.php
   Desktop: brand column + 4-column link grid (2 rows)
   Tablet:  brand full width + 2-column link grid
   Mobile:  brand full width + collapsible link groups
   ============================================================ */

.pk-footer {
  /* palette */

  /* semantic */
  --pk-fg:        rgba(255,255,255,.86);
  --pk-fg-strong: #ffffff;
  --pk-fg-hover:  var(--pk-cyan);
  --pk-rule:      rgba(255,255,255,.16);
  --pk-chip-bg:   rgba(255,255,255,.07);

  /* metrics */
  --pk-max:       1300px;
  --pk-pad-x:     20px;
  --pk-logo-w:    186px;

  position: relative;
  /* 40px, Bob's value, 2026-08-19: "Can we add 40px padding to the top of .pk-footer".
     The element had NO padding of its own before this - its inner rows supplied all the
     spacing, so the footer content started hard against the top edge. Unprefixed and
     outside #pkw, like .pk-header, because the footer renders at body level. */
  padding-top: 40px;
  background: radial-gradient(circle at center top, #314593 0%, #0c132c 100%);
  color: var(--pk-fg);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pk-footer *, .pk-footer *::before, .pk-footer *::after { box-sizing: border-box; }

.pk-footer a { color: var(--pk-fg); text-decoration: none; transition: color .15s ease; }
.pk-footer a:hover, .pk-footer a:focus-visible { color: var(--pk-fg-hover); }

.pk-footer ul { list-style: none; margin: 0; padding: 0; }
.pk-footer p  { margin: 0; }

/* ---------- shell ---------- */
.pk-footer__inner {
  max-width: var(--pk-max);
  margin: 0 auto;
  padding: var(--pk-sec-y) var(--pk-pad-x) 48px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 3fr;
  gap: 48px;
}

/* ---------- brand column ---------- */
.pk-footer__logo { display: block; line-height: 0; margin-bottom: 22px; }
.pk-footer__logo img { width: var(--pk-logo-w); max-width: 100%; height: auto; display: block; }

.pk-footer__blurb { font-size: 15px; line-height: 1.65; max-width: 34ch; }

/* search: one form, real submit button */
.pk-footer__search {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 26px 0 0;
  max-width: 320px;
  background: var(--pk-white);
  border-radius: 200px;
  overflow: hidden;
}
.pk-footer__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 6px 12px 18px;
  font: inherit;
  font-size: 15px;
  color: #292929;
  background: transparent;
  border: 0;
}
.pk-footer__search-input::placeholder { color: #6b7280; }
.pk-footer__search-input:focus { outline: 0; }
.pk-footer__search:focus-within { box-shadow: 0 0 0 2px var(--pk-cyan); }

.pk-footer__search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  margin: 4px;
  padding: 0;
  color: #000;
  background: var(--pk-cyan);
  border: 0;
  border-radius: 200px;
  cursor: pointer;
  transition: filter .15s ease;
}
.pk-footer__search-btn svg { fill: currentColor; }
.pk-footer__search-btn:hover { filter: brightness(.92); }

.pk-footer__follow {
  margin: 34px 0 14px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pk-fg-strong);
}

.pk-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--pk-chip-bg);
  border-radius: 10px;
}
.pk-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  color: var(--pk-fg-strong);
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.pk-footer__social svg { fill: currentColor; }
.pk-footer__social a:hover,
.pk-footer__social a:focus-visible {
  color: var(--pk-cyan);
  background: rgba(255,255,255,.10);
}

/* ---------- link grid ---------- */
.pk-footer__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 28px;
  align-content: start;
}

.pk-footer__heading {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pk-fg-strong);
}
/* the button is only a control on mobile; inert text on larger screens */
.pk-footer__toggle {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: default;
  pointer-events: none;
}

.pk-footer__group ul li + li { margin-top: 7px; }
.pk-footer__group a { font-size: 15px; }

/* ---------- bottom bar ---------- */
.pk-footer__bottom { border-top: 1px solid var(--pk-rule); }
.pk-footer__bottom-inner {
  max-width: var(--pk-max);
  margin: 0 auto;
  padding: 22px var(--pk-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.pk-footer__copy  { font-size: 15px; }
.pk-footer__legal { display: flex; gap: 22px; }
.pk-footer__legal a { font-size: 15px; }

/* ============================================================
   TABLET - 1200px and below: brand full width, 2-column links
   ============================================================ */
@media (max-width: 1200px) {
  .pk-footer__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 52px var(--pk-pad-x) 40px;
  }
  .pk-footer__blurb { max-width: 62ch; }
  .pk-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 32px; }
}

/* ============================================================
   MOBILE - 768px and below: collapsible link groups
   ============================================================ */
@media (max-width: 768px) {
  .pk-footer__inner { padding: 40px var(--pk-pad-x) 28px; gap: 34px; }
  .pk-footer__links { grid-template-columns: 1fr; gap: 0; }

  .pk-footer__group { border-bottom: 1px solid var(--pk-rule); }
  .pk-footer__group:first-child { border-top: 1px solid var(--pk-rule); }

  .pk-footer__heading { margin: 0; }

  .pk-footer__toggle {
    position: relative;
    padding: 16px 44px 16px 0;
    cursor: pointer;
    pointer-events: auto;
  }
  .pk-footer__toggle::before,
  .pk-footer__toggle::after {
    content: "";
    position: absolute;
    right: 14px; top: 50%;
    width: 13px; height: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform .2s ease, opacity .2s ease;
  }
  .pk-footer__toggle::after { transform: translateY(-50%) rotate(90deg); }
  .pk-footer__toggle[aria-expanded="true"]::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

  .pk-footer__group ul { display: none; padding: 0 0 16px; }
  .pk-footer__group.is-open ul { display: block; }
  .pk-footer__group ul li + li { margin-top: 10px; }
  .pk-footer__group a { display: block; padding: 3px 0; }

  .pk-footer__search { max-width: none; }
  .pk-footer__follow { margin-top: 28px; font-size: 19px; }

  .pk-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px var(--pk-pad-x);
  }
}

@media (max-width: 480px) {
  .pk-footer { --pk-logo-w: 156px; --pk-pad-x: 16px; }
  .pk-footer__blurb { font-size: 14px; }
  .pk-footer__legal { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-footer, .pk-footer * { transition: none !important; }
}
/* ==========================================================================
   10. UTILITIES
   ========================================================================== */

.pk-bg-navy { background-color: var(--pk-navy); color: var(--pk-white); }
.pk-bg-grey { background-color: var(--pk-grey); }
.pk-bg-deep-purple { background-color: var(--pk-deep-purple); color: var(--pk-white); }

.pk-text-navy { color: var(--pk-navy); }
.pk-text-slate { color: var(--pk-slate); }
.pk-text-white { color: var(--pk-white); }

.pk-text-center { text-align: center; }
.pk-text-start { text-align: start; }

.pk-mt-0 { margin-block-start: 0; }
.pk-mb-0 { margin-block-end: 0; }
.pk-section { padding-block: var(--pk-space-2xl); }

.pk-flow > * + * { margin-block-start: var(--pk-space-sm); }

.pk-radius-md { border-radius: var(--pk-radius-md); }
.pk-shadow-md { box-shadow: var(--pk-shadow-md); }

/* Deferred reveal. deferred.js sets opacity to 1 when the element enters the
   viewport. The transition lives here so the script stays behavioural only. */
.deferred-container {
	opacity: 0;
	transition: opacity var(--pk-duration-slow) var(--pk-ease);
}


/* --- WordPress content classes -------------------------------------------
 *
 * These are emitted by WORDPRESS, not by hand-authored markup, and they are the
 * reason this block exists at all. It looks like block-theme boilerplate; it is
 * not.
 *
 * The theme runs the CLASSIC editor. The moment anyone uses Add Media and picks an
 * alignment or types a caption, the editor writes .alignleft / .aligncenter /
 * .wp-caption / .wp-caption-text into the content. Marking a post sticky adds
 * .sticky via post_class(). Without these rules that output renders unstyled -
 * captions as loose paragraphs, alignments ignored.
 *
 * Verified before adding: none of these eight class names appear anywhere else in
 * this stylesheet or in the ported page content, so there is nothing to collide
 * with. In particular .sticky is safe - the header uses the position: sticky
 * DECLARATION, never a .sticky selector.
 * ------------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin-block-end: var(--pk-space-sm);
	margin-inline-end: var(--pk-space-md);
}

.alignright {
	float: right;
	margin-block-end: var(--pk-space-sm);
	margin-inline-start: var(--pk-space-md);
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
	margin-block-end: var(--pk-space-sm);
}

.alignnone {
	margin-block-end: var(--pk-space-sm);
}

/* Captions. The editor wraps an image and its caption in .wp-caption with an
   inline width, so max-width keeps it from overflowing a narrow column. */
.wp-caption {
	margin-block-end: var(--pk-space-md);
	max-width: 100%;
}

.wp-caption img {
	display: block;
	height: auto;
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	color: var(--pk-slate);
	font-size: var(--pk-text-sm);
	line-height: var(--pk-leading-snug);
	margin-block-start: var(--pk-space-3xs);
	text-align: center;
}

/* Sticky posts. post_class() adds this on archive listings. Kept subtle - a left
   rule rather than a background, so it reads as emphasis not as an alert. */
.sticky {
	border-inline-start: 3px solid var(--pk-color-accent);
	padding-inline-start: var(--pk-space-sm);
}

/* Galleries. The classic editor emits .gallery with .gallery-item children and a
   gallery-columns-N class; this makes them a grid rather than floats. */
.gallery {
	display: grid;
	gap: var(--pk-space-sm);
	margin-block-end: var(--pk-space-md);
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }

.gallery-item img {
	display: block;
	height: auto;
	width: 100%;
}

@media (max-width: 640px) {

	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Floats in a narrow column produce unreadable text wraps. */
	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin-inline: auto;
	}
}


/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

.skip-link {
	background-color: var(--pk-navy);
	color: var(--pk-white);
	inset-block-start: -100%;
	inset-inline-start: var(--pk-space-2xs);
	padding: var(--pk-space-2xs) var(--pk-space-sm);
	position: absolute;
	text-decoration: none;
	z-index: var(--pk-z-skiplink);
}

.skip-link:focus {
	inset-block-start: var(--pk-space-2xs);
}

/* .pk-sr - the ported header and footer markup uses this name for the same
   thing. Defined once here rather than in both component blocks, so it
   survives swapping either variant out. */
.pk-sr,
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--pk-white);
	clip-path: none;
	color: var(--pk-navy);
	height: auto;
	padding: var(--pk-space-2xs) var(--pk-space-sm);
	width: auto;
	z-index: var(--pk-z-skiplink);
}

:focus-visible {
	outline: 3px solid var(--pk-color-focus);
	outline-offset: 2px;
}

/* Respect a stated preference for reduced motion. The deferred reveal
   becomes instant rather than being removed, so content is never hidden. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.deferred-container {
		opacity: 1;
	}
}


/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {

	.pk-header,
	.pk-header-sentinel,
	.pk-search,
	.pk-footer,
	.skip-link,
	.pagination {
		display: none !important;
	}

	body {
		background: var(--pk-white);
		color: var(--pk-silicone);
		font-size: 12pt;
		line-height: var(--pk-leading-snug);
	}

	.deferred-container {
		opacity: 1 !important;
	}

	a {
		text-decoration: underline;
	}

	/* Surface destinations that will not survive on paper. */
	.entry-content a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-size: 10pt;
		word-break: break-all;
	}

	h1, h2, h3, h4, h5, h6 {
		break-after: avoid;
	}

	pre, blockquote, table, figure {
		break-inside: avoid;
	}
}

/* ==========================================================================
   LANDING - GATED ASSET AND AVADA MARKETING ARCHETYPES
   Added 2026-08-14 with the /landing campaign batch (16 pages).

   Everything here is #pkw-scoped and written against the palette TOKENS
   (--head, --tx, --tx-2, --brd, --glass, --panel, --eb) rather than fixed
   colours, so each rule works unchanged inside .pkw-dark, .pkw-light and
   .pkw-grey. That is the whole reason the batch needed so little new CSS:
   the tokens already existed, and the gated pages differ from the event
   pages by their PALETTE WRAPPER, not by their components.
   ========================================================================== */

/* --- hero kicker: the line staging renders as a second <h2> above the <h1> ---
   Sized just under .hero h1 (clamp(38px,5vw,62px)) so the pair reads as one
   title. It is a <p>, not a heading, because two h2s above the h1 is a
   document-outline defect - see the note in
   the -final.html fragment for landing_guide-for-complete-data-visibility. */
#pkw .hero-kicker{font-family:var(--serif);font-size:clamp(24px,3.1vw,38px);line-height:1.15;
  color:var(--head);margin:0 0 10px;text-wrap:balance}

/* --- the lead-in line above a bulleted list ("What You'll Learn:") --- */
#pkw .list-lead{margin:22px 0 10px;font-size:17px;color:var(--tx)}
#pkw .list-lead strong{color:var(--head)}

/* --- gated asset cover art, right-hand hero column --- */
#pkw .asset-cover{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 24px;
  border-radius:14px;box-shadow:0 30px 70px -34px rgba(0,0,0,.55)}
/* full-bleed hero graphic on a single-column page (the maturity assessment) */
#pkw .asset-hero{display:block;width:100%;max-width:920px;height:auto;margin:0 auto 40px;border-radius:16px}
/* a wide diagram that must stay legible rather than shrink to fit */
#pkw .diagram{display:block;width:100%;max-width:800px;height:auto;margin:0 auto;border-radius:14px}

/* --- the Gartner Peer Insights review image inside the existing .gart shell.
   .gart is already in this stylesheet (ported for the home page) and already
   centres its child; only the image needs bounding. --- */
#pkw .gart img{display:block;width:100%;max-width:420px;height:auto}

/* --- form column helpers. .hero-grid supplies the two-column layout, so the
   column itself only needs to stack its own children. --- */
#pkw .form-col{display:flex;flex-direction:column;justify-content:center}
#pkw .form-col--wide{max-width:860px;margin:0 auto 48px}

/* --- CHECK LIST -----------------------------------------------------------
   Replaces Avada's fusion-checklist (type-icons, hosting-template-check-box).
   The tick is a CSS ::before, not an <i> element and not an image: it is
   decoration, so it should not sit in the accessibility tree or cost a
   request. Written as the CSS escape \2713 so this file stays ASCII-safe -
   a literal glyph in a stylesheet has already cost this project time. */
#pkw .check-list{margin:0;padding:0;list-style:none}
#pkw .check-list li{position:relative;padding-left:34px;margin-top:14px;
  font-size:16.5px;line-height:1.55;color:var(--tx-2)}
#pkw .check-list li:first-child{margin-top:0}
#pkw .check-list li::before{content:"\2713";position:absolute;left:0;top:-1px;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--glass);border:1px solid var(--brd-2);
  color:var(--eb);font-size:12px;font-weight:700;line-height:1}
/* the one-item list staging uses as an eyebrow above the h1 */
#pkw .check-list--lede li{margin:0 0 18px;font-size:17px;font-weight:700;color:var(--head)}

/* --- FLIP CARDS, 3 UP ----------------------------------------------------
   Replaces Avada's fusion-flip-boxes (flip-effect-3d, flip-right,
   equal-heights). CSS ONLY - Avada ships JavaScript for this; a 3D flip is a
   transform plus backface-visibility and needs none.

   THREE ACCESSIBILITY FIXES OVER THE ORIGINAL, all of them here rather than
   in the markup:
     - :focus-within flips too, so the back face is reachable by keyboard.
       The card carries tabindex="0" for this.
     - Under prefers-reduced-motion, and at <=860px where there is no hover
       at all, BOTH faces are shown stacked instead of flipping. Hover-only
       content is invisible on every phone.
     - Both faces are always in the DOM and never display:none, so the copy
       is available to assistive tech regardless of rotation.
   --------------------------------------------------------------------- */
#pkw .flip-3up{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#pkw .flip-card{perspective:1200px;min-height:250px;outline:none}
#pkw .flip-card:focus-visible{outline:2px solid var(--eb);outline-offset:4px;border-radius:20px}
#pkw .flip-inner{position:relative;width:100%;height:100%;min-height:250px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
#pkw .flip-card:hover .flip-inner,
#pkw .flip-card:focus-within .flip-inner{transform:rotateY(180deg)}
#pkw .flip-front,#pkw .flip-back{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding:32px;border-radius:18px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--brd)}
#pkw .flip-front h3{font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--head);margin:0}
#pkw .flip-back{transform:rotateY(180deg);background:var(--head);border-color:transparent}
#pkw .flip-back p{font-size:15.5px;line-height:1.6;color:#EEF2FF;margin:0}

@media (max-width:1024px){
  #pkw .flip-3up{grid-template-columns:1fr 1fr}
}
/* No hover target and no room to flip: show the whole card instead. */
@media (max-width:860px){
  #pkw .flip-3up{grid-template-columns:1fr}
  #pkw .flip-card,#pkw .flip-inner{min-height:0}
  #pkw .flip-inner{transform:none !important;transform-style:flat}
  #pkw .flip-front,#pkw .flip-back{position:static;transform:none;backface-visibility:visible}
  #pkw .flip-front{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:18px}
  #pkw .flip-back{border-top-left-radius:0;border-top-right-radius:0;padding-top:18px;margin-top:-1px}
}
@media (prefers-reduced-motion:reduce){
  #pkw .flip-inner{transition:none}
}

/* --- capability card: .card plus a heading and an optional text link --- */
#pkw .cap-card{padding:30px;display:flex;flex-direction:column;gap:10px}
#pkw .cap-card h3{font-family:var(--serif);font-size:22px;line-height:1.25;color:var(--head);margin:0}
#pkw .cap-card p{font-size:15.5px;line-height:1.6;color:var(--tx-2);margin:0}
#pkw .cap-card .tlink{margin-top:auto;padding-top:6px}

/* --- portrait beside a pull quote. .fiserv-quote already supplies the
   1fr/288px grid; this only shapes the image. --- */
#pkw .quote-portrait{display:block;width:150px;height:150px;border-radius:20px;
  object-fit:cover;justify-self:center}

/* --- two-column band with media on one side --- */
#pkw .two-col--media{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#pkw .col-media{display:block;width:100%;height:auto;border-radius:16px}
@media (max-width:860px){
  #pkw .two-col--media{grid-template-columns:1fr;gap:32px}
}

/* --- BLUE GRADIENT HERO ---------------------------------------------------
   /landing/securezip-upgrade is the only page in the batch that opens on
   blue: staging sets linear-gradient(270deg,#1152be,#198fd9) on its first
   Avada section. Handled the way .pkw-dark handles navy - re-declare the
   tokens once, so every child element inherits correctly - rather than
   colouring individual elements. --- */
#pkw .hero-blue{background-image:linear-gradient(270deg,#1152be 0%,#198fd9 100%);color:#FFFFFF;
  --head:#FFFFFF; --tx:#EEF2FF; --tx-2:#DCE6FF; --tx-3:#BFCEF5;
  --eb:#0FE4A2; --brd:rgba(255,255,255,.16); --brd-2:rgba(255,255,255,.26);
  --glass:rgba(255,255,255,.10); --glass-2:rgba(255,255,255,.14)}
/* THE SAME TWO-LAYER BACKGROUND, repeated here because this selector is (1,2,0) and would
   otherwise beat the base rule's (1,1,0) with a flat background and silently kill the
   hairline. One page is affected today - /landing/securezip-upgrade. This rule exists at all
   because .hero-blue redefines the panel colour for its own hero, so it cannot simply be
   deleted. IF THE GRADIENT IS RETUNED, RETUNE IT HERE TOO. */
#pkw .hero-blue .form-card {
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--pk-edge-a),
      rgba(9,188,239,.95)   0deg,
      rgba(15,228,162,.95)  85deg,
      rgba(30,48,116,.30)  170deg,
      rgba(15,228,162,.95) 265deg,
      rgba(9,188,239,.95)  360deg) border-box;
}

/* --- CLOSING CTA ON BLACK, WITH STAGING'S FROST SHAPE --------------------
   Staging pairs --awb-color8 (#000000) with 2025/12/shape-frost1.svg. Paired
   with .pkw-dark in the markup, which supplies the text tokens; this rule
   only adds the artwork. The shape is decorative, so it is a background
   rather than an <img> - it carries no meaning and needs no alt text. --- */
#pkw .cta-frost{background-color:#000000;
  background-image:url("/wp-content/uploads/2025/12/shape-frost1.svg");
  background-repeat:no-repeat;background-position:center;background-size:cover}

/* --- SPEC TABLE ----------------------------------------------------------
   A platform/version table. NOT .pkvq-table, which hard-codes var(--navy)
   and var(--ink) and is therefore invisible on a dark section - this one is
   written against the palette tokens so it works on light and dark alike.
   .table-scroll keeps a wide table inside its own scroll container so the
   PAGE never scrolls sideways on a phone. --- */
#pkw .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto 36px;max-width:900px}
#pkw .spec-table{width:100%;border-collapse:collapse;text-align:left;min-width:520px}
#pkw .spec-table th{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--eb);padding:14px 16px;border-bottom:2px solid var(--brd-2)}
#pkw .spec-table td{padding:15px 16px;border-bottom:1px solid var(--brd);
  color:var(--tx-2);font-size:15.5px;vertical-align:top}
#pkw .spec-table tbody tr:last-child td{border-bottom:none}
#pkw .spec-table td:first-child{color:var(--head);font-weight:700;white-space:nowrap}

/* ==========================================================================
   LANDING PAGES - HAND-AUTHORED ARCHETYPE, stylesheets lifted out of page content
   Added 2026-08-14 with the /landing campaign batch.

   EVERY SELECTOR BELOW IS FORCED UNDER ITS PAGE ROOT, and that is not cosmetic.
   As authored, these four blocks needed 151 selectors rescoped between them,
   which was harmless while each lived inline on its own page and actively
   dangerous the moment they share one stylesheet. The two that mattered most
   were a bare .frm_form_field rule zeroing padding with !important, and a bare
   .pk-toggle-reveal.form-card rule. The first would have re-spaced EVERY
   Formidable form on the site; the second would have restyled the reveal card
   on every other landing page. Both belong to the frozen form implementation,
   which is exactly what must not move.

   Selector examples are written in prose above, WITHOUT braces, on purpose.
   A rule quoted inside a comment reads as a real rule to every grep and every
   count that is not comment-blind, and this project has already chased that
   false alarm twice - once on a shortcode, once here.

   Staging comments were stripped before scoping: the scoper reads everything
   ahead of a brace as a selector, and one of those comments contained a comma.
   ========================================================================== */

/* ================= cmmc-compliance  ->  #pk-landing-wrapper ================= */
/*
 * The line below used to begin `700&family=Share+Tech+Mono&display=swap');` -
 * the tail of a stripped Google Fonts @import, glued to the selector. See the note
 * on #pk-gartner-wrapper further down for what caused it and what it broke.
 */
#pk-landing-wrapper {
            
            --pk-navy: #1E3074;
            --pk-teal: #00BCEF;
            --pk-frost: #0FE4A2;
            --pk-dark-teal: #0098C0;
            --pk-light-grey: #F1F5FA;
            --alert-red: #F05557;
            --tactical-grey: #1E293B;
            --pk-text: #484848;

            
            font-family: 'Lato', sans-serif;
            color: var(--pk-text);
            background-color: var(--pk-light-grey);
            -webkit-font-smoothing: antialiased;

            
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            overflow-x: hidden;
        }
.fusion-post-content #pk-landing-wrapper h1, .fusion-post-content #pk-landing-wrapper h2, .fusion-post-content #pk-landing-wrapper h3, .fusion-post-content #pk-landing-wrapper p, .fusion-post-content #pk-landing-wrapper ul, .fusion-post-content #pk-landing-wrapper li {
            margin-top: 0;
            margin-bottom: 0;
            line-height: normal;
        }
#pk-landing-wrapper .force-white { color: #ffffff !important; }
#pk-landing-wrapper .force-gray { color: #d1d5db !important; }
#pk-landing-wrapper .force-gray-light { color: #9ca3af !important; }
#pk-landing-wrapper .force-red { color: #F05557 !important; }
#pk-landing-wrapper .force-navy { color: #1E3074 !important; }
#pk-landing-wrapper .force-black { color: #000000 !important; }
#pk-landing-wrapper .force-frost { color: #0FE4A2 !important; }
#pk-landing-wrapper .pk-font-serif { font-family: 'Georgia', serif; font-weight: 400; }
#pk-landing-wrapper .pk-font-sans { font-family: 'Lato', sans-serif; }
#pk-landing-wrapper .pk-font-mono { font-family: 'Share Tech Mono', monospace; }
#pk-landing-wrapper .pk-h1, #pk-landing-wrapper .pk-h2 { font-size: 46px; line-height: 56px; }
#pk-landing-wrapper .pk-h3 { font-size: 26px; line-height: 34px; }
#pk-landing-wrapper .pk-p { font-size: 20px; line-height: 40px; }
@media (max-width: 768px) {
#pk-landing-wrapper .pk-h1, #pk-landing-wrapper .pk-h2 { font-size: 36px; line-height: 46px; }
#pk-landing-wrapper .pk-p { font-size: 18px; line-height: 32px; }
}
#pk-landing-wrapper .pk-container { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
#pk-landing-wrapper .pk-container-wide { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
#pk-landing-wrapper .pk-container-narrow { max-width: 896px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) {
#pk-landing-wrapper .pk-container, #pk-landing-wrapper .pk-container-wide, #pk-landing-wrapper .pk-container-narrow { padding: 0 48px; }
}
#pk-landing-wrapper .pk-py-nav { padding-top: 32px; padding-bottom: 16px; }
#pk-landing-wrapper .pk-py-hero { padding-top: var(--pk-sec-y-hero); padding-bottom: var(--pk-sec-y-hero); }
#pk-landing-wrapper .pk-py-section { padding-top: var(--pk-sec-y); padding-bottom: var(--pk-sec-y); }
#pk-landing-wrapper .pk-py-trust { padding-top: 24px; padding-bottom: 24px; }
#pk-landing-wrapper .pk-py-cta { padding-top: var(--pk-sec-y-cta); padding-bottom: var(--pk-sec-y-cta); }
#pk-landing-wrapper .pk-mb-2 { margin-bottom: 8px; }
#pk-landing-wrapper .pk-mb-4 { margin-bottom: 16px; }
#pk-landing-wrapper .pk-mb-6 { margin-bottom: 24px; }
#pk-landing-wrapper .pk-mb-8 { margin-bottom: 32px; }
#pk-landing-wrapper .pk-mb-10 { margin-bottom: 40px; }
#pk-landing-wrapper .pk-mb-16 { margin-bottom: var(--pk-gap-xl); }
#pk-landing-wrapper .pk-mt-4 { margin-top: 16px; }
#pk-landing-wrapper .pk-mt-8 { margin-top: 32px; }
#pk-landing-wrapper .pk-flex { display: flex; }
#pk-landing-wrapper .pk-flex-col { display: flex; flex-direction: column; }
#pk-landing-wrapper .pk-items-center { align-items: center; }
#pk-landing-wrapper .pk-items-start { align-items: flex-start; }
#pk-landing-wrapper .pk-justify-between { justify-content: space-between; }
#pk-landing-wrapper .pk-justify-center { justify-content: center; }
#pk-landing-wrapper .pk-gap-2 { gap: 8px; }
#pk-landing-wrapper .pk-gap-4 { gap: 16px; }
#pk-landing-wrapper .pk-gap-6 { gap: 24px; }
#pk-landing-wrapper .pk-gap-8 { gap: 32px; }
#pk-landing-wrapper .pk-gap-12 { gap: 48px; }
#pk-landing-wrapper .pk-grid { display: grid; gap: 32px; }
@media (min-width: 768px) {
#pk-landing-wrapper .pk-grid-2 { grid-template-columns: repeat(2, 1fr); }
#pk-landing-wrapper .pk-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
#pk-landing-wrapper .pk-hero-grid { grid-template-columns: 7fr 5fr; align-items: center; gap: 48px; }
}
#pk-landing-wrapper .pk-bg-navy { background-color: var(--pk-navy); }
#pk-landing-wrapper .pk-bg-white { background-color: #ffffff; }
#pk-landing-wrapper .pk-bg-light { background-color: var(--pk-light-grey); }
#pk-landing-wrapper .pk-bg-tactical { background-color: var(--tactical-grey); }
#pk-landing-wrapper .pk-cyber-grid {
            background-color: var(--pk-navy);
            background-image: 
                linear-gradient(rgba(0, 188, 239, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 188, 239, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center center;
        }
#pk-landing-wrapper .pk-dot-matrix {
            background-color: var(--pk-light-grey);
            background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
            background-size: 20px 20px;
        }
#pk-landing-wrapper .pk-border-b { border-bottom: 1px solid rgba(255,255,255,0.1); }
#pk-landing-wrapper .pk-border-y { border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
#pk-landing-wrapper .pk-border-t-teal { border-top: 1px solid var(--pk-teal); }
#pk-landing-wrapper .pk-accent-line { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--alert-red), var(--pk-teal), var(--pk-frost)); }
#pk-landing-wrapper .pk-box-shadow { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
#pk-landing-wrapper .pk-box-shadow-dark { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
#pk-landing-wrapper .pk-threat-box { border-left: 4px solid var(--alert-red); padding: 48px; background: #fff; position: relative; }
#pk-landing-wrapper .pk-threat-label { position: absolute; top: -16px; left: 24px; background: var(--alert-red); padding: 4px 16px; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; font-weight: bold; }
#pk-landing-wrapper .pk-risk-card { background: #fff; border-top: 4px solid var(--alert-red); padding: 32px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
#pk-landing-wrapper .pk-risk-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
#pk-landing-wrapper .pk-card-icon { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; color: var(--alert-red); }
#pk-landing-wrapper .pk-tech-corner { position: absolute; width: 16px; height: 16px; border-color: var(--pk-teal); border-width: 0; pointer-events: none; }
#pk-landing-wrapper .pk-tech-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
#pk-landing-wrapper .pk-tech-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
#pk-landing-wrapper .pk-tech-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
#pk-landing-wrapper .pk-tech-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
#pk-landing-wrapper .pk-btn {
            display: inline-flex; align-items: center; justify-content: center;
            background-color: var(--pk-teal); color: #000000 !important;
            font-family: 'Lato', sans-serif; font-weight: 700; font-size: 18px;
            padding: 16px 40px; border-radius: 9999px; text-transform: uppercase;
            letter-spacing: 0.05em; text-decoration: none; transition: background-color 0.3s;
            border: none; cursor: pointer; text-align: center;
        }
#pk-landing-wrapper .pk-btn:hover { background-color: var(--pk-dark-teal); }
#pk-landing-wrapper .pk-btn svg { width: 24px; height: 24px; margin-left: 8px; }
#pk-landing-wrapper .pk-btn-outline {
            display: inline-flex; align-items: center; justify-content: center;
            background-color: transparent; color: var(--pk-teal) !important;
            border: 2px solid var(--pk-teal); border-radius: 9999px;
            font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px;
            padding: 10px 32px; text-transform: uppercase; letter-spacing: 0.1em;
            text-decoration: none; transition: all 0.3s;
        }
#pk-landing-wrapper .pk-btn-outline:hover { background-color: var(--pk-teal); color: #000000 !important; }
@keyframes pk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
#pk-landing-wrapper .pk-pulse { animation: pk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pk-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
#pk-landing-wrapper .pk-ping { position: absolute; width: 100%; height: 100%; background: var(--alert-red); border-radius: 50%; animation: pk-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; }
#pk-landing-wrapper .pk-input {
            width: 100%; background-color: var(--pk-light-grey); border: 1px solid #d1d5db;
            padding: 12px; font-family: 'Lato', sans-serif; font-size: 16px; color: var(--pk-text);
            box-sizing: border-box; outline: none; transition: border-color 0.3s;
        }
#pk-landing-wrapper .pk-input:focus { border-color: var(--pk-teal); }
#pk-landing-wrapper .pk-label { display: block; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
#pk-landing-wrapper .pk-table-wrapper { overflow: hidden; border: 1px solid #d1d5db; background: #ffffff; }
#pk-landing-wrapper .pk-table { width: 100%; text-align: left; border-collapse: collapse; }
#pk-landing-wrapper .pk-table th { padding: 20px; background-color: var(--pk-navy); border-bottom: 1px solid #374151; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; }
#pk-landing-wrapper .pk-table td { padding: 20px; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; }
#pk-landing-wrapper .pk-table tr:hover td { background-color: var(--pk-light-grey); }
#pk-landing-wrapper .pk-inline-flex { display: inline-flex; }
#pk-landing-wrapper .pk-w-full { width: 100%; }
#pk-landing-wrapper .pk-h-full { height: 100%; }
#pk-landing-wrapper .pk-relative { position: relative; }
#pk-landing-wrapper .pk-absolute { position: absolute; }
#pk-landing-wrapper .pk-hidden { display: none; }
@media (min-width: 768px) {
#pk-landing-wrapper .pk-md-flex { display: flex; }
#pk-landing-wrapper .pk-md-block { display: block; }
}
#pk-landing-wrapper .pk-text-center { text-align: center; }
#pk-landing-wrapper .form-rev-white.no-fc {
            margin-bottom: 0px;
            color: #000000;
            overflow: hidden;
            border-radius: 16px !important;
            background: #ffffff !important;
            --awb-background-image: none !important;
            --awb-background-image-small: none !important;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
        }
#pk-landing-wrapper .with_frm_style .frm_radio label, #pk-landing-wrapper .with_frm_style .frm_checkbox label {
          color: #000000 !important;
          line-height: 1.3;
      }
#pk-landing-wrapper .pk-toggle-form.pk-bg-white.pk-box-shadow-dark.pk-relative {
          padding: 20px !important;
      }
#pk-landing-wrapper .frm_forms select, #pk-landing-wrapper .frm_forms select option {
        color: #000 !important;
        background-color: #fff !important;
    }
#pk-landing-wrapper .frm_forms select option.frm-select-placeholder, #pk-landing-wrapper .frm_forms select option[value=""] {
        color: #666 !important;
    }
#pk-landing-wrapper select#field_ka8fd {
        margin-top: 10px !important;
        max-height: none !important;
        height: auto !important;
    }

/* ================= gartner-postquantum-readiness  ->  .pkv-gartner ================= */
.pkv-gartner {--navy:#1E3074;--cyan:#09BCEF;--frost:#0FE4A2;--coral:#F95557;--ink:#484848;--grey:#F1F5FA;--white:#fff;font-family:'Lato',-apple-system,sans-serif;color:var(--ink);line-height:1.7;font-size:20px;font-weight:400;overflow-x:hidden}
.pkv-gartner * {box-sizing:border-box;margin:0;padding:0}
.pkv-gartner h1, .pkv-gartner h2, .pkv-gartner h3, .pkv-gartner h4 {font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-weight:400;letter-spacing:-0.01em}
.pkv-gartner h1 {font-size:clamp(2.2rem,4.6vw,3.1rem);line-height:1.1}
.pkv-gartner h2 {font-size:clamp(1.9rem,4vw,2.875rem);line-height:1.2}
.pkv-gartner h3 {font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.3}
.pkv-gartner p {font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pkv-gartner a {color:var(--cyan);text-decoration:none}
.pkv-gartner .pkvg-wrap {max-width:1300px;margin:0 auto;padding:0 24px}
.pkv-gartner .pkvg-section {width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.pkv-gartner .pkvg-narrow {max-width:1300px;}
.pkv-gartner .pkvg-section{padding:var(--pk-sec-y) 0}
.pkv-gartner .pkvg-hero{padding:30px 0 var(--pk-sec-y-hero)}
.pkv-gartner .pkvg-grey {background:var(--grey)}
.pkv-gartner .pkvg-eyebrow {display:inline-flex;align-items:center;gap:12px;font-family:'Lato',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.pkv-gartner .pkvg-eyebrow::before {content:"";width:34px;height:2px;background:var(--cyan);display:inline-block}
.pkv-gartner .pkvg-lead {font-size:1.2rem;line-height:1.55;color:var(--ink);max-width:1300px}
.pkv-gartner .pkvg-btn {display:inline-block;border-radius:999px;padding:16px 34px;font-family:'Lato',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s;border:2px solid transparent;line-height:1.1;text-decoration:none!important}
.pkv-gartner .pkvg-btn-primary {background:var(--cyan)!important;color:#06283c!important}
.pkv-gartner .pkvg-btn-primary:hover {background:var(--navy)!important;color:#fff!important}
.pkv-gartner .pkvg-btn-outline {background:transparent!important;border-color:var(--navy)!important;color:var(--navy)!important}
.pkv-gartner .pkvg-btn-outline:hover {background:var(--cyan)!important;border-color:var(--cyan)!important;color:#06283c!important}
.pkv-gartner .pkvg-cta-row {display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.pkv-gartner .pkvg-grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pkv-gartner .pkvg-grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.pkv-gartner .pkvg-hero-top {max-width:1300px}
.pkv-gartner .pkvg-hero-top .pkvg-lead {max-width:1300px;margin-top:18px}
.pkv-gartner .pkvg-hero-module {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1300px;margin:48px 0 0}
.pkv-gartner .pkvg-hm-cover {display:flex;justify-content:flex-start}
.pkv-gartner .pkvg-cover {border:1px solid #d9e0ec;border-radius:10px;overflow:hidden;box-shadow:0 16px 40px rgba(30,48,116,0.14);background:#fff;max-width:500px;width:100%}
.pkv-gartner .pkvg-cover-img {display:block;width:100%;height:auto}
.pkv-gartner .pkvg-form {background:radial-gradient(130% 130% at 100% 0%, rgba(9,188,239,0.12) 0%, rgba(9,188,239,0) 52%), linear-gradient(157deg,#21346f 0%,#15224f 100%);border-radius:16px;padding:36px 36px 38px;box-shadow:0 20px 50px rgba(15,24,64,0.20)}
.pkv-gartner .pkvg-form-h {font-family:Georgia,serif;font-size:1.5rem;color:#fff;margin-bottom:8px}
.pkv-gartner .pkvg-form-sub {font-size:0.92rem!important;color:rgba(255,255,255,0.78)!important;margin-bottom:22px}
.pkv-gartner .pkvg-field {display:block;width:100%;background:#fff;border:none;border-radius:999px;padding:16px 22px;font-family:'Lato',sans-serif;font-size:1rem;color:#1d1d1f;margin-bottom:18px}
.pkv-gartner .pkvg-field::placeholder {color:#8a97ad}
.pkv-gartner .pkvg-consent {display:flex;gap:12px;align-items:flex-start;font-size:0.8rem;line-height:1.5;color:rgba(255,255,255,0.85);margin-bottom:22px}
.pkv-gartner .pkvg-consent input {margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--cyan)}
.pkv-gartner .pkvg-consent a {color:var(--cyan)}
.pkv-gartner .pkvg-form .pkvg-btn-primary {width:100%;text-align:center}
.pkv-gartner .pkvg-hero-legal {max-width:1300px;margin-top:30px;font-size:0.72rem;line-height:1.55;color:#9aa3b2}
.pkv-gartner .pkvg-clock {background:#fff;border:1px solid #d9e0ec;border-radius:14px;padding:32px 34px}
.pkv-gartner .pkvg-clock-label {font-family:'Lato',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.13em;text-transform:uppercase;color:#7b8190;margin-bottom:22px}
.pkv-gartner .pkvg-clock ul {list-style:none;margin:0;padding:0}
.pkv-gartner .pkvg-clock li {position:relative;padding-left:26px;padding-bottom:22px;border-left:2px solid #e3e9f2;margin-left:5px;font-size:0.98rem;line-height:1.5;color:var(--ink)}
.pkv-gartner .pkvg-clock li:last-child {padding-bottom:0;border-left-color:transparent}
.pkv-gartner .pkvg-clock li::before {content:"";position:absolute;left:-8px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px #fff}
.pkv-gartner .pkvg-clock li.pkvg-clock-end::before {background:var(--frost)}
.pkv-gartner .pkvg-clock-date {display:block;font-family:Georgia,serif;font-size:1.1rem;color:var(--navy);font-weight:700;margin-bottom:4px}
.pkv-gartner .pkvg-move {background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:32px 30px;transition:transform .28s ease,box-shadow .28s ease}
.pkv-gartner .pkvg-move:hover {transform:translateY(-4px);box-shadow:0 18px 44px rgba(30,48,116,0.12)}
.pkv-gartner .pkvg-move-num {font-family:Georgia,serif;font-size:1.05rem;color:var(--cyan);font-weight:700;letter-spacing:0.08em}
.pkv-gartner .pkvg-move h3 {margin:10px 0 12px}
.pkv-gartner .pkvg-move p {font-size:1rem}
.pkv-gartner .pkvg-close {font-family:Georgia,serif;font-size:1.4rem;line-height:1.45;color:var(--navy);font-style:italic;margin-top:44px;max-width:820px}
.pkv-gartner.js .pkvg-reveal {opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.pkv-gartner.js .pkvg-reveal.is-visible {opacity:1;transform:none; margin-top: 30px !important;}
@media (prefers-reduced-motion:reduce) {
.pkv-gartner.js .pkvg-reveal {opacity:1;transform:none;transition:none}
}
@media (max-width:860px) {
.pkv-gartner .pkvg-section {padding:64px 0}
.pkv-gartner .pkvg-hero {padding:40px 0 48px}
.pkv-gartner .pkvg-grid-2, .pkv-gartner .pkvg-grid-3 {grid-template-columns:1fr;gap:32px}
.pkv-gartner .pkvg-hero-module {grid-template-columns:1fr;gap:32px;margin-top:36px}
.pkv-gartner .pkvg-hm-cover {order:2}
.pkv-gartner .pkvg-hm-form {order:1}
.pkv-gartner .pkvg-cover {max-width:300px}
.pkv-gartner .pkvg-close {font-size:1.2rem}
}
.pkv-gartner .pk-toggle-form .form-rev.no-fc {color:#000;background:#fff;border-radius:12px;padding:14px}
.pkv-gartner .with_frm_style .frm_radio label, .pkv-gartner .with_frm_style .frm_checkbox label {color:#000!important;line-height:1.3}
.pkv-gartner .frm_forms select, .pkv-gartner .frm_forms select option {color:#000!important;background:#fff!important}
.pkv-gartner .frm_forms select option[value=""] {color:#666!important}
.pkv-gartner .pk-toggle-reveal {background:#fff;border-radius:16px;padding:18px;box-shadow:0 20px 50px rgba(15,24,64,0.20)}
/* 1.10.78 - COLOR REMOVED, deliberately. Staging declared this pair TWICE: an earlier
   rule sets color:#000!important, and this one overrode it to #ffffff!important. The
   later rule wins, and these labels sit inside .form-rev.no-fc - a WHITE card - so the
   radio and checkbox labels rendered white on white. Bob found it in the browser.
   Dropping the declaration lets the #000 rule above apply. line-height is kept: that
   half was doing real work. Do not "restore" the colour - the duplicate is the bug. */.pkv-gartner .with_frm_style .frm_radio label, .pkv-gartner .with_frm_style .frm_checkbox label { line-height: 1.3; }
.pkv-gartner iframe#gartner-reprint-frame {
    background-color: #ffffff !important;
}

/* ================= pkware-quantum-readiness  ->  #pk-quantum-readiness ================= */
/* Same stripped-@import tail as the other two. See #pk-gartner-wrapper below. */
#pk-quantum-readiness {
    --navy: #1e3074;
    --cyan: #09bcef;
    --cyan-dark: #16a3d1;
    --frost: #0fe4a2;
    --coral: #f95557;
    --greybg: #f1f5fa;
    --text: #4d5055;

    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    color: var(--text);
    font-size: 18px;
    line-height: 1.65;
    background: #fff;
    -webkit-font-smoothing: antialiased;

    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow-x: hidden;
}
#pk-quantum-readiness *, #pk-quantum-readiness *::before, #pk-quantum-readiness *::after { box-sizing: border-box; }
.fusion-post-content #pk-quantum-readiness h1, .fusion-post-content #pk-quantum-readiness h2, .fusion-post-content #pk-quantum-readiness h3, .fusion-post-content #pk-quantum-readiness h4, .fusion-post-content #pk-quantum-readiness p, .fusion-post-content #pk-quantum-readiness ul, .fusion-post-content #pk-quantum-readiness li { margin: 0; }
#pk-quantum-readiness h1, #pk-quantum-readiness h2, #pk-quantum-readiness h3, #pk-quantum-readiness h4 {
    font-family: 'Roboto Slab', Georgia, serif;
    color: var(--navy);
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
}
#pk-quantum-readiness p { margin: 0; }
#pk-quantum-readiness a { text-decoration: none; color: inherit; }
#pk-quantum-readiness .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
#pk-quantum-readiness .narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }
#pk-quantum-readiness section { padding: var(--pk-sec-y) 0; }
#pk-quantum-readiness .bg-navy { background: var(--navy); color: #fff; }
#pk-quantum-readiness .bg-navy h1, #pk-quantum-readiness .bg-navy h2, #pk-quantum-readiness .bg-navy h3, #pk-quantum-readiness .bg-navy h4 { color: #fff; }
#pk-quantum-readiness .bg-grey { background: var(--greybg); }
#pk-quantum-readiness .bg-cyan { background: var(--cyan); color: #fff; }
#pk-quantum-readiness .bg-cyan h2, #pk-quantum-readiness .bg-cyan h4 { color: var(--navy); }
#pk-quantum-readiness .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
#pk-quantum-readiness .event-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 32px;
}
#pk-quantum-readiness .event-tag .dot {
    width: 8px; height: 8px;
    background: var(--frost);
    border-radius: 50%;
}
#pk-quantum-readiness .hero h1 {
    font-size: 48px;
    line-height: 1.15;
    margin-bottom: 24px;
    color: #fff;
}
#pk-quantum-readiness .hero h1 .accent {
    display: block;
    color: var(--cyan);
    margin-top: 8px;
}
#pk-quantum-readiness .hero-lede {
    color: var(--greybg);
    opacity: 0.9;
    margin-bottom: 40px;
}
#pk-quantum-readiness .hero-bullets {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#pk-quantum-readiness .bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #fff;
}
#pk-quantum-readiness .bullet svg {
    width: 22px; height: 22px;
    color: var(--frost);
    flex-shrink: 0;
    margin-top: 4px;
}
#pk-quantum-readiness .form-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border-top: 8px solid var(--cyan);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
#pk-quantum-readiness .form-card h3 {
    font-size: 24px;
    margin-bottom: 8px;
}
#pk-quantum-readiness .form-sub {
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 24px;
}
#pk-quantum-readiness .form-disclaimer {
    font-size: 14px;
    text-align: center;
    opacity: 0.7;
    margin-top: 16px;
}
#pk-quantum-readiness .form-rev.no-fc {
    color: #000;
    background: #ffffff !important;
    border-radius: 12px;
    padding: 10px;
}
#pk-quantum-readiness .with_frm_style .frm_radio label, #pk-quantum-readiness .with_frm_style .frm_checkbox label {
    color: #000 !important;
    line-height: 1.3;
}
#pk-quantum-readiness .frm_forms select, #pk-quantum-readiness .frm_forms select option {
    color: #000 !important;
    background: #fff !important;
}
#pk-quantum-readiness .frm_forms select option[value=""] { color: #666 !important; }
#pk-quantum-readiness .pk-toggle-reveal.form-card h2 { color: #000000 !important; }
#pk-quantum-readiness .ty-headline {
    font-size: 38px;
    margin-bottom: 16px;
}
#pk-quantum-readiness .ty-lede { margin-bottom: 28px; }
#pk-quantum-readiness .ty-subhead {
    font-size: 26px;
    margin-bottom: 16px;
}
#pk-quantum-readiness .ty-list {
    padding-left: 22px;
    margin: 0;
}
#pk-quantum-readiness .ty-list li {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 10px;
}
#pk-quantum-readiness .stage-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
}
#pk-quantum-readiness .session-card {
    background: var(--navy);
    border-radius: 16px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
#pk-quantum-readiness .preview-label {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 48px;
}
#pk-quantum-readiness .session-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#pk-quantum-readiness .session-card h4 {
    font-size: 26px;
    color: #fff;
    margin: 0;
}
#pk-quantum-readiness .session-pill {
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
#pk-quantum-readiness .session-pill svg {
    width: 20px; height: 20px;
    color: var(--cyan);
}
#pk-quantum-readiness .stage-content h2 {
    font-size: 42px;
    margin-bottom: 24px;
}
#pk-quantum-readiness .stage-content p { margin-bottom: 24px; }
#pk-quantum-readiness .stage-content p:last-child { margin-bottom: 0; }
#pk-quantum-readiness .stage-content .callout {
    font-weight: 700;
    color: var(--navy);
}
#pk-quantum-readiness .problem h2 {
    font-size: 38px;
    text-align: center;
    margin-bottom: 32px;
}
#pk-quantum-readiness .problem p { margin-bottom: 24px; }
#pk-quantum-readiness .problem p:last-child { margin-bottom: 0; }
#pk-quantum-readiness .problem-emphasis {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--coral);
}
#pk-quantum-readiness .problem-solution {
    padding: 24px;
    background: var(--greybg);
    border-radius: 12px;
    border-left: 4px solid var(--cyan);
}
#pk-quantum-readiness .problem-solution strong { color: var(--navy); }
#pk-quantum-readiness .cap-heading {
    font-size: 38px;
    text-align: center;
    margin: 0 auto var(--pk-gap-xl);
    max-width: 720px;
}
#pk-quantum-readiness .cap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
#pk-quantum-readiness .cap-card {
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#pk-quantum-readiness .cap-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
#pk-quantum-readiness .cap-icon svg { width: 24px; height: 24px; color: inherit; }
#pk-quantum-readiness .cap-icon.purple { background: rgba(39,48,116,0.1); color: #273074; }
#pk-quantum-readiness .cap-icon.cyan { background: rgba(9,188,239,0.1); color: var(--cyan); }
#pk-quantum-readiness .cap-icon.frost { background: rgba(15,228,162,0.2); color: #0dcca3; }
#pk-quantum-readiness .cap-icon.coral { background: rgba(249,85,87,0.1); color: var(--coral); }
#pk-quantum-readiness .cap-card h4 {
    font-size: 22px;
    margin-bottom: 16px;
}
#pk-quantum-readiness .proof h2 {
    font-size: 42px;
    text-align: center;
    margin-bottom: var(--pk-gap-xl);
}
#pk-quantum-readiness .proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    text-align: center;
}
#pk-quantum-readiness .proof-stat { padding: 0 24px; }
#pk-quantum-readiness .proof-stat + .proof-stat {
    border-left: 1px solid rgba(30,48,116,0.2);
}
#pk-quantum-readiness .stat-number {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 72px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 16px;
}
#pk-quantum-readiness .proof h4 {
    font-size: 22px;
    margin-bottom: 16px;
    color: #fff;
}
#pk-quantum-readiness .proof p { opacity: 0.95; }
#pk-quantum-readiness .hype-card {
    background: var(--navy);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
#pk-quantum-readiness .hype-content {
    padding: 56px;
    color: #fff;
}
#pk-quantum-readiness .hype-content h2 {
    font-size: 32px;
    margin-bottom: 24px;
    color: #fff;
}
#pk-quantum-readiness .hype-content p {
    color: var(--greybg);
    opacity: 0.9;
    margin-bottom: 32px;
}
#pk-quantum-readiness .hype-content .footnote {
    font-size: 14px;
    color: var(--cyan);
    font-weight: 600;
    margin-top: 12px;
}
#pk-quantum-readiness .btn-cyan {
    display: inline-block;
    background: var(--cyan);
    color: #fff !important;
    border-radius: 999px;
    padding: 14px 32px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
#pk-quantum-readiness .btn-cyan:hover { background: var(--cyan-dark); }
#pk-quantum-readiness .hype-image {
    background: var(--greybg);
    padding: 40px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pk-quantum-readiness .architecture-mock {
    background: #fff;
    padding: 28px;
    width: 260px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
#pk-quantum-readiness .arch-label {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--cyan);
    margin-bottom: 16px;
}
#pk-quantum-readiness .arch-layer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--greybg);
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}
#pk-quantum-readiness .arch-layer:last-child { margin-bottom: 0; }
#pk-quantum-readiness .arch-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    flex-shrink: 0;
}
#pk-quantum-readiness .credibility {
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: var(--pk-sec-y) 0;
}
#pk-quantum-readiness .cred-heading {
    font-size: 22px;
    text-align: center;
    margin-bottom: 40px;
}
#pk-quantum-readiness .cred-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
#pk-quantum-readiness .cred-item { text-align: center; }
#pk-quantum-readiness .cred-stat {
    display: block;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--cyan);
    margin-bottom: 8px;
    line-height: 1.1;
}
#pk-quantum-readiness .cred-desc { font-size: 16px; line-height: 1.4; }
#pk-quantum-readiness .closing {
    text-align: center;
    padding: var(--pk-sec-y-cta) 24px;
}
#pk-quantum-readiness .closing-inner {
    max-width: 900px;
    margin: 0 auto;
}
#pk-quantum-readiness .closing h2 {
    font-size: 38px;
    color: #fff;
    margin-bottom: 24px;
}
#pk-quantum-readiness .closing-lede {
    color: var(--greybg);
    opacity: 0.9;
    margin: 0 auto 32px;
    max-width: 720px;
}
#pk-quantum-readiness .btn-cta {
    display: inline-block;
    background: var(--cyan);
    color: #fff !important;
    border-radius: 999px;
    padding: 16px 40px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
#pk-quantum-readiness .btn-cta:hover { background: var(--cyan-dark); }
#pk-quantum-readiness .secondary-note {
    color: var(--frost);
    font-weight: 600;
    margin-top: 16px;
}
@media (max-width: 960px) {
#pk-quantum-readiness section { padding: 60px 0; }
#pk-quantum-readiness .hero-grid, #pk-quantum-readiness .stage-grid, #pk-quantum-readiness .cap-grid, #pk-quantum-readiness .proof-grid, #pk-quantum-readiness .hype-card {
        grid-template-columns: 1fr;
        gap: 40px;
    }
#pk-quantum-readiness .hero h1 { font-size: 36px; }
#pk-quantum-readiness .stage-content h2, #pk-quantum-readiness .problem h2, #pk-quantum-readiness .cap-heading, #pk-quantum-readiness .proof h2, #pk-quantum-readiness .closing h2 { font-size: 30px; }
#pk-quantum-readiness .hype-content { padding: 40px 32px; }
#pk-quantum-readiness .hype-content h2 { font-size: 26px; }
#pk-quantum-readiness .stat-number { font-size: 56px; }
#pk-quantum-readiness .cred-grid { grid-template-columns: repeat(2, 1fr); }
#pk-quantum-readiness .proof-stat + .proof-stat {
        border-left: none;
        border-top: 1px solid rgba(30,48,116,0.2);
        padding-top: 32px;
    }
#pk-quantum-readiness .form-card { padding: 28px; }
}
@media (max-width: 560px) {
#pk-quantum-readiness .hero h1 { font-size: 28px; }
#pk-quantum-readiness .cred-grid { grid-template-columns: 1fr; }
#pk-quantum-readiness .ty-headline { font-size: 30px; }
}

/* ================= gartner-security-risk-management-summit-2026  ->  #pk-gartner-wrapper ================= */
/*
 * A GOOGLE FONTS URL CONTAINS SEMICOLONS, AND THAT IS THE WHOLE BUG.
 *
 * Bob, 2026-08-15: "Something about that page doesn't render right. Probably
 * because the original was a dark header, one off."
 *
 * Right that it was the dark header, wrong about the cause - nothing was one-off.
 * This line used to read:
 *
 *     600;700&family=Roboto+Slab:wght@600;700;800&display=swap'); #pk-gartner-wrapper {
 *
 * That is the tail of the page's
 * `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700&...')`.
 * Removing the @import was correct - divergence 12 in fixed-in-development.md, the
 * theme loads its own faces and a font request from page content cannot be consent
 * gated. The removal terminated on `;`, and `wght@300;400;600;700` is full of them,
 * so it cut inside the URL and left everything after the first semicolon behind.
 *
 * WHAT IT BROKE, AND WHY IT LOOKED LIKE A ONE-OFF DESIGN PROBLEM. The leftover text
 * made the selector invalid, so the browser discarded THE ENTIRE BLOCK - which is
 * where --navy, --cyan, --frost, --coral, --greybg and --text are declared, along
 * with the full-bleed width:100vw. Every `background: var(--navy)` on the page then
 * resolved to nothing and painted white. The layout rules are separate and stayed
 * valid, which is why the page looked structurally right and simply lost its colour.
 *
 * THREE PAGES CARRIED THIS, not one: #pk-landing-wrapper (cmmc-compliance),
 * #pk-quantum-readiness and #pk-gartner-wrapper. Only this one was noticed.
 *
 * Worth pairing with the note at line ~4253: @import is only honoured at the top of
 * a sheet, so an @import that survives into the middle of this file does nothing
 * anyway. Cutting it was never the risk. Cutting it on the wrong character was.
 */
#pk-gartner-wrapper {
    --navy: #1e3074;
    --cyan: #09bcef;
    --cyan-dark: #16a3d1;
    --frost: #0fe4a2;
    --coral: #f95557;
    --greybg: #f1f5fa;
    --text: #4d5055;

    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    color: var(--text);
    font-size: 18px;
    line-height: 1.65;
    background: #fff;
    -webkit-font-smoothing: antialiased;

    
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow-x: hidden;
}
#pk-gartner-wrapper *, #pk-gartner-wrapper *::before, #pk-gartner-wrapper *::after { box-sizing: border-box; }
.fusion-post-content #pk-gartner-wrapper h1, .fusion-post-content #pk-gartner-wrapper h2, .fusion-post-content #pk-gartner-wrapper h3, .fusion-post-content #pk-gartner-wrapper h4, .fusion-post-content #pk-gartner-wrapper p, .fusion-post-content #pk-gartner-wrapper ul, .fusion-post-content #pk-gartner-wrapper li { margin: 0; }
#pk-gartner-wrapper h1, #pk-gartner-wrapper h2, #pk-gartner-wrapper h3, #pk-gartner-wrapper h4 {
    font-family: 'Roboto Slab', Georgia, serif;
    color: var(--navy);
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
}
#pk-gartner-wrapper p { margin: 0; }
#pk-gartner-wrapper a { text-decoration: none; color: inherit; }
#pk-gartner-wrapper .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
#pk-gartner-wrapper .narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }
#pk-gartner-wrapper section { padding: var(--pk-sec-y) 0; position: relative; }
#pk-gartner-wrapper .bg-navy { background: var(--navy); color: #fff; }
#pk-gartner-wrapper .bg-navy h1, #pk-gartner-wrapper .bg-navy h2, #pk-gartner-wrapper .bg-navy h3, #pk-gartner-wrapper .bg-navy h4 { color: #fff; }
#pk-gartner-wrapper .bg-grey { background: var(--greybg); }
#pk-gartner-wrapper .bg-cyan { background: var(--cyan); color: #fff; }
#pk-gartner-wrapper .bg-cyan h2, #pk-gartner-wrapper .bg-cyan h4 { color: var(--navy); }
#pk-gartner-wrapper .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: start;
    position: relative;
}
#pk-gartner-wrapper .hero-grid > div {
    position: relative;
}
#pk-gartner-wrapper .hero-grid > div:last-child {
    z-index: 10;
}
#pk-gartner-wrapper .event-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 32px;
}
#pk-gartner-wrapper .event-tag .dot {
    width: 8px; height: 8px;
    background: var(--frost);
    border-radius: 50%;
}
#pk-gartner-wrapper .hero h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #fff;
}
#pk-gartner-wrapper .hero h1 .accent {
    display: block;
    color: var(--cyan);
    margin-top: 8px;
}
#pk-gartner-wrapper .hero-lede {
    color: var(--greybg);
    opacity: 0.9;
    margin-bottom: 40px;
}
#pk-gartner-wrapper .hero-bullets {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#pk-gartner-wrapper .bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #fff;
}
#pk-gartner-wrapper .bullet svg {
    width: 22px; height: 22px;
    color: var(--frost);
    flex-shrink: 0;
    margin-top: 4px;
}
#pk-gartner-wrapper .form-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border-top: 8px solid var(--cyan);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    position: relative;
    z-index: 10;
}
#pk-gartner-wrapper .form-card input, #pk-gartner-wrapper .form-card select, #pk-gartner-wrapper .form-card textarea, #pk-gartner-wrapper .form-card button, #pk-gartner-wrapper .form-card label, #pk-gartner-wrapper .form-card .frm_form_field {
    position: relative;
    z-index: 11;
    pointer-events: auto;
}
#pk-gartner-wrapper .form-card h3 {
    font-size: 24px;
    margin-bottom: 8px;
}
#pk-gartner-wrapper .form-sub {
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 24px;
}
#pk-gartner-wrapper .form-disclaimer {
    font-size: 14px;
    text-align: center;
    opacity: 0.7;
    margin-top: -10px;
}
#pk-gartner-wrapper .form-rev.no-fc {
    color: #000;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    position: relative;
    z-index: 10;
}
#pk-gartner-wrapper .with_frm_style .frm_radio label, #pk-gartner-wrapper .with_frm_style .frm_checkbox label {
    color: #000 !important;
    line-height: 1.3;
}
#pk-gartner-wrapper .frm_forms select, #pk-gartner-wrapper .frm_forms select option {
    color: #000 !important;
    background: #fff !important;
}
#pk-gartner-wrapper .frm_forms select option[value=""] { color: #666 !important; }
#pk-gartner-wrapper .ty-headline {
    font-size: 38px;
    margin-bottom: 16px;
}
#pk-gartner-wrapper .ty-lede { margin-bottom: 28px; }
#pk-gartner-wrapper .ty-subhead {
    font-size: 26px;
    margin-bottom: 16px;
}
#pk-gartner-wrapper .ty-list {
    padding-left: 22px;
    margin: 0;
}
#pk-gartner-wrapper .ty-list li {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 10px;
}
#pk-gartner-wrapper .stage-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
}
#pk-gartner-wrapper .session-card {
    aspect-ratio: 1/1;
    background: var(--navy);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
#pk-gartner-wrapper .preview-label {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    align-self: flex-start;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 48px;
    margin-top: -100%;
    margin-bottom: auto;
}
#pk-gartner-wrapper .session-card h4 {
    font-size: 26px;
    color: #fff;
    margin-bottom: 16px;
}
#pk-gartner-wrapper .session-pill {
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
#pk-gartner-wrapper .session-pill svg {
    width: 20px; height: 20px;
    color: var(--cyan);
}
#pk-gartner-wrapper .stage-content h2 {
    font-size: 42px;
    margin-bottom: 24px;
}
#pk-gartner-wrapper .stage-content p { margin-bottom: 24px; }
#pk-gartner-wrapper .stage-content p:last-child { margin-bottom: 0; }
#pk-gartner-wrapper .stage-content .callout {
    font-weight: 700;
    color: var(--navy);
}
#pk-gartner-wrapper .problem h2 {
    font-size: 38px;
    text-align: center;
    margin-bottom: 32px;
}
#pk-gartner-wrapper .problem p { margin-bottom: 24px; }
#pk-gartner-wrapper .problem p:last-child { margin-bottom: 0; }
#pk-gartner-wrapper .problem-emphasis {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--coral);
}
#pk-gartner-wrapper .problem-solution {
    padding: 24px;
    background: var(--greybg);
    border-radius: 12px;
    border-left: 4px solid var(--cyan);
}
#pk-gartner-wrapper .problem-solution strong { color: var(--navy); }
#pk-gartner-wrapper .cap-heading {
    font-size: 38px;
    text-align: center;
    margin: 0 auto var(--pk-gap-xl);
    max-width: 720px;
}
#pk-gartner-wrapper .cap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
#pk-gartner-wrapper .cap-card {
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#pk-gartner-wrapper .cap-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
#pk-gartner-wrapper .cap-icon svg { width: 24px; height: 24px; }
#pk-gartner-wrapper .cap-icon.purple { background: rgba(39,48,116,0.1); color: #273074; }
#pk-gartner-wrapper .cap-icon.cyan { background: rgba(9,188,239,0.1); color: var(--cyan); }
#pk-gartner-wrapper .cap-icon.frost { background: rgba(15,228,162,0.2); color: #0dcca3; }
#pk-gartner-wrapper .cap-icon.coral { background: rgba(249,85,87,0.1); color: var(--coral); }
#pk-gartner-wrapper .cap-icon svg { color: inherit; }
#pk-gartner-wrapper .cap-card h4 {
    font-size: 22px;
    margin-bottom: 16px;
}
#pk-gartner-wrapper .proof h2 {
    font-size: 42px;
    text-align: center;
    margin-bottom: var(--pk-gap-xl);
}
#pk-gartner-wrapper .proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    text-align: center;
}
#pk-gartner-wrapper .proof-stat { padding: 0 24px; }
#pk-gartner-wrapper .proof-stat + .proof-stat {
    border-left: 1px solid rgba(30,48,116,0.2);
}
#pk-gartner-wrapper .stat-number {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 88px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 16px;
}
#pk-gartner-wrapper .proof h4 {
    font-size: 22px;
    margin-bottom: 16px;
    color: #fff;
}
#pk-gartner-wrapper .proof p { opacity: 0.95; }
#pk-gartner-wrapper .hype-card {
    background: var(--navy);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
#pk-gartner-wrapper .hype-content {
    padding: 56px;
    color: #fff;
}
#pk-gartner-wrapper .hype-content h2 {
    font-size: 32px;
    margin-bottom: 24px;
    color: #fff;
}
#pk-gartner-wrapper .hype-content p {
    color: var(--greybg);
    opacity: 0.9;
    margin-bottom: 32px;
}
#pk-gartner-wrapper .hype-content .footnote {
    font-size: 14px;
    color: var(--cyan);
    font-weight: 600;
    margin-top: 12px;
}
#pk-gartner-wrapper .btn-cyan {
    display: inline-block;
    background: var(--cyan);
    color: #fff !important;
    border-radius: 999px;
    padding: 14px 32px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
#pk-gartner-wrapper .btn-cyan:hover { background: var(--cyan-dark); }
#pk-gartner-wrapper .hype-image {
    background: var(--greybg);
    padding: 40px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pk-gartner-wrapper .report-mock {
    background: #fff;
    padding: 24px 24px 48px;
    width: 240px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
}
#pk-gartner-wrapper .report-mock .bar-title {
    height: 8px; width: 33%;
    background: var(--navy);
    margin-bottom: 32px;
}
#pk-gartner-wrapper .report-mock .bar-line {
    height: 14px;
    background: #e5e7eb;
    margin-bottom: 8px;
}
#pk-gartner-wrapper .report-mock .bar-line.short { width: 80%; margin-bottom: 24px; }
#pk-gartner-wrapper .report-mock .chart {
    height: 128px;
    border-bottom: 2px solid #d1d5db;
    border-left: 2px solid #d1d5db;
    position: relative;
}
#pk-gartner-wrapper .report-mock .chart svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    color: var(--cyan);
}
#pk-gartner-wrapper .credibility {
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: var(--pk-sec-y) 0;
}
#pk-gartner-wrapper .cred-heading {
    font-size: 22px;
    text-align: center;
    margin-bottom: 40px;
}
#pk-gartner-wrapper .cred-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
#pk-gartner-wrapper .cred-item {
    text-align: center;
}
#pk-gartner-wrapper .cred-stat {
    display: block;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--cyan);
    margin-bottom: 8px;
    line-height: 1.1;
}
#pk-gartner-wrapper .cred-desc { font-size: 16px; line-height: 1.4; }
#pk-gartner-wrapper .closing {
    text-align: center;
    padding: var(--pk-sec-y-cta) 24px;
}
#pk-gartner-wrapper .closing-inner {
    max-width: 900px;
    margin: 0 auto;
}
#pk-gartner-wrapper .closing h2 {
    font-size: 38px;
    color: #fff;
    margin-bottom: 24px;
}
#pk-gartner-wrapper .closing-lede {
    color: var(--greybg);
    opacity: 0.9;
    margin: 0 auto 32px;
    max-width: 720px;
}
#pk-gartner-wrapper .btn-cta {
    display: inline-block;
    background: var(--cyan);
    color: #fff !important;
    border-radius: 999px;
    padding: 16px 40px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
#pk-gartner-wrapper .btn-cta:hover { background: var(--cyan-dark); }
#pk-gartner-wrapper .secondary-note {
    color: var(--frost);
    font-weight: 600;
    margin-top: 16px;
}
@media (max-width: 960px) {
#pk-gartner-wrapper section { padding: 60px 0; }
#pk-gartner-wrapper .hero-grid, #pk-gartner-wrapper .stage-grid, #pk-gartner-wrapper .cap-grid, #pk-gartner-wrapper .proof-grid, #pk-gartner-wrapper .hype-card {
        grid-template-columns: 1fr;
        gap: 40px;
    }
#pk-gartner-wrapper .hero h1 { font-size: 38px; }
#pk-gartner-wrapper .stage-content h2, #pk-gartner-wrapper .problem h2, #pk-gartner-wrapper .cap-heading, #pk-gartner-wrapper .proof h2, #pk-gartner-wrapper .closing h2 { font-size: 30px; }
#pk-gartner-wrapper .hype-content { padding: 40px 32px; }
#pk-gartner-wrapper .hype-content h2 { font-size: 26px; }
#pk-gartner-wrapper .stat-number { font-size: 64px; }
#pk-gartner-wrapper .cred-grid { grid-template-columns: repeat(2, 1fr); }
#pk-gartner-wrapper .proof-stat + .proof-stat {
        border-left: none;
        border-top: 1px solid rgba(30,48,116,0.2);
        padding-top: 32px;
    }
#pk-gartner-wrapper .form-card { padding: 28px; }
}
@media (max-width: 560px) {
#pk-gartner-wrapper .hero h1 { font-size: 30px; }
#pk-gartner-wrapper .cred-grid { grid-template-columns: 1fr; }
#pk-gartner-wrapper .ty-headline { font-size: 30px; }
}
#pk-gartner-wrapper .pk-toggle-reveal.form-card {
    color: #000000 !important;
}
#pk-gartner-wrapper .pk-toggle-reveal.form-card h2 {
    color: #000000 !important;
}
#pk-gartner-wrapper .pk-toggle-reveal.form-card h3 {
    color: #000000 !important;
}
#pk-gartner-wrapper p.form-sub {
    color: #4d5055 !important;
}
#pk-gartner-wrapper p.form-disclaimer {
    color: #4d5055 !important;
}
#pk-gartner-wrapper .form-rev.no-fc {
    color: #000;
    border-radius: 12px;
    padding: 10px;
    background-color: #ffffff !important;
    background: #ffffff !important;
  margin-top: -20px;
}
#pk-gartner-wrapper #gartner-frame:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #fff;
  }
#pk-gartner-wrapper #gartner-frame:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #fff;
  }
#pk-gartner-wrapper .frm_primary_label {
    padding-top: 0px !important;
    padding-bottom: 16px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
#pk-gartner-wrapper .frm_form_field {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

/* ==========================================================================
   TERM ARCHIVES
   Added 1.10.80, 2026-08-14, with archive.php and inc/archive-copy.php.

   Only the heading and the intro are styled here. Everything below them is
   rendered by the pk27 shortcodes in the PKWARE Shortcodes plugin, which print
   their own CSS inline - pk27_styles(), pk27f_styles(), pk27e_styles(). That
   duplication was measured at about 2.3 KB per archive request and deliberately
   left alone: the plugin is self-contained by design, and moving its CSS here
   would break that for a saving this file does not need.

   So there is no .pk27 selector in this stylesheet and there should not be one.
   If a card needs changing, it changes in the plugin.

   CENTRED, because staging is. Both the title and the intro on every archive
   layout there carry content_align="center".
   ========================================================================== */
/* TOP SPACE, THIRD PASS - 1.10.83. Bob, having seen it with the breadcrumb in
   place: "too much padding above the title, too little padding after the second
   mini-nav".

   The history is worth keeping because the target moved as the page grew:
     1.10.80  --pk-space-xl   3rem, the original guess
     1.10.81  --pk-space-md   1.5rem, halved on the first complaint
     1.10.83  --pk-space-2xs  0.5rem

   What changed between the second and third pass is that the breadcrumb arrived
   above this block. .pk-crumbs already carries margin-bottom:10px, so the real
   gap above the h1 was that 10px PLUS this padding - about 34px, and reading as a
   band of nothing between two pieces of text. 8px here leaves roughly 18px, which
   is a gap rather than a gulf.

   MEASURE THE STACK, NOT THE RULE. Two of the three passes here were spent
   adjusting one value while a sibling margin supplied more space than the value
   being adjusted. */
.pk-archive {
  padding-block: var(--pk-space-2xs) var(--pk-space-2xl);
}

/* THIS MARGIN IS THE GAP UNDER THE ARCHIVE NAV, which is the other half of Bob's
   note. The nav is the last thing in the head on every archive now that it runs on
   all eleven, so whatever this value is, it is what separates a row of eleven
   links from the first row of cards. --pk-space-lg (2rem) let them crowd; 3rem
   reads as two distinct bands. */
.pk-archive__head {
  margin-block-end: var(--pk-space-xl);
  text-align: center;
}

/* SERIF, AND THE FIRST ATTEMPT AT THIS GOT IT BACKWARDS - corrected 1.10.82.

   The symptom Bob reported was that /events and /blog had different headings:
   /events is a PAGE, so its content is wrapped in #pkw to reach .sec / .wrap /
   .reveal, and `#pkw h1..h4` sets font-family:var(--serif) at weight 400. A term
   archive has no #pkw wrapper, so it fell through to the global
   `h1 { font-weight: 900 }` in Lato. #pkw h1 is (1,0,1) and .pk-archive__title
   was (0,1,0), so the id selector won every property the class had not declared -
   and the class had not declared the font.

   THE FIRST FIX PINNED BOTH TO LATO BLACK. Wrong direction, and comparing the two
   hosts side by side is what showed it: staging's archive h1 is a serif, and so is
   the h1 on all 65 converted pages in this theme, because they all live under
   #pkw. The sans archives were the odd ones out, not /events.

   So this now matches BOTH the archive and the rest of the site: Georgia at 400
   with #pkw's -.01em tracking. No #pkw override is needed any more - `#pkw h1`
   independently resolves to Georgia, 400, -.01em and #1E3074, which is
   declaration-for-declaration what this rule sets (--head and --pk-navy are both
   #1E3074, checked). Two routes, one appearance, and nothing to keep in sync. */
.pk-archive__title {
  color: var(--pk-color-heading);
  font-family: var(--pk-font-serif);
  font-size: var(--pk-text-4xl);
  font-weight: var(--pk-weight-regular);
  letter-spacing: -0.01em;
  line-height: var(--pk-leading-tight);
  margin-block: 0;
}

/* ---- the archive nav: staging's "cool mini menu", on every archive ----

   Staging's version is an Avada nav menu at 18px, 20px gaps, centred, 20px below
   the intro, on the six resources archives only. Those values are kept; the
   scope is not - it now carries eleven items and runs on all ten archives plus
   /events. See the long note in inc/archive-copy.php.

   WRAPS RATHER THAN SCROLLS. Eleven links do not fit one row at most widths, and
   a horizontally scrolling nav hides its own items. */
.pk-archive-nav { display: flex; flex-direction: column; align-items: center; gap: var(--pk-pill-row-gap); margin-block-start: var(--pk-space-md); margin-block-end: var(--pk-sec-y); }

.pk-archive-nav__list { display: flex; flex-wrap: wrap; gap: var(--pk-pill-gap); justify-content: center; list-style: none; margin: 0; padding: 0; }

.pk-archive-nav__item {
  margin: 0;
}

.pk-archive-nav__link { /* styling comes from .pk-pill - see the component block */ }

.pk-archive-nav__link:hover { /* .pk-pill:hover */ }
.pk-archive-nav__link.is-current:hover { /* .pk-pill.is-current */ }
#pkw .pk-archive-nav__link:hover { /* .pk-pill:hover */ }
.pk-archive-nav__link:focus-visible { /* .pk-pill:focus-visible */ }

/* The archive you are already on. Bold and in the heading colour rather than
   removing the link: it stays focusable and keyboard users keep a consistent
   tab order across all eleven. */
.pk-archive-nav__link.is-current { /* .pk-pill.is-current */ }

/* #pkw sets its own link colour and underline behaviour, so /events needs the
   nav pinned to the same values the archives use. */
#pkw .pk-archive-nav__link { /* .pk-pill, unchanged inside #pkw */ }

#pkw .pk-archive-nav__link.is-current { /* .pk-pill.is-current */ }

/* The intro is one sentence. Constrained to the narrow container width so a long
   one wraps to two comfortable lines instead of one 1200px line, and centred
   inside the wider container the cards below it use. */
.pk-archive__intro {
  color: var(--pk-slate);
  font-size: var(--pk-text-lg);
  line-height: var(--pk-leading-normal);
  margin-block: var(--pk-space-sm) 0;
  margin-inline: auto;
  max-width: var(--pk-container-narrow);
}

/* THE INTRO WAS NOT CENTRED ON /events, AND THE RULE ABOVE ALREADY SAID IT SHOULD BE -
   fixed 2026-08-19. Bob: "events sub header is not centered."

   `#pkw p{margin:0}` at line 1245 is the site-wide paragraph reset, specificity (1,0,1).
   `.pk-archive__intro` is (0,1,0). So the reset WINS and zeroes both the auto margins and the
   top gap declared right above. The paragraph keeps its 780px max-width and therefore sits
   flush LEFT inside a container the cards below it centre in - and because .pk-archive__head
   is text-align:center, the WORDS look centred while the BOX does not, which is why it reads
   as a broken indent rather than as a centring failure.

   /events IS THE ONLY ARCHIVE THIS REACHES. It is a PAGE, so its content is wrapped in #pkw
   to get .sec / .wrap / .reveal. The other ten archives are term archives with no #pkw
   wrapper, so `#pkw p` never applies and their intro has been centred correctly all along.
   That is also why this is scoped to #pkw rather than written as a blanket !important: the
   rule exists only where the conflict exists.

   SECOND TIME TODAY FOR THIS EXACT SHAPE. #pkw .sec-head p:not(.eyebrow) needed
   margin-inline:auto this morning for the same reason - a capped paragraph inside a centred
   block, with the cap surviving and the auto margins lost. A max-width without auto margins
   IS the bug; worth checking any other capped paragraph under #pkw. */
#pkw .pk-archive__intro {
  margin-block: var(--pk-space-sm) 0;
  margin-inline: auto;
}

@media (max-width: 782px) {

  /* Same two moves as the desktop rules, scaled down a step each. The breadcrumb
     shrinks its own padding at this width too, so the gap above the h1 stays
     proportional rather than collapsing. */
  .pk-archive {
    padding-block: var(--pk-space-3xs) var(--pk-space-xl);
  }

  .pk-archive__head {
    margin-block-end: var(--pk-space-lg);
  }

  .pk-archive__title {
    font-size: var(--pk-text-3xl);
  }

  .pk-archive__intro {
    font-size: var(--pk-text-base);
  }

  /* Tighter gaps and a step down in size, or eleven items become five rows. */
  .pk-archive-nav__list { display: flex; flex-wrap: wrap; gap: var(--pk-pill-gap); justify-content: center; list-style: none; margin: 0; padding: 0; }

  .pk-archive-nav__link { /* .pk-pill handles its own responsive padding */ }
}

/* ==========================================================================
   PHOTO STRIP
   Added 1.10.80, 2026-08-14, for /events. Replaces the Avada fusion_images
   carousel on that page - swiper + slick + jQuery, four libraries to show six
   photographs.

   WHAT WAS KEPT FROM STAGING, because these are the deliberate design values and
   not defaults: 15px between items (column_spacing), a 1px #e9eaee border on each
   (border_width / border_color), a zoom on hover (hover-type-zoomin), and images
   capped to 250px tall by the page's own inline style.

   HEIGHT-NORMALISED, NOT COLUMN-FITTED, and that is the one real decision here.
   Staging declares columns="4" but also picture_size="fixed", and the six photos
   have five different aspect ratios (1.33 to 1.78, measured from /wp/v2/media).
   Forcing them into four equal columns would either crop them or letterbox them.
   Giving every item the same HEIGHT and letting its width follow keeps all six
   ratios intact and still reads as a row of about four photos with more to come -
   the same trick the landing asset thumbnails use further down this file.

   NO LIBRARY. A flex row with scroll-snap is the whole mechanism, so with
   scripting off it stays a natively scrollable, touch-swipeable strip. The two
   nav buttons in components.js are the enhancement, not the mechanism, which is
   why they are hidden until the script confirms they work.
   ========================================================================== */
.pk-photostrip-sec {
  padding-block: 0 var(--pk-space-2xl);
}

.pk-photostrip {
  position: relative;
}

.pk-photostrip__track {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  /* The nav buttons and native touch scrolling both cover this, and a scrollbar
     under a row of bordered photos reads as part of the last one. */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pk-photostrip__track::-webkit-scrollbar {
  display: none;
}

/* The track is focusable so the strip is reachable and scrollable by keyboard -
   arrow keys act on a focused scroll container natively, with no JS. */
.pk-photostrip__track:focus-visible {
  outline: 2px solid var(--pk-color-focus);
  outline-offset: 4px;
}

.pk-photostrip__item {
  background: var(--pk-white);
  border: 1px solid #e9eaee;
  /* 20px, 2026-08-19. Bob: "these three images on events should have the 20px border-radius
     to be consistent." Same value as .quote-card, .form-card, .cov and the hero art's
     .cov-art--crisp - the site's card radius, not a new number.

     IT GOES ON THE ITEM, NOT THE img, and the overflow:hidden below is why that works: the
     image is already clipped to this box so the hover scale(1.06) stays contained, so a radius
     here rounds the photo for free. Putting it on the img instead would leave the item's own
     1px border square around a rounded photo. */
  border-radius: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  scroll-snap-align: start;
}

.pk-photostrip__item img {
  display: block;
  height: 250px;
  max-width: none;
  transition: transform 0.3s ease;
  width: auto;
}

.pk-photostrip__item:hover img {
  transform: scale(1.06);
}

.pk-photostrip__nav {
  align-items: center;
  background: var(--pk-white);
  border: 1px solid var(--pk-color-border);
  border-radius: 50%;
  box-shadow: var(--pk-shadow-md);
  color: var(--pk-navy);
  cursor: pointer;
  display: none;
  font-size: 1.25rem;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  z-index: 2;
}

/* Shown only once components.js has bound them. A button that scrolls nothing
   because its handler never ran is worse than no button. */
.pk-photostrip.pk-photostrip--js .pk-photostrip__nav {
  display: flex;
}

/* Three classes, so it outranks the rule above rather than tying on two and
   depending on source order. Set when the track has nothing to scroll. */
.pk-photostrip.pk-photostrip--js.pk-photostrip--nonav .pk-photostrip__nav {
  display: none;
}

.pk-photostrip__nav[disabled] {
  cursor: default;
  opacity: 0.35;
}

.pk-photostrip__nav--prev {
  left: -14px;
}

.pk-photostrip__nav--next {
  right: -14px;
}

/* ==========================================================================
   MAKE IT OBVIOUS THERE ARE SIX AND THAT THEY SCROLL - 2026-08-19. Bob: "it's
   not readily apparent that there are six images or that they are scrollable,
   can you fix that visually here?"

   THE MACHINERY WAS ALREADY COMPLETE AND CORRECT. components.js binds the two
   buttons, adds .pk-photostrip--js, sets .pk-photostrip--nonav when there is
   nothing to scroll, and toggles [disabled] on each button at the ends. Nothing
   here is a fix to broken behaviour; all three problems are that every cue was
   suppressed at once:

     1. the buttons are WHITE CIRCLES ON A WHITE PAGE with a 1px hairline border
        and sit at left/right:-14px, outside the container - almost invisible
     2. prev starts [disabled], which is opacity:.35, so the one on the side you
        read first is the faintest thing on the page
     3. the scrollbar is deliberately hidden - scrollbar-width:none plus the
        ::-webkit-scrollbar rule - which removes the last native hint

   BUTTONS GO NAVY. A filled navy circle with a white glyph reads instantly
   against white and matches the button language used everywhere else. Frost on
   hover, which is the same pairing .pk-btn-demo got in the header today.

   THE EDGE FADES ARE DRIVEN BY THE JS'S OWN STATE, which is the part worth
   keeping. :has() lets the container react to whether a button is [disabled], so
   the fade on each side appears exactly when there is more content that way and
   disappears at the end of the scroll - no new JS, no new class, no duplicated
   state to drift. That is only possible because components.js already maintains
   [disabled] accurately. 21 other :has() selectors in this file, so the idiom is
   established.

   POINTER-EVENTS:NONE AND z-index:1 ARE BOTH LOAD-BEARING. The fades sit over the
   photos, so without pointer-events:none they would swallow drag-scroll and the
   hover zoom on the first and last item; and the buttons are z-index:2, so the
   fades must stay below them or a navy circle would be washed out by the gradient
   meant to sit under it.

   THE FADE COLOUR IS var(--pk-white) because .pk-photostrip-sec sets no
   background and inherits the page. If this strip is ever placed on a tinted
   band, these two gradients are what will look wrong.
   ========================================================================== */
/* THE #pkw SELECTOR IS REQUIRED, AND IT IS WHY THE FIRST ATTEMPT DID NOTHING.
   Bob: "these buttons are still white." They were not white - they had no
   background at all.

   `#pkw button{font-family:inherit;cursor:pointer;border:0;background:none;
   color:inherit}` at line 1276 is specificity (1 id, 0 classes, 1 element).
   `.pk-photostrip__nav` is (0,1,0). The id wins, so background:none, border:0 and
   color:inherit all applied and BOTH the base rule's white fill and my navy fill
   lost. That also means the original design never rendered as written: the button
   was transparent with only a box-shadow, which is the faint ring in the
   screenshot and the real reason it was invisible.

   BOTH SELECTORS ARE LISTED ON PURPOSE. #pkw .pk-photostrip__nav is (1,1,0) and
   beats #pkw button inside the wrapper - which is where /events lives. The bare
   .pk-photostrip__nav is kept because the strip is not inherently a #pkw
   component: a term archive renders with no #pkw wrapper at all, and there
   `#pkw button` never applies, so the unscoped rule is the one that works. A
   selector list matches each independently, so each context gets the right one.

   THIRD TIME TODAY FOR THIS EXACT SHAPE - #pkw plus an element outranking a
   class. `#pkw p{margin:0}` beat .pk-archive__intro's auto margins, and
   #pkw .sec--roomy beat .sec--tight. Worth checking specificity against the #pkw
   element resets before assuming a class rule lands. */
.pk-photostrip__nav,
#pkw .pk-photostrip__nav {
  background: var(--pk-navy);
  border-color: transparent;
  color: var(--pk-white);
}

.pk-photostrip__nav:not([disabled]):hover,
.pk-photostrip__nav:not([disabled]):focus-visible,
#pkw .pk-photostrip__nav:not([disabled]):hover,
#pkw .pk-photostrip__nav:not([disabled]):focus-visible {
  background: var(--pk-frost);
  color: var(--pk-navy);
}

.pk-photostrip:has(.pk-photostrip__nav--next:not([disabled]))::after,
.pk-photostrip:has(.pk-photostrip__nav--prev:not([disabled]))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 1;
  pointer-events: none;
}

.pk-photostrip:has(.pk-photostrip__nav--prev:not([disabled]))::before {
  left: 0;
  background: linear-gradient(90deg, var(--pk-white), transparent);
}

.pk-photostrip:has(.pk-photostrip__nav--next:not([disabled]))::after {
  right: 0;
  background: linear-gradient(270deg, var(--pk-white), transparent);
}

@media (max-width: 782px) {

  .pk-photostrip-sec {
    padding-block: 0 var(--pk-space-xl);
  }

  .pk-photostrip__item img {
    height: 180px;
  }

  /* Inside the container at narrow widths rather than hanging off the edge,
     where they would sit under the viewport edge and be hard to hit. */
  .pk-photostrip__nav--prev {
    left: 4px;
  }

  .pk-photostrip__nav--next {
    right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pk-photostrip__track {
    scroll-behavior: auto;
  }

  .pk-photostrip__item img {
    transition: none;
  }

  .pk-photostrip__item:hover img {
    transform: none;
  }
}

/* ==========================================================================
   LANDING - ASSET GRAPHIC ABOVE A FORM IS A THUMBNAIL
   Added 1.10.79, 2026-08-14. Bob: "all landing pages with the graphic above the
   form, that graphic is huge, it needs to be thumbnail, with appropriate space
   between the image and the form".

   SEVEN PAGES ARE AFFECTED, through THREE different classes - two of ours and one
   of staging's, which is why this is one block rather than three edits:

     #pkw .asset-cover     5 pages   was max-width 420px
     #pkw .asset-hero      1 page    was max-width 920px
     .pkvg-cover           1 page    was max-width 500px, 300px at narrow widths

   CONSTRAINED BY HEIGHT, NOT WIDTH, and that is the whole trick. Six of the seven
   graphics are portrait asset covers (ratio 0.70-0.84). The seventh -
   2026-PKWAREs-Data-Security-Maturity-Assessment3.webp on
   /landing/data-security-maturity-assessment - is a 1200x630 LANDSCAPE banner,
   ratio 1.9. Capping every graphic to the same WIDTH would have shrunk that one to
   about 168x88 and made it unreadable. Capping HEIGHT instead gives all seven the
   same optical weight and lets each keep its own aspect ratio.

   Dimensions were read from /wp/v2/media, not guessed from the filenames.

   THIS RULE MUST STAY AT THE END OF THE FILE. It overrides .pkvg-cover, which is
   part of the page CSS lifted out of /landing/gartner-postquantum-readiness further
   up. Same specificity, so the later rule wins - move this block above that one and
   the Gartner cover silently goes back to full size.

   AMENDED 2026-08-18. THE HEIGHT CAP NOW COVERS FIVE PAGES, NOT SEVEN. Bob checked
   all seven and pulled both non-portrait graphics out of the scheme - .pkvg-cover to
   a fixed 400px width, and .asset-hero back to full width, below. So the reasoning
   above is the record of why the cap was written the way it was; the count in it is
   no longer the count of pages wearing it.

   The reasoning had a hole worth naming. It argued that capping by height "gives all
   seven the same optical weight", and equal height is not equal weight when one image
   is nearly three times as wide as the others are. At 210px tall the 1.9-ratio banner
   came out about 400x210 - a small tile, where staging renders the same file across
   the full content column. Equal-height was the right instinct for six portrait
   covers and wrong for the seventh, which is what the page showed.
   ========================================================================== */
#pkw .asset-cover {
  width: auto;
  max-width: 100%;
  max-height: 210px;
  margin: 0 auto 32px;
}

/* THE LANDSCAPE BANNER IS NOT A THUMBNAIL - Bob, 2026-08-18: "That number 6 is a
   wide photo, here it is on staging and development."

   .asset-hero IS DELIBERATELY ABSENT FROM THIS BLOCK, and absence is the whole fix.
   Its real rule is #pkw .asset-hero at the top of this stylesheet - width:100%,
   max-width:920px, height:auto, margin:0 auto 40px, border-radius:16px - written when
   /landing/data-security-maturity-assessment was converted. Naming the class here
   again, even to release the height cap, would override that rule's max-width by
   source order and push the banner out to its natural 1200px. So the class is left
   out entirely and the original 920px governs, which is the appearance the page had
   before 1.10.79 and the one staging shows.

   One page, one file, 1200x630. Staging carries it as a bare
   <img width="1200" height="630" class="img-responsive"> with no cap beyond
   max-width:100% - read off staging's front end rather than inferred, which is also
   how the 920px in our own rule turns out to be ours and not staging's. */

/* Staging wraps its cover in a bordered card, so the CARD has to shrink to the
   image rather than the image being stretched to the card - hence width:fit-content
   on the wrapper and width:auto on the img, replacing its width:100%. */
.pkv-gartner .pkvg-cover {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 32px;
}

/* THIS COVER IS SIZED BY WIDTH, NOT HEIGHT - Bob, 2026-08-18, this page only.
   He set width:400px in devtools and disabled both caps: "this is now correct, for
   this specific page."

   It takes this one graphic out of the seven-graphic max-height:210px scheme
   documented above, deliberately. The scheme exists so seven covers of differing
   aspect ratios carry the same optical weight; this page has one cover and no
   siblings to match, so a fixed width is the simpler statement of what it should be.

   The wrapper's width:fit-content resolves to 400px and the bordered card hugs the
   image, which is the behaviour that block was written for. Below roughly a 448px
   viewport (400 + the wrap's 24px padding each side) the card clamps to
   max-width:100% while the image stays 400px, so overflow:hidden on .pkvg-cover
   crops the right-hand edge. Flagged to Bob; his call, not a defect to fix here. */
.pkv-gartner .pkvg-cover-img {
  width: 400px;
}

/* ==========================================================================
   SINGLE POST - the default dynamic-post layout
   --------------------------------------------------------------------------
   Built 2026-08-15 for the eight-section post structure in single.php. Two of
   the three blocks here are the reusable author components; the third is the
   pre/post title pair in the header.

   WIDTH IS 1300px, NOT --pk-container-max (1200px), ON PURPOSE. The breadcrumb
   sits directly above this header and .pk-crumbs__wrap is capped at
   calc(1300px + 2 * var(--pk-edge)). Anything narrower here makes the trail and
   the headline it describes start at visibly different left edges. Same cap and
   same --pk-edge inset means the same left edge at every viewport - the rule the
   whole page alignment already runs on.

   NO INLINE STYLES ANYWHERE IN THESE COMPONENTS. The staging fragment carries
   170 inline style attributes and 13 KB of duplicated design tokens because
   Avada's KSES filter stripped what it could not allow. None of that applies
   here, and reproducing it would put a copy of the token layer on all 344 posts,
   free to drift from this file.
   ========================================================================== */

.entry--single .entry-header {
	margin-inline: auto;
	margin-block-end: var(--pk-space-lg);
	max-width: calc(1300px + 2 * var(--pk-edge));
	padding-inline: var(--pk-edge);
	width: 100%;
}

/* The 56px cyan rule that opens the header in Michael's design. A span rather
   than a ::before so it cannot be mistaken for decoration belonging to a heading
   that might later be reordered. */
.entry-header__rule {
	background: var(--pk-cyan);
	display: block;
	height: 3px;
	margin-block-end: 20px;
	width: 56px;
}

/* --- 2. Pre Title -------------------------------------------------------- */
/* Free text, NOT the category. On the reference post the eyebrow reads
   "Governance, Risk & Compliance" while the post's actual category is Blog, so
   this can never be derived and has to be stored. */
.entry-pretitle {
	color: var(--pk-navy);
	font-size: var(--pk-text-sm);
	font-weight: var(--pk-weight-bold);
	letter-spacing: 0.08em;
	line-height: var(--pk-leading-snug);
	margin: 0;
	text-transform: uppercase;
}

/* --- 3. Title ------------------------------------------------------------ */
.entry--single .entry-title {
	color: var(--pk-navy);
	font-family: var(--pk-font-serif);
	font-size: clamp(34px, 2.4vw + 22px, 52px);
	font-weight: var(--pk-weight-regular);
	line-height: var(--pk-leading-tight);
	margin: 24px 0 0;
	text-wrap: pretty;
}

/* --- 4. Post Title, the deck --------------------------------------------- */
.entry-posttitle {
	color: var(--pk-slate);
	font-size: clamp(20px, 0.8vw + 12px, 24px);
	font-weight: var(--pk-weight-regular);
	line-height: 1.5;
	margin: 28px 0 0;
	text-wrap: pretty;
}

/* --- 5. Author header ---------------------------------------------------- */
/* The hairline above this row is a border ON the row rather than a separate
   element, so a post with no deck does not end up with two stacked dividers. */
.pk-author {
	align-items: center;
	border-block-start: 1px solid rgba(var(--pk-navy-rgb), 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-start: 40px;
	padding-block-start: 20px;
}

.pk-author__img {
	background: var(--pk-grey);
	border-radius: var(--pk-radius-pill);
	display: block;
	flex: none;
	height: 64px;
	object-fit: cover;
	width: 64px;
}

.pk-author__meta {
	color: var(--pk-silicone);
	flex: 1 1 260px;
	font-size: var(--pk-text-base);
	line-height: var(--pk-leading-snug);
	margin: 0;
}

.pk-author__name {
	color: var(--pk-navy);
	font-weight: var(--pk-weight-bold);
}

.pk-author__sep {
	margin-inline: 8px;
	opacity: 0.55;
}

/* --- LinkedIn pill, shared by both author components --------------------- */
/* One rule for both because it is one function - pkware_author_linkedin_pill().
   Renders only when the author has a linkedin value on their user record. */
.pk-author__follow {
	align-items: center;
	background: var(--pk-white);
	border: 2px solid var(--pk-navy);
	border-radius: var(--pk-radius-pill);
	color: var(--pk-navy);
	display: inline-flex;
	flex: none;
	font-size: 15px;
	font-weight: var(--pk-weight-bold);
	gap: 8px;
	line-height: 1;
	min-height: 40px;
	padding: 8px 18px;
	text-decoration: none;
	transition: background var(--pk-transition), color var(--pk-transition), border-color var(--pk-transition);
}

.pk-author__follow:hover,
.pk-author__follow:focus-visible {
	background: var(--pk-navy);
	border-color: var(--pk-navy);
	color: var(--pk-white);
	text-decoration: none;
}

/* The glyph as a CSS mask rather than an <img> or inline SVG: currentColor makes
   it invert with the pill on hover, and it costs no extra request. */
.pk-author__li {
	background-color: currentColor;
	flex: none;
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.13 1.44-2.13 2.93v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.13 1.44-2.13 2.93v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 16px;
}

/* --- 7. Author bio block ------------------------------------------------- */
/* Full-bleed grey band. Renders only when the author has a biography - see the
   note on pkware_author_footer() for why an empty one prints nothing at all. */
/* No top margin. Bob, 2026-08-15: "Authorbio should be 0px at top". The band is
   full-bleed and the 64px I had put above it read as a gap in the page rather
   than as breathing room - the 80px of internal padding is doing that job. */
.pk-authorbio {
	background: var(--pk-grey);
	padding-block: var(--pk-sec-y);
}

.pk-authorbio .pk-container {
	max-width: calc(1300px + 2 * var(--pk-edge));
	padding-inline: var(--pk-edge);
}

.pk-authorbio__rule {
	background: var(--pk-cyan);
	display: block;
	height: 3px;
	margin-block-end: 24px;
	width: 56px;
}

.pk-authorbio__inner {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.pk-authorbio__img {
	background: var(--pk-white);
	border-radius: var(--pk-radius-pill);
	display: block;
	flex: none;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

.pk-authorbio__body {
	flex: 1 1 320px;
	min-width: 260px;
}

.pk-authorbio__name {
	color: var(--pk-navy);
	font-size: var(--pk-text-xl);
	font-weight: var(--pk-weight-bold);
	line-height: var(--pk-leading-snug);
	margin: 0;
}

/* The job title holds whatever prints after the name, verbatim - a PKWARE role
   for staff, an organisation for an external contributor such as Alan Rodger of
   Bloor Research, nothing at all for an author who has neither. */
.pk-authorbio__title {
	color: var(--pk-slate);
	font-size: var(--pk-text-base);
	line-height: var(--pk-leading-snug);
	margin: 4px 0 0;
}

.pk-authorbio__bio {
	margin-block: 12px 20px;
}

.pk-authorbio__bio p {
	color: var(--pk-silicone);
	font-size: var(--pk-text-lg);
	line-height: var(--pk-leading-loose);
	margin: 0 0 12px;
	text-wrap: pretty;
}

.pk-authorbio__bio p:last-child {
	margin-block-end: 0;
}

/* --- 6. Content: constrain only what does not constrain itself ----------- */
/*
 * Bob, 2026-08-15: "that skews full width, outside the 1300px limit. The others
 * do not, there is probably something when you are stripping it out of Avada
 * that is not being inserted properly into the new theme."
 *
 * Right diagnosis. THE FRAGMENTS FALL INTO TWO KINDS and the difference is what
 * their top-level children are:
 *
 *   grc-compliance-gap / being-right   every child is a <div> or <section> that
 *                                      already caps itself at 1300px, and the
 *                                      grey and navy bands are full-bleed BY
 *                                      DESIGN with a capped div inside
 *
 *   mip-labeling-at-scale              bare <p>, <h2>, <blockquote> - 46 of them,
 *                                      no wrapper at all
 *
 * The second kind was constrained by Avada's fusion_builder_column. Strip the
 * builder and nothing is left holding it, so it ran the full width of the window.
 *
 * A max-width on .entry-content would fix that one post and break the other two,
 * because the full-bleed bands would stop being full-bleed. So the cap goes on
 * the BARE FLOW ELEMENTS ONLY. A <div> or <section> child is left completely
 * alone, which is exactly the promise made to hand-authored content.
 *
 * Same cap and same --pk-edge as the header and the breadcrumb, so all three
 * share one left edge at every viewport.
 */
.entry--single .entry-content > p,
.entry--single .entry-content > h1,
.entry--single .entry-content > h2,
.entry--single .entry-content > h3,
.entry--single .entry-content > h4,
.entry--single .entry-content > h5,
.entry--single .entry-content > h6,
.entry--single .entry-content > ul,
.entry--single .entry-content > ol,
.entry--single .entry-content > dl,
.entry--single .entry-content > blockquote,
.entry--single .entry-content > figure,
.entry--single .entry-content > table,
.entry--single .entry-content > pre,
.entry--single .entry-content > hr,
.entry--single .entry-content > iframe,
.entry--single .entry-content > video,
.entry--single .entry-content > img,
.entry--single .entry-content > picture,
.entry--single .entry-content > .pk-contain,
.entry--single .entry-content > .pk-fs-wrap,
.pk-post-cta > p,
.pk-post-cta > h1,
.pk-post-cta > h2,
.pk-post-cta > h3,
.pk-post-cta > ul,
.pk-post-cta > ol,
.pk-post-cta > blockquote,
.pk-post-cta > hr {
	margin-inline: auto;
	max-width: calc(1300px + 2 * var(--pk-edge));
	padding-inline: var(--pk-edge);
}

/* A table that is wider than the cap must scroll inside it rather than push the
   page sideways. */
.entry--single .entry-content > table {
	display: block;
	overflow-x: auto;
}

/* An <iframe> is inline by default, so margin-inline: auto does nothing to it and a
   bare YouTube embed lands hard against the left edge of the window while every
   paragraph around it starts 1300px-centred. Making it a block puts it in the column
   with everything else. */
.entry--single .entry-content > iframe,
.entry--single .entry-content > video {
	display: block;
}

/*
 * .pk-contain - THE ESCAPE HATCH, and the reason it has to be opt-in.
 *
 * The rule above caps bare flow elements and leaves every <div> and <section>
 * alone, because a full-bleed band is a real design and CSS cannot tell one from an
 * inherited Avada wrapper. Bob, 2026-08-15, on the DPDP penalties table: "and I am
 * sure others, are breaking out of the 1300px window."
 *
 * He was right - a scan of all 129 posts found nine uncapped top-level wrappers.
 * Eight were scaffolding with no styling intent and were unwrapped in the content,
 * which is the correct fix: their children become bare flow elements and the rule
 * above catches them for free.
 *
 * The ninth is a real design element - the grey pull-quote band in
 * harvest-now-decrypt-later - which must keep its background and therefore must
 * keep its <div>. That is what this class is for, and it is the only thing it is
 * for. Add it to a wrapper that has a look of its own but no width of its own.
 * Never add it to something that could simply be unwrapped.
 */
.entry--single .entry-content > .pk-contain {
	box-sizing: border-box;
}

/* --- Content components the fragments depend on -------------------------- */
/*
 * WHAT THIS BLOCK IS, AND WHY IT IS NOT OPTIONAL.
 *
 * The migration drops each fragment's <style> block, on the grounds that it is
 * mostly a duplicate of the theme's own token layer plus rules working around
 * Avada's KSES filter. That is true of most of it. It is NOT true of all of it,
 * and the CTA subcopy going grey was the first proof.
 *
 * So the classes the three migrated posts actually use were audited against this
 * stylesheet, mechanically, rather than eyeballed - and four had no rule at all:
 *
 *     pk-article      the fragment root: link treatment, focus ring, text-wrap
 *     pk-faq-caret    the FAQ chevron and its open state
 *     pk-figdesc      long figure descriptions, meant to be screen-reader only
 *     button          the older fragments' inline CTA button
 *
 * Two of those were silent bugs. Without .pk-figdesc the "visually hidden" long
 * descriptions of both diagrams render as ordinary visible paragraphs. Without
 * .pk-faq-caret there is no chevron and no open indicator on a 10-item accordion.
 *
 * box-sizing is NOT repeated here - the global reset at the top of this file
 * already covers every element, which is why the fragment's own scoped copy of
 * that rule was correctly dropped.
 *
 * Values are the fragments' own.
 */

.pk-article a {
	color: var(--pk-navy);
	text-decoration: underline;
	text-decoration-color: var(--pk-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.pk-article a:hover {
	color: var(--pk-cyan);
	text-decoration-color: var(--pk-navy);
}

.pk-article a:focus-visible,
.pk-article [role="button"]:focus-visible {
	border-radius: var(--pk-radius-sm);
	box-shadow: 0 0 0 3px rgba(var(--pk-cyan-rgb), 0.35);
	outline: none;
}

.pk-article h1,
.pk-article h2,
.pk-article p,
.pk-article blockquote p,
.pk-article figcaption {
	text-wrap: pretty;
}

/*
 * FAQ chevron. A rotated border rather than an SVG, because Avada's sanitizer
 * strips inline SVG - the fragment already made that change and the markup here
 * is a bare <span class="pk-faq-caret">.
 *
 * ROTATION IS DRIVEN BY aria-expanded, not by a state class. That is deliberate:
 * the accordion script has to maintain aria-expanded anyway for screen readers,
 * so keying the visual off it means the two cannot disagree.
 */
.pk-faq-caret {
	border-bottom: 2px solid var(--pk-cyan);
	border-right: 2px solid var(--pk-cyan);
	flex: none;
	height: 9px;
	margin-top: 6px;
	transform: rotate(45deg);
	transition: transform var(--pk-duration-slow) var(--pk-ease);
	width: 9px;
}

[data-pk-faq][aria-expanded="true"] .pk-faq-caret {
	transform: rotate(-135deg);
}

/*
 * Long figure descriptions - the target of aria-describedby. Visible to a screen
 * reader, never on screen. Without this rule both diagram descriptions on the GRC
 * post render as ordinary paragraphs in the middle of the article.
 *
 * .pk-article .pk-sr-only IS THE SAME COMPONENT UNDER A THIRD NAME - 1.13.32.
 * consistent-data-masking arrived with its own .pk-sr-only whose nine declarations
 * are identical to these nine, so it shares this rule rather than adding a third
 * copy of the same nine lines. The theme already had two: this one and
 * .screen-reader-text, which is WordPress's own name and has a :focus state that
 * reveals it for skip links - deliberately NOT wanted here, where the text must
 * never become visible. That is why this rule exists separately, and why the new
 * name joins this one and not that one.
 */
.pk-article .pk-sr-only,
.pk-figdesc {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

/*
 * The older fragments' inline CTA button. It carries its colours inline, so only
 * the hover state is missing.
 */
.entry--single a.button:hover,
.entry--single a.button:focus-visible,
.pk-post-cta a.button:hover,
.pk-post-cta a.button:focus-visible {
	background: var(--pk-blue) !important;
	color: var(--pk-white) !important;
}

/* --- Link Map ------------------------------------------------------------ */
/*
 * The reference-links block that closes some posts. Ported from the stylesheet
 * inside "mip-labeling-at-scale", which was where this component was found - and
 * losing it is the reason it is here.
 *
 * That post's second fusion_code block was 3,448 chars: a 1,656-char <style> and
 * 1,792 chars of Link Map markup in the same block. The splitter labelled the
 * whole block "styles" and discarded it, so four reference links disappeared from
 * the page and neither proof noticed, because both compared the markup block
 * against itself. Blocks are dissected rather than labelled now, and a third
 * proof checks every decoded block.
 *
 * A CONTENT COMPONENT, NOT A CTA. Bob, 2026-08-15, asked for the boundary to be
 * settled: sources are not an ask, so the Link Map stays in the content and the
 * article ends with its references, then the author, then the CTA.
 *
 * The fragment's local --navy / --cyan / --ink custom properties are replaced by
 * the theme tokens; everything else is its own values. Its `font-family:'Lato'`
 * declarations are dropped - the theme already sets the body face, and repeating
 * it here would pin this block to a font the site could later change.
 */

.pkv-linkmap {
	color: var(--pk-silicone);
	line-height: var(--pk-leading-loose);
	overflow-x: hidden;
}

.pkv-linkmap * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.pkv-linkmap h2 {
	color: var(--pk-navy);
	font-family: var(--pk-font-serif);
	font-size: clamp(1.9rem, 4vw, 2.875rem);
	font-weight: var(--pk-weight-regular);
	letter-spacing: -0.01em;
	line-height: var(--pk-leading-tight);
}

.pkvlm-section {
	background: var(--pk-white);
	padding: 30px 0;
}

.pkvlm-wrap {
	margin: 0 auto;
	max-width: 1300px;
	padding: 0 20px;
}

.pkvlm-narrow {
	max-width: 820px;
}

.pkvlm-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.pkvlm-list li {
	border-bottom: 1px solid #e0e6f0;
}

.pkvlm-link {
	align-items: flex-start;
	color: var(--pk-navy);
	display: flex;
	gap: 14px;
	padding: 22px 6px;
	text-decoration: none;
	transition: color var(--pk-transition), background var(--pk-transition);
}

.pkvlm-link:hover,
.pkvlm-link:focus-visible {
	background: #f6fbfe;
	color: var(--pk-cyan);
}

/* The arrow is three positioned bars rather than an SVG - Avada's sanitizer
   strips inline SVG, so the original was already built this way. */
.pkvlm-arrow {
	flex: 0 0 auto;
	height: 18px;
	margin-top: 5px;
	position: relative;
	width: 18px;
}

.pkvlm-arrow::before,
.pkvlm-arrow::after {
	background: var(--pk-cyan);
	border-radius: 1px;
	content: "";
	position: absolute;
}

.pkvlm-arrow::before {
	height: 2px;
	left: 1px;
	top: 8px;
	transform: rotate(-45deg);
	width: 14px;
}

.pkvlm-arrow::after {
	height: 9px;
	right: 1px;
	top: 1px;
	width: 2px;
}

.pkvlm-arrow i {
	background: var(--pk-cyan);
	border-radius: 1px;
	height: 2px;
	position: absolute;
	right: 1px;
	top: 1px;
	width: 9px;
}

.pkvlm-text {
	font-size: 1.1rem;
	font-weight: var(--pk-weight-bold);
	line-height: 1.4;
}

.pkvlm-host {
	color: #7b8190;
	display: block;
	font-size: 0.85rem;
	font-weight: var(--pk-weight-regular);
	margin-top: 4px;
	word-break: break-word;
}

@media (max-width: 860px) {

	.pkvlm-section {
		padding: 64px 0;
	}

	.pkvlm-text {
		font-size: 1rem;
	}
}

/* --- Native <details> FAQ, and the inline CTA link ----------------------- */
/*
 * A SECOND FAQ MECHANISM, and it is not the same as the accordion in
 * post-article.js. That one is divs with [data-pk-faq] and needs a script. This
 * one is native <details>/<summary> and needs none - which is the better build,
 * so it is not being "unified" with the other. Two mechanisms exist in the
 * source; the theme carries both rather than rewriting authored markup.
 *
 * Ported from the two dropped style blocks of "postquantum-readiness-data-level",
 * found by auditing that post's classes against this file before publishing it -
 * the same audit that caught .pk-figdesc and .pk-faq-caret, run this time BEFORE
 * the page went out rather than after Bob spotted it.
 *
 * The fragments' local --navy / --cyan / --ink / --grey copies are replaced by
 * theme tokens. Their `font-family:'Lato'` declarations are dropped - the theme
 * sets the body face already, and repeating it pins the block to a font the site
 * could later change. The !important flags are kept: they exist to beat Avada's
 * button rules, and while Avada is still the theme on staging they are what makes
 * the two renders comparable.
 */

.pkv-faq {
	color: var(--pk-silicone);
	line-height: var(--pk-leading-loose);
	overflow-x: hidden;
}

.pkv-faq * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.pkv-faq h2 {
	color: var(--pk-navy);
	font-family: var(--pk-font-serif);
	font-size: clamp(1.9rem, 4vw, 2.875rem);
	font-weight: var(--pk-weight-regular);
	letter-spacing: -0.01em;
	line-height: var(--pk-leading-tight);
}

.pkv-faq p {
	color: var(--pk-silicone);
	font-size: 1.05rem;
	line-height: var(--pk-leading-loose);
}

/*
 * EVERY .pkvf- RULE BELOW IS SCOPED TO .pkv-faq, AND THAT IS NOT TIDINESS.
 *
 * Bob, 2026-08-15, on migrating Michael's two new-style case studies: "no cross
 * contamination of old stuff injected into any of michael's new content."
 *
 * These eleven rules arrived bare from the Blog FAQ port. Michael's
 * walden-mortgage-group and fiserv use THE SAME pkvf- namespace - 92 and 96
 * unscoped selectors between them - so bare rules here would have painted his
 * pages with the Blog component's styling, and porting his CSS bare would have
 * repainted bring-on-the-audit, ai-vulnerability-management and
 * postquantum-readiness-data-level with his.
 *
 * Checked before scoping rather than assumed: all three migrated posts use
 * pkvf- classes ONLY inside .pkv-faq, so nothing loses its styling here. This is
 * the same failure as the two landing pages that both claimed
 * #pk-gartner-wrapper, and the same fix.
 */
.pkv-faq .pkvf-section {
	background: var(--pk-grey);
	padding: 40px 0;
}

.pkv-faq .pkvf-wrap {
	margin: 0 auto;
	max-width: 1300px;
	padding: 0 20px;
}

.pkv-faq .pkvf-narrow {
	max-width: 820px;
}

.pkv-faq .pkvf-cta-top {
	margin-bottom: 26px;
}

/* The pill button, shared by .pkvf-btn and the standalone .pkv-cta-link. Two
   class names for one control in the source; one rule here. */
.pkv-faq .pkvf-btn,
.pkv-cta-link a {
	background: var(--pk-cyan) !important;
	border: 2px solid transparent;
	border-radius: var(--pk-radius-pill);
	color: #06283c !important;
	cursor: pointer;
	display: inline-block;
	font-size: 0.95rem;
	font-weight: var(--pk-weight-bold);
	letter-spacing: 0.01em;
	line-height: 1.1;
	padding: 14px 30px;
	text-decoration: none !important;
	transition: background 0.25s, color 0.25s;
}

.pkv-faq .pkvf-btn:hover,
.pkv-cta-link a:hover,
.pkv-cta-link a:focus-visible {
	background: var(--pk-navy) !important;
	color: var(--pk-white) !important;
}

/*
 * Native accordion - no JS. <details name="..."> makes a single-open group in
 * browsers that support it and degrades to independent items in those that do
 * not, which is a good failure.
 */
.pkv-faq .pkvf-faq-item {
	border-bottom: 1px solid #e0e6f0;
}

.pkv-faq .pkvf-faq-q {
	color: var(--pk-navy);
	cursor: pointer;
	display: block;
	font-family: var(--pk-font-serif);
	font-size: 1.2rem;
	line-height: 1.4;
	list-style: none;
	padding: 26px 44px 26px 0;
	position: relative;
	text-align: left;
	width: 100%;
}

/* Safari still paints its own triangle without this. */
.pkv-faq .pkvf-faq-q::-webkit-details-marker {
	display: none;
}

.pkv-faq .pkvf-faq-q::after {
	border: solid var(--pk-cyan);
	border-width: 0 2px 2px 0;
	content: "";
	height: 11px;
	position: absolute;
	right: 6px;
	top: 32px;
	transform: rotate(45deg);
	transition: transform 0.25s;
	width: 11px;
}

.pkv-faq .pkvf-faq-item[open] .pkvf-faq-q::after {
	transform: rotate(-135deg);
}

.pkv-faq .pkvf-faq-q:focus-visible {
	outline: 2px solid var(--pk-cyan);
	outline-offset: 2px;
}

.pkv-faq .pkvf-faq-a p {
	color: var(--pk-silicone);
	font-size: 1rem;
	padding: 10px 44px 26px 10px;
}

@media (max-width: 860px) {

	.pkv-faq .pkvf-section {
		padding: 64px 0;
	}

	.pkv-faq .pkvf-faq-q {
		font-size: 1.08rem;
	}
}

/* --- .pk-profile: the case-study company card ----------------------------- */
/*
 * Bob, 2026-08-15: "all of the old types have like a grey window on the right,
 * with company details, etc, it's bullshit, but can it survive in a better styled
 * way, the way we do that type of grey background, but a new class, that is
 * specifically for that repeatable Block of repetitive data please?"
 *
 * 41 of the 43 case studies carry it. On staging it is an Avada right-hand rail
 * built from alternating [fusion_title] label and [fusion_text] value pairs -
 * Company, Size, Industry, and Location on ten of them.
 *
 * WHY IT IS A <dl> AND NOT WHAT STAGING HAS. Avada gives every one of those labels
 * a [fusion_title], and Avada defaults a title with no size attribute to <h2>. Ported
 * literally, each case study gained "Company Profile", "Company", "Size", "Industry"
 * and "Location" as h2 headings in the body of a document whose only real headings
 * are Background, Use Cases and Results. That is five phantom sections per post,
 * times 41. A description list says label-and-value in markup, which is what this
 * actually is, and leaves ONE heading - the card's own.
 *
 * The grey is --pk-grey, the theme's own token, not the #f1f5fa literal the Avada
 * markup carried. Same background the quote card and the alt sections use, so it
 * matches the rest of the rebuild rather than the page it came from.
 *
 * The rail is not reproduced as a rail. Single-post content is one 1300px column
 * with no sidebar, so the pairs run as an auto-fitting grid: side by side on a wide
 * screen, stacked on a narrow one, no float and no fixed width to break out of the
 * cap. See the content-constraint note in section 6 for why a float would.
 */
.entry--single .entry-content > .pk-profile {
	background: var(--pk-grey);
	border-radius: var(--pk-radius-lg);
	box-sizing: border-box;
	margin-block: 48px;
	margin-inline: auto;
	max-width: 1300px;
	padding: 36px 40px;
}

.pk-profile__title {
	color: var(--pk-navy);
	font-family: var(--pk-font-serif);
	font-size: 1.5rem;
	font-weight: var(--pk-weight-regular);
	line-height: var(--pk-leading-tight);
	margin: 0 0 4px;
}

/* The "name withheld" note that ten of these carry above the pairs. */
.pk-profile__note {
	color: var(--pk-silicone);
	font-size: 0.95rem;
	line-height: var(--pk-leading-loose);
	margin: 0 0 20px;
}

.pk-profile__list {
	display: grid;
	gap: 24px 40px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 24px 0 0;
}

.pk-profile__list > div {
	min-width: 0;
}

.pk-profile__list dt {
	color: var(--pk-slate);
	font-size: 0.75rem;
	font-weight: var(--pk-weight-bold);
	letter-spacing: 0.08em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.pk-profile__list dd {
	color: var(--pk-navy);
	font-size: 1.05rem;
	font-weight: var(--pk-weight-bold);
	line-height: var(--pk-leading-tight);
	margin: 0;
	text-wrap: pretty;
}

@media (max-width: 600px) {

	.entry--single .entry-content > .pk-profile {
		padding: 28px 24px;
	}
}

/* --- .pk-toggle-reveal: the post-conversion panel ------------------------- */
/*
 * Eleven landing pages shipped with no reveal at all - staging swapped the form for
 * a video, a PDF or a thank-you panel and development could not. Rebuilt 2026-08-16
 * in the theme's own idiom rather than by porting Avada's column markup.
 *
 * The 16:9 box is declared HERE rather than reused from the podcast rule, because
 * that one is scoped to .entry--single .entry-content and these are pages, which
 * never match it. Same geometry, different home - and scoped to .pk-toggle-reveal so
 * a bare .video-container elsewhere still cannot pick it up. The name is generic
 * enough that this project has already been bitten by it once.
 *
 * No display rule: the reveal ships with inline display:none and the toggle script
 * sets display:block. A stylesheet rule here would fight the inline one and lose,
 * which is the correct outcome but a confusing thing to leave lying around.
 */
.pk-toggle-reveal .video-container {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.pk-toggle-reveal .video-container iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.pk-toggle-reveal > iframe {
	border: 0;
	display: block;
	width: 100%;
}

/*
 * THE REVEAL SETS ITS OWN TEXT COLOUR. WHITE ON WHITE IS WHY.
 *
 * Bob, 2026-08-16, on securezip-upgrade: "same thing, no video" - what he was
 * actually looking at was an empty white card. The card was not empty. Its text was
 * white.
 *
 * #pkw .hero-blue sets `color:#FFFFFF` on the whole hero, and
 * #pkw .hero-blue .form-card overrides only the BACKGROUND. The forms that live
 * there never showed the problem because Formidable colours its own labels. A
 * composed reveal is plain h2/p/h3/ul, so it inherited the hero's white and vanished
 * against its own white card.
 *
 * No id needed in the selector: an inherited value loses to any declaration applied
 * directly to the element, whatever its specificity. That is worth knowing rather
 * than reaching for #pkw and an !important.
 */
.pk-toggle-reveal {
	color: var(--pk-color-text);
}

.pk-toggle-reveal h2,
.pk-toggle-reveal h3,
.pk-toggle-reveal h4 {
	color: var(--pk-navy);
}

.pk-toggle-reveal a {
	color: var(--pk-color-link);
}

/* --- Fullscreen button on a gated PDF. PDFs ONLY -------------------------- */
/*
 * PDFS ONLY. NEVER A VIDEO. Bob, 2026-08-16: "In General, Videos should never have
 * that full screen button, they are already youtube videos, you can expand the
 * player, make it simple, videos are always raw youtube iframes."
 *
 * He is right and the first pass was wrong to blanket it. A YouTube player ships its
 * own fullscreen control inside its own chrome, so a second button in the corner of
 * the same rectangle is two controls doing one job - and ours is the worse of the
 * two, because it fullscreens the IFRAME rather than the player.
 *
 * A PDF is the opposite case. The browser's PDF viewer offers download and print but
 * no fullscreen, and a 1000px-tall document squeezed into a page column is exactly
 * what wants breaking out.
 *
 * So: if a reveal holds a video, it is the bare iframe in its aspect box and nothing
 * else. .video-container stays - that is staging's own wrapper and it is what makes
 * a 16:9 embed scale with the column. "Raw iframe" means no button, not no aspect
 * box.
 *
 * Original note follows, for the mechanism.
 * ---
 * Bob, 2026-08-16: "full screen buttons on all pdfs and videos please."
 *
 * Staging has one on three pages, built as an inline onclick with a hardcoded
 * element id and a wall of inline style. Those three are frozen where they are. This
 * is the version for everything else: a class, a delegated listener in
 * components.js, and no ids to keep in step.
 *
 * .pk-fs-wrap is the positioning context. It must be the button's offset parent or
 * the absolute placement lands against the page instead of the asset.
 *
 * The button sits ON the asset rather than above it, because a PDF in an iframe
 * renders the browser's own dark toolbar across its top and a control floating in
 * the gap between the two reads as belonging to neither.
 */
.pk-fs-wrap {
	box-sizing: border-box;
	position: relative;
}

/*
 * INSIDE AN ASPECT BOX THE WRAP MUST GET OUT OF THE WAY.
 *
 * .video-container is a padding-bottom aspect box whose iframe is position:absolute,
 * and it relies on being the nearest positioned ancestor. Dropping .pk-fs-wrap
 * (position: relative) between the two made the WRAP the containing block - and the
 * wrap has no height of its own, because its only in-flow child is the button. The
 * video collapsed to nothing and rendered as an empty card with a button in it,
 * which is exactly what Bob saw.
 *
 * position: static hands the job back to .video-container. Both the iframe and the
 * button then resolve against the aspect box, which is what each of them wants.
 */
.pk-toggle-reveal .video-container .pk-fs-wrap {
	position: static;
}

.pk-fs-btn {
	background: var(--pk-navy);
	border: 0;
	border-radius: var(--pk-radius-md);
	color: var(--pk-white);
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
	font-weight: var(--pk-weight-bold);
	line-height: 1;
	padding: 9px 14px;
	position: absolute;
	right: 10px;
	top: 10px;
	transition: background var(--pk-transition);
	z-index: 10;
}

.pk-fs-btn:hover,
.pk-fs-btn:focus-visible {
	background: var(--pk-blue);
}

.pk-fs-btn:focus-visible {
	outline: 2px solid var(--pk-cyan);
	outline-offset: 2px;
}

/* A video already has an aspect box; a PDF is a fixed-height iframe. Both need the
   wrapper to be exactly as tall as the asset so the button cannot drift. */
.pk-fs-wrap > iframe {
	display: block;
	width: 100%;
}

.pk-toggle-reveal > h2:first-child {
	margin-block-start: 0;
}

/* --- .pk-presenters: the webinar presenter cards -------------------------- */
/*
 * One component replacing 40 hand-written cards across 27 webinars, holding 15
 * people. Rendered by pkware_presenter_cards() from the pkware_presenter taxonomy,
 * so a title changes in one place.
 *
 * EVERY CLASS IS NAMESPACED, and that is not housekeeping. The source markup uses
 * .head, .name, .position and .btn-wrap - about as generic as class names get. This
 * project has been bitten three times in a single day by exactly that: the pkvf-
 * namespace shared between Michael's case studies and the Blog FAQ, two landing
 * pages both answering to #pk-gartner-wrapper, and a bare .video-container.
 *
 * THE CARD IS A LINK, so it needs a visible focus ring and a hover state - there is
 * no underlined link text to signal it. Two of the forty source cards have no
 * LinkedIn URL and are wrapped in an <a href> anyway, which is a link to nowhere;
 * the renderer emits a <div> for those instead.
 *
 * auto-fit rather than a fixed four-up: a webinar has between one and four
 * presenters and a lone card should not sit in a quarter-width column.
 */
.pk-presenters {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-block: 40px;
}

.pk-presenter {
	color: inherit;
	display: block;
	text-align: center;
	text-decoration: none;
}

.pk-presenter__photo {
	display: block;
	margin-bottom: 16px;
}

.pk-presenter__photo img {
	aspect-ratio: 1;
	border-radius: 50%;
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: 180px;
	object-fit: cover;
	width: 100%;
}

.pk-presenter__name {
	color: var(--pk-navy);
	display: block;
	font-family: var(--pk-font-serif);
	font-size: 1.15rem;
	line-height: var(--pk-leading-tight);
}

.pk-presenter__company {
	color: var(--pk-slate);
	display: block;
	font-size: 0.75rem;
	font-weight: var(--pk-weight-bold);
	letter-spacing: 0.08em;
	margin-top: 6px;
	text-transform: uppercase;
}

.pk-presenter__title {
	color: var(--pk-silicone);
	display: block;
	font-size: 0.9rem;
	line-height: var(--pk-leading-loose);
	margin-top: 4px;
	text-wrap: pretty;
}

a.pk-presenter:hover .pk-presenter__name,
a.pk-presenter:focus-visible .pk-presenter__name {
	color: var(--pk-blue);
}

a.pk-presenter:hover .pk-presenter__photo img {
	box-shadow: 0 12px 30px rgba(var(--pk-navy-rgb), 0.22);
}

a.pk-presenter:focus-visible {
	border-radius: var(--pk-radius-md);
	outline: 2px solid var(--pk-cyan);
	outline-offset: 4px;
}

/* The content cap leaves a <div> alone by design, so the grid needs its own. */
.entry--single .entry-content > .pk-presenters {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(1300px + 2 * var(--pk-edge));
	padding-inline: var(--pk-edge);
}

/* --- .pk-gated: prose beside a form, 50/50 -------------------------------- */
/*
 * Bob, 2026-08-16, on the rendered Reports: "FOrm has to be stacked, like a 50/50 I
 * think." The source agrees with him - both Reports are 1_2 | 1_2 in Avada, a genuine
 * half-and-half, with the gated iframe in a full-width row below.
 *
 * WHAT THIS REPLACES. Dropping the layout shortcodes left the form pane as a plain
 * sibling of the prose, and the only thing still putting them side by side was
 * .framecol's float:right from the Avada child theme. A float is not a column: the
 * prose wraps around whatever width is left, the two sides never align, and there is
 * no stacking rule at all - which is why the copy read narrow and "Why Download the
 * CTEM Report?" broke across two lines.
 *
 * min-width: 0 on both cells because a grid item defaults to min-content width, and a
 * form field or a long unbroken string would otherwise push the column wider than its
 * share and quietly break the 50/50.
 *
 * The float inside .pk-gated__form is left alone. It is harmless once the cell is the
 * containing block, and it is part of the frozen form layer.
 */
.entry--single .entry-content > .pk-gated {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr 1fr;
	margin-block: 8px 40px;
	margin-inline: auto;
	max-width: calc(1300px + 2 * var(--pk-edge));
	padding-inline: var(--pk-edge);
}

.pk-gated__body,
.pk-gated__form {
	min-width: 0;
}

/*
 * THE FORM NEEDS THE CARD THE OTHER FORMS HAVE.
 *
 * Bob, 2026-08-16: "in the reports, the forms are missing that border that all the
 * other forms have."
 *
 * The Reports' form is .form-rev.no-fc, which is a WHITE card - `background:
 * var(--pk-white)` and nothing else. On staging that reads fine because Avada puts
 * it in a navy column; in the single-post layout the page behind it is white too, so
 * the card is invisible and the fields float on nothing.
 *
 * Every other form on the site is `#pkw .form-card`, which carries the border,
 * radius, panel background and shadow. Its tokens - --brd, --panel - are declared ON
 * #pkw, and a post never matches that selector, so they cannot simply be reused. The
 * VALUES are restated here rather than the tokens borrowed, and the border colour is
 * #pkw's own #E7EAF1 so the two treatments cannot drift apart by accident.
 *
 * The shadow is rebuilt from --pk-navy-rgb, which IS a theme token, rather than the
 * literal rgba in the #pkw rule.
 */
.pk-gated__form .form-rev.no-fc {
	background: var(--pk-white);
	border: 1px solid #e7eaf1;
	border-radius: 20px;
	box-shadow: 0 30px 70px -34px rgba(var(--pk-navy-rgb), 0.3);
	padding: 24px;
}

.pk-gated__body > *:first-child {
	margin-block-start: 0;
}

@media (max-width: 860px) {

	.entry--single .entry-content > .pk-gated {
		gap: 32px;
		grid-template-columns: 1fr;
	}
}

/* --- .pk-ebook: the gated-asset two-column block -------------------------- */
/*
 * Bob, 2026-08-16: "please keep this split conten like whatever it is 75/25 with the
 * Small Featured Image at the top, and the Button with link."
 *
 * All 13 published ebooks carry it, in exactly one shape: Avada 2_3 | 1_3. Bob asked
 * for 75/25, saw that the real markup is 67/33, and chose to match staging - so the
 * columns are 2fr and 1fr rather than 3fr and 1fr.
 *
 * PROSE FIRST WHEN IT STACKS, by Bob's choice, and that decision is made in the
 * SPLITTER rather than here. The body div is emitted before the aside div, so one
 * column on a narrow screen already produces prose-then-asset from DOM order alone.
 * No `order:` property, which matters because `order` moves the visual sequence and
 * leaves the reading order behind for anyone on a screen reader or tabbing through.
 *
 * The consequence Bob accepted: on a phone the cover and the download button sit
 * below the entire summary.
 *
 * align-items: start keeps the cover at the top of its column rather than centred
 * against a long summary - "at the top" is what he asked for.
 */
.entry--single .entry-content > .pk-ebook {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: 48px;
	grid-template-columns: 2fr 1fr;
	margin-block: 8px 48px;
	margin-inline: auto;
	max-width: calc(1300px + 2 * var(--pk-edge));
	padding-inline: var(--pk-edge);
}

.pk-ebook__body > *:first-child {
	margin-block-start: 0;
}

.pk-ebook__aside {
	min-width: 0;
}

.pk-ebook__aside img {
	border-radius: var(--pk-radius-md);
	box-shadow: 0 10px 30px rgba(var(--pk-navy-rgb), 0.12);
	width: 100%;
}

/* The cover is a link in the source. Nothing should make it look like body text. */
.pk-ebook__aside a:has(> img) {
	display: block;
	text-decoration: none;
}

.pk-ebook__aside > p {
	margin-block: 0 20px;
}

.pk-ebook__aside > p:last-child {
	margin-block-end: 0;
}

/* The button is the action on this page - full width of its column, not a pill
   floating in white space. Overrides the inline-block from the base .button rule. */
.entry--single .pk-ebook__aside a.button {
	display: block;
	margin-block: 0;
	text-align: center;
}

@media (max-width: 860px) {

	.entry--single .entry-content > .pk-ebook {
		gap: 32px;
		grid-template-columns: 1fr;
	}

	/* Stacked, the cover has no column to fill and should not become a poster. */
	.pk-ebook__aside img {
		margin-inline: auto;
		max-width: 320px;
	}
}

/* --- .video-container: the podcast player wrapper ------------------------- */
/*
 * All 23 Podcast posts carry an embedded player and an identical inline <style>
 * declaring this - a plain 16:9 intrinsic-ratio box. The styling proof aborted 22 of
 * them on the first run because style.css had no rule for it, which is the proof
 * working: 22 posts would otherwise have shipped with a collapsed player.
 *
 * SCOPED TO THE CONTENT, deliberately. ".video-container" is about as generic as a
 * class name gets, and this project has already been bitten twice in one day by a
 * name that two things claimed - the pkvf- namespace shared between Michael's case
 * studies and the Blog FAQ component, and two landing pages both answering to
 * #pk-gartner-wrapper. A bare rule here would apply to any future page, plugin or
 * pasted block that happens to use the same word.
 *
 * The wrapper is a top-level <div>, so the content rule leaves it alone by design
 * and it needs its own cap - otherwise a 16:9 box runs the full width of the window
 * and the player ends up taller than the viewport.
 */
.entry--single .entry-content .video-container {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.entry--single .entry-content > .video-container {
	box-sizing: border-box;
	margin-block: 32px;
	margin-inline: auto;
	max-width: 1300px;
}

.entry--single .entry-content .video-container iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* --- The inline CTA button ------------------------------------------------ */
/*
 * `.button` reaches the content two ways and only one of them brings its own
 * styling:
 *
 *   older fragments   <a href="/demo" class="button" style="background:#1E3074;
 *                     border-radius:200px; ...">  - fully inline, needs only :hover
 *   [fusion_button]   converted by the splitter, NO inline styles at all, because
 *                     Avada held the appearance in the shortcode's attributes and
 *                     rendered it from the theme
 *
 * So the base rule exists for the second kind. It is written to match the first
 * kind's inline values exactly - navy, 200px radius, 14px/28px, 700 - so a post
 * cannot be told apart by which route its button took.
 *
 * The inline styles on the older fragments still win, which is correct: they are
 * the authored appearance and this is only the fallback.
 */
.entry--single a.button,
.pk-post-cta a.button {
	background: var(--pk-navy);
	border-radius: 200px;
	color: var(--pk-white);
	display: inline-block;
	font-weight: var(--pk-weight-bold);
	padding: 14px 28px;
	text-decoration: none;
	transition: background var(--pk-transition), color var(--pk-transition);
}

/*
 * ROOM AROUND A BUTTON THAT IS ALONE IN ITS PARAGRAPH.
 *
 * Bob, 2026-08-16: "little spacing on the button please."
 *
 * `.entry-content > * + *` sets a TOP margin only, so the download button on the
 * case studies picked up 1rem above and nothing below - and since its paragraph is
 * the last child of the content, it sat hard against the author band. A pill button
 * needs air on both sides to read as an action rather than as another line of text.
 *
 * The small margin on the button itself is the floor, and it applies wherever a
 * button lands. The :has() rule is the real spacing and needs the paragraph to hold
 * nothing but the button, so a button used mid-sentence is left alone. Any browser
 * without :has() still gets the floor rather than nothing.
 */
.entry--single a.button,
.pk-post-cta a.button {
	margin-block: 8px;
}

.entry--single .entry-content > p:has(> a.button:only-child),
.pk-post-cta > p:has(> a.button:only-child) {
	margin-block: 40px 48px;
}

/* The sign-off line at the foot of an executive post. From
   "ai-vulnerability-management"; scoped to the single post rather than left as a
   bare `.signature`, which is a common enough class name to collide.

   NOTE ON WHAT WAS NOT PORTED FROM THAT FRAGMENT: it also carried bare `ul` and
   `li` rules - a padding change and `margin-bottom: 0 !important`. Those are
   UNSCOPED element selectors, and lifting one post's list treatment into a
   site-wide rule is exactly the drift this migration exists to stop. If the lists
   read too loose, that is a decision about every post, not a port. */
.entry--single .entry-content .signature {
	color: var(--pk-navy);
	font-weight: var(--pk-weight-semibold, 600);
	margin-top: 2rem;
}

/* --- 8. CTA -------------------------------------------------------------- */
/* The block is pasted as-is and brings its own presentation inline, so this
   wrapper is only the full-bleed frame.

   WITH ONE EXCEPTION, AND IT IS NOT A STYLE CHOICE - IT IS A MISSING RULE.
   Bob, 2026-08-15: "Last two CTA are greyed out for me, both tonya's and
   Harveer's."

   The subcopy paragraph carries NO colour inline. Its markup is:

       <p class="pk-cta-sub" style="margin:0 0 40px;font-size:...;line-height:1.7">

   and the colour lived in the fragment's own stylesheet, which the migration
   deliberately does not store. The fragment's comments say why it was written
   that way: "rgba() is rejected in inline styles regardless of property
   allowlisting" - Avada's KSES filter strips it, so the author moved it to a
   class. Dropping that stylesheet therefore dropped the only declaration
   setting the colour, and the paragraph fell back to the body grey (#47494c)
   on a navy band.

   So this is the case the migration notes anticipated: a rule the markup
   genuinely depends on belongs in the theme, once, rather than in 344 copies.
   The hover states are here for the same reason - inline `transition` survives,
   but the :hover declarations it animates were in that same dropped file.

   Values are the fragment's own, unchanged. */
.pk-post-cta {
	display: block;
}

.pk-post-cta .pk-cta-sub {
	color: rgba(255, 255, 255, 0.92);
}

.pk-post-cta .pk-btn-primary:hover,
.pk-post-cta .pk-btn-primary:focus-visible {
	background: #08a6d3;
	border-color: #08a6d3;
	color: var(--pk-white);
}

.pk-post-cta .pk-btn-secondary:hover,
.pk-post-cta .pk-btn-secondary:focus-visible {
	background: var(--pk-frost);
	border-color: var(--pk-frost);
	color: var(--pk-navy);
}

@media (max-width: 782px) {

	.pk-author {
		gap: 12px;
	}

	.pk-authorbio {
		padding-block: 48px;
	}
}

/* /products/zip-reader - form 75's operating-system chooser.
   Staging carries this as an inline <style> on the page; it belongs here.
   The other rule in that block, .form-rev.no-fc { background:#fff }, is
   ALREADY the theme's at line 5130, so it is dropped rather than duplicated.
   The id is a Formidable field KEY, not a form id - if form 75 is ever
   re-imported the key can change and this rule silently stops applying. */
#pkw select#field_gwivc333 { min-height: 50px; }
/* The reveal card button needed air. #pkw .btns is display:flex with a 14px
   gap and NO top margin, and .fnote above it only carries margin-top:6px, so
   the button sat directly on the support-phone line. Scoped to the reveal cards
   so it cannot move .btns anywhere else on the site. Bob, 2026-09-09: "The
   reveal blocks need more padding for the buttons at the top, it is righ on top
   of the text". */
#pkw .pk-toggle-reveal .form-card .btns { margin-top: 20px; }
/* ==========================================================================
   ARTICLE COMPONENTS - comparison table, inline CTA, ghost button
   ==========================================================================

   Added 1.13.32, 2026-08-28, migrating MAR-2276 items 2.6 and 2.7 -
   /blog/consistent-data-masking and /blog/shadow-ai-data-problem.

   Four classes arrived that style.css did not rule. The splitter's fifth proof
   named them and refused to run, which is how they got here rather than shipping
   unstyled. THREE ARE COMPONENTS, ONE WAS ALREADY SOLVED:

     .pk-sr-only     NOT here. Identical to .pk-figdesc, so it joined that rule
                     rather than becoming a third copy of the same nine lines.
     .pk-compare     a comparison table. New - see below.
     .pk-inline-cta  a navy pill inside body copy. New.
     .pk-btn-ghost   one declaration, and the scope had to change - see below.

   THE THEME HAS THREE TABLE COMPONENTS AND NONE OF THEM FITS, which is why
   .pk-compare is new rather than mapped. #pkw .jobs is the hand-maintained careers
   table, #pkw .doc is the two-column rights table with full borders, and
   .pkbc-page .pkbc-matrix is the competitor matrix. All three are scoped to a
   wrapper a POST IS NOT INSIDE - posts render in .entry--single / .pk-article, not
   #pkw - so reusing one would have meant either rescoping a component built for
   pages or restyling the table to a design it was not drawn for. #pkw .doc is the
   near miss and still the wrong answer: full borders against this component's
   bottom rules and navy thead.

   Its four hex values map to tokens where tokens exist. #1E3074 is --pk-navy and
   #484848 is --pk-text. #E6ECF4 and #F7FAFD have no token - a hairline border and
   a zebra tint that appear nowhere else - so they stay literal, the same call the
   Link Map block made.

   .pk-btn-ghost IS SCOPED .pk-post-cta, NOT .pk-article, AND THAT IS THE WHOLE
   POINT OF THE ENTRY.

   Michael authored it as `.pk-article .pk-btn-ghost` and on staging that was
   correct, because there the entire fragment - CTA included - sits inside one
   .pk-article. This theme does not work that way: the splitter lifts the closing
   CTA <section> into the pkware_cta field, and single.php renders it through
   pkware_post_cta() inside .pk-post-cta, OUTSIDE the article. Measured, not
   assumed: the element is class="pk-btn pk-btn-secondary pk-btn-ghost" and it sits
   in the winning CTA section, chars 37124..38666 of the flattened markup - the same
   1,542-char range the splitter reports. Ported as authored, the rule would have
   matched NOTHING and the button would have kept its opaque border on the navy band.

   THE FIFTH PROOF CANNOT SEE THIS, and that is worth writing down. It checks that
   every class in the markup HAS a rule somewhere in style.css. It does not check
   that the rule can still MATCH once the split has moved the element into a
   different wrapper. A class can be ruled and dead at the same time. Same family as
   every other miss on this project: a check that answers a narrower question than
   the one that matters.

   .pk-btn and .pk-btn-secondary are already ruled at .pk-post-cta - the proof did
   not flag them - so this adds only the translucent border that the navy background
   needs.
   ========================================================================== */

.pk-article .pk-compare {
	border-collapse: collapse;
	color: var(--pk-text);
	font-size: 16px;
	line-height: 1.6;
	width: 100%;
}

.pk-article .pk-compare th,
.pk-article .pk-compare td {
	border-bottom: 1px solid #e6ecf4;
	padding: 18px 20px;
	text-align: left;
	text-wrap: pretty;
	vertical-align: top;
}

.pk-article .pk-compare thead th {
	border-bottom: 2px solid var(--pk-navy);
	color: var(--pk-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The row label column. 26% keeps the two comparison columns even on the widest
   viewport, which is the comparison the table is making. */
.pk-article .pk-compare tbody th {
	color: var(--pk-navy);
	font-weight: 700;
	width: 26%;
}

.pk-article .pk-compare tbody tr:nth-child(even) {
	background: #f7fafd;
}

/* Inline CTA - a navy pill in the flow of the body copy, cyan on hover. The
   article's own button, distinct from the closing .pk-post-cta band.

   :focus-visible IS ADDED, and it is the one thing here Michael's source did not
   have. His rule is :hover alone, so a keyboard user tabbing onto the button got no
   colour change at all. Every other button in this stylesheet pairs the two -
   .pk-btn-demo, .pk-post-cta .pk-btn-primary, .pk-post-cta .pk-btn-secondary - so
   this follows the house pattern rather than the fragment. */
.pk-article a.pk-inline-cta {
	align-items: center;
	background: var(--pk-navy);
	border: 2px solid var(--pk-navy);
	border-radius: 999px;
	color: var(--pk-white);
	display: inline-flex;
	font-size: 17px;
	font-weight: 700;
	min-height: 48px;
	padding: 12px 32px;
	text-decoration: none;
	transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

.pk-article a.pk-inline-cta:hover,
.pk-article a.pk-inline-cta:focus-visible {
	background: var(--pk-cyan);
	border-color: var(--pk-cyan);
	color: var(--pk-white);
	text-decoration: none;
}

/* See the header: this is .pk-post-cta and not .pk-article on purpose. */
.pk-post-cta .pk-btn-ghost {
	border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {

	.pk-article .pk-compare,
	.pk-article .pk-compare th,
	.pk-article .pk-compare td {
		font-size: 15px;
	}

	.pk-article .pk-compare th,
	.pk-article .pk-compare td {
		padding: 14px 12px;
	}
}

/* ==========================================================================
   MICHAEL'S CASE-STUDY PAGES - walden-mortgage-group and fiserv
   ==========================================================================

   Bob, 2026-08-15: "no cross contamination of old stuff injected into any of
   michael's new content."

   EVERY SELECTOR BELOW IS PREFIXED WITH .pkv-walden OR .pkv-fiserv, mechanically,
   and that is the whole point of this block.

   Michael's own header comment says "All CSS is scoped under .pkv-fiserv to prevent
   theme bleed." It was not: 92 of Walden's 124 selectors and 96 of Fiserv's 117
   arrived bare. Both pages use the pkvf- namespace, which THIS STYLESHEET ALREADY
   CARRIED for the Blog FAQ component - .pkvf-wrap, .pkvf-section, .pkvf-faq-q and
   nine more. Pasting his rules in bare would have repainted bring-on-the-audit,
   ai-vulnerability-management and postquantum-readiness-data-level; leaving the
   theme's rules bare would have painted his pages with the Blog component. Both
   directions were live. The theme's eleven are now scoped to .pkv-faq, and his are
   scoped here.

   TWO THINGS WERE REMOVED ON THE WAY IN.

   The Google Fonts @import - divergence 12, and it would have been inert anyway
   since @import is only honoured at the top of a sheet. It was matched as a whole
   quoted statement rather than cut on the first semicolon, which is the mistake that
   broke three landing pages earlier the same day.

   Nothing else. from/to steps inside @keyframes are deliberately left unscoped -
   they are animation stops, not selectors.

   Generated, verified 0 bare selectors and brace-balanced before it was pasted.
   Regenerate rather than hand-edit if the source pages change.
   ========================================================================== */
/* ===== walden-mortgage-group  ->  .pkv-walden ===== */
/* Google Fonts: Lato (body/UI). Georgia is a system serif, no load needed. */


.pkv-walden {--navy:#1E3074;--cyan:#09BCEF;--frost:#0FE4A2;--coral:#F95557;--purple:#55489D;--ink:#484848;--grey:#F1F5FA;--white:#fff;font-family:'Lato',-apple-system,sans-serif;color:var(--ink);line-height:1.7;font-size:20px;font-weight:400;overflow-x:hidden}
.pkv-walden * {box-sizing:border-box;margin:0;padding:0}
.pkv-walden h1, .pkv-walden h2, .pkv-walden h3, .pkv-walden h4 {font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-weight:400;letter-spacing:-0.01em;text-wrap:balance}
.pkv-walden h1 {text-wrap:pretty}
.pkv-walden p, .pkv-walden .pkvf-qa-q, .pkv-walden .pkvf-faq-q, .pkv-walden .pkvf-stat-lbl {text-wrap:pretty}
.pkv-walden .pkvf-lead, .pkv-walden .pkvf-pullquote p, .pkv-walden .pkvf-callout p, .pkv-walden .pkvf-qa-q, .pkv-walden .pkvf-faq-q {text-wrap:balance}
.pkv-walden h1 {font-size:clamp(2.3rem,5vw,3.25rem);line-height:1.1}
.pkv-walden h2 {font-size:clamp(1.9rem,4vw,2.875rem);line-height:1.2}
.pkv-walden h3 {font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.3}
.pkv-walden h4 {font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.4}
.pkv-walden p {font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pkv-walden a {color:var(--cyan);text-decoration:none}
.pkv-walden .pkvf-wrap {max-width:1180px;margin:0 auto;padding:0 24px}
.pkv-walden .pkvf-section {width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.pkv-walden .pkvf-narrow {max-width:760px}
.pkv-walden .pkvf-section {padding:var(--pk-sec-y) 0}
.pkv-walden .pkvf-hero {padding:22px 0 var(--pk-sec-y-hero)}
.pkv-walden .pkvf-dark {background:radial-gradient(120% 120% at 85% 0%, rgba(9,188,239,0.10) 0%, rgba(9,188,239,0) 46%), linear-gradient(157deg,#21346f 0%,#15224f 100%)}
.pkv-walden .pkvf-darker {background:radial-gradient(130% 130% at 100% 0%, rgba(15,228,162,0.10) 0%, rgba(15,228,162,0) 52%), linear-gradient(157deg,#1a2a5e 0%,#0f1942 100%)}
.pkv-walden .pkvf-grey {background:var(--grey)}
.pkv-walden .pkvf-dark h1, .pkv-walden .pkvf-dark h2, .pkv-walden .pkvf-dark h3, .pkv-walden .pkvf-dark h4, .pkv-walden .pkvf-darker h1, .pkv-walden .pkvf-darker h2, .pkv-walden .pkvf-darker h3, .pkv-walden .pkvf-darker h4 {color:var(--white)}
.pkv-walden .pkvf-dark p, .pkv-walden .pkvf-darker p {color:rgba(255,255,255,0.88)}
.pkv-walden .pkvf-eyebrow {display:inline-flex;align-items:center;gap:12px;font-family:'Lato',sans-serif;font-size:18px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
.pkv-walden .pkvf-eyebrow::before {content:"";width:34px;height:2px;background:var(--cyan);display:inline-block}
.pkv-walden .pkvf-eyebrow-light {color:var(--cyan)}
.pkv-walden .pkvf-lead {font-size:1.2rem;line-height:1.6;color:var(--ink);max-width:680px}
.pkv-walden .pkvf-dark .pkvf-lead, .pkv-walden .pkvf-darker .pkvf-lead {color:rgba(255,255,255,0.9)}
.pkv-walden .pkvf-btn {display:inline-block;border-radius:999px;padding:16px 34px;font-family:'Lato',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;border:2px solid transparent;line-height:1.1;text-decoration:none!important}
.pkv-walden .pkvf-btn-primary {background:var(--cyan)!important;color:#06283c!important}
.pkv-walden .pkvf-btn-primary:hover {background:var(--navy)!important;color:#fff!important}
.pkv-walden .pkvf-btn-frost {background:var(--frost)!important;color:#06342a!important}
.pkv-walden .pkvf-btn-frost:hover {background:#fff!important;color:var(--navy)!important}
.pkv-walden .pkvf-btn-outline {background:transparent!important;border-color:var(--navy)!important;color:var(--navy)!important}
.pkv-walden .pkvf-btn-outline:hover {background:var(--cyan)!important;border-color:var(--cyan)!important;color:#06283c!important}
.pkv-walden .pkvf-btn-outline-light {background:transparent!important;border-color:rgba(255,255,255,0.5)!important;color:#fff!important}
.pkv-walden .pkvf-btn-outline-light:hover {background:#fff!important;color:var(--navy)!important;border-color:#fff!important}
.pkv-walden .pkvf-cta-row {display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.pkv-walden .pkvf-grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pkv-walden .pkvf-grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.pkv-walden .pkvf-grid-4 {display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pkv-walden .pkvf-svg {width:100%;height:auto;display:block}
.pkv-walden .pkvf-figure {margin:0}
.pkv-walden .pkvf-figcap {font-size:0.85rem;color:#7b8190;margin-top:14px;font-style:italic}
.pkv-walden .pkvf-scroll-hint {display:none}
.pkv-walden .pkvf-dark .pkvf-figcap, .pkv-walden .pkvf-darker .pkvf-figcap {color:rgba(255,255,255,0.6)}
/* Stat blocks */
.pkv-walden .pkvf-stat {background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:32px 28px;text-align:left;transition:transform .28s ease,border-color .28s ease}
.pkv-walden .pkvf-stat:hover {transform:translateY(-3px);border-color:rgba(9,188,239,0.5)}
.pkv-walden .pkvf-stat-num {font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,3rem);line-height:1.05;color:#fff;font-weight:400;letter-spacing:-0.01em;margin-bottom:8px}
.pkv-walden .pkvf-stat-num em {font-style:italic;color:var(--cyan)}
.pkv-walden .pkvf-stat-lbl {font-family:'Lato',sans-serif;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.65);font-weight:700;line-height:1.4}
/* Pull quote */
.pkv-walden .pkvf-pullquote {background:#fff;border-left:4px solid var(--cyan);border-radius:6px;padding:38px 44px;box-shadow:0 18px 40px rgba(30,48,116,0.10);margin-top:0}
.pkv-walden .pkvf-pullquote p {font-family:Georgia,serif;font-size:1.55rem;line-height:1.4;color:var(--navy);font-style:italic}
.pkv-walden .pkvf-pullquote-attr {font-family:'Lato',sans-serif;font-weight:700;color:var(--ink);font-size:0.95rem;margin-top:22px;font-style:normal}
.pkv-walden .pkvf-pullquote-attr span {display:block;font-weight:400;color:#7b8190;font-size:0.88rem}
/* Pillar block */
.pkv-walden .pkvf-pillar-head {display:flex;align-items:baseline;gap:20px;margin-bottom:18px}
.pkv-walden .pkvf-pillar-num {font-family:Georgia,serif;font-size:2.5rem;color:var(--cyan);font-weight:400;line-height:1;letter-spacing:-0.02em}
.pkv-walden .pkvf-pillar-lbl {font-family:'Lato',sans-serif;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:#7b8190;font-weight:700}
.pkv-walden .pkvf-dark .pkvf-pillar-lbl, .pkv-walden .pkvf-darker .pkvf-pillar-lbl {color:rgba(255,255,255,0.5)}
.pkv-walden .pkvf-pillar-grid {display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px}
.pkv-walden .pkvf-pillar-grid h4 {margin-bottom:12px;font-family:'Lato',sans-serif;font-size:0.82rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);font-weight:700}
/* Outcome card */
.pkv-walden .pkvf-outcome {background:#fff;border:1px solid #d9e0ec;border-radius:14px;padding:32px 30px;height:100%;transition:transform .28s ease,box-shadow .28s ease}
.pkv-walden .pkvf-outcome:hover {transform:translateY(-4px);box-shadow:0 18px 42px rgba(30,48,116,0.12)}
.pkv-walden .pkvf-outcome-num {font-family:Georgia,serif;font-size:1.05rem;color:var(--cyan);font-weight:700;letter-spacing:0.05em;margin-bottom:8px}
.pkv-walden .pkvf-outcome h3 {font-size:1.25rem;line-height:1.3;margin-bottom:14px;color:var(--navy)}
.pkv-walden .pkvf-outcome p {font-size:0.98rem;color:var(--ink)}
/* Q&A blocks */
.pkv-walden .pkvf-qa {padding:28px 0;border-bottom:1px solid #e0e6f0}
.pkv-walden .pkvf-qa:last-child {border-bottom:none}
.pkv-walden .pkvf-qa-q {font-family:Georgia,serif;font-size:1.35rem;color:var(--navy);line-height:1.35;margin-bottom:12px}
.pkv-walden .pkvf-qa-num {font-family:'Lato',sans-serif;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:8px;display:block}
.pkv-walden .pkvf-qa-a {font-size:1.05rem;color:var(--ink);line-height:1.65}
/* Tags */
.pkv-walden .pkvf-tags {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pkv-walden .pkvf-tag {border:1px solid #d3dcec;border-radius:999px;padding:7px 16px;font-size:0.8rem;font-weight:700;color:var(--navy);background:#fff;letter-spacing:0.02em}
.pkv-walden .pkvf-dark .pkvf-tag, .pkv-walden .pkvf-darker .pkvf-tag {background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);color:#fff}
/* Trust row */
.pkv-walden .pkvf-trust {text-align:center}
.pkv-walden .pkvf-trust-label {font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#9aa3b2;margin-bottom:28px}
.pkv-walden .pkvf-trust-row {display:flex;flex-wrap:wrap;justify-content:center;gap:44px;align-items:center}
.pkv-walden .pkvf-trust-row span {font-family:Georgia,serif;font-size:1.5rem;color:#aab2c0;letter-spacing:0.01em}
/* FAQ */
.pkv-walden .pkvf-faq-item {border-bottom:1px solid #e0e6f0}
.pkv-walden .pkvf-faq-q {width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:26px 44px 26px 0;font-family:Georgia,serif;font-size:1.2rem;color:var(--navy);position:relative;line-height:1.4}
.pkv-walden .pkvf-faq-q::after {content:"";position:absolute;right:6px;top:32px;width:11px;height:11px;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s}
.pkv-walden .pkvf-faq-q[aria-expanded="true"]::after {transform:rotate(-135deg)}
.pkv-walden .pkvf-faq-a {max-height:0;overflow:hidden;transition:max-height .3s ease}
.pkv-walden .pkvf-faq-a p {padding:0 44px 26px 0;font-size:1rem;color:var(--ink)}
/* Callout */
.pkv-walden .pkvf-callout {background:var(--navy);border-radius:14px;padding:44px 48px;margin-top:8px}
.pkv-walden .pkvf-callout p {font-family:Georgia,serif;font-size:1.5rem;line-height:1.4;color:#fff;font-style:italic}
.pkv-walden .pkvf-callout .pkvf-bar {width:46px;height:3px;background:var(--frost);margin-bottom:22px}
/* Honest-take card */
.pkv-walden .pkvf-honest {background:#fff;border:1px solid #d9e0ec;border-radius:16px;padding:40px 44px;margin-top:24px}
.pkv-walden .pkvf-honest-tag {display:inline-block;font-family:'Lato',sans-serif;font-size:0.72rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--frost);background:#06342a;padding:5px 13px;border-radius:999px;font-weight:700;margin-bottom:18px}
/* Source footer card */
.pkv-walden .pkvf-source {background:#fff;border:1px solid #d9e0ec;border-radius:14px;padding:24px 30px;margin-top:48px;display:flex;flex-wrap:wrap;gap:32px;font-size:0.88rem;color:#7b8190}
.pkv-walden .pkvf-source div {text-wrap:pretty}
.pkv-walden .pkvf-source strong {display:block;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy);margin-bottom:4px;font-weight:700}
/* Reveal animation */
.pkv-walden.js .pkvf-reveal {opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.pkv-walden.js .pkvf-reveal.is-visible {opacity:1;transform:none}
@media (prefers-reduced-motion:reduce) {
.pkv-walden.js .pkvf-reveal {opacity:1;transform:none;transition:none}}
/* Mobile: let the flow diagram keep legible type by scrolling horizontally */
@media (max-width:760px) {
.pkv-walden .pkvf-figure-scroll {overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px}
.pkv-walden .pkvf-figure-scroll .pkvf-svg {min-width:720px}
.pkv-walden .pkvf-scroll-hint {display:block;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:#9aa3b2;font-weight:700;margin-top:10px}
}
@media (max-width:860px) {
.pkv-walden .pkvf-section {padding:64px 0}
.pkv-walden .pkvf-hero h1 {font-size:2.1rem}
.pkv-walden .pkvf-stat-num {font-size:2.1rem}
.pkv-walden .pkvf-cta-row {gap:12px}
.pkv-walden .pkvf-btn {padding:15px 26px;font-size:0.9rem}
.pkv-walden .pkvf-qa-q {font-size:1.15rem}
.pkv-walden .pkvf-faq-q {font-size:1.05rem;padding-right:38px}
.pkv-walden .pkvf-hero {padding:var(--pk-sec-y-hero) 0 40px}
.pkv-walden .pkvf-grid-2, .pkv-walden .pkvf-grid-3, .pkv-walden .pkvf-grid-4, .pkv-walden .pkvf-pillar-grid {grid-template-columns:1fr;gap:28px}
.pkv-walden .pkvf-pullquote {padding:28px 26px}
.pkv-walden .pkvf-pullquote p {font-size:1.25rem}
.pkv-walden .pkvf-callout {padding:30px 24px}
.pkv-walden .pkvf-callout p {font-size:1.2rem}
.pkv-walden .pkvf-trust-row {gap:28px}
.pkv-walden .pkvf-trust-row span {font-size:1.2rem}
.pkv-walden .pkvf-honest {padding:28px 26px}
.pkv-walden .pkvf-stat {padding:24px 22px}
.pkv-walden .pkvf-source {padding:20px 22px;gap:18px}
}
/* --- Logo marquee (Walden namespace) --- */
.pkv-walden .pkvf-marquee {overflow:hidden;position:relative;margin-top:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pkv-walden .pkvf-marquee-track {display:flex;align-items:center;gap:70px;width:max-content;
  animation:pkvf-marq 36s linear infinite}
.pkv-walden .pkvf-marquee:hover .pkvf-marquee-track {animation-play-state:paused}
.pkv-walden .pkvf-logo {display:block;height:34px;width:auto;opacity:.55;
  filter:brightness(0) saturate(0);transition:opacity .3s}
.pkv-walden .pkvf-logo:nth-child(4n+3) {height:28px}
.pkv-walden .pkvf-logo:nth-child(4n) {height:40px}
.pkv-walden .pkvf-logo:hover {opacity:.9}
@keyframes pkvf-marq {to{transform:translateX(-50%)}}
/* dark sections: black logos would disappear */
.pkv-walden .pkvf-dark .pkvf-logo, .pkv-walden .pkvf-darker .pkvf-logo {filter:brightness(0) saturate(0) invert(1);opacity:.6}
@media (prefers-reduced-motion:reduce) {
.pkv-walden .pkvf-marquee-track {animation:none}
}


/* ===== fiserv  ->  .pkv-fiserv ===== */
.pkv-fiserv {--navy:#1E3074;--cyan:#09BCEF;--frost:#0FE4A2;--coral:#F95557;--purple:#55489D;--ink:#484848;--grey:#F1F5FA;--white:#fff;font-family:'Lato',-apple-system,sans-serif;color:var(--ink);line-height:1.7;font-size:20px;font-weight:400;}
.pkv-fiserv * {box-sizing:border-box;margin:0;padding:0}
.pkv-fiserv h1, .pkv-fiserv h2, .pkv-fiserv h3, .pkv-fiserv h4 {font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-weight:400;letter-spacing:-0.01em}
.pkv-fiserv h1 {font-size:clamp(2.3rem,5vw,3.25rem);line-height:1.1}
.pkv-fiserv h2 {font-size:clamp(1.9rem,4vw,2.875rem);line-height:1.2}
.pkv-fiserv h3 {font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.3}
.pkv-fiserv h4 {font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.4}
.pkv-fiserv p {font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pkv-fiserv a {color:var(--cyan);text-decoration:none}
.pkv-fiserv .pkvf-wrap {max-width:1300px;margin:0 auto;padding:0 10px}
.pkv-fiserv .pkvf-section {width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.pkv-fiserv .pkvf-narrow {max-width:760px}
.pkv-fiserv .pkvf-section {padding:var(--pk-sec-y) 0}
.pkv-fiserv .pkvf-hero {padding:22px 0 var(--pk-sec-y-hero)}
.pkv-fiserv .pkvf-dark {background:radial-gradient(120% 120% at 85% 0%, rgba(9,188,239,0.10) 0%, rgba(9,188,239,0) 46%), linear-gradient(157deg,#21346f 0%,#15224f 100%)}
.pkv-fiserv .pkvf-darker {background:radial-gradient(130% 130% at 100% 0%, rgba(15,228,162,0.10) 0%, rgba(15,228,162,0) 52%), linear-gradient(157deg,#1a2a5e 0%,#0f1942 100%)}
.pkv-fiserv .pkvf-grey {background:var(--grey)}
.pkv-fiserv .pkvf-dark h1, .pkv-fiserv .pkvf-dark h2, .pkv-fiserv .pkvf-dark h3, .pkv-fiserv .pkvf-dark h4, .pkv-fiserv .pkvf-darker h1, .pkv-fiserv .pkvf-darker h2, .pkv-fiserv .pkvf-darker h3, .pkv-fiserv .pkvf-darker h4 {color:var(--white)}
.pkv-fiserv .pkvf-dark p, .pkv-fiserv .pkvf-darker p {color:rgba(255,255,255,0.88)}
.pkv-fiserv .pkvf-eyebrow {display:inline-flex;align-items:center;gap:12px;font-family:'Lato',sans-serif;font-size:18px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
.pkv-fiserv .pkvf-eyebrow::before {content:"";width:34px;height:2px;background:var(--cyan);display:inline-block}
.pkv-fiserv .pkvf-eyebrow-light {color:var(--cyan)}
.pkv-fiserv .pkvf-lead {font-size:1.2rem;line-height:1.6;color:var(--ink);max-width:680px}
.pkv-fiserv .pkvf-dark .pkvf-lead, .pkv-fiserv .pkvf-darker .pkvf-lead {color:rgba(255,255,255,0.9)}
.pkv-fiserv .pkvf-btn {display:inline-block;border-radius:999px;padding:16px 34px;font-family:'Lato',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;border:2px solid transparent;line-height:1.1;text-decoration:none!important}
.pkv-fiserv .pkvf-btn-primary {background:var(--cyan)!important;color:#06283c!important}
.pkv-fiserv .pkvf-btn-primary:hover {background:var(--navy)!important;color:#fff!important}
.pkv-fiserv .pkvf-btn-frost {background:var(--frost)!important;color:#06342a!important}
.pkv-fiserv .pkvf-btn-frost:hover {background:#fff!important;color:var(--navy)!important}
.pkv-fiserv .pkvf-btn-outline {background:transparent!important;border-color:var(--navy)!important;color:var(--navy)!important}
.pkv-fiserv .pkvf-btn-outline:hover {background:var(--cyan)!important;border-color:var(--cyan)!important;color:#06283c!important}
.pkv-fiserv .pkvf-btn-outline-light {background:transparent!important;border-color:rgba(255,255,255,0.5)!important;color:#fff!important}
.pkv-fiserv .pkvf-btn-outline-light:hover {background:#fff!important;color:var(--navy)!important;border-color:#fff!important}
.pkv-fiserv .pkvf-cta-row {display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.pkv-fiserv .pkvf-grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pkv-fiserv .pkvf-grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.pkv-fiserv .pkvf-grid-4 {display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pkv-fiserv .pkvf-svg {width:100%;height:auto;display:block}
.pkv-fiserv .pkvf-figure {margin:0}
.pkv-fiserv .pkvf-figcap {font-size:0.85rem;color:#7b8190;margin-top:14px;font-style:italic}
.pkv-fiserv .pkvf-dark .pkvf-figcap, .pkv-fiserv .pkvf-darker .pkvf-figcap {color:rgba(255,255,255,0.6)}
/* Stat blocks */
.pkv-fiserv .pkvf-stat {background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:32px 28px;text-align:left;transition:transform .28s ease,border-color .28s ease}
.pkv-fiserv .pkvf-stat:hover {transform:translateY(-3px);border-color:rgba(9,188,239,0.5)}
.pkv-fiserv .pkvf-stat-num {font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,3rem);line-height:1.05;color:#fff;font-weight:400;letter-spacing:-0.01em;margin-bottom:8px}
.pkv-fiserv .pkvf-stat-num em {font-style:italic;color:var(--cyan)}
.pkv-fiserv .pkvf-stat-lbl {font-family:'Lato',sans-serif;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.65);font-weight:700;line-height:1.4}
/* Pull quote */
.pkv-fiserv .pkvf-pullquote {background:#fff;border-left:4px solid var(--cyan);border-radius:6px;padding:38px 44px;box-shadow:0 18px 40px rgba(30,48,116,0.10);margin-top:0}
.pkv-fiserv .pkvf-pullquote p {font-family:Georgia,serif;font-size:1.55rem;line-height:1.4;color:var(--navy);font-style:italic}
.pkv-fiserv .pkvf-pullquote-attr {font-family:'Lato',sans-serif;font-weight:700;color:var(--ink);font-size:0.95rem;margin-top:22px;font-style:normal}
.pkv-fiserv .pkvf-pullquote-attr span {display:block;font-weight:400;color:#7b8190;font-size:0.88rem}
/* Pillar block */
.pkv-fiserv .pkvf-pillar-head {display:flex;align-items:baseline;gap:20px;margin-bottom:18px}
.pkv-fiserv .pkvf-pillar-num {font-family:Georgia,serif;font-size:2.5rem;color:var(--cyan);font-weight:400;line-height:1;letter-spacing:-0.02em}
.pkv-fiserv .pkvf-pillar-lbl {font-family:'Lato',sans-serif;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:#7b8190;font-weight:700}
.pkv-fiserv .pkvf-dark .pkvf-pillar-lbl, .pkv-fiserv .pkvf-darker .pkvf-pillar-lbl {color:rgba(255,255,255,0.5)}
.pkv-fiserv .pkvf-pillar-grid {display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px}
.pkv-fiserv .pkvf-pillar-grid h4 {margin-bottom:12px;font-family:'Lato',sans-serif;font-size:0.82rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);font-weight:700}
/* Outcome card */
.pkv-fiserv .pkvf-outcome {background:#fff;border:1px solid #d9e0ec;border-radius:14px;padding:32px 30px;height:100%;transition:transform .28s ease,box-shadow .28s ease}
.pkv-fiserv .pkvf-outcome:hover {transform:translateY(-4px);box-shadow:0 18px 42px rgba(30,48,116,0.12)}
.pkv-fiserv .pkvf-outcome-num {font-family:Georgia,serif;font-size:1.05rem;color:var(--cyan);font-weight:700;letter-spacing:0.05em;margin-bottom:8px}
.pkv-fiserv .pkvf-outcome h3 {font-size:1.25rem;line-height:1.3;margin-bottom:14px;color:var(--navy)}
.pkv-fiserv .pkvf-outcome p {font-size:0.98rem;color:var(--ink)}
/* Q&A blocks */
.pkv-fiserv .pkvf-qa {padding:28px 0;border-bottom:1px solid #e0e6f0}
.pkv-fiserv .pkvf-qa:last-child {border-bottom:none}
.pkv-fiserv .pkvf-qa-q {font-family:Georgia,serif;font-size:1.35rem;color:var(--navy);line-height:1.35;margin-bottom:12px}
.pkv-fiserv .pkvf-qa-num {font-family:'Lato',sans-serif;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:8px;display:block}
.pkv-fiserv .pkvf-qa-a {font-size:1.05rem;color:var(--ink);line-height:1.65}
/* Tags */
.pkv-fiserv .pkvf-tags {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pkv-fiserv .pkvf-tag {border:1px solid #d3dcec;border-radius:999px;padding:7px 16px;font-size:0.8rem;font-weight:700;color:var(--navy);background:#fff;letter-spacing:0.02em}
.pkv-fiserv .pkvf-dark .pkvf-tag, .pkv-fiserv .pkvf-darker .pkvf-tag {background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);color:#fff}
/* Trust row */
.pkv-fiserv .pkvf-trust {text-align:center}
.pkv-fiserv .pkvf-trust-label {font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#9aa3b2;margin-bottom:28px}
.pkv-fiserv .pkvf-trust-row {display:flex;flex-wrap:wrap;justify-content:center;gap:44px;align-items:center}
.pkv-fiserv .pkvf-trust-row span {font-family:Georgia,serif;font-size:1.5rem;color:#aab2c0;letter-spacing:0.01em}
.pkv-fiserv .pkvf-trust-note {font-size:0.78rem;line-height:1.6;color:#9aa3b2;margin:24px auto 0;max-width:680px}
.pkv-fiserv .pkvf-dark .pkvf-trust-note, .pkv-fiserv .pkvf-darker .pkvf-trust-note {color:rgba(255,255,255,0.6)}
/* Trust row — scrolling logo marquee
   Track content must be duplicated EXACTLY TWICE for the -50% loop to be seamless. */
.pkv-fiserv .pkvf-marquee {overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.pkv-fiserv .pkvf-marquee-track {display:flex;align-items:center;gap:70px;width:max-content;
  animation:pkvf-marq 36s linear infinite}
.pkv-fiserv .pkvf-marquee:hover .pkvf-marquee-track, .pkv-fiserv .pkvf-marquee:focus-within .pkvf-marquee-track {animation-play-state:paused}
@keyframes pkvf-marq {from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* heights are per SLOT, not per brand — reordering the logos moves the sizing */
.pkv-fiserv .pkvf-logo {display:block;flex:none;height:34px;width:auto;opacity:.55;
  filter:brightness(0) saturate(0);transition:opacity .3s ease}
.pkv-fiserv .pkvf-logo:nth-child(4n+3) {height:28px}
.pkv-fiserv .pkvf-logo:nth-child(4n) {height:40px}
.pkv-fiserv .pkvf-logo:hover {opacity:.9}
/* dark sections: black-on-navy would vanish */
.pkv-fiserv .pkvf-dark .pkvf-logo, .pkv-fiserv .pkvf-darker .pkvf-logo {filter:brightness(0) saturate(0) invert(1);opacity:.6}
@media (prefers-reduced-motion:reduce) {
.pkv-fiserv .pkvf-marquee {-webkit-mask-image:none;mask-image:none}
.pkv-fiserv .pkvf-marquee-track {animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:36px}
.pkv-fiserv .pkvf-marquee-track .pkvf-logo[aria-hidden="true"] {display:none}
}
/* FAQ */
.pkv-fiserv .pkvf-faq-item {border-bottom:1px solid #e0e6f0}
.pkv-fiserv .pkvf-faq-q {width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:26px 44px 26px 0;font-family:Georgia,serif;font-size:1.2rem;color:var(--navy);position:relative;line-height:1.4}
.pkv-fiserv .pkvf-faq-q::after {content:"";position:absolute;right:6px;top:32px;width:11px;height:11px;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s}
.pkv-fiserv .pkvf-faq-q[aria-expanded="true"]::after {transform:rotate(-135deg)}
.pkv-fiserv .pkvf-faq-a {max-height:0;overflow:hidden;transition:max-height .3s ease}
.pkv-fiserv .pkvf-faq-a p {padding:0 44px 26px 0;font-size:1rem;color:var(--ink)}
/* Callout */
.pkv-fiserv .pkvf-callout {background:var(--navy);border-radius:14px;padding:44px 48px;margin-top:8px}
.pkv-fiserv .pkvf-callout p {font-family:Georgia,serif;font-size:1.5rem;line-height:1.4;color:#fff;font-style:italic}
.pkv-fiserv .pkvf-callout .pkvf-bar {width:46px;height:3px;background:var(--frost);margin-bottom:22px}
/* Honest-take card */
.pkv-fiserv .pkvf-honest {background:#fff;border:1px solid #d9e0ec;border-radius:16px;padding:40px 44px;margin-top:24px}
.pkv-fiserv .pkvf-honest-tag {display:inline-block;font-family:'Lato',sans-serif;font-size:0.72rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--frost);background:#06342a;padding:5px 13px;border-radius:999px;font-weight:700;margin-bottom:18px}
/* Source footer card */
.pkv-fiserv .pkvf-source {background:#fff;border:1px solid #d9e0ec;border-radius:14px;padding:24px 30px;margin-top:48px;display:flex;flex-wrap:wrap;gap:32px;font-size:0.88rem;color:#7b8190}
.pkv-fiserv .pkvf-source strong {display:block;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy);margin-bottom:4px;font-weight:700}
/* Reveal animation */
.pkv-fiserv.js .pkvf-reveal {opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.pkv-fiserv.js .pkvf-reveal.is-visible {opacity:1;transform:none}
@media (prefers-reduced-motion:reduce) {
.pkv-fiserv.js .pkvf-reveal {opacity:1;transform:none;transition:none}}
@media (max-width:860px) {
.pkv-fiserv .pkvf-section {padding:64px 0}
.pkv-fiserv .pkvf-hero {padding:var(--pk-sec-y-hero) 0 40px}
.pkv-fiserv .pkvf-grid-2, .pkv-fiserv .pkvf-grid-3, .pkv-fiserv .pkvf-grid-4, .pkv-fiserv .pkvf-pillar-grid {grid-template-columns:1fr;gap:28px}
.pkv-fiserv .pkvf-pullquote {padding:28px 26px}
.pkv-fiserv .pkvf-pullquote p {font-size:1.25rem}
.pkv-fiserv .pkvf-callout {padding:30px 24px}
.pkv-fiserv .pkvf-callout p {font-size:1.2rem}
.pkv-fiserv .pkvf-trust-row {gap:28px}
.pkv-fiserv .pkvf-trust-row span {font-size:1.2rem}
.pkv-fiserv .pkvf-marquee-track {gap:44px;animation-duration:26s}
.pkv-fiserv .pkvf-logo {height:26px}
.pkv-fiserv .pkvf-logo:nth-child(4n+3) {height:22px}
.pkv-fiserv .pkvf-logo:nth-child(4n) {height:30px}
.pkv-fiserv .pkvf-honest {padding:28px 26px}
.pkv-fiserv .pkvf-stat {padding:24px 22px}
.pkv-fiserv .pkvf-source {padding:20px 22px;gap:18px}
}



/* ==========================================================================
   ANNUAL DATA-BREACH ROUND-UP  -  .pkb  and  .pk-breach-archive
   --------------------------------------------------------------------------
   PORTED FROM STAGING - 2026-08-16.
   Source: two inline <style> blocks in staging /blog/2026-data-breaches,
   Avada fusion_code blocks 1 and 19 of 20.

   THIS IS A MODEL, NOT ONE PAGE. The same markup and the same two sheets serve
   2025, 2026 and every year after. Bob, 2026-08-16: "I want to set a model for
   the 2026-data-breaches and the 2025-data-breaches and a model for the
   2027-data-breaches to come."

   The unit of the design is the MONTH, not the page. A monthly section is
   .pkb > #<month><year> holding N <article class="pkb-rev"> entries, followed
   by a navy CTA band. The page is that unit repeated - seven times in 2026 so
   far - which is why 276 KB of content needs only 5.7 KB of CSS.

   SCOPING: none was needed, and that is worth recording rather than assuming.
   All 44 selectors across both sheets already begin with .pkb or
   .pk-breach-*; zero bare selectors, zero collisions with anything else in
   this file. Both were checked before pasting, the same check that caught
   .form-rev.no-fc overriding the shared form pane on five live pages.

   ONE DELETION: the Google Fonts @import at the top of the first sheet.
   Divergence 12 - this theme self-hosts Lato from assets/fonts/ and
   inc/security.php:703 records the reason: "no CDN origin". An @import in the
   middle of a stylesheet is inert anyway, since @import is only honoured at
   the top of a sheet. It was matched as a whole quoted statement, NOT cut on
   the first semicolon - the URL contains semicolons of its own
   (wght@400;700;900), and cutting on the first one is exactly the mistake that
   broke three landing pages on 2026-08-14.

   BEHAVIOUR lives in assets/js/breach-page.js, enqueued from inc/enqueue.php
   only on a post carrying the standalone flag. The icons were a CDN dependency
   on staging and are self-hosted now; the reasoning is in that file's header.
   ========================================================================== */

/* ----- 1 of 2: the page system (.pkb) ----- */
/* =============================================================
   PKWARE — 2026 Data Breaches (July 2026 edition)
   All layout/appearance is inline on the elements; this sheet
   carries only what inline styles cannot express: hover states
   and responsive breakpoints. Everything is scoped under .pkb.
   ============================================================= */
.pkb{scroll-behavior:smooth}
.pkb a{color:#1E3074;text-decoration:none}
.pkb a:hover{color:#057FA3}
.pkb :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(9,188,239,.35);border-radius:6px}
.pkb .pkb-toc-link:hover{background:#F4F8FD;color:#1E3074}
.pkb .pkb-card-hover{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.pkb .pkb-card-hover:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(30,48,116,.34);border-color:#D8DEE9}
.pkb .pkb-month:hover{border-color:#09BCEF;color:#1E3074}
.pkb img{max-width:100%;display:block}

/* --- responsive --- */
@media (max-width:1180px){
  .pkb .pkb-vec{grid-template-columns:repeat(3,1fr) !important}
  .pkb .pkb-arch{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:1020px){
  .pkb .pkb-split{grid-template-columns:1fr !important}
  .pkb .pkb-toc{display:none !important}
  .pkb .pkb-hero{grid-template-columns:1fr !important;gap:38px !important}
}
@media (max-width:860px){
  .pkb .pkb-stats{grid-template-columns:repeat(2,1fr) !important}
  .pkb .pkb-vec{grid-template-columns:repeat(2,1fr) !important}
  .pkb .pkb-arch{grid-template-columns:repeat(2,1fr) !important}
  .pkb .pkb-matrix-scroll{overflow-x:auto}
}
@media (max-width:560px){
  .pkb .pkb-vec{grid-template-columns:1fr !important}
  .pkb .pkb-stats{grid-template-columns:1fr !important}
}
/* --- mobile: stack the Scale-of-breach / Data-exposed card pair --- */
@media (max-width:700px){
  .pkb div[style*="grid-template-columns:1fr 1fr;gap:18px"]{grid-template-columns:1fr !important}
}
/* --- mobile: stack the "Key Takeaways" two-column paragraphs --- */
@media (max-width:700px){
  .pkb div[style*="grid-template-columns:1fr 1fr;gap:40px"]{grid-template-columns:1fr !important}
}
/* --- responsive: the "What security teams should take" 3-card row --- */
@media (max-width:860px){
  .pkb div[style*="grid-template-columns:repeat(3,1fr);gap:18px"]{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:560px){
  .pkb div[style*="grid-template-columns:repeat(3,1fr);gap:18px"]{grid-template-columns:1fr !important}
}

/* ----- 2 of 2: the previous-years archive block (.pk-breach-archive) ----- */
.pk-breach-archive{font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8f9fa;color:#4C5C68;box-sizing:border-box;width:100vw;margin:0 0 0 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:0 !important;padding:48px 26px var(--pk-sec-y)}
.pk-breach-archive .pk-inner{max-width:1300px;margin:0 auto}
.pk-breach-archive h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#1E3074;font-size:clamp(26px,2.8vw,38px);line-height:1.15;letter-spacing:-.01em;margin:0 0 10px}
.pk-breach-archive .pk-sub{margin:0 0 30px;font-size:16.5px;line-height:1.6;color:#4C5C68;max-width:64ch}
.pk-breach-featured{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:linear-gradient(135deg,#1E3074,#25275C);border-radius:16px;padding:26px 30px;margin:0 0 36px;box-shadow:0 20px 44px -26px rgba(30,48,116,.55);position:relative;overflow:hidden}
.pk-breach-featured::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 220px at 92% -40%,rgba(9,188,239,.28),transparent 60%),radial-gradient(360px 200px at 0% 140%,rgba(15,228,162,.18),transparent 60%)}
.pk-breach-featured .pk-feat-txt{position:relative;z-index:1}
.pk-breach-featured .pk-feat-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0FE4A2;margin:0 0 7px}
.pk-breach-featured .pk-feat-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.2;color:#FFFFFF;margin:0}
.pk-breach-featured a.pk-feat-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:#0FE4A2;color:#062B20;font-weight:800;font-size:15px;padding:14px 26px;border-radius:999px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.pk-breach-featured a.pk-feat-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(6,43,32,.55)}
.pk-breach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start;column-rule:none}
.pk-breach-year-section{background:#FFFFFF;border:1px solid #E1E7F1;border-radius:14px;padding:22px 22px 8px;margin:0;break-inside:auto;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pk-breach-year-section:hover{transform:translateY(-3px);box-shadow:0 22px 46px -30px rgba(30,48,116,.34);border-color:#09BCEF}
.pk-breach-year-section h3{color:#1E3074;font-size:15px;font-weight:800;letter-spacing:.02em;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid #0FE4A2;display:inline-block}
.pk-breach-grid ul{list-style:none;padding:0;margin:0}
.pk-breach-grid li{padding:0;break-inside:avoid}
.pk-breach-grid li a{display:block;padding:8px 0;color:#1152BE;text-decoration:none;font-size:14.5px;font-weight:600;line-height:1.35;border-bottom:1px solid #F1F5FA;transition:color .15s ease,padding-left .15s ease}
.pk-breach-grid li:last-child a{border-bottom:0}
.pk-breach-grid li a:hover{color:#09BCEF;padding-left:6px}
@media (max-width:1100px){.pk-breach-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pk-breach-grid{grid-template-columns:1fr}.pk-breach-archive{padding-left:6%;padding-right:6%}}

/* ==========================================================================
   THE STORE - .buy-card, the Cleverbridge purchase forms
   --------------------------------------------------------------------------
   BUILT 2026-08-17 for /products/store, the only page on the site that takes
   money. Bob: "this is how we integrate with cleverbridge, I hate it, but it
   has to be done."

   The FORM MARKUP is not ours to restyle freely. Every name, value and option
   in it is a Cleverbridge contract, and assets/js/legacy-store.js selects
   `select[name="cart"]`, `span.price`, `input[name="CartID"]` and
   `input[name="recommendation"]` by name inside `.closest("form")`. So this
   block styles the controls and touches nothing that identifies them.

   THE SUBMIT STAYS AN <input type="submit">, not a <button>. It carries
   name="Submit" value="Add To Cart" and that pair is posted to Cleverbridge. A
   button would post the same thing when clicked, but "would" is not a word to
   use about a checkout. So the button look is applied to an input here instead,
   which is why these declarations duplicate .btn and .btn-green rather than
   reusing them - an input cannot carry those classes and stay valid alongside
   the name/value contract without inheriting .btn's display:inline-flex, which
   does not apply to a replaced element.

   Staging's version of this layout was inline styles doing arithmetic:
   padding:50px on one logo, padding:80px and margin-top:-30px on the other,
   margin-top:-50px on a heading, and margin-top:-80px on the section to pull it
   under a header that had been given height:0 by another inline <style>. None of
   that comes across. Two cards on a grid, one logo box, one set of controls.
   ========================================================================== */

#pkw .buy-card{padding:34px 32px 38px;display:flex;flex-direction:column}

/* Fixed-height logo box so two logos of different aspect ratios still put the
   product names on the same line. contain, never cover - these are wordmarks. */
#pkw .buy-logo{display:flex;align-items:center;justify-content:center;height:92px;margin-bottom:20px}
#pkw .buy-logo img{max-width:250px;max-height:64px;width:auto;height:auto;object-fit:contain}

#pkw .buy-card h3{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:0 0 10px;text-align:center}
#pkw .buy-tag{margin:0 0 26px;color:var(--tx-2);font-size:16.5px;line-height:1.6;text-align:center}

#pkw .buy-form{display:grid;gap:18px;margin-top:auto}
#pkw .buy-field{display:grid;gap:8px}
#pkw .buy-field label{font-family:var(--sans);font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2)}

#pkw .buy-form select,
#pkw .buy-form input[type="number"]{
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--tx);
  background:var(--glass-2);border:1.5px solid var(--brd);border-radius:12px;
  padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s
}
#pkw .buy-form select:focus,
#pkw .buy-form input[type="number"]:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(9,188,239,.16)}
#pkw .buy-qty{max-width:130px}

#pkw .buy-price{display:flex;align-items:baseline;gap:8px;font-family:var(--sans);font-size:15px;color:var(--tx-2)}
#pkw .buy-price .price{font-family:var(--serif);font-size:30px;line-height:1;color:var(--navy)}

/* Duplicates .btn + .btn-green deliberately - see the note above. */
#pkw .buy-form input[type="submit"]{
  font-family:var(--sans);font-weight:700;font-size:15.5px;line-height:1;
  padding:16px 26px;border-radius:999px;border:1.5px solid transparent;
  background:var(--frost);color:#062B20;cursor:pointer;
  transition:all .28s cubic-bezier(.4,0,.2,1)
}
#pkw .buy-form input[type="submit"]:hover{filter:brightness(1.06);transform:translateY(-1px)}
#pkw .buy-form input[type="submit"]:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

@media(max-width:820px){
  #pkw .buy-card{padding:28px 24px 30px}
  #pkw .buy-logo{height:78px}
}

/* ==========================================================================
   VERTICAL RHYTHM - the whole site's section spacing, in four values
   --------------------------------------------------------------------------
   Bob, 2026-08-17: "there should be no more or no less than 30px between
   elements... anything that has nothing but blank space for 80px, is just too
   much white space. This has to be adjusted everywhere."

   He is right, and the cause is not styling. Six design systems were ported at
   different times - #pkw, #pkw.pkenc, .pkb, .pkbc-page, .pkv-*, .pkvq-*,
   .pkv-gartner, #pk-landing-wrapper, #pk-quantum-readiness - and each arrived
   with its own opinion of what a section is worth vertically. Scoping stopped
   them colliding; it also froze six opinions into one file with nothing
   reconciling them. Measured before this block existed: 1,572 vertical-space
   declarations carrying a px value, of which 116 were 60px or more, spread over
   76 selectors. .pkenc alone had .sec at 132px and .cta at 128px.

   THE FIX IS FOUR VARIABLES, NOT 76 EDITS REPEATED FOREVER. Every one of those
   selectors now reads a token, so the site's rhythm is one line to change and
   cannot drift apart again.

   ALL FOUR ARE 30px BECAUSE THAT IS WHAT WAS ASKED FOR. Hero and CTA have their
   own knob rather than sharing one, so if either reads cramped it is a
   one-line change and not another audit.

   NOT TOUCHED: the 31-59px band, 348 declarations. Most of those are inside
   components - card padding, grid gaps, space under a heading - which is not
   what "between elements" means. That band gets looked at with numbers in front
   of us, not swept.
   ========================================================================== */

:root{
  --pk-sec-y: 30px; --pk-sec-y-roomy: 88px;        /* every section's top and bottom padding */
  --pk-sec-y-hero: 30px;   /* the first section on a page */
  --pk-sec-y-cta: 30px;    /* the full-bleed closing band */
  --pk-gap-xl: 30px;       /* the largest gap between two blocks in a section */
  --pk-sec-head-gap: 30px; /* a section heading block to the body under it */

  /* THE ARCHIVE NAV IS A PILL BAR. Bob, 2026-08-17: "I want this bar with news,
     blog, etc, to look and behave just like those pils, on all the pages it
     appears." The pills on the cards are .pk27-pill, defined in
     pkware-shortcodes/inc/shortcodes.php - a plugin this project does not edit -
     so the two values are restated here rather than shared. #1ec8a5 is the pk27
     accent and is NOT --frost (#0FE4A2); matching the pills means matching their
     colour, and both appear on the same page. If the two greens are ever unified
     this is the one line to change. */
  --pk-pill-border: #1ec8a5;              /* resting outline - the pk27 accent */
  --pk-pill-ink: #0b2a4a;                 /* resting label */
  --pk-pill-hover-bg: var(--pk-cyan);     /* fill on hover and when current */
  --pk-pill-hover-ink: var(--pk-white);
  --pk-pill-gap: 14px;
  --pk-pill-pad: .55em 1.3em;
  --pk-pill-size: 12.5px;
  --pk-pill-row-gap: 18px;                /* between the two nav rows */
  --pk-pill-sub-border: #d8dee9;          /* row two hairline - no grey fill */
}

/* PHONES GET LESS AIR - 2026-08-19, agreed with Bob before the 42-page padding run: 88px on
   desktop, 56px under 820px. A token override rather than a second .sec--roomy rule, so
   #pkw .sec--roomy stays one line and both values live in one place.

   IT MUST SIT AFTER THE :root BLOCK ABOVE, and I put it before on the first attempt, which
   made it silently dead. A plain :root and a :root inside a media query have the SAME
   specificity, so source order decides: with the override first, the later 88px wins even on
   a phone. Same class of trap as .sec--roomy versus .sec--tight, which this run also had to
   guard against.

   820px is the file's existing breakpoint, not a new one - it already carries four blocks. */
@media (max-width: 820px) {
  :root { --pk-sec-y-roomy: 56px; }
}

/* ==========================================================================
   /technical-support - the Salesforce Web-to-Case form, CSS ONLY
   --------------------------------------------------------------------------
   Bob, 2026-08-17: "I just need CSS for that form, to make it look similar to
   all our other forms visually." And, firmly: "I don't want the form fixed, this
   is the one form that comes from salesforce, this is a one-off."

   SO NOT ONE CHARACTER OF ITS MARKUP IS TOUCHED. That form is generated for
   webto.salesforce.com/servlet/servlet.WebToCase and carries the org id, the
   captcha settings and four custom field ids. It has no classes on any control -
   bare <label>, <br>, <input>, <select>, <textarea> - and its layout comes from
   <br> tags. Everything below styles those bare elements by type, scoped to the
   form's own id, so it cannot reach any other form on the site.

   `#tech-support br{display:none}` is the one aggressive rule, and it is what
   turns a <br>-separated stack into a real one. The <br>s stay in the document;
   they simply stop generating line boxes.

   TWO THINGS CSS CANNOT REACH, recorded rather than worked around:

     1. "Issue Type/Product*" is a bare text node, not a <label>. It renders as
        body copy above its select and there is no selector for a text node.
     2. retURL points at http://www.pkware.com/support-confirmation - production,
        and over http. That is part of the Salesforce contract, so it is left
        exactly as it is and flagged instead.

   The submit ships `disabled` and is enabled by the reCAPTCHA callback, so the
   disabled state is styled deliberately - it is the state a visitor sees first.
   ========================================================================== */

#pkw #tech-support{
  max-width:600px;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border:1px solid var(--brd);border-radius:18px;padding:34px 32px
}
#pkw #tech-support br{display:none}

#pkw #tech-support > p{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);margin:0 0 22px}

#pkw #tech-support label{display:block;font-family:var(--sans);font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);margin:0 0 8px}

#pkw #tech-support input[type="text"],
#pkw #tech-support select,
#pkw #tech-support textarea{
  display:block;width:100%;box-sizing:border-box;
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--tx);
  background:var(--glass-2);border:1.5px solid var(--brd);border-radius:12px;
  padding:13px 14px;margin:0 0 18px;transition:border-color .2s,box-shadow .2s
}
#pkw #tech-support input[type="text"]:focus,
#pkw #tech-support select:focus,
#pkw #tech-support textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(9,188,239,.16)}
#pkw #tech-support textarea{min-height:150px;resize:vertical}

/* The bare "Issue Type/Product*" text node - see the note above. Given the same
   weight as a label so the form does not read as having one field unlabelled. */
#pkw #tech-support select{margin-top:8px}

#pkw #tech-support .g-recaptcha{margin:4px 0 22px}

#pkw #tech-support input[type="submit"]{
  font-family:var(--sans);font-weight:700;font-size:15.5px;line-height:1;
  padding:16px 30px;border-radius:999px;border:1.5px solid transparent;
  background:var(--frost);color:#062B20;cursor:pointer;
  transition:all .28s cubic-bezier(.4,0,.2,1)
}
#pkw #tech-support input[type="submit"]:hover:not([disabled]){filter:brightness(1.06);transform:translateY(-1px)}
#pkw #tech-support input[type="submit"]:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
#pkw #tech-support input[type="submit"][disabled]{background:var(--brd);color:var(--tx-2);cursor:not-allowed}

@media(max-width:820px){ #pkw #tech-support{padding:26px 22px} }

/* ==========================================================================
   /technical-support - spacing, after Bob looked at it
   --------------------------------------------------------------------------
   Bob, 2026-08-17, on the live 1.12.26 page: "it looks like the header and the
   first block of text is bad here, probably a 30px bottom and 30px top
   combined... The form is great, but the spacing between the form title and the
   form itself is too tight. The form itself has too much spacing vertically."

   HIS ARITHMETIC WAS RIGHT AND STILL SHORT OF THE TRUE NUMBER. The gap under
   "Submit your technical support request online." was not 60px, it was 108:

       30px   .sec bottom padding, hero section
     + 48px   #pkw .sec-head margin-bottom  <- the one nobody was counting
     + 30px   .sec top padding, next section

   The 48px is legitimate where a section HAS body content under its heading.
   On a heading-only section it is 48px of nothing at the end of the block. Two
   fixes, both global rather than page-scoped, because the fault is global:

     1. That 48px is now --pk-sec-head-gap, so it is a knob like the rest.
     2. `.wrap > .sec-head:last-child` gets margin-bottom:0. When the heading
        block is the only child of its wrap there is nothing below it to be
        separated from, and the margin is pure dead space. That collapses the
        gap on every hero-style section on the site, not just this page.

   Which leaves 30 + 30 between two stacked sections. That is his rule read
   literally - 30px owned by each block - and it is deliberately NOT collapsed
   further, because `.sec + .sec{padding-top:0}` would push copy hard against
   the top edge of every coloured band (.pkw-light, .pkw-grey, .pkw-dark). If he
   wants tighter, --pk-sec-y is the line to change.

   THE FORM went the other way on both counts: more air above it, less inside.
   ========================================================================== */

/* Dead margin at the end of a heading-only section. */
#pkw .wrap > .sec-head:last-child{margin-bottom:0}

/* MORE space between "Request Form" and the card, and under the right column's
   heading. The h3 sat directly on the card's border, which read as the heading
   belonging to the box rather than labelling it.

   CORRECTED: this was first written as `.two-col > h3` and matched NOTHING. Each
   column of .two-col is wrapped in a bare <div>, so the h3 is a grandchild, not a
   child. The rule shipped in 1.12.27 and did nothing at all - which is the worst
   kind of CSS, because the file says the problem was addressed. Descendant
   selector now. */
#pkw.pkw-support .two-col h3{margin:0 0 20px}

/* A PARAGRAPH WHOSE ONLY CONTENT IS A <strong> IS A SUB-HEADING, and it needs
   air above it rather than sitting in the run of prose. Here that is "Support
   Hours"; the pattern is everywhere in migrated copy, because the page builder
   had no sub-heading component and authors reached for bold text instead.

   Scoped to this page for now. It is a good candidate for #pkw site-wide - it is
   semantically right anywhere - but that is a visible change on 80 pages and
   should be looked at once rather than discovered. */
#pkw.pkw-support .two-col p:has(> strong:only-child){margin-top:20px}

/* LESS space inside the form. 18px between controls plus 8px under every label
   made a seven-field form taller than the screen. Labels sit closer to their
   own field than to the field above - which is the point of a label. */
#pkw.pkw-support #tech-support label{margin:0 0 5px}
#pkw.pkw-support #tech-support input[type="text"],
#pkw.pkw-support #tech-support select,
#pkw.pkw-support #tech-support textarea{margin:0 0 14px}
#pkw.pkw-support #tech-support select{margin-top:5px}
#pkw.pkw-support #tech-support textarea{min-height:110px}
#pkw.pkw-support #tech-support .g-recaptcha{margin:2px 0 16px}
#pkw.pkw-support #tech-support > p{margin:0 0 16px}
#pkw.pkw-support #tech-support{padding:26px 26px 28px}

/* ==========================================================================
   .pk-pill - a filter/navigation pill. ITS OWN COMPONENT.
   --------------------------------------------------------------------------
   Bob, 2026-08-17: "can we make this a seperate class of elements, and make them
   just a bit bigger? I would love the hover to be our Cyan instead of green, just
   a bit more gap between them too."

   WHY IT IS SEPARATE FROM .pk27-pill. The card pills live in
   pkware-shortcodes/inc/shortcodes.php, a plugin this project does not edit, and
   they mean something different: a card pill is a LABEL saying what the card is,
   while these are CONTROLS you click to move between archives. They started
   identical because "look like those pills" was the brief; they diverge from here,
   and they should be able to.

   The resting outline stays the pk27 accent so the two still read as one family
   on a page that shows both. The hover is PKWARE cyan, which is the theme's own
   interaction colour, and that is the deliberate difference.

   CURRENT AND HOVER LOOK THE SAME, on purpose. A current pill is one whose state
   is permanently "on", so it wears the hover fill rather than a third appearance
   nobody has to learn.

   Every value is a token at the top of this file. Bigger, tighter, wider gap - all
   one line each, and nothing in the nav's own rules needs touching again. The
   .pk-archive-nav__* rules are now empty by design; the class doing the work is
   added in pkware_archive_nav(), inc/archive-copy.php.
   ========================================================================== */

.pk-pill{
  display:inline-block;
  padding:var(--pk-pill-pad);
  border:1px solid var(--pk-pill-border);
  border-radius:999px;
  font-family:var(--pk-font-sans);
  font-size:var(--pk-pill-size);
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--pk-pill-ink);
  text-decoration:none;
  line-height:1.5;
  white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s
}

.pk-pill:hover,
.pk-pill:focus-visible{
  background:var(--pk-pill-hover-bg);
  border-color:var(--pk-pill-hover-bg);
  color:var(--pk-pill-hover-ink)
}

.pk-pill:focus-visible{outline:2px solid var(--pk-pill-hover-bg);outline-offset:2px}

.pk-pill.is-current,
.pk-pill.is-current:hover{
  background:var(--pk-pill-hover-bg);
  border-color:var(--pk-pill-hover-bg);
  color:var(--pk-pill-hover-ink)
}

/* Inside a ported page the anchor colour is set by that page's own rules, so the
   pill states are restated at matching specificity rather than left to lose. */
#pkw .pk-pill{color:var(--pk-pill-ink);text-decoration:none}
#pkw .pk-pill:hover,
#pkw .pk-pill.is-current{color:var(--pk-pill-hover-ink)}

@media(max-width:560px){
  :root{--pk-pill-pad:.5em 1.05em;--pk-pill-size:11.5px;--pk-pill-gap:10px}
}

/* --- .pk-pill--sub : the second tier -----------------------------------------
   Bob, 2026-08-17: "I just want it to be cool, not stupid, modern, functioning."

   Row two is the five types INSIDE Resources, so it should not compete with row
   one. Bob, on seeing the first attempt: "not enough spacing, not sure I like the grey."
   The soft grey fill is gone. Row two keeps the pill outline but in a light
   hairline rather than the accent, one step smaller, with the same cyan on hover so
   the interaction language does not change between rows.

   The hierarchy is carried by weight, not by an extra line, an indent or a label.
   That is the difference between two rows that look deliberate and two rows that
   look like a wrap.
   -------------------------------------------------------------------------- */

.pk-archive-nav__list--sub{gap:10px}

.pk-pill--sub{
  border-color:var(--pk-pill-sub-border);
  background:transparent;
  font-size:calc(var(--pk-pill-size) - 1px);
  padding:.5em 1.15em;
  color:var(--pk-slate)
}

.pk-pill--sub:hover,
.pk-pill--sub:focus-visible,
.pk-pill--sub.is-current,
.pk-pill--sub.is-current:hover{
  background:var(--pk-pill-hover-bg);
  border-color:var(--pk-pill-hover-bg);
  color:var(--pk-pill-hover-ink)
}

#pkw .pk-pill--sub{color:var(--pk-slate)}
#pkw .pk-pill--sub:hover,
#pkw .pk-pill--sub.is-current{color:var(--pk-pill-hover-ink)}

@media(max-width:560px){
  .pk-archive-nav__list--sub{gap:8px}
}

/* ================= EVERY FORM CARD, EVERYWHERE =================================
   2026-08-17. Bob: "Please, all forms, all pages, all posts, all landing pages, my mothers
   house, okay?" - after I reported the hairline as done when it had reached 21 of 39.

   WHY THIS IS A SELECTOR LIST AND NOT ONE CLASS. The 39 form-bearing URLs do not share a
   card element. Measured, not assumed:

       .form-card          31 URLs   the common case, on pages AND on the 9 webinar POSTS
       #pkw #tech-support   1 URL    /technical-support - the SALESFORCE FORM ELEMENT ITSELF
                                     carries the card surface; there is no wrapper
       #pkw.pkenc .tform    1 URL    /products/pkencrypt - an <aside>, its own hero panel
       #pkw .buy-card       1 URL    /products/store - a .card .buy-card, the Cleverbridge cart
       .form-rev only       5 URLs   NO CARD ELEMENT AT ALL - see the note at the end

   AND WHY IT IS APPENDED AT THE END OF THE FILE. #pk-quantum-readiness .form-card and
   #pk-gartner-wrapper .form-card both set `background` at (1,1,0) - the same specificity as
   this list's entry for them - so source order is what decides. Those rules live in the
   landing-system blocks further up, so this has to come after them or the hairline loses on
   two landing pages. Moving this block earlier will silently break those two.

   .form-card IS UNSCOPED HERE, deliberately. It was `#pkw .form-card`, which is why 10 URLs
   were missed: the 9 /webinars/* posts and /landing/pkware-quantum-readiness render outside
   #pkw entirely. Unscoped reaches every one of them.

   WHICH MEANS THE TOKEN FALLBACK IS LOAD-BEARING. --panel is declared on #pkw and nowhere a
   post can see it, so `var(--panel)` alone would resolve to nothing and the card would lose
   its inner surface - the conic would flood the whole box. var(--panel, #FFFFFF) is what
   makes this safe outside #pkw. Same class of bug as the trust band's --sans and --eb.

   THE SALESFORCE FORM IS STYLED, NOT MODIFIED. #tech-support is the <form> element. Bob's
   rule is CSS only on it - "I just need CSS for that form" - and this is CSS only. No
   attribute, no field, no action URL, nothing inside it is touched.

   FORMS ON POSTS: 11 posts carry one - 9 webinars and 2 under /resources/reports. Bob's
   standing rule makes that a hard stop, and it was raised and answered: all posts included.

   5 URLs STILL HAVE NO CARD, and no selector can fix that because there is no element to
   style: /landing/cmmc-compliance, /landing/youve-secured-the-ehr-phi-went-somewhere-else,
   /landing/gartner-postquantum-readiness, /resources/reports/bloor-report-discovering-
   sensitive-data, /resources/reports/continuous-threat-exposure-management. They wrap the
   form in .form-rev only, which is a reveal/toggle helper with no surface of its own. Giving
   them a card is authoring a card where none exists - a design decision, not this sweep. */

.form-card,
#pk-quantum-readiness .form-card,
#pk-gartner-wrapper .form-card,
#pkw .hero-blue .form-card,
#pkw.pkenc .tform,
#pkw .buy-card,
#pkw #tech-support {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel, #FFFFFF), var(--panel, #FFFFFF)) padding-box,
    conic-gradient(from var(--pk-edge-a),
      rgba(9,188,239,.95)   0deg,
      rgba(15,228,162,.95)  85deg,
      rgba(30,48,116,.30)  170deg,
      rgba(15,228,162,.95) 265deg,
      rgba(9,188,239,.95)  360deg) border-box;
  animation:
    pk-edge-spin  16s linear infinite,
    pk-edge-pulse 3.8s ease-out infinite;
  transition: box-shadow .35s ease, transform .35s ease;
  /* Same 10px as the base rule. Applied here too rather than only under #pkw, because the
     clipped-ring problem is geometry, not scope - a card on a webinar post or a landing page
     sits against its column the same way. */
  margin-top: 10px;
}

/* The pulse is DROPPED rather than overridden - an animated property beats a normal
   declaration, so a running pk-edge-pulse would win over the box-shadow below however
   specific this got. Re-declaring `animation` with only the spin hands box-shadow back. */
.form-card:focus-within,
#pk-quantum-readiness .form-card:focus-within,
#pk-gartner-wrapper .form-card:focus-within,
#pkw .hero-blue .form-card:focus-within,
#pkw.pkenc .tform:focus-within,
#pkw .buy-card:focus-within,
#pkw #tech-support:focus-within {
  animation: pk-edge-spin 16s linear infinite;
  transform: translateY(-2px);
  box-shadow:
    0 30px 70px -34px rgba(30,48,116,.34),
    0 0 0 5px rgba(9,188,239,.12),
    0 0 30px -6px rgba(15,228,162,.38);
}

/* =========================================================================
   pk27 CARD MEDIA - 20px CORNERS, TO MATCH EVERYTHING ELSE
   -------------------------------------------------------------------------
   Added 2026-08-20. Bob: "just have the images they present have the same 20px
   border radius that everything else has, I want it to look consistent".

   The plugin ships these at border-radius:3px, inline, from
   pkware-shortcodes/inc/shortcodes.php - which is Bob's original pk27 code and
   is NEVER edited. So this overrides rather than replaces.

   TWO CLASSES, NOT !important. The plugin's rules are single-class
   (.pk27-card__media, .pk27f-media) and are emitted INLINE, so they come after
   this stylesheet in document order and would win a tie. Adding the container
   class raises specificity to 0-2-0 and settles it on the cascade rather than
   on a sledgehammer - which also means the plugin can still be changed later
   without a fight.

   20px is a literal here on purpose. The radius tokens stop at
   --pk-radius-lg: 12px, and the 20px corner used by .quote-card, .prod,
   .cov-art--crisp and nine other places is written out each time. Matching the
   house value matters more than introducing a thirteenth token nobody else
   uses. Worth reconciling one day; not today.

   overflow:hidden is ALREADY on both boxes in the plugin, so the corner clips
   the image without anything further. The radius is repeated on the img so the
   two coincide exactly - a rounded box clipping a square child can leave a
   one-pixel hairline on some builds, and matching the curves removes it.

   Covers all three grids, because pk27 reuses the same classes:
     .pk27-grid   2027_Get_Posts   - Latest publications, blog and term archives
     .pk27-grid   2027_Get_Search  - search results
     .pk27f       2027_get_posts_featured - hero plus side cards
   ========================================================================= */
.pk27-grid .pk27-card__media,
.pk27-grid .pk27-card__media img,
.pk27f .pk27f-media,
.pk27f .pk27f-media img { border-radius: 20px; }

/* =========================================================================
   pk27 CARDS - THE FORM-CARD GRADIENT EDGE, STATIC
   -------------------------------------------------------------------------
   Added 2026-08-20. Bob: "forget the pulsing thing, that would be too much,
   but the design of this border, using pkware colors like that, can we put
   that around the outside of every card in that set of shortcodes... no
   outward pulsing, just the look and feel of that card border".

   HOW THE EDGE WORKS - two backgrounds, two clip boxes, no extra element.
   padding-box paints the panel fill INSIDE the border; border-box paints the
   conic gradient UNDER the border; the border is transparent, so it is the
   window the conic shows through. Copied from #pkw .form-card, which is where
   this treatment was invented on 2026-08-17.

   TWO THINGS FROM THE FORM CARD ARE DELIBERATELY DROPPED.

   1. pk-edge-pulse - the outward ring. Bob ruled it out, and it would have
      been wrong here anyway: it is an attention-getter for ONE form, and 125
      of them breathing at once on /blog is a fairground.
   2. pk-edge-spin - the 16s rotation. He did not ask for it gone, but an
      animated @property angle repaints the border-box gradient every frame,
      and /blog renders 125 cards. That is 125 continuously repainting conic
      gradients for an effect nobody can follow across a grid. Static reads as
      deliberate; moving reads as a page that will not settle.

   So there is NO animation here at all - which also means it needs no
   prefers-reduced-motion guard. That matters: the theme's only guard is
   `#pkw *{animation:none!important}` and these archives render OUTSIDE #pkw,
   so an animation added here would have had no opt-out. Outstanding item 11.

   THE COLOURS ARE LITERALS, NOT TOKENS, AND THAT IS NOT LAZINESS.
   --panel, --cyan, --frost and --navy are declared on `#pkw` (style.css:1539),
   not on :root. Measured 2026-08-20: / has id="pkw", but /blog, /news and
   /resources/* DO NOT - they render 17 pk27f cards each entirely outside it.
   Using var(--panel) here would resolve to nothing on every archive on the
   site. The values are the same brand colours the form card uses:
   #09BCEF cyan, #0FE4A2 frost, #1E3074 navy.

   --pk-edge-a IS SAFE OUTSIDE #pkw because @property registers it globally
   with an initial-value of 0deg. Nothing animates it here, so every card holds
   the same fixed orientation rather than each one landing somewhere different.

   REACHES ALL THREE GRIDS, since pk27 reuses its classes:
     .pk27-grid .pk27-card   2027_Get_Posts and 2027_Get_Search
     .pk27f .pk27f-card      2027_get_posts_featured, hero and sides both

   SPECIFICITY, NOT !important. The plugin's own rules are single-class and are
   emitted inline, so they come later in the document and win a tie. Adding the
   container class makes these 0-2-0 against 0-1-0.

   THE HOVER ZOOM IS UNTOUCHED. The plugin scales .pk27-card to 1.1 on hover
   and the pk27f cards by their own tokens; transform is not declared here, so
   the whole bordered card scales as one object.
   ========================================================================= */
/* SECOND PASS, 2026-08-20. Bob on the first: "too much padding to be honest, and if we
   could maybe make the gradient slightly more towards the pk navy, and perhaps an opacity
   setting so it is more of an outline, enhancement, not a distraction."

   Three changes, and the reasoning for each is worth keeping because the obvious lever was
   the wrong one each time.

   1. PADDING 20px -> 12px. 20px came from the form card, where it holds real fields. On a
      grid card it insets the image by 22px a side, which on a 320px column is 14% of the
      width surrendered to whitespace.

   2. NAVY LEADS INSTEAD OF ACCENTING. It was one navy stop against four bright ones, so
      cyan and frost dominated the whole rotation. Now navy holds 0, 180 and 360 degrees and
      cyan and frost sit between them as accents.

   3. ALPHA CAPPED, NOT WIDTH REDUCED. The instinct is to thin the border to 1px, and that
      is wrong - the form card's own note records that 1px "read as a thread". Width is what
      makes the colour legible; ALPHA is what makes it quiet. So 2px stays and nothing goes
      above .60, where it was .95. The shadow drops from a 70px hero lift to a 34px blur at
      .22, which is the difference between a card that floats and a card that sits.

   The two numbers most likely to want another nudge are exposed as custom properties, so
   the next iteration is one value rather than a re-read of this block. */
.pk27-grid .pk27-card,
.pk27f .pk27f-card {
  --pk27-edge-pad:    12px;
  --pk27-edge-radius: 20px;
  --pk27-edge-bw:     2px;
  --pk27-edge-navy:  rgba(30, 48, 116, .55);
  --pk27-edge-cyan:  rgba(9, 188, 239, .42);
  --pk27-edge-frost: rgba(15, 228, 162, .34);

  padding: var(--pk27-edge-pad);
  border: var(--pk27-edge-bw) solid #E7EAF1;
  border-radius: var(--pk27-edge-radius);
  background:
    linear-gradient(180deg, #FFFFFF, #F7F9FC) padding-box,
    conic-gradient(from var(--pk-edge-a),
      var(--pk27-edge-navy)    0deg,
      var(--pk27-edge-cyan)   90deg,
      rgba(30, 48, 116, .60) 180deg,
      var(--pk27-edge-frost) 270deg,
      var(--pk27-edge-navy)  360deg) border-box;
  box-shadow: none;
  /* transform MUST BE IN THIS LIST, and leaving it out was my bug - corrected
     2026-08-20 after Bob: "it does zoom in slow, but when it drops back, it is
     instant, there should be a slow transition to return to normal."

     He was right, and the plugin was already right. pk27 uses a deliberate
     TWO-SPEED zoom and splits it across two rules:

       .pk27-card        transition: transform .45s cubic-bezier(.4,0,.2,1)   <- OUT
       .pk27-card:hover  transition: transform .55s cubic-bezier(.2,.7,.3,1)  <- IN

     and pk27f does the same through --pk27f-ease-out and --pk27f-ease-in. Its
     own source comment even says the hover rule "overrides it with the slower
     in transition".

     `transition` is a SHORTHAND, so my base rule declaring only border-color
     and box-shadow REPLACED the plugin's whole declaration and deleted the out
     transition. The in half still worked because it lives on the :hover rule,
     which is exactly why it looked like a one-directional snap rather than
     something I had broken.

     The .45s value below is the plugin's own out timing, identical in both
     families, so restating it restores their design rather than imposing mine.
     I had also written a comment here claiming transform was deliberately
     absent to avoid retiming their effect - the opposite was true. Kept as a
     correction: the safe-looking omission was the destructive one. */
  transition:
    transform    .45s cubic-bezier(.4, 0, .2, 1),
    border-color .28s,
    box-shadow   .28s;
}

/* -------------------------------------------------------------------------
   THE FRAME IS A HOVER STATE NOW - 2026-08-20
   Bob, comparing these to the leadership cards: "these leadership cards are
   like a grey, when you hover over one, that is when the cool outline is
   applied... the light grey approach with the shortcode pieces we just did,
   the three of them, with the frame showing up on hover, would be a better
   effect, and consistent".

   THE BORDER IS THE SHUTTER, AND THAT IS THE WHOLE TRICK.
   A conic gradient cannot be transitioned - you cannot tween a flat colour
   into a gradient, so the obvious version snaps on and off. So the gradient
   stays painted on the border-box PERMANENTLY and the border colour hides it:
   opaque #E7EAF1 at rest, transparent on hover. border-color IS animatable, so
   it crossfades over .28s with no pseudo-element and no second layer.

   EVERY VALUE IS THE LEADERSHIP CARD'S, so this is genuinely the same effect
   rather than an approximation of it:
     rest fill    linear-gradient(180deg,#FFFFFF,#F7F9FC)   --glass-2 -> --glass
     rest border  #E7EAF1                                    --brd
     hover shadow 0 20px 50px -28px rgba(30,48,116,.26)      --card-shadow
     hover lift   translateY(-4px)
     timing       .28s cubic-bezier(.4,0,.2,1)
   Literals rather than tokens because those are declared on #pkw and these
   archives render outside it - measured, /blog and /news have no id="pkw".

   THE 10% ZOOM IS REPLACED BY THE 4px LIFT. The plugin scales .pk27-card to
   1.1 and the pk27f cards by their own tokens. A 10% zoom on a card that is
   simultaneously gaining a gradient frame and a shadow is three things at
   once, and it is not what the leadership cards do. Consistency was the ask,
   so transform is overridden here to match. Reverting is deleting the
   transform line from each of the three hover rules below.

   :focus-visible IS INCLUDED, not just :hover. The plugin already pairs
   :has(a:focus-visible) with its hover rules; a keyboard user gets the same
   frame, which is the accessible half of this and costs one selector.
   ------------------------------------------------------------------------- */
.pk27-grid .pk27-card:hover,
.pk27-grid .pk27-card:has(a:focus-visible),
.pk27f .pk27f-card:hover,
.pk27f .pk27f-card:has(a:focus-visible) {
  border-color: transparent;
  box-shadow: 0 20px 50px -28px rgba(30, 48, 116, .26);
  /* NO transform. Reverted 2026-08-20 at Bob's call - the 4px lift was my
     substitution for consistency with the leadership cards, and he wants the
     shortcode cards to keep their own zoom. The plugin supplies it:
     .pk27-card:hover scales to 1.1, and the pk27f cards use their own
     --pk27f-zoom-hero / --pk27f-zoom-side tokens. Both also raise z-index to 5
     so the zoomed card sits above its neighbours. Nothing here interferes. */
}

/* -------------------------------------------------------------------------
   MEDIA FULL-BLEED TO THE CARD EDGE - 2026-08-20
   Bob: "we put 0px padding on the image, and that way it goes right up
   against the edge, and leave the padding on the lower portion with the text
   and pils. Also, please ensure the border radius of the image, is the same
   as the card you are building for me".

   THE RADIUS IS 18px, NOT 20px, AND THAT IS HOW IT MATCHES.
   The card is 20px with a 2px border, so the INNER edge of that border curves
   at 18px. An image at 20px sitting flush against it overhangs the corner by
   2px and paints over the gradient - the one place the border is thinnest and
   most visible. calc(radius - border-width) nests exactly, and stays correct
   if either value is retuned later.

   BOTTOM CORNERS ARE SQUARE on purpose: the card body continues below the
   image, so rounding there would cut a notch out of the middle of the card.

   PADDING IS MOVED, NOT REMOVED. The card goes to 0 and every child that is
   NOT the media gets the inset back. Targeting by class rather than by
   position matters: pk27 omits the media element entirely when a post has no
   featured image, so a rule like `> * + *` would leave the pill flush against
   the border on exactly those cards.

   TWO VERTICAL CASES ONLY - the grid card and the featured HERO. The featured
   SIDE card is horizontal, thumb in a left column with the title beside it and
   the pill beneath the thumb, so "the lower portion" does not exist there. It
   keeps uniform padding until Bob rules on it.

   .pk27f-card.pk27f-hero is 0-3-0 deliberately, to beat the 0-2-0 base rule
   above on specificity rather than on source order.
   ------------------------------------------------------------------------- */
.pk27-grid .pk27-card,
.pk27f .pk27f-card.pk27f-hero { padding: 0; }

.pk27-grid .pk27-card > :not(.pk27-card__media),
.pk27f .pk27f-card.pk27f-hero > :not(.pk27f-media) {
  padding-left:  var(--pk27-edge-pad);
  padding-right: var(--pk27-edge-pad);
}
.pk27-grid .pk27-card > :not(.pk27-card__media):last-child,
.pk27f .pk27f-card.pk27f-hero > :not(.pk27f-media):last-child { padding-bottom: var(--pk27-edge-pad); }

.pk27-grid .pk27-card > :not(.pk27-card__media):first-child,
.pk27f .pk27f-card.pk27f-hero > :not(.pk27f-media):first-child { padding-top: var(--pk27-edge-pad); }

.pk27-grid .pk27-card > .pk27-card__media,
.pk27-grid .pk27-card > .pk27-card__media img,
.pk27f .pk27f-card.pk27f-hero > .pk27f-media,
.pk27f .pk27f-card.pk27f-hero > .pk27f-media img {
  border-radius:
    calc(var(--pk27-edge-radius) - var(--pk27-edge-bw))
    calc(var(--pk27-edge-radius) - var(--pk27-edge-bw))
    0 0;
}

/* -------------------------------------------------------------------------
   FEATURED SIDE CARDS - THUMB INTO THE CORNER - 2026-08-20
   Bob: "the two smaller cards in the featured, look odd, can we bring the
   image to be oriented at 0px padding, make it a little bigger so everything
   else still fits?"

   THE SIDE CARD IS A 2x2 GRID, not a stack, which is why it needed its own
   rules rather than the hero's:
       col 1 / row 1   the thumb
       col 1 / row 2   the pill
       col 2 / rows1-2 the title, spanning both

   So the thumb is flush on TWO edges - top and left - and its other two edges
   are interior. It therefore rounds ONLY at the top-left, where it meets the
   card's own corner, and stays square where the card continues past it. Same
   rule as the hero: nest where you meet the corner, square where you do not.

   209px -> 240px. Removing the 12px left padding hands 12px straight back to
   the image, so 221px would have been free; 240px is a deliberate 15% and the
   title column gives up about 19px for it. That is the trade Bob asked for -
   "a little bigger so everything else still fits".

   PADDING GOES BACK ON THE OTHER TWO CELLS INDIVIDUALLY. The pill sits under
   the thumb in column 1 and needs a left inset it did not need before; the
   title spans both rows in column 2 and needs top, right and bottom. Setting
   padding on the card would put it back under the thumb as well, which is the
   whole thing being removed.

   The column-gap of 1.5rem already separates thumb from title, so the title
   gets no left padding - adding one would double the gutter.
   ------------------------------------------------------------------------- */
.pk27f .pk27f-card.pk27f-side {
  padding: 0;
  --pk27f-thumb: 240px;
}

/* CORRECTED 2026-08-20, same session. Bob: "now the lower right is a 90degree
   angle, and lost the border radius on the lower right."

   I had reused the hero's `X 0 0 0` here and it does not transfer. THE RULE IS
   ABOUT WHICH EDGES ARE FLUSH, not about being consistent between the two.

   HERO / GRID CARD - image is flush LEFT, TOP and RIGHT. Its bottom corners
   are flush against the card's side borders, so rounding them would open a
   crescent of white between the image and the border. Square is correct there.

   SIDE CARD - the thumb is flush on TOP and LEFT only. It sits in column 1 of
   a 2x2 grid, so its top-right, bottom-right and bottom-left are FREE corners
   in the middle of a white card. Square there reads as an unfinished block,
   which is exactly what Bob saw.

   So: nest at the top-left where it meets the card's own corner, and keep the
   full card radius on the three free corners. The 2px difference between them
   is invisible and geometrically right. */
.pk27f .pk27f-card.pk27f-side > .pk27f-media,
.pk27f .pk27f-card.pk27f-side > .pk27f-media img {
  /* CORRECTED AGAIN, and this is the version Bob actually asked for: the LOWER
     RIGHT ONLY. "I was trying to set the border radius for the lower right of
     the image only, not the entire image."

     Order is top-left / top-right / bottom-right / bottom-left:

       top-left      nested, NOT 0 - see below
       top-right     square. The top edge is flush with the card border and the
                     image simply ends; a curve here would float a rounded
                     corner against the border for no reason.
       bottom-right  the card radius. This is the ONE free corner, fully inside
                     the white card, and it is where the image releases into the
                     card body.
       bottom-left   square. Flush against the left border, same reasoning as
                     top-right.

     THE TOP-LEFT CANNOT BE 0, and that is the one place this deviates from
     "lower right only". The card's padding-box corner curves at 18px, so a
     square image corner there would overhang the curve and paint across the
     gradient border - the card would look like its top-left corner had broken.
     Nesting at calc(radius - border-width) makes the image BE the corner, which
     is what a 0 is trying to express anyway. The alternative is overflow:hidden
     on the card, which would also clip the box-shadow. */
  border-radius:
    calc(var(--pk27-edge-radius) - var(--pk27-edge-bw))
    0
    var(--pk27-edge-radius)
    0;
}

.pk27f .pk27f-card.pk27f-side > .pk27f-meta {
  padding-left:   var(--pk27-edge-pad);
  padding-bottom: var(--pk27-edge-pad);
}

.pk27f .pk27f-card.pk27f-side > .pk27f-title {
  padding-top:    var(--pk27-edge-pad);
  padding-right:  var(--pk27-edge-pad);
  padding-bottom: var(--pk27-edge-pad);
}

/* Tablet and below the outer grid collapses to one column and the side cards
   widen, so the fixed 240px thumb starts to dominate. Give it back some of the
   ratio rather than leaving a stretched card with a small picture in it. */
@media (max-width: 1024px) {
  .pk27f .pk27f-card.pk27f-side { --pk27f-thumb: 280px; }
}
@media (max-width: 640px) {
  .pk27f .pk27f-card.pk27f-side { --pk27f-thumb: 180px; }
}
/* ==========================================================================
   SEARCH RESULTS PAGE
   Added 1.13.22, 2026-08-28, with the search.php rebuild. Bob: "I would like it
   styled exactly like the other shortcodes now if you please."

   THE CARDS NEEDED NOTHING. [2027_Get_Search] emits .pk27-grid / .pk27-card,
   which is the same markup [2027_Get_Posts] emits, so the gradient-edge-on-hover
   block above already covers them - not one card rule is repeated here. That is
   the whole reason the template calls the shortcode instead of looping: the
   design was already written, it just had nothing to attach to.

   WHAT DID NEED WORK is the copy the search shortcode adds on top of the grid -
   the results count line and the empty state - which pk27s_styles() renders in
   Avada-era greys (#5a6b7c, #0b2a4a, #c9d4de). Those are the only rules below,
   plus the refine form, which had no styling anywhere because the old template
   called get_search_form() and WordPress's default .search-form classes are not
   in this stylesheet at all.

   EVERY OVERRIDE HERE CARRIES .pk-searchpage OR .pk-archive__body, AND THAT IS
   NOT DECORATION. pk27s_styles() emits an inline <style id="pk27s-styles"> in
   the BODY, which is later in document order than this file in the head - so an
   equal-specificity rule here LOSES the cascade tie. Adding the ancestor class
   takes each selector one step above the plugin's and settles it on specificity,
   where source order cannot reach it. Drop the prefix and the rule silently
   stops applying; nothing errors, the colours just stay grey.

   TOKENS ARE SAFE HERE, --pk-* ONLY. The --pk-* set is declared on :root, so it
   resolves on this page. The short names - --panel, --cyan, --frost, --brd - are
   declared on #pkw, and a search page has no #pkw wrapper, exactly like the term
   archives. Using one of those below would compute to nothing.
   ========================================================================== */

/* ---- the refine form, centred under the h1 ----

   Narrower than the head it sits in: a 1200px-wide text input reads as a page
   element rather than a control. 560px is about the width of the heading above
   it at desktop. */
.pk-searchpage__form {
  display: flex;
  gap: var(--pk-space-2xs);
  margin-block: var(--pk-space-md) 0;
  margin-inline: auto;
  max-width: 560px;
  width: 100%;
}

.pk-searchpage__input {
  background: var(--pk-grey);
  border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-lg);
  color: var(--pk-color-text);
  flex: 1 1 auto;
  font-family: var(--pk-font-sans);
  font-size: var(--pk-text-base);
  min-width: 0;
  padding: 12px 16px;
}

/* Same focus treatment as the header's search overlay - see .pk-search__input.
   Two controls that do the same job should not focus differently. */
.pk-searchpage__input:focus {
  outline: 2px solid var(--pk-color-focus);
  outline-offset: 1px;
}

.pk-searchpage__submit {
  background: var(--pk-navy);
  border: 1px solid var(--pk-navy);
  border-radius: var(--pk-radius-lg);
  color: var(--pk-white);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--pk-font-sans);
  font-size: var(--pk-text-base);
  font-weight: var(--pk-weight-bold);
  padding: 12px 24px;
  transition: background-color var(--pk-transition), border-color var(--pk-transition);
}

.pk-searchpage__submit:hover,
.pk-searchpage__submit:focus-visible {
  background: var(--pk-blue);
  border-color: var(--pk-blue);
}

/* ---- the results count line ----

   Styled as the archive intro is styled, because that is what it is: one line of
   slate text under a serif h1. Centred to match .pk-archive__head above it, even
   though it renders inside .pk-archive__body - the eye reads the two as one
   block, so a left-flush count under a centred heading looks like a mistake.

   The margin-bottom carries the gap to the first row of cards. --pk-space-xl is
   the same value .pk-archive__head uses for that gap, so a search page and a term
   archive open identically. */
.pk-archive__body .pk27s-count {
  color: var(--pk-slate);
  font-size: var(--pk-text-base);
  line-height: var(--pk-leading-normal);
  margin-block: 0 var(--pk-space-xl);
  text-align: center;
}

.pk-archive__body .pk27s-count strong {
  color: var(--pk-color-heading);
  font-weight: var(--pk-weight-bold);
}

/* ---- the empty state ----

   Two paragraphs from the shortcode: "No results for X." then a hint. Centred
   and given real vertical room, because on a no-results page this is the entire
   body and a 17px line hugging the heading reads as a rendering failure rather
   than an answer. */
.pk-archive__body .pk27s-empty {
  color: var(--pk-color-text);
  font-size: var(--pk-text-lg);
  line-height: var(--pk-leading-normal);
  margin-block: 0;
  margin-inline: auto;
  max-width: var(--pk-container-narrow);
  padding-block: var(--pk-space-lg) 0;
  text-align: center;
}

.pk-archive__body .pk27s-empty strong {
  color: var(--pk-color-heading);
  font-weight: var(--pk-weight-bold);
}

.pk-archive__body .pk27s-hint {
  color: var(--pk-slate);
  font-size: var(--pk-text-base);
  line-height: var(--pk-leading-normal);
  margin-block: var(--pk-space-xs) 0;
  margin-inline: auto;
  max-width: var(--pk-container-narrow);
  padding-block-end: var(--pk-space-2xl);
  text-align: center;
}

/* ---- the post-type pill ----

   A search result can be a PAGE, and a page has no category or tag - so the
   shortcode falls back to a static, non-linking pill carrying the post type
   label ("Page") rather than leaving a hole in the card. That fallback is right;
   only its colours were Avada's. This puts it on the house palette as a
   deliberately muted sibling of .pk27-pill: same shape and size, navy-tinted
   border instead of teal, and no hover, because it is not a link.

   THREE CLASSES DEEP TO BEAT THE PLUGIN'S TWO, and the :hover pair needs the
   third class for the same reason - pk27s_styles() writes
   .pk27-grid .pk27-pill--static:hover at (0,3,0), so a (0,3,0) rule here would
   lose on source order. */
.pk-searchpage .pk27-grid .pk27-pill--static {
  border-color: var(--pk-color-border-strong);
  color: var(--pk-slate);
  cursor: default;
}

.pk-searchpage .pk27-grid .pk27-pill--static:hover {
  background: transparent;
  color: var(--pk-slate);
}

@media (max-width: 782px) {

  /* The submit label is the first thing to go: at this width the input needs
     every pixel, and the button is still an obvious submit next to a search
     field. Wrapping to two rows would push the first card below the fold. */
  .pk-searchpage__form {
    max-width: none;
  }

  .pk-searchpage__submit {
    padding-inline: var(--pk-space-sm);
  }

  .pk-archive__body .pk27s-count {
    font-size: var(--pk-text-sm);
    margin-block-end: var(--pk-space-lg);
  }

  .pk-archive__body .pk27s-empty {
    font-size: var(--pk-text-base);
  }
}

/* ==========================================================================
   LANDING - /landing/gartner-shadow-ai
   Added 1.13.25, 2026-08-28, migrating MAR-2276 item 2.2 off staging.

   THE .pkvg-* DESIGN SYSTEM WAS ALREADY HERE. It came in with
   /landing/gartner-postquantum-readiness and is scoped under .pkv-gartner, which
   is why a bare .pkvg-section finds nothing in this file - every rule carries the
   wrapper. Measured before writing anything: of the 67 top-level selectors in
   staging's page style block, 42 are byte-identical to what is already here.
   Only what follows was missing or different.

   TWO RULES FROM STAGING ARE DELIBERATELY NOT COPIED:

     @import url(...fonts.googleapis.com...Lato...)
        Already in this file, once, from the earlier conversion. A second copy
        would be a second blocking request for a font we already load.

     .fusion-tb-footer.fusion-footer { margin-top:-20px !important }
        An Avada footer nudge. Development renders footer-landing.php and has no
        .fusion-footer to nudge.

   TWO CONFLICTS WHERE THIS THEME WINS, AND THAT IS NOT AN OVERSIGHT:

     .pkvg-section   staging says padding:96px 0
     .pkvg-hero      staging says padding:30px 0 60px

   Both are already tokenised here - var(--pk-sec-y) and var(--pk-sec-y-hero) -
   by the section-padding standardisation that went across 45 pages and 201
   sections. Taking staging's literals back would re-break the rhythm on this one
   page and leave nothing pointing at why. If the hero genuinely needs more room
   the answer is the token, not a literal.

   EVERYTHING ELSE THAT DIFFERED IS SCOPED TO .pkvg-shadow-ai, AND THAT IS THE
   WHOLE POINT OF THE CLASS.
   ---------------------------------------------------------------------------
   The two pages want different form panels. Postquantum's is light - black
   labels, white panel. Shadow-AI's is white text on a translucent panel, with a
   custom round radio. Seven selectors collide, and every one of them is shared:

     .pkvg-consent            font-size and colour
     .pkvg-consent input      size, and a bespoke appearance:none radio
     .pkvg-cover              border-radius 10px here, 0 on staging
     .pkvg-form .pkvg-btn-primary   full-width here, auto and uppercase there
     .pkvg-hero-legal         .72rem grey here, 1rem ink there
     .pk-toggle-form .form-rev.no-fc   black-on-white here, white-on-glass there
     .with_frm_style .frm_radio/.frm_checkbox label   black here, white there

   Editing those in place would silently restyle
   /landing/gartner-postquantum-readiness, which is live on development today.
   That page is ALSO the target of MAR-2276 item 1.1 - staging 307-redirects it to
   this new page and has already emptied its own content - so it may be retired
   soon. THAT DECISION IS BOB'S AND IS NOT MADE YET, so nothing here assumes it.
   Scoping is reversible; a changed shared value is not.

   The wrapper therefore carries two classes: pkv-gartner pkvg-shadow-ai. If
   postquantum is retired later and this becomes the only .pkv-gartner page, these
   rules can be folded back into the shared block and the class dropped.
   ========================================================================== */

/* ---- new components: the timeline rail, and the in-field label ----
   Neither exists anywhere else in this file. Scoped to .pkv-gartner but NOT to
   the page class on purpose: nothing else can be affected by a selector nothing
   else uses, and if a future landing page wants a rail it should get this one
   rather than a second copy. */
.pkv-gartner .pkvg-rail {
  background: #fff;
  border: 1px solid #d9e0ec;
  border-radius: 14px;
  padding: 32px 34px;
}

.pkv-gartner .pkvg-rail-label {
  color: #7b8190;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.pkv-gartner .pkvg-rail ul { list-style: none; margin: 0; padding: 0; }

/* The vertical line is the li's own left border, so the rail cannot fall out of
   step with its items - there is no separate track to keep aligned. */
.pkv-gartner .pkvg-rail li {
  border-left: 2px solid #e3e9f2;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
  margin-left: 5px;
  padding-bottom: 22px;
  padding-left: 26px;
  position: relative;
}

/* Last item stops the line rather than trailing it past the final dot. */
.pkv-gartner .pkvg-rail li:last-child { border-left-color: transparent; padding-bottom: 0; }

/* The dot sits ON the border, and the 4px white ring is what makes it read as a
   node rather than a blob - it punches the line out behind the circle. */
.pkv-gartner .pkvg-rail li::before {
  background: var(--frost);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
  content: "";
  height: 13px;
  left: -8px;
  position: absolute;
  top: 3px;
  width: 13px;
}

.pkv-gartner .pkvg-rail-term {
  color: var(--navy);
  display: block;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ---- FOUR RULES BELOW MATCH NOTHING ON THE PAGE TODAY, AND THAT IS MEASURED ----
   Checked against the live development DOM on 2026-08-28, style blocks stripped:

     pkvg-rail        6 uses      pkvg-fieldwrap   0
     pkvg-rail-label  1           pkvg-inlabel     0
     pkvg-rail-term   4           pkvg-req         0
     pkvg-cover       2           pkvg-consent     0

   AND THEY MATCH NOTHING ON STAGING EITHER. Staging's rendered page carries
   pkvg-fieldwrap, pkvg-inlabel, pkvg-req and pkvg-consent ZERO times outside its own
   <style> block - so these were already dead rules there, written for a form-field shape
   Formidable form 71 does not emit. They were carried rather than dropped because the
   form was still being built when this landed, and .frm_checkbox IS present in the DOM,
   which says the form does have a consent control - just not wrapped in .pkvg-consent
   markup. If form 71 gains hand-authored field HTML these become live; if it never does,
   they can go.

   WHAT ACTUALLY STYLES THE CONSENT LABEL is the .with_frm_style .frm_checkbox rule at the
   end of this block, not .pkvg-consent. Do not "fix" a consent control by editing rules
   that never applied to it. */
.pkv-gartner .pkvg-fieldwrap { position: relative; }

/* A label sitting INSIDE the field, vertically centred and click-through. It is
   pointer-events:none so the label never steals the click from the input it is
   sitting on top of - remove that and the field stops focusing. */
.pkv-gartner .pkvg-fieldwrap .pkvg-inlabel {
  color: #1E3074;
  font-size: 1.05rem;
  font-weight: 700;
  left: 24px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.pkv-gartner .pkvg-fieldwrap .pkvg-inlabel span { color: #F95557; font-weight: 400; }

.pkv-gartner .pkvg-req { color: #F95557; display: block; font-size: 1rem; margin: 14px 0 6px; }

/* ---- the shadow-ai form panel: white on glass ----
   Every rule below overrides a shared .pkv-gartner value and is scoped so it
   cannot reach /landing/gartner-postquantum-readiness. See the header note. */
.pkv-gartner.pkvg-shadow-ai .pkvg-consent {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 26px;
}

/* A bespoke radio, not a styled checkbox: appearance:none removes the native
   control entirely, so the :checked state below has to draw itself. accent-color
   is dropped for the same reason - it only styles a native control. */
.pkv-gartner.pkvg-shadow-ai .pkvg-consent input {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 17px;
  margin-top: 4px;
  width: 17px;
}

/* The inset ring IS the dot - a cyan disc with a white inner ring, drawn with one
   box-shadow rather than a pseudo-element, so there is nothing to position. */
.pkv-gartner.pkvg-shadow-ai .pkvg-consent input:checked {
  background: var(--cyan);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Square, per staging. The house 20px radius is not universal - this cover sits
   flush inside a bordered figure and staging chose a hard edge for it. */
.pkv-gartner.pkvg-shadow-ai .pkvg-cover { border-radius: 0; }

.pkv-gartner.pkvg-shadow-ai .pkvg-form .pkvg-btn-primary {
  display: block;
  letter-spacing: 0.06em;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  width: auto;
}

/* Legal line is readable copy on this page, not fine print. */
.pkv-gartner.pkvg-shadow-ai .pkvg-hero-legal {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

.pkv-gartner.pkvg-shadow-ai .pk-toggle-form .form-rev.no-fc {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 12px;
  color: #fff;
  padding: 14px 14px 24px;
}

/* !important is staging's and is kept: Formidable's own stylesheet sets these
   label colours at a specificity this cannot beat from here. Dropping it would
   leave the labels black on the translucent panel - unreadable, and it would look
   like a colour choice rather than a lost cascade fight. */
.pkv-gartner.pkvg-shadow-ai .with_frm_style .frm_radio label,
.pkv-gartner.pkvg-shadow-ai .with_frm_style .frm_checkbox label {
  color: #ffffff !important;
  line-height: 1.3;
}

/* ==========================================================================
   EVENT CARDS - equal height, buttons on a line
   Added 1.13.28, 2026-08-28. Bob, looking at /events: "There needs to be a
   little more spacing between the title and the green button. Also, they are all
   different sizes, can't they just all be one size with the buttons aligned
   along the bottom?"

   THREE DECLARATIONS, AND THE PLUGIN HAD ALREADY DONE THE HARD PART.
   pk27e_styles() sets .pk27e-card to display:flex; flex-direction:column, so the
   card is already a column - it just had nothing telling it to fill its row and
   nothing pushing the button down. What was in the way:

     .pk27e-grid { align-items: start }      cards size to their own content
     .pk27e-btn-wrap { align-self: flex-start }   button sits under the title

   grid-auto-rows:1fr is the half that answers "ALL one size" rather than "one
   size per row". align-items:stretch alone equalises within each row, which on a
   three-row grid gives three different heights - closer, but still not what was
   asked. 1fr makes every row resolve to the tallest, so all nine match.

   THE DOUBLED CLASS IS NOT A TYPO. pk27e_styles() emits its <style> in the BODY,
   later in document order than this file in the head, so an equal-specificity
   rule here LOSES the cascade tie. .pk27e-grid.pk27e-grid is (0,2,0) against the
   plugin's (0,1,0) and settles it on specificity, where source order cannot
   reach. Same trick as the search-page overrides, but deliberately WITHOUT an
   ancestor: /events is a page and sits inside #pkw, while archive.php can render
   [2027_Get_Events] for a term, and a term archive has no #pkw. An #pkw-prefixed
   rule would fix one context and silently miss the other.

   THE TITLE MARGIN IS NOW A FLOOR, NOT A GAP. Once the button is pushed to the
   bottom the real space above it varies per card - a one-line title gets more
   than a three-line one. 1.5rem is what the shortest card shows; it was 1.1rem.

   The 1.1 hover zoom is untouched and taller cards will overlap their neighbours
   slightly more on hover. That is the existing effect doing the same thing to a
   bigger box, not a new problem - z-index:5 on hover already puts the scaled card
   above the others.
   ========================================================================== */
.pk27e-grid.pk27e-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.pk27e-grid.pk27e-grid .pk27e-card .pk27e-title {
  margin-block-end: 1.5rem;
}

/* Last child of a flex column, so auto on the top margin absorbs the slack and
   the button lands on the card floor. .pk27e-btn-wrap keeps the plugin's
   align-self:flex-start, which is what stops the pill stretching full width. */
.pk27e-grid.pk27e-grid .pk27e-btn-wrap {
  margin-block-start: auto;
}

/* ==========================================================================
   .pk-toggle-reveal - HIDDEN UNTIL SOMETHING SHOWS IT
   Added 1.13.29, 2026-08-28. Bob found the three new event landing pages showing
   their thank-you panel on load: "There should be no reveal box when there is no
   clsid at all."

   WHAT WENT WRONG, BECAUSE THE FIX IS ONE LINE AND THE CAUSE IS NOT.
   Staging's event pages carry a page-level <style> block with THREE rules:

       #pkw .pk-toggle-reveal          { display:none }
       #pkw.pk-clsid .pk-toggle-form   { display:none !important }
       #pkw.pk-clsid .pk-toggle-reveal { display:block !important }

   The conversion drops that whole block. I accounted for the two .pk-clsid rules
   - that is why the swap script is replaced with the display-setting version -
   and walked straight past the default-hidden rule directly above them, under
   Bob's own comment saying exactly why it exists: "with no JS the form shows and
   the reveal stays hidden, which is the correct default."

   Until now every converted page compensated with an inline style="display:none"
   on the element. That works and 38 of 38 reveal elements on the site carry it -
   but it is a convention no code enforces, so a conversion that forgets it ships
   a visible thank-you panel and NOTHING catches it. The assertions I ran asked
   whether the toggle pair existed and whether the script was the theme's version.
   Both passed. Neither asked what state the panel starts in.

   UNSCOPED, AND THAT IS DELIBERATE. Three wrappers are in play - #pkw, the
   .pkv-gartner landing family, and #pk-landing-wrapper - so a wrapper-scoped rule
   would fix one and silently miss the others. There is no case where a
   post-submission panel should be visible before submission, so the selector does
   not need a qualifier.

   SAFE BECAUSE EVERY SWAP SETS AN INLINE style.display, checked on all 38 before
   this was written: element.style.display = 'block' beats any stylesheet rule, so
   the reveal still appears when it should. If a future swap is ever written to add
   a CLASS instead, it needs a matching rule here or the panel will never show -
   that is the one way this line can bite, and it is the reason staging's version
   was class-driven in the first place.

   The inline attributes stay on the pages. They are redundant now and harmless,
   and stripping 38 of them to prove a point would be a large diff for no gain.
   ========================================================================== */
.pk-toggle-reveal {
  display: none;
}

/* ==========================================================================
   SOLUTIONS - /solutions/encrypted-file-inspection   (Michael's page)
   Added 1.13.30, 2026-08-28, migrating MAR-2276 item 2.1 off staging.

   EVERY RULE BELOW IS SCOPED TO #pkw.pk-efi, AND THAT WAS BOB'S CALL.
   He was given three options and chose "scope Michael's values to this page".
   The reason it needed a decision: the page ships its own design system that
   REDEFINES 39 of the theme's core primitives with different values -

     #pkw            the whole token block, plus --navy-2/-3, --coral-d, --rule
     #pkw a          color:inherit  ->  var(--cyan-700)
     .h1 .h2 .h3     different clamp() triples
     .lead           20px/1.7/56ch  ->  19.5px/1.75/58ch
     .eyebrow        12.5px + a 7px frost DOT  ->  20px + a 34px cyan DASH
     .btn            15.5px, 15px 26px  ->  16px, 18px 32px
     .btn-cyan/-green  different text colours and hover shadows
     .wrap .sec      --pk-edge/--pk-sec-y tokens  ->  --gut / a 132px literal
     .hero .hero-grid .hero-cta   different padding and column ratios
     the whole FAQ component       --brd  ->  --rule, and a dozen sizes
     .reveal .rise (+delays)       .8s/26px  ->  .75s/22px

   Left unscoped, those would have restyled ALL 82 pages. Scoping keeps
   Michael's page pixel-faithful and touches nothing else. The cost is a second
   set of primitive values living in this file, so if the two ever need to
   converge, this block is where the difference is written down.

   THE SCOPING IS MECHANICAL, NOT HAND-EDITED. Every selector had #pkw rewritten
   to #pkw.pk-efi, and any bare selector got #pkw.pk-efi prefixed. @media and
   @supports blocks were rewritten inside and left otherwise intact. An assertion
   in the build refused to proceed unless EVERY top-level rule started with
   #pkw.pk-efi, @ or a comment.

   FOUR THINGS FROM STAGING ARE NOT HERE.

     52 chrome rules, -5,279 chars.  .navbar .nav .nav-item .nav-trigger .mega*
     .burger .mobile-panel .hdr .topbar .logo .footer .foot-* .micro .trusted
     .logorow - a complete duplicate header, mega menu and footer. Michael's
     stylesheet is a superset shared across his pages; this page's markup
     contains NONE of those elements, verified 0 occurrences each. header.php
     and footer.php supply the chrome.

     @import Google Fonts Lato.  Already in this file once, at line ~1531.

     @keyframes rise.  Byte-identical to the theme's, so the page's copy is
     redundant. It is worth knowing it COLLIDED - a differing copy would have
     silently changed the theme's animation for every other page that uses it.

     .reveal / .rise { opacity:1 !important }  An UNSCOPED kill switch at the
     very end of staging's stylesheet, which forces every fade off. Left in it
     would have disabled reveal animations site-wide. **Dropped rather than
     scoped**, and this is the one place this page deviates from staging's
     rendering: here the elements fade in on scroll like every other page,
     driven by components.js, with a prefers-reduced-motion opt-out. It read as
     a bug-fix hack rather than a design choice. Two scoped rules restore
     staging's behaviour exactly if that judgement was wrong.

   THE FAQ, THE REVEAL AND THE TRUST BAND ALL MAP TO THINGS THAT EXIST.
   components.js already carries the .faq-q accordion - line for line the same
   code, same class names, same maxHeight technique - and the .reveal
   IntersectionObserver, both scoped to '#pkw,.pkbc-page'. So the page's own
   copies of both were deleted from its JS, which went 3,522 chars -> a scroll
   spy for .snav and a responsive toggle for <details class="req">, the only two
   behaviours with no theme equivalent. The four-logo trust band became
   [pkware_trust_logos], which carries the same logos and the same "Protecting
   21 of the 25 largest U.S. commercial banks" caption - and that swap is also
   why four .webp logo files did not need transferring.
   ========================================================================== */
#pkw.pk-efi{--navy:#1E3074;--navy-2:#152357;--navy-3:#0E1A45;--cyan:#09BCEF;--cyan-700:#057FA3;--frost:#0FE4A2;--frost-deep:#0B6E4E;--coral:#F95557;--coral-d:#B02F31;
--tx:#41475A;--tx-2:#666E82;--tx-3:#8A93A6;--rule:#E2E9F3;--rule-2:#CFD9E8;--surf:#F2F7FC;--surf-2:#E7F0F9;
--serif:Georgia,"Times New Roman",serif;--sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--maxw:1300px;--gut:36px;font-family:var(--sans);color:var(--tx);background:#fff;font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;overflow-x:clip}
#pkw.pk-efi h1,#pkw.pk-efi h2,#pkw.pk-efi h3,#pkw.pk-efi h4,#pkw.pk-efi .h1,#pkw.pk-efi .h2,#pkw.pk-efi .h3,#pkw.pk-efi .faq-q,#pkw.pk-efi .qq,#pkw.pk-efi .pull{text-wrap:balance}
#pkw.pk-efi p,#pkw.pk-efi li,#pkw.pk-efi figcaption,#pkw.pk-efi .cap,#pkw.pk-efi .prose,#pkw.pk-efi .lead{text-wrap:pretty}
#pkw.pk-efi h1,#pkw.pk-efi h2,#pkw.pk-efi h3{font-family:var(--serif);font-weight:400;color:var(--navy);margin:0;letter-spacing:-.014em}
#pkw.pk-efi h4,#pkw.pk-efi h5{font-family:var(--sans);margin:0;color:var(--navy)}
#pkw.pk-efi p{margin:0}
#pkw.pk-efi a{color:var(--cyan-700);text-decoration:none}
#pkw.pk-efi a:hover{color:var(--navy)}
#pkw.pk-efi img{max-width:100%;display:block}
#pkw.pk-efi ul,#pkw.pk-efi ol{margin:0;padding:0;list-style:none}
#pkw.pk-efi button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
#pkw.pk-efi summary::-webkit-details-marker{display:none}
#pkw.pk-efi sup{font-size:.64em}
#pkw.pk-efi :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:5px}
#pkw.pk-efi .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
#pkw.pk-efi .sec{padding:132px 0;background-color:#fff;position:relative}
#pkw.pk-efi .sec.surf{background-color:var(--surf)}
#pkw.pk-efi .sec.tight{padding:92px 0}
/* dark anchor register */
#pkw.pk-efi .dark{background-color:var(--navy-3);color:#C9D3EE;--tx:#C9D3EE;--tx-2:#A3AFD4;--tx-3:#8290BC;--rule:rgba(255,255,255,.13);--rule-2:rgba(255,255,255,.22);--surf:rgba(255,255,255,.05)}
#pkw.pk-efi .dark h1,#pkw.pk-efi .dark h2,#pkw.pk-efi .dark h3,#pkw.pk-efi .dark h4{color:#fff}
#pkw.pk-efi .dark .eyebrow{color:var(--frost)}
#pkw.pk-efi .dark .eyebrow::before{background:var(--frost)}
#pkw.pk-efi .dark a{color:var(--frost)}
#pkw.pk-efi .dark a:hover{color:#fff}
#pkw.pk-efi .glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#pkw.pk-efi .glow::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;right:-320px;top:-420px;background:radial-gradient(circle,rgba(9,188,239,.24),transparent 62%)}
#pkw.pk-efi .glow::after{content:"";position:absolute;width:720px;height:720px;border-radius:50%;left:-300px;bottom:-380px;background:radial-gradient(circle,rgba(15,228,162,.14),transparent 64%)}
#pkw.pk-efi .dark .wrap{position:relative;z-index:2}
/* ---------- type ---------- */
#pkw.pk-efi .h1{font-size:clamp(40px,4.6vw,60px);line-height:1.05;max-width:17ch}
#pkw.pk-efi .h2{font-size:clamp(32px,3.5vw,47px);line-height:1.12}
#pkw.pk-efi .h3{font-size:clamp(22px,2.1vw,29px);line-height:1.24}
#pkw.pk-efi .lead{font-size:19.5px;line-height:1.75;color:var(--tx-2);max-width:58ch}
#pkw.pk-efi .prose{font-size:18.5px;line-height:1.82;color:var(--tx);max-width:64ch}
#pkw.pk-efi .prose+.prose{margin-top:24px}
#pkw.pk-efi .prose.muted{color:var(--tx-2)}
#pkw.pk-efi .eyebrow{display:flex;align-items:center;gap:15px;font-weight:700;font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 26px}
#pkw.pk-efi .eyebrow::before{content:"";width:34px;height:2px;background:var(--cyan);flex:none}
#pkw.pk-efi .eyebrow.ink{color:var(--cyan-700)}
#pkw.pk-efi .eyebrow.ink::before{background:var(--cyan-700)}
#pkw.pk-efi .cap{font-size:14px;line-height:1.65;color:var(--tx-3)}
/* ---------- buttons ---------- */
#pkw.pk-efi .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;line-height:1;padding:18px 32px;border-radius:999px;border:1.5px solid transparent;transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;white-space:nowrap}
#pkw.pk-efi .btn svg{width:15px;height:15px;transition:transform .22s}
#pkw.pk-efi .btn:hover svg{transform:translateX(4px)}
#pkw.pk-efi .btn-cyan{background:var(--cyan);color:#04222F}
#pkw.pk-efi .btn-cyan:hover{background:var(--navy);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(30,48,116,.5)}
#pkw.pk-efi .btn-out{border-color:var(--rule-2);color:var(--navy)}
#pkw.pk-efi .btn-out:hover{border-color:var(--navy);background:var(--navy);color:#fff;transform:translateY(-2px)}
#pkw.pk-efi .btn-green{background:var(--frost);color:#052A1F}
#pkw.pk-efi .btn-green:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(15,228,162,.6)}
#pkw.pk-efi .btn-ghost{border-color:rgba(255,255,255,.36);color:#fff}
#pkw.pk-efi .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
#pkw.pk-efi .btn-sm{padding:13px 22px;font-size:14.5px}
#pkw.pk-efi .tlink{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;color:var(--cyan-700)}
#pkw.pk-efi .tlink svg{width:14px;height:14px;transition:transform .22s}
#pkw.pk-efi .tlink:hover{color:var(--navy)}
#pkw.pk-efi .tlink:hover svg{transform:translateX(5px)}
#pkw.pk-efi .dark .tlink{color:var(--frost)}
#pkw.pk-efi .dark .tlink:hover{color:#fff}
/* ---------- breadcrumb + hero ---------- */
#pkw.pk-efi .crumb{display:flex;gap:9px;align-items:center;font-size:14.5px;color:var(--navy);padding:26px 0 0;flex-wrap:wrap}
#pkw.pk-efi .crumb span{color:var(--tx-3)}
#pkw.pk-efi .crumb b{font-weight:400;color:var(--cyan)}
#pkw.pk-efi .hero{padding:58px 0 0;position:relative;overflow:hidden}
#pkw.pk-efi .hero::before{content:"";position:absolute;z-index:0;width:1100px;height:900px;border-radius:50%;right:-420px;top:-380px;background:radial-gradient(circle,rgba(9,188,239,.13),transparent 62%);pointer-events:none}
#pkw.pk-efi .hero .wrap{position:relative;z-index:2}
#pkw.pk-efi .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:80px;align-items:center;padding-top:0px}
#pkw.pk-efi .hero-panel{background:var(--navy-3);border-radius:14px;padding:34px;box-shadow:0 40px 80px -44px rgba(14,26,69,.6)}
#pkw.pk-efi .hero-panel .hp-lbl{font-weight:700;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--frost);margin-bottom:22px}
#pkw.pk-efi .hero-panel .hp-file{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid rgba(15,228,162,.4);background:rgba(15,228,162,.08);border-radius:10px}
#pkw.pk-efi .hero-panel .hp-lock{flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--frost);color:#052A1F}
#pkw.pk-efi .hero-panel .hp-lock svg{width:20px;height:20px}
#pkw.pk-efi .hero-panel .hp-name{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:#fff;letter-spacing:.01em}
#pkw.pk-efi .hero-panel .hp-meta{display:block;font-size:12.5px;color:#93A0C8;margin-top:5px}
#pkw.pk-efi .hero-panel .hp-rows{margin-top:8px}
#pkw.pk-efi .hero-panel .hp-rows li{display:flex;gap:16px;justify-content:space-between;align-items:baseline;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.11)}
#pkw.pk-efi .hero-panel .hp-rows li span{font-size:13.5px;color:#93A0C8;flex:none}
#pkw.pk-efi .hero-panel .hp-rows li b{font-weight:700;font-size:14.5px;color:#fff;text-align:right}
#pkw.pk-efi .hero-panel .hp-plat{margin-top:20px;font-size:13px;line-height:1.6;color:#93A0C8}
#pkw.pk-efi .hero-panel .hp-plat b{color:var(--frost);font-weight:700}
#pkw.pk-efi .hero .lead{margin:30px 0 40px}
#pkw.pk-efi .hero-cta{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center}
#pkw.pk-efi .hero{padding-bottom:104px}
/* ---------- section nav ---------- */
#pkw.pk-efi .snav{position:sticky;top:var(--hdr-h,81px);z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#pkw.pk-efi{scroll-behavior:smooth}
#pkw.pk-efi .sec,#pkw.pk-efi .cta{scroll-margin-top:calc(var(--hdr-h,81px) + 60px)}
#pkw.pk-efi .snav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:30px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
#pkw.pk-efi .snav-lbl{flex:none;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);padding-right:4px}
#pkw.pk-efi .snav-in::-webkit-scrollbar{display:none}
#pkw.pk-efi .snav a{padding:17px 0;font-weight:700;font-size:14px;color:var(--tx-2);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
#pkw.pk-efi .snav a:hover{color:var(--navy)}
#pkw.pk-efi .snav a.on{color:var(--navy);border-bottom-color:var(--cyan)}
#pkw.pk-efi .snav-in{gap:34px}
/* ---------- editorial grid ---------- */
#pkw.pk-efi .ed{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);gap:34px 100px;align-items:start}
#pkw.pk-efi .ed-h{position:sticky;top:154px}
#pkw.pk-efi .ed-h .h2{max-width:18ch}
#pkw.pk-efi .ed-h .kick{margin-top:26px;font-size:17px;line-height:1.7;color:var(--tx-2);max-width:34ch}
/* ---------- figure system ---------- */
#pkw.pk-efi .fig{margin-top:70px}
#pkw.pk-efi .fig-head{display:flex;align-items:baseline;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:0}
#pkw.pk-efi .fig-head .n{font-weight:700;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--cyan);flex:none}
#pkw.pk-efi .fig-head .t{font-family:var(--serif);font-size:20px;color:var(--navy)}
#pkw.pk-efi .dark .fig-head .t{color:#fff}
#pkw.pk-efi .fig-head .legend{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
#pkw.pk-efi .fig-head .legend span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--tx-3);white-space:nowrap}
#pkw.pk-efi .fig-head .legend i{width:9px;height:9px;border-radius:50%;flex:none}
#pkw.pk-efi .fig-body{padding:34px 0 0}
#pkw.pk-efi .fig-body:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
#pkw.pk-efi .fig svg{width:100%;height:auto;display:block}
#pkw.pk-efi .fig figcaption{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px;line-height:1.65;color:var(--tx-3);max-width:86ch}
/* ---------- ruled rows ---------- */
#pkw.pk-efi .rows{border-top:1px solid var(--rule)}
#pkw.pk-efi .row{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,10fr);gap:24px 60px;padding:40px 0;border-bottom:1px solid var(--rule)}
#pkw.pk-efi .row h3{font-size:24px;line-height:1.28;max-width:20ch}
#pkw.pk-efi .row p{font-size:17.5px;line-height:1.78;color:var(--tx);max-width:62ch}
#pkw.pk-efi .row .num{font-family:var(--serif);font-size:15px;color:var(--cyan);display:block;margin-bottom:12px}
#pkw.pk-efi .row.hl{position:relative;background:linear-gradient(100deg,rgba(9,188,239,.07),rgba(15,228,162,.05) 70%,transparent);margin:0 -32px;padding:40px 32px;border-radius:6px}
#pkw.pk-efi .trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
#pkw.pk-efi .trio .cell{padding:38px 40px 10px 0}
#pkw.pk-efi .trio .cell+.cell{padding-left:40px;border-left:1px solid var(--rule)}
#pkw.pk-efi .trio h4{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.28;color:var(--navy);margin-bottom:14px}
#pkw.pk-efi .trio p{font-size:16.5px;line-height:1.72;color:var(--tx-2)}
#pkw.pk-efi .trio .ico{display:block;width:26px;height:26px;color:var(--cyan);margin-bottom:22px}
#pkw.pk-efi .trio .ico svg{width:26px;height:26px}
/* ---------- feature numbers / quotes ---------- */
#pkw.pk-efi .bignum{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;margin-top:78px;padding:44px 0;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule)}
#pkw.pk-efi .bignum .n{font-family:var(--serif);font-size:clamp(50px,6vw,82px);line-height:.9;color:var(--navy)}
#pkw.pk-efi .bignum p{font-size:17.5px;line-height:1.75;color:var(--tx-2);max-width:60ch}
#pkw.pk-efi .pull{font-family:var(--serif);font-size:clamp(25px,3vw,38px);line-height:1.3;color:var(--navy);max-width:28ch;padding-left:30px;border-left:2px solid var(--frost)}
#pkw.pk-efi .dark .pull{color:#fff;border-left-color:var(--frost)}
#pkw.pk-efi .pull small{display:block;font-family:var(--sans);font-size:17px;line-height:1.75;color:var(--tx-2);margin-top:24px;max-width:44ch}
/* ---------- notes as disclosures ---------- */
#pkw.pk-efi .note{margin-top:34px;border-left:2px solid var(--coral);background:var(--surf);border-radius:0 6px 6px 0}
#pkw.pk-efi .note>summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:16px 22px;font-weight:700;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--coral-d);list-style:none}
#pkw.pk-efi .note>summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .25s}
#pkw.pk-efi .note[open]>summary::after{transform:rotate(225deg)}
#pkw.pk-efi .note .nb{padding:2px 24px 22px}
#pkw.pk-efi .note p,#pkw.pk-efi .note li{font-size:14.5px;line-height:1.7;color:var(--tx-2)}
#pkw.pk-efi .note b{color:var(--navy)}
#pkw.pk-efi .dark .note b{color:#fff}
#pkw.pk-efi .note ol{margin-top:14px;counter-reset:q;display:flex;flex-direction:column;gap:10px}
#pkw.pk-efi .note ol li{counter-increment:q;padding-left:28px;position:relative}
#pkw.pk-efi .note ol li::before{content:counter(q) ".";position:absolute;left:0;color:var(--coral);font-weight:700}
#pkw.pk-efi .dark .note{background:rgba(249,85,87,.08)}
/* ---------- spec lists ---------- */
#pkw.pk-efi .speclist{display:flex;flex-direction:column;gap:15px}
#pkw.pk-efi .speclist li{display:flex;gap:14px;font-size:16.5px;line-height:1.65;color:var(--tx)}
#pkw.pk-efi .speclist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;margin-top:11px;background:var(--frost)}
#pkw.pk-efi .platgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:70px;padding-top:52px;border-top:1px solid var(--rule)}
#pkw.pk-efi .platgrid .plsub{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:24px}
#pkw.pk-efi .footnote{margin-top:40px;font-size:14.5px;line-height:1.75;color:var(--tx-3);max-width:86ch}
/* ---------- dispatch stack ---------- */
#pkw.pk-efi .stack{display:grid;grid-template-columns:1fr 1fr;gap:60px}
#pkw.pk-efi .stk-h{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
#pkw.pk-efi .stk-row{display:flex;gap:14px;align-items:stretch}
#pkw.pk-efi .stk-box{flex:1;padding:18px 20px;border:1px solid var(--rule-2);border-radius:6px;font-size:14.5px;line-height:1.5;color:var(--tx-2)}
#pkw.pk-efi .stk-box b{display:block;font-weight:900;font-size:15.5px;color:#fff;margin-bottom:3px}
#pkw.pk-efi .stk-box.top{border-color:var(--cyan);background:rgba(9,188,239,.14)}
#pkw.pk-efi .stk-box.hw{background:rgba(15,228,162,.11);border-color:rgba(15,228,162,.4)}
#pkw.pk-efi .stk-side{width:164px;flex:none;padding:18px;border:1px dashed var(--rule-2);border-radius:6px;font-size:12.5px;line-height:1.5;color:var(--tx-3)}
#pkw.pk-efi .stk-side b{display:block;font-size:13px;color:#fff;margin-bottom:3px}
#pkw.pk-efi .stk-arrow{height:30px;display:flex;align-items:center;padding-left:30px;color:var(--rule-2)}
#pkw.pk-efi .stk-arrow svg{width:15px;height:15px}
#pkw.pk-efi .stk-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);font-size:15px;color:var(--tx-2)}
#pkw.pk-efi .stk-foot b{color:#fff}
/* ---------- dispatch matrix ---------- */
#pkw.pk-efi .dmx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:0}
#pkw.pk-efi .dmx-h{padding:0 0 18px;font-family:var(--serif);font-size:23px;color:#fff;border-bottom:1px solid var(--rule-2)}
#pkw.pk-efi .dmx-h.plat{padding-left:26px}
#pkw.pk-efi .dmx-h em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-top:8px}
#pkw.pk-efi .dmx-r{padding:24px 26px 24px 0;font-weight:700;font-size:14.5px;line-height:1.5;color:#93A0C8;border-bottom:1px solid var(--rule)}
#pkw.pk-efi .dmx-c{padding:24px 26px;font-size:15.5px;line-height:1.55;color:#E4E9F8;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule)}
#pkw.pk-efi .dmx-c.hw{color:var(--frost)}
#pkw.pk-efi .dmx>div:nth-last-child(-n+3){border-bottom:0}
/* ---------- keep / replace lanes ---------- */
#pkw.pk-efi .lane{display:grid;grid-template-columns:190px minmax(0,1fr) 132px;gap:30px;align-items:center;padding:32px 0;border-top:1px solid var(--rule)}
#pkw.pk-efi .lane:last-of-type{border-bottom:1px solid var(--rule)}
#pkw.pk-efi .lane .alg{font-family:var(--serif);font-size:29px;line-height:1.12}
#pkw.pk-efi .lane .alg em{display:block;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-top:8px}
#pkw.pk-efi .lane .steps-in{display:flex;gap:10px;flex-wrap:wrap}
#pkw.pk-efi .lane .steps-in span{font-size:14.5px;color:var(--tx-2);padding:10px 18px;border-radius:999px;background:var(--surf);border:1px solid var(--rule)}
#pkw.pk-efi .lane .verdict{font-weight:900;font-size:13px;letter-spacing:.15em;text-transform:uppercase;text-align:center;padding:13px 8px;border-radius:999px}
#pkw.pk-efi .lane.keep .alg{color:var(--frost)}
#pkw.pk-efi .lane.keep .verdict{color:#052A1F;background:var(--frost)}
#pkw.pk-efi .lane.repl .alg{color:#FF8E90}
#pkw.pk-efi .lane.repl .verdict{color:#fff;background:rgba(249,85,87,.22);border:1px solid rgba(249,85,87,.5)}
/* ---------- timeline ---------- */
#pkw.pk-efi .tl{margin-top:20px;position:relative}
#pkw.pk-efi .tl-line{position:absolute;left:0;right:0;top:46px;height:1px;background:linear-gradient(90deg,var(--rule-2) 0%,var(--cyan) 84%,rgba(15,228,162,.55) 100%)}
#pkw.pk-efi .tl-row{display:grid;grid-template-columns:repeat(7,1fr);gap:18px;position:relative}
#pkw.pk-efi .tlp{padding:70px 12px 0 0;position:relative;font-size:13.5px;line-height:1.6;color:var(--tx-2)}
#pkw.pk-efi .tlp .yr{position:absolute;top:0;left:0;font-family:var(--serif);font-size:20px;color:var(--navy)}
#pkw.pk-efi .tlp::before{content:"";position:absolute;top:40px;left:0;width:13px;height:13px;border-radius:50%;background:var(--surf);border:2px solid var(--cyan)}
#pkw.pk-efi .tlp b{display:block;font-weight:900;font-size:14.5px;color:var(--navy);margin-bottom:5px}
#pkw.pk-efi .tlp.open .yr{color:var(--frost-deep)}
#pkw.pk-efi .tlp.open::before{border-color:var(--frost-deep);border-style:dashed}
/* ---------- code compare ---------- */
#pkw.pk-efi .codegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#pkw.pk-efi .codecard{border-radius:10px;overflow:hidden;background:var(--navy-3);box-shadow:0 34px 68px -40px rgba(11,17,48,.6)}
#pkw.pk-efi .codecard .ch{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12.5px;font-weight:700;letter-spacing:.05em;color:#93A0C8}
#pkw.pk-efi .codecard .ch i{width:8px;height:8px;border-radius:50%;flex:none;background:#7A85AC}
#pkw.pk-efi .codecard.on{box-shadow:0 34px 68px -36px rgba(9,188,239,.45)}
#pkw.pk-efi .codecard.on .ch{color:#fff}
#pkw.pk-efi .codecard.on .ch i{background:var(--frost)}
#pkw.pk-efi .codecard pre{margin:0;padding:24px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.9;color:#D6DDF5;overflow-x:auto}
#pkw.pk-efi .codecard pre em{font-style:normal;color:#04222F;background:var(--cyan);padding:1px 6px;border-radius:3px}
#pkw.pk-efi .codecard pre s{text-decoration:none;color:#616A90}
/* ---------- steps / lists ---------- */
#pkw.pk-efi .steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid var(--rule)}
#pkw.pk-efi .steps .step{padding:36px 38px 10px 0}
#pkw.pk-efi .steps .step+.step{padding-left:38px;border-left:1px solid var(--rule)}
#pkw.pk-efi .steps .n{font-family:var(--serif);font-size:15px;color:var(--cyan);display:block;margin-bottom:14px}
#pkw.pk-efi .steps h4{font-weight:900;font-size:18px;margin-bottom:10px}
#pkw.pk-efi .steps p{font-size:16.5px;line-height:1.72;color:var(--tx-2)}
#pkw.pk-efi .olist{counter-reset:o;display:flex;flex-direction:column}
#pkw.pk-efi .olist li{counter-increment:o;display:flex;gap:20px;align-items:flex-start;font-size:18px;line-height:1.65;color:var(--tx);padding:20px 0;border-bottom:1px solid var(--rule)}
#pkw.pk-efi .olist li:first-child{border-top:1px solid var(--rule)}
#pkw.pk-efi .olist li:last-child{border-bottom:0}
#pkw.pk-efi .olist li::before{content:counter(o);flex:none;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#fff;font-family:var(--sans);font-weight:700;font-size:13px;display:grid;place-items:center;margin-top:3px}
/* ---------- routing ---------- */
#pkw.pk-efi .routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
#pkw.pk-efi .rcard{padding:34px;border-radius:12px;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--rule-2);transition:transform .26s,box-shadow .26s,border-top-color .26s}
#pkw.pk-efi .rcard:nth-child(1){border-top-color:var(--cyan)}
#pkw.pk-efi .rcard:nth-child(2){border-top-color:var(--frost)}
#pkw.pk-efi .rcard:nth-child(3){border-top-color:var(--navy)}
#pkw.pk-efi .rcard:nth-child(4){border-top-color:var(--cyan-700)}
#pkw.pk-efi .rcard:hover{transform:translateY(-4px);box-shadow:0 26px 52px -30px rgba(30,48,116,.34)}
#pkw.pk-efi .rcard .qq{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--navy);min-height:3.2em}
#pkw.pk-efi .rcard .aa{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);font-size:16px;line-height:1.7;color:var(--tx-2)}
#pkw.pk-efi .rcard .aa b{color:var(--navy)}
/* ---------- mandate table ---------- */
#pkw.pk-efi .mtbl{width:100%;border-collapse:collapse;margin-top:8px;text-align:left}
#pkw.pk-efi .mtbl th{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tx-3);padding:0 26px 14px 0;border-bottom:1px solid var(--rule-2);vertical-align:bottom}
#pkw.pk-efi .mtbl th:last-child,#pkw.pk-efi .mtbl td:last-child{padding-right:0}
#pkw.pk-efi .mtbl td{padding:26px 26px 26px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:16px;line-height:1.66;color:var(--tx-2)}
#pkw.pk-efi .mtbl td:first-child{width:34%}
#pkw.pk-efi .mtbl td:nth-child(2){width:30%;color:var(--tx)}
#pkw.pk-efi .mtbl b.mt-l{display:block;font-weight:700;color:var(--navy-2);font-size:17px;line-height:1.45;margin-bottom:8px}
@media(max-width:860px){
  #pkw.pk-efi .mtbl,#pkw.pk-efi .mtbl tbody,#pkw.pk-efi .mtbl tr,#pkw.pk-efi .mtbl td{display:block;width:auto}
  #pkw.pk-efi .mtbl thead{display:none}
  #pkw.pk-efi .mtbl tr{border-bottom:1px solid var(--rule);padding:22px 0}
  #pkw.pk-efi .mtbl td{border:0;padding:0 0 12px;width:auto}
  #pkw.pk-efi .mtbl td:first-child,#pkw.pk-efi .mtbl td:nth-child(2){width:auto}
}
/* ---------- FAQ (matches the site pattern) ---------- */
#pkw.pk-efi .faq-head{text-align:center;margin-bottom:48px}
#pkw.pk-efi .faq-head .eyebrow{justify-content:center}
#pkw.pk-efi .faq{max-width:880px;margin:0 auto;border-top:1px solid var(--rule)}
#pkw.pk-efi .faq-item{border-bottom:1px solid var(--rule)}
#pkw.pk-efi .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:28px 2px;text-align:left;font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--navy)}
#pkw.pk-efi .faq-q .ic{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;color:var(--cyan-700);transition:transform .3s,background .3s,border-color .3s,color .3s}
#pkw.pk-efi .faq-q .ic svg{width:13px;height:13px}
#pkw.pk-efi .faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--frost);border-color:var(--frost);color:#052A1F}
#pkw.pk-efi .faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
#pkw.pk-efi .faq-a p{padding:0 2px 30px;font-size:17px;line-height:1.75;color:var(--tx-2);max-width:74ch}
/* ---------- CTA + footer ---------- */
#pkw.pk-efi .cta{background-color:var(--navy);color:#fff;padding:128px 0;position:relative;overflow:hidden}
#pkw.pk-efi .cta::after{content:"";position:absolute;width:880px;height:880px;border-radius:50%;right:-300px;top:-380px;background:radial-gradient(circle,rgba(9,188,239,.34),transparent 62%);pointer-events:none}
#pkw.pk-efi .cta .wrap{position:relative;z-index:2;max-width:960px}
#pkw.pk-efi .cta h2{color:#fff;max-width:20ch}
#pkw.pk-efi .cta .eyebrow{color:var(--frost)}
#pkw.pk-efi .cta .eyebrow::before{background:var(--frost)}
#pkw.pk-efi .cta p{font-size:19.5px;line-height:1.72;color:#C6D0EC;max-width:54ch;margin:24px 0 40px}
#pkw.pk-efi .cta .btns{display:flex;gap:14px;flex-wrap:wrap}
#pkw.pk-efi .cta .tl-note{margin-top:36px;font-size:14.5px;color:#8E9BC4}
/* ---------- v3 additions ---------- */
#pkw.pk-efi .hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--rule);padding-top:28px}
#pkw.pk-efi .hstats .hs{padding-right:26px}
#pkw.pk-efi .hstats .hs+.hs{padding-left:28px;border-left:1px solid var(--rule)}
#pkw.pk-efi .hstats .n{font-family:var(--serif);font-size:27px;line-height:1;color:var(--navy)}
#pkw.pk-efi .hstats .l{font-size:13.5px;line-height:1.5;color:var(--tx-3);margin-top:9px;max-width:20ch}
#pkw.pk-efi .onecard{margin-top:64px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:start;padding:38px 40px;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--coral);border-radius:0 8px 8px 0}
#pkw.pk-efi .onecard .ico{width:30px;height:30px;color:var(--coral);flex:none}
#pkw.pk-efi .onecard h3{font-size:25px;margin-bottom:14px}
#pkw.pk-efi .onecard p{font-size:17.5px;line-height:1.75;color:var(--tx);max-width:64ch}
#pkw.pk-efi .quad{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:76px;border-top:1px solid var(--rule)}
#pkw.pk-efi .quad .q{padding:40px 46px 40px 0;border-bottom:1px solid var(--rule)}
#pkw.pk-efi .quad .q:nth-child(even){padding-left:46px;border-left:1px solid var(--rule)}
#pkw.pk-efi .quad .q:nth-last-child(-n+2){border-bottom:0}
#pkw.pk-efi .quad .num{font-family:var(--serif);font-size:15px;color:var(--cyan);display:block;margin-bottom:14px}
#pkw.pk-efi .quad h3{font-size:24px;line-height:1.28;margin-bottom:14px;max-width:24ch}
#pkw.pk-efi .quad p{font-size:17px;line-height:1.75;color:var(--tx-2);max-width:52ch}
#pkw.pk-efi .platprose{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:70px;padding-top:52px;border-top:1px solid var(--rule)}
#pkw.pk-efi .platprose .pl{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
#pkw.pk-efi .platprose p{font-size:17px;line-height:1.8;color:var(--tx)}
#pkw.pk-efi .closer{margin-top:56px;padding-top:30px;border-top:1px solid var(--rule);font-size:17.5px;line-height:1.75;color:var(--tx-2);max-width:70ch}
#pkw.pk-efi .callout{margin-top:70px;padding:40px 44px;border-radius:10px;background:var(--surf);border-left:3px solid var(--frost)}
#pkw.pk-efi .callout p{font-size:18.5px;line-height:1.75;color:var(--tx);max-width:64ch}
#pkw.pk-efi .callout .tlink{margin-top:26px}
#pkw.pk-efi .dark .callout{background:rgba(255,255,255,.05)}
#pkw.pk-efi .proveit{margin-top:96px;padding-top:70px;border-top:2px solid var(--navy)}
#pkw.pk-efi .conseq{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:80px;border-top:2px solid var(--navy)}
#pkw.pk-efi .conseq>div{padding:40px 48px 0 0}
#pkw.pk-efi .conseq>div+div{padding-left:48px;border-left:1px solid var(--rule)}
#pkw.pk-efi .costnum{font-family:var(--serif);font-size:clamp(42px,4.8vw,62px);line-height:1;color:var(--navy);margin-bottom:18px}
/* ---------- motion ---------- */
#pkw.pk-efi .reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
#pkw.pk-efi .reveal.in{opacity:1;transform:none}
#pkw.pk-efi .rise{opacity:0;transform:translateY(18px);animation:rise .85s cubic-bezier(.2,.6,.2,1) forwards}
#pkw.pk-efi .rise.d1{animation-delay:.04s}
#pkw.pk-efi .rise.d2{animation-delay:.14s}
#pkw.pk-efi .rise.d3{animation-delay:.26s}
#pkw.pk-efi .rise.d4{animation-delay:.38s}
#pkw.pk-efi .rise.d5{animation-delay:.5s}
/* ---------- responsive ---------- */
@media(max-width:1180px){
  #pkw.pk-efi .nav,#pkw.pk-efi .nav-search,#pkw.pk-efi .nav-right{display:none}
  #pkw.pk-efi .burger{display:flex}
  #pkw.pk-efi .hero-grid{grid-template-columns:minmax(0,1fr);gap:52px}
  #pkw.pk-efi .ed{grid-template-columns:1fr;gap:30px}
  #pkw.pk-efi .ed-h{position:static}
  #pkw.pk-efi .ed-h .h2{max-width:26ch}
  #pkw.pk-efi .snav{top:var(--hdr-h,73px)}
  #pkw.pk-efi .platgrid{grid-template-columns:1fr;gap:44px}
  #pkw.pk-efi .dmx{grid-template-columns:1fr}
  #pkw.pk-efi .dmx-h{display:none}
  #pkw.pk-efi .dmx-r{padding:26px 0 4px;border-bottom:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
  #pkw.pk-efi .dmx-c{padding:10px 0 10px 16px;border-left:2px solid var(--rule-2);border-bottom:0;font-size:15px}
  #pkw.pk-efi .dmx-c::before{content:attr(data-plat);display:block;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#93A0C8;margin-bottom:4px}
  #pkw.pk-efi .dmx-c.hw{border-left-color:rgba(15,228,162,.5)}
  #pkw.pk-efi .rcard .qq{min-height:0}
  #pkw.pk-efi .tl-row{grid-template-columns:1fr 1fr 1fr}
  #pkw.pk-efi .tl-line{display:none}
}
@media(max-width:860px){
  #pkw.pk-efi{font-size:17px}
  #pkw.pk-efi .sec{padding:84px 0}
  #pkw.pk-efi .sec.tight{padding:64px 0}
  #pkw.pk-efi .trusted{margin-top:64px}
  #pkw.pk-efi .logorow{gap:38px}
  #pkw.pk-efi .trio,#pkw.pk-efi .steps,#pkw.pk-efi .codegrid,#pkw.pk-efi .quad,#pkw.pk-efi .platprose{grid-template-columns:1fr;gap:0}
  #pkw.pk-efi .routes{gap:18px}
  #pkw.pk-efi .rcard{padding:26px}
  #pkw.pk-efi .quad .q,#pkw.pk-efi .quad .q:nth-child(even){padding:32px 0;border-left:0;border-bottom:1px solid var(--rule)}
  #pkw.pk-efi .platprose{gap:38px;display:flex;flex-direction:column}
  #pkw.pk-efi .hstats{grid-template-columns:1fr;gap:22px}
  #pkw.pk-efi .hstats .hs+.hs{padding-left:0;border-left:0}
  #pkw.pk-efi .conseq{grid-template-columns:1fr}
  #pkw.pk-efi .conseq>div{padding:32px 0 0}
  #pkw.pk-efi .conseq>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  #pkw.pk-efi .trio .cell+.cell,#pkw.pk-efi .steps .step+.step{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  #pkw.pk-efi .trio .cell,#pkw.pk-efi .steps .step{padding-right:0}
  #pkw.pk-efi .row{grid-template-columns:1fr;gap:14px}
  #pkw.pk-efi .row.hl{margin:0;padding:36px 0}
  #pkw.pk-efi .lane{grid-template-columns:1fr;gap:18px}
  #pkw.pk-efi .lane .verdict{justify-self:start;padding:12px 28px}
  #pkw.pk-efi .tl-row{grid-template-columns:1fr}
  #pkw.pk-efi .tlp{padding:0 0 24px 30px}
  #pkw.pk-efi .tlp .yr{position:static;display:block;margin-bottom:5px}
  #pkw.pk-efi .tlp::before{top:9px;left:0}
  #pkw.pk-efi .stk-row{flex-direction:column}
  #pkw.pk-efi .stk-side{width:auto}
  #pkw.pk-efi .bignum{grid-template-columns:1fr;gap:16px}
  #pkw.pk-efi .fig-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #pkw.pk-efi .fig-body>svg{min-width:880px}
  #pkw.pk-efi .snav-lbl{display:none}
  #pkw.pk-efi .fig-head{flex-wrap:wrap;gap:10px}
  #pkw.pk-efi .foot-top{grid-template-columns:1fr 1fr;gap:32px}
  #pkw.pk-efi .foot-top>div:first-child{grid-column:1/-1}
  #pkw.pk-efi .fig-body{scroll-snap-type:x proximity;padding-bottom:6px}
  #pkw.pk-efi .fig-body::after{content:"Scroll sideways to see the whole figure";display:block;position:sticky;left:0;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-700)}
  #pkw.pk-efi .dark .fig-body::after{color:var(--frost)}
  #pkw.pk-efi .fig-head .legend{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  #pkw.pk-efi *{animation:none!important;transition:none!important}
  #pkw.pk-efi .reveal,#pkw.pk-efi .rise{opacity:1!important;transform:none!important}
}
/* ---------- hero exhibit + trust strip ---------- */
#pkw.pk-efi .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,556px);gap:52px}
#pkw.pk-efi .hero-grid>*{min-width:0}
#pkw.pk-efi .hx{background:var(--navy-3);border-radius:14px;padding:24px;box-shadow:0 44px 88px -48px rgba(14,26,69,.65)}
#pkw.pk-efi .hx-lbl{display:flex;flex-wrap:wrap;gap:8px;font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--frost);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px}
#pkw.pk-efi .hx-lbl span{color:#7F8CB6;letter-spacing:.14em}
#pkw.pk-efi .hx-pane{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:14px 16px}
#pkw.pk-efi .hx-now{border-color:rgba(9,188,239,.55);background:rgba(9,188,239,.07)}
#pkw.pk-efi .hx-file{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;margin-bottom:16px}
#pkw.pk-efi .hx-name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:#fff;overflow-wrap:anywhere;min-width:0}
#pkw.pk-efi .hx-sub{grid-column:2;font-size:12.5px;line-height:1.5;color:#7F8CB6}
#pkw.pk-efi .hx-file .hx-pemp{background:var(--frost);color:#052A1F;font-size:12px;padding:4px 12px}
#pkw.pk-efi .hx-when{font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8290BC;margin-bottom:11px}
#pkw.pk-efi .hx-when.hx-okwhen{color:var(--cyan)}
#pkw.pk-efi .hx-v{flex:none;font-size:12px;font-weight:700;letter-spacing:.02em;color:#B8C4E8}
#pkw.pk-efi .hx-hit .hx-v{color:#04222F;background:var(--cyan);border-radius:999px;padding:4px 12px}
#pkw.pk-efi .hx-pem .hx-pill{background:var(--frost);color:#052A1F}
#pkw.pk-efi .hx-pem{padding-top:0}
#pkw.pk-efi .hx-closed{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.04)}
#pkw.pk-efi .hx-cg{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.09);color:#8290BC}
#pkw.pk-efi .hx-cg svg{width:18px;height:18px}
#pkw.pk-efi .hx-ctxt{font-size:12.5px;line-height:1.5;color:#7F8CB6}
#pkw.pk-efi .hx-ctxt b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:400;font-size:13px;color:#B8C4E8;margin-bottom:3px}
#pkw.pk-efi .hx-file .hx-3p{background:rgba(255,255,255,.14);color:#C9D3EE;font-size:12px;padding:4px 12px}
#pkw.pk-efi .hx-verdict{margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.13);font-size:13.5px;line-height:1.5;color:#8290BC}
#pkw.pk-efi .hx-verdict.hx-okv{color:#fff;font-weight:700;border-top-color:rgba(9,188,239,.3)}
#pkw.pk-efi .hx-step{display:flex;align-items:center;gap:13px;padding:14px 2px}
#pkw.pk-efi .hx-pill{flex:none;font-family:var(--serif);font-size:14.5px;color:#04222F;background:var(--cyan);border-radius:999px;padding:7px 18px}
#pkw.pk-efi .hx-steptxt{font-size:13.5px;line-height:1.45;color:#C9D3EE}
#pkw.pk-efi .hx-rows{display:grid;gap:9px}
#pkw.pk-efi .hx-rows li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1)}
#pkw.pk-efi .hx-rows li:last-child{border-bottom:0}
#pkw.pk-efi .hx-k{font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#9AA6CE}
@media(max-width:1180px){
  #pkw.pk-efi .hero-grid{grid-template-columns:minmax(0,1fr)}
  #pkw.pk-efi .hx{max-width:600px}
}
@media(max-width:480px){
  #pkw.pk-efi .routes{grid-template-columns:1fr}
}
@media(max-width:620px){
  #pkw.pk-efi .h1,#pkw.pk-efi .h2,#pkw.pk-efi .h3,#pkw.pk-efi h3,#pkw.pk-efi .qq,#pkw.pk-efi .claim-h,#pkw.pk-efi .faq-q{overflow-wrap:anywhere}
  #pkw.pk-efi .hx-name{font-size:12.5px}
  #pkw.pk-efi .foot-top{grid-template-columns:1fr;gap:26px}
  #pkw.pk-efi .routes{gap:12px}
  #pkw.pk-efi .rcard{padding:18px}
  #pkw.pk-efi .rcard .qq{font-size:16.5px}
  #pkw.pk-efi .rcard .aa{font-size:14.5px;margin-top:14px;padding-top:14px}
  #pkw.pk-efi .hx{padding:22px}
  #pkw.pk-efi .hx-cipher{font-size:11px}
  #pkw.pk-efi .hx-rows li{align-items:flex-start;flex-wrap:wrap;gap:6px}
}
/* ---------- requirements disclosures ---------- */
#pkw.pk-efi .reqgrp{margin-top:60px}
#pkw.pk-efi .grph{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-700);padding-bottom:14px;border-bottom:2px solid var(--navy)}
#pkw.pk-efi .req{border-bottom:1px solid var(--rule)}
#pkw.pk-efi .req>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px minmax(0,1fr) 26px;gap:20px;align-items:start;padding:24px 2px}
#pkw.pk-efi .req .rn{font-family:var(--serif);font-size:17px;color:var(--cyan);padding-top:2px}
#pkw.pk-efi .req .rq{font-size:17.5px;line-height:1.6;color:var(--navy);font-weight:700;max-width:64ch}
#pkw.pk-efi .req .chev{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;margin-top:4px;color:var(--cyan-700);transition:transform .28s,background .28s,border-color .28s,color .28s}
#pkw.pk-efi .req .chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}
#pkw.pk-efi .req[open] .chev{transform:rotate(180deg);background:var(--frost);border-color:var(--frost);color:#052A1F}
#pkw.pk-efi .req .rb{padding:0 2px 28px 72px;display:grid;gap:16px}
#pkw.pk-efi .req .rb p{font-size:16.5px;line-height:1.75;color:var(--tx-2);max-width:70ch}
#pkw.pk-efi .req .rb em{font-style:normal;display:block;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:5px}
#pkw.pk-efi .kl{margin-top:26px;font-size:18.5px;line-height:1.7;font-weight:700;color:var(--navy)}
#pkw.pk-efi .dark .kl{color:#fff}
#pkw.pk-efi .bold-close{margin-top:34px;padding-top:26px;border-top:1px solid var(--rule);font-size:18.5px;line-height:1.7;font-weight:700;color:var(--navy);max-width:68ch}
#pkw.pk-efi .claimwrap{max-width:900px}
#pkw.pk-efi .claim-h{font-family:var(--serif);font-size:clamp(30px,3.6vw,50px);line-height:1.14;color:#fff;letter-spacing:-.014em}
@media(max-width:860px){
  #pkw.pk-efi .req>summary{grid-template-columns:40px minmax(0,1fr) 22px;gap:14px;padding:20px 0}
  #pkw.pk-efi .req .rq{font-size:16.5px}
  #pkw.pk-efi .req .rb{padding:0 0 24px 54px}
}

/* ==========================================================================
   LANDING - /landing/securezip-end-of-support   (hand-authored)
   ==========================================================================

   Added 2026-09-09. Bob built this page on staging the same morning and asked
   for it on development. It is the HAND-AUTHORED landing archetype - 30,156
   chars decoded across three [fusion_code] blocks - so per the rule in
   CLAUDE.md this is not a rebuild: lift the CSS out, keep the markup.

   EVERY RULE IS SCOPED .pkv-eos, AND 79 OF THE 95 ARRIVED BARE. The page's own
   class prefix is .pkve-, which looks like namespacing and is not: only 16 of
   its rules carried .pkv-eos as authored. Four of its class names already exist
   in this stylesheet - is-visible, js, fusion-footer, fusion-tb-footer - so
   pasting it bare would have reached other pages. Scoped mechanically behind an
   assertion that refused to write unless every top-level selector part carried
   .pkv-eos; it reported 0 remaining.

   @keyframes bodies were left alone on purpose - pkve-conndot, pkve-nodepop and
   pkve-conndot-v contain animation stops, not selectors, and scoping a `from`
   or a `0%` would silently kill the animation.

   TWO THINGS FROM STAGING ARE NOT HERE.

     Three <link> tags - two preconnects and the Lato stylesheet from
     fonts.googleapis.com. This theme self-hosts Lato; divergence 12.

     .fusion-tb-footer.fusion-footer { margin-top: -20px !important }. One
     declaration, and it exists to nudge AVADA'S footer. Development renders
     footer-landing.php and has no Avada footer, so the rule would match
     nothing - dropped rather than carried as dead weight.
   ========================================================================== */

.pkv-eos {--navy:#1E3074;--cyan:#09BCEF;--frost:#0FE4A2;--coral:#F95557;--ink:#484848;--grey:#F1F5FA;--white:#fff;color-scheme:light;background:var(--white);font-family:'Lato',-apple-system,sans-serif;color:var(--ink);line-height:1.7;font-size:20px;font-weight:400;overflow-x:hidden}
.pkv-eos * {box-sizing:border-box;margin:0;padding:0}
.pkv-eos h1,
.pkv-eos h2,
.pkv-eos h3,
.pkv-eos h4 {font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-weight:400;letter-spacing:-0.01em}
.pkv-eos h1 {font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08}
.pkv-eos h2 {font-size:clamp(1.9rem,4vw,2.875rem);line-height:1.2}
.pkv-eos h3 {font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.35}
.pkv-eos p {font-size:1.05rem;line-height:1.7;color:var(--ink)}
.pkv-eos a {color:var(--cyan);text-decoration:none}
.pkv-eos a:hover {color:var(--navy)}
.pkv-eos .pkve-wrap {max-width:1300px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.pkv-eos .pkve-section {width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.pkv-eos .pkve-section {padding:96px 0}
.pkv-eos .pkve-grey {background:var(--grey)}
.pkv-eos .pkve-narrow {max-width:1300px}
.pkv-eos .pkve-eyebrow {display:inline-flex;align-items:center;gap:12px;font-family:'Lato',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.pkv-eos .pkve-eyebrow::before {content:"";width:34px;height:2px;background:var(--cyan);display:inline-block}

/* ---- Buttons ---- */
.pkv-eos .pkve-btn {display:inline-block;border-radius:999px;padding:16px 34px;font-family:'Lato',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s;border:2px solid transparent;line-height:1.1;text-decoration:none!important;margin-top:34px}
.pkv-eos .pkve-btn-primary {background:var(--cyan)!important;color:#06283c!important}
.pkv-eos .pkve-btn-primary:hover {background:#fff!important;color:var(--navy)!important}

/* ---- Navy gradient hero ---- */
.pkv-eos .pkve-hero {background-color:var(--navy);background-image:radial-gradient(120% 130% at 88% 0%, rgba(9,188,239,0.34) 0%, rgba(9,188,239,0) 55%),linear-gradient(160deg,#24387f 0%,#141f4a 100%);padding:88px 0 96px;overflow:hidden}
.pkv-eos .pkve-hero::after {content:"";position:absolute;right:-140px;bottom:-220px;width:560px;height:560px;border-radius:50%;border:1px solid rgba(9,188,239,0.28);pointer-events:none}
.pkv-eos .pkve-hero-grid {display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:end}
.pkv-eos .pkve-hero h1 {color:#fff}
.pkv-eos .pkve-hero .pkve-lead {font-size:1.2rem;line-height:1.6;color:rgba(255,255,255,0.82);max-width:760px;margin-top:24px}
.pkv-eos .pkve-hero .pkve-lead strong {color:#fff;font-weight:700}
.pkv-eos .pkve-datecard {border:1px solid rgba(255,255,255,0.22);border-radius:16px;background:rgba(255,255,255,0.05);padding:30px 32px}
.pkv-eos .pkve-datecard-label {font-size:0.76rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--frost);display:flex;align-items:center;gap:10px}
.pkv-eos .pkve-datecard-label::before {content:"";width:10px;height:10px;border-radius:50%;background:var(--frost);flex:0 0 auto}
.pkv-eos .pkve-datecard-date {font-family:Georgia,serif;font-size:1.9rem;line-height:1.15;color:#fff;margin:14px 0 12px}
.pkv-eos .pkve-datecard p {font-size:0.95rem;line-height:1.55;color:rgba(255,255,255,0.72)}

/* ---- Three-up answers ---- */
.pkv-eos .pkve-grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.pkv-eos .pkve-card {background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:0 32px 34px;border-top:3px solid var(--cyan);transition:transform .28s ease,box-shadow .28s ease}
.pkv-eos .pkve-card:hover {transform:translateY(-4px);box-shadow:0 18px 44px rgba(30,48,116,0.12)}
.pkv-eos .pkve-card-num {font-family:Georgia,serif;font-size:0.95rem;font-weight:700;letter-spacing:0.1em;color:var(--cyan);padding:26px 0 16px;display:block}
.pkv-eos .pkve-card h3 {margin-bottom:12px}
.pkv-eos .pkve-card p {font-size:1rem}

/* ---- FAQ: sticky rail + accordion ---- */
.pkv-eos .pkve-faq-grid {display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:start}
.pkv-eos .pkve-faq-rail {position:sticky;top:110px}
.pkv-eos .pkve-faq-rail p {font-size:1rem;color:var(--ink);margin-top:20px}
.pkv-eos .pkve-faq-count {font-family:Georgia,serif;font-size:0.95rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#8b93a4;margin-top:28px;padding-top:20px;border-top:1px solid #dfe6f0}
.pkv-eos .pkve-faq {border-top:1px solid #dfe6f0}
.pkv-eos .pkve-faq details {border-bottom:1px solid #dfe6f0}
.pkv-eos .pkve-faq summary {list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 22px;align-items:start;gap:8px;padding:26px 4px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.35;color:var(--navy);transition:color .18s ease}
.pkv-eos .pkve-faq summary::-webkit-details-marker {display:none}
.pkv-eos .pkve-faq summary:hover {color:var(--cyan)}
.pkv-eos .pkve-faq summary .pkve-q-num {font-family:'Lato',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;color:var(--cyan);padding-top:8px}
.pkv-eos .pkve-faq summary::after {content:"";justify-self:end;width:13px;height:13px;margin-top:8px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(45deg);transition:transform .22s ease}
.pkv-eos .pkve-faq details[open] summary {color:var(--navy)}
.pkv-eos .pkve-faq details[open] summary::after {transform:rotate(-135deg);margin-top:13px}
.pkv-eos .pkve-answer {padding:0 4px 34px 52px;max-width:760px}
.pkv-eos .pkve-answer>*+p {margin-top:18px}
.pkv-eos .pkve-answer ol,
.pkv-eos .pkve-answer ul {margin:0 0 0 22px}
.pkv-eos .pkve-answer>*+ol,
.pkv-eos .pkve-answer>*+ul {margin-top:18px}
.pkv-eos .pkve-answer li {font-size:1.05rem;line-height:1.65;margin-bottom:12px;padding-left:6px}
.pkv-eos .pkve-answer li::marker {color:var(--cyan);font-weight:700}
.pkv-eos .pkve-answer li strong {color:var(--navy);font-weight:700}

/* ---- Unanswered / pending-product callout. MUST NOT SHIP. ---- */
.pkv-eos .pkve-todo {border:1px dashed var(--coral);border-radius:10px;background:rgba(249,85,87,0.05);padding:18px 20px}
.pkv-eos .pkve-answer>*+.pkve-todo {margin-top:18px}
.pkv-eos .pkve-todo-label {font-family:'Lato',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--coral);display:block;margin-bottom:8px}
.pkv-eos .pkve-todo p {font-size:1rem!important;color:#7a3a3b!important;line-height:1.6}

/* ---- Worth knowing: pipeline diagram, ported from the homepage "What we do" ---- */
.pkv-eos {--frost-deep:#0B6E4E;--brd:#E1E7F1;--brd-2:#D2DAE7;--tx-2:#5C6472;--frost-glow:rgba(15,228,162,.40)}
.pkv-eos .pkve-flow {position:relative;display:flex;align-items:center;justify-content:center;gap:0;margin-top:56px;flex-wrap:nowrap}
.pkv-eos .pkve-flow-seq {display:flex;align-items:center;gap:0}
.pkv-eos .pkve-fstep {position:relative;width:74px;flex:none;display:flex;justify-content:center}
.pkv-eos .pkve-fnode {width:74px;height:74px;border-radius:22px;display:grid;place-items:center;position:relative;background:#fff;border:1.5px solid var(--brd-2);color:var(--frost-deep);box-shadow:0 16px 32px -20px rgba(30,48,116,.5);transition:transform .3s,box-shadow .3s,border-color .3s;animation:pkve-nodepop 4s ease-in-out infinite}
.pkv-eos .pkve-flow-seq .pkve-fstep:nth-child(3) .pkve-fnode {animation-delay:.9s}
.pkv-eos .pkve-fnode svg {width:30px;height:30px}
.pkv-eos .pkve-fnode .pkve-pk {position:absolute;top:-10px;right:-10px;width:27px;height:27px;border-radius:50%;background:var(--navy);color:#fff;font-family:Georgia,serif;font-size:12.5px;display:grid;place-items:center;border:2px solid #fff}
.pkv-eos .pkve-fstep:hover .pkve-fnode {transform:translateY(-6px);border-color:var(--frost);box-shadow:0 24px 42px -20px rgba(15,228,162,.5)}
.pkv-eos .pkve-fcap {position:absolute;top:86px;left:50%;transform:translateX(-50%);width:124px;text-align:center;font-size:13px;color:var(--tx-2);line-height:1.45}
.pkv-eos .pkve-fcap b {display:block;font-family:'Lato',sans-serif;font-weight:900;font-size:17px;color:var(--navy);margin-bottom:6px}
.pkv-eos .pkve-fconn {width:64px;height:2px;flex:none;position:relative;background:var(--brd-2);border-radius:2px}
.pkv-eos .pkve-fconn::after {content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 12px var(--frost-glow);animation:pkve-conndot 3s ease-in-out infinite}
@keyframes pkve-conndot{0%{left:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes pkve-nodepop{0%,22%,100%{border-color:var(--brd-2);box-shadow:0 16px 32px -20px rgba(30,48,116,.5)}8%{border-color:var(--frost);box-shadow:0 0 0 7px rgba(15,228,162,.13),0 20px 38px -18px rgba(15,228,162,.55)}}
.pkv-eos .pkve-flow-join {width:44px;height:2px;flex:none;background:var(--frost-deep);opacity:.45;border-radius:2px}
.pkv-eos .pkve-flow-branch {position:relative;display:flex;flex-direction:column;gap:16px;flex:none;width:314px;height:268px;padding-left:34px}
.pkv-eos .pkve-flow-branch::before {content:"";position:absolute;left:0;top:27px;bottom:27px;width:2px;border-radius:2px;background:var(--frost-deep);opacity:.4}
.pkv-eos .pkve-branch-head {position:absolute;top:-30px;left:34px;font-family:'Lato',sans-serif;font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--frost-deep)}
.pkv-eos .pkve-bstep {position:relative;flex:1;display:flex;align-items:center;gap:13px;padding:0 18px;border-radius:16px;background:#fff;border:1.5px solid var(--brd);box-shadow:0 12px 30px -22px rgba(30,48,116,.5);transition:transform .3s,box-shadow .3s,border-color .3s}
.pkv-eos .pkve-bstep::before {content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;margin-top:-1px;background:var(--frost-deep);opacity:.4}
.pkv-eos .pkve-bstep:hover {border-color:var(--frost);transform:translateX(5px);box-shadow:0 18px 34px -20px rgba(15,228,162,.45)}
.pkv-eos .pkve-bicon {width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;color:var(--frost-deep);background:linear-gradient(145deg,rgba(15,228,162,.15),rgba(9,188,239,.12))}
.pkv-eos .pkve-bicon svg {width:22px;height:22px}
.pkv-eos .pkve-btxt b {display:block;font-family:'Lato',sans-serif;font-weight:900;font-size:16px;color:var(--navy);margin-bottom:2px}
.pkv-eos .pkve-btxt span {font-size:13px;color:var(--tx-2);line-height:1.4}
.pkv-eos .pkve-flow-note {max-width:760px;margin:112px auto 0;text-align:center}

/* ---- Worth knowing ---- */
.pkv-eos .pkve-console-grid {display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:start}
.pkv-eos .pkve-console-body>*+p {margin-top:20px}
.pkv-eos .pkve-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none;padding:0}
.pkv-eos .pkve-actions li {font-family:'Lato',sans-serif;font-size:0.85rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);background:#fff;border:1px solid #dfe6f0;border-radius:999px;padding:10px 22px;margin:0}

/* ---- Footer band ---- */
.pkv-eos .pkve-close-band {background-color:var(--navy);background-image:radial-gradient(110% 140% at 8% 100%, rgba(9,188,239,0.28) 0%, rgba(9,188,239,0) 58%);padding:88px 0}
.pkv-eos .pkve-close-band h2 {color:#fff}
.pkv-eos .pkve-close-band p {font-family:Georgia,serif;font-size:1.4rem;line-height:1.5;color:rgba(255,255,255,0.85);margin-top:20px;max-width:720px}

.pkv-eos.js .pkve-reveal {opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.pkv-eos.js .pkve-reveal.is-visible {opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pkv-eos.js .pkve-reveal {opacity:1;transform:none;transition:none}}
@media (max-width:1060px){
  .pkv-eos .pkve-faq-grid,
.pkv-eos .pkve-console-grid {grid-template-columns:1fr;gap:36px}
  .pkv-eos .pkve-faq-rail {position:static}
  .pkv-eos .pkve-flow {flex-direction:column;gap:52px}
  .pkv-eos .pkve-flow-join {display:none}
  .pkv-eos .pkve-fstep {flex-direction:column;align-items:center;width:100%;max-width:320px}
  .pkv-eos .pkve-fcap {position:static;transform:none;width:auto;margin-top:14px;top:auto;left:auto}
  .pkv-eos .pkve-flow-branch {flex-direction:row;width:auto;height:auto;padding-left:0;gap:16px}
  .pkv-eos .pkve-flow-branch::before {display:none}
  .pkv-eos .pkve-bstep {flex:1 1 0;min-width:0;padding:18px 16px;align-items:flex-start;flex-direction:column;gap:10px}
  .pkv-eos .pkve-bstep::before {display:none}
  .pkv-eos .pkve-flow-seq {flex-direction:column;gap:52px;width:100%;align-items:center}
  .pkv-eos .pkve-fconn {width:2px;height:44px}
  .pkv-eos .pkve-fconn::after {top:0;left:-3px;animation:pkve-conndot-v 3s ease-in-out infinite}
  @keyframes pkve-conndot-v{0%{top:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
  .pkv-eos .pkve-flow-branch {margin-top:34px}
  .pkv-eos .pkve-branch-head {top:-30px;left:50%;transform:translateX(-50%)}
  .pkv-eos .pkve-flow-note {margin-top:64px}
}
@media (max-width:720px){
  .pkv-eos .pkve-flow-branch {flex-direction:column}
  .pkv-eos .pkve-bstep {flex-direction:row;align-items:center}
}
@media (max-width:860px){
  .pkv-eos .pkve-section {padding:64px 0}
  .pkv-eos .pkve-hero {padding:56px 0 64px}
  .pkv-eos .pkve-hero-grid {grid-template-columns:1fr;gap:36px;align-items:start}
  .pkv-eos .pkve-grid-3 {grid-template-columns:1fr;gap:20px}
  .pkv-eos .pkve-close-band {padding:64px 0}
  .pkv-eos .pkve-close-band p {font-size:1.2rem}
  .pkv-eos .pkve-faq summary {grid-template-columns:34px 1fr 20px}
  .pkv-eos .pkve-answer {padding-left:34px}
}

/* ==========================================================================
   [17] PHIL - Salesforce Embedded Messaging chatbot
   --------------------------------------------------------------------------
   The last outstanding block from the Avada stylesheet inventory near the top
   of this file: "block [17] .embeddedMessaging* - Salesforce chat widget
   overrides". Ported 2026-09-09 with the chatbot itself; see inc/chatbot.php.

   NOT SCOPED UNDER #pkw, AND THAT IS DELIBERATE. Everything targeted here is
   injected by Salesforce's bootstrap.min.js as a direct child of <body>,
   outside the theme's #pkw wrapper. Scoping these under #pkw would silently
   stop all of them - the chat button would lose its brand fill and the mobile
   height cap would go with it. The selectors are Salesforce's own generated
   class and id names, so they cannot collide with theme styles.

   button#minimizedButton-20 IS AN ID SALESFORCE GENERATES with a trailing
   counter. If they ever renumber it that rule stops matching and the minimized
   button reappears - the .minimizedButtonWrapper rule above it is the belt to
   that braces. Both are kept, exactly as Bob had them.

   Phil's own prompt markup carries its style="" attributes inline, transcribed
   unchanged from live rather than moved here. They are proven values and the
   CSP already permits style attributes; see inc/chatbot.php.
   ========================================================================== */
iframe#embeddedMessagingFrame {margin-bottom:50px}
embeddedmessaging-minimized-state.notificationArea {display:none}
.minimizedButtonWrapper {display:none !important}
button#minimizedButton-20 {display:none !important}
button#embeddedMessagingConversationButton {margin-bottom:50px}
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] > svg.embeddedMessagingIconChat {fill:#1152be !important}
@media screen and (max-width:768px) {
  .embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {max-height:460px !important}
}