/* ==========================================================================
   Plek marketing home: the eight sections, top to bottom.
   Builds on site.css (tokens, column-and-rule scaffolding, controls).
   ========================================================================== */

/* ==== hero ==== */
/* First section of the home page: no top rule, full viewport tall, and the one
   place that has to keep its text clear of the floating nav (which sits 20px
   from the top and is --pk-nav-h tall). The rails of .pk-col run the whole
   height; the navy product frame spans them and crops the dashboard shot. */

@layer pages {
.pk-hero {
  border-top: 0;
  background: var(--pk-ground);
  /* floor under the floating nav; the band's min-height does the real placing */
  --pk-hero-clear: calc(20px + var(--pk-nav-h) + 24px);
  --pk-hero-gutter: 10px;
  --pk-hero-top-min: 280px;
  --pk-hero-frame-min: 240px;
}

.pk-hero > .pk-col {
  display: flex;
  flex-direction: column;
  gap: var(--pk-sp-9);
  min-height: 100vh;
}

/* ---- top band: 280px tall, its content sitting on the bottom edge ---- */
.pk-hero__top {
  display: grid;
  grid-template-areas:
    "chip ."
    "title aside";
  grid-template-columns: minmax(0, 544px) minmax(0, 420px);
  align-content: end;
  align-items: start;
  justify-content: space-between;
  column-gap: var(--pk-sp-3);
  row-gap: var(--pk-sp-6);
  min-height: var(--pk-hero-top-min);
  padding: var(--pk-hero-clear) var(--pk-hero-gutter) 0;
}

.pk-hero__intro {
  display: contents;
  min-width: 0;
}

.pk-hero__chip {
  grid-area: chip;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-sp-2);
  margin: 0;
  padding: var(--pk-sp-1h) var(--pk-sp-3);
  background: var(--pk-card);
  color: var(--pk-ink);
  font: var(--pk-fw-regular) var(--pk-fs-small)/var(--pk-lh-tight) var(--pk-font-display);
  letter-spacing: var(--pk-ls-ui);
}
.pk-hero__yc { display: block; flex: none; }

.pk-hero__title { grid-area: title; margin: 0; }
.pk-hero__line { display: block; }

/* The aside is exactly as tall as the two-line title and shares its top and
   bottom edges: it stretches to the grid row the title sizes, the lead sits on
   the top edge and the button on the bottom one. The 8px pad is optical, not
   structural. The two blocks' boxes already start on the same line, but a box
   top is not a glyph top: the title's first cap line sits 11.7px below its box
   (48px Space Grotesk on a 57.6px line, -1.7px half-leading, 47px ascent,
   33.6px cap) while the lead's sits 3.8px below its own (17px Inter on 20.4px,
   0.2px half-leading, 16px ascent, 12.4px cap), so without the pad the lead
   reads as floating 8px above the headline. Re-derive it if either font, size
   or line-height changes. Tablet stacks the blocks and zeroes it. */
.pk-hero__aside {
  grid-area: aside;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  padding-top: var(--pk-sp-2);
  min-width: 0;
}

.pk-hero__lead {
  margin: 0;
  max-width: 420px;
  color: var(--pk-ink-2);
  font: var(--pk-fw-regular) 17px/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-body);
  text-align: right;
  text-wrap: balance;
}

/* ---- product frame: takes the height the top band leaves ---- */
.pk-hero__frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  min-height: var(--pk-hero-frame-min);
  border-radius: var(--pk-radius-s);
  overflow: hidden;
}

/* Pinned, never fitted: the shot is meant to run off the bottom edge (and off
   the right edge below 1200px). The rounded top corners and the hairline are
   baked into the image. The widths below are what the hero's `sizes` attribute
   restates — change one and change the other. */
.pk-hero__shot {
  position: absolute;
  display: block;
  left: 100px;
  top: 80px;
  width: calc(100% - 200px);
  max-width: none;
  height: auto;
}

/* ---- tablet: the two blocks stack, everything left-aligned ---- */
@media (max-width: 1199.98px) {
  .pk-hero {
    --pk-hero-gutter: 42px;
    --pk-hero-top-min: 415px;
    --pk-hero-frame-min: 300px;
  }
  .pk-hero__top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--pk-sp-6);
  }
  .pk-hero__intro {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pk-sp-6);
    max-width: 544px;
  }
  .pk-hero__aside { align-items: flex-start; padding-top: 0; }
  .pk-hero__lead { max-width: 480px; text-align: left; }
  .pk-hero__shot { left: 60px; top: 60px; width: 1000px; }
}

/* ---- phone: no fixed top band, and a left-anchored crop of the shot ---- */
@media (max-width: 809.98px) {
  .pk-hero {
    --pk-hero-clear: calc(20px + var(--pk-nav-h) + 59px);
    --pk-hero-gutter: 20px;
    --pk-hero-top-min: 0px;
    --pk-hero-frame-min: 240px;
  }
  .pk-hero__top { gap: var(--pk-sp-3); }
  .pk-hero__intro { gap: var(--pk-sp-4); }
  .pk-hero__lead { max-width: none; }
  .pk-hero__shot { left: 40px; top: 40px; width: 813px; }

  /* .pk-display is 32px here, but "Named. Priced. Ranked." measures 10.07em
     and the phone column only offers 0.9vw - 42px, so below ~412px the accent
     line breaks in half. Cap the size to what keeps it whole — the design
     draws that line as one phrase — and wrap greedily rather than balanced, so
     the first line fills the way the reference render does.
     Both ends of the clamp are the same promise: the ramp tracks the column
     (0.089vw vs the 0.0894vw it can afford), and the 24px floor is what the
     narrowest width we support can still hold on one line (320px offers 246px
     of column, and 246 / 10.07 = 24.4px). A higher floor breaks the line below
     ~366px, which is most of the phones in use. */
  .pk-hero__title {
    font-size: clamp(24px, 8.9vw - 5px, 32px);
    text-wrap: wrap;
  }
}

/* ==== problem ==== */
/* Section 01. Head on the lattice column, then a rail-to-rail row of four cards
   framed by two full-bleed 1px rules. The rules are pseudo-elements that run
   past the column and are clipped by the section, so the column keeps its two
   side rails unbroken without a second wrapper.
   Author order: desktop first, then the two max-width steps. */

.pk-problem {
  background-color: var(--pk-ground);
  /* clips the two full-bleed rules below, exactly like the Framer frame's
     overflow=clip; without it their -100vw reach would scroll the page. */
  overflow: clip;
}
.pk-problem > .pk-col { padding-bottom: var(--pk-section-pad); }

/* The headline is two sentences on two lines above phone and one flowing
   paragraph on phone (Framer breaks it per breakpoint). Two spans rather than a
   <br>: display:none on a <br> is not reliably honoured, and the literal space
   between the spans is what separates the sentences once they go inline. */
.pk-problem__line { display: block; }

/* ---- the card row ---- */
.pk-problem__row {
  position: relative;
  display: grid;
  gap: 1px;
  /* the 1px grid gaps are the rules between cards */
  background-color: var(--pk-rule);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(312px, auto);
}
.pk-problem__row::before,
.pk-problem__row::after {
  content: '';
  position: absolute;
  left: -100vw;
  right: -100vw;
  height: 1px;
  background-color: var(--pk-rule);
  pointer-events: none;
}
.pk-problem__row::before { top: -1px; }
.pk-problem__row::after { bottom: -1px; }

/* ---- the card ---- */
.pk-problem__card {
  display: flex;
  flex-direction: column;
  /* Framer's `gap: 133` control, and a fixed gap rather than space-between on
     purpose: it anchors every title at the same offset from the top of its
     card, so the four titles stay on one line however their bodies wrap. The
     row's min-height is what leaves the slack underneath. */
  gap: 133px;
  padding: var(--pk-sp-6);
  background-color: var(--pk-card);
  border-radius: var(--pk-radius);
  /* not a link, not a button: nothing happens on click, so no pointer. */
  cursor: default;
  transition: background-color var(--pk-dur) var(--pk-ease);
}
.pk-problem__icon {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--pk-ink);
  transition: color var(--pk-dur) var(--pk-ease);
}
.pk-problem__text {
  display: flex;
  flex-direction: column;
  gap: var(--pk-sp-2);
}
.pk-problem__title {
  margin: 0;
  font: var(--pk-fw-regular) var(--pk-fs-title)/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-display);
  color: var(--pk-ink-strong);
  transition: color var(--pk-dur) var(--pk-ease);
}
.pk-problem__body {
  margin: 0;
  font: var(--pk-fw-regular) var(--pk-fs-body)/var(--pk-lh-body) var(--pk-font-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
  transition: color var(--pk-dur) var(--pk-ease);
}

/* ---- the one dark card ----
   Desktop only. Framer wires the hover swap on the four-across variant and
   ships the tablet (2x2) and phone (stacked) variants with every card light —
   which is what all three reference renders show — so the dark state is scoped
   to the breakpoint that has it. The `is-active` class stays on the first card
   in the markup at every width; only this rule reads it. That also settles the
   touch case: the breakpoints people touch never paint a dark card. */
@media (min-width: 1200px) {
  .pk-problem__card.is-active { background-color: var(--pk-charcoal); }
  .pk-problem__card.is-active .pk-problem__icon,
  .pk-problem__card.is-active .pk-problem__title { color: var(--pk-on-dark); }
  .pk-problem__card.is-active .pk-problem__body { color: var(--pk-on-dark-2); }
}

/* ---- tablet: 2 x 2 ---- */
@media (max-width: 1199.98px) {
  .pk-problem__row {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .pk-problem__card { gap: 74px; }
}

/* ---- phone: one column, cards separated by the same hairline ---- */
@media (max-width: 809.98px) {
  .pk-problem__row { grid-template-columns: 1fr; }
  .pk-problem__line { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-problem__card,
  .pk-problem__icon,
  .pk-problem__title,
  .pk-problem__body { transition: none; }
}

/* ==== how ==== */
/* Section 02 "How It Works".
   Desktop: a 1078x370 panel, rail to rail between two full-bleed rules — 60%
   illustration on the light weave ground, 40% charcoal step column with a 70px
   step bar on top and the step copy pinned to the bottom. The panel is sticky
   inside .pk-how__track; how.js maps the scroll position of that track onto the
   active step, and the same state is reachable by clicking a step.
   Tablet/phone stack the illustration above the dark column.
   Every rule that hides or stacks part of the copy hangs off `.pk-how--js`,
   which how.js adds to this section only once its own init has finished. Never
   off a document-level "scripting is on" flag: scripting being on says nothing
   about whether home.js loaded, and a flag set in <head> would collapse this
   section for good if it did not. A script that never runs therefore leaves the
   bar and the illustration out, and the three steps read as stacked headed
   blocks. */

.pk-how {
  --pk-how-step: 64vh;              /* scroll runway given to each step */
  --pk-how-panel-h: 370px;
  --pk-how-bar-h: 70px;
  --pk-how-seam: #ECECEC;           /* hairline between two light step cells */
  --pk-how-fade: 220ms;
  scroll-margin-top: 100px;
}
/* The section's bottom spacing is an element inside a .pk-col, never padding on
   the section: padding on the section sits OUTSIDE the column, and the column
   is what carries the two vertical rails, so it would cut them for
   --pk-section-pad between this section and the next. */
.pk-how__tail { height: var(--pk-section-pad); }

/* ---- sticky track ------------------------------------------------------- */
/* The runway is a real element, not padding on the track: a sticky box is
   confined to its containing block's CONTENT box, so padding would give it
   nowhere to travel. Framer does the same thing with three empty scroll-target
   blocks under the sticky frame.
   It is also a .pk-col, for the same reason as the tail: it is up to 192vh of
   the page and the rails have to run through it. */
.pk-how__track { position: relative; }
.pk-how__sticky { background: var(--pk-ground); }
.pk-how__runway { height: 0; }

.pk-how--js[data-scroll="on"] .pk-how__runway {
  height: calc(3 * var(--pk-how-step));
}
.pk-how--js[data-scroll="on"] .pk-how__sticky {
  position: sticky;
  top: var(--pk-nav-offset);
}

/* ---- pinned: the block takes the height the viewport has ------------------ */
/* Pinned at the panel's design height (370px on desktop, content height below
   it), the block left the bottom of any taller viewport empty for the whole of
   the scroll: 93px of it at 529x714, 242px at 1440x900. So while it is pinned
   the block is as tall as the viewport under the nav, less a 32px breath, and
   the panel takes whatever the heading leaves. What grows is the illustration
   (on desktop the step column stretches with it, its copy still seated on the
   bottom edge); lattice.js answers a taller mount with air above and below the
   scene, never by cropping its sides.
   It works the other way too: in a viewport shorter than the design's own
   panel the illustration gives height back, down to a floor, so a 894x714
   window pins where it used to fall back to a static 734px block. Below that
   floor something would have to be cut -- the panel clips, it is what draws
   the rounded corners -- so how.js tries this layout on, asks the block and
   the panel whether anything overflows them, and if so leaves the section
   unpinned at its natural height.
   svh, not dvh: a phone's URL bar sliding away must not resize a pinned block
   mid-scroll. The cap keeps the panel a panel on a very tall monitor. */
.pk-how { --pk-how-pin-max: calc(170px + 0.5 * min(90vw, 1440px)); }
.pk-how--js[data-scroll="on"] .pk-how__sticky {
  display: flex;
  flex-direction: column;
  height: min(calc(100vh - var(--pk-nav-offset) - 32px), var(--pk-how-pin-max));
  height: min(calc(100svh - var(--pk-nav-offset) - 32px), var(--pk-how-pin-max));
}
.pk-how--js[data-scroll="on"] .pk-how__row,
.pk-how--js[data-scroll="on"] .pk-how__row > .pk-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;                     /* or the wrappers' automatic minimum -- their
                                        content -- stops the panel giving height back */
}
.pk-how--js[data-scroll="on"] .pk-how__panel { flex: 1 1 auto; min-height: 0; }
.pk-how--js[data-scroll="on"] .pk-how__illo { min-height: 260px; }   /* the floor */

/* ---- the panel ---------------------------------------------------------- */
.pk-how__row {
  border-top: 1px solid var(--pk-rule);
  border-bottom: 1px solid var(--pk-rule);
}

.pk-how__panel {
  display: flex;
  gap: 1px;                          /* the 1px seam shows the row rule colour */
  background: var(--pk-rule);
  border-radius: var(--pk-radius);
  overflow: hidden;
}
/* min-height, never height: a browser minimum-font-size (or a longer step body
   after a copy edit) has to push the panel taller rather than be cut off by the
   overflow:hidden that draws the rounded corners. how.js re-measures the sticky
   box whenever that height can change, so the scroll maths follows. */
.pk-how--js .pk-how__panel { min-height: var(--pk-how-panel-h); }

.pk-how__illo {
  flex: 0 0 60.0186%;
  position: relative;
  min-height: 0;
}
.pk-how__illo .pk-lattice { position: absolute; inset: 0; }
/* the lattice SVG is cropped like object-fit: cover, and mid-transition
   cubes can travel past the mount, so the mount clips them */
.pk-how__illo, .pk-how__illo .pk-lattice { overflow: hidden; }
/* Until how.js has taken the section over, the illustration goes and the dark
   column takes the whole panel: the lattice only ever changes scene because
   this section tells it to, so an unenhanced panel would pin one frame of a
   three-frame diagram next to copy it no longer matches. */
.pk-how:not(.pk-how--js) .pk-how__illo { display: none; }
.pk-how:not(.pk-how--js) .pk-how__bodies { max-width: 760px; }

.pk-how__steps {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--pk-charcoal);
}

/* ---- step bar (tablist) ------------------------------------------------- */
/* a tablist nothing is listening to is worse than no tablist, so the bar only
   appears once how.js has wired it */
.pk-how__bar { display: none; }
.pk-how--js .pk-how__bar {
  display: flex;
  flex: 0 0 auto;
  height: var(--pk-how-bar-h);
  align-items: stretch;
}

.pk-how__tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--pk-sp-3);
  min-width: 0;
  padding: 0 var(--pk-sp-6);
  margin: 0;
  border: 0;
  border-right: 1px solid var(--pk-how-seam);
  background: var(--pk-surface);
  font-family: var(--pk-font-body);
  text-align: left;
  cursor: pointer;
  /* flex-grow and (below) font-size are layout properties, so these two run on
     the main thread alongside the lattice's d3 tween. They stay anyway: the
     cheap substitute is a transform, and a transform leaves the box the size it
     was — the active cell has to really take the width its two neighbours give
     up, and the numeral has to really push the step's name along as it grows.
     Both are off under prefers-reduced-motion (bottom of this section). */
  transition: flex-grow var(--pk-dur) var(--pk-ease),
              background-color var(--pk-dur) var(--pk-ease);
}
.pk-how__tab:last-child { border-right: 0; border-top-right-radius: var(--pk-radius); }
.pk-how__tab[aria-selected="true"] {
  flex-grow: 1;
  background: var(--pk-charcoal);
  border-right-color: transparent;
  cursor: default;
}
/* the light cells round the corner where they meet the dark active cell */
.pk-how__tab[aria-selected="true"] + .pk-how__tab { border-bottom-left-radius: var(--pk-radius); }
.pk-how__tab:has(+ [aria-selected="true"]) {
  border-bottom-right-radius: var(--pk-radius);
  border-right-color: transparent;
}
.pk-how__tab:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: -5px; }
.pk-how__tab[aria-selected="true"]:focus-visible { outline-color: var(--pk-on-dark); }
.pk-how__tab[aria-selected="false"]:hover { background: var(--pk-card); }

.pk-how__num {
  flex: 0 0 auto;
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-numeral-s);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-muted);
  transition: font-size var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease);
}
.pk-how__tab[aria-selected="true"] .pk-how__num {
  font-size: 36px;
  color: var(--pk-on-dark);
}

.pk-how__tabtext { display: block; min-width: 0; }
.pk-how__tabtitle {
  display: block;
  font-size: var(--pk-fs-title);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-display);
  color: var(--pk-on-dark);
}
/* an inactive cell keeps its name for assistive tech but shows only the numeral */
.pk-how__tab[aria-selected="false"] .pk-how__tabtext {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- step copy ---------------------------------------------------------- */
.pk-how__bodies {
  flex: 1 1 auto;
  display: grid;
  gap: var(--pk-sp-7);
  align-content: start;
  padding: var(--pk-sp-6);
}
/* The stack is the enhanced layout: three bodies on one grid cell, one of them
   opaque. how.js has already chosen that one and hidden the other two by the
   time it adds the class, so nothing is ever collapsed without a script behind
   it to open it again. */
.pk-how--js .pk-how__bodies { align-content: end; }
.pk-how--js .pk-how__bodies .pk-how__body { grid-area: 1 / 1; align-self: end; }
.pk-how--js .pk-how__bodies[data-ready] .pk-how__body {
  opacity: 0;
  transition: opacity var(--pk-how-fade) var(--pk-ease);
}
.pk-how--js .pk-how__bodies[data-ready] .pk-how__body[data-shown] { opacity: 1; }
.pk-how__body[hidden] { display: none; }
/* Enhanced, an inactive step keeps its BOX and loses only its paint. The three
   bodies share one grid cell, so that cell — and with it the dark panel — is as
   tall as the longest of the three at the current width, and stays that height
   whichever step is showing. Taking the inactive ones out of the layout instead
   would resize the panel WHILE IT IS PINNED: measured at 529px its bottom edge
   moved 59px between steps (78px at 320px, 39px at 810px), which drags the
   section below it in and out of view and re-maps the scroll bands under the
   reader's finger mid-gesture. `visibility: hidden` also keeps the panel out of
   the accessibility tree, exactly as `display: none` did, so only the active
   step's <h3> is ever exposed. */
.pk-how--js .pk-how__body[hidden] { display: block; visibility: hidden; }
.pk-how__body:focus-visible { outline: 2px solid var(--pk-on-dark); outline-offset: 2px; }

.pk-how__h3 {
  margin: 0 0 var(--pk-sp-3);
  font-family: var(--pk-font-body);
  font-weight: var(--pk-fw-regular);
  font-size: var(--pk-fs-title);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-display);
  color: var(--pk-on-dark);
}
/* Enhanced, the step bar already shows the step's name, so the
   <h3> would repeat it on screen — but `display: none` would also drop it from
   the outline, and section 03 keeps its <h3>s. Same declarations as site.css's
   .pk-visually-hidden (it cannot be put in the markup: the heading is only
   redundant once the bar exists). The panel is the containing block so the
   1px box cannot travel, and hidden panels stay display:none, so exactly one
   of the three headings is exposed at a time. */
.pk-how--js .pk-how__body { position: relative; }
.pk-how--js .pk-how__h3 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pk-how__copy {
  margin: 0;
  font-size: var(--pk-fs-body);
  line-height: var(--pk-lh-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-on-dark);
}
/* a step's copy may run to a second paragraph */
.pk-how__copy + .pk-how__copy { margin-top: 0.85em; }

/* ---- tablet ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .pk-how { --pk-how-step: 60vh; --pk-how-pin-max: 1000px; }
  .pk-how__panel { flex-direction: column; }
  .pk-how--js .pk-how__panel { min-height: 0; }
  .pk-how__illo { flex: 0 0 375px; }
  /* pinned, the illustration is the one part of the stack that grows: the dark
     column keeps its content height, so its copy stays seated under the bar */
  .pk-how--js[data-scroll="on"] .pk-how__illo { flex: 1 1 375px; min-height: 200px; }
  .pk-how--js[data-scroll="on"] .pk-how__steps { flex: 0 0 auto; }
  /* No min-height below 1200: the 220/277px floors were the height Framer's own
     810 and 390 frames happened to need, and at any width in between the copy
     wraps shorter and leaves the rest of the dark panel empty (118px of it at
     529px). Content sizes the panel; the only slack left is the difference
     between the longest step and the one showing, and it goes ABOVE the copy,
     as on desktop: the copy keeps its seat on the panel's bottom edge, so the
     space under it is the same 20px on every step and never reads as a hole. */
  .pk-how--js .pk-how__bodies { align-content: end; }
  .pk-how__tabtitle { font-size: var(--pk-fs-lead); }
  .pk-how__num { font-size: 22px; }
  .pk-how__copy, .pk-how__h3 { font-size: var(--pk-fs-small); }
  .pk-how__h3 { font-size: var(--pk-fs-lead); }
}

/* ---- phone -------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .pk-how { --pk-how-step: 58vh; --pk-how-bar-h: 60px; --pk-how-pin-max: 820px; }
  /* Framer's phone variant sets the title as one paragraph, no hard break */
  .pk-how__title br { display: none; }
  .pk-how__illo { flex: 0 0 180px; }
  .pk-how--js[data-scroll="on"] .pk-how__illo { flex: 1 1 180px; min-height: 130px; }
  .pk-how__tab { padding: 0 var(--pk-sp-5); gap: var(--pk-sp-2); }
  .pk-how__num { font-size: var(--pk-fs-lead); }
  .pk-how__tab[aria-selected="true"] .pk-how__num { font-size: 28px; }
  .pk-how__tabtitle, .pk-how__h3 { font-size: 15px; }
}

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pk-how__tab,
  .pk-how__num,
  .pk-how--js .pk-how__bodies[data-ready] .pk-how__body { transition: none; }
}

/* ==== why ==== */
/* Section 03 "Why Plek".
   Desktop: a 1078x370 panel, rail to rail between two full-bleed rules — 40%
   light cell carrying the segmented toggle (top) and the active state's title
   and copy (bottom), 60% illustration on the light weave ground. The panel is
   sticky inside .pk-why__track; why.js maps the scroll position of that track
   onto the active state, and the same state is reachable from the toggle.
   Tablet/phone stack the illustration above the light cell.
   Every rule that hides or stacks part of the copy hangs off `.pk-why--js`,
   which why.js adds to this section only once its own init has finished. Never
   off a document-level "scripting is on" flag: scripting being on says nothing
   about whether home.js loaded, and a flag set in <head> would collapse this
   section for good if it did not. A script that never runs therefore leaves the
   toggle and the illustration out, and both states read as stacked headed
   blocks. */

.pk-why {
  --pk-why-step: 64vh;               /* scroll runway given to each state */
  --pk-why-panel-h: 370px;
  --pk-why-fade: 220ms;
  scroll-margin-top: 100px;
}
/* The section's bottom spacing is an element inside a .pk-col, never padding on
   the section: padding on the section sits OUTSIDE the column, and the column
   is what carries the two vertical rails, so it would cut them for
   --pk-section-pad between this section and the next. */
.pk-why__tail { height: var(--pk-section-pad); }

/* ---- sticky track ------------------------------------------------------- */
/* The runway is a real element, not padding on the track: a sticky box is
   confined to its containing block's CONTENT box, so padding would give it
   nowhere to travel. Framer does the same thing with empty scroll-target blocks
   under the sticky frame.
   It is also a .pk-col, for the same reason as the tail: it is up to 128vh of
   the page and the rails have to run through it. */
.pk-why__track { position: relative; }
.pk-why__sticky { background: var(--pk-ground); }
.pk-why__runway { height: 0; }

.pk-why--js[data-scroll="on"] .pk-why__runway {
  height: calc(2 * var(--pk-why-step));
}
.pk-why--js[data-scroll="on"] .pk-why__sticky {
  position: sticky;
  top: var(--pk-nav-offset);
}

/* ---- pinned: the block takes the height the viewport has ------------------ */
/* The same rule as section 02, for the same reasons (see there): pinned, the
   block has the height of the viewport under the nav less a 32px breath, the
   panel takes what the heading leaves, and the illustration gives or takes the
   difference down to a floor; past it why.js leaves the section unpinned. */
.pk-why { --pk-why-pin-max: calc(170px + 0.5 * min(90vw, 1440px)); }
.pk-why--js[data-scroll="on"] .pk-why__sticky {
  display: flex;
  flex-direction: column;
  height: min(calc(100vh - var(--pk-nav-offset) - 32px), var(--pk-why-pin-max));
  height: min(calc(100svh - var(--pk-nav-offset) - 32px), var(--pk-why-pin-max));
}
.pk-why--js[data-scroll="on"] .pk-why__row,
.pk-why--js[data-scroll="on"] .pk-why__row > .pk-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pk-why--js[data-scroll="on"] .pk-why__panel { flex: 1 1 auto; min-height: 0; }
.pk-why--js[data-scroll="on"] .pk-why__illo { min-height: 260px; }   /* the floor */

/* ---- the panel ---------------------------------------------------------- */
.pk-why__row {
  border-top: 1px solid var(--pk-rule);
  border-bottom: 1px solid var(--pk-rule);
}

.pk-why__panel {
  display: flex;
  gap: 1px;                          /* the 1px seam shows the row rule colour */
  background: var(--pk-rule);
  border-radius: var(--pk-radius);
  overflow: hidden;
}
/* min-height, never height: a browser minimum-font-size (or a longer state body
   after a copy edit) has to push the panel taller rather than be cut off by the
   overflow:hidden that draws the rounded corners. why.js re-measures the sticky
   box whenever that height can change, so the scroll maths follows. */
.pk-why--js .pk-why__panel { min-height: var(--pk-why-panel-h); }

.pk-why__cell {
  flex: 0 0 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pk-sp-6);
  padding: var(--pk-sp-6);
  background: var(--pk-surface);
}

.pk-why__illo {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.pk-why__illo .pk-lattice { position: absolute; inset: 0; }
/* the lattice SVG is cropped like object-fit: cover, and mid-transition
   cubes can travel past the mount, so the mount clips them */
.pk-why__illo, .pk-why__illo .pk-lattice { overflow: hidden; }
/* Until why.js has taken the section over, the illustration goes and the cell
   takes the whole panel: the lattice only ever changes scene because this
   section tells it to, so an unenhanced panel would pin one frame of a
   two-frame diagram next to copy it no longer matches. */
.pk-why:not(.pk-why--js) .pk-why__illo { display: none; }
.pk-why:not(.pk-why--js) .pk-why__cell { flex: 1 1 auto; }
.pk-why:not(.pk-why--js) .pk-why__bodies { max-width: 760px; }

/* ---- segmented toggle (tablist) ----------------------------------------- */
/* a tablist nothing is listening to is worse than no tablist, so the toggle
   only appears once why.js has wired it */
.pk-why__toggle { display: none; }
.pk-why--js .pk-why__toggle {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  flex: 0 0 auto;
  max-width: 100%;
  border: 1px solid var(--pk-charcoal);
}

.pk-why__slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--pk-charcoal);
  transform: translateX(0);
  transition: transform var(--pk-dur) var(--pk-ease), width var(--pk-dur) var(--pk-ease);
}
.pk-why__toggle:not([data-slider]) .pk-why__slider { display: none; }

.pk-why__opt {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--pk-sp-1h) var(--pk-sp-3);
  border: 0;
  background: transparent;
  font-family: var(--pk-font-body);
  font-weight: var(--pk-fw-regular);
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-ui);
  color: var(--pk-ink);
  white-space: nowrap;
  cursor: pointer;
  /* instant by default, because by default the fill below is the only thing
     between the white label and the light ground */
  transition: color var(--pk-dur) var(--pk-ease), background-color 0s;
}
/* The selected option carries its own charcoal fill, unconditionally: white on
   white must be impossible whatever the slider measured, or failed to. */
.pk-why__opt[aria-selected="true"] {
  background: var(--pk-charcoal);
  color: var(--pk-on-dark);
  cursor: default;
}
/* Once why.js has a real measurement it sets data-slider, and the fill is then
   redundant while the slider travels — so it waits one slide before landing,
   and leaves with no delay at all, while the slider still covers the cell it is
   leaving. What you see is the one block travelling, as designed. why.js drops
   data-slider again the moment the toggle measures zero, and this rule with it. */
.pk-why__toggle[data-slider] .pk-why__opt[aria-selected="true"] {
  transition: color var(--pk-dur) var(--pk-ease),
              background-color 0s linear var(--pk-dur);
}
.pk-why__opt[aria-selected="false"]:hover { color: var(--pk-ink-strong); }
.pk-why__opt:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: 3px; }

/* ---- state copy --------------------------------------------------------- */
.pk-why__bodies {
  display: grid;
  gap: var(--pk-sp-7);
  align-content: start;
}
/* The stack is the enhanced layout: both bodies on one grid cell, one of them
   opaque. why.js has already chosen that one and hidden the other by the time
   it adds the class, so nothing is ever collapsed without a script behind it to
   open it again. */
.pk-why--js .pk-why__bodies .pk-why__body { grid-area: 1 / 1; }
.pk-why--js .pk-why__bodies[data-ready] .pk-why__body {
  opacity: 0;
  transition: opacity var(--pk-why-fade) var(--pk-ease);
}
.pk-why--js .pk-why__bodies[data-ready] .pk-why__body[data-shown] { opacity: 1; }
.pk-why__body[hidden] { display: none; }
/* Enhanced, the inactive state keeps its BOX and loses only its paint, so the
   stack is as tall as the longer of the two at the current width whichever one
   is showing — the same rule section 02 needs, and here it is what keeps a copy
   edit from silently reintroducing a panel that resizes while it is pinned.
   `visibility: hidden` keeps the panel out of the accessibility tree, exactly as
   `display: none` did. */
.pk-why--js .pk-why__body[hidden] { display: block; visibility: hidden; }

.pk-why__h3 {
  margin: 0 0 var(--pk-sp-5);
  font-family: var(--pk-font-body);
  font-weight: var(--pk-fw-regular);
  font-size: var(--pk-fs-h3);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-ui);
  color: var(--pk-ink);
}
.pk-why__copy {
  margin: 0;
  font-size: var(--pk-fs-body);
  line-height: var(--pk-lh-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
}

/* ---- tablet ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .pk-why { --pk-why-step: 60vh; --pk-why-pin-max: 1000px; }
  .pk-why__panel { flex-direction: column; }
  .pk-why--js .pk-why__panel { min-height: 0; }
  .pk-why__illo { order: -1; flex: 0 0 448px; }
  .pk-why__cell { flex: 1 1 auto; justify-content: flex-start; gap: var(--pk-sp-9); }
  /* pinned, the illustration is the one part of the stack that grows: the cell
     keeps its content height, so the copy never drifts away from the toggle */
  .pk-why--js[data-scroll="on"] .pk-why__illo { flex: 1 1 448px; min-height: 200px; }
  .pk-why--js[data-scroll="on"] .pk-why__cell { flex: 0 0 auto; }
  /* No min-height below 1200: the 190/210px floors were the height Framer's own
     810 and 390 frames happened to need, and at any width in between the copy
     wraps shorter and leaves the bottom of the cell empty. Toggle, gap, copy,
     then the cell's own 20px padding — nothing else. */
  /* .pk-why__opt keeps its 14px here: it is an interactive control's label,
     and the accessibility floor is 14px. */
  .pk-why__h3 { font-size: var(--pk-fs-title); margin-bottom: 14px; }
  .pk-why__copy { font-size: var(--pk-fs-small); }
  .pk-why__body { max-width: 90%; }
}

/* ---- phone -------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .pk-why { --pk-why-step: 58vh; --pk-why-pin-max: 820px; }
  /* Framer's phone variant sets the title as one paragraph, no hard break */
  .pk-why__title br { display: none; }
  .pk-why__illo { flex: 0 0 200px; }
  .pk-why--js[data-scroll="on"] .pk-why__illo { flex: 1 1 200px; min-height: 130px; }
  .pk-why__cell { gap: 28px; }
  .pk-why__body { max-width: none; }
  /* "Across Companies" plus "Intra-Company" is wider than the cell at 320px.
     The toggle is already max-width:100%, so let the two labels wrap inside it
     rather than have the panel's overflow:hidden cut the second one off. */
  .pk-why__opt { white-space: normal; }
}

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pk-why__slider,
  .pk-why__opt,
  .pk-why__toggle[data-slider] .pk-why__opt[aria-selected="true"],
  .pk-why--js .pk-why__bodies[data-ready] .pk-why__body { transition: none; }
}

/* ==== features ==== */
/* Section 04. The head sits inside the rails; the card block is a full-bleed
   band (its 1px top/bottom rules run edge to edge, as in the Framer file)
   holding a hairline grid that spans rail to rail. The 1px gaps show the band
   colour through, which is what draws the grid. No JS. */

.pk-features { scroll-margin-top: 40px; }

/* the head is two authored lines, so the shared balancer must not re-wrap it */
.pk-features__title { text-wrap: wrap; }

/* ---- the hairline card band ---- */
.pk-features__band {
  border-top: 1px solid var(--pk-rule);
  border-bottom: 1px solid var(--pk-rule);
}

.pk-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pk-rule);
  border-radius: var(--pk-radius);
  overflow: hidden;
}

.pk-features__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pk-sp-9);
  /* Framer stretches the rows to a fixed 750px section; we let content size the
     section and keep the rhythm with a floor instead. */
  min-height: 219px;
  padding: var(--pk-sp-6);
  background: var(--pk-card);
}

.pk-features__icon {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--pk-ink);
}

.pk-features__text {
  display: grid;
  gap: var(--pk-sp-5);
}

.pk-features__h {
  margin: 0;
  font: var(--pk-fw-regular) var(--pk-fs-lead)/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-strong);
}

.pk-features__p {
  margin: 0;
  font: var(--pk-fw-regular) var(--pk-fs-small)/var(--pk-lh-snug) var(--pk-font-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
}

/* the section's bottom padding, kept inside .pk-col so the rails do not break */
.pk-features__tail { height: var(--pk-section-pad); }

@media (max-width: 1199.98px) {
  .pk-features__grid { grid-template-columns: repeat(2, 1fr); }
  .pk-features__cell { min-height: 212px; }
}

@media (max-width: 809.98px) {
  .pk-features { scroll-margin-top: 60px; }
  .pk-features__grid { grid-template-columns: 1fr; }
  .pk-features__cell { min-height: 205px; gap: var(--pk-sp-8); }
}

/* ==== faq ==== */
/* Section 05. Five disclosure rows in a full-bleed band, rail to rail, with a
   1px rule between them. The open row is #F0F0F0 with a hairline under the
   question and the answer inset; closed rows are --pk-surface.

   Progressive enhancement: the served HTML has every answer in flow, and the
   collapsed state is gated on `.pk-faq--js`, which faq.js adds to this section
   at the end of its own init — never on a document-level "scripting is on"
   flag, which would collapse all five answers unreadably if home.js were then
   blocked, 404'd or thrown in. */

.pk-faq { scroll-margin-top: 60px; }

/* the head is authored as two lines on desktop; keep the shared balancer off it */
.pk-faq__title { text-wrap: wrap; }

.pk-faq__band {
  border-top: 1px solid var(--pk-rule);
  border-bottom: 1px solid var(--pk-rule);
}

/* the section's bottom padding, kept inside .pk-col so the rails do not break */
.pk-faq__tail { height: var(--pk-section-pad); }

.pk-faq__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pk-rule);
  border-radius: var(--pk-radius);
  overflow: hidden;
}

/* without JS every row is open, so they all share the one ground; the #F0F0F0
   highlight only means anything once one row can be open at a time */
.pk-faq__item {
  background: var(--pk-surface);
  transition: background-color var(--pk-dur) var(--pk-ease);
}

/* ---- the question row ---- */
.pk-faq__heading { margin: 0; font: inherit; }

.pk-faq__q {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 22px var(--pk-sp-6);
  border: 0;
  background: none;
  font: var(--pk-fw-regular) var(--pk-fs-lead)/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-strong);
  text-align: left;
  cursor: default;
}

/* the row is the whole button, so the ring goes inside it — the list clips
   anything drawn outside its rounded box */
.pk-faq__q:focus-visible {
  outline: 2px solid var(--pk-ink);
  outline-offset: -3px;
  border-radius: var(--pk-radius);
}

.pk-faq__n {
  flex: none;
  padding: 0 var(--pk-sp-1);
  margin-right: 28px;
}

.pk-faq__qt {
  /* auto width, as in Framer: the glyph is pushed right by its own auto margin
     and the longest question has to stay on one line down to 810 */
  flex: 0 1 auto;
  min-width: 0;
}

.pk-faq__glyph {
  display: none;
  flex: none;
  margin-left: auto;
  width: 24px;
  height: 24px;
  color: var(--pk-ink-strong);
}
.pk-faq__glyph svg { display: block; width: 100%; height: 100%; }

/* plus -> minus: the upright stroke turns onto the flat one and fades out */
.pk-faq__bar {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform var(--pk-dur) var(--pk-ease), opacity var(--pk-dur) var(--pk-ease);
}
.pk-faq__item--open .pk-faq__bar {
  transform: rotate(90deg);
  opacity: 0;
}

/* ---- the answer ---- */
.pk-faq__panel {
  display: grid;
  grid-template-rows: 1fr;   /* no-JS: open */
}
.pk-faq__panel-in {
  min-height: 0;
  overflow: hidden;
}

.pk-faq__a {
  /* the question button already carries 22px of bottom padding and Framer puts
     12px between the question and the rule, so pull 10px back */
  margin: -10px 20px 22px;
  padding: 18px 61px 0;
  border-top: 1px solid var(--pk-rule);
  font: var(--pk-fw-regular) var(--pk-fs-small)/var(--pk-lh-snug) var(--pk-font-body);
  letter-spacing: var(--pk-ls-body);
  color: rgba(0, 0, 0, 0.8);
}
.pk-faq__a p { margin: 0; }
.pk-faq__a p + p { margin-top: var(--pk-sp-4); }

/* ---- enhanced state ---- */
.pk-faq--js .pk-faq__item--open { background: var(--pk-card); }

.pk-faq--js .pk-faq__glyph { display: block; }

.pk-faq--js .pk-faq__q { cursor: pointer; }

.pk-faq--js .pk-faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.pk-faq--js .pk-faq__item--open .pk-faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* faq.js adds --anim one frame after --js so the first collapse does not animate */
.pk-faq--anim .pk-faq__panel {
  transition: grid-template-rows var(--pk-dur) var(--pk-ease), visibility 0s linear var(--pk-dur);
}
.pk-faq--anim .pk-faq__item--open .pk-faq__panel {
  transition: grid-template-rows var(--pk-dur) var(--pk-ease), visibility 0s;
}

@media (max-width: 809.98px) {
  .pk-faq__br { display: none; }

  .pk-faq__q {
    padding: var(--pk-sp-5) 14px;
    font-size: var(--pk-fs-small);
  }
  .pk-faq__n { margin-right: var(--pk-sp-2); }
  .pk-faq__qt { margin-right: var(--pk-sp-2); }

  .pk-faq__a {
    /* 16px of button padding above, 12px wanted before the rule */
    margin: -4px 14px 16px;
    padding: 18px var(--pk-sp-7) 0 33px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-faq__item,
  .pk-faq__bar,
  .pk-faq--anim .pk-faq__panel,
  .pk-faq--anim .pk-faq__item--open .pk-faq__panel { transition: none; }
}

/* ==== cta ==== */
/* Closing band: the section padding lives inside .pk-col so the rails stay
   unbroken above and below the navy block. */

.pk-cta { background: var(--pk-ground); }

.pk-cta > .pk-col { padding: var(--pk-sp-9) 0 var(--pk-sp-11); }

.pk-cta__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-sp-9);
  min-height: 218px;
  padding: var(--pk-sp-10);
  border-radius: var(--pk-radius);
}

/* Inter Light at display size — not .pk-h2 (Space Grotesk), which is the
   section-title role; this band is the one Inter headline in the design. */
.pk-cta__title {
  margin: 0;
  color: var(--pk-on-dark);
  font: var(--pk-fw-light) 50px/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: 0;
  text-wrap: balance;
}

/* Light control on the dark ground; .pk-btn carries the shape and motion. */
.pk-cta__btn {
  background: var(--pk-surface);
  color: var(--pk-ink-2);
  border-radius: 3px;
}
.pk-cta__btn:hover { background: var(--pk-card); color: var(--pk-ink); }

/* ---- tablet: still one row, as in the design (46px headline beside the
   button). The design's row has zero slack, so it is allowed to wrap: the
   button drops under the headline instead of overflowing if the copy grows. */
@media (max-width: 1199.98px) {
  .pk-cta > .pk-col { padding: var(--pk-sp-8) 0 64px; }
  .pk-cta__band { flex-wrap: wrap; gap: var(--pk-sp-8) var(--pk-sp-9); min-height: 0; }
  .pk-cta__title { flex: 1 1 12ch; font-size: 46px; }
}

/* ---- phone: the headline stacks above the button ---- */
@media (max-width: 809.98px) {
  .pk-cta > .pk-col { padding: var(--pk-sp-6) 0 var(--pk-sp-9); }
  .pk-cta__band { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 50px; padding: var(--pk-sp-6); }
  .pk-cta__title { flex: 0 1 auto; font-size: 32px; }
}
} /* @layer pages */

/* Organization intelligence story and security proof points. */
@layer pages {
  .pk-hero > .pk-col { gap: var(--pk-sp-8); min-height: auto; padding-bottom: calc(var(--pk-sp-1) * 14); }
  .pk-hero__top { grid-template-columns: minmax(0, 760px) minmax(0, 360px); min-height: 360px; column-gap: var(--pk-sp-8); }
  .pk-hero__title { font-size: clamp(calc(var(--pk-fs-body) * 2.25), 4.15vw, calc(var(--pk-fs-body) * 3.75)); letter-spacing: -0.05em; line-height: calc(var(--pk-lh-tight) * 14 / 15); }
  .pk-hero__line { text-wrap: balance; }
  .pk-hero__aside { justify-content: flex-start; gap: var(--pk-sp-7); }
  .pk-hero__lead { line-height: calc(var(--pk-lh-tight) * 1.25); text-align: left; }
  .pk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pk-sp-2); }
  .pk-trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-sp-4); padding: 0 var(--pk-sp-3); }
  .pk-trust__intro { color: var(--pk-muted); margin-right: auto; font-size: var(--pk-fs-ui); letter-spacing: -0.02em; }
  .pk-trust .pk-btn { font-size: var(--pk-fs-ui); letter-spacing: -0.02em; }
  .pk-hero__scroll { align-self: flex-start; margin-left: var(--pk-sp-3); }
  .pk-security__lead { max-width: 570px; margin: 0; font-size: calc(var(--pk-fs-body) * 1.0625); letter-spacing: -0.02em; }
  .pk-security__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--pk-rule); }
  .pk-security__grid article { display: flex; flex-direction: column; align-items: flex-start; padding: calc(var(--pk-sp-1) * 9) calc(var(--pk-sp-1) * 7); }
  .pk-security__grid article + article { border-left: 1px solid var(--pk-rule); }
  .pk-security__mark { color: var(--pk-muted); font-size: var(--pk-fs-ui); letter-spacing: -0.02em; }
  .pk-security__grid h3 { font-size: calc(var(--pk-fs-body) * 1.75); font-weight: var(--pk-fw-regular); letter-spacing: -0.04em; margin: calc(var(--pk-sp-1) * 7) 0 var(--pk-sp-5); }
  .pk-security__grid p { font-size: calc(var(--pk-fs-body) * 0.9375); letter-spacing: -0.02em; line-height: var(--pk-lh-long); margin: 0 0 calc(var(--pk-sp-1) * 7); }
  .pk-security__grid .pk-btn { margin-top: auto; }
  @media (max-width: 1199.98px) {
    .pk-hero__top { min-height: auto; padding-top: calc(var(--pk-sp-1) * 30); }
    .pk-hero__intro { max-width: 800px; }
    .pk-hero__aside { max-width: 600px; }
    .pk-trust { padding-inline: calc(var(--pk-sp-1) * 10.5); }
    .pk-trust__intro { flex-basis: 100%; }
  }
  @media (max-width: 809.98px) {
    .pk-hero__top { padding-top: calc(var(--pk-sp-1) * 28); }
    .pk-hero__chip { font-size: calc(var(--pk-fs-body) * 0.6875); letter-spacing: -0.02em; padding-inline: var(--pk-sp-2); }
    .pk-hero__title { font-size: clamp(calc(var(--pk-fs-body) * 2), 7vw, calc(var(--pk-fs-body) * 3)); }
    .pk-trust { padding-inline: var(--pk-sp-6); gap: var(--pk-sp-2); }
    .pk-trust .pk-btn { padding-inline: var(--pk-sp-2); font-size: var(--pk-fs-caption); }
    .pk-security__grid { grid-template-columns: minmax(0, 1fr); }
    .pk-security__grid .pk-btn { max-width: 100%; white-space: normal; }
    .pk-security__grid article + article { border-left: 0; border-top: 1px solid var(--pk-rule); }
    .pk-security__grid article { padding: calc(var(--pk-sp-1) * 7) var(--pk-sp-6); }
  }
}