/* phone-home.css 0.1.0: the PXLmentor home page on a phone. Uses the tokens of pxl-core.css only.
   Every rule is scoped to html.pk, so desktop and tablet never see any of it. */
html.pk {
  --pk-accent: var(--magenta);
  --pk-accent-2: var(--gold);
  --pk-surface: var(--bg-1);
  --pk-surface-2: var(--bg-2);
  --pk-text: var(--ink);
  --pk-dim: var(--ink-dim);
  --pk-line: var(--hair);
  --pk-font: 'Inter', system-ui, sans-serif;
  --pk-display: 'Sora', sans-serif;
  --pk-mono: 'Space Mono', monospace;
}

/* ---- What the page's own scroll motion would have left hidden ---- */
html.pk .reveal,
html.pk .path-card,
html.pk .step-card,
html.pk .logo-row,
html.pk .logo-row img,
html.pk .who-visual,
html.pk .who-body,
html.pk .contrast-frame {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Top bar ---- */
html.pk #nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pk-bar);
  z-index: 900;
  background: var(--bg-0);
}
html.pk #nav .nav-inner { height: var(--pk-bar); padding: 0 12px; }
html.pk #nav .nav-toggle,
html.pk #mobileMenu { display: none !important; }
html.pk #nav .nav-logo { display: flex; align-items: center; min-height: 44px; }

/* ---- Shared section rhythm ---- */
html.pk main { display: block; }
html.pk .pk-chapter .wrap { width: 100%; padding: 0 16px; margin: 0; }
html.pk .pk-chapter .wrap > .pk-shelf,
html.pk .pk-chapter .inner > .pk-shelf { margin-left: -16px; margin-right: -16px; }
html.pk .eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1.35;
  gap: 8px;
}
html.pk .eyebrow::before,
html.pk .eyebrow::after { width: 16px; flex: none; }
html.pk .pk-chapter .section-head { margin: 0 0 12px; max-width: none; }
html.pk .pk-chapter .section-head h2 { font-size: 28px; margin: 8px 0 8px; line-height: 1.1; }
html.pk .pk-chapter .section-head p { font-size: 15px; line-height: 1.45; }
html.pk .pk-sheet-body .section-head p,
html.pk .pk-sheet-body > p { font-size: 15px; line-height: 1.6; color: var(--ink-dim); text-align: left; margin-left: 0; margin-right: 0; }

/* ---- Buttons: 44px tall on screen, whatever the chapter's zoom ---- */
html.pk .pk-chapter .btn {
  min-height: calc(44px / var(--pk-zoom, 1));
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

/* ---- 1. Hero ---- */
html.pk .hero { margin: 0 !important; min-height: 0; align-items: stretch; padding: 0; }
html.pk .hero .hero-inner { padding: 16px; max-width: none; margin: 0; align-self: center; }
html.pk .hero h1 { font-size: 40px; font-size: min(44px, 11.2vw); line-height: 1.04; margin-top: 12px; }
html.pk .hero p.sub { margin-top: 16px; font-size: 16px; line-height: 1.5; }
html.pk .hero-cta { margin-top: 20px; gap: 10px; }

/* ---- 2 and 7. Two sides of an argument: tabs above a shelf ---- */
html.pk .reframe { padding: 14px 0 12px; }
html.pk .reframe h2 { font-size: 30px; line-height: 1.1; margin: 10px 16px 14px; max-width: none; }
html.pk .reframe .inner { width: 100%; padding: 0 16px; margin: 0; }
html.pk .reframe::after { display: none; }
html.pk .panel {
  border-radius: 14px !important;
  padding: 18px 16px;
  filter: none;
}
html.pk .panel:hover { transform: none; }
html.pk .panel .tag { display: none; }
html.pk .panel h3 { font-size: 21px; margin: 0 0 8px; line-height: 1.15; }
html.pk .panel p { font-size: 15px; line-height: 1.5; }
html.pk .panel::before,
html.pk .panel::after { display: none; }

/* ---- 3. Five ways in ---- */
html.pk #paths .section-head { text-align: center; }
html.pk .path-card { border-radius: 14px; background: var(--bg-1); border: 1px solid var(--hair); }
html.pk .path-media { aspect-ratio: auto; height: 21vh; height: 21dvh; }
/* On a phone the picture is a thin band, so a badge on it covers the picture's own headline: it sits on the title row */
html.pk .path-media { overflow: visible; }
html.pk .path-media .path-tag { top: calc(100% + 10px); bottom: auto; right: 12px; font-size: 12px; letter-spacing: 0.04em; padding: 3px 9px; z-index: 2; }
html.pk .path-body { padding: 10px 14px 10px; }
html.pk .path-body h3 { font-size: 18px; }
html.pk .path-body .one { margin: 6px 0 6px; font-size: 14px; line-height: 1.42; }
html.pk .path-price { margin: 0 0 2px; }
html.pk .path-price b { font-size: 18px; }
html.pk .path-price small { font-size: 12px; letter-spacing: 0.06em; }
html.pk .path-price s { font-size: 13px; }
html.pk .path-cta {
  min-height: calc(44px / var(--pk-zoom, 1));
  margin-right: 44px;
  font-size: 14px;
}
html.pk .pk-glass ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
html.pk .pk-glass li { font-size: 15px; line-height: 1.5; padding-left: 16px; position: relative; }
html.pk .pk-glass li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---- 4. Who ---- */
html.pk #who.pk-chapter .wrap { display: block; }
html.pk #who .who-visual { display: block; margin-bottom: 12px; }
html.pk #who .portrait-frame {
  margin: 0 auto;
  width: auto;
  max-width: none;
  height: 34vh;
  height: 34dvh;
  aspect-ratio: auto;
  border-radius: 14px;
}
html.pk #who .portrait-cap { left: 12px; bottom: 10px; }
html.pk #who .portrait-cap .n { font-size: 16px; }
html.pk #who .portrait-cap .r { font-size: 12px; letter-spacing: 0.08em; }
html.pk #who .ves-badge { top: 8px; right: 8px; font-size: 12px; min-height: 44px; }
html.pk #who .who-body h2 { font-size: 24px; line-height: 1.12; margin: 8px 0 8px; max-width: none; }
html.pk #who .who-body .lead { font-size: 15px; line-height: 1.45; margin: 0; }
html.pk .pk-sheet-body .lead { font-size: 15px; line-height: 1.6; margin: 0; }
html.pk .pk-sheet-body .honest { font-size: 15px; margin-top: 16px; padding-left: 12px; border-left: 2px solid var(--gold); color: var(--ink-dim); }

/* ---- 5. The reel, clients and studios small underneath ---- */
html.pk #reel h2 { font-size: 26px; line-height: 1.12; margin: 0 0 12px; text-align: center; }
html.pk .pk-reel-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; }
html.pk .pk-reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
html.pk #reel .studios { margin: 16px 0 0; padding: 0; gap: 14px; }
html.pk #reel .logo-label { font-size: 12px; letter-spacing: 0.1em; margin-bottom: 8px; }
html.pk #reel .logo-row { gap: 8px 14px; justify-content: center; }
html.pk #reel .g-clients .logo-row img { height: 34px; width: auto; }
html.pk #reel .g-studios .logo-row img { height: 16px; width: auto; }
html.pk .pk-sheet-body .g-partners .logo-row { gap: 10px 14px; justify-content: center; }
html.pk .pk-sheet-body .g-partners .logo-label { display: none; }
html.pk .pk-sheet-body .g-partners .logo-row img { height: 58px; width: auto; }

/* ---- 7. On AI ---- */
html.pk #ai .section-head { text-align: center; margin-bottom: 8px; }
html.pk #ai .ai-pull { font-size: 18px; line-height: 1.35; margin: 0 0 12px; text-align: center; }
html.pk .pk-sheet-body .ai-pillars { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
html.pk .pk-sheet-body .ai-pillar { padding: 12px 14px; }
html.pk .pk-sheet-body .ai-pillar:hover { transform: none; }
html.pk .pk-sheet-body .ai-closer { font-size: 15px; line-height: 1.6; text-align: left; margin-top: 16px; max-width: none; }
html.pk .pk-sheet-body .ai-closer a { color: var(--gold); }

/* ---- 8. How it works ---- */
html.pk #how .section-head { text-align: center; }
html.pk .step-card { padding: 16px; gap: 8px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--hair); }
html.pk .step-card h3 { font-size: 20px; }
html.pk .step-card > p { font-size: 15px; line-height: 1.45; }
html.pk .step-foot { padding-top: 4px; }
html.pk .step-toggle {
  min-height: calc(44px / var(--pk-zoom, 1));
  font-size: 13px;
  letter-spacing: 0.08em;
}
html.pk .pk-sheet-body .step-detail { display: block; }
html.pk .pk-sheet-body .step-detail p { font-size: 15px; line-height: 1.55; }
html.pk .pk-sheet-body .step-detail p + p { margin-top: 10px; }
html.pk .how-cta { margin-top: 10px; }

/* ---- 9. What mentees say ---- */
html.pk #proof .section-head { text-align: center; }
html.pk #proof .section-head .eyebrow { letter-spacing: 0.06em; }
html.pk #proof .eyebrow::before, html.pk #proof .eyebrow::after,
html.pk #faq .eyebrow::before, html.pk #faq .eyebrow::after { display: none; }
html.pk .testimodal,
html.pk #testiModal { z-index: 1000; }
html.pk .testimodal-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; }
/* The saved page has an empty close button, so a phone would see a blank dark circle */
html.pk .testimodal-close:not(:has(svg))::before { content: "\D7"; font-size: 28px; line-height: 1; color: #fff; }
html.pk body.modal-open { overflow-y: hidden !important; }

/* ---- 10. FAQ ---- */
html.pk .pk-glass p { font-size: 15px; line-height: 1.55; }

/* ---- 11. Last thing ---- */
html.pk .final { padding: 14px 0 12px; }
html.pk .final .inner { width: 100%; padding: 0 16px; margin: 0; }
html.pk .final h2 { font-size: 36px; margin: 12px 0 14px; max-width: none; line-height: 1.08; }
html.pk .final p { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
html.pk .final .btn { font-size: 16px !important; }

/* ---- 12. Footer: the modals and the cookie notice live in it but float over everything ---- */
html.pk footer.footer { padding: 16px 0 calc(12px + env(safe-area-inset-bottom)); }
html.pk footer .footer-inner { padding: 0 16px; }
html.pk .footer-block .footer-label,
html.pk .footer-tag { font-size: 13px; letter-spacing: 0.1em; }
html.pk .footer-block .footer-val a,
html.pk .footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: calc(44px / var(--pk-zoom, 1));
}
html.pk .footer-bottom { margin-top: 16px; padding-top: 12px; gap: 6px; }
html.pk .footer-bottom span { font-size: 12px; letter-spacing: 0.02em; }
html.pk .footer-legal { display: flex; flex-wrap: wrap; gap: 0 14px; }
html.pk .footer-legal a { min-width: 44px; justify-content: center; }
html.pk .footer .socials { gap: 0; flex-wrap: wrap; }
html.pk .footer .socials a,
html.pk .pk-menu .socials a {
  width: calc(44px / var(--pk-zoom, 1));
  height: calc(44px / var(--pk-zoom, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ---- Menu rows, from the page's old phone menu ---- */
html.pk .pk-menu-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html.pk .pk-menu-row--group { padding-top: 8px; border-top: 1px solid var(--hair-2); }
html.pk .pk-menu-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  font-family: var(--pk-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}
html.pk .pk-menu-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair-2); }
html.pk .pk-menu-socials { display: flex; justify-content: space-between; gap: 0; }
html.pk .pk-menu-socials a { color: var(--ink-dim); }
html.pk .pk-menu-book { margin-left: auto; min-height: 44px; font-size: 14px; padding: 0 16px; display: inline-flex; align-items: center; }

/* ---- Short phones: smaller pictures first, then tighter type, so the words stay on one screen ---- */
@media (max-height: 700px) {
  html.pk .path-media { height: 16vh; height: 16dvh; }
  html.pk .path-media img { object-position: center 57%; } /* keeps the card pictures' wording in frame */
  html.pk #paths .section-head { margin-bottom: 6px; }
  html.pk #paths .section-head h2 { margin: 2px 0 6px; }
  html.pk #proof .section-head h2 { font-size: 24px; margin: 4px 0 6px; }
  html.pk .pk-voices { height: 56vh; height: 56dvh; }
  html.pk #faq .section-head { margin-bottom: 2px; }
  html.pk #faq .section-head h2 { font-size: 21px; margin: 2px 0; }
  html.pk #faq .section-head p { font-size: 12px; line-height: 1.25; }
  html.pk #faq .faq-q { padding: 3px 28px 3px 0; font-size: 13.5px; line-height: 1.18; }
  html.pk #proof .section-head { margin-bottom: 8px; }
}
@media (max-height: 620px) {
  html.pk .path-media { height: 10vh; height: 10dvh; }
  html.pk #who .portrait-frame { height: 26vh; height: 26dvh; }
  html.pk .pk-chapter .section-head { margin-bottom: 8px; }
  html.pk .pk-chapter .section-head h2 { font-size: 24px; margin: 4px 0 6px; }
  html.pk .pk-chapter .section-head p { font-size: 14px; line-height: 1.38; }
  html.pk .hero h1 { font-size: 36px; }
  html.pk .hero p.sub { font-size: 15px; margin-top: 10px; }
  html.pk .hero-cta { margin-top: 12px; gap: 8px; }
  html.pk .reframe h2 { font-size: 25px; margin: 6px 0 10px; }
  html.pk .panel { padding: 12px 14px; }
  html.pk .panel h3 { font-size: 18px; margin-bottom: 4px; }
  html.pk .panel p { font-size: 14px; line-height: 1.4; }
  html.pk #ai .ai-pull { font-size: 15px; margin-bottom: 8px; }
  html.pk .pk-tabs { margin-bottom: 6px; }
  html.pk .step-card { padding: 10px 14px; gap: 4px; }
  html.pk .step-card h3 { font-size: 18px; }
  html.pk .step-card > p { font-size: 14px; line-height: 1.38; }
  html.pk .step-foot { padding-top: 0; }
  html.pk .how-cta { margin-top: 6px; }
  html.pk .path-body { padding: 8px 12px 6px; }
  html.pk .path-body h3 { font-size: 16px; }
  html.pk .path-body .one { font-size: 13px; line-height: 1.36; margin: 4px 0; }
  html.pk .pk-shelf-controls { padding-top: 4px; }
  html.pk .testigrid-quote { font-size: 13px; line-height: 1.36; }
  html.pk .testigrid-avatar { width: 30px; height: 30px; }
  html.pk .pk-chapter { padding-top: 8px; }
}

/* Very short phones */
@media (max-height: 600px) {
  html.pk .pk-voices { height: 53vh; height: 53dvh; }
}