/* ==========================================================================
   Prehook UI — shared design system for prehook.com marketing pages
   ("/", "/apps/ai-quiz-funnels/", "/apps/ai-virtual-try-on/").
   The quiz page (/apps/ai-quiz-funnels/) is the canonical reference design:
   every token and component value below is taken verbatim from it.
   Page-specific rules live in each page's own small sheet under
   /styles/ (home.css, quiz.css, vto.css), plus the shared chrome in
   /styles/site-chrome.css. Load order on every page:
   /prehook-ui.css -> the page sheet -> /styles/site-chrome.css.
   No inline styles, no Tailwind — semantic classes only.
   ========================================================================== */

/* ---- design tokens -------------------------------------------------- */
:root {
  --prehook-purple-50: #F4EEFA;
  --prehook-purple-100: #E6DAF0;
  --prehook-purple-200: #CDB6E1;
  --prehook-purple-300: #B391D2;
  --prehook-purple-400: #9A7BC0;
  --prehook-purple-500: #8561AA;
  --prehook-purple-600: #6E4F8F;
  --prehook-purple-700: #583F73;
  --prehook-purple-800: #402D54;
  --prehook-purple-900: #2A1D38;
  --ink-950: #0a0e14;
  --ink-900: #25303F;
  --ink-body: #183335;
  --ink-700: #4F5864;
  --ink-500: #747D88;
  --ink-400: #8C919A;
  --ink-300: #C4C7CB;
  --ink-200: #DBDCDE;
  --ink-100: #EAEAF1;
  --ink-50: #F6F9FC;
  --paper: #FFFFFF;
  --inkwell: #000000;
  --accent-amber: #F5B301;
  --accent-red: #F71535;
  --accent-teal: #183335;
  --accent-link: #2EA3F2;
  --accent-blue: #3A7BD5;
  /* surface + status tokens shared with the VTO page sheet */
  --cream: #fbf7f2;
  --success: #3f9d58;
  /* the wordmark purple is deliberately ONE DIGIT off --color-primary
     (#8562AA vs #8561AA): it is sampled from the Prehook logo artwork.
     Both `.ph-wordmark` and `.home-logo` read it from here. */
  --brand-wordmark: #8562AA;
  --color-bg: var(--paper);
  --color-bg-muted: var(--ink-50);
  --color-bg-inverse: var(--inkwell);
  --color-fg: var(--ink-900);
  --color-fg-muted: var(--ink-500);
  --color-fg-subtle: var(--ink-400);
  --color-fg-inverse: var(--paper);
  --color-primary: var(--prehook-purple-500);
  --color-primary-hover: var(--prehook-purple-600);
  --color-primary-press: var(--prehook-purple-700);
  --color-primary-soft: var(--prehook-purple-50);
  --color-border: var(--ink-100);
  --color-border-strong: var(--ink-300);
  --color-focus: var(--prehook-purple-400);
  --font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Josefin Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-condensed: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --text-5xl: 72px;
  --text-6xl: 88px;
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-loose: 1.75;
  --tracking-tight: -.02em;
  --tracking-normal: 0;
  --tracking-wide: .08em;
  --tracking-wider: .16em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(37, 48, 63, .06);
  --shadow-sm: 0 2px 6px rgba(37, 48, 63, .08);
  --shadow-md: 0 8px 20px rgba(37, 48, 63, .1);
  --shadow-lg: 0 20px 40px rgba(37, 48, 63, .12);
  --shadow-purple: 0 10px 30px rgba(133, 98, 170, .3);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasize: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .12s;
  --dur-normal: .2s;
  --dur-slow: .36s;
}

/* ---- base ------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---- layout ----------------------------------------------------------- */
.ph-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ph-section { padding: 112px 0; }
.ph-section--alt { background: var(--ink-50); }
.ph-section--dark { background: #0a0e14; color: var(--paper); }
.ph-section--cream { background: #fbf7f2; }
.ph-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.ph-section-head .ph-lead { color: var(--color-fg-muted); }

/* ---- type ------------------------------------------------------------- */
.ph-h1 { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1.08; letter-spacing: -.01em; color: var(--color-fg); margin: 0; }
.ph-h2 { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1.12; letter-spacing: -.005em; color: var(--color-fg); margin: 0; }
.ph-h3 { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1.15; letter-spacing: -.005em; color: var(--color-fg); margin: 0; text-wrap: balance; }
.ph-lead { font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--ink-body); margin: 0; }
.ph-kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.ph-kicker-pill { display: inline-flex; align-items: center; align-self: flex-start; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); background: var(--prehook-purple-50); padding: 8px 14px; border-radius: 999px; }
.ph-stat { font-family: var(--font-display); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---- buttons ----------------------------------------------------------- */
.ph-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: all .2s cubic-bezier(.2, .8, .2, 1);
  white-space: nowrap;
}
.ph-btn--primary { background: var(--color-primary); color: #fff; }
.ph-btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-purple); }
.ph-btn--primary:active { background: var(--color-primary-press); }
.ph-btn--secondary { background: transparent; color: var(--color-fg); border: 1px solid var(--ink-300); }
.ph-btn--secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }
.ph-btn--block { width: 100%; padding: 18px 24px; }
.ph-btn--large { padding: 20px 36px; font-size: 14px; }

/* ---- cards -------------------------------------------------------------- */
.ph-card { background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--ink-100); }

/* ---- checklist rows ------------------------------------------------------ */
.ph-check-line { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 15px; color: var(--ink-body); }
.ph-check-line--sm { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; color: var(--color-fg); }
.ph-check-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--prehook-purple-50); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.ph-check-inline { color: var(--color-primary); font-weight: 800; }

/* ---- FAQ accordion (state toggled via .is-open, no inline styles) -------- */
.ph-faq-item { background: #fff; border: 1px solid var(--ink-100); border-radius: 10px; transition: border-color 200ms; }
.ph-faq-q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); color: var(--color-fg); }
.ph-faq-q-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--color-fg); text-align: left; }
.ph-faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--prehook-purple-50); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); transform: rotate(0deg); }
.ph-faq-a { display: grid; transition: grid-template-rows 240ms cubic-bezier(0.2, 0.8, 0.2, 1); grid-template-rows: 0fr; }
.ph-faq-a-inner { overflow: hidden; }
.ph-faq-a-text { margin: 0; padding: 0 24px 22px; font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--color-fg-muted); }
.ph-faq-item.is-open { border-color: var(--color-primary); }
.ph-faq-item.is-open .ph-faq-icon { transform: rotate(45deg); }
.ph-faq-item.is-open .ph-faq-a { grid-template-rows: 1fr; }

/* ---- utilities ------------------------------------------------------------ */
.ph-balance { text-wrap: balance; }
.ph-text-primary { color: var(--color-primary); }
.ph-min-w-0 { min-width: 0; }
.ph-img-fluid { display: block; width: 100%; height: auto; }
.ph-max-20ch { max-width: 20ch; }
.ph-max-22ch { max-width: 22ch; }
.ph-max-44ch { max-width: 44ch; }
.ph-max-48ch { max-width: 48ch; }
.ph-max-60ch { max-width: 60ch; }
/* GTM noscript iframe (replaces the inline style attribute) */
.gtm-hidden { display: none; visibility: hidden; }

/* ---- responsive (values ported from the quiz reference design) ------------
   The `!important`s below are deliberate. This file is linked FIRST on every
   page and each page sheet (/styles/{home,quiz,vto}.css) plus the shared
   chrome load AFTER it, so a same- or higher-specificity rule there keeps its
   desktop value inside these breakpoints unless it is outranked — e.g.
   vto.css's `.social-proof-copy .ph-section-head` (0,2,0) and
   `.pricing-card .ph-btn` (0,2,0). Folding them back means re-checking every
   page sheet at both breakpoints; tracked as a follow-up in DESIGN-SYSTEM.md.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ph-section { padding: 72px 0 !important; }
  .ph-section-head { margin-bottom: 44px !important; }
  .ph-container { padding: 0 24px !important; }
  .ph-h1 { font-size: 44px !important; }
  .ph-h2 { font-size: 32px !important; }
  .ph-h3 { font-size: 32px !important; }
  .ph-lead { font-size: 18px !important; }
}
@media (max-width: 560px) {
  .ph-section { padding: 56px 0 !important; }
  .ph-container { padding: 0 18px !important; }
  .ph-h1 { font-size: 33px !important; }
  .ph-h2 { font-size: 26px !important; }
  .ph-h3 { font-size: 26px !important; }
  .ph-lead { font-size: 16px !important; }
  .ph-btn { white-space: normal !important; text-align: center; }
  .ph-btn--large { padding: 15px 20px !important; font-size: 12.5px !important; }
}