/* ==========================================================================
   Plek Design System v6 — components
   --------------------------------------------------------------------------
   The marketing layer: the skip link, controls, chips, toggles, the nav rail,
   card grids, panels, disclosure rows, the testimonial, the closing band and
   the footer.
   Load order: tokens.css -> base.css -> components.css (-> app.css).

   Sources. Geometry and states are the Framer project "Plek copy" (components
   btn, Nav Buttons, Navbar 2, tab, FAQ, test, Footer, case studies card,
   feature card, problem_card, btn next-pre, How it work Static); the solutions
   are the reviewed Django port (landing/static/landing/site.css + home.css),
   renamed to the pk- contract in CONTRIBUTING.md §5 and re-expressed in tokens.

   House rules honored here: tokens only (no raw hex, font size, radius or
   duration), no shadows, no gradients, no radius above --pk-radius, no looping
   animation, real elements with visible focus. Every transition is a change
   between two states and is switched off under prefers-reduced-motion.

   Numbers that are NOT tokens and are deliberately literal: box dimensions
   (cell heights, icon boxes, panel floors) and the fine 6/10px control padding
   the Framer file uses for chips. Tokens cover color, type, radius, duration
   and the 4/8/10/20/40/60 space rhythm; a 39px nav cell is geometry, not a
   spacing step.

   SPECIFICITY. A modifier that paints ink is written chained to its block
   (`.pk-btn.pk-btn--solid`, `.pk-nav .pk-nav__link`) rather than alone. These
   components are dropped into host pages — a CMS's prose styles, a docs shell,
   an app frame — that routinely color bare descendants (`a`, `p`, `li`,
   `h2`, `h3`) at one class plus one type. A single-class modifier loses to
   that and a solid button silently turns into link-blue on charcoal. The chain
   costs nothing and makes a component's own ink non-negotiable. Layout,
   spacing and shape are left at one class: a host is welcome to reflow them.
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   --------------------------------------------------------------------------
   One shape, four grounds. Framer: Inter 500 16px/-0.04em, 10px 20px, 2px
   radius, spring on the fill. Solid is the page's single primary action and
   turns navy on hover; ghost is the bordered secondary; quiet is the
   borderless surface control (the rail's "Sign in"); on-dark is the light
   control that sits on the navy weave band.
   ========================================================================== */

.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-sp-2);
  padding: var(--pk-sp-3) var(--pk-sp-6);
  border: var(--pk-line) solid transparent;
  border-radius: var(--pk-radius-s);
  font-family: var(--pk-font-body);
  font-size: var(--pk-fs-body);
  font-weight: 500;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease),
              border-color var(--pk-dur) var(--pk-ease);
}

/* the one primary action per view */
.pk-btn.pk-btn--solid { background: var(--pk-charcoal); color: var(--pk-on-dark); }
.pk-btn.pk-btn--solid:hover { background: var(--pk-navy); color: var(--pk-on-dark); }
.pk-btn.pk-btn--solid:active { background: var(--pk-charcoal-2); }

/* bordered secondary. The border is --pk-control-border, not the design's
   #E0E0E0 rule: a line that bounds a control has to clear 3:1 (WCAG 1.4.11). */
.pk-btn.pk-btn--ghost {
  background: var(--pk-surface);
  color: var(--pk-ink-2);
  border-color: var(--pk-control-border);
}
.pk-btn.pk-btn--ghost:hover { background: var(--pk-card); color: var(--pk-ink); }
.pk-btn.pk-btn--ghost:active { background: var(--pk-card-hover); }

/* borderless surface control: the rail's "Sign in", a panel's tertiary action */
.pk-btn.pk-btn--quiet {
  background: var(--pk-surface);
  color: var(--pk-muted);
  font-weight: 400;
}
.pk-btn.pk-btn--quiet:hover { background: var(--pk-card); color: var(--pk-ink); }
.pk-btn.pk-btn--quiet:active { background: var(--pk-card-hover); }

/* light control on a navy or charcoal ground — the closing band's CTA */
.pk-btn.pk-btn--on-dark { background: var(--pk-surface); color: var(--pk-ink-2); }
.pk-btn.pk-btn--on-dark:hover { background: var(--pk-card); color: var(--pk-ink); }
.pk-btn.pk-btn--on-dark:active { background: var(--pk-card-hover); }

.pk-btn--sm {
  padding: var(--pk-sp-2) var(--pk-sp-4);
  font-size: var(--pk-fs-small);
  letter-spacing: var(--pk-ls-body);
}

/* Disabled is a real state, not a dimmed one: opacity would take the label
   under 4.5:1. Card ground, muted ink, no pointer. */
.pk-btn.pk-btn[disabled],
.pk-btn.pk-btn[aria-disabled="true"] {
  background: var(--pk-card);
  color: var(--pk-muted);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* a 16px glyph riding the label; inherits the button's color */
.pk-btn__icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  color: currentColor;
}

/* ---- square icon button (Framer "btn next-pre": 48px, prev / next) ------- */
.pk-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--pk-line) solid var(--pk-control-border);
  border-radius: var(--pk-radius-s);
  background: var(--pk-surface);
  color: var(--pk-ink);
  cursor: pointer;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease),
              border-color var(--pk-dur) var(--pk-ease);
}
.pk-iconbtn:hover { background: var(--pk-card); }
.pk-iconbtn:active { background: var(--pk-card-hover); }
.pk-iconbtn.pk-iconbtn--solid {
  background: var(--pk-charcoal);
  border-color: var(--pk-charcoal);
  color: var(--pk-on-dark);
}
.pk-iconbtn.pk-iconbtn--solid:hover { background: var(--pk-navy); border-color: var(--pk-navy); }
.pk-iconbtn.pk-iconbtn--solid:active { background: var(--pk-charcoal-2); border-color: var(--pk-charcoal-2); }
.pk-iconbtn--sm { width: 32px; height: 32px; }
.pk-iconbtn.pk-iconbtn[disabled],
.pk-iconbtn.pk-iconbtn[aria-disabled="true"] {
  background: var(--pk-card);
  border-color: var(--pk-rule);
  color: var(--pk-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   2. TAGS AND BADGES
   --------------------------------------------------------------------------
   The system has exactly two static chips. .pk-tag is the 0.5px hairline
   outline the case-study cards wear ("Enterprise", "Consulting"); .pk-badge is
   the filled card-gray cell the hero wears ("Backed by Y Combinator").
   Neither is interactive, so neither has a hover state.
   ========================================================================== */

.pk-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-sp-2);
  margin: 0;
  padding: var(--pk-sp-1h);
  border: var(--pk-hairline) solid var(--pk-control-border);
  font-family: var(--pk-font-body);
  font-size: var(--pk-fs-caption);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink);
  transition: color var(--pk-dur) var(--pk-ease),
              border-color var(--pk-dur) var(--pk-ease);
}
.pk-tag.pk-tag--on-dark { border-color: var(--pk-on-dark-rule); color: var(--pk-on-dark); }

.pk-badge {
  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);
  font-family: var(--pk-font-display);
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-ui);
  color: var(--pk-ink);
}
.pk-badge > svg { display: block; flex: none; }

/* ==========================================================================
   3. SEGMENTED TOGGLE
   --------------------------------------------------------------------------
   Two or three mutually exclusive views of one block ("Intra-Company" /
   "Across Companies"). Markup: role="tablist" on .pk-seg, role="tab" +
   aria-selected + aria-controls on each .pk-seg__btn, and a [hidden] panel per
   option. The SELECTED option carries its own charcoal fill unconditionally —
   white on white must be impossible whatever a slider measured, so there is no
   slider here at all, only the fill.
   ========================================================================== */

.pk-seg {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  border: var(--pk-line) solid var(--pk-charcoal);
  border-radius: var(--pk-radius-s);
}

.pk-seg__btn {
  margin: 0;
  padding: var(--pk-sp-1h) var(--pk-sp-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--pk-font-body);
  font-size: var(--pk-fs-small);
  font-weight: 400;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-ui);
  color: var(--pk-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease);
}
.pk-seg__btn:first-child { border-start-start-radius: var(--pk-radius-s); border-end-start-radius: var(--pk-radius-s); }
.pk-seg__btn:last-child  { border-start-end-radius: var(--pk-radius-s); border-end-end-radius: var(--pk-radius-s); }
.pk-seg__btn[aria-selected="true"] {
  background: var(--pk-charcoal);
  color: var(--pk-on-dark);
  cursor: default;
}
.pk-seg__btn[aria-selected="false"]:hover { color: var(--pk-ink-strong); background: var(--pk-card); }
.pk-seg__btn:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: 3px; }
.pk-seg__btn[disabled] { color: var(--pk-muted); cursor: not-allowed; pointer-events: none; }

/* The dense variant keeps the 6px block padding of the full-size cell, so a
   12px label still rides a 26px control: a segment is a target, and 24x24 CSS
   px is the floor (WCAG 2.5.8). Only the inline padding tightens. */
.pk-seg--sm .pk-seg__btn {
  padding: var(--pk-sp-1h) var(--pk-sp-2);
  font-size: var(--pk-fs-caption);
  letter-spacing: var(--pk-ls-ui);
}

/* on a dark panel the outline and the resting label invert */
.pk-seg--on-dark { border-color: var(--pk-on-dark-rule); }
.pk-seg--on-dark .pk-seg__btn { color: var(--pk-on-dark); }
.pk-seg--on-dark .pk-seg__btn[aria-selected="true"] { background: var(--pk-on-dark); color: var(--pk-ink-strong); }
.pk-seg--on-dark .pk-seg__btn[aria-selected="false"]:hover { background: var(--pk-navy-2); color: var(--pk-on-dark); }

/* ==========================================================================
   4. STEP TABS
   --------------------------------------------------------------------------
   The "How It Works" bar: numbered cells over a charcoal panel. The active
   cell takes the width its neighbors give up, turns charcoal and grows its
   numeral; inactive cells are light and show the numeral only, keeping their
   name for assistive technology.

   Markup:
     .pk-tabs               block
       .pk-tabs__list       role="tablist"
         .pk-tabs__tab      <button role="tab" aria-selected aria-controls id>
           .pk-tabs__n      Space Mono numeral, aria-hidden
           .pk-tabs__text     .pk-tabs__title + .pk-tabs__dur
       .pk-tabs__panel      <div role="tabpanel" aria-labelledby tabindex="0" [hidden]>
   .pk-tabs__list exists because a tabpanel may not live inside a tablist; the
   three contract names (.pk-tabs, .pk-tabs__tab, .pk-tabs__panel) are intact.
   ========================================================================== */

.pk-tabs {
  display: flex;
  flex-direction: column;
  border-radius: var(--pk-radius);
  background: var(--pk-charcoal);
  overflow: hidden;
}

.pk-tabs__list {
  display: flex;
  flex: none;
  align-items: stretch;
  min-height: 70px;
}

.pk-tabs__tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--pk-sp-3);
  min-width: 0;
  margin: 0;
  padding: 0 var(--pk-sp-6);
  border: 0;
  border-right: var(--pk-line) solid var(--pk-rule);
  background: var(--pk-surface);
  font-family: var(--pk-font-body);
  text-align: left;
  cursor: pointer;
  transition: flex-grow var(--pk-dur) var(--pk-ease),
              background-color var(--pk-dur) var(--pk-ease);
}
.pk-tabs__tab:last-child { border-right: 0; }
.pk-tabs__tab[aria-selected="true"] {
  flex-grow: 1;
  background: var(--pk-charcoal);
  border-right-color: transparent;
  cursor: default;
}
/* the light cells round where they meet the dark active cell */
.pk-tabs__tab[aria-selected="true"] + .pk-tabs__tab { border-end-start-radius: var(--pk-radius); }
.pk-tabs__tab:has(+ [aria-selected="true"]) { border-end-end-radius: var(--pk-radius); border-right-color: transparent; }
.pk-tabs__tab[aria-selected="false"]:hover { background: var(--pk-card); }
.pk-tabs__tab:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: -5px; }
.pk-tabs__tab[aria-selected="true"]:focus-visible { outline-color: var(--pk-on-dark); }

.pk-tabs__n {
  flex: none;
  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-ink-2);
  transition: font-size var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease);
}
.pk-tabs__tab[aria-selected="true"] .pk-tabs__n {
  font-size: var(--pk-fs-h2);
  color: var(--pk-on-dark);
}

.pk-tabs__text { display: block; min-width: 0; }
.pk-tabs__title {
  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);
}
.pk-tabs__dur {
  display: block;
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-body);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-display);
  color: var(--pk-sky);
}
/* an inactive cell keeps its name for assistive tech and shows only the numeral */
.pk-tabs__tab[aria-selected="false"] .pk-tabs__text {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pk-tabs__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--pk-sp-4);
  padding: var(--pk-sp-6);
  color: var(--pk-on-dark);
}
.pk-tabs__panel[hidden] { display: none; }
.pk-tabs__panel:focus-visible { outline: 2px solid var(--pk-on-dark); outline-offset: -4px; }
/* prose inside the dark panel keeps the panel's ink, whatever the host page
   says about a bare <p> */
.pk-tabs .pk-tabs__panel p,
.pk-tabs .pk-tabs__panel li { color: inherit; max-width: none; }

/* ==========================================================================
   5. NAV RAIL
   --------------------------------------------------------------------------
   A floating rail of bordered cells, not a bar. Each group's own --pk-rule
   background shows through 1px of padding and the 1px gaps, so the frame and
   the dividers between cells are the same pixel and a cell can come or go
   without restating a border.

   Markup:
     <nav class="pk-nav" aria-label="Primary">
       <div class="pk-nav__links">  <a class="pk-nav__brand">…</a>
                                    <a class="pk-nav__link">…</a> … </div>
       <div class="pk-nav__actions"><a class="pk-nav__link pk-nav__link--quiet">Sign in</a>
                                    <a class="pk-nav__link pk-nav__link--cta">Book a Demo</a>
                                    <button class="pk-iconbtn pk-nav__toggle" aria-label="Open menu"
                                            aria-expanded="false"
                                            aria-controls="nav-menu">…</button> </div>
       <div class="pk-nav__menu" id="nav-menu" hidden>… the same cells, stacked …</div>
     </nav>
   No aria-current on the section links: they are in-page anchors, and
   aria-current="page" names the current DOCUMENT, not the section in view.
   ========================================================================== */

.pk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-sp-4);
  font-family: var(--pk-font-body);
}
/* the real page position: floating --pk-nav-top below the viewport top. The
   middle of the rail is empty and the page scrolls behind it, so only the
   cell groups take the pointer. */
.pk-nav--fixed {
  position: fixed;
  top: var(--pk-nav-top);
  left: 50%;
  z-index: var(--pk-z-nav);
  width: 89%;
  max-width: 1420px;
  transform: translateX(-50%);
  pointer-events: none;
}
.pk-nav--fixed > * { pointer-events: auto; }

.pk-nav__links,
.pk-nav__actions {
  display: flex;
  align-items: stretch;
  gap: var(--pk-line);
  margin: 0;
  padding: var(--pk-line);
  border-radius: var(--pk-radius-s);
  background: var(--pk-rule);
  list-style: none;
}

.pk-nav__brand,
.pk-nav__link {
  display: inline-flex;
  align-items: center;
  height: calc(var(--pk-nav-h) - 2px);   /* 39px cells inside a 1px frame */
  padding: 0 var(--pk-sp-6);
  border: 0;
  border-radius: var(--pk-radius-s);
  background: var(--pk-surface);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease);
}

.pk-nav .pk-nav__brand { flex: none; color: var(--pk-ink); line-height: 0; }
.pk-nav__brand > svg { display: block; height: 27px; width: auto; }

/* Destinations are the display face, as in the rail; "Sign in" is a control,
   so --quiet puts it back on Inter. */
.pk-nav .pk-nav__link {
  color: var(--pk-muted);
  font-family: var(--pk-font-display);
  font-size: var(--pk-fs-body);
  font-weight: 400;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
}
.pk-nav .pk-nav__link:hover,
.pk-nav .pk-nav__link:focus-visible { background: var(--pk-card); color: var(--pk-ink); }

.pk-nav__link--quiet { font-family: var(--pk-font-body); }

/* --cta is NOT composed on .pk-btn--solid, and that is deliberate. It is a
   cell in a hairline rail, not a free-standing button: its height is the
   rail's (39px inside a 1px frame), its inline padding is the rail's
   --pk-sp-6, it has no border of its own because the group's --pk-rule ground
   draws every divider, and it must stay a sibling of the other cells for the
   `display: contents` collapse below 1200px to work. What it borrows from the
   solid button is the one thing that carries meaning — charcoal to navy on
   hover — and that is restated here, in two declarations, rather than fighting
   .pk-btn's padding, border and radius with four overrides. If the two ever
   disagree, .pk-btn--solid is the source of truth and this follows it. */
.pk-nav .pk-nav__link--cta {
  background: var(--pk-charcoal);
  color: var(--pk-on-dark);
  font-family: var(--pk-font-body);
  font-weight: 500;
}
.pk-nav .pk-nav__link--cta:hover,
.pk-nav .pk-nav__link--cta:focus-visible { background: var(--pk-navy); color: var(--pk-on-dark); }

/* ---- the disclosure controller ----
   Composed on .pk-iconbtn — the markup is
   `<button class="pk-iconbtn pk-nav__toggle" aria-label aria-expanded
   aria-controls>` — so the rail does not restate an icon button: the surface
   fill, the hover and active tints, the radius, the cursor and the transition
   all come from the component. What is left here is the rail's own geometry: a
   cell is as tall as the rail and only as wide as its bars, and it carries no
   border because the group's --pk-rule ground already draws every divider. */
.pk-nav .pk-nav__toggle {
  flex-direction: column;
  gap: var(--pk-sp-1);
  width: auto;
  height: calc(var(--pk-nav-h) - 2px);   /* 39px cell inside the 1px frame */
  padding: 0 13px;
  border: 0;
}
.pk-nav__toggle > span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: opacity var(--pk-dur) var(--pk-ease), transform var(--pk-dur) var(--pk-ease);
}
.pk-nav__toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.pk-nav__toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pk-nav__toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- the disclosure panel ----
   A sibling cell on the rail's second line, not a full-screen sheet: the bar
   grows downward into one card over the page the reader is mid-read of. */
.pk-nav__menu {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: var(--pk-sp-7);
  padding: var(--pk-sp-6);
  border: var(--pk-line) solid var(--pk-rule);
  border-radius: var(--pk-radius);
  background: var(--pk-ground);
}
.pk-nav__menu[hidden] { display: none; }
.pk-nav__menu .pk-nav__links,
.pk-nav__menu .pk-nav__actions { display: flex; flex-direction: column; }
.pk-nav__menu .pk-nav__link { justify-content: center; }

/* Above the breakpoint the rail shows everything and the controller is gone.
   --compact opts a rail into the narrow layout at any width: it is what a
   sidebar-width container, and this library's own stage, need. */
@media (min-width: 1200px) {
  .pk-nav:not(.pk-nav--compact) > .pk-nav__actions > .pk-nav__toggle { display: none; }
  .pk-nav:not(.pk-nav--compact) > .pk-nav__menu { display: none !important; }
}

/* Below it, one frame around the whole bar: `display: contents` dissolves the
   two groups so their surviving cells become items of that single frame. */
@media (max-width: 1199.98px) {
  .pk-nav {
    gap: var(--pk-line);
    padding: var(--pk-line);
    border-radius: var(--pk-radius-s);
    background: var(--pk-rule);
  }
  .pk-nav--fixed { pointer-events: auto; }
  .pk-nav > .pk-nav__links,
  .pk-nav > .pk-nav__actions { display: contents; }
  .pk-nav .pk-nav__brand { flex: 1 1 auto; }   /* (0,2,0): must beat the desktop `.pk-nav .pk-nav__brand { flex: none }` */
  .pk-nav > .pk-nav__links > .pk-nav__link,
  .pk-nav > .pk-nav__actions > .pk-nav__link { display: none; }
  /* the panel draws its own frame, so the bar gives up the field behind it */
  .pk-nav:has(> .pk-nav__menu:not([hidden])) { background: transparent; }
}

.pk-nav--compact {
  gap: var(--pk-line);
  padding: var(--pk-line);
  border-radius: var(--pk-radius-s);
  background: var(--pk-rule);
  pointer-events: auto;
}
.pk-nav--compact > .pk-nav__links,
.pk-nav--compact > .pk-nav__actions { display: contents; }
.pk-nav--compact > .pk-nav__links > .pk-nav__brand { flex: 1 1 auto; }
.pk-nav--compact > .pk-nav__links > .pk-nav__link,
.pk-nav--compact > .pk-nav__actions > .pk-nav__link { display: none; }
.pk-nav--compact:has(> .pk-nav__menu:not([hidden])) { background: transparent; }

/* ==========================================================================
   6. CARD GRID
   --------------------------------------------------------------------------
   Cards are cells in the page's drafted grid, not floating objects: the grid's
   own --pk-rule background shows through 1px of padding and 1px gaps, so every
   hairline is the same pixel and only the OUTER corners are rounded.

   A marketing card is icon top-left, copy bottom-left, in a tall cell
   (--pk-card-min-h). At most one card per row may be --dark — a row may have
   none — and that, plus the hero's navy second line and navy label numerals,
   is all the emphasis the system has.
   Use --bleed when the row runs rail to rail inside a .pk-band.
   ========================================================================== */

.pk-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pk-line);
  margin: 0;
  padding: var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-rule);
  list-style: none;
  overflow: hidden;
}
.pk-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* rail to rail: the band above and below already draws the outer rules */
.pk-cards--bleed { padding: 0; border-radius: 0; }
/* A grid cell is not prose. A host page that caps `li` to a reading measure
   (72ch is the usual one) would otherwise stop a wide cell short of its track. */
.pk-cards > .pk-card { max-width: none; }

.pk-card {
  --pk-card-copy-lines: 3;   /* the copy floor; see THE COPY FLOOR below */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pk-sp-9);
  min-height: var(--pk-card-min-h);
  padding: var(--pk-sp-6);
  background: var(--pk-card);
  color: var(--pk-ink);
  text-decoration: none;
  /* not a link and not a button by default: nothing happens on click, so the
     card must not advertise that it can be clicked */
  cursor: default;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease);
}

.pk-card__icon {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--pk-ink);
  transition: color var(--pk-dur) var(--pk-ease);
}

.pk-card__text { display: flex; flex-direction: column; gap: var(--pk-sp-2); }

/* The card title is base.css's .pk-title role, applied in the markup:
   `<h3 class="pk-card__title pk-title">`. The element class stays — it is what
   --compact and --dark address — but it no longer restates Inter 400 /
   --pk-fs-title / --pk-ls-display / --pk-ink-strong, which the role already
   owns. One declaration of card-title type in the system, in base.css. */
.pk-card .pk-card__title {
  transition: color var(--pk-dur) var(--pk-ease);
}

/* THE COPY FLOOR — what keeps a row's titles on one baseline.
   Cells in a row are the same height and their copy sits on the BOTTOM edge,
   so a body one line shorter than its neighbor's carries its title a whole
   line down with it: the "Hidden cost" cell in the problem row and the
   "Security" cell in the features row are both short, and both used to hang
   below the rest of their row.
   So the body has a floor measured in LINES, and the floor is the number of
   lines the longest body in the row takes: three for a full card, two for a
   compact one (--pk-card-copy-lines below). Every cell then reserves the same
   height, every title lands on the same baseline, and the only cost is that
   the copy block sits a little higher in a cell whose copy is short — which is
   the same in every cell, so it reads as the grid rather than as a mistake.
   A row whose copy genuinely runs longer sets the count on the row:
       <ul class="pk-cards pk-cards--3" style="--pk-card-copy-lines: 4">
   …or, better, gets its copy cut back to the count. */
.pk-card__text > p:not(.pk-card__stat) {
  margin: 0;
  min-height: calc(var(--pk-card-copy-lines) * 1em * var(--pk-lh-body));
  font-size: var(--pk-fs-body);
  line-height: var(--pk-lh-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
  transition: color var(--pk-dur) var(--pk-ease);
}

/* the case-study card's outlined chip, pinned to the top-left */
.pk-card__tag { align-self: flex-start; }

/* The case-study number is base.css's .pk-stat role, applied in the markup:
   `<p class="pk-card__stat pk-stat">`. Only what the role does not own stays
   here: tabular figures, so a column of numbers lines up, and the transition
   that carries the color into --dark. */
.pk-card .pk-card__stat {
  font-variant-numeric: tabular-nums;
  transition: color var(--pk-dur) var(--pk-ease);
}

/* ---- the dark card: at most one per row, and a row may have none ---- */
.pk-card--dark { background: var(--pk-charcoal); }
.pk-card--dark.pk-card { color: var(--pk-on-dark); }
.pk-card--dark .pk-card__icon,
.pk-card--dark.pk-card .pk-card__title,
.pk-card--dark.pk-card .pk-card__stat { color: var(--pk-on-dark); }
.pk-card--dark .pk-card__text > p:not(.pk-card__stat) { color: var(--pk-on-dark-2); }
.pk-card--dark.pk-card .pk-card__tag { border-color: var(--pk-on-dark-rule); color: var(--pk-on-dark); }

/* ---- a denser cell: the six feature cells ---- */
.pk-card--compact {
  --pk-card-copy-lines: 2;   /* a feature cell's copy is one sentence */
  gap: var(--pk-sp-9);
  min-height: 219px;
}
.pk-card--compact .pk-card__icon { width: 28px; height: 28px; }
.pk-card--compact.pk-card .pk-card__title { font-size: var(--pk-fs-lead); letter-spacing: var(--pk-ls-body); }
.pk-card--compact .pk-card__text { gap: var(--pk-sp-5); }
.pk-card--compact .pk-card__text > p:not(.pk-card__stat) {
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  min-height: calc(var(--pk-card-copy-lines) * 1em * var(--pk-lh-snug));   /* the same floor, at the compact line height */
}

/* ---- the only card that may be clicked ---- */
.pk-card.pk-card--link { color: var(--pk-ink); cursor: pointer; }
.pk-card.pk-card--link.pk-card--dark { color: var(--pk-on-dark); }
.pk-card--link:hover { background: var(--pk-card-hover); }
.pk-card--link.pk-card--dark:hover { background: var(--pk-charcoal-2); }
.pk-card--link:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: -4px; }
.pk-card--link.pk-card--dark:focus-visible { outline-color: var(--pk-on-dark); }

@media (max-width: 1199.98px) {
  .pk-cards--3,
  .pk-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-card { gap: var(--pk-sp-8); }
  .pk-card--compact { min-height: 212px; }
}
@media (max-width: 809.98px) {
  .pk-cards--2,
  .pk-cards--3,
  .pk-cards--4 { grid-template-columns: 1fr; }
  /* --pk-card-min-h is already 0 at this step (tokens.css) */
  .pk-card { gap: var(--pk-sp-8); }
  .pk-card--compact { min-height: 0; }
  /* one column: every cell sizes to its own copy, so there is no row of titles
     left to align and the two-line floor would only add white space */
  .pk-card__text > p:not(.pk-card__stat) { min-height: 0; }
}

/* ==========================================================================
   7. PANEL
   --------------------------------------------------------------------------
   The split block behind "How It Works" and "Why Plek": a copy cell beside an
   illustration stage, separated by the same 1px seam as the card rows. 40/60
   by default; --reverse puts the stage first. Below 1200 the two stack and the
   stage goes on top, as in the design.
   ========================================================================== */

.pk-panel {
  display: flex;
  gap: var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-rule);
  overflow: hidden;
}

.pk-panel__copy {
  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-panel__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
}

.pk-panel--reverse { flex-direction: row-reverse; }

/* the copy cell on charcoal — the step column of "How It Works" */
.pk-panel--dark .pk-panel__copy { background: var(--pk-charcoal); color: var(--pk-on-dark); }
.pk-panel--dark .pk-panel__copy .pk-h3,
.pk-panel--dark .pk-panel__copy .pk-title { color: var(--pk-on-dark); }
.pk-panel--dark .pk-panel__copy .pk-body,
.pk-panel--dark .pk-panel__copy .pk-small { color: var(--pk-on-dark-2); }

@media (max-width: 1199.98px) {
  .pk-panel,
  .pk-panel--reverse { flex-direction: column; }
  .pk-panel__copy { flex: 1 1 auto; }
  .pk-panel__stage { flex: 0 0 auto; min-height: 260px; order: -1; }
}
@media (max-width: 809.98px) {
  .pk-panel__stage { min-height: 200px; }
}

/* ==========================================================================
   8. FAQ
   --------------------------------------------------------------------------
   Native <details> rows in a hairline list: they open and close with no
   script at all. plek.js adds only single-open behavior on top.

   Markup:
     <div class="pk-faq">
       <details class="pk-faq__item">
         <summary class="pk-faq__q"><span class="pk-faq__n">01.</span>Question</summary>
         <div class="pk-faq__a"><p>Answer</p></div>
       </details> …
     </div>
   The +/- glyph is drawn from the summary's two pseudo-elements rather than an
   inline SVG: it is a control's affordance, not an icon, and this way a row
   carries no markup a copy edit could drop.
   ========================================================================== */

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

.pk-faq__item {
  background: var(--pk-surface);
  transition: background-color var(--pk-dur) var(--pk-ease);
}
.pk-faq__item[open] { background: var(--pk-card); }

.pk-faq__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pk-sp-7);
  width: 100%;
  margin: 0;
  padding: 22px 52px 22px var(--pk-sp-6);
  font-family: var(--pk-font-body);
  font-size: var(--pk-fs-lead);
  font-weight: 400;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-strong);
  text-align: left;
  list-style: none;
  cursor: pointer;
}
.pk-faq__q::-webkit-details-marker { display: none; }
.pk-faq__q::marker { content: ""; }
.pk-faq__q:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: -3px; }

/* the Space Mono row number, "01." */
.pk-faq__n {
  flex: none;
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-strong);
}

/* plus -> minus: the upright stroke turns onto the flat one and fades out */
.pk-faq__q::before,
.pk-faq__q::after {
  content: "";
  position: absolute;
  right: var(--pk-sp-6);
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--pk-dur) var(--pk-ease), opacity var(--pk-dur) var(--pk-ease);
}
.pk-faq__q::before { transform: translateY(-50%); }
.pk-faq__q::after  { transform: translateY(-50%) rotate(90deg); }
.pk-faq__item[open] > .pk-faq__q::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.pk-faq__a {
  margin: -10px var(--pk-sp-6) 22px;
  padding: 18px 61px 0;
  border-top: var(--pk-line) solid var(--pk-rule);
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
}
.pk-faq__a p { margin: 0; }
.pk-faq__a p + p { margin-top: var(--pk-sp-4); }

@media (max-width: 809.98px) {
  .pk-faq__q { gap: var(--pk-sp-2); padding: var(--pk-sp-5) 40px var(--pk-sp-5) 14px; font-size: var(--pk-fs-small); }
  .pk-faq__n { font-size: var(--pk-fs-small); }
  .pk-faq__q::before, .pk-faq__q::after { right: 14px; }
  .pk-faq__a { margin: -4px 14px var(--pk-sp-5); padding: 18px var(--pk-sp-7) 0 33px; }
}

/* ==========================================================================
   9. TESTIMONIAL
   --------------------------------------------------------------------------
   One quote per cell, the attribution and the counter on the bottom edge. The
   quote is .pk-quote (Inter 300/22 at -0.07em) from base.css; nothing here
   restates type the type roles already own.
   ========================================================================== */

.pk-testimonial {
  display: flex;
  gap: var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-rule);
  overflow: hidden;
}

.pk-testimonial__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pk-sp-9);
  min-height: 336px;
  padding: var(--pk-sp-9);
  background: var(--pk-surface);
}

.pk-testimonial__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pk-sp-9);
}

.pk-testimonial__who { display: grid; gap: var(--pk-sp-1); }
.pk-testimonial .pk-testimonial__name {
  margin: 0;
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-strong);
}
.pk-testimonial .pk-testimonial__role {
  margin: 0;
  font-size: var(--pk-fs-caption);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-muted);
}

.pk-testimonial__nav { display: flex; align-items: center; gap: var(--pk-sp-3); }
.pk-testimonial__count {
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-small);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-muted);
  font-variant-numeric: tabular-nums;
}

.pk-testimonial--dark .pk-testimonial__body { background: var(--pk-charcoal); }
.pk-testimonial--dark .pk-quote,
.pk-testimonial--dark.pk-testimonial .pk-testimonial__name { color: var(--pk-on-dark); }
.pk-testimonial--dark.pk-testimonial .pk-testimonial__role,
.pk-testimonial--dark .pk-testimonial__count { color: var(--pk-on-dark-2); }

@media (max-width: 809.98px) {
  .pk-testimonial { flex-direction: column; }   /* a row of quotes stacks; the 1px seam becomes horizontal */
  .pk-testimonial__body { min-height: 0; padding: var(--pk-sp-6); gap: var(--pk-sp-8); }
  .pk-testimonial__foot { flex-direction: column; align-items: flex-start; gap: var(--pk-sp-6); }
}

/* ==========================================================================
   10. CLOSING BAND
   --------------------------------------------------------------------------
   One navy weave block: the statement left, the booking control right. The
   headline is Inter Light at --pk-fs-display — this band is the one Inter
   headline in the design, so it is .pk-statement, never .pk-h2.
   ========================================================================== */

.pk-cta {
  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);
  background-color: var(--pk-navy);
  background-image: var(--pk-weave-navy);
  color: var(--pk-on-dark);
}
/* The band's line carries the statement role itself rather than leaning on
   .pk-statement surviving a host page's own `h2` rule. The two steps below are
   the token scaled (46/50 and 32/50), not new sizes. */
.pk-cta .pk-cta__title {
  margin: 0;
  font-family: var(--pk-font-body);
  font-weight: 300;
  font-size: var(--pk-fs-display);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-none);
  color: var(--pk-on-dark);
  text-wrap: balance;
}

@media (max-width: 1199.98px) {
  .pk-cta { flex-wrap: wrap; gap: var(--pk-sp-8) var(--pk-sp-9); min-height: 0; }
  .pk-cta .pk-cta__title { flex: 1 1 12ch; }
}
@media (max-width: 809.98px) {
  .pk-cta { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 50px; padding: var(--pk-sp-6); }
  .pk-cta .pk-cta__title { flex: 0 1 auto; }
}

/* ==========================================================================
   11. FOOTER
   --------------------------------------------------------------------------
   Brand column with the etymology gloss, three link columns, then the base
   row. It carries no call to action and no control of any kind, which is what
   keeps it renderable everywhere, including on the error pages.
   `role="contentinfo"` is written out in the markup rather than left implicit:
   HTML-AAM demotes a <footer> descended from main/article/section out of the
   landmark.
   ========================================================================== */

.pk-footer {
  border-top: var(--pk-line) solid var(--pk-rule);
  background: var(--pk-surface);
  color: var(--pk-ink);
  font-family: var(--pk-font-body);
}

.pk-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pk-sp-10);
  max-width: 1560px;
  margin-inline: auto;
  padding: var(--pk-sp-10) var(--pk-sp-10) 0;
}

.pk-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pk-sp-10);
}

.pk-footer__brand {
  display: grid;
  gap: 14px;
  flex: 0 0 235px;
  width: 235px;
}

.pk-footer .pk-footer__wordmark {
  margin: 0;
  font-family: var(--pk-font-display);
  font-size: var(--pk-fs-h2);
  font-weight: 400;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-display);
  color: var(--pk-ink);
}

.pk-footer__etymology { display: grid; gap: 2px; margin-top: var(--pk-sp-3); }
.pk-footer .pk-footer__gloss,
.pk-footer .pk-footer__gloss-def {
  margin: 0;
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-body);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
}
/* the design's #ABABAB, taken to the token that clears 4.5:1 */
.pk-footer .pk-footer__gloss-term { color: var(--pk-muted); }

.pk-footer__rule { height: 1px; margin: 0; border: 0; background: var(--pk-rule); }

.pk-footer .pk-footer__tagline {
  margin: 0;
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink);
}

.pk-footer__cols { display: flex; justify-content: flex-end; gap: 133px; }

.pk-footer__col { display: grid; align-content: start; gap: 28px; }

.pk-footer .pk-footer__col-title {
  margin: 0;
  font-size: var(--pk-fs-body);
  font-weight: 500;
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-strong);
}

/* The type is declared on the list, not on the anchor inside it: the <li>'s own
   strut sets each row's height, so a 14px anchor in a 16px list item still
   rides a tall line box.
   The row pitch is held at 32px while the target grows: the anchor's own box
   goes from the 18px it used to measure to a 24px minimum (WCAG 2.5.8), and
   the gap comes down a step to pay for it. */
.pk-footer__list {
  display: grid;
  gap: var(--pk-sp-2);
  margin: 0;
  padding: 0;
  font-size: var(--pk-fs-small);
  line-height: var(--pk-lh-snug);
  letter-spacing: var(--pk-ls-body);
  list-style: none;
}
.pk-footer .pk-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--pk-ink);
  text-decoration: none;
  transition: color var(--pk-dur) var(--pk-ease);
}
.pk-footer .pk-footer__list a:hover { color: var(--pk-navy); text-decoration: underline; text-underline-offset: 0.2em; }

/* the oversized decorative lockup, hidden from assistive technology */
.pk-footer__lockup { display: block; width: 100%; height: auto; }

.pk-footer__base { border-top: var(--pk-line) solid var(--pk-rule); }
.pk-footer__base-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pk-sp-5);
  max-width: var(--pk-col-max);
  margin-inline: auto;
  padding: var(--pk-sp-6) var(--pk-sp-10);
}
.pk-footer .pk-footer__copyright {
  display: flex;
  align-items: center;
  gap: var(--pk-sp-1h);
  margin: 0;
  font-size: var(--pk-fs-caption);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-muted);
}

@media (max-width: 1199.98px) {
  .pk-footer__inner { padding: var(--pk-sp-8) 5% 0; }
  .pk-footer__cols { gap: 50px; }
  .pk-footer__base-row { padding: var(--pk-sp-6) var(--pk-sp-8); }
}
@media (max-width: 809.98px) {
  .pk-footer__inner { gap: var(--pk-sp-9); padding: var(--pk-sp-9) var(--pk-sp-6) 0; }
  /* Stacked, so the cross axis is now the horizontal one: flex-start would
     shrink both blocks to their content width and the Company row below could
     not spread across the column. */
  .pk-footer__top { flex-direction: column; align-items: stretch; gap: 49px; }
  .pk-footer__brand { flex: none; width: auto; }
  .pk-footer__cols {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 49px var(--pk-sp-6);
  }
  .pk-footer__col--company { grid-column: 1 / -1; }
  .pk-footer__col--company .pk-footer__list {
    grid-auto-flow: column;
    justify-content: space-between;
    gap: var(--pk-sp-4);
  }
  .pk-footer__base-row { padding: var(--pk-sp-6); }
}

/* ==========================================================================
   12. ICONS
   --------------------------------------------------------------------------
   Inline SVG only: 24px box, 1.5px stroke, currentColor, round caps and joins,
   no fill. An icon never carries meaning on its own — it repeats a label that
   is already in the markup — so every one of them is aria-hidden="true"
   focusable="false".
   ========================================================================== */

.pk-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: currentColor;
}
.pk-icon--lg { width: 32px; height: 32px; }

/* An inventory of icons, drawn as the same hairline grid the cards use, so a
   library page and a product's icon picker read as one surface. */
.pk-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--pk-line);
  margin: 0;
  padding: var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-rule);
  list-style: none;
  overflow: hidden;
}
.pk-icons__cell {
  display: flex;
  align-items: center;
  gap: var(--pk-sp-3);
  padding: var(--pk-sp-4) var(--pk-sp-5);
  background: var(--pk-surface);
  color: var(--pk-ink);
}
.pk-icons__name {
  min-width: 0;
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-caption);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-ink-2);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   13. SKIP LINK
   --------------------------------------------------------------------------
   The first element in <body> on every page and template:

     <body class="pk-page">
     <a class="pk-skip" href="#main">Skip to content</a>
     …
     <main id="main">

   It is out of sight until it is focused and then it is an ordinary solid
   control pinned to the top-left corner, above everything (--pk-z-toast),
   because the thing it has to cover is the fixed nav rail.

   Hidden with the clip technique rather than `display: none` or a negative
   `top`: a display-hidden link is not focusable at all, and a link moved with
   `top` animates into place from off-screen, which is motion nobody asked for.
   The visible state is the BASE rule and the hidden state is the override, so
   a browser that somehow fails the :not() still shows a usable control.
   ========================================================================== */

.pk-skip {
  position: fixed;
  top: var(--pk-sp-3);
  left: var(--pk-sp-3);
  z-index: var(--pk-z-toast);
  display: inline-flex;
  align-items: center;
  padding: var(--pk-sp-3) var(--pk-sp-6);
  border: var(--pk-line) solid transparent;
  border-radius: var(--pk-radius-s);
  font-family: var(--pk-font-body);
  font-size: var(--pk-fs-body);
  font-weight: 500;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  white-space: nowrap;
}
/* chained: this is the first control a keyboard reader meets, and a host
   page's own `a` rule must not be able to repaint it */
.pk-skip.pk-skip {
  background: var(--pk-charcoal);
  color: var(--pk-on-dark);
  text-decoration: none;
}
.pk-skip:not(:focus) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* ==========================================================================
   14. MOTION
   --------------------------------------------------------------------------
   base.css already zeroes transitions inside .pk-page; this repeats it for the
   components when they are used on a ground that is not .pk-page.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pk-btn, .pk-iconbtn, .pk-tag, .pk-seg__btn,
  .pk-tabs__tab, .pk-tabs__n,
  .pk-nav__brand, .pk-nav__link, .pk-nav__toggle, .pk-nav__toggle > span,
  .pk-card, .pk-card__icon, .pk-card__title, .pk-card__stat,
  .pk-card__text p,
  .pk-faq__item, .pk-faq__q::before, .pk-faq__q::after,
  .pk-footer__list a { transition: none; }
}