/* ask-maxine.css — the "Ask Maxine" promo block for the static library pages.

   WHY A SHARED FILE: the library pages are hand-written static HTML that do not load the app
   bundle, so a block reused on several of them needs one stylesheet, the same way efta-static.css
   serves the consumer next-step block. Change the look here and every page that links this file
   follows.

   HOW TO REUSE (paste where the block should sit, mid-article or just before the FAQ; link the
   stylesheet once in <head> after the page's own <style>):

     <link rel="stylesheet" href="/library/ask-maxine.css" />

     <aside class="ask-maxine" aria-labelledby="ask-maxine-heading">
       <p class="ask-maxine__eyebrow">Ask Maxine</p>
       <h2 class="ask-maxine__title" id="ask-maxine-heading">One question about TOPIC?</h2>
       <p class="ask-maxine__body">One or two sentences saying what a reader can ask. Keep it to
       general rules; personal figures come from a claiming analysis.</p>
       <a class="ask-maxine__btn" href="/faq?maxine=open" rel="nofollow">Ask Maxine a question</a>
       <p class="ask-maxine__note">Maxine is MySSAgent&rsquo;s AI assistant. She explains rules in general
       terms; figures for a specific earnings record come from a claiming analysis.</p>
     </aside>

   HOW THE LINK WORKS: a static page cannot open the chat widget, because the widget is part of the
   React app. /faq?maxine=open loads the app and ChatWidget opens itself when it sees maxine=open
   (src/components/ChatWidget.tsx). Use that URL as is.

   DO NOT ADD to this block: Maxine's phone number or any mention of a phone line or texting (the
   number is not approved for public listing, launch gate 1f), or any claim about what Maxine
   cannot do or what other tools cannot do.

   Selectors are nested under .ask-maxine so they outrank each page's own element rules
   (a{color}, h2{margin}) without !important. */

.ask-maxine {
  --am-navy: #2c3e50;
  --am-green: #4fb387;
  --am-cream: #fff7e6;
  background: var(--am-cream);
  border: 1px solid #e4ebe8;
  border-left: 5px solid var(--am-green);
  border-radius: 0 14px 14px 0;
  padding: 22px 24px;
  margin: 40px 0;
  font-family: 'League Spartan', system-ui, sans-serif;
}
.ask-maxine .ask-maxine__eyebrow {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #2f7d5b;
}
.ask-maxine .ask-maxine__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--am-navy);
}
.ask-maxine .ask-maxine__body {
  margin: 0 0 16px;
  color: #454754;
}
.ask-maxine .ask-maxine__btn {
  display: inline-block;
  background: var(--am-navy);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 9px;
}
.ask-maxine .ask-maxine__btn:hover { background: #22303d; }
.ask-maxine .ask-maxine__btn:focus-visible { outline: 3px solid var(--am-green); outline-offset: 2px; }
.ask-maxine .ask-maxine__note {
  margin: 14px 0 0;
  font-size: .86rem;
  color: #5d6a75;
}