/*
 * Redesigned home page styles — loaded ONLY by app/(site)/page.tsx.
 *
 * Plain CSS (no Tailwind) layered on top of the shared design system in
 * /public/prehook-ui.css. The header/burger/rotator/footer chrome this page
 * shares with the two app pages lives in /styles/site-chrome.css, which the
 * page links AFTER this sheet; what is left here is home-specific layout.
 *
 * Every rule is scoped under .home-root so nothing can leak into the legacy
 * Divi replicas. The .home-root base itself is in site-chrome.css.
 *
 * Selector discipline:
 * - resets sit in :where(...) (zero specificity) so shared ph-* classes
 *   always beat them;
 * - .home-* rules are written as `.home-root .home-*` (0,2,0) so they beat
 *   the ph-* base classes they modify regardless of stylesheet order.
 */

/* The .home-root base (resets, font/token bridge, legacy armour) lives in
   /styles/site-chrome.css since 2026-08-25: the header/footer depend on it on
   EVERY page that wears the home chrome, not only on this one. */

/* ---- shared page scaffolding ---------------------------------------------- */
/* home keeps its WordPress-era 24px gutter (ph-container is 32px; switching
   would shift all left-aligned content 8px against the approved look) */
.home-root .home-container { max-width: 75rem; margin: 0 auto; padding: 0 24px; }
.home-root .home-center { text-align: center; }
.home-root .home-section-title { margin-top: 16px; }
.home-root .home-h2-light { color: var(--paper, #fff); }
.home-root .home-kicker { line-height: 16px; }
.home-root .home-kicker--light { color: var(--prehook-purple-300, #b391d2); }
.home-root .home-accent { color: var(--color-primary, #8561aa); font-style: italic; }
.home-root .home-accent--light { color: var(--prehook-purple-300, #b391d2); font-style: italic; }

/* ---- button variants used on this page (on top of .ph-btn) ---------------- */
.home-root .home-btn-hero { padding: 18px 24px; line-height: 1; }
.home-root .home-btn-outline { padding: 16px 22px; line-height: 1; border: 2px solid var(--color-primary, #8561aa); color: var(--color-primary, #8561aa); background: transparent; }
.home-root .home-btn-outline:hover { background: var(--prehook-purple-50, #f4eefa); }
/* app buttons (hero pair + card CTAs): outline + the app's icon on the left */
.home-root .home-btn-app { display: inline-flex; align-items: center; gap: 10px; }
.home-root .home-btn-icon { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }

/* ---- hero (the background rotator + wash live in site-chrome.css) --------- */
.home-root .home-hero { position: relative; overflow: hidden; }
.home-root .home-hero-inner { position: relative; max-width: 75rem; margin: 0 auto; padding: 80px 24px 112px; text-align: center; }
.home-root .home-hero-h1 { margin: 24px auto 0; max-width: 48rem; }
.home-root .home-hero-lead { margin: 28px auto 0; max-width: 42rem; color: var(--ink-900, #25303f); }
.home-root .home-hero-cta-row { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.home-root .home-hero-note { margin-top: 32px; font-size: 14px; line-height: 20px; color: var(--ink-500, #747d88); }

/* ---- products -------------------------------------------------------------- */
.home-root .home-products { border-top: 1px solid var(--ink-100, #eaeaf1); }
.home-root .home-products-grid { margin-top: 64px; display: grid; gap: 32px; }
.home-root .home-product-card { display: flex; flex-direction: column; border-radius: 14px; padding: 40px; box-shadow: 0 6px 18px rgba(37, 48, 63, 0.06); }
.home-root .home-product-n { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; color: var(--prehook-purple-200, #cdb6e1); }
.home-root .home-card-title { margin-top: 16px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--ink-900, #25303f); }
.home-root .home-card-tagline { margin-top: 4px; color: var(--color-primary, #8561aa); font-style: italic; }
.home-root .home-card-body { margin-top: 16px; }
.home-root .home-card-list { margin-top: 24px; }
.home-root .home-card-list > li + li { margin-top: 12px; }
.home-root .home-card-bullet { display: flex; gap: 12px; font-size: 15px; }
.home-root .home-check { margin-top: 2px; color: var(--color-primary, #8561aa); }
.home-root .home-card-cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.home-root .home-text-link { font-size: 14px; line-height: 20px; color: var(--ink-500, #747d88); text-underline-offset: 4px; transition: color 0.15s; }
.home-root .home-text-link:hover { color: var(--prehook-purple-600, #6e4f8f); text-decoration: underline; }
@media (min-width: 1024px) {
  .home-root .home-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- pillars (dark band) ---------------------------------------------------- */
.home-root .home-pillars-title { margin-top: 16px; max-width: 42rem; }
.home-root .home-pillars-grid { margin-top: 56px; display: grid; gap: 40px; }
.home-root .home-pillar { border-top: 1px solid var(--ink-700, #4f5864); padding-top: 24px; }
.home-root .home-pillar-n { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--prehook-purple-300, #b391d2); }
.home-root .home-pillar-title { margin-top: 12px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 700; }
.home-root .home-pillar-body { margin-top: 12px; font-size: 15px; line-height: 23.25px; color: var(--ink-300, #c4c7cb); }
@media (min-width: 768px) {
  .home-root .home-pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- CTA + subscribe --------------------------------------------------------- */
.home-root .home-cta { background: var(--ink-900, #25303f); }
.home-root .home-cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.home-root .home-cta-title { max-width: 42rem; }
.home-root .home-cta-copy { max-width: 36rem; color: var(--ink-300, #c4c7cb); }

.home-root .home-subscribe { display: flex; width: 100%; max-width: 36rem; flex-direction: column; gap: 12px; }
.home-root .home-subscribe-input { height: 52px; flex: 1; border-radius: 6px; border: 1px solid var(--ink-700, #4f5864); background: var(--ink-900, #25303f); padding: 0 24px; font-family: var(--font-body); font-size: 15px; color: var(--paper, #fff); }
.home-root .home-subscribe-input::placeholder { color: var(--ink-500, #747d88); }
.home-root .home-subscribe-input:focus { border-color: var(--prehook-purple-300, #b391d2); outline: none; }
.home-root .home-subscribe-btn { flex-shrink: 0; }
.home-root .home-subscribe-btn:disabled { opacity: 0.6; }
.home-root .home-subscribe-done { font-size: 18px; line-height: 28px; color: var(--prehook-purple-200, #cdb6e1); }
.home-root .home-subscribe-error { font-size: 14px; line-height: 20px; color: #fca5a5; }
@media (min-width: 640px) {
  .home-root .home-subscribe { flex-direction: row; }
  .home-root .home-subscribe-error { position: absolute; margin-top: 64px; }
}

/* ---- mobile (Diego 2026-08-23) ---------------------------------------------
   Size the page for a thumb: tighter hero/section gutters, full-width stacked
   CTAs, real tap heights on link lists. (The nav/footer half of these rules
   lives in /styles/site-chrome.css.) */

/* touch-sized link lists apply through tablet widths too */
@media (max-width: 900px) {
  .home-root .home-text-link { display: inline-block; padding: 9px 0; }
}

@media (max-width: 767px) {
  .home-root .home-container { padding: 0 20px; }
  .home-root .home-hero-inner { padding: 56px 20px 72px; }
  .home-root .home-hero-h1 { margin-top: 18px; }
  .home-root .home-hero-lead { margin-top: 20px; }
  .home-root .home-hero-cta-row { margin-top: 30px; gap: 12px; }
  .home-root .home-hero-cta-row > .ph-btn { width: 100%; }
  .home-root .home-hero-note { margin-top: 26px; }
  .home-root .home-products-grid { margin-top: 40px; gap: 24px; }
  .home-root .home-product-card { padding: 28px 22px; }
  .home-root .home-product-n { font-size: 40px; }
  .home-root .home-card-cta-row > .ph-btn { width: 100%; }
  .home-root .home-pillars-grid { margin-top: 40px; gap: 32px; }
  .home-root .home-cta-inner { gap: 24px; }
}

/* ---- a11y helper ------------------------------------------------------------------ */
.home-root .home-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* hero star rating — quiz review-star amber, half star via clip */
.home-root .home-stars { display: inline-flex; gap: 2px; vertical-align: -3px; margin: 0 6px; }
.home-root .home-star { position: relative; display: inline-block; width: 17px; height: 17px; }
.home-root .home-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-root .home-star-track { color: #DBDCDE; }
.home-root .home-star-fill { color: #F5B301; }
.home-root .home-star-fill--half { clip-path: inset(0 50% 0 0); }

/* honeypot field — visually gone, still in the accessibility-hidden DOM */
.home-root .home-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }