/* ==========================================================================
   presskit.css - the /presskit page.
   Rides on the index_v2.css tokens and chrome.css (nav, footer).
   Grounds: paper, tint, lavender follow the theme; night is fixed.
   Colour: greys, ink, white and the blue family only; shadows are soft and neutral.
   Solid surfaces only, 14 px radius, spacing 8 16 24 32 48 72 112.
   ========================================================================== */

.pk {
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --gap: 24px;
    --bento-gap: 24px;
    --bento-radius: 16px;
    --sh-rest: 0 1px 2px rgba(17, 17, 24, .06), 0 6px 16px rgba(17, 17, 24, .07);
    --sh-hover: 0 4px 10px rgba(17, 17, 24, .08), 0 16px 32px rgba(17, 17, 24, .12);
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
}
.pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
:where(.pk img) { display: block; max-width: 100%; height: auto; }
.pk p, .pk dd, .pk dt, .pk li, .pk figcaption, .pk summary { text-wrap: pretty; }
.pk h1, .pk h2, .pk h3, .pk h4, .pk .pk-intro, .pk summary { text-wrap: balance; }
:where(.pk h1, .pk h2, .pk h3, .pk h4, .pk p, .pk dd, .pk figure) { margin: 0; }
:where(.pk ul, .pk ol, .pk dl) { margin: 0; padding: 0; list-style: none; }
:where(.pk dd, .pk figure) { padding: 0; }

.pk a:focus-visible, .pk button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.pk-night a:focus-visible, .pk-night button:focus-visible { outline-color: #FFFFFF; }

body { overflow-x: clip; } /* hidden would turn the body into a scroll container and break every sticky bar on this page */

.pk-wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* ---- grounds ---- */

.pk-sec { --tile: var(--surface-2); --ink: var(--text); --on-ink: var(--bg); padding: 112px 0; background: var(--bg); color: var(--text); scroll-margin-top: calc(var(--scroll-offset) + 48px); }
.pk-sec--tight { padding-bottom: 72px; }
.pk-tint { --tile: var(--bg); background: var(--surface-2); }
.pk-lav { --tile: var(--bg); background: var(--surface-accent); }

.pk-night {
    --text: #F2F2F5;
    --text-2: #A3A3AD;
    --text-3: #A3A3AD;
    --accent-text: #A78BFA;
    --shadow-device: none;
    color: var(--text);
}
.pk-night {
    --bg: #0E0F12;
    --surface: #17181D;
    --surface-2: #17181D;
    --border: #2A2B32;
    --border-strong: rgba(255, 255, 255, .28);
    background: var(--bg);
}

/* ---- type ---- */

.pk-head { margin-bottom: 48px; max-width: 44rem; }
.pk-head h1, .pk-head h2, .pk-head h3 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.pk-intro { margin-top: 16px; font-size: 1.125rem; line-height: 1.6; color: var(--text-2); max-width: 36rem; }
.pk-lead { font-size: 1.25rem; line-height: 1.55; color: var(--text-2); }
.pk-note { font-size: .875rem; color: var(--text-2); }

.pk-link {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}
.pk-link:hover { text-decoration-color: currentColor; }
.pk-link-line { display: block; margin-top: 8px; font-size: .875rem; line-height: 1.4; color: var(--text-2); }

/* ---- buttons: one family, 48 px high, 14 px radius ---- */

.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    background: var(--accent);
    color: #FFFFFF;
    font: 700 1rem/1.2 var(--font);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--ease);
}
.pk-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.pk-btn:active { background: var(--accent-active); transform: translateY(0); }
.pk-btn--line { background: transparent; color: var(--text); border-color: var(--border-strong); }
.pk-btn--line:hover { background: var(--surface-2); }
.pk-night .pk-btn--line:hover { background: #212229; }
.pk-btn--inverse { background: #FFFFFF; color: #141418; }
.pk-btn--inverse:hover { background: #F2F2F5; }

body > nav .nav-cta { border-radius: var(--radius); }

.pk-store { display: inline-flex; height: 48px; border-radius: var(--radius); font: 700 1rem/1.2 var(--font); transition: transform .25s var(--ease); }
.pk-store:hover { transform: translateY(-2px); }
.pk-store img { height: 48px; width: auto; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---- hero: type only ---- */

.pk-hero { padding: clamp(136px, 23svh, 208px) 0 clamp(56px, 9svh, 88px); background: var(--bg); color: var(--text); text-align: center; }
.pk-hero-in { display: flex; flex-direction: column; align-items: center; }
.pk-hero-title { max-width: 17ch; font-size: clamp(2.25rem, 7.4vw, 6.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.04em; }
.pk-hl { color: var(--ch-hl); }
[data-theme="dark"] .pk-hl, .pk-night .pk-hl { color: var(--ch-hl-night); }
.pk-hero-lead { max-width: 44rem; margin-top: 32px; font-size: clamp(1.1875rem, 1.9vw, 1.625rem); line-height: 1.45; color: var(--text-2); }
.pk-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 48px; }
.pk-hero-badge { margin: 0; }
.pk-hero-badge a { display: block; width: 168px; height: 56px; }
.pk-hero-badge svg { display: block; width: 168px; height: 56px; }

/* ---- in-page index ---- */

.pk-index { position: sticky; top: var(--nav-height); z-index: 700; background: var(--bg); border-bottom: 1px solid var(--border); }
.pk-index ul { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.pk-index ul::-webkit-scrollbar { display: none; }
.pk-index li:first-child { margin-left: auto; }
.pk-index li:last-child { margin-right: auto; }
.pk-index a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 56px;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.pk-index a:hover, .pk-index a[aria-current="true"] { color: var(--text); }
.pk-index a[aria-current="true"] { border-bottom-color: var(--accent); }

/* ---- at a glance ---- */

.pk-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(160px, auto)) minmax(120px, auto); grid-auto-rows: minmax(120px, auto); gap: var(--bento-gap); }
.pk-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 24px 32px;
    border-radius: var(--bento-radius);
    background: var(--tile);
    overflow: hidden;
}
.pk-tile strong { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.pk-tile span { max-width: 24rem; font-size: 1.125rem; line-height: 1.45; color: var(--text-2); }
.pk-tile--a { grid-column: 1 / 6; grid-row: 1 / 3; color: #FFFFFF; }
.pk-tile--a strong { font-size: clamp(6rem, 14vw, 11rem); letter-spacing: -0.05em; }
.pk-tile--a span { color: rgba(255, 255, 255, .92); font-size: 1.25rem; }
.pk-tile:not(.pk-tile--a) { justify-content: flex-start; }
.pk-tile:not(.pk-tile--a) span { margin-top: auto; }
.pk-tile--b { grid-column: 6 / 13; grid-row: 1; background: var(--surface-accent); }
.pk-tile--b strong { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.pk-tile--c { grid-column: 6 / 10; grid-row: 2; }
.pk-tile--d { grid-column: 10 / 13; grid-row: 2; }
.pk-tile--e { grid-column: 1 / 6; grid-row: 3; background: var(--surface-accent); }
.pk-tile--f { grid-column: 6 / 10; grid-row: 3; }
.pk-tile--f strong { font-size: clamp(2.2rem, 3vw, 3rem); }
.pk-tile--g { grid-column: 10 / 13; grid-row: 3; background: var(--surface-accent); }
.pk-tile--g strong { font-size: clamp(2.2rem, 3vw, 3rem); }
.pk-tile--h { grid-column: 1 / 5; grid-row: 4; }
.pk-tile--i { grid-column: 5 / 9; grid-row: 4; }
.pk-tile--j { grid-column: 9 / 13; grid-row: 4; }
.pk-tile--h, .pk-tile--i, .pk-tile--j { padding: 20px 32px; }
.pk-tile--h strong, .pk-tile--i strong, .pk-tile--j strong { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }

/* ---- cards: the tile every section is built from ---- */

.pk-card { padding: 32px; border-radius: var(--radius); background: var(--tile); }
.pk-card h3, .pk-card h4 { letter-spacing: -0.01em; }
.pk-card p { color: var(--text-2); }
.pk-card--accent, .pk-tile--accent {
    --text: #FFFFFF;
    --text-2: rgba(255, 255, 255, .92);
    --accent-text: #FFFFFF;
    --border-strong: rgba(255, 255, 255, .6);
    background: var(--ch-accent);
    color: #FFFFFF;
}
[data-theme="dark"] .pk-card--accent, [data-theme="dark"] .pk-tile--accent { background: var(--ch-accent-night); }
.pk-tile--accent span { color: rgba(255, 255, 255, .92); }
.pk-sub { margin: 72px 0 24px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }

[data-theme="dark"] :is(.pk-card, .pk-tile):not(a, .pk-card--accent, .pk-tile--accent),
.pk-night :is(.pk-card, .pk-tile):not(a, .pk-card--accent, .pk-tile--accent) { border: 1px solid var(--border); }

/* ---- chapter palettes: greys, ink, white and the blue family; tokens only, light and dark ---- */

:root { --ch-hl: #2F5BEA; --ch-hl-night: #7C9DFF; --ch-accent: #1A2C86; --ch-accent-night: #2A44C4; }
.pk-ch--ink { --ch-lead: #111115; --ch-on-lead: #FFFFFF; --ch-t1: #F4F5F7; --ch-t2: #E9EBF0; --ch-t3: #DDE0E7; --ch-ink: #1E2028; --ch-on-ink: #FFFFFF; --ch-fg: #111115; --ch-rule: rgba(17,17,21,.10); }
.pk-ch--slate { --ch-lead: #0045BD; --ch-on-lead: #FFFFFF; --ch-t1: #146AFF; --ch-t2: #005CFA; --ch-t3: #0052E0; --ch-ink: #003694; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .22); }
.pk-ch--steel { --ch-lead: #0044B2; --ch-on-lead: #FFFFFF; --ch-t1: #0060FA; --ch-t2: #0058E6; --ch-t3: #0050D1; --ch-ink: #003994; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .22); }
.pk-ch--blue { --ch-lead: #003CBD; --ch-on-lead: #FFFFFF; --ch-t1: #145FFF; --ch-t2: #004FFA; --ch-t3: #0047E0; --ch-ink: #002F94; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .22); }
.pk-ch--iris { --ch-lead: #0032BD; --ch-on-lead: #FFFFFF; --ch-t1: #1453FF; --ch-t2: #0043FA; --ch-t3: #003CE0; --ch-ink: #002794; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .22); }
.pk-ch--navy { --ch-lead: #092172; --ch-on-lead: #FFFFFF; --ch-t1: #0C36C0; --ch-t2: #0B2FA8; --ch-t3: #092990; --ch-ink: #071850; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .22); }
[data-theme="dark"] .pk-ch--ink { --ch-lead: #F2F2F5; --ch-on-lead: #111115; --ch-t1: #0A2D9E; --ch-t2: #0A34BD; --ch-t3: #093ADC; --ch-ink: #092686; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .20); }
[data-theme="dark"] .pk-ch--slate { --ch-lead: #146AFF; --ch-on-lead: #FFFFFF; --ch-t1: #004DD1; --ch-t2: #0056EB; --ch-t3: #0561FF; --ch-ink: #003CA3; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .20); }
[data-theme="dark"] .pk-ch--steel { --ch-lead: #0060FA; --ch-on-lead: #FFFFFF; --ch-t1: #004AC2; --ch-t2: #0054DB; --ch-t3: #005CF0; --ch-ink: #003FA3; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .20); }
[data-theme="dark"] .pk-ch--blue { --ch-lead: #145FFF; --ch-on-lead: #FFFFFF; --ch-t1: #0042D1; --ch-t2: #004AEB; --ch-t3: #0554FF; --ch-ink: #0034A3; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .20); }
[data-theme="dark"] .pk-ch--iris { --ch-lead: #1453FF; --ch-on-lead: #FFFFFF; --ch-t1: #0038D1; --ch-t2: #003FEB; --ch-t3: #0548FF; --ch-ink: #002CA3; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .20); }
[data-theme="dark"] .pk-ch--navy { --ch-lead: #0A43FF; --ch-on-lead: #FFFFFF; --ch-t1: #0830B5; --ch-t2: #0937CE; --ch-t3: #073CE9; --ch-ink: #082891; --ch-on-ink: #FFFFFF; --ch-fg: #FFFFFF; --ch-rule: rgba(255, 255, 255, .20); }

/* ---- depth: a soft neutral drop shadow, a little deeper on hover, never coloured ---- */

[data-theme="dark"] .pk, .pk-night { --sh-rest: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .3); --sh-hover: 0 4px 10px rgba(0, 0, 0, .45), 0 16px 32px rgba(0, 0, 0, .4); }
.pk-tile, .pk-card, .pk-f, .pk-rel, .pk-shot { box-shadow: var(--sh-rest); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pk-tile:hover, .pk-card:hover, .pk-f:hover, .pk-rel:hover, .pk-shot:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }

/* ---- bento: tiles in a 12 column grid, tinted by the chapter palette ---- */

.pk-fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(136px, auto); gap: var(--bento-gap); }
.pk-fgrid > * { grid-column: var(--c); grid-row: var(--r); min-width: 0; }
.pk-fart { display: grid; place-items: center; padding: 16px; border-radius: var(--bento-radius); background: var(--ch-t2); }
.pk-fart img { width: 100%; height: auto; }
.pk-f { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px; border-radius: var(--bento-radius); background: var(--ch-t1); color: var(--ch-fg); outline: 1px solid var(--ch-rule); outline-offset: -1px; }
.pk-f--t1 { background: var(--ch-t1); }
.pk-f--t2 { background: var(--ch-t2); }
.pk-f--t3 { background: var(--ch-t3); }
.pk-f--ink { background: var(--ch-ink); color: var(--ch-on-ink); }
.pk-f--lead, .pk-f--solid { background: var(--ch-lead); color: var(--ch-on-lead); }
.pk-f :is(h3, h4), .pk-ig h3 { color: inherit; }
.pk-f :is(h3, h4) { font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.pk-f p { font-size: 1.0625rem; line-height: 1.5; color: inherit; }
.pk-f--small :is(h3, h4) { font-size: 1.25rem; }
.pk-f--big :is(h3, h4) { font-size: clamp(1.875rem, 4.6vw, 4.25rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; }
.pk-f--big { padding: 32px; gap: 12px; }
.pk-f--big p { max-width: 36rem; font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.4; text-wrap: balance; }
.pk-f--big p + p { font-size: 1rem; }
.pk-f--banner { flex-direction: row; align-items: center; gap: 32px; }
.pk-f--banner :is(h3, h4) { flex: 0 1 auto; max-width: 22rem; }
.pk-f--banner p { max-width: none; }
.pk-f--banner:has(.pk-fixes) { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 8px; align-items: start; }
.pk-f--banner:has(.pk-fixes) :is(h3, h4) { flex: none; }
.pk-fixes { grid-column: 2; grid-row: 1 / 3; display: grid; gap: 12px; padding-left: 1.25em; list-style: disc; font-size: 1.125rem; line-height: 1.45; }
.pk-sec .pk-head--chapter { max-width: none; margin-bottom: 32px; }
.pk-head--chapter h3 { font-size: clamp(1.875rem, 3.6vw, 3.25rem); }
.pk-features-band { margin: -112px 0 72px; padding: 72px 0; background: #0E0F12; color: #F2F2F5; }
.pk-features-band h2 { color: #F2F2F5; font-size: clamp(2.25rem, 5.2vw, 4.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; }

/* ---- dark tiles keep an edge, and the screenshot tiles stay neutral ---- */

[data-theme="dark"] .pk-f:not(.pk-f--lead, .pk-f--solid), .pk-night .pk-f:not(.pk-f--lead, .pk-f--solid) { outline: 1px solid var(--ch-rule); outline-offset: -1px; }
[data-theme="dark"] .pk-brand-plate--night { background: var(--surface); border-color: var(--text-3); }

/* ---- why justRead: differences, and what another reader's own pages say ---- */

.pk-contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pk-contrast-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; }
.pk-contrast-card .pk-link { display: inline-flex; align-items: center; min-height: 44px; }
.pk-contrast-quote { color: var(--text); font-size: 1.375rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.pk-contrast-ours { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-strong); width: 100%; color: var(--text); font-size: 1.1875rem; font-weight: 600; line-height: 1.5; }
.pk-contrast-ours strong { margin-right: 8px; color: var(--accent-text); font-weight: 800; }
.pk-contrast-note { margin: -8px 0 24px; }

/* ---- recent releases: the release sheets, whole ---- */

.pk-fold > summary { display: grid; grid-template-columns: minmax(0, 44rem) auto; justify-content: space-between; align-items: end; column-gap: 48px; list-style: none; cursor: pointer; }
.pk-fold > summary::-webkit-details-marker { display: none; }
.pk-fold > summary h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.pk-fold > summary .pk-intro { display: block; grid-column: 1; }
.pk-fold > summary h2 { grid-column: 1; }
.pk-fold-btn { display: inline-flex; align-items: center; grid-column: 2; grid-row: 1 / 3; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); font-weight: 700; color: var(--text); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.pk-fold > summary:hover .pk-fold-btn { background: var(--bg); transform: translateY(-2px); }
.pk-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: var(--radius); }
.pk-fold-hide, .pk-fold[open] .pk-fold-show { display: none; }
.pk-fold[open] .pk-fold-hide { display: inline; }
.pk-fold[open] > summary { margin-bottom: 48px; }
.pk-rels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bento-gap); }
.pk-rel { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: 16px; border-radius: var(--bento-radius); background: var(--tile); outline: 1px solid var(--border); outline-offset: -1px; }
.pk-rel img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pk-rel--main { grid-column: 1 / 9; grid-row: 1 / 3; justify-content: space-between; }
.pk-rel--s1 { grid-column: 9 / 13; grid-row: 1; }
.pk-rel--s2 { grid-column: 9 / 13; grid-row: 2; }
.pk-rel--half { grid-column: span 6; justify-content: space-between; }
.pk-rel-cap { color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.pk-rel-cap strong { margin-right: 8px; color: var(--text); font-size: 1.25rem; font-weight: 800; }

/* ---- videos: one stage and a playlist; only small images load until someone presses play ---- */

.pk-theater { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--gap); align-items: start; }
.pk-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 10; max-height: min(78vh, 44rem); max-height: min(78svh, 44rem); border-radius: var(--bento-radius); background: #050507; outline: 1px solid var(--border); outline-offset: -1px; box-shadow: var(--sh-rest); scroll-margin-top: calc(var(--scroll-offset) + 16px); }
.pk-stage img, .pk-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pk-stage video:fullscreen { background: #000000; }
.pk-stage [hidden], .pk-stage-acts [hidden] { display: none; }
.pk-stage-play { position: absolute; inset: 0; display: block; }
.pk-stage-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; border-radius: var(--bento-radius); }
.pk-vid-btn { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .35); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.pk-vid-btn::after { content: ""; position: absolute; top: 50%; left: 50%; border-style: solid; border-color: transparent transparent transparent #FFFFFF; border-width: 15px 0 15px 25px; transform: translate(-35%, -50%); }
.pk-stage-play:hover .pk-vid-btn, .pk-stage-play:focus-visible .pk-vid-btn { background: var(--accent-hover); transform: scale(1.06); }
.pk-stage-play:active .pk-vid-btn { background: var(--accent-active); transform: scale(.98); }
.pk-vid-len { position: absolute; right: 16px; bottom: 16px; padding: 2px 10px; border-radius: var(--radius-pill); background: #111115; color: #FFFFFF; font-size: .875rem; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.pk-stage-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px 32px; margin-top: 24px; }
.pk-stage-info h3 { color: var(--text); font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.pk-stage-info p { max-width: 34rem; min-height: 3.1875rem; margin-top: 8px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.5; }
.pk-stage-acts { display: flex; flex-direction: column; gap: 12px; width: 12rem; }
.pk-stage-acts .pk-btn { gap: 10px; padding: 0 20px; }
.pk-stage-acts .pk-btn svg { flex: none; }
.pk-playlist { display: grid; grid-template-rows: repeat(6, 1fr); gap: 4px; align-self: stretch; margin: 0; padding: 0; list-style: none; }
.pk-vid-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; box-sizing: border-box; height: 100%; min-height: 88px; padding: 8px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background-color .25s var(--ease); }
.pk-vid-row:hover { background: var(--surface); }
.pk-vid-row[aria-current="true"] { background: #1E1F26; outline: 1px solid var(--border-strong); outline-offset: -1px; }
.pk-vid-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 6px; background: #050507; }
.pk-vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pk-vid-badge { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(17, 17, 21, .78); }
.pk-vid-badge::after { content: ""; position: absolute; top: 50%; left: 50%; border-style: solid; border-color: transparent transparent transparent #FFFFFF; border-width: 6px 0 6px 10px; transform: translate(-35%, -50%); }
.pk-vid-row[aria-current="true"] .pk-vid-badge { background: var(--accent); }
.pk-vid-meta { display: block; min-width: 0; }
.pk-vid-meta strong { display: block; color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.pk-vid-row[aria-current="true"] strong { font-weight: 800; }
.pk-vid-meta span { display: block; margin-top: 4px; color: var(--text-2); font-size: .875rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
@media (min-width: 641px) {
    .pk-stage-info h3 { line-height: 1.7; }
}
@media (max-width: 1080px) {
    .pk-theater { grid-template-columns: minmax(0, 1fr); }
    .pk-playlist { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); grid-template-rows: none; }
}
@media (max-width: 640px) {
    .pk-stage { aspect-ratio: 4 / 3; }
    .pk-stage-info { grid-template-columns: minmax(0, 1fr); }
    .pk-stage-acts { width: 100%; }
    .pk-vid-btn { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
    .pk-vid-btn::after { border-width: 11px 0 11px 19px; }
    .pk-vid-len { right: 12px; bottom: 12px; }
    .pk-vid-row { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
}

/* ---- screenshots: every one visible, on tinted tiles ---- */

.pk-head--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; max-width: none; }
.pk-shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--bento-gap); }
.pk-shot { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; border-radius: var(--bento-radius); background: var(--ch-t2); color: var(--ch-fg); outline: 1px solid var(--ch-rule); outline-offset: -1px; }
.pk-shot:nth-child(even) { background: var(--ch-t3); }
.pk-shot-open { display: block; border-radius: var(--radius-sm); }
.pk-shot img { width: 100%; height: auto; }
.pk-shot p { text-align: center; font-size: 1rem; font-weight: 700; line-height: 1.3; }

/* ---- brand ---- */

.pk-brand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pk-brand figure { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.pk-brand-plate { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid #E4E4EA; border-radius: var(--radius); background: #FFFFFF; }
.pk-brand-plate--night { background: #0E0F12; border-color: #2A2B32; }
.pk-brand-plate--lav { background: #F5F2FE; border-color: #E4E4EA; }
.pk-brand-plate img { width: 60%; height: auto; }
.pk-brand-plate--icon img { width: 44%; }
.pk-brand figcaption { display: grid; align-content: start; gap: 4px; }
.pk-brand figcaption strong { font-size: 1.125rem; font-weight: 700; }
.pk-brand figcaption span { color: var(--text-2); }
.pk-links { display: grid; justify-items: stretch; gap: 8px; margin-top: 16px; }
.pk-brand-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 72px; align-items: stretch; }
.pk-brand-more > .pk-card { display: flex; flex-direction: column; }
.pk-brand-more h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.pk-swatches { display: grid; gap: 16px; margin-top: 24px; }
.pk-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 16px; border: 1px solid var(--text-3); border-radius: var(--radius-sm); }
.pk-sw strong { font-size: 1.125rem; font-weight: 700; }
.pk-sw code { font: 500 1rem var(--font); }
.pk-sw--violet { background: #7C3AED; color: #FFFFFF; }
.pk-sw--ink { background: #111115; color: #FFFFFF; }
.pk-sw--white { background: #FFFFFF; color: #141418; }
.pk-sw--night { background: #0E0F12; color: #F2F2F5; }
.pk-sw--lav { background: #F5F2FE; color: #141418; }
.pk-type-sample { margin-top: 16px; color: var(--text); font-size: 7rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.pk-type p:not(.pk-type-sample) { margin-top: 16px; color: var(--text-2); line-height: 1.5; }
.pk-weights { display: grid; margin-top: 24px; }
.pk-weights li { padding: 12px 0; border-top: 1px solid var(--border-strong); font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.pk-rules { display: flex; flex: 1; flex-direction: column; justify-content: space-between; margin-top: 24px; }
.pk-rules li { padding: 16px 0; border-top: 1px solid var(--border-strong); line-height: 1.5; }

/* ---- info sheet: a band, then six grouped cards in two balanced columns ---- */

.pk-info-side { margin-bottom: var(--gap); padding: 32px; }
.pk-info-pin { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.pk-info-pin > div { flex: 1 1 22rem; }
.pk-info-icon { width: 96px; height: 96px; border-radius: var(--radius); }
.pk-info-side h2 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.pk-info-side p { margin-top: 8px; font-size: 1.125rem; line-height: 1.5; }
.pk-info-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pk-info-col { display: grid; gap: 16px; }
@media (min-width: 1000px) {
    .pk-ig dl > div { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
}
.pk-ig { padding: 24px; border-radius: var(--radius); background: var(--ch-t1); color: var(--ch-fg); break-inside: avoid; }
.pk-ig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.pk-ig-head h3 { flex: 1 1 10rem; }
.pk-ig h3 { font-size: 1.625rem; font-weight: 900; letter-spacing: -0.02em; }
.pk-ig .pk-btn--line { color: var(--ch-fg); border-color: var(--ch-fg); }
.pk-ig .pk-btn--line:hover { background: var(--ch-t3); }
.pk-ig dl > div { display: grid; row-gap: 4px; padding: 12px 0; border-top: 1px solid var(--ch-rule); }
.pk-ig dt { font-size: .9375rem; font-weight: 800; line-height: 1.4; }
.pk-ig dd { font-size: 1.0625rem; line-height: 1.45; overflow-wrap: anywhere; }
.pk-ig .pk-link { color: var(--ch-fg); font-weight: 600; text-decoration-color: currentColor; }

/* ---- downloads ---- */

.pk-dl { display: grid; gap: var(--gap); }
.pk-dl-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; padding: 48px; }
.pk-dl-main h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.pk-dl-main p { margin-top: 12px; max-width: 32rem; font-size: 1.125rem; line-height: 1.55; }
.pk-dl-contents { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 24px; }
.pk-dl-contents li { font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.pk-dl-parts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.pk-dl-parts > li { grid-column: span 2; }
.pk-dl-parts > li:nth-child(n+4) { grid-column: span 3; }
.pk-dl-parts .pk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; }
.pk-dl-parts h3 { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.02em; }
.pk-dl-parts p { margin-bottom: 24px; line-height: 1.55; }
.pk-dl-parts .pk-btn { margin-top: auto; }


/* ---- contact ---- */

.pk-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }
.pk-contact-icon { width: 240px; height: 240px; border-radius: var(--radius); }
.pk-contact { display: grid; gap: 24px; justify-items: start; }
.pk-contact .pk-lead { max-width: 32rem; }
.pk-mail { font-size: clamp(1.75rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pk-mail a { color: var(--text); text-decoration: none; }
.pk-mail a:hover { color: var(--accent-text); }
.pk-contact .pk-actions { margin-top: 24px; }

/* ---- round 26: readable captions, a clear Listen & Read list, whole release sheets, a balanced info sheet ---- */

.pk-hero-lead { color: var(--text); }
.pk-limits { display: grid; gap: 8px; max-width: 40rem; margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--ch-rule); list-style: none; font-size: 1.0625rem; line-height: 1.45; }
.pk-contrast-note { color: var(--text); font-size: 1.125rem; font-weight: 600; }
.pk-contrast-card .pk-link { font-size: 1.0625rem; font-weight: 700; }
.pk-tile--c strong, .pk-tile--e strong { font-size: clamp(2.2rem, 3vw, 3rem); }
.pk-tile--g strong { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.pk-contrast-card .pk-contrast-ours { padding: 16px; border-top: 0; border-radius: var(--radius-sm); background: var(--surface-accent); color: var(--text); font-size: 1.25rem; }
.pk-rel--half { grid-column: span 6; }
.pk-rel-open { display: block; border-radius: var(--radius-sm); }
.pk-nw { white-space: nowrap; }
.pk-ig dt { font-size: 1rem; font-weight: 700; }
.pk-ig--wide { grid-column: 1 / -1; }
.pk-tile.pk-ch { background: var(--ch-t1); color: var(--ch-fg); }
.pk-tile.pk-tile--t2 { background: var(--ch-t2); }
.pk-tile.pk-tile--t3 { background: var(--ch-t3); }
.pk-tile.pk-tile--ink { background: var(--ch-ink); color: var(--ch-on-ink); }
.pk-tile.pk-tile--ink span { color: rgba(255, 255, 255, .86); }
.pk-tile.pk-tile--lead { background: var(--ch-lead); color: var(--ch-on-lead); }
.pk-tile.pk-tile--lead span { color: #FFFFFF; }
.pk-tile.pk-ch:not(.pk-tile--ink, .pk-tile--lead) span { color: var(--ch-fg); }
.pk-contrast-card, [data-theme="dark"] .pk-contrast-card.pk-card { background: var(--bg); border: 2px solid var(--border-strong); }
.pk-contrast-card .pk-contrast-quote { color: var(--text); }
.pk-info-side p { color: #FFFFFF; }
.pk-f--banner :is(h3, h4) { font-size: 1.75rem; font-weight: 900; line-height: 1.1; }
.pk-f--banner p { font-size: 1.25rem; line-height: 1.45; }
.pk-night .pk-head p { color: #F2F2F5; opacity: .85; }
.pk-intro { text-wrap: balance; }
.pk-tile strong { overflow-wrap: anywhere; }
#contrast-h { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.pk-ig--wide dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.pk-ig--wide dl > div { grid-template-columns: minmax(0, 1fr); }

/* ---- breakpoints ---- */

@media (max-width: 1100px) {
    .pk-brand-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pk-brand-more > :first-child { grid-column: 1 / -1; }
    .pk-swatches { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
    .pk-sw { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; height: 112px; padding: 16px; }
    .pk-dl-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-dl-parts > li, .pk-dl-parts > li:nth-child(n+4) { grid-column: auto; }
    .pk-dl-parts > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 1215px) {
    .pk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
    .pk-tile, .pk-tile--a, .pk-tile--b, .pk-tile--c, .pk-tile--d, .pk-tile--e, .pk-tile--f, .pk-tile--g, .pk-tile--h, .pk-tile--i, .pk-tile--j { grid-column: auto; grid-row: auto; min-height: 192px; }
    .pk-tile--a, .pk-tile--b, .pk-tile--c { grid-column: 1 / -1; }
    .pk-tile--a { min-height: 320px; }
    .pk-tile--j { grid-column: 1 / -1; }
}

@media (min-width: 561px) and (max-width: 1000px) {
    .pk-brand { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .pk-brand figure { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; align-items: center; column-gap: 32px; }
}

@media (min-width: 561px) and (max-width: 720px) {
    .pk-brand figure { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .pk-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pk-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
    .pk-fgrid > * { grid-column: auto; grid-row: auto; }
    .pk-fgrid { grid-auto-flow: row dense; }
    .pk-fgrid > .pk-f--big, .pk-fgrid > .pk-f--banner, .pk-fgrid > .pk-f--lead, .pk-fgrid > .pk-last { grid-column: 1 / -1; }
    .pk-f--banner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pk-f--banner :is(h3, h4) { flex: none; }
    .pk-f--banner:has(.pk-fixes) { display: flex; flex-direction: column; }
    .pk-fart img { width: 100%; max-width: 460px; }
    .pk-contrast { grid-template-columns: minmax(0, 1fr); }
    .pk-rel--main { grid-column: 1 / -1; grid-row: auto; }
    .pk-rel--half { grid-row: auto; grid-column: span 6; }
    .pk-rel--s1, .pk-rel--s2 { grid-column: span 6; grid-row: auto; }
    .pk-ig--wide dl { grid-template-columns: minmax(0, 1fr); }
    .pk-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pk-contact-icon { order: -1; width: 120px; height: 120px; }
    .pk-brand, .pk-brand-more { grid-template-columns: minmax(0, 1fr); }
    .pk-dl-main { padding: 32px; }
}

@media (max-width: 700px) {
    .pk-fold > summary { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .pk-fold-btn { grid-column: 1; grid-row: auto; justify-self: start; }
    .pk-info-groups { grid-template-columns: minmax(0, 1fr); }
    .pk-hero { padding: 132px 0 64px; }
}

@media (max-width: 560px) {
    .pk { --bento-gap: 16px; }
    .pk-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-sec { padding: 72px 0; }
    .pk-wrap { padding: 0 16px; }
    .pk-head { margin-bottom: 32px; }
    .pk-features-band { margin: -72px 0 48px; padding: 48px 0; }
    .pk-tile { padding: 24px; }
    .pk-tile:not(.pk-tile--a) span { margin-top: 0; }
    .pk-swatches { grid-template-columns: minmax(0, 1fr); }
    .pk-sw { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 16px; }
    .pk-tile, .pk-tile--b, .pk-tile--c, .pk-tile--d, .pk-tile--e, .pk-tile--f, .pk-tile--g, .pk-tile--h, .pk-tile--i, .pk-tile--j { min-height: 144px; }
    .pk-contact-icon { width: 96px; height: 96px; }
    .pk-brand-logo .pk-brand-plate { aspect-ratio: 5 / 2; }
    .pk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-tile:is(.pk-tile--d, .pk-tile--e, .pk-tile--f, .pk-tile--g, .pk-tile--h, .pk-tile--i) { padding: 20px; min-height: 160px; }
    .pk-tile:is(.pk-tile--d, .pk-tile--e, .pk-tile--f, .pk-tile--g, .pk-tile--h, .pk-tile--i) strong { font-size: 1.75rem; overflow-wrap: anywhere; }
    .pk-tile:is(.pk-tile--d, .pk-tile--e, .pk-tile--f, .pk-tile--g, .pk-tile--h, .pk-tile--i) span { font-size: 1rem; overflow-wrap: anywhere; }
    .pk-tile:is(.pk-tile--b, .pk-tile--c, .pk-tile--j) { min-height: 128px; }
    .pk-card { padding: 24px; }
    .pk-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
    .pk-fgrid > * { grid-column: 1 / -1; }
    .pk-fgrid > .pk-f--pair { grid-column: auto; padding: 12px; }
    .pk-f { padding: 16px; gap: 4px; }
    .pk-fixes { font-size: 1rem; }
    .pk-dl-contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .pk-f :is(h3, h4) { font-size: 1.1875rem; }
    .pk-f p { font-size: 1rem; line-height: 1.45; }
    .pk-f--big { padding: 24px 16px; }
    .pk-fart { padding: 12px; }
    .pk-rel--half, .pk-rel--s1, .pk-rel--s2 { grid-column: 1 / -1; }
    .pk-rel { padding: 12px; }
    .pk-contrast-card { padding: 24px; }
    .pk-contrast-quote { font-size: 1.1875rem; }
    .pk-ig { padding: 16px; }
    .pk-info-side { padding: 24px; }
    .pk-dl-parts { grid-template-columns: minmax(0, 1fr); }
    .pk-actions .pk-btn { flex: 1 1 auto; }
    .pk-dl-parts .pk-btn, .pk-dl-main .pk-btn { align-self: stretch; }
    .pk-dl-main .pk-btn, .pk-info-pin .pk-btn, .pk-contact-grid .pk-actions .pk-btn, .pk-head--row .pk-btn { width: 100%; }
    .pk-ig-head .pk-btn { width: auto; }
    .pk-sub { margin-top: 48px; }
}

@media (max-width: 360px) {
    .pk-btn { padding: 0 16px; }
}

@media print {
    body > nav, footer, .pk-index, .hero .app-store-badge, #cookie-consent-container { display: none !important; }
    .pk, .pk-sec, .pk-night, .pk-tint, .pk-lav {
        --bg: #FFFFFF;
        --surface: #F4F4F6;
        --surface-2: #F4F4F6;
        --tile: #F4F4F6;
        --text: #141418;
        --text-2: #5B5B66;
        --text-3: #5B5B66;
        --accent-text: #7C3AED;
        --border: #E4E4EA;
        --border-strong: rgba(0, 0, 0, .28);
        background: #FFFFFF;
        color: #141418;
    }
    .pk-sec { padding: 32px 0; }
    .pk-tile--a, .pk-tile--accent, .pk-card--accent { color: #141418; }
    .pk-head, .pk-tile, .pk-card, .pk-f, .pk-fart, .pk-stage, .pk-vid-row, .pk-ig, .pk-rel, .pk-shot { break-inside: avoid; }
    .pk-head h2, .pk-head h3, .pk-sub { break-after: avoid; }
}

/* ---- motion: the hero rises on load, tiles and heads rise once as they enter the screen ---- */

@keyframes pk-rise { from { opacity: 0; transform: translateY(20px); } }
.pk-hero-in > * { animation: pk-rise .8s var(--ease) both; }
.pk-hero-in > .pk-hero-lead { animation-delay: .1s; }
.pk-hero-in > .pk-hero-row { animation-delay: .2s; }

.pk-anim [data-reveal]:not([data-reveal="group"], .is-done) {
    transition: opacity .6s var(--ease) var(--rd, 0s), transform .6s var(--ease) var(--rd, 0s), box-shadow .3s var(--ease);
}
.pk-anim [data-reveal]:not([data-reveal="group"], .is-in) { opacity: 0; transform: translateY(24px); }
:is(.pk-fgrid, .pk-bento, .pk-rels, .pk-shots, .pk-contrast, .pk-dl-parts, .pk-brand, .pk-brand-more) > :nth-child(2) { --rd: .06s; }
:is(.pk-fgrid, .pk-bento, .pk-rels, .pk-shots, .pk-contrast, .pk-dl-parts, .pk-brand, .pk-brand-more) > :nth-child(3) { --rd: .12s; }
:is(.pk-fgrid, .pk-bento, .pk-rels, .pk-shots, .pk-contrast, .pk-dl-parts, .pk-brand, .pk-brand-more) > :nth-child(4) { --rd: .18s; }
:is(.pk-fgrid, .pk-bento, .pk-rels, .pk-shots, .pk-contrast, .pk-dl-parts, .pk-brand, .pk-brand-more) > :nth-child(5) { --rd: .24s; }
:is(.pk-fgrid, .pk-bento, .pk-rels, .pk-shots, .pk-contrast, .pk-dl-parts, .pk-brand, .pk-brand-more) > :nth-child(n+6) { --rd: .3s; }

@media (prefers-reduced-motion: reduce) {
    .pk-hero-in > * { animation: none; }
    .pk-tile, .pk-card, .pk-f, .pk-rel, .pk-shot, .pk-btn, .pk-store, .pk-link, .pk-index a, .pk-fold-btn { transition: none; }
    .pk-tile:hover, .pk-card:hover, .pk-f:hover, .pk-rel:hover, .pk-shot:hover, .pk-btn:hover, .pk-store:hover { transform: none; }
    .pk-vid-btn, .pk-vid-row { transition: none; }
    .pk-stage-play:hover .pk-vid-btn, .pk-stage-play:focus-visible .pk-vid-btn, .pk-stage-play:active .pk-vid-btn { transform: none; }
}

/* ---- changelog: what changed, update by update ---- */

.pk-cl { --cl-ac: #003CBD; --cl-bar: #145FFF; --cl-barx: #003CBD; }
[data-theme="dark"] .pk-cl { --cl-ac: #8FB0FF; --cl-bar: #0554FF; --cl-barx: #8FB0FF; }
.pk-cl-stats { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 48px; padding: 0; list-style: none; }
.pk-cl-stats li { display: flex; flex: 1 1 200px; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1.5px solid var(--text); }
.pk-cl-stats strong { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-cl-stats span { color: var(--text-2); }
.pk-cl-cadence { margin: 0 0 40px; padding: 32px; border-radius: 16px; background: var(--surface-2); }
.pk-cl-cadence h3, .pk-cl-filter h3 { margin: 0 0 20px; font-size: 1.125rem; font-weight: 700; }
.pk-cl-cadence ol { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 20px); margin: 0; padding: 0; list-style: none; }
.pk-cl-cadence li { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pk-cl-bar { display: block; width: 100%; max-width: 56px; height: calc(var(--h) * 1.3px); border-radius: 8px 8px 2px 2px; background: var(--cl-bar); }
.pk-cl-cadence .is-now .pk-cl-bar { background: var(--cl-barx); }
.pk-cl-n { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-cl-m { font-size: .8125rem; color: var(--text-2); }
.pk-cl-filter { margin: 0 0 32px; }
.pk-cl-filter[hidden] { display: none; }
.pk-cl-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.pk-cl-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text); font: 700 .9375rem/1 var(--font); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.pk-cl-chip:hover { background: var(--surface-2); transform: translateY(-1px); }
.pk-cl-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.pk-cl-count { margin-left: 8px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .8; }
.pk-cl-status { min-height: 1.5em; margin: 0 0 16px; color: var(--text-2); }
.pk-cl-list { margin: 0; padding: 0; list-style: none; }
.pk-cl-rel { border-top: 1.5px solid var(--border); }
.pk-cl-rel[hidden], .pk-cl-kind[hidden] { display: none; }
.pk-wrap > .pk-cl-list > .pk-cl-rel:first-child { border-top-color: var(--text); }
.pk-cl-rel summary { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 44px; grid-template-areas: "ver sum tog" "when sum tog"; align-items: center; gap: 4px 16px; padding: 10px 0; list-style: none; cursor: pointer; }
.pk-cl-rel summary::-webkit-details-marker { display: none; }
.pk-cl-rel summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.pk-cl-ver { grid-area: ver; align-self: end; white-space: nowrap; font-size: 1.875rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.pk-cl-when { grid-area: when; align-self: start; font-size: .875rem; line-height: 1.3; color: var(--text-2); }
.pk-cl-sum { grid-area: sum; color: var(--text-2); }
.pk-cl-tog { grid-area: tog; position: relative; width: 44px; height: 44px; border: 1.5px solid var(--border-strong); border-radius: 999px; transition: background-color .2s var(--ease); }
.pk-cl-rel summary:hover .pk-cl-tog { background: var(--surface-2); }
.pk-cl-tog::before, .pk-cl-tog::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: var(--text); transition: transform .25s var(--ease); }
.pk-cl-tog::after { transform: rotate(90deg); }
.pk-cl-rel details[open] .pk-cl-tog::after { transform: rotate(0deg); }
.pk-cl-body { display: grid; gap: 20px; max-width: 46rem; padding: 4px 0 32px; }
.pk-cl-kind h3 { margin: 0 0 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-ac); }
.pk-cl-kind ul { display: grid; gap: 6px; margin: 0; padding: 0 0 0 20px; list-style: disc; font-size: 1.0625rem; line-height: 1.5; }
.pk-cl-kind li::marker { color: var(--cl-ac); }
.pk-cl-older { margin-top: 24px; }
.pk-cl-older > summary { display: inline-block; list-style: none; cursor: pointer; border-radius: var(--radius); }
.pk-cl-older > summary::-webkit-details-marker { display: none; }
.pk-cl-older > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pk-cl-older > summary:hover .pk-fold-btn { background: var(--surface-2); transform: translateY(-2px); }
.pk-cl-older > .pk-cl-list { margin-top: 24px; }
.pk-cl-hide, .pk-cl-older[open] .pk-cl-show { display: none; }
.pk-cl-older[open] .pk-cl-hide { display: inline; }
@media (max-width: 720px) {
    .pk-cl-stats { margin-bottom: 32px; }
    .pk-cl-cadence { padding: 20px 16px; }
    .pk-cl-rel summary { grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-areas: "ver when tog" "sum sum sum"; row-gap: 4px; padding: 16px 0; }
    .pk-cl-ver { align-self: center; }
    .pk-cl-when { align-self: center; font-size: 1rem; }
    .pk-cl-older > summary, .pk-cl-older .pk-fold-btn { display: flex; justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pk-cl-chip, .pk-cl-tog, .pk-cl-tog::before, .pk-cl-tog::after { transition: none; }
}

/* ---- privacy banner copy, pricing, who makes it, press contact person ---- */

.pk-f-copy { display: grid; flex: 1 1 auto; gap: 8px; min-width: 0; }
.pk-f--banner .pk-f-lead { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.pk-f--banner .pk-f-copy p + p { font-size: 1.0625rem; opacity: .86; }

.pk-pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); gap: var(--bento-gap); }
.pk-pgrid > * { min-width: 0; }
.pk-p-ua { grid-column: 1 / 7; grid-row: 1 / 4; }
.pk-p-ua strong { font-size: clamp(5rem, 11vw, 9.5rem); letter-spacing: -0.05em; }
.pk-p-label { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.pk-p-m, .pk-p-y, .pk-p-l { grid-column: 7 / 13; }
.pk-p-m { grid-row: 1; }
.pk-p-y { grid-row: 2; }
.pk-p-l { grid-row: 3; }
.pk-pgrid .pk-p-plan { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.pk-pgrid .pk-p-plan span { margin-top: 0; text-align: right; }
.pk-p-power { grid-column: 1 / 9; grid-row: 4; }
.pk-p-family { grid-column: 9 / 13; grid-row: 4; }
.pk-p-power strong, .pk-p-family strong { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.pk-p-power span { max-width: 40rem; }

.pk-t-lead { grid-column: 1 / 9; grid-row: 1 / 3; }
.pk-t-lead strong { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; }
.pk-t-lead span { font-size: 1.25rem; }
.pk-t-jachym { grid-column: 9 / 13; grid-row: 1; }
.pk-t-petr { grid-column: 9 / 13; grid-row: 2; }
.pk-t-country { grid-column: 1 / 7; grid-row: 3; }
.pk-t-launch { grid-column: 7 / 13; grid-row: 3; }
.pk-t-jachym strong, .pk-t-petr strong, .pk-t-country strong, .pk-t-launch strong { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.pk-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pk-tile .pk-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.pk-tile .pk-links a:focus-visible { outline-color: #FFFFFF; }

.pk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.pk-who strong { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
.pk-who span { color: var(--text-2); font-size: 1.125rem; }
.pk-who a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.pk-codes { max-width: 32rem; padding: 16px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); font-size: 1.125rem; line-height: 1.45; }

@media (max-width: 900px) {
    .pk-pgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .pk-pgrid > * { grid-column: auto; grid-row: auto; }
}