/* ============================================================
   AskMAE.ai(TM) - customers page background.
   Dark at the very top, fading into the artwork, so the part
   people actually read is light with dark text.

   The four page tokens below are copied by name and value from
   css/style-products.css, so this page reads exactly like the
   products page. customers.php does not load that sheet, so the
   tokens are declared here rather than inherited.
   Loaded last, so it wins over the dark sheet.
   ============================================================ */

:root{
  --page-ink: #1d0048;        /* all body type            (style-products.css) */
  --page-ink-soft: #2f2358;   /* secondary type           (style-products.css) */
  --page-canvas: #F7F5FA;     /* the light ground         (style-products.css) */
  --page-canvas-edge: #E4DFEC;/* the same canvas, darker  (style-products.css) */
}

body{
  background-image:
    linear-gradient(to bottom,
      var(--void)        0px,
      var(--void)        320px,
      rgba(11,6,44,0.62) 560px,
      rgba(11,6,44,0.18) 740px,
      rgba(11,6,44,0)    900px),
    linear-gradient(rgba(247,245,250,0.90), rgba(247,245,250,0.90)),
    url('../images/Customers-Web-Page-BG.jpg');
  background-repeat:no-repeat, repeat, no-repeat;
  background-position:center top, center top, center top;
  background-size:100% 900px, auto, cover;
  background-attachment:scroll, fixed, fixed;
  background-color:var(--page-canvas);
  color:var(--page-ink);
}

/* Let the artwork show through the page body. */
main, main section, main .container{ background:transparent; }

/* The reading area, same ink as products. */
main h1, main h2, main h3, main h4, main h5{ color:var(--page-ink); }
main p, main li, main dt, main dd, main td, main th, main figcaption{
  color:var(--page-ink);
}
main .lede, main .eyebrow, main small, main .label, main .sub{
  color:var(--page-ink-soft);
}
main a{ color:var(--accent); }
main a:hover{ color:var(--page-ink); }

/* The hero sits on the dark band, so it stays light. */
.hero, .hero h1, .hero h2, .hero p, .hero li, .hero .lede,
.hero .eyebrow, .hero .num, .hero .label, .hero .terminal{
  color:var(--ivory);
}

/* Panels and cards need a light surface now, not a dark one. */
main .card, main .panel, main .box, main .tile,
main .stat, main .quote, main blockquote{
  background:rgba(247,245,250,0.78);
  border-color:var(--page-canvas-edge);
  color:var(--page-ink);
}

/* The footer stays dark on purpose, so the page closes the way it opened. */
footer, .site-footer, #site-footer{
  background:var(--void);
  color:var(--ivory);
}

/* The ticker band now lives in style.css so every page matches. */

/* The call to action box. Solid, not see through, and its text stays
   light because the box itself is dark. */
main .cta{
  background:var(--purple-deep);
  border-color:var(--line-bright);
}
main .cta h1, main .cta h2, main .cta h3, main .cta p,
main .cta li, main .cta em, main .cta .lede{
  color:var(--ivory);
}

/* Accordion questions. They were light text built for a dark page. */
main .acc-trigger, main .acc-trigger *,
main .accordion summary, main .acc-item > button{
  color:var(--page-ink);
}
main .acc-panel, main .acc-panel-inner,
main .acc-panel-inner p, main .acc-panel-inner li{
  color:var(--page-ink);
}