/* ==========================================================================
   Packr — site stylesheet (2026 redesign)
   --------------------------------------------------------------------------
   Everything here is namespaced with `pk-`. The legacy stylesheets
   (main.css / color.css) still power /privacy and /terms, and both files are
   loaded on those pages, so a shared class name would silently restyle them.
   The prefix is what keeps the two systems from colliding.

   Colour is driven entirely by prefers-color-scheme — there is no theme
   toggle and no JS involved, so the first paint is already correct and never
   flashes. The dark palette deliberately reuses the exact values from
   /get/fallback.php (#11171d canvas, #171f27 card, #26313c hairline) so a
   visitor moving between the landing page and a store redirect sees one
   continuous surface.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Cool neutral light palette. Very slightly blue-shifted rather than pure
     #fff: a dead-white canvas made the screenshots look like cut-outs, and
     cool grey sits with the turquoise instead of fighting it. */
  --pk-bg:          #F7F9FA;
  --pk-bg-soft:     #EDF1F3;
  --pk-surface:     #FFFFFF;
  --pk-surface-2:   #F4F7F8;
  --pk-ink:         #16232C;
  --pk-ink-2:       #4A5A66;
  --pk-ink-3:       #7C8A96;
  --pk-line:        #E1E7EB;
  --pk-line-strong: #CBD5DB;

  /* Brand turquoise is the app icon colour. On a light background it is too
     pale to read as text, so --pk-brand-ink is the darkened variant used for
     type and --pk-brand stays for fills, borders and glows. */
  --pk-brand:       #06BEBD;
  --pk-brand-ink:   #04807D;
  --pk-brand-soft:  #E3F7F7;
  --pk-brand-glow:  rgba(6, 190, 189, .30);

  /* Secondary accent — step numbers, the premium tier, the progress bar.
     In the default palette it simply IS the brand, which is what makes the
     page read as single-colour. The [data-palette] blocks below are the only
     place this diverges, so switching palettes never touches a component. */
  --pk-accent:      var(--pk-brand);
  --pk-accent-ink:  var(--pk-brand-ink);
  --pk-accent-soft: var(--pk-brand-soft);
  --pk-accent-glow: rgba(6, 190, 189, .26);
  /* Text drawn on top of an --pk-accent fill. It has to be a token: teal
     needs dark text, navy needs light, and the components must not care. */
  --pk-accent-on:   #04262B;

  --pk-shadow-sm:   0 1px 2px rgba(22, 35, 44, .06), 0 2px 8px rgba(22, 35, 44, .05);
  --pk-shadow-md:   0 4px 12px rgba(22, 35, 44, .07), 0 12px 32px rgba(22, 35, 44, .07);
  --pk-shadow-lg:   0 8px 24px rgba(22, 35, 44, .09), 0 32px 64px rgba(22, 35, 44, .10);
  --pk-shadow-brand: 0 10px 30px rgba(6, 190, 189, .28);

  /* Header background is translucent so the page scrolls visibly beneath it. */
  --pk-header-bg:   rgba(247, 249, 250, .78);

  --pk-radius-sm:   10px;
  --pk-radius:      16px;
  --pk-radius-lg:   24px;
  --pk-radius-xl:   32px;

  --pk-shell:       1200px;
  --pk-shell-narrow: 780px;
  --pk-gutter:      24px;
  --pk-section-y:   clamp(72px, 9vw, 132px);

  /* Nunito is the closest widely-available match to Apple's SF Rounded:
     humanist proportions with rounded terminals, and — unlike most rounded
     faces — it ships Latin Extended, Cyrillic and Vietnamese, which this site
     needs. `ui-rounded` is listed first so Apple devices use the real SF
     Rounded natively before the webfont arrives, and CJK/Arabic/Hebrew/Thai
     fall through to the system UI face per glyph, since no rounded webfont
     covers them. */
  --pk-font-body:   Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pk-font-display: ui-rounded, Nunito, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;

  --pk-ease:        cubic-bezier(.22, .61, .36, 1);
  --pk-ease-out:    cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pk-bg:          #11171d;
    --pk-bg-soft:     #0C1116;
    --pk-surface:     #171f27;
    --pk-surface-2:   #1C2631;
    --pk-ink:         #f2f5f8;
    --pk-ink-2:       #a9b6c3;
    --pk-ink-3:       #7E8C99;
    --pk-line:        #26313c;
    --pk-line-strong: #33404D;

    /* Turquoise reads dim against a near-black canvas, so the dark theme
       brightens it rather than reusing the light-mode value. */
    --pk-brand:       #2ED3D1;
    --pk-brand-ink:   #57E0DE;
    --pk-brand-soft:  rgba(6, 190, 189, .14);
    --pk-brand-glow:  rgba(6, 190, 189, .34);

    --pk-accent:      var(--pk-brand);
    --pk-accent-ink:  var(--pk-brand-ink);
    --pk-accent-soft: var(--pk-brand-soft);
    --pk-accent-glow: rgba(6, 190, 189, .26);
    --pk-accent-on:   #04262B;

    --pk-shadow-sm:   0 1px 2px rgba(0, 0, 0, .40);
    --pk-shadow-md:   0 4px 12px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .35);
    --pk-shadow-lg:   0 8px 24px rgba(0, 0, 0, .50), 0 32px 64px rgba(0, 0, 0, .45);
    --pk-shadow-brand: 0 10px 30px rgba(6, 190, 189, .22);

    --pk-header-bg:   rgba(17, 23, 29, .78);
  }
}

/* --------------------------------------------------------------------------
   1b. Palette variants — TEMPORARY, for comparison
   --------------------------------------------------------------------------
   `?palette=navy` on any URL sets data-palette on <html> (see layout.php).
   The default, with no attribute, is the single-colour teal palette.

   Only the four --pk-accent-* tokens are redefined. No component references a
   palette directly, so choosing a winner means deleting this block and the
   query-string handling in layout.php — nothing else changes.

   Navy has to invert between schemes: a deep navy is invisible on #11171d,
   so the dark theme uses a pale slate that reads as the same colour family.
   -------------------------------------------------------------------------- */

:root[data-palette="navy"] {
  --pk-accent:      #1B3A5C;
  --pk-accent-ink:  #16304C;
  --pk-accent-soft: #E7EDF4;
  --pk-accent-glow: rgba(27, 58, 92, .22);
  --pk-accent-on:   #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="navy"] {
    --pk-accent:      #8FB4DC;
    --pk-accent-ink:  #A8C6E6;
    --pk-accent-soft: rgba(143, 180, 220, .14);
    --pk-accent-glow: rgba(143, 180, 220, .24);
    --pk-accent-on:   #10233A;
  }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header or the section heading lands
     underneath it. */
  scroll-padding-top: 96px;
}

body.pk {
  margin: 0;
  background: var(--pk-bg);
  color: var(--pk-ink);
  font-family: var(--pk-font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* The hero's decorative blobs extend past the viewport edge; without this a
     horizontal scrollbar appears on narrow screens. */
  overflow-x: hidden;
}

.pk h1, .pk h2, .pk h3, .pk h4 {
  font-family: var(--pk-font-display);
  /* 700 rather than 600: rounded terminals shave visual weight off a face, so
     the semibold that looked right in a serif reads underset here. Tracking is
     also pulled back from -0.015em — round shapes need the extra room or the
     counters start closing up. */
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0;
  /* de/nl compounds and long Finnish words must break rather than widen the
     page — this site ships in 40+ languages and several of them are verbose. */
  overflow-wrap: break-word;
}

/* :where() contributes nothing to specificity, so this reset weighs (0,0,1)
   instead of (0,1,1). As `.pk p` it outranked every single-class rule in the
   file, which meant a margin set on any <p class="..."> was silently dropped —
   .pk-pill, .pk-plan__price and four of the .pk-tier__* rules were all being
   thrown away. It still beats the UA stylesheet, which is its whole job. */
:where(.pk) p { margin: 0; }
.pk ul, .pk ol { margin: 0; padding: 0; list-style: none; }
.pk a { color: inherit; text-decoration: none; }
.pk img, .pk svg { max-width: 100%; display: block; }
.pk button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.pk :focus-visible {
  outline: 2px solid var(--pk-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.pk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pk-skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--pk-radius-sm);
  background: var(--pk-brand);
  color: #fff;
  font-weight: 600;
  transition: top .2s var(--pk-ease);
}
.pk-skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

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

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

.pk-section--tight { padding-block: clamp(56px, 6vw, 88px); }

/* Alternating band. Kept as a token rather than a hard colour so the warm
   paper tint and the dark surface swap together. */
.pk-section--soft { background: var(--pk-bg-soft); }

.pk-section--edge {
  border-top: 1px solid var(--pk-line);
  border-bottom: 1px solid var(--pk-line);
}

/* --------------------------------------------------------------------------
   4. Typography scale
   -------------------------------------------------------------------------- */

.pk-display {
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.4rem);
}

.pk-h2 {
  font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3rem);
}

.pk-h3 {
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.3;
}

.pk-lede {
  font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
  line-height: 1.6;
  color: var(--pk-ink-2);
  font-weight: 400;
}

.pk-body { color: var(--pk-ink-2); }
.pk-small { font-size: .875rem; line-height: 1.55; color: var(--pk-ink-3); }

/* Section label sitting above every H2 — the small caps line that gives the
   page its editorial rhythm. */
.pk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pk-brand-ink);
  margin-bottom: 18px;
}
.pk-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.pk-eyebrow--center::before { display: none; }

.pk-section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.pk-section-head--center { margin-inline: auto; text-align: center; }
.pk-section-head .pk-lede { margin-top: 18px; }

/* Hand-drawn style highlight under a word in the H1. The stroke is drawn on
   load by animating background-size, which is compositor-friendly. */
.pk-tint { color: var(--pk-brand-ink); }

.pk-mark {
  position: relative;
  color: var(--pk-brand-ink);
  background-image: linear-gradient(var(--pk-brand-soft), var(--pk-brand-soft));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% .34em;
  padding-inline: .06em;
  animation: pk-mark-in .9s .7s var(--pk-ease-out) forwards;
}

@keyframes pk-mark-in { to { background-size: 100% .34em; } }

/* --------------------------------------------------------------------------
   5. Buttons and store badges
   -------------------------------------------------------------------------- */

.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .2s var(--pk-ease), box-shadow .2s var(--pk-ease),
              background-color .2s var(--pk-ease), border-color .2s var(--pk-ease);
}

.pk-btn--primary {
  background: var(--pk-brand);
  color: #04262B;
  box-shadow: var(--pk-shadow-brand);
}
.pk-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px var(--pk-brand-glow); }
.pk-btn--primary:active { transform: translateY(0); }

.pk-btn--ghost {
  border: 1px solid var(--pk-line-strong);
  color: var(--pk-ink);
  background: var(--pk-surface);
}
.pk-btn--ghost:hover { border-color: var(--pk-brand); color: var(--pk-brand-ink); transform: translateY(-2px); }

.pk-btn--sm { padding: 10px 18px; font-size: .9rem; }

/* Store badges. Apple and Google ship these at ~3.4:1 but with different
   built-in padding, so Google's is nudged down a touch to make the pair look
   optically equal. Widths are capped rather than fixed: several localized
   badges are wider than the English artwork. */
/* Both badges are ~3.37:1 and identical across locales (the artwork scales its
   text to fit rather than growing), so at a fixed height the pair needs ~345px
   — more than a 390px phone leaves after padding. Below that they wrap onto
   two rows rather than shrinking: scaled down far enough to fit, Apple's
   wordmark stops being legible, and an illegible badge is worse than a
   stacked one.

   Equal width therefore means equal height. Both files are full-bleed — the
   rounded pill spans the whole canvas in each (Apple 135x40, Google
   238.96x70.87), with no transparent margin baked in — so the earlier
   168/176 split plus 2px of padding on the Google badge was correcting for a
   difference these particular assets do not have. It just made the Play badge
   ~2px taller than the App Store one. One shared width fixes both. */
.pk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.pk-badges--center { justify-content: center; }

.pk-badge {
  display: block;
  line-height: 0;
  border-radius: 10px;
  transition: transform .22s var(--pk-ease), filter .22s var(--pk-ease);
}
.pk-badge img { width: 100%; height: auto; display: block; }
.pk-badge--apple,
.pk-badge--play { width: 100%; max-width: 172px; }
.pk-badge:hover { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18)); }

/* When they do wrap, each takes half the row so the pair stays balanced.
   min-width:0 lets them shrink below their intrinsic width. */
@media (max-width: 420px) {
  .pk-badge--apple, .pk-badge--play { flex: 1 1 0; min-width: 0; max-width: 165px; }
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.pk-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  z-index: 120;
  background: linear-gradient(90deg, var(--pk-brand), var(--pk-accent));
  transform: scaleX(var(--pk-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}
[dir="rtl"] .pk-progress { transform-origin: 100% 50%; }

.pk-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* The frosted bar is painted by a pseudo-element, NOT on .pk-header itself.
   backdrop-filter establishes a containing block for position:fixed
   descendants, and .pk-nav is a fixed, full-viewport overlay on mobile. With
   the filter on the header, the open menu was being laid out inside the
   72px-tall header box the moment .is-stuck was applied — so the menu looked
   right at the top of the page and collapsed onto the content as soon as you
   scrolled. Moving the filter to ::before, which has no descendants, keeps
   the effect and leaves .pk-nav positioned against the viewport.

   z-index -1 sits it behind the header's own children; .pk-header already
   creates a stacking context via z-index:100, so it cannot fall behind the
   page. */
.pk-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--pk-ease), box-shadow .3s var(--pk-ease),
              border-color .3s var(--pk-ease);
}

/* Applied by site.js past ~40px of scroll. The blur only kicks in here so the
   hero sits on a clean, unfrosted canvas at rest. */
.pk-header.is-stuck::before {
  background: var(--pk-header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
}

.pk-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.pk-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pk-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  flex: none;
}
.pk-logo picture { display: block; line-height: 0; flex: none; }
/* The app icon ships its own rounded corners, but a matching radius here
   guarantees the edge is clean whatever is re-exported later. */
.pk-logo img { width: 36px; height: 36px; border-radius: 22%; display: block; }

.pk-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.pk-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--pk-ink-2);
  transition: color .2s var(--pk-ease), background-color .2s var(--pk-ease);
}
.pk-nav a:hover { color: var(--pk-ink); background: var(--pk-brand-soft); }

.pk-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.pk-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--pk-line);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pk-ink-2);
  transition: border-color .2s var(--pk-ease), color .2s var(--pk-ease);
}
.pk-icon-btn:hover { border-color: var(--pk-brand); color: var(--pk-ink); }
.pk-icon-btn svg { width: 17px; height: 17px; flex: none; }

.pk-burger { display: none; }

@media (max-width: 900px) {
  .pk-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: var(--pk-bg);
    margin: 0;
    /* Off-canvas until .is-open. visibility is toggled alongside opacity so
       the closed menu is not reachable by keyboard. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--pk-ease), transform .25s var(--pk-ease), visibility .25s;
    z-index: 110;
  }
  .pk-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .pk-nav a { font-size: 1.4rem; font-family: var(--pk-font-display); padding: 14px 28px; }
  .pk-burger { display: inline-flex; }
  .pk-header__cta { display: none; }

  /* The nav carries `margin-inline-start: auto` on desktop, and that is what
     pushes everything after it to the right. Here the nav is position:fixed
     and therefore out of flow, so its auto margin applies to nothing and the
     language button and burger collapse back against the logo.

     The margin has to move to the actions rather than be added alongside:
     flexbox splits free space equally between competing auto margins, so
     setting it on both would leave the desktop nav floating in the middle of
     the bar instead of sitting beside the actions. */
  .pk-header__actions { margin-inline-start: auto; }
}

/* Language drawer — a plain <dialog>-less overlay so it works without JS by
   being a normal anchored panel that JS upgrades. */
.pk-langs {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 15, 20, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--pk-ease), visibility .25s;
}
.pk-langs.is-open { opacity: 1; visibility: visible; }

.pk-langs__panel {
  width: min(760px, 100%);
  max-height: min(78vh, 720px);
  overflow-y: auto;
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius-lg);
  box-shadow: var(--pk-shadow-lg);
  padding: 28px;
  transform: translateY(14px) scale(.98);
  transition: transform .3s var(--pk-ease-out);
}
.pk-langs.is-open .pk-langs__panel { transform: none; }

.pk-langs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.pk-langs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
}
.pk-langs__grid a {
  padding: 9px 12px;
  border-radius: var(--pk-radius-sm);
  font-size: .92rem;
  color: var(--pk-ink-2);
  transition: background-color .18s var(--pk-ease), color .18s var(--pk-ease);
}
.pk-langs__grid a:hover { background: var(--pk-brand-soft); color: var(--pk-ink); }
.pk-langs__grid a[aria-current="page"] { color: var(--pk-brand-ink); font-weight: 700; background: var(--pk-brand-soft); }

.pk-langs__suggested {
  padding: 14px;
  margin-bottom: 16px;
  border-radius: var(--pk-radius);
  background: var(--pk-brand-soft);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.pk-hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px);
  overflow: hidden;
}

.pk-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 900px) {
  .pk-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .pk-hero__copy { display: flex; flex-direction: column; align-items: center; }
  .pk-badges { justify-content: center; }
}

/* Soft aurora washes behind the hero. Blurred radial gradients rather than
   images: they scale to any viewport, cost nothing to download, and tint
   correctly in both schemes because they inherit the brand tokens. */
.pk-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.pk-hero__glow--a {
  width: 620px; height: 620px;
  inset-inline-start: -220px;
  top: -260px;
  background: radial-gradient(circle, var(--pk-brand-glow), transparent 68%);
  animation: pk-drift-a 22s ease-in-out infinite;
}
.pk-hero__glow--b {
  width: 520px; height: 520px;
  inset-inline-end: -180px;
  top: 40px;
  background: radial-gradient(circle, var(--pk-accent-glow), transparent 68%);
  animation: pk-drift-b 26s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  .pk-hero__glow { opacity: .45; }
}

@keyframes pk-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, 30px, 0) scale(1.08); }
}
@keyframes pk-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-34px, 44px, 0) scale(1.06); }
}

.pk-hero__copy, .pk-hero__art { position: relative; z-index: 1; }

.pk-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--pk-line);
  background: var(--pk-surface);
  box-shadow: var(--pk-shadow-sm);
  font-size: .82rem;
  font-weight: 600;
  color: var(--pk-ink-2);
  margin-bottom: 24px;
}
.pk-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pk-brand);
  flex: none;
  box-shadow: 0 0 0 0 var(--pk-brand-glow);
  animation: pk-ping 2.6s var(--pk-ease-out) infinite;
}
@keyframes pk-ping {
  0%        { box-shadow: 0 0 0 0 var(--pk-brand-glow); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(6, 190, 189, 0); }
}

.pk-hero .pk-lede { margin-top: 22px; max-width: 46ch; }
@media (max-width: 900px) { .pk-hero .pk-lede { margin-inline: auto; } }

.pk-hero__cta { margin-top: 34px; }

.pk-hero__meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: .85rem;
  color: var(--pk-ink-3);
}
@media (max-width: 900px) { .pk-hero__meta { justify-content: center; } }
.pk-hero__meta li { display: inline-flex; align-items: center; gap: 7px; }
.pk-hero__meta svg { width: 15px; height: 15px; color: var(--pk-brand); flex: none; }

/* --------------------------------------------------------------------------
   8. Device frames
   -------------------------------------------------------------------------- */

/* A CSS-drawn phone shell. The old site used pre-baked mockup images, which
   meant a new screenshot required re-exporting artwork; this takes a bare
   screenshot and frames it, so swapping in a localized screenshot is a file
   drop. aspect-ratio keeps the frame honest before the image loads, which
   also removes the layout shift the old markup had. */
/* The frame takes its height from the screenshot, rather than forcing a fixed
   aspect ratio and cropping whatever is dropped in.

   The earlier version pinned the frame to 9/19.5 and used object-fit: cover.
   That silently cut the edges off every screenshot, because the 10px bezel
   makes the CONTENT box 0.4465 while the frame itself is 0.4615 — so even a
   pixel-perfect 1206x2622 iPhone capture lost ~5px from each side. A packing
   list has content right up against both margins, so that read as the left
   edge being clipped.

   Now the image is width:100% / height:auto and the frame wraps it. Nothing
   is ever cropped, whatever aspect ratio you export at. The width and height
   attributes are emitted from the real file by screenshot_data(), so the
   browser still reserves the correct box before the image arrives and there
   is no layout shift. */
.pk-phone {
  position: relative;
  width: min(310px, 78vw);
  margin-inline: auto;
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(160deg, #2C3A45, #151D24 60%);
  box-shadow: var(--pk-shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .10);
}
/* No drawn notch or punch-hole. Device screenshots already contain them:
   iOS bakes the Dynamic Island into the capture, and Android does the same
   with the front-camera cutout. Drawing another one on top gave every
   screenshot two. The frame supplies the bezel and the corner radius only —
   everything inside the glass comes from the image. */

.pk-phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 33px;
  /* Placeholder tint while the file loads, and the colour seen through the
     corner radius if a screenshot has a transparent background. */
  background: var(--pk-surface-2);
}

.pk-phone--lg { width: min(340px, 82vw); }

/* Android variant. With the drawn cutouts gone, the whole distinction is the
   hardware: a tighter corner radius, a thinner bezel and a slightly cooler
   body. Enough that an Android visitor recognises their own device, without
   becoming a caricature of any one manufacturer. The camera cutout comes from
   the screenshot itself. */
.pk-phone--android {
  border-radius: 32px;
  padding: 7px;
  background: linear-gradient(160deg, #333F49, #1A2229 60%);
}
.pk-phone--android img { border-radius: 26px; }

/* Paired hero devices — an iPhone and an Android, shown to every visitor.
   Flex with a negative inline margin rather than absolute positioning: the
   pair then has real intrinsic width, so it centres itself and the hero grid
   reserves the right amount of space without magic numbers. z-index does the
   stacking, since the Android comes second in the DOM but sits behind. */
/* The pair is sized as percentages of one fixed-width box rather than each
   device carrying its own px width. The three values add up to exactly 100%
   (62 + 53 - 15), so the composition always fills its column and never
   overflows it — which is what let the per-breakpoint px sizes below be
   deleted entirely, and what stops the Android's edge being clipped by the
   body's overflow-x:hidden at awkward widths.

   The ratio is also the point of this change: the Android was 250/340 = 74%
   of the iPhone and read as an afterthought. 53/62 = 85% makes it a peer. */
.pk-devices {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(520px, 100%);
  margin-inline: auto;
  /* Positioning context for .pk-float. Absolutely positioned children are
     taken out of flex layout, so they do not disturb the phone row. */
  position: relative;
}

.pk-devices .pk-phone--front {
  z-index: 2;
  width: 62%;
}

.pk-devices .pk-phone--back {
  z-index: 1;
  width: 53%;
  /* Pulled back under the front device and dropped slightly, so the pair
     reads as one composition rather than two phones in a row. Percentage
     margins resolve against the container's INLINE size in both axes, so
     these stay proportional as the box shrinks. */
  margin-inline-start: -15%;
  margin-block-start: 8%;
  transform: rotate(3deg);
  transform-origin: bottom center;
}
[dir="rtl"] .pk-phone--back { transform: rotate(-3deg); }

/* No per-breakpoint device widths are needed: .pk-devices is capped at
   min(520px, 100%) and the children are percentages of it, so the pair
   scales with its column at every width. */

/* Hero composition: the devices plus two floating cards that drift on scroll. */
.pk-hero__art { display: grid; place-items: center; }

.pk-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  /* Read as a notification: icon on the left, text ranged left beside it.
     `start` rather than `left` so it mirrors in Arabic and Hebrew.

     This has to be stated explicitly because the hero grid sets
     `text-align: center` below 900px, which the cards would otherwise
     inherit — centring a two-line caption inside a notification is the one
     thing that stops it looking like one. */
  text-align: start;
  padding: 12px 16px;
  border-radius: var(--pk-radius);
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-md);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 3;
  animation: pk-bob 6s ease-in-out infinite;
}
.pk-float__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--pk-brand-soft);
  color: var(--pk-brand-ink);
  flex: none;
}
.pk-float__icon svg { width: 18px; height: 18px; }
/* The caption column: both lines share one left edge against the icon. */
.pk-float > span:last-child { display: block; min-width: 0; }
.pk-float small { display: block; font-weight: 500; font-size: .74rem; color: var(--pk-ink-3); margin-top: 1px; }

/* Both cards sit on the start side. The Android device occupies the end side
   and hangs lower than the iPhone, so a card floating bottom-end — where this
   one used to be — lands on top of it. */
/* Four numbered slots, claimed in order by whichever cards survive the
   translation filter. Sides alternate so the set reads as a ring around the
   composition rather than a stack.

   The end-side insets are smaller than the start-side ones on purpose: the
   art column's outer edge has only the 24px shell padding before the viewport
   edge, and body has overflow-x:hidden, so a card hanging further out than
   that would be silently clipped. The start side backs onto the hero's column
   gap and has room to spare. */
.pk-float--1 { top: 30%;     inset-inline-start: -7%; animation-delay: -1.5s; }
.pk-float--2 { top: 0;      inset-inline-end: -3%;   animation-delay: -2.9s; }
.pk-float--3 { bottom: 7%;  inset-inline-start: -3%; animation-delay: -4.2s; }
.pk-float--4 { bottom: 24%; inset-inline-end: -2%;   animation-delay: -5.6s; }

/* Alternate the icon tint so four cards do not read as one repeated element. */
.pk-float--2 .pk-float__icon,
.pk-float--4 .pk-float__icon { background: var(--pk-accent-soft); color: var(--pk-accent-ink); }

@keyframes pk-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Four cards crowd the composition before the phones themselves become the
   problem, so they thin out in two stages: the end-side pair goes first,
   then all of them. The start-side pair survives longest because it overlaps
   the primary iPhone rather than sitting over the Android. */
@media (max-width: 820px) {
  .pk-float--2, .pk-float--4 { display: none; }
}

@media (max-width: 560px) {
  /* Below this the cards overlap the phone badly and their text is the first
     thing to become unreadable, so they are dropped rather than shrunk. */
  .pk-float { display: none; }
}

/* --------------------------------------------------------------------------
   9. Trust strip / stats
   -------------------------------------------------------------------------- */

.pk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  text-align: center;
}
@media (max-width: 760px) { .pk-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; } }

.pk-stat__value {
  font-family: var(--pk-font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--pk-ink);
}
.pk-stat__label {
  margin-top: 6px;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--pk-ink-3);
}

/* --------------------------------------------------------------------------
   10. Steps (how it works)
   -------------------------------------------------------------------------- */

.pk-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  counter-reset: pk-step;
}
@media (max-width: 860px) { .pk-steps { grid-template-columns: 1fr; } }

.pk-step {
  position: relative;
  padding-top: 26px;
}
/* The connecting rule between steps. Drawn on the step itself rather than as
   a separate element so it disappears automatically in the single-column
   layout, where a horizontal line would make no sense. */
.pk-step::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--pk-line);
  border-radius: 2px;
}
.pk-step::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: var(--pk-brand);
  border-radius: 2px;
  transition: width .8s var(--pk-ease-out);
  transition-delay: calc(var(--pk-i, 0) * .12s + .1s);
}
.pk-step.is-visible::after { width: 42px; }

.pk-step__n {
  counter-increment: pk-step;
  font-family: var(--pk-font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--pk-accent-ink);
  letter-spacing: .08em;
}
.pk-step__n::before { content: "0" counter(pk-step); }
.pk-step h3 { margin: 12px 0 10px; }

/* --------------------------------------------------------------------------
   11. Feature cards
   -------------------------------------------------------------------------- */

.pk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px) { .pk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pk-grid { grid-template-columns: 1fr; } }

.pk-card {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
/* Pointer-tracked sheen. site.js writes --mx/--my; with JS off the gradient
   simply stays at its default position and never becomes visible. */
.pk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--pk-brand-soft), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--pk-ease);
  pointer-events: none;
}
.pk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pk-shadow-md);
  border-color: var(--pk-line-strong);
}
.pk-card:hover::before { opacity: 1; }

.pk-card > * { position: relative; }

.pk-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--pk-brand-soft);
  color: var(--pk-brand-ink);
  margin-bottom: 20px;
}
.pk-card__icon svg { width: 23px; height: 23px; }
.pk-card h3 { margin-bottom: 10px; }
.pk-card p { color: var(--pk-ink-2); font-size: .95rem; }

/* --------------------------------------------------------------------------
   12. Showcase (alternating screenshot rows)
   -------------------------------------------------------------------------- */

.pk-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.pk-showcase + .pk-showcase { margin-top: clamp(64px, 8vw, 120px); }

/* Reverse only the visual order, never the DOM order: the copy must come
   first for screen readers and for the mobile stack in both directions. */
.pk-showcase--flip .pk-showcase__art { order: -1; }

@media (max-width: 860px) {
  .pk-showcase { grid-template-columns: 1fr; }
  .pk-showcase--flip .pk-showcase__art { order: 0; }
}

.pk-showcase__art { position: relative; display: grid; place-items: center; }

/* Warm halo behind each screenshot so it does not float unanchored. */
.pk-showcase__art::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pk-brand-glow), transparent 70%);
  filter: blur(60px);
  opacity: .6;
}
.pk-showcase--warm .pk-showcase__art::before {
  background: radial-gradient(circle, var(--pk-accent-glow), transparent 70%);
}

.pk-showcase h2 { margin-bottom: 18px; }
.pk-showcase__list { margin-top: 26px; display: grid; gap: 14px; }
.pk-showcase__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--pk-ink-2);
  font-size: .96rem;
}
.pk-showcase__list svg { width: 20px; height: 20px; flex: none; color: var(--pk-brand); margin-top: 2px; }

/* --------------------------------------------------------------------------
   13. Checklist ("everything included")
   -------------------------------------------------------------------------- */

.pk-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}
@media (max-width: 620px) { .pk-checklist { grid-template-columns: 1fr; } }

.pk-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .95rem;
  color: var(--pk-ink-2);
}
.pk-checklist svg { width: 19px; height: 19px; flex: none; color: var(--pk-brand); margin-top: 3px; }

/* Marquee of language names. Duplicated content is aria-hidden so the list is
   announced once; the animation translates by exactly -50%, which is why the
   track must contain the set twice. */
.pk-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pk-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: pk-marquee 46s linear infinite;
}
.pk-marquee:hover .pk-marquee__track { animation-play-state: paused; }
.pk-marquee span {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--pk-line);
  background: var(--pk-surface);
  font-size: .85rem;
  color: var(--pk-ink-2);
  white-space: nowrap;
}
@keyframes pk-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .pk-marquee__track { animation-direction: reverse; }

/* --------------------------------------------------------------------------
   14. Pricing
   -------------------------------------------------------------------------- */

.pk-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 940px;
  margin-inline: auto;
}
@media (max-width: 780px) { .pk-plans { grid-template-columns: 1fr; } }

.pk-plan {
  padding: 34px 30px;
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pk-plan--featured {
  /* Deliberately the accent, not the brand: it is the biggest coloured
     surface on the page, so it is what makes a palette choice legible. */
  border-color: var(--pk-accent);
  box-shadow: var(--pk-shadow-md), 0 0 0 1px var(--pk-accent);
  position: relative;
}
.pk-plan__tag {
  position: absolute;
  top: -13px;
  inset-inline-start: 30px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--pk-accent);
  color: var(--pk-accent-on);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pk-plan__name { font-weight: 700; font-size: .95rem; color: var(--pk-ink-2); }
.pk-plan__price {
  font-family: var(--pk-font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 8px;
}
.pk-plan__price span { font-family: var(--pk-font-body); font-size: .95rem; font-weight: 500; color: var(--pk-ink-3); }
.pk-plan__list { margin: 24px 0 0; display: grid; gap: 12px; }
.pk-plan__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--pk-ink-2); }
.pk-plan__list svg { width: 19px; height: 19px; flex: none; color: var(--pk-brand); margin-top: 3px; }

/* The cards no longer end in store badges, so the section carries one shared
   button instead. align-items:start on .pk-plans means the cards keep their
   natural heights, so this gap is measured from the taller of the two — it
   needs to be generous enough that the button reads as belonging to the
   section rather than hanging off the bottom of the Premium card. */
.pk-plans__cta { margin-top: clamp(36px, 4.5vw, 56px); text-align: center; }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */

.pk-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 900px) { .pk-quotes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.pk-quote {
  padding: 30px 28px;
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pk-quote blockquote {
  margin: 0;
  font-family: var(--pk-font-display);
  font-size: 1.08rem;
  line-height: 1.5;
  font-weight: 500;
}
.pk-quote__stars { color: #F5A623; letter-spacing: .12em; font-size: .95rem; margin-top: auto; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

/* Built on <details>, so every answer is in the DOM for crawlers and the
   accordion works with JS disabled. JS only adds the one-open-at-a-time
   behaviour and the height transition. */
.pk-faq { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; }

.pk-faq details {
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-surface);
  overflow: hidden;
  transition: border-color .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}
.pk-faq details[open] { border-color: var(--pk-brand); box-shadow: var(--pk-shadow-sm); }

.pk-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.pk-faq summary::-webkit-details-marker { display: none; }
.pk-faq summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-inline-end: 2px solid var(--pk-ink-3);
  border-block-end: 2px solid var(--pk-ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--pk-ease), border-color .25s var(--pk-ease);
}
.pk-faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--pk-brand);
}
.pk-faq__body { padding: 0 24px 22px; color: var(--pk-ink-2); font-size: .96rem; }

/* --------------------------------------------------------------------------
   17. Final CTA
   -------------------------------------------------------------------------- */

.pk-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--pk-radius-xl);
  padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 64px);
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% -20%, var(--pk-brand-soft), transparent 60%),
    var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-md);
}
.pk-cta__logo {
  display: block;
  width: 76px;
  margin: 0 auto 24px;
  line-height: 0;
}
.pk-cta__logo img {
  width: 76px; height: 76px;
  border-radius: 20px;
  display: block;
  box-shadow: var(--pk-shadow-brand);
}
.pk-cta .pk-lede { margin: 18px auto 32px; max-width: 52ch; }

/* Store badges and the QR sit side by side on a desktop, separated by a
   vertical rule. With the QR hidden on touch devices the row collapses to
   just the badges, still centred, with no empty column left behind. */
.pk-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}

.pk-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-inline-start: clamp(24px, 4vw, 48px);
  border-inline-start: 1px solid var(--pk-line);
}

/* The card stays white in both schemes. Scanners expect dark modules on a
   light field; an inverted symbol is read by some and rejected by others, and
   a download CTA is the wrong place to find out which. */
.pk-qr__code {
  display: block;
  padding: 10px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
  line-height: 0;
  transition: transform .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}
.pk-qr:hover .pk-qr__code { transform: translateY(-3px); box-shadow: var(--pk-shadow-md); }
.pk-qr__code img { width: 148px; height: 148px; display: block; }

.pk-qr__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--pk-brand-ink);
}
.pk-qr__label svg { width: 16px; height: 16px; }
.pk-qr__hint { font-size: .78rem; color: var(--pk-ink-3); max-width: 20ch; line-height: 1.4; }

/* Touch devices never see it: you cannot scan the screen you are holding.
   The pointer/hover queries are the meaningful test — a narrow desktop window
   is still a desktop — with a width fallback for browsers that report
   neither. */
@media (hover: none), (pointer: coarse) {
  .pk-qr { display: none; }
}
@media (max-width: 560px) {
  .pk-qr { display: none; }
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.pk-footer {
  border-top: 1px solid var(--pk-line);
  padding-block: clamp(48px, 6vw, 72px) 36px;
  background: var(--pk-bg-soft);
}
.pk-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
}
@media (max-width: 760px) { .pk-footer__top { grid-template-columns: 1fr; gap: 32px; } }

.pk-footer h4 {
  font-family: var(--pk-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  margin-bottom: 16px;
}
.pk-footer__links { display: grid; gap: 10px; }
.pk-footer__links a { font-size: .93rem; color: var(--pk-ink-2); transition: color .2s var(--pk-ease); }
.pk-footer__links a:hover { color: var(--pk-brand-ink); }

.pk-social { display: flex; gap: 10px; margin-top: 20px; }
.pk-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pk-line);
  color: var(--pk-ink-2);
  transition: border-color .2s var(--pk-ease), color .2s var(--pk-ease), transform .2s var(--pk-ease);
}
.pk-social a:hover { border-color: var(--pk-brand); color: var(--pk-brand-ink); transform: translateY(-2px); }
.pk-social svg { width: 18px; height: 18px; }

.pk-footer__bottom {
  border-top: 1px solid var(--pk-line);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: var(--pk-ink-3);
}

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */

/* The reveal is opt-in via [data-reveal] and only armed once site.js has
   confirmed IntersectionObserver support (it sets .pk-js on <html>). Without
   that guard a JS failure would leave the whole page invisible. */
.pk-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .7s var(--pk-ease-out),
    transform .7s var(--pk-ease-out);
  transition-delay: calc(var(--pk-i, 0) * .08s);
  will-change: opacity, transform;
}
.pk-js [data-reveal="scale"] { transform: translate3d(0, 26px, 0) scale(.965); }
.pk-js [data-reveal="fade"]  { transform: none; }

.pk-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Hero content animates on load rather than on scroll — it is already in
   view, so waiting for an intersection would mean it never animates. */
.pk-js .pk-hero__anim {
  opacity: 0;
  animation: pk-rise .9s var(--pk-ease-out) forwards;
  animation-delay: calc(.1s + var(--pk-i, 0) * .11s);
}
@keyframes pk-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Parallax offset written by site.js as a scalar in --pk-par. */
.pk-parallax { transform: translate3d(0, calc(var(--pk-par, 0) * 1px), 0); }

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .pk *,
  .pk *::before,
  .pk *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything that starts hidden must be forced visible: with transitions
     neutralised above, an element left at opacity:0 would never appear. */
  .pk-js [data-reveal],
  .pk-js .pk-hero__anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .pk-mark { background-size: 100% .34em; }
  .pk-parallax { transform: none !important; }
  .pk-marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   21. Android waiting list
   --------------------------------------------------------------------------
   Dormant today: ANDROID_STAGE is 'ga', so android_waiting_list() is false
   and none of this renders. It is kept — and themed with the new tokens —
   because the stage constant is designed to be flipped back for the next
   platform launch, and the widget's markup lives in main.css, which the home
   page no longer loads. Without this block, flipping the flag would ship an
   unstyled form.

   Class names must match src/views/widgets/android_signup.php and
   assets/android-banner.js exactly; that JS toggles .is-visible and reads
   .android-msg / .android-input / .android-submit by name.
   -------------------------------------------------------------------------- */

.pk .android-hero {
  display: none;
  margin-top: 28px;
  padding: 22px;
  border-radius: var(--pk-radius);
  border: 1px solid var(--pk-line);
  background: var(--pk-brand-soft);
  text-align: start;
}
.pk .android-hero.is-visible { display: block; }
.pk .android-hero-title { font-weight: 700; margin: 0 0 4px; }
.pk .android-hero-sub { margin: 0 0 14px; color: var(--pk-ink-2); font-size: .93rem; }

.pk .android-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }

.pk .android-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 15px;
  border: 1px solid var(--pk-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: .95rem;
  background: var(--pk-surface);
  color: var(--pk-ink);
}
.pk .android-input::placeholder { color: var(--pk-ink-3); }

.pk .android-submit {
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--pk-brand);
  color: #04262B;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: var(--pk-shadow-brand);
  transition: transform .2s var(--pk-ease);
}
.pk .android-submit:hover { transform: translateY(-2px); }
.pk .android-submit[disabled] { opacity: .55; cursor: default; transform: none; }

.pk .android-beta {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--pk-ink-2);
  cursor: pointer;
}
.pk .android-beta input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--pk-brand); }

.pk .android-msg { flex: 1 0 100%; margin: 0; font-size: .85rem; }
.pk .android-msg:empty { display: none; }
.pk .android-msg.is-error { color: #C4402B; font-weight: 700; }
.pk .android-msg.is-ok { color: var(--pk-brand-ink); font-weight: 700; }

/* Honeypot and the visually-hidden label. `left` rather than an inset-inline
   property on purpose: this must stay off-screen in RTL too, and an
   inline-start offset would place it off the right edge, where some browsers
   still create a scroll region. */
.pk .android-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.pk .android-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  .pk .android-form--hero .android-input { flex-basis: 100%; }
  .pk .android-form--hero .android-submit { flex: 1 0 100%; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */

@media print {
  .pk-header, .pk-progress, .pk-langs, .pk-hero__glow, .pk-float { display: none !important; }
  .pk { background: #fff; color: #000; }
  .pk-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   23. Packing guides (/guides)
   --------------------------------------------------------------------------
   A long-form reading page rather than a landing page, so it reuses the
   section, checklist and CTA components and adds only what it needs: a
   narrower measure and the jump navigation.
   -------------------------------------------------------------------------- */

.pk-guide-hero { padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px); }

.pk-guide-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 36px;
}
.pk-guide-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--pk-radius);
  border: 1px solid var(--pk-line);
  background: var(--pk-surface);
  font-size: .93rem;
  font-weight: 500;
  color: var(--pk-ink-2);
  transition: border-color .2s var(--pk-ease), color .2s var(--pk-ease), transform .2s var(--pk-ease);
}
.pk-guide-nav a:hover {
  border-color: var(--pk-brand);
  color: var(--pk-ink);
  transform: translateY(-2px);
}
.pk-guide-nav svg { width: 19px; height: 19px; flex: none; color: var(--pk-brand-ink); }

/* The guide sections are one column of prose, so the two-column checklist
   used on the landing page would leave the eye jumping between columns for
   items that read as a sequence. */
.pk-shell--narrow .pk-checklist { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   24. Aggregate rating
   --------------------------------------------------------------------------
   The visible counterpart to the aggregateRating structured data. It is not
   decoration: Google requires a marked-up rating to be shown on the page, so
   this element and the JSON-LD in layout.php live and die together.
   -------------------------------------------------------------------------- */

.pk-rating {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--pk-line);
  background: var(--pk-surface);
  box-shadow: var(--pk-shadow-sm);
}
.pk-rating__stars { color: #F5A623; letter-spacing: .08em; font-size: 1rem; }
.pk-rating__value {
  font-family: var(--pk-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.pk-rating__meta { font-size: .85rem; color: var(--pk-ink-3); }

/* --------------------------------------------------------------------------
   25. Trust strip band
   --------------------------------------------------------------------------
   An inverted shelf between the hero and the features. The strip used to be
   grey text on a grey band — the one section with no brand colour in it, and
   it read as dead space rather than a claim worth making.

   Contrast was measured, not eyeballed. The obvious way to build this is
   white or teal text on a bright teal fill, but white on #06BEBD is 2.3:1 and
   fails outright; a dark ground with the brand teal on top is 8.7:1.
   -------------------------------------------------------------------------- */

.pk-stats-band {
  background: #16232C;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.pk-stats-band .pk-stat__value { color: #2ED3D1; }
.pk-stats-band .pk-stat__label { color: #A9B6C3; }

@media (prefers-color-scheme: dark) {
  /* The page canvas is already #11171d, so the light-mode ground would all
     but disappear against it. Going a step darker keeps the band reading as a
     distinct shelf rather than a slightly-off rectangle, and the hairlines
     give it an edge the light theme gets from sheer contrast. */
  .pk-stats-band {
    background: #0B1116;
    border-top-color: var(--pk-line);
    border-bottom-color: var(--pk-line);
  }
}

/* --------------------------------------------------------------------------
   26. Bento — secondary features in panels of unequal size
   --------------------------------------------------------------------------
   A deliberate break in rhythm: after several full-width alternating rows,
   a grid of differently-sized panels stops the page feeling like a list.

   One tall panel takes the strongest feature and the only screenshot; the
   other two draw their imagery in CSS, so the section is complete without
   waiting on new artwork and stays sharp at any density.
   -------------------------------------------------------------------------- */

.pk-bento {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "share share"
    "reminders print";
}

@media (max-width: 860px) {
  .pk-bento {
    grid-template-columns: 1fr;
    grid-template-areas: "share" "reminders" "print";
  }
}

.pk-bento__panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 28px;
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease);
}
.pk-bento__panel:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-md); }

.pk-bento__panel--wide { grid-area: share; }
.pk-bento__panel:nth-of-type(2) { grid-area: reminders; }
.pk-bento__panel:nth-of-type(3) { grid-area: print; }

/* ---------------------------------------------------------------------------
   The wide panel: copy on the left, angled devices on the right.
   --------------------------------------------------------------------------- */

.pk-bento__panel--wide {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  /* No padding on the trailing edge: the devices are meant to run off it. */
  padding: clamp(32px, 4vw, 52px);
  padding-inline-end: 0;
  min-height: 540px;
}
.pk-bento__panel--wide:hover { transform: none; }

/* Heading at the top of the column, body at the foot of it. The gap between
   them is the point — it gives the panel its horizontal, editorial feel
   rather than a stacked card. */
.pk-bento__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.pk-bento__panel--wide .pk-bento__copy p { max-width: 42ch; font-size: 1rem; }

/* The devices are deliberately larger than the box that holds them and are
   cropped by the panel on three sides — top, bottom and trailing edge. That
   crop is the whole effect: a device fully inside the panel reads as a
   picture of a phone, a device running off the edge reads as the app
   continuing past the frame.

   Sizes are percentages of this column, so the crop holds its proportions at
   every width instead of needing a breakpoint per size. The negative block
   margins cancel the panel's own vertical padding so the phones can reach
   its top and bottom edges. */
.pk-bento__devices {
  position: relative;
  min-height: 480px;
  margin-block: calc(clamp(32px, 4vw, 52px) * -1);
}

.pk-bento__device { position: absolute; }
.pk-bento__device .pk-phone { width: 100%; margin: 0; }

/* Widths are of the PHONE, not of the space it occupies. At 19 degrees a
   9:19.5 device has a horizontal footprint of 1.65x its own width
   (cos19 + 19.5/9 * sin19), so 47% here already fills about 78% of the
   column. Sizing to the footprint instead is what made these far too big on
   the previous pass.

   The angle lives on the phone, the scroll offset on the wrapper — one
   transform cannot carry both, and site.js must not need to know the angle. */
/* 56% rather than 48%: at 48 the two rotated rectangles still overlapped by
   about 20px. Their axis-aligned boxes overlap either way — the phones are
   tilted, so what matters is the distance between the rotated shapes, and a
   separating-axis check puts them 29px apart here. Pushing further right
   only buys more gap at the cost of the back device disappearing off the
   panel; at 56% it still shows about two thirds of its height. */
.pk-bento__device--back {
  inset-inline-start: 56%;
  top: -10%;
  width: 46%;
  z-index: 1;
}
.pk-bento__device--back .pk-phone { transform: rotate(-19deg); }

.pk-bento__device--front {
  inset-inline-start: 8%;
  top: 14%;
  width: 47%;
  z-index: 2;
}
.pk-bento__device--front .pk-phone { transform: rotate(-19deg); }

/* Single column: the devices sit under the copy, still cropped at the
   bottom but no longer running off the side, since there is no side left to
   run off once the panel spans the viewport. */
@media (max-width: 860px) {
  .pk-bento__panel--wide {
    grid-template-columns: 1fr;
    padding-inline-end: clamp(32px, 4vw, 52px);
    min-height: 0;
  }
  .pk-bento__devices {
    min-height: 340px;
    margin-block: 0 calc(clamp(32px, 4vw, 52px) * -1);
  }
  .pk-bento__device--back  { inset-inline-start: 52%; top: 4%;  width: 38%; }
  .pk-bento__device--front { inset-inline-start: 8%;  top: 14%; width: 39%; }
}

@media (max-width: 560px) {
  .pk-bento__devices { min-height: 290px; }
  .pk-bento__device--back  { inset-inline-start: 50%; width: 46%; }
  .pk-bento__device--front { inset-inline-start: 2%;  width: 47%; }
}

.pk-bento__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--pk-brand-soft);
  color: var(--pk-brand-ink);
  margin-bottom: 18px;
}
.pk-bento__icon svg { width: 22px; height: 22px; }
.pk-bento__copy h3 { margin-bottom: 10px; }
.pk-bento__copy p { color: var(--pk-ink-2); font-size: .95rem; }

/* --- Drawn notification stack -------------------------------------------- */

.pk-notes { margin-top: auto; display: grid; gap: 10px; }

.pk-note {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--pk-radius);
  background: var(--pk-surface-2);
  border: 1px solid var(--pk-line);
  font-size: .85rem;
  font-weight: 600;
  text-align: start;
}
/* Each row sits slightly further in, so the stack reads as depth rather than
   a plain list. The last is full width, as the one "in front". */
.pk-note:nth-child(1) { margin-inline: 16px 0; opacity: .72; }
.pk-note:nth-child(2) { margin-inline: 8px 0;  opacity: .88; }

.pk-note__icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--pk-brand-soft);
  color: var(--pk-brand-ink);
}
.pk-note__icon svg { width: 16px; height: 16px; }
.pk-note small { display: block; font-weight: 500; font-size: .74rem; color: var(--pk-ink-3); margin-top: 1px; }

/* --- Drawn PDF sheet ------------------------------------------------------ */

.pk-sheet {
  margin-top: auto;
  margin-inline: auto;
  margin-bottom: -40px;
  width: min(260px, 82%);
  padding: 18px 18px 26px;
  border-radius: 12px 12px 4px 4px;
  background: var(--pk-surface-2);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-md);
  transform: rotate(-2deg);
  transition: transform .4s var(--pk-ease);
}
.pk-bento__panel:hover .pk-sheet { transform: rotate(0deg) translateY(-4px); }

.pk-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.pk-sheet__title { font-size: .82rem; font-weight: 700; }
.pk-sheet__tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--pk-brand);
  color: #04262B;
}
/* Ruled lines standing in for list rows; the first few are "ticked". */
.pk-sheet__row {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--pk-line);
  margin-bottom: 9px;
}
.pk-sheet__row:nth-child(odd) { width: 88%; }
.pk-sheet__row:nth-child(even) { width: 66%; }
.pk-sheet__row.is-done { background: var(--pk-brand); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .pk-sheet { transform: none; }
}

/* --------------------------------------------------------------------------
   27. Pricing page
   --------------------------------------------------------------------------
   The comparison is a real <table>. It is tabular data, and the column
   headers are what tell a screen-reader user which plan a tick belongs to —
   a grid of divs would announce forty ticks with no context.
   -------------------------------------------------------------------------- */

/* Four tiers across: free, then the three ways to pay. Equal columns so no
   card claims importance by size — the featured one earns it with a border
   and a tag instead. */
.pk-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  align-items: stretch;
  margin-top: 8px;
}
@media (max-width: 980px) { .pk-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .pk-tiers { grid-template-columns: 1fr; } }

.pk-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 22px 26px;
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow-sm);
  text-align: center;
  transition: transform .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}
.pk-tier:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-md); }

.pk-tier--featured {
  border-color: var(--pk-brand);
  box-shadow: var(--pk-shadow-md), 0 0 0 1px var(--pk-brand);
}
.pk-tier__tag {
  position: absolute;
  top: -12px;
  inset-inline: 0;
  width: fit-content;
  margin-inline: auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--pk-brand);
  color: var(--pk-accent-on);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pk-tier__name {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  margin-bottom: 14px;
}
.pk-tier__amount {
  font-family: var(--pk-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.35rem);
  line-height: 1.05;
  color: var(--pk-ink);
}
.pk-tier__period { font-size: .85rem; color: var(--pk-ink-3); margin-top: 4px; }
.pk-tier__save {
  display: inline-block;
  margin: 12px auto 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pk-brand-soft);
  color: var(--pk-brand-ink);
  font-size: .74rem;
  font-weight: 700;
}
/* margin-top:auto pins the note to the foot of every card, so the four sit on
   one baseline however long the copy runs in a given language. */
.pk-tier__note {
  margin-top: auto;
  padding-top: 18px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--pk-ink-2);
}

.pk-tiers__cta { margin-top: clamp(28px, 4vw, 40px); text-align: center; }
.pk-tiers__cta .pk-small { max-width: 52ch; margin-inline: auto; }

/* Horizontal scroll is the escape hatch of last resort — the table is built
   to fit 320px — but a locale with long feature names should scroll rather
   than force the whole page wider. */
.pk-compare-wrap {
  max-width: 900px;
  margin-inline: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pk-compare {
  width: 100%;
  /* separate, NOT collapse: under collapse the borders belong to the table
     rather than to the cells, which makes per-cell rules unreliable. Every
     rule here is drawn with border-top on the cells. */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pk-surface);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius-lg);
  overflow: hidden;
}

/* NOT sticky, deliberately. `position: sticky` resolves against the nearest
   scroll container, and .pk-compare-wrap is one: overflow-x:auto computes
   overflow-y to auto as well. So `top: 72px` was measured from the top of the
   wrapper, not the viewport — the wrapper never scrolls, so the header simply
   sat 72px lower than its slot for ever, leaving a void above it and covering
   the top of the first row. It never stuck to anything. Making it work would
   mean giving up the horizontal scroll escape hatch, which matters more on a
   320px screen than a following header does on a twenty-row table. */
.pk-compare thead th {
  background: var(--pk-surface);
  font-family: var(--pk-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  text-align: center;
  padding: 16px 12px;
  border-bottom: 1px solid var(--pk-line);
}
.pk-compare thead th:first-child { text-align: start; padding-inline-start: 22px; }
.pk-compare thead .pk-compare__premium { color: var(--pk-brand-ink); }

/* Group heading rows. The order of the groups is the argument the page is
   making, so they are labelled rather than left as bare separators. */
.pk-compare__group th {
  text-align: start;
  padding: 20px 22px 12px;
  background: var(--pk-surface-2);
  border-block: 1px solid var(--pk-line);
  font-family: var(--pk-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pk-ink);
}
.pk-compare__group th small {
  display: block;
  margin-top: 3px;
  font-family: var(--pk-font-body);
  font-size: .8rem;
  font-weight: 500;
  color: var(--pk-ink-3);
}

.pk-compare tbody th[scope="row"] {
  text-align: start;
  font-weight: 500;
  font-size: .95rem;
  color: var(--pk-ink-2);
  padding: 13px 22px;
}
/* Every row rule except the one under the header, which thead draws itself.
   `tr + tr` alone is not enough: the groups are separate <tbody> elements, so
   the first row of the second and third group is nobody's sibling and lost its
   rule the moment the group heading rows were removed. */
.pk-compare tbody tr + tr th[scope="row"],
.pk-compare tbody tr + tr td,
.pk-compare tbody + tbody tr:first-child th[scope="row"],
.pk-compare tbody + tbody tr:first-child td { border-top: 1px solid var(--pk-line); }
.pk-compare__group + tr th[scope="row"],
.pk-compare__group + tr td { border-top: 0; }

.pk-compare__val {
  text-align: center;
  padding: 13px 12px;
  width: 22%;
  min-width: 92px;
}
.pk-compare__yes { color: var(--pk-brand-ink); }
.pk-compare__yes svg { width: 20px; height: 20px; margin-inline: auto; }
.pk-compare__no { color: var(--pk-ink-3); font-size: 1.1rem; }
.pk-compare__limit { font-size: .88rem; font-weight: 600; color: var(--pk-ink); }

/* The premium column is tinted the whole way down, so the eye can follow it
   without re-reading the header. */
.pk-compare th:last-child,
.pk-compare td:last-child { background: var(--pk-brand-soft); }
.pk-compare__group th { background: var(--pk-surface-2); }

@media (max-width: 560px) {
  .pk-compare thead th { font-size: .72rem; padding: 13px 8px; }
  .pk-compare thead th:first-child,
  .pk-compare__group th,
  .pk-compare tbody th[scope="row"] { padding-inline: 14px; }
  .pk-compare tbody th[scope="row"] { font-size: .88rem; padding-block: 11px; }
  .pk-compare__val { min-width: 74px; padding-inline: 6px; }
  .pk-compare__limit { font-size: .8rem; }
}