/* ============================================================
   phone-kit.css  –  BlackMamba3D phone prototype, Stage 1
   All rules scoped to html.pk unless noted.
   DO NOT edit index.html. This file ships alongside phone-preview.html.
   ============================================================ */

/* ----------------------------------------------------------
   0. GLOBAL: hide phone-only elements on desktop/coarse-free
   ---------------------------------------------------------- */
[data-pk-only]                       { display: none; }
.pk-proof-group                      { display: contents; } /* layout-neutral on desktop */

/* Show phone-only elements when pk is active */
html.pk [data-pk-only]               { display: block; }

/* Correct display type per component */
html.pk .pk-dock                     { display: flex !important; }
/* shown by JS only when ?opt= present */
html.pk .pk-chapter-sheet            { display: block !important; }
html.pk .pk-scrim                    { display: block !important; }

/* ----------------------------------------------------------
   1. ROOT: snap container, scroll padding, safe padding
   ---------------------------------------------------------- */
html.pk {
  overflow-x: hidden;
  /* option B default – overridden per-option below */
  scroll-snap-type: y mandatory;
  --pk-bar: 54px;
  scroll-padding-top: var(--pk-bar);
}

/* ----------------------------------------------------------
   2. TOP BAR – stop being sticky on phone
   ---------------------------------------------------------- */
html.pk .top-bar { z-index: 895; }

/* Burger hidden – dock owns nav on phone */
html.pk .nav-burger,
html.pk .nav-toggle,
html.pk .burger,
html.pk #burger {
  display: none !important;
}

/* ----------------------------------------------------------
   3. SCROLL MARGIN OVERRIDE (existing rule sets 86px)
   ---------------------------------------------------------- */
html.pk section[id],
html.pk [id^="pxl"],
html.pk #comfyui,
html.pk #thresholds,
html.pk #proof {
  scroll-margin-top: 0;
}

/* ----------------------------------------------------------
   4. CHAPTERS – shared
   ---------------------------------------------------------- */
html.pk .pk-chapter {
  position: relative;
  min-height: calc(100svh - var(--pk-bar));
  box-sizing: border-box;
  overflow: hidden;
}

/* Option B: mandatory stop */
html.pk[data-opt="b"] .pk-chapter{
  scroll-snap-align: start;
}

html.pk[data-opt="b"] .pk-chapter {
  scroll-snap-stop: always;
}

/* Option C: sticky layers */


/* Footer chapter never snap-stops */
html.pk .pk-chapter-footer {
  min-height: auto;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

/* ----------------------------------------------------------
   5. PROOF GROUP (three logo strips as one chapter)
   ---------------------------------------------------------- */
html.pk .pk-proof-group {
  display: block;
  min-height: calc(100svh - var(--pk-bar));
  scroll-snap-align: start;
  box-sizing: border-box;
  padding: 16px 16px;
}

html.pk[data-opt="b"] .pk-proof-group { scroll-snap-stop: always; }

/* Stack the three strips vertically, logos in a tight grid */
html.pk .pk-proof-group .logo-strip-wrap {
  display: block;
  margin-bottom: 20px;
}
html.pk .pk-proof-group .logo-strip-wrap:last-child { margin-bottom: 0; }

html.pk .pk-proof-group .strip-label {
  font-size: 12px;
  color: var(--text-mute, #6b6672);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

html.pk .pk-proof-group .logo-strip {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  /* cancel any marquee / overflow-x on desktop */
  overflow: visible !important;
  animation: none !important;
}

html.pk .pk-proof-group .logo-strip img,
html.pk .pk-proof-group .logo-strip svg {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* ----------------------------------------------------------
   6. REVEAL: reduce to short fade on phone
   ---------------------------------------------------------- */
html.pk .reveal {
  opacity: 0;
  transform: none !important;
  transition: opacity 0.35s ease;
}

html.pk .reveal.visible,
html.pk .reveal.in,
html.pk .reveal.is-visible {
  opacity: 1;
}

html.pk .stagger-children > * {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ----------------------------------------------------------
   7. TEXT FLOOR: 12px minimum inside phone layout
   ---------------------------------------------------------- */
html.pk .work-meta,
html.pk .dcc-name,
html.pk .comfyui-card-tag,
html.pk .comfyui-card-video,
html.pk .comfyui-tag,
html.pk .testimonial-role,
html.pk .strip-label,
html.pk .hero-cta,
html.pk .mentorship-list-link,
html.pk .thresholds-hero-caption .label,
html.pk .eco-m-dept,
html.pk .nav-menu a,
html.pk .footer-ves,
html.pk .vbox-title,
html.pk .lb-cap-count {
  font-size: 12px !important;
}

/* ----------------------------------------------------------
   8. TAP TARGETS: 44px minimum
   ---------------------------------------------------------- */
html.pk .hero-cta,
html.pk .footer-social a,
html.pk .cv-ring,
html.pk .mentorship-list-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

html.pk .testimonial-nav-btn {
  width: 44px !important;
  height: 44px !important;
}

html.pk .testimonial-dots {
  display: none;
}

/* ----------------------------------------------------------
   9. DOCK
   ---------------------------------------------------------- */
html.pk .pk-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #141414;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  padding-right: 12px;
  z-index: 900;
  box-sizing: border-box;
}

html.pk .pk-dock--hidden {
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

/* Chapter button (left) */
html.pk .pk-dock-chapter {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 8px 0 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 13px;
  color: var(--text-strong, #f3f1ed);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.pk .pk-dock-chapter-num {
  color: var(--gold, #f2b705);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

html.pk .pk-dock-chapter svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

html.pk .pk-dock-chapter[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Book a call pill (right) */
html.pk .pk-dock-cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  background: var(--gold, #f2b705);
  color: #000;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 22px;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Muted state: when the chapter already has its own gold CTA */
html.pk .pk-dock-cta--outline {
  background: transparent;
  color: var(--gold, #f2b705);
  border-color: var(--gold, #f2b705);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ----------------------------------------------------------
   10. CHAPTER SHEET (nav drawer)
   ---------------------------------------------------------- */
html.pk .pk-chapter-sheet {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 890;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
  box-sizing: border-box;
}

html.pk .pk-chapter-sheet--open {
  transform: translateY(0);
}

html.pk .pk-chapter-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 20px;
}

html.pk .pk-chapter-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  background: #222222;
  border-radius: 8px;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 13px;
  color: var(--text-strong, #f3f1ed);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

html.pk .pk-chapter-tile--active {
  border-color: var(--gold, #f2b705);
  background: rgba(242,183,5,0.08);
}

html.pk .pk-chapter-tile-num {
  color: var(--text-mute, #6b6672);
  font-feature-settings: "tnum";
  font-size: 11px;
  flex-shrink: 0;
}

html.pk .pk-chapter-sheet-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

html.pk .pk-chapter-sheet-link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--text, #c8c4c0);
  text-decoration: none;
  cursor: pointer;
}

html.pk .pk-chapter-sheet-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
}

html.pk .pk-chapter-sheet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-mute, #6b6672);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease;
}

html.pk .pk-chapter-sheet-icon:hover { color: var(--text-strong, #f3f1ed); }

/* ----------------------------------------------------------
   11. SCRIM (shared by sheet + chapter sheet)
   ---------------------------------------------------------- */
html.pk .pk-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 880;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

html.pk .pk-scrim--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ----------------------------------------------------------
   12. BOTTOM SHEET (content sheets for About, Services, etc.)
   ---------------------------------------------------------- */
html.pk .pk-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 950;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: calc(100svh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(32px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

html.pk .pk-sheet--open {
  transform: translateY(0);
}

html.pk .pk-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
  flex-shrink: 0;
}

html.pk .pk-sheet-handle::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

html.pk .pk-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

html.pk .pk-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-mute, #6b6672);
  flex-shrink: 0;
}

html.pk .pk-sheet-body {
  padding: 20px 16px;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text, #c8c4c0);
}

html.pk .pk-sheet-body p { margin-bottom: 14px; }
html.pk .pk-sheet-body p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   13. SHELF COMPONENT  [data-shelf]
   ---------------------------------------------------------- */
html.pk [data-shelf] {
  position: relative;
}

html.pk [data-shelf-track] {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 16px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-width: none;
  padding-left: 16px;
  padding-right: 16px;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 4px;
  box-sizing: content-box;
}

html.pk [data-shelf-track]::-webkit-scrollbar { display: none; }

html.pk [data-shelf-track] > * {
  flex: 0 0 calc(100% - 44px);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* First card 16px from left edge (already set by padding-left) */

/* Control row */
html.pk .pk-shelf-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 0;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
}

html.pk .pk-shelf-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-mute, #6b6672);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html.pk .pk-shelf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-strong, #f3f1ed);
  flex-shrink: 0;
  transition: background 0.12s ease;
}

html.pk .pk-shelf-btn:hover { background: rgba(255,255,255,0.06); }

html.pk .pk-shelf-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

html.pk [data-shelf-count] {
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-mute, #6b6672);
  min-width: 36px;
  text-align: center;
}

/* ----------------------------------------------------------
   14. TABS COMPONENT  .pk-tabs
   ---------------------------------------------------------- */
html.pk .pk-tabs-nav {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 16px;
  gap: 0;
  overflow: visible;
}

html.pk .pk-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  min-height: 52px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--text-mute, #6b6672);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

html.pk .pk-tab-btn[aria-selected="true"] {
  color: var(--gold, #f2b705);
  border-bottom-color: var(--gold, #f2b705);
}

html.pk .pk-tab-btn svg { flex-shrink: 0; }

/* Tab panel visibility */
html.pk .pk-tab-panel { display: none; }
html.pk .pk-tab-panel--active { display: block; }

/* ----------------------------------------------------------
   15. DCC MARQUEE  →  static grid on phone
   ---------------------------------------------------------- */
html.pk .dcc-stack {
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

html.pk .dcc-stack-row {
  flex-wrap: wrap !important;
  animation: none !important;
  width: auto !important;
  transform: none !important;
  justify-content: center !important;
  padding: 0 16px !important;
  gap: 12px !important;
  overflow: visible !important;
}

html.pk .dcc-stack-row > * {
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   15b. HIDE DESKTOP-HEAVY CONTENT ON PHONE
        (these would make chapters too tall)
   ---------------------------------------------------------- */

/* Works: hide desktop masonry gallery */
html.pk .works-gallery { display: none !important; }

/* Testimonials: hide pair carousel */
html.pk .testimonials-carousel,
html.pk .testimonial-dots { display: none !important; }

/* Services: hide full pillar grid and CTA block */
html.pk .pillars,
html.pk .pk-chapter .services-cta { display: none !important; }

/* PXLnexus: hide full SVG board AND eco-mobile (too tall), show phone shelf */
html.pk .eco-board,
html.pk .pk-chapter .eco-mobile,
html.pk .pk-chapter .eco-legend,
html.pk .pk-chapter .eco-endlogos,
html.pk .pk-chapter .eco-call { display: none !important; }

/* R&D (comfyui): hide full grid + dcc-stack + long copy, show phone shelf */
html.pk .pk-chapter .comfyui-grid { display: none !important; }
html.pk .pk-chapter .comfyui-tags { display: none !important; }
html.pk #comfyui .dcc-stack { display: none !important; }
html.pk #comfyui .comfyui-header .copy { display: none !important; }
html.pk .pk-chapter .comfyui-more { display: none !important; }

/* Thresholds: hide strip + dcc-stack + long copy + foot CTA */
html.pk .pk-chapter .thresholds-strip { display: none !important; }
html.pk .pk-chapter .thresholds-cta { display: none !important; }
html.pk #thresholds .dcc-stack { display: none !important; }
html.pk #thresholds .thresholds-header .copy { display: none !important; }
html.pk .pk-chapter .thresholds-foot { display: none !important; }

/* PXL Mentor: hide full mentorship list + long copy block */
html.pk .pk-chapter .mentorship-card > ul,
html.pk .pk-chapter .mentorship-list { display: none !important; }
html.pk .pk-chapter .mentorship-copy { display: none !important; }

/* Footer: compress on phone */
html.pk footer .footer-grid { flex-direction: column; gap: 16px; }

/* About: show only first paragraph to stay within one chapter height */
html.pk .about-body > p:nth-child(n+2) { display: none !important; }

/* ----------------------------------------------------------
   16. SECTION-SPECIFIC PHONE OVERRIDES
   ---------------------------------------------------------- */

/* Hero */
html.pk #hero .hero-portrait,
html.pk #hero .portrait-wrap {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

html.pk #hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
}

/* Works: hide gallery grid, show shelf */
html.pk .works-gallery {
  display: none !important;
}

html.pk .pk-works-shelf {
  margin-top: 16px;
}

/* Works shelf card */
html.pk .pk-works-card {
  background: var(--bg-card, #1a1a1a);
  border-radius: 8px;
  overflow: hidden;
}

html.pk .pk-works-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

html.pk .pk-works-card-body {
  padding: 12px 14px;
}

html.pk .pk-works-card-title {
  font-family: var(--ff-display, 'Bebas Neue', sans-serif);
  font-size: 18px;
  color: var(--text-strong, #f3f1ed);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

html.pk .pk-works-card-meta {
  font-size: 12px;
  color: var(--text-mute, #6b6672);
}

/* Reel: full-bleed card */
html.pk #reel .reel-card {
  width: 100%;
  min-height: calc(100svh - var(--pk-bar));
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

/* Testimonials: hide pair layout, show phone shelf */
html.pk .testimonials-grid,
html.pk .testimonial-pair,
html.pk .testimonial-nav {
  display: none !important;
}

html.pk .pk-testimonials-shelf {
  margin-top: 8px;
}

html.pk .pk-testimonial-card {
  background: var(--bg-card, #1a1a1a);
  border-radius: 8px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

html.pk .pk-testimonial-text {
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-strong, #f3f1ed);
  quotes: "\201C" "\201D";
  margin-bottom: 14px;
}

html.pk .pk-testimonial-text::before { content: open-quote; }
html.pk .pk-testimonial-text::after  { content: close-quote; }

html.pk .pk-testimonial-author {
  font-size: 12px;
  color: var(--text-mute, #6b6672);
  font-style: normal;
}

/* Services: hide existing pillar layout */
html.pk .pillar-grid,
html.pk .services-pillars {
  display: none !important;
}

html.pk .pk-services-shelf-card {
  background: var(--bg-card, #1a1a1a);
  border-radius: 8px;
  padding: 20px 18px;
}

html.pk .pk-services-shelf-card h3 {
  font-family: var(--ff-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  color: var(--text-strong, #f3f1ed);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

html.pk .pk-services-shelf-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #c8c4c0);
}

/* PXLnexus */
html.pk #pxlnexus .eco-desktop,
html.pk #pxlnexus > .pxlnexus-diagram {
  display: none !important;
}

html.pk .pk-nexus-shelf {
  margin-top: 16px;
}

html.pk .pk-nexus-card {
  background: var(--bg-card, #1a1a1a);
  border-radius: 8px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html.pk .pk-nexus-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gold, #f2b705);
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display, 'Bebas Neue', sans-serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

html.pk .pk-nexus-card-name {
  font-family: var(--ff-display, 'Bebas Neue', sans-serif);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--text-strong, #f3f1ed);
}

html.pk .pk-nexus-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #c8c4c0);
}

/* R&D intro clamp */
html.pk .pk-rnd-intro-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* PXL Mentor: copy clamp */
html.pk .pk-mentor-copy-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Footer: extra bottom padding for dock */
html.pk footer {
  padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}

/* ----------------------------------------------------------
   17. OPTION A specific overrides (natural heights)
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   18. OPTION C specific overrides (sticky layers)
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   19. REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.pk {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  html.pk[data-opt="b"] body {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  html.pk footer,
  html.pk .pk-chapter,
  html.pk .pk-proof-group {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  html.pk .pk-sheet,
  html.pk .pk-chapter-sheet,
  html.pk .pk-scrim,
  html.pk .pk-dock-cta,
  html.pk .pk-shelf-btn,
  html.pk .pk-tab-btn {
    transition: none !important;
  }

  html.pk .reveal {
    opacity: 1;
    transition: none !important;
  }
}

/* ----------------------------------------------------------
   21. CHAPTER FIT: every chapter fits the stage (100svh minus dock)
   The stage ends where the dock starts, so chapters carry no dock padding.
   ---------------------------------------------------------- */
html.pk .pk-chapter {
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}
html.pk[data-opt="b"] .pk-chapter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html.pk .pk-chapter > .container { width: 100%; }

/* Proof: the strips drop their desktop padding */
html.pk .pk-proof-group .logo-strip-wrap {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/* Hero: portrait beside the name, not stacked under it */
html.pk #hero .hero-grid { position: relative; display: block; }
html.pk #hero .hero-byline { padding-right: 104px; min-height: 96px; }
html.pk #hero .hero-portrait-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 96px;
  height: 96px;
  margin: 0;
}

/* Reel: the card is the whole stage */
html.pk #reel.pk-chapter { padding: 0 !important; }
html.pk #reel .container { padding: 0; max-width: none; }

/* Thresholds: The Scion is the first card of the shelf, so the large copy goes */
html.pk #thresholds .thresholds-hero { display: none; }

/* PXL Mentor: one Book button, the one under the tabs */
html.pk #pxlmentor .mentorship-card > .mentorship-ctas { display: none; }
html.pk #pxlmentor .mentorship-card { padding-top: 12px; padding-bottom: 12px; }
html.pk #pxlmentor .mentorship-logo { height: 32px; }
html.pk #pxlmentor .mentorship-tagline { margin-bottom: 8px; }
html.pk #pxlmentor .mentorship-heading { font-size: 24px; line-height: 1.1; margin-bottom: 8px; }
html.pk #pxlmentor .mentorship-tagline { margin-bottom: 6px; }
html.pk #pxlmentor .pk-tabs + div { padding-top: 8px; }

/* PXL Mentor: fits the 608px stage of a real iPhone */
html.pk #pxlmentor.pk-chapter { padding-top: 10px !important; padding-bottom: 8px !important; }
html.pk #pxlmentor .pk-tab-btn { padding-top: 6px; padding-bottom: 6px; }
html.pk #pxlmentor .pk-services-shelf-card { padding: 12px 14px; }
html.pk #pxlmentor .pk-services-shelf-card p { font-size: 13px; line-height: 1.45; }
html.pk #pxlmentor .mentorship-cta { white-space: nowrap; font-size: 12px; letter-spacing: 0.08em; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }

/* Reel: fade the poster's own title out behind the card text */
html.pk #reel .reel-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 76%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 76%);
}

/* ----------------------------------------------------------
   22. MORE BUTTON and moved content in sheets
   ---------------------------------------------------------- */
html.pk .pk-more-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--gold, #f2b705);
  cursor: pointer;
  z-index: 5;
}
html.pk .pk-more-btn svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid var(--gold, #f2b705);
  border-radius: 50%;
}
html.pk .pk-sheet-title {
  font-family: var(--ff-display, 'Bebas Neue', sans-serif);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--text-strong, #f3f1ed);
}
html.pk .pk-sheet-body > * + * { margin-top: 20px; }
html.pk .pk-sheet-body .dcc-stack-row {
  animation: none !important;
  transform: none !important;
  flex-wrap: wrap;
  width: auto;
  justify-content: flex-start;
  gap: 16px;
}
html.pk .pk-sheet-body .dcc-stack { overflow: visible; -webkit-mask-image: none; mask-image: none; }

/* Services: the longest pillar sets the shelf height, so it must fit the 608px stage */
html.pk #services.pk-chapter { padding-top: 12px !important; padding-bottom: 8px !important; }
html.pk #services .services-header { margin-bottom: 12px; }
html.pk #services .pk-services-shelf-card { padding: 12px 14px; }
html.pk #services .pk-services-shelf-card h3 { font-size: 20px; margin-bottom: 6px; }
html.pk #services .pk-services-shelf-card p { font-size: 13px; line-height: 1.45; }

/* The body must not be a scroll container, or the chapters snap to it and not to the page */
html.pk body { overflow: visible !important; }

/* Mandatory snap needs a stop at the page end, or the footer can never be reached */
html.pk[data-opt="b"] footer { scroll-snap-align: end; }


/* ----------------------------------------------------------
   23. MENU IN THE TOP BAR, no bottom bar
   ---------------------------------------------------------- */
html.pk .pk-dock {
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
  height: 52px;
  padding: 0 8px 0 0;
  background: none;
  border: 0;
}
html.pk .pk-dock--hidden { transform: translateY(-100%); }
html.pk .pk-dock-chapter-text {
  max-width: calc(100vw - 232px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.pk .pk-dock-chapter[data-first] .pk-dock-chapter-text { display: none; }

html.pk .pk-chapter-sheet {
  top: var(--pk-bar);
  bottom: auto;
  border-radius: 0 0 16px 16px;
  border-top: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transform: translateY(-120%);
  max-height: calc(100svh - var(--pk-bar));
}
html.pk .pk-chapter-sheet--open { transform: translateY(0); }
html.pk .pk-chapter-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 0;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
html.pk .pk-chapter-sheet-foot .pk-chapter-sheet-icons { gap: 0; padding-top: 0; }
html.pk .pk-chapter-sheet-foot .pk-chapter-sheet-links { gap: 4px; padding-top: 0; border-top: 0; flex-wrap: nowrap; margin-left: auto; }
html.pk .pk-chapter-sheet-foot .pk-chapter-sheet-link { padding: 0 9px; white-space: nowrap; }
html.pk .pk-chapter-sheet-link--book {
  background: var(--gold, #f2b705);
  border-color: var(--gold, #f2b705);
  color: #0a0a0a;
  font-weight: 600;
}

/* ----------------------------------------------------------
   24. + BUTTON at the bottom of its section, with room kept for it
   ---------------------------------------------------------- */
html.pk .pk-more-btn { top: auto; bottom: 2px; right: 8px; }
html.pk .pk-chapter.pk-has-more { padding-bottom: 44px !important; }

/* ----------------------------------------------------------
   25. PIPELINE SHELF: official logos
   ---------------------------------------------------------- */
html.pk .pk-nexus-card { position: relative; align-items: flex-start; justify-content: center; min-height: 150px; gap: 10px; cursor: pointer; }
html.pk .pk-nexus-logo { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
html.pk .pk-nexus-card-desc { font-size: 14px; padding-right: 24px; }
html.pk .pk-nexus-chevron { position: absolute; right: 12px; bottom: 16px; width: 16px; height: 16px; color: var(--gold, #f2b705); }
html.pk .pk-chapter .pk-nexus-info { display: none; }
html.pk .pk-sheet-body .eco-card-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold, #f2b705); }

/* ----------------------------------------------------------
   26. FROSTED CARD: the explanation behind a tapped card
   ---------------------------------------------------------- */
html.pk .pk-sheet.pk-glass {
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-height: calc(100svh - var(--pk-bar) - 32px);
  padding: 4px 0 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.22);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 100%),
    rgba(28,28,30,0.58);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  transform: translateY(calc(100% + 32px));
}
html.pk .pk-sheet.pk-glass.pk-sheet--open { transform: translateY(0); box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.28); }
html.pk .pk-glass .pk-sheet-header { padding: 4px 8px 4px 18px; border-bottom: 0; }
html.pk .pk-glass .pk-sheet-title { font-size: 22px; }
html.pk .pk-glass .pk-sheet-body { padding: 0 18px 12px; color: var(--text-strong, #f3f1ed); }
html.pk .pk-glass .comfyui-card-desc { font-size: 15px; line-height: 1.55; color: inherit; margin: 0; }
html.pk .pk-glass .comfyui-card-video { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 12px; color: var(--gold, #f2b705); }
html.pk .pk-tappable { cursor: pointer; }

/* The arrow in the top bar and a tap outside both close the menu, so it needs no X over the tiles */
html.pk .pk-chapter-sheet-close { display: none; }
/* A closed menu keeps no visible edge above the screen */
html.pk .pk-chapter-sheet:not(.pk-chapter-sheet--open) { visibility: hidden; transition: transform 0.17s ease, visibility 0s 0.17s; }

/* ----------------------------------------------------------
   27. EXACT SCREENS (option B)
   The page itself never scrolls, the body does. So the browser bars never
   collapse and 100dvh is always the real visible screen, on any phone. Every
   section is exactly one screen under the top bar: it starts and ends at the edges.
   ---------------------------------------------------------- */
html.pk[data-opt="b"] {
  height: 100%;
  overflow: hidden;
  scroll-snap-type: none;
  scroll-padding-top: 0;
}
html.pk[data-opt="b"] body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  box-sizing: border-box;
  padding-top: var(--pk-bar);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--pk-bar);
}
html.pk[data-opt="b"] .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pk-bar);
  box-sizing: border-box;
}
html.pk[data-opt="b"] .pk-chapter,
html.pk[data-opt="b"] .pk-proof-group,
html.pk[data-opt="b"] footer {
  height: calc(100vh - var(--pk-bar));
  height: calc(100svh - var(--pk-bar));
  height: calc(100dvh - var(--pk-bar));
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
html.pk[data-opt="b"] .pk-chapter { justify-content: safe center; }
html.pk[data-opt="b"] .pk-proof-group { display: flex; flex-direction: column; justify-content: safe center; }
html.pk[data-opt="b"] footer {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding-top: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
html.pk[data-opt="b"] #reel .container { height: 100%; }
html.pk[data-opt="b"] #reel .reel-card { height: 100%; min-height: 0; }
html.pk[data-opt="b"].pk-locked body { overflow-y: hidden !important; }
html.pk .pk-shelf-label { white-space: nowrap; }

/* Room for the + button wins over the tighter section padding */
html.pk #services.pk-chapter.pk-has-more,
html.pk #pxlmentor.pk-chapter.pk-has-more { padding-bottom: 44px !important; }

html.pk .site-version { white-space: nowrap; }

/* A closed sheet takes no keyboard focus */
html.pk .pk-sheet:not(.pk-sheet--open) { visibility: hidden; transition: transform 0.17s ease, visibility 0s 0.17s; }
/* A long sheet can always be closed */
html.pk .pk-sheet:not(.pk-glass) .pk-sheet-header { position: sticky; top: 0; z-index: 2; background: #1a1a1a; padding-top: 12px; }