/*
 * /help/ and /help/ai-virtual-try-on/<article>/ — the Help Center for both
 * apps. Loaded ONLY by the help pages under app/(site)/help/. Layered on
 * /prehook-ui.css; every rule is scoped under .help-root.
 */

.help-root .help-container { max-width: 75rem; margin: 0 auto; padding: 0 24px; }
.help-root .help-center { text-align: center; }
.help-root .help-accent { color: var(--color-primary, #8561aa); font-style: italic; }

/* ---- hero ---------------------------------------------------------------- */
.help-root .help-hero { padding: 80px 0 48px; background: linear-gradient(180deg, #fff 0%, #fbf7f2 100%); }
.help-root .help-hero .ph-h1 { max-width: 40rem; margin: 18px auto 0; }
.help-root .help-hero .ph-lead { max-width: 40rem; margin: 22px auto 0; }
.help-root .help-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* ---- app sections -------------------------------------------------------- */
.help-root .help-app { padding: 88px 0; }
.help-root .help-app--alt { background: var(--ink-50, #f6f9fc); }
.help-root .help-app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.help-root .help-app-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.help-root .help-app-head .ph-h2 { font-size: 36px; }
.help-root .help-app-lead { max-width: 46rem; margin-top: 12px; }
.help-root .help-app-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.help-root .help-app-links a { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary, #8561aa); }
.help-root .help-app-links a:hover { color: var(--color-primary-hover, #6e4f8f); }

/* ---- knowledge-base category cards -------------------------------------- */
.help-root .help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.help-root .help-card { padding: 28px 28px 24px; border-radius: 14px; box-shadow: 0 6px 18px rgba(37, 48, 63, 0.06); }
.help-root .help-card-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--ink-900, #25303f); }
.help-root .help-card-list { margin: 0; padding: 0; list-style: none; }
.help-root .help-card-list li + li { border-top: 1px solid var(--ink-100, #eaeaf1); }
.help-root .help-card-list a { display: block; padding: 10px 0; font-size: 14px; line-height: 1.45; color: var(--ink-700, #4f5864); }
.help-root .help-card-list a:hover { color: var(--color-primary, #8561aa); }
.help-root .help-card-blurb { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink-500, #747d88); }
.help-root .help-card-more { display: inline-block; margin-top: 12px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary, #8561aa); }

/* ---- article ------------------------------------------------------------- */
.help-root .help-article-hero { padding: 64px 0 32px; background: linear-gradient(180deg, #fff 0%, #fbf7f2 100%); }
.help-root .help-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500, #747d88); }
.help-root .help-crumbs a { color: var(--color-primary, #8561aa); }
.help-root .help-crumbs span::before { content: "›"; margin-right: 8px; color: var(--ink-300, #c4c7cb); }
.help-root .help-article-hero .ph-h1 { font-size: 44px; margin-top: 18px; max-width: 46rem; }
.help-root .help-article-hero .ph-lead { max-width: 42rem; margin-top: 16px; }
.help-root .help-article { padding: 48px 0 96px; }
.help-root .help-prose { max-width: 46rem; }
.help-root .help-prose > * + * { margin-top: 18px; }
.help-root .help-prose h2 { margin-top: 40px; font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ink-900, #25303f); }
.help-root .help-prose p { font-size: 17px; line-height: 1.65; color: var(--ink-body, #183335); }
.help-root .help-prose ul { padding: 0; margin: 0; list-style: none; }
.help-root .help-prose ul li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--ink-body, #183335); }
.help-root .help-prose ul li + li { margin-top: 10px; }
.help-root .help-prose ul li::before { content: "✓"; position: absolute; top: 2px; left: 0; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--prehook-purple-50, #f4eefa); color: var(--color-primary, #8561aa); font-size: 12px; font-weight: 800; }
.help-root .help-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px rgba(37, 48, 63, 0.08); background: #000; }
.help-root .help-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.help-root .help-steps { padding: 0; margin: 0; list-style: none; counter-reset: step; }
.help-root .help-step { position: relative; padding: 0 0 22px 56px; }
.help-root .help-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary, #8561aa); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.help-root .help-step + .help-step::after { content: ""; position: absolute; left: 19px; top: -22px; height: 22px; border-left: 2px dashed var(--prehook-purple-200, #cdb6e1); }
.help-root .help-step-title { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink-900, #25303f); line-height: 1.3; padding-top: 8px; }
.help-root .help-step p { margin: 0; font-size: 15px; line-height: 1.6; }
.help-root .help-tips { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.help-root .help-tip { padding: 18px 20px; border-radius: 12px; }
.help-root .help-tip strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; color: var(--ink-900, #25303f); }
.help-root .help-tip p { margin: 0; font-size: 15px; line-height: 1.6; }
.help-root .help-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.help-root .help-plan { padding: 18px 16px; border-radius: 12px; text-align: center; }
.help-root .help-plan strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink-900, #25303f); }
.help-root .help-plan .help-plan-price { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--color-primary, #8561aa); }
.help-root .help-plan p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-500, #747d88); }
.help-root .help-faq-list { display: grid; gap: 12px; }
.help-root .help-article-nav { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ink-100, #eaeaf1); }
.help-root .help-article-nav h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary, #8561aa); }

@media (max-width: 900px) {
  .help-root .help-hero { padding: 56px 0 36px; }
  .help-root .help-app { padding: 64px 0; }
  .help-root .help-app-head .ph-h2 { font-size: 30px; }
  .help-root .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .help-root .help-article-hero .ph-h1 { font-size: 33px; }
  .help-root .help-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .help-root .help-container { padding: 0 20px; }
  .help-root .help-grid { grid-template-columns: minmax(0, 1fr); }
  .help-root .help-plans { grid-template-columns: minmax(0, 1fr); }
  .help-root .help-prose p { font-size: 16px; }
}

/* ---- hub (/help/) — top-5 per app behind the selector --------------------- */
.help-root .help-panel { max-width: 44rem; margin: 40px auto 0; text-align: left; }
.help-root .help-panel .help-app-lead { text-align: center; margin: 0 auto; }
.help-root .help-top { margin: 28px 0 0; padding: 0; list-style: none; }
.help-root .help-top li + li { border-top: 1px solid var(--ink-100, #eaeaf1); }
.help-root .help-top a { display: flex; align-items: center; gap: 16px; padding: 16px 4px; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink-900, #25303f); }
.help-root .help-top a:hover { color: var(--color-primary, #8561aa); }
.help-root .help-top-n { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--prehook-purple-50, #f4eefa); color: var(--color-primary, #8561aa); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.help-root .help-more { margin: 28px 0 0; text-align: center; }
.help-root .help-hero--app { text-align: left; }
.help-root .help-hero--app .ph-h1, .help-root .help-hero--app .ph-lead { margin-left: 0; }
.help-root .help-hero--app .ph-h1 { margin-top: 18px; }
.help-root .help-app .help-grid { margin-top: 0; }

/* ---- legal documents (components/site/legal-doc.tsx) --------------------- */
.help-root .legal-dates { margin-top: 14px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500, #747d88); }
.help-root .legal-toc { margin-top: 28px; padding: 22px 26px; border-radius: 14px; background: var(--ink-50, #f6f9fc); }
.help-root .legal-toc h2 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary, #8561aa); }
.help-root .legal-toc ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--ink-700, #4f5864); }
.help-root .legal-toc li + li { margin-top: 6px; }
.help-root .legal-toc a { color: var(--ink-700, #4f5864); }
.help-root .legal-toc a:hover { color: var(--color-primary, #8561aa); }
.help-root .legal-section { scroll-margin-top: 96px; }
.help-root .legal-section > * + * { margin-top: 18px; }
.help-root .legal-prose h3 { margin-top: 28px; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink-900, #25303f); }
.help-root .legal-prose p a, .help-root .legal-prose li a, .help-root .legal-table a { color: var(--color-primary, #8561aa); text-decoration: underline; text-underline-offset: 2px; }
.help-root .legal-prose ul li::before { content: "•"; background: none; color: var(--color-primary, #8561aa); font-size: 18px; top: 0; }
.help-root .legal-table-wrap { overflow-x: auto; }
.help-root .legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: var(--ink-body, #183335); }
.help-root .legal-table th, .help-root .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--ink-100, #eaeaf1); text-align: left; vertical-align: top; }
.help-root .legal-table th { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500, #747d88); }
.help-root .legal-toc ul { margin: 6px 0 4px; padding-left: 18px; list-style: disc; font-size: 14px; }
.help-root .legal-toc ul li + li { margin-top: 4px; }
.help-root .legal-prose .legal-ol { margin: 0; padding-left: 26px; }
.help-root .legal-prose .legal-ol li { font-size: 16px; line-height: 1.6; color: var(--ink-body, #183335); }
.help-root .legal-prose .legal-ol li + li { margin-top: 8px; }
.help-root .legal-quote { margin: 0; padding: 16px 20px; border-left: 4px solid var(--color-primary, #8561aa); border-radius: 0 12px 12px 0; background: var(--ink-50, #f6f9fc); }
.help-root .legal-quote p { margin: 0; font-size: 16px; }
.help-root .legal-prose h3[id] { scroll-margin-top: 96px; }