/* GENERATED FILE - DO NOT EDIT.
   Source of truth: web/_shared/modules/phone-sales.css
   Edit that file, then run web/_shared/sync-modules.ps1 -Deploy */
/* phone-sales.css 0.1.0: the PXL sales pages on a phone, same look as the approved home.
   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 .step-card,
html.pk .program-row,
html.pk .program-media,
html.pk .program-copy,
html.pk .pxl-exposure,
html.pk .pxl-stat,
html.pk .hero .eyebrow,
html.pk .hero h1,
html.pk .hero p,
html.pk .hero-cta .btn {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !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; }

/* The store's anchors leave room for a tall bar, which here would stop a section 110px down */
html.pk .pk-chapter { scroll-margin-top: 0 !important; }

/* Section rhythm */
html.pk main { display: block; }
html.pk .pk-chapter .wrap { width: 100%; padding: 0 16px; margin: 0; max-width: none; }
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; text-align: center; }
html.pk .pk-chapter .section-head h2 { font-size: 26px; margin: 8px 0 8px; line-height: 1.12; }
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; max-width: none; }
html.pk .pk-chapter h2.split-headline { display: block; font-size: 26px; line-height: 1.12; margin: 8px 0 10px; }
html.pk .pk-chapter h2.split-headline .hh-from,
html.pk .pk-chapter h2.split-headline .hh-to { display: block; }
html.pk .pk-chapter h2.split-headline .hh-arrow { display: block; height: auto; margin: 2px 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;
}

/* 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; }
html.pk .hero .paths-note { margin-top: 14px; font-size: 14px; line-height: 1.45; }
html.pk .hero-scrollhint { display: none; }

/* These films are bright and carry words of their own, so text on top of them cannot be read: the film is a band above the words */
html.pk .hero.pk-chapter { display: flex; flex-direction: column; justify-content: flex-start; padding: 0; }
html.pk .hero .hero-video { position: relative; inset: auto; flex: none; width: 100%; height: 24vh; height: 24dvh; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
html.pk .hero .hero-video video { position: static; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; transform: none; filter: none; opacity: 1; }
html.pk .hero .hero-video iframe { position: absolute; top: 50%; left: 50%; width: 100%; min-width: 42.67vh; min-width: 42.67dvh; height: 56.25vw; min-height: 100%; transform: translate(-50%, -50%); border: 0; filter: none; opacity: 1; }
html.pk .hero .hero-scrim,
html.pk .hero .hero-grain { display: none; }
html.pk .hero .hero-inner { align-self: stretch; padding: 10px 16px 12px; position: relative; }
html.pk .hero.pk-has-more .hero-inner { padding-bottom: 52px; }
html.pk .hero h1 { font-size: 32px; margin-top: 8px; }
html.pk .hero p.sub { margin-top: 10px; font-size: 15px; line-height: 1.45; }
html.pk .hero-cta { margin-top: 12px; gap: 8px; }

/* Why */
html.pk #why .who-grid { display: block; text-align: center; }
html.pk #why .eyebrow { justify-content: center; }
html.pk #why h2.split-headline .hh-arrow { display: flex; justify-content: center; }
html.pk #why .copy-lead,
html.pk #why .lead { font-size: 16px; line-height: 1.5; margin: 0; max-width: none; }
html.pk .pk-sheet-body .honest { font-size: 15px; line-height: 1.6; margin: 0; padding-left: 12px; border-left: 2px solid var(--gold); color: var(--ink-dim); }
html.pk .pk-sheet-body .copy-aside { font-size: 15px; line-height: 1.6; margin: 0; color: var(--ink-dim); }

/* How */
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 .how-cta { margin-top: 10px; text-align: center; }

/* Frosted card lists */
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); }
html.pk .pk-glass p { font-size: 15px; line-height: 1.55; }
html.pk .pk-glass li svg { display: none; }

/* PXLflow and PXLlibrary */
html.pk .pxl-exposure { margin: 0; padding: 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--hair); box-sizing: border-box; }
html.pk .pxl-exposure .pxl-flow-logo { height: 34px; width: auto; }
html.pk .pxl-exposure .pxl-flow-head { margin: 0 0 8px; }
html.pk .pxl-exposure .pxl-flow-head a { display: inline-flex; align-items: center; min-height: 44px; }
html.pk .pxl-exposure-title { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
html.pk .pxl-exposure > p { font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
html.pk .pxl-flow-cta { margin: 0 44px 0 0 !important; }
html.pk .pxl-flow-cta a { display: inline-flex; align-items: center; min-height: calc(44px / var(--pk-zoom, 1)); }
/* PXLflow and PXLlibrary, both on one screen: a real view of the tool on top, logo at one size, what you get as numbers or short words */
html.pk .pxl-extras { display: flex; flex-direction: column; gap: 10px; margin: 0; }
html.pk .pxl-extras .pxl-production { position: relative; display: block; padding: 0 0 10px; overflow: hidden; }
html.pk .pk-tile-view { display: block; width: 100%; height: 13vh; height: 13dvh; object-fit: cover; object-position: center bottom; opacity: 1; }
html.pk .pk-tile-view[src*="PXLflow"] { object-fit: cover; object-position: left center; background: #0f0f0f; }
html.pk .pxl-extras .pxl-flow-head { margin: 8px 12px 2px; }
html.pk .pxl-extras .pxl-flow-head a { min-height: 32px; }
/* The two files are the same logo width once PXLflow's empty margin is allowed for */
html.pk .pxl-extras .pxl-flow-logo { height: 24px; width: auto; }
html.pk .pxl-extras .pxl-flow-logo[src*="PXLflow"] { height: 37px; margin: -7px 0 -6px -6px; }
html.pk .pxl-extras .pxl-exposure-title { font-size: 16px; line-height: 1.2; margin: 0 44px 6px 12px; }
html.pk .pk-tile-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 44px 0 12px; }
html.pk .pk-tile-chip { padding: 3px 8px; border: 1px solid var(--hair); border-radius: 999px; font-size: 12px; line-height: 1.2; }
html.pk .pk-tile-stat { display: flex; flex-direction: column; min-width: 0; font-size: 11px; line-height: 1.1; color: var(--ink-dim); max-width: 74px; }
html.pk .pk-tile-stat b { font-size: 17px; line-height: 1.15; color: var(--gold); }
html.pk .pk-sheet-body .pxl-lib-gallery { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
html.pk .pk-sheet-body .pxl-lib-shot img { width: 100%; height: auto; display: block; border-radius: 8px; }
html.pk .pk-sheet-body .pxl-lib-shot span { display: block; font-size: 13px; margin-top: 4px; }
html.pk .pk-sheet-body .pxl-lib-note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin: 0; }

/* The program: the picture on top with nothing over it, the title under it */
html.pk .program-row {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--bg-1);
}
html.pk .program-media { width: 100%; height: 34vh; height: 34dvh; aspect-ratio: auto; margin: 0; border-radius: 0; overflow: hidden; }
html.pk .program-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; opacity: 1; transform: none; }
html.pk .program-media::before,
html.pk .program-media::after { display: none; }
html.pk .program-copy { padding: 12px 52px 12px 14px; }
html.pk .program-copy .idx { font-size: 13px; }
html.pk .program-copy h3 { font-size: 19px; line-height: 1.2; margin: 2px 0 0; }

/* What is included */
html.pk .pxl-stats { margin: 0; }
html.pk .pxl-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.pk .pxl-stat { padding: 12px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--hair); min-width: 0; }
/* A lone last card takes the whole row, so the grid stays one unit */
html.pk .pxl-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
html.pk .pxl-stat-num { font-size: 30px; line-height: 1.1; }
html.pk .pxl-stat-unit { font-size: 14px; }
html.pk .pxl-stat-label { font-size: 12px; line-height: 1.35; margin: 2px 0 0; }
html.pk .pk-sheet-body .included-panel { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.pk .pk-sheet-body .included-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
html.pk .pk-sheet-body .included-list li { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; }
html.pk .pk-sheet-body .included-list li svg { flex: none; width: 16px; height: 16px; margin-top: 4px; }

/* Who: small, the logos whole */
html.pk .credbar.pk-chapter { padding-top: 14px; }
html.pk .credbar .wrap { display: block; }
html.pk .credbar-lead { text-align: center; margin: 0 0 14px; }
/* Cris's picture: no box and no border, only a small cast shadow */
html.pk .pk-cred-portrait { display: block; width: auto; height: 30vh; height: 30dvh; max-width: 100%; margin: 0 auto 10px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
html.pk .credbar-line { font-size: 15px; line-height: 1.45; margin: 8px 0 0; }
html.pk .credbar-groups { display: flex; flex-direction: column; gap: 14px; margin: 0; }
html.pk .credbar-group { display: block; text-align: center; }
html.pk .credbar-label { display: block; font-size: 12px; letter-spacing: 0.1em; margin-bottom: 8px; }
html.pk .credbar-row { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
html.pk .credbar-row img { width: auto; max-width: none; object-fit: contain; }
html.pk .credbar-row-clients img { height: 30px; }
html.pk .credbar-row-studios img { height: 16px; }
html.pk .pk-sheet-body .credbar-row-partners img { height: 44px; }
html.pk .pk-sheet-body .credbar-cert { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin: 0; }
html.pk .pk-sheet-body .credbar-cert span { font-size: 14px; letter-spacing: 0.02em; line-height: 1.4; }
html.pk .pk-sheet-body .credbar-ves { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
html.pk .pk-sheet-body .credbar-ves span { font-size: 14px; letter-spacing: 0.02em; }
html.pk .pk-sheet-body .credbar-ves img { height: 34px; width: auto; }
html.pk .pk-sheet-body .credbar-group { margin: 0; }

/* 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: 34px; 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 16px; }
html.pk .final .paths-note { font-size: 14px; color: var(--ink-dim); }
html.pk .final .btn { font-size: 16px !important; }

/* 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); }
/* The bar's cart icon would sit on the menu button: on a phone the cart is in the menu */
html.pk #nav .nav-cart { display: none; }
html.pk .pk-menu-row .nav-cart--mm { display: inline-flex; gap: 6px; min-width: 44px; justify-content: center; color: var(--ink); }
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 .program-media { height: 26vh; height: 26dvh; }
  html.pk .pk-chapter .section-head h2 { font-size: 23px; margin: 4px 0 6px; }
  html.pk .pk-chapter .section-head { margin-bottom: 8px; }
  html.pk .pk-chapter h2.split-headline { font-size: 23px; }
}
@media (max-height: 680px) {
  html.pk .step-card { padding: 12px 14px; gap: 4px; }
  html.pk .step-card h3 { font-size: 18px; }
  html.pk .step-card > p { font-size: 14px; line-height: 1.38; }
}
@media (max-height: 620px) {
  html.pk .program-media { height: 20vh; height: 20dvh; }
  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 .pxl-exposure { padding: 12px 14px; }
  html.pk .pxl-exposure > p { font-size: 14px; line-height: 1.38; }
  html.pk .pk-shelf-controls { padding-top: 4px; }
  html.pk .pk-chapter { padding-top: 8px; }
}