/* GX-V2-VISUAL-SYSTEM v2-fix2
   Rewritten to use only simple CSS constructs. Avoids :not() pseudo-class,
   multi-line property values, and selector lists longer than three entries.
   The previous v2.css triggered silent parser drops in Edge: 8 of 25 rules
   were discarded and the hero surfaces rule was partially mangled.

   fix2 (this version): hero card layout. The legacy rule
     .assessment-main .hero, .assessment-main .page-intro { padding: clamp(56px,8vw,96px) 0 36px }
   has ZERO horizontal padding because the original design never painted a
   background. Now that v2.css paints a solid dark surface, text was flush
   to the left edge. fix2 adds horizontal padding, rounded corners, and
   vertical margin so .hero and .page-intro render as proper cards.
   .page-intro.practitioner-hero is unaffected because legacy assessment.css
   already gives it its own padding rule with !important and higher
   specificity. */


/* --- CANARY-START: lets the diagnostic check parser reached this point --- */
:root { --gx-v2-canary-start: present; }


/* --- Hero surfaces -------------------------------------------------------- */
body.assessment-page .hero { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .page-intro { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .practitioner-hero { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .gx-console-hero { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .assessment-hero { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .report-hero { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .artefact-hero { background-color: #201936 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; }


/* --- Hero card layout (.hero and .page-intro stand-alone) --------------- */
/* These selectors also match .page-intro.practitioner-hero, but the legacy */
/* .assessment-main .page-intro.practitioner-hero rule has higher           */
/* specificity (0,3,0) than these (0,2,1) and uses !important, so the       */
/* practitioner-hero padding wins for those elements. .hero and             */
/* .page-intro-only get this card layout.                                   */
body.assessment-page .hero { padding-top: 56px !important; padding-right: 48px !important; padding-bottom: 56px !important; padding-left: 48px !important; border-radius: 28px !important; margin-top: 28px !important; margin-bottom: 28px !important; }
body.assessment-page .page-intro { padding-top: 56px !important; padding-right: 48px !important; padding-bottom: 56px !important; padding-left: 48px !important; border-radius: 28px !important; margin-top: 28px !important; margin-bottom: 28px !important; }

/* Mobile: tighter padding and smaller radius (matches legacy practitioner-hero mobile rule) */
@media (max-width: 720px) {
  body.assessment-page .hero { padding-top: 26px !important; padding-right: 20px !important; padding-bottom: 26px !important; padding-left: 20px !important; border-radius: 20px !important; }
  body.assessment-page .page-intro { padding-top: 26px !important; padding-right: 20px !important; padding-bottom: 26px !important; padding-left: 20px !important; border-radius: 20px !important; }
}


/* --- Hero headings -------------------------------------------------------- */
body.assessment-page .hero h1 { color: #ffffff !important; }
body.assessment-page .hero h2 { color: #ffffff !important; }
body.assessment-page .hero h3 { color: #ffffff !important; }
body.assessment-page .page-intro h1 { color: #ffffff !important; }
body.assessment-page .page-intro h2 { color: #ffffff !important; }
body.assessment-page .page-intro h3 { color: #ffffff !important; }
body.assessment-page .practitioner-hero h1 { color: #ffffff !important; }
body.assessment-page .practitioner-hero h2 { color: #ffffff !important; }
body.assessment-page .gx-console-hero h1 { color: #ffffff !important; }
body.assessment-page .gx-console-hero h2 { color: #ffffff !important; }


/* --- Hero body text (.lead, .subtitle) ---------------------------------- */
body.assessment-page .hero .lead { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .hero .subtitle { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .hero .subtitle-wide { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .page-intro .lead { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .page-intro .subtitle { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .practitioner-hero .lead { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .gx-console-hero .lead { color: rgba(255, 255, 255, 0.82) !important; }


/* --- Generic hero paragraphs (catch-all so dark-on-dark cannot occur) --- */
body.assessment-page .hero p { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .page-intro p { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .practitioner-hero p { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .gx-console-hero p { color: rgba(255, 255, 255, 0.82) !important; }


/* --- Dark hero eyebrow (practitioner / gx-console) ---------------------- */
body.assessment-page .practitioner-hero p.eyebrow { color: #ffffff !important; background-color: transparent !important; border: none !important; padding: 0 !important; }
body.assessment-page .gx-console-hero p.eyebrow { color: #ffffff !important; background-color: transparent !important; border: none !important; padding: 0 !important; }


/* --- Light eyebrow chip on .page-intro --------------------------------- */
body.assessment-page .page-intro > p.eyebrow { display: inline-block !important; padding: 0.30rem 0.55rem !important; border-radius: 0.50rem !important; background-color: #f1edff !important; color: #171326 !important; border: 1px solid #d8cff7 !important; }
body.assessment-page .page-intro > .eyebrow { display: inline-block !important; padding: 0.30rem 0.55rem !important; border-radius: 0.50rem !important; background-color: #f1edff !important; color: #171326 !important; border: 1px solid #d8cff7 !important; }


/* --- Override: if .page-intro also has .practitioner-hero, no chip ---- */
body.assessment-page .page-intro.practitioner-hero > p.eyebrow { background-color: transparent !important; color: #ffffff !important; border: none !important; padding: 0 !important; }


/* --- Template code chip ------------------------------------------------- */
body code.ga-template-code { display: inline-flex !important; align-items: center !important; padding: 0.32rem 0.6rem !important; border-radius: 0.55rem !important; background-color: #3a2a5d !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; }
body .ga-template-code { display: inline-flex !important; align-items: center !important; padding: 0.32rem 0.6rem !important; border-radius: 0.55rem !important; background-color: #3a2a5d !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; }


/* --- Pills and kickers on hero ------------------------------------------ */
body.assessment-page .hero .pill { color: #ffffff !important; background-color: #3a2a5d !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; }
body.assessment-page .hero .kicker { color: #ffffff !important; background-color: #3a2a5d !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; }
body.assessment-page .hero .kicker span { color: #ffffff !important; }


/* --- Ghost buttons on heroes ------------------------------------------- */
body.assessment-page .hero a.btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .hero .btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .page-intro a.btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .page-intro .btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .practitioner-hero a.btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .practitioner-hero .btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .gx-console-hero a.btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }
body.assessment-page .gx-console-hero .btn-ghost { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; }


/* --- Ghost button hover ------------------------------------------------- */
body.assessment-page .hero .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.68) !important; }
body.assessment-page .page-intro .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.68) !important; }
body.assessment-page .practitioner-hero .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.68) !important; }


/* --- Primary buttons on hero -------------------------------------------- */
body.assessment-page .hero a.btn-primary { color: #ffffff !important; background-color: #7b35d8 !important; border: 1px solid transparent !important; }
body.assessment-page .hero .btn-primary { color: #ffffff !important; background-color: #7b35d8 !important; border: 1px solid transparent !important; }


/* --- Tick lists on hero ------------------------------------------------- */
body.assessment-page .hero .tick-list li { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .practitioner-hero .tick-list li { color: rgba(255, 255, 255, 0.82) !important; }


/* --- Diagnostic-signal cards on hero ------------------------------------ */
body.assessment-page .diagnostic-signal { background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; }
body.assessment-page .diagnostic-signal h2 { color: #ffffff !important; }
body.assessment-page .diagnostic-signal h3 { color: #ffffff !important; }
body.assessment-page .diagnostic-signal p { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .diagnostic-signal li { color: rgba(255, 255, 255, 0.82) !important; }
body.assessment-page .diagnostic-signal .pill { color: #ffffff !important; background-color: #3a2a5d !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; }
body.assessment-page .diagnostic-signal .kicker { color: #ffffff !important; background-color: #3a2a5d !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; }


/* --- Step / form cards: light surface, dark text ------------------------ */
body.assessment-page .step-card { background-color: #ffffff !important; color: #1a1a2e !important; border: 1px solid rgba(26, 26, 46, 0.10) !important; }
body.assessment-page .card-form { background-color: #ffffff !important; color: #1a1a2e !important; border: 1px solid rgba(26, 26, 46, 0.10) !important; }


/* --- Header nav (light mode) ------------------------------------------- */
body.assessment-page .header .nav a { color: #1a1a2e !important; }
body.assessment-page .header .nav .dropbtn { color: #1a1a2e !important; }
body.assessment-page .header .dropdown-menu a { color: #1a1a2e !important; }
body.assessment-page .header .dropdown-menu .menu-top { color: #1a1a2e !important; }
body.assessment-page .mobile-panel .nav a { color: #1a1a2e !important; }


/* --- Header nav (dark mode) -------------------------------------------- */
html[data-theme="dark"] body.assessment-page .header .nav a { color: #f7f3ff !important; }
html[data-theme="dark"] body.assessment-page .header .nav .dropbtn { color: #f7f3ff !important; }
html[data-theme="dark"] body.assessment-page .header .dropdown-menu a { color: #f7f3ff !important; }
html[data-theme="dark"] body.assessment-page .mobile-panel .nav a { color: #f7f3ff !important; }


/* --- Theme toggle ------------------------------------------------------- */
body.assessment-page .theme-toggle { background-color: transparent !important; color: #1a1a2e !important; border: 1px solid rgba(26, 26, 46, 0.18) !important; }
html[data-theme="dark"] body.assessment-page .theme-toggle { color: #f7f3ff !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; }


/* --- CANARY-END: lets the diagnostic verify the file was parsed fully --- */
:root { --gx-v2-canary-end: present; }