/* ==========================================================================
   Prehook site chrome — ONE sheet for the header bars, burgers, section
   sub-menu, mobile site rail, hero rotator, footers and floating CTA of all
   three modern pages ("/", "/apps/ai-quiz-funnels/", "/apps/ai-virtual-try-on/").

   Sources merged here (and now deleted): scripts/inject-app-headers.py's
   COMMON_CSS (the `.ph-*` chrome injected into the two static app pages) and
   the chrome half of app/home.css (the `.home-*` chrome).

   Load order on every page: /prehook-ui.css -> the page sheet -> this file.
   Colours and font stacks come from the prehook-ui tokens (including
   --brand-wordmark, the deliberately-one-digit-off #8562AA the two wordmarks
   share). Two literals below are deliberately NOT tokens:
     - box-shadows stay literal because the VTO page sheet redefines
       --shadow-* on :root and would change them;
     - `.ph-footer`'s font stack and `.ph-floater`'s shorter Raleway stack stay
       literal for the same reason (VTO's --font-body differs, and these two
       stacks differ from --font-body / --font-display anyway).

   Where the two skins are byte-identical the selectors are GROUPED — never
   renamed: pixel and contract parity depend on every class staying on the
   element it is on today. Where they differ (panel widths, footer grid, head
   size, hover purple, wash gradient) BOTH rules are kept; unifying them moves
   pixels and needs owner sign-off.
   No inline styles anywhere: runtime state is a class toggle.
   ========================================================================== */

/* ==========================================================================
   0. The .home-root base — resets, font/token bridge, legacy-chrome armour
   Moved here from home.css (2026-08-25): the home chrome is rendered on
   EVERY page (home, /pricing/, /help/, the app hubs, the 185 legacy
   replicas) and it depends on these rules. A page that wears the chrome
   must never have to load the home page's own sheet to get them.
   ========================================================================== */
/* ---- scoped stand-in for a global reset (zero specificity) --------------- */
:where(.home-root, .home-root *, .home-root *::before, .home-root *::after) { box-sizing: border-box; }
:where(.home-root) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.home-root) :where(ul) { list-style: none; padding: 0; }
:where(.home-root) :where(a) { color: inherit; text-decoration: none; }
:where(.home-root) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.home-root) :where(button, input) { font: inherit; }
:where(.home-root) :where(button) { border: none; } /* UA 2px outset -> none */

/* ---- legacy replicas wearing the home chrome (Diego 2026-08-24) ---------- */
/* On the Divi pages the :where() resets above (zero specificity) lose to
   Divi's global element rules (a{color:#2ea3f2}, ul{padding}, p{margin},
   body{font-weight:500}). The renderer adds .legacy-chrome to the chrome
   wrappers; these restate the SAME resets at (0,2,0) — enough to beat Divi,
   and placed BEFORE every .home-* rule so those still win by source order. */
/* display:contents — the wrapper must not generate a box, or the sticky
   header's containing block would be the wrapper itself (exactly one header
   tall) and it would scroll away with the page. Inherited properties and the
   font custom properties still flow through a contents box. */
.home-root.legacy-chrome { display: contents; font-weight: 400; }
.home-root.legacy-chrome :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.home-root.legacy-chrome :where(ul, ol) { list-style: none; padding: 0; }
.home-root.legacy-chrome :where(li) { margin: 0; padding: 0; }
.home-root.legacy-chrome :where(a) { color: inherit; text-decoration: none; box-shadow: none; }
.home-root.legacy-chrome :where(img) { max-width: 100%; height: auto; display: block; }
.home-root.legacy-chrome :where(button, input) { font: inherit; }
.home-root.legacy-chrome :where(button) { border: none; }

/* ---- root: page defaults + design-token bridge --------------------------- */
.home-root {
  /* bridge the shared prehook-ui font tokens onto the next/font families
     loaded by app/(site)/layout.tsx — this is what pulls the CLS-matched
     "* Fallback" faces into the home page's computed font stacks */
  --font-display: var(--font-raleway), "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-josefin), -apple-system, "Segoe UI", Roboto, sans-serif;
  /* logo wordmark: same face as the Prehook logo image (geometric sans,
     circular bowls = Poppins) in the logo's exact sampled color #8562AA */
  --font-logo: var(--font-poppins), "Poppins", sans-serif;
  background: var(--paper, #fff);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 23.25px;
  color: var(--ink-900, #25303f);
}


/* ==========================================================================
   1. Shared primitives — one rule, both skins
   ========================================================================== */

/* ---- hamburger: identical treatment on home and the app pages ------------ */
.home-root .home-nav-mobile-btn,
.ph-menu-btn {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-200, #DBDCDE);
  border-radius: 8px;
  padding: 0;
}
.home-root .home-nav-mobile-btn::-webkit-details-marker,
.ph-menu-btn::-webkit-details-marker { display: none; }
.home-root .home-nav-mobile[open] .home-nav-mobile-btn,
.ph-menu[open] .ph-menu-btn { border-color: var(--color-primary, #8561AA); }
.home-root .home-burger,
.home-root .home-burger::before,
.home-root .home-burger::after,
.ph-burger,
.ph-burger::before,
.ph-burger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-700, #4F5864);
  border-radius: 2px;
  content: "";
}
.home-root .home-burger,
.ph-burger { position: relative; }
.home-root .home-burger::before,
.ph-burger::before { position: absolute; top: -6px; }
.home-root .home-burger::after,
.ph-burger::after { position: absolute; top: 6px; }

/* ---- the bar's inner row: identical geometry on both skins --------------- */
/* (the surrounding band differs — `.home-nav-bar` is sticky + translucent,
   `.ph-bar` is solid — so only this row is shared.) */
.ph-nav,
.home-root .home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- hero background rotator (5 photos, 3s cross-fade) ------------------- */
.home-root .home-hero-rotator,
.ph-hero-rotator { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ph-hero-rotator { z-index: 0; }
.home-root .home-hero-rotator img,
.ph-hero-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}
.home-root .home-hero-rotator img.ph-on,
.ph-hero-rotator img.ph-on { opacity: 1; }
/* the wash over the photo differs per skin (home fades to white, the app
   pages to cream) — only its box is shared */
.home-root .home-hero-wash,
.ph-hero-rotator .ph-wash { position: absolute; inset: 0; }
.home-root .home-hero-wash {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55) 50%, var(--paper, #fff));
}
.ph-hero-rotator .ph-wash {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62) 55%, var(--cream, #FBF7F2));
}

/* ---- dark footer band: same colours, different skins -------------------- */
.home-root .home-footer,
.ph-footer { background: var(--ink-950, #0A0E14); color: var(--ink-300, #C4C7CB); }

/* ==========================================================================
   2. App-page chrome (.ph-*) — global bar, sub-menu, site rail, footer,
      floating CTA. Order preserved from COMMON_CSS.
   ========================================================================== */
.ph-bar {
  background: var(--paper, #fff);
  border-bottom: 1px solid var(--ink-100, #EAEAF1);
  font-family: var(--font-display);
  position: relative;
  z-index: 60;
}
.ph-bar a { text-decoration: none; }
.ph-brand { display: flex; align-items: center; gap: 10px; }
.ph-brand img { width: 26px; height: 26px; border-radius: 6px; }
.ph-brand a.ph-brand { min-height: 44px; }
.ph-wordmark { font-family: "Poppins", "Raleway", sans-serif; font-weight: 600; font-size: 17px; color: var(--brand-wordmark, #8562AA); }
.ph-app-title {
  margin-left: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--ink-200, #DBDCDE);
  color: var(--ink-700, #4F5864);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ph-links { display: flex; align-items: center; gap: 22px; }
/* ONE type spec for the menu links, pinned to the quiz-measured baseline
   (erad-baseline.json): Raleway / 11px / 700 / 1.54px / uppercase / #4F5864.
   The per-selector HOVER colours differ, so they stay separate.
   `.ph-siterail a` is deliberately NOT in this group: it never carried a
   font-family of its own (see its own rule below) and adding one changed the
   VTO page, whose sheet sets `a{font-family:var(--font-body)}` — a (0,0,1)
   match that beats inheriting Raleway from `.ph-siterail`, so its rail links
   render in Josefin Sans and wrap onto a second row at 390px.
   `text-decoration:none` is here for `.ph-submenu a`, the only one of the
   three that lives OUTSIDE `.ph-bar`; for the other two it is a verified
   no-op, already covered by `.ph-bar a { text-decoration: none }` above
   (`.ph-links` and `.ph-menu-panel` are both descendants of `header.ph-bar`). */
.ph-links a,
.ph-submenu a,
.ph-menu-panel a {
  font-family: var(--font-display);
  color: var(--ink-700, #4F5864);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  text-decoration: none;
}
.ph-links a:hover { color: var(--prehook-purple-600, #6E4F8F); }
.ph-links a.ph-active { color: var(--color-primary, #8561AA); }
.ph-submenu {
  background: var(--paper, #fff);
  border-bottom: 1px solid var(--ink-100, #EAEAF1);
  font-family: var(--font-display);
}
.ph-submenu-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 24px;
  height: 48px;
}
.ph-submenu a:hover,
.ph-siterail a:hover { color: var(--color-primary, #8561AA); }
.ph-install,
.ph-submenu a.ph-install {
  background: var(--color-primary, #8561AA);
  color: var(--paper, #fff);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 11px;
  line-height: 1.2;
}
.ph-install:hover { background: var(--prehook-purple-600, #6E4F8F); color: var(--paper, #fff); }
.ph-footer { font-family: "Josefin Sans", -apple-system, sans-serif; }
.ph-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* brand · Apps · Resources · Contact · <app> legal */
  gap: 40px;
  max-width: 75rem;
  margin: 0 auto;
  padding: 64px 24px;
}
.ph-footer h3 {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-500, #747D88);
  margin: 0 0 16px;
}
.ph-footer a { display: block; color: var(--ink-300, #C4C7CB); text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.ph-footer a:hover { color: var(--prehook-purple-200, #CDB6E1); }
.ph-footer .ph-wordmark { font-size: 20px; }
.ph-footer p { font-size: 14px; line-height: 1.6; color: var(--ink-500, #747D88); margin: 12px 0 0; }
.ph-footer-bottom { border-top: 1px solid var(--ink-900, #25303F); }
.ph-footer-bottom div { max-width: 75rem; margin: 0 auto; padding: 20px 24px; font-size: 12px; color: var(--ink-500, #747D88); }
@media (max-width: 900px) { .ph-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ph-hide-sm { display: none; } }

/* floating CTA (identical on both app pages) */
.ph-floater {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  background: var(--color-primary, #8561AA);
  color: var(--paper, #fff);
  border-radius: 999px;
  padding: 14px 22px;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px #2a1d3855;
  transition: opacity .3s;
  opacity: 0;
  pointer-events: none;
}
.ph-floater.ph-on { opacity: 1; pointer-events: auto; }
.ph-floater:hover { background: var(--prehook-purple-600, #6E4F8F); }

/* ---- mobile chrome (Diego 2026-08-23) -------------------------------------
   Bar: app title drops, text links collapse into a native <details> burger
   (no JS, same pattern as the home nav). Sub-menu: section anchors become a
   horizontally scrollable rail instead of wrapping out of its fixed height.
   Every menu row is >=44px tall so it is thumb-sized. */
.ph-menu { display: none; position: relative; margin-left: auto; }
.ph-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  width: 236px;
  background: var(--paper, #fff);
  border: 1px solid var(--ink-100, #EAEAF1);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(37, 48, 63, .12);
  padding: 8px;
}
.ph-menu-panel a { display: block; padding: 13px 16px; border-radius: 8px; }
.ph-menu-panel a:hover,
.ph-menu-panel a.ph-active { background: var(--prehook-purple-50, #F4EEFA); color: var(--prehook-purple-700, #583F73); }
.ph-menu-panel a.ph-install { background: var(--color-primary, #8561AA); color: var(--paper, #fff); text-align: center; margin-top: 6px; border-radius: 999px; }
.ph-menu-panel a.ph-install:hover { background: var(--prehook-purple-600, #6E4F8F); color: var(--paper, #fff); }
/* slim cross-nav under the bar: home + the other app (mobile only) */
.ph-siterail {
  display: none;
  background: var(--ink-50, #F6F9FC);
  border-bottom: 1px solid var(--ink-100, #EAEAF1);
  font-family: var(--font-display);
}
.ph-siterail-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; max-width: 75rem; margin: 0 auto; padding: 9px 18px; }
.ph-siterail-label { color: var(--ink-400, #8C919A); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
/* the rail's own type spec — identical to the group above MINUS font-family,
   which it inherits from `.ph-siterail` on the quiz page and takes from the
   page sheet's `a{}` rule on the VTO page. Both are baseline behaviour. */
.ph-siterail a {
  /* Diego 2026-08-25: explicit — the VTO page sheet's a{font-family:var(--font-body)}
     otherwise turns the rail into Josefin Sans on that page only */
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: var(--ink-700, #4F5864);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  text-decoration: none;
}
/* the page you are on is marked, so the list never reads as "you are here" */
.ph-siterail a.ph-active { color: var(--color-primary, #8561AA); }
.ph-siterail-home { border-top: 1px solid var(--ink-100, #EAEAF1); background: var(--paper, #fff); }
.ph-siterail-home a { max-width: 75rem; margin: 0 auto; padding: 0 18px; min-height: 42px; color: var(--ink-500, #747D88); }
.ph-back { width: 0; height: 0; margin-right: 9px; border: 4px solid transparent; border-right-color: currentColor; }
@media (max-width: 900px) {
  .ph-nav { height: 64px; gap: 12px; padding: 0 18px; }
  .ph-app-title { display: none; }
  .ph-links { display: none; }
  .ph-menu { display: block; }
  .ph-siterail { display: block; }
  /* the section anchors moved into the burger — the desktop rail would be a
     second, redundant menu */
  .ph-submenu { display: none; }
}
@media (max-width: 900px) {
  .ph-footer a { padding: 10px 0; margin-bottom: 0; }
}
@media (max-width: 560px) {
  .ph-footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 48px 18px; }
  .ph-footer-bottom div { padding: 18px; }
  .ph-floater { right: 14px; bottom: 14px; padding: 13px 18px; font-size: 11px; letter-spacing: .1em; max-width: calc(100vw - 28px); }
}

/* ==========================================================================
   3. Home chrome (.home-*) — order preserved from app/home.css
   ========================================================================== */

/* ---- header (menu values from the quiz page's global bar, .ph-links a) --- */
.home-root .home-nav-bar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--ink-100, #eaeaf1); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-root .home-logo { font-family: var(--font-logo); font-size: 26px; line-height: 1; font-weight: 600; color: var(--brand-wordmark, #8562AA); }
.home-root .home-nav-menu { display: none; align-items: center; gap: 32px; }
.home-root .home-nav-item { position: relative; }
.home-root .home-nav-link { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-700, #4f5864); transition: color 0.15s; }
.home-root .home-nav-item:hover .home-nav-link,
.home-root .home-nav-item:focus-within .home-nav-link { color: var(--prehook-purple-600, #6e4f8f); }
.home-root .home-nav-caret { margin-left: 4px; color: var(--ink-300, #c4c7cb); }
.home-root .home-nav-drop { visibility: hidden; opacity: 0; position: absolute; left: 50%; z-index: 50; transform: translateX(-50%); padding-top: 16px; max-width: calc(100vw - 32px); transition: opacity 0.15s, visibility 0.15s; }
.home-root .home-nav-item:hover .home-nav-drop,
.home-root .home-nav-item:focus-within .home-nav-drop { visibility: visible; opacity: 1; }
.home-root .home-nav-panel { width: 224px; border-radius: 14px; border: 1px solid var(--ink-100, #eaeaf1); background: var(--paper, #fff); padding: 8px; box-shadow: 0 20px 40px rgba(37, 48, 63, 0.08); }
.home-root .home-nav-panel-link { display: block; border-radius: 8px; padding: 10px 16px; font-family: var(--font-display); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-700, #4f5864); transition: background-color 0.15s, color 0.15s; }
.home-root .home-nav-panel-link:hover { background: var(--prehook-purple-50, #f4eefa); color: var(--prehook-purple-700, #583f73); }

/* small screens: plain <details> menu (button + burger bars are grouped with
   the app pages' .ph-menu-btn / .ph-burger in section 1) */
.home-root .home-nav-mobile { position: relative; }
.home-root .home-nav-mobile-panel { position: absolute; right: 0; z-index: 50; margin-top: 8px; width: 256px; border-radius: 14px; border: 1px solid var(--ink-100, #eaeaf1); background: var(--paper, #fff); padding: 8px; box-shadow: 0 20px 40px rgba(37, 48, 63, 0.08); }
.home-root .home-nav-mobile-label { padding: 12px 16px 4px; font-family: var(--font-display); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prehook-purple-600, #6e4f8f); }
.home-root .home-nav-mobile-link { display: block; border-radius: 8px; padding: 8px 16px; font-size: 14px; line-height: 20px; color: var(--ink-700, #4f5864); }
.home-root .home-nav-mobile-link:hover { background: var(--prehook-purple-50, #f4eefa); }
/* top-level links after the app groups in the burger (Blog): label weight, still a link */
.home-root .home-nav-mobile-link--top { margin-top: 8px; font-family: var(--font-display); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prehook-purple-600, #6e4f8f); }
/* the app pages swap to the burger at 900px — match them exactly */
@media (min-width: 901px) {
  .home-root .home-nav-menu { display: flex; }
  .home-root .home-nav-mobile { display: none; }
}

/* ---- footer ---------------------------------------------------------------- */
.home-root .home-footer-grid { display: grid; max-width: 75rem; margin: 0 auto; gap: 48px; padding: 64px 24px; }
.home-root .home-footer-brand { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 800; color: var(--paper, #fff); }
.home-root .home-footer-blurb { margin-top: 12px; font-size: 14px; line-height: 1.625; }
.home-root .home-footer-head { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500, #747d88); }
.home-root .home-footer-list { margin-top: 16px; font-size: 14px; line-height: 20px; }
.home-root .home-footer-list > li + li { margin-top: 8px; }
.home-root .home-footer-list a { transition: color 0.15s; }
.home-root .home-footer-list a:hover { color: var(--prehook-purple-300, #b391d2); }
.home-root .home-footer-bottom { border-top: 1px solid var(--ink-900, #25303f); }
.home-root .home-footer-bottom-inner { max-width: 75rem; margin: 0 auto; padding: 24px; font-size: 12px; line-height: 16px; color: var(--ink-500, #747d88); }
@media (min-width: 640px) {
  .home-root .home-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-root .home-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- mobile (Diego 2026-08-23): the dropdown panels are pinned to the right
   edge so the last one cannot push the page sideways; link lists get real tap
   heights through tablet widths. */
.home-root .home-nav-item:last-child .home-nav-drop { left: auto; right: 0; transform: none; }

@media (max-width: 900px) {
  .home-root .home-footer-list a { display: inline-block; padding: 8px 0; }
}

@media (max-width: 767px) {
  .home-root .home-nav { height: 64px; padding: 0 20px; }
  .home-root .home-logo { font-size: 23px; display: inline-flex; align-items: center; min-height: 44px; }
  .home-root .home-nav-mobile-link { padding: 12px 16px; }
  .home-root .home-footer-grid { padding: 48px 20px; gap: 36px; }
  .home-root .home-footer-bottom-inner { padding: 20px; }
}

/* ==========================================================================
   App selector tabs (Diego 2026-08-25) — equal-weight segmented control used
   by the /help/ and /pricing/ hubs. CSS-only: two radios, labels, panels
   shown by :checked ~ ; both panels stay in the DOM for crawlers. A tiny
   client island (app-tabs-hash.tsx) mirrors the choice to the URL hash.
   ========================================================================== */
.ph-tabs { position: relative; }
.ph-tabs-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ph-tabs-bar { display: flex; width: max-content; max-width: 100%; margin: 36px auto 0; padding: 5px; gap: 5px; border: 1px solid var(--ink-100, #eaeaf1); border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(37, 48, 63, 0.08); }
.ph-tabs-bar label { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 22px; border-radius: 999px; color: var(--ink-700, #4f5864); font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard); }
.ph-tabs-bar label img { width: 22px; height: 22px; border-radius: 6px; }
.ph-tabs-bar label:hover { color: var(--color-primary, #8561aa); }
#ph-tab-quiz:checked ~ .ph-tabs-bar label[for="ph-tab-quiz"],
#ph-tab-vto:checked ~ .ph-tabs-bar label[for="ph-tab-vto"] { background: var(--color-primary, #8561aa); color: #fff; box-shadow: var(--shadow-purple); }
.ph-tabs-panel { display: none; }
#ph-tab-quiz:checked ~ .ph-tabs-panel--quiz, #ph-tab-vto:checked ~ .ph-tabs-panel--vto { display: block; }
@media (max-width: 560px) {
  .ph-tabs-bar { width: 100%; }
  .ph-tabs-bar label { flex: 1; justify-content: center; padding: 8px 12px; font-size: 11px; letter-spacing: 0.08em; }
}