/*
   Aurora — site-wide hue token system.
   One design skeleton, four palettes. The skeleton (typography rhythm,
   padding scale, component vocabulary, CTA color, motion) is the same on
   every landing. Only the HUE rotates per page via the body class set by
   _Layout.cshtml (ViewData["PageClass"]).

   Page palettes:
   - .page-home : Aurora sweep — represents the 3-product ecosystem
   - .page-aipb : Brand anchor — purple, the flagship hue
   - .page-aids : Warm — pink/coral for the creative drawing product
   - .page-pmw  : Cool — sky/cyan for the fluid mosaic product

   Primary CTA color (--c-cta-from / --c-cta-to) is intentionally fixed
   across all pages so users recognise the action target everywhere.
*/

:root {
    /* Fallback (any body without page-* class lands here) — anchor palette. */
    --hue-base:        #050210;
    --hue-radial-a:    #7F56D9;
    --hue-radial-b:    #C864B4;
    --hue-radial-c:    #7331E0;
    --hue-emph-from:   #F43F5E;
    --hue-emph-to:     #FCD34D;
    --hue-surface:     #FAFAFB;
    --hue-accent:      #7F56D9;
    --hue-accent-soft: rgba(127, 86, 217, 0.10);

    /* Fixed brand CTA — never changes per page. */
    --c-cta-from:      #FF7A5C;
    --c-cta-to:        #F43F5E;
    --c-cta-hover-from:#F76A4D;
    --c-cta-hover-to:  #E0334C;
}

/* Palette refinement 2 (Aurora 2026-05-21 evening):
   - Dark bases lifted ~2-3 L* points so they sit at "premium dark navy"
     instead of "pure black" — Stripe / Linear / Vercel all use #1A-#22
     range for their dark hero bases, never below #10.
   - Emphasis gradients gently desaturated (~8%) so they read as accents,
     not neon. */
.page-home {
    --hue-base:        #0E0623;
    --hue-radial-a:    #8E68D5;
    --hue-radial-b:    #ED4D6D;
    --hue-radial-c:    #FBD065;
    --hue-emph-from:   #ED4D6D;
    --hue-emph-to:     #FBD065;
    --hue-surface:     #FAFAFB;
    --hue-accent:      #7F56D9;
    --hue-accent-soft: rgba(127, 86, 217, 0.08);
}

.page-aipb {
    --hue-base:        #0B0420;
    --hue-radial-a:    #8E68D5;
    --hue-radial-b:    #C36AB8;
    --hue-radial-c:    #7945D5;
    --hue-emph-from:   #ED4D6D;
    --hue-emph-to:     #FBD065;
    --hue-surface:     #FAFAFB;
    --hue-accent:      #7F56D9;
    --hue-accent-soft: rgba(127, 86, 217, 0.10);
}

.page-aids {
    /* Emerald-Mint with warm gold spark — creative AI drawing palette (v7).
       Hue ~158° puts AIDS clearly between Purple (AIPB ~262°) and
       Cyan (PMW ~199°). Emerald's yellow-warm undertone reads as
       "fresh, creative, art-gallery green" while staying premium SaaS.
       Coral CTA pops dramatically against the green base. */
    --hue-base:        #04211B;
    --hue-radial-a:    #10B981;
    --hue-radial-b:    #34D399;
    --hue-radial-c:    #FACC15;
    --hue-emph-from:   #5EEAD4;
    --hue-emph-to:     #FACC15;
    --hue-surface:     #ECFDF5;
    --hue-accent:      #10B981;
    --hue-accent-soft: rgba(16, 185, 129, 0.10);
}

.page-pmw {
    --hue-base:        #061E33;
    --hue-radial-a:    #2EAEEA;
    --hue-radial-b:    #2BBFD3;
    --hue-radial-c:    #ED4D6D;
    --hue-emph-from:   #4EDDF0;
    --hue-emph-to:     #B59AF7;
    --hue-surface:     #F2FBFE;
    --hue-accent:      #0EA5E9;
    --hue-accent-soft: rgba(14, 165, 233, 0.10);
}

/* .page-glm : Cinematic magenta/violet — Dobot Nova 5 GlamBot (red-carpet / fashion). */
.page-glm {
    --hue-base:        #170A24;
    --hue-radial-a:    #D946EF;
    --hue-radial-b:    #F43F5E;
    --hue-radial-c:    #A855F7;
    --hue-emph-from:   #F5A3FF;
    --hue-emph-to:     #FCD34D;
    --hue-surface:     #FDF4FF;
    --hue-accent:      #D946EF;
    --hue-accent-soft: rgba(217, 70, 239, 0.10);
}

/* ============================================================================
   Site-wide eyebrow removal — section eyebrow chips above section headings
   are not used in our design system. Industry standard (Stripe, Linear,
   Vercel, Notion) leads sections with the H2 directly. Eyebrow text was
   small, gray, and added a stale "marketing eyebrow" feel. Removed.
   ============================================================================ */
.hx-eyebrow,
.pb-eyebrow,
.hm-eyebrow,
.hx-price-eyebrow,
.hm-trustband-eyebrow,
.s02-eyebrow,
.s03-eyebrow,
.s04-eyebrow,
.s05-eyebrow,
.s06-eyebrow,
.s07-eyebrow,
.s08-eyebrow,
.s10-eyebrow,
.scs-eyebrow,
.pp-eyebrow,
.abt-eyebrow,
.aff-eyebrow,
.hx-s-eyebrow {
    display: none !important;
}

/* ============================================================================
   Hero height + padding parity — all four landings (home + aipb + aids + pmw)
   use the same hero shell vertical rhythm. Previously homepage was ~140px
   taller because .hm-hero-live had min-height: 85vh while .s01 had none.
   ============================================================================ */
/* Force parity — original sources have inconsistent height rules.
   Tightened 2026-05-21 audit v6: hero min-height 820→720 desktop,
   inner padding 168→128 top / 96→64 bottom (industry standard,
   matches aurora-typography.css). */
.hm-hero-live,
.s01 {
    min-height: clamp(560px, 68vh, 720px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.s01-w,
.hm-hero-grid {
    padding-top: clamp(112px, 9vw, 144px) !important;
    padding-bottom: clamp(72px, 6.5vw, 96px) !important;
    width: 100%;
}

/* ============================================================================
   Contrast fixes — surfaced by audit 2026-05-21.
   .hx-media-label was white text on white card; it's the placeholder label
   inside video tiles. Card bg is dark, label should be readable on dark.
   ============================================================================ */
.hx-media-label {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    padding: 6px 10px;
    border-radius: 6px;
}

/* ============================================================================
   Hero grain texture — subtle film-grain overlay for depth, used on all
   dark heroes. The data-uri SVG noise is tiny (<400 bytes), tiled once.
   Industry pattern: Stripe.com / Vercel.com / Linear.app all use a film
   grain to break up large gradient surfaces. */
.s01,
.hm-hero-live,
.hm-hero {
    --hero-grain-url: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.s01::after,
.hm-hero-live::after,
.hm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-grain-url);
    background-size: 200px 200px;
    opacity: .35;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* ============================================================================
   Below-hero surface tinting — subtle per-page hue carries through the page.
   Only AIDS (warm) and PMW (cool) get a tint; homepage and AIPB stay neutral.
   The tint is 2-4% saturation so it never overpowers content; it just gives
   a subliminal "I'm on the AIDS / PMW product page" cue throughout scroll.
   ============================================================================ */
.page-aids :is(.hx-s03, .hx-s05, .s03, .s05, .pb-section--surface) {
    background-color: var(--hue-surface) !important;
}
.page-pmw :is(.hx-s03, .hx-s05, .s03, .s05, .pb-section--surface) {
    background-color: var(--hue-surface) !important;
}

/* ============================================================================
   Content text colors — unified across all 4 page palettes.
   Light sections: slate-900 H2 / slate-600 body / slate-500 meta.
   Dark sections (hx-s10 closing CTA, AIPB .s02/.s07): white H2 / 72%
   white body. Hue distinction comes from accents (eyebrow, link hover,
   H2 emphasis gradient) — body type stays consistent for readability.
   ============================================================================ */
.hx-h2, .pb-section-title,
.s02-t, .s03-t, .s04-t, .s05-t, .s06-t, .s07-t, .s08-t { color: #101828; }
.hx-sub, .hx-p, .pb-section-sub,
.s02-sub, .s03-sub, .s05-sub, .s07-sub { color: #475467; }
.hx-d, .hx-card-d, .pb-card-d { color: #667085; }

/* Dark closing CTA section — invert for legibility */
.hx-s10 .hx-h2, .hx-s10 h2, .s10 h2,
.hx-s10 .pb-section-title { color: #fff !important; }
.hx-s10 .hx-sub, .hx-s10 p, .s10 p,
.hx-s10 .pb-section-sub { color: rgba(255, 255, 255, 0.72) !important; }

/* AIPB dark .s02 + .s07 sections: inverted typography */
.page-aipb .s02 h2, .page-aipb .s02 .s02-t,
.page-aipb .s07 h2, .page-aipb .s07 .s07-t { color: #fff !important; }
.page-aipb .s02 p,  .page-aipb .s02 .s02-sub,
.page-aipb .s07 p,  .page-aipb .s07 .s07-sub { color: rgba(255, 255, 255, 0.72) !important; }

/* ============================================================================
   Industry-standard rhythm enforcement — all 4 landings:
       hero (dark) → light/light-gray alternating middle → closing CTA (dark)
   Aurora hue lives in: hero base, eyebrow accent, H2 emphasis gradient,
   closing CTA bg, card gradient placeholders. The middle of the page is
   white/light-tinted so content reads cleanly and CTAs (coral) pop.

   Below: convert previously-dark middle sections (.s02 on all 4 landings,
   .s07 on AIPB) to LIGHT bg + inverted card typography.
   ============================================================================ */

/* All 4 pages: .s02 light bg (page-tinted for AIDS/PMW, white for home/AIPB) */
.page-home .s02 { background: #fff !important; }
.page-aipb .s02 { background: #FAFAFB !important; }
.page-aids .s02 { background: var(--hue-surface, #FFF8FA) !important; }
.page-pmw  .s02 { background: var(--hue-surface, #F2FBFE) !important; }
.page-home .s02::before, .page-home .s02::after,
.page-aipb .s02::before, .page-aipb .s02::after,
.page-aids .s02::before, .page-aids .s02::after,
.page-pmw  .s02::before, .page-pmw  .s02::after { display: none; }

/* AIPB .s07 was the second dark mid-page section — convert to light too */
.page-aipb .s07 { background: #fff !important; }
.page-aipb .s07::before, .page-aipb .s07::after { display: none; }

/* Light .s02/.s07 card inversion — card was a dark-glass tile, now light
   with subtle border + soft shadow (Stripe/Linear card pattern) */
.page-home .s02 .s02-card,
.page-aipb .s02 .s02-card, .page-aipb .s07 .s07-card,
.page-aids .s02 .s02-card, .page-pmw .s02 .s02-card {
    background: #fff !important;
    border: 1px solid #EAECF0 !important;
    box-shadow: 0 2px 6px -2px rgba(16, 24, 40, 0.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-home .s02 .s02-card:hover,
.page-aipb .s02 .s02-card:hover, .page-aipb .s07 .s07-card:hover,
.page-aids .s02 .s02-card:hover, .page-pmw .s02 .s02-card:hover {
    background: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(16, 24, 40, 0.10);
    border-color: var(--hue-accent) !important;
}

/* Light s02/s07 card typography inverted: white-on-dark → dark-on-light */
.page-home .s02 .s02-card-t,
.page-aipb .s02 .s02-card-t, .page-aipb .s07 .s07-card-t,
.page-aids .s02 .s02-card-t, .page-pmw .s02 .s02-card-t {
    color: #101828 !important;
}
.page-home .s02 .s02-card-d,
.page-aipb .s02 .s02-card-d, .page-aipb .s07 .s07-card-d,
.page-aids .s02 .s02-card-d, .page-pmw .s02 .s02-card-d {
    color: #667085 !important;
}

/* Section headings on .s02 / .s07 — H2 inherits from .hx-h2 #101828 rule
   already set above. .s02-t / .s07-t had explicit colors that need invert. */
.page-aipb .s02 .s02-t, .page-aipb .s07 .s07-t,
.page-aids .s02 .s02-t, .page-pmw .s02 .s02-t,
.page-home .s02 .s02-t {
    color: #101828 !important;
}
.page-aipb .s02 .s02-sub, .page-aipb .s07 .s07-sub,
.page-aids .s02 .s02-sub, .page-pmw .s02 .s02-sub,
.page-home .s02 .s02-sub {
    color: #475467 !important;
}

/* Per-page H2 emphasis (em inside headings) — same gradient as hero H1
   so the page reads as one continuous palette top-to-bottom. */
.page-aids :is(.hx-h2, .pb-section-title, .s02-t, .s05-t) em,
.page-pmw :is(.hx-h2, .pb-section-title, .s02-t, .s05-t) em,
.page-home :is(.hx-h2, .pb-section-title, .s02-t, .s05-t) em,
.page-aipb :is(.hx-h2, .pb-section-title,
    .s02-t, .s03-t, .s04-t, .s05-t, .s06-t, .s07-t, .s08-t, .s09-t,
    .s10-h, .s11-t, .s13-t) em,
.page-aipb .s07-t .coral,
.page-aipb .s10-h em {
    background: linear-gradient(135deg, var(--hue-emph-from), var(--hue-emph-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
}

/* Per-page link accent in content sections (visible on light bg) */
.page-aids :is(.hx-section, .pb-section, .s02, .s03, .s05) a:not(.pb-btn-primary):not(.pb-btn):not([class*="cta"]):not([class*="btn"]):hover,
.page-pmw :is(.hx-section, .pb-section, .s02, .s03, .s05) a:not(.pb-btn-primary):not(.pb-btn):not([class*="cta"]):not([class*="btn"]):hover,
.page-aipb :is(.hx-section, .pb-section, .s02, .s03, .s05) a:not(.pb-btn-primary):not(.pb-btn):not([class*="cta"]):not([class*="btn"]):hover,
.page-home :is(.hx-section, .pb-section, .s02, .s03, .s05) a:not(.pb-btn-primary):not(.pb-btn):not([class*="cta"]):not([class*="btn"]):hover {
    color: var(--hue-accent);
}