/* PROTOTYPE: the designer's banded newsletter comp ("Heading here.pdf").
   Third register alongside letter.css (transactional) and marketing.css
   (today's card-on-grey issue). Full-bleed colour bands instead of a floating
   white card. premailer-rails inlines everything here at delivery; the
   responsive overrides live in a data-premailer="ignore" <style> block in the
   layout, because inlined rules beat <style> rules unless flagged !important.

   Colours sampled straight off the comp: every band is a flat fill, no
   gradients anywhere, and all four values are existing brand tokens. */

.email body { margin: 0; padding: 0; background-color: #EDF1F7; }
.email .canvas { width: 100%; background-color: #EDF1F7; }
.email .frame {
  width: 600px; max-width: 600px; margin: 0 auto;
  background-color: #FFFFFF;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---- bands ---------------------------------------------------------- */
.email .band-navy  { background-color: #091435; }
.email .band-blue  { background-color: #8EB8DF; }
.email .band-white { background-color: #FFFFFF; }
.email .pad        { padding: 40px 32px; }
.email .pad-tight  { padding: 28px 32px; }

/* ---- type ------------------------------------------------------------ */
.email .eyebrow {
  font-family: "Figtree", system-ui, Arial, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1;
}
.email .eyebrow-on-navy  { color: #FFFFFF; }
.email .eyebrow-on-light { color: #091435; }

.email .display {
  font-family: "Funnel Display", "Segoe UI", system-ui, Arial, sans-serif;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0;
}
.email .display-xl { font-size: 30px; }
.email .display-lg { font-size: 26px; }
.email .display-md { font-size: 21px; }
.email .on-navy  { color: #8EB8DF; }
.email .on-light { color: #091435; }
/* Navy, not white: white on the pale blue band measures 2.1:1, under the 3:1
   floor for large text, and it read as the palest thing in the block while the
   body copy beneath it was navy and crisp. Navy takes the same pairing to
   8.7:1 and puts the heading back at the top of the hierarchy. */
.email .on-blue  { color: #091435; }

.email .copy { font-size: 15px; line-height: 1.65; margin: 0; }
.email .copy-navy  { color: #323132; }
.email .copy-blue  { color: #091435; }
.email .copy-muted { color: #5A5358; }

/* ---- the letter's rich text -------------------------------------------
   Action Text output from the admin editor, so it has to survive whatever
   headings, lists, quotes and images an issue carries. */
/* On the container, not just on p: Action Text emits divs and bare text as
   well as paragraphs, and those inherited the browser's 16px default while the
   greeting and signoff sat at 15px. The letter looked like two type sizes. */
.email .newsletter-body {
  font-size: 15px; line-height: 1.65; color: #323132;
}
.email .newsletter-body h1,
.email .newsletter-body h2,
.email .newsletter-body h3 {
  font-family: "Funnel Display", "Segoe UI", system-ui, Arial, sans-serif;
  font-weight: 700; letter-spacing: -0.02em; color: #091435; line-height: 1.15; margin: 26px 0 12px;
}
.email .newsletter-body h1 { font-size: 24px; }
.email .newsletter-body h2 { font-size: 20px; }
.email .newsletter-body h3 { font-size: 17px; }
.email .newsletter-body p { font-size: 15px; line-height: 1.65; color: #323132; margin: 0 0 16px; }
.email .newsletter-body ul, .email .newsletter-body ol { margin: 0 0 16px; padding-left: 22px; }
.email .newsletter-body li { font-size: 15px; line-height: 1.65; color: #323132; margin: 0 0 8px; }
.email .newsletter-body a { color: #091435; text-decoration: underline; }
.email .newsletter-body strong { color: #091435; }
.email .newsletter-body img { max-width: 100%; height: auto; border-radius: 10px; }
.email .newsletter-body blockquote {
  margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid #8EB8DF; color: #5A5358;
}
.email .newsletter-body hr { border: none; border-top: 1px solid rgba(50,49,50,.12); margin: 22px 0; }

/* ---- links & buttons -------------------------------------------------- */
.email a.textlink {
  font-family: "Figtree", system-ui, Arial, sans-serif;
  font-size: 15px; font-weight: 600; color: #091435;
  text-decoration: underline;
}
.email a.orangelink {
  font-family: "Figtree", system-ui, Arial, sans-serif;
  font-size: 14px; font-weight: 600; color: #F09124;
  text-decoration: underline;
}
.email a.btn-white {
  display: inline-block; background-color: #FFFFFF; color: #091435;
  /* Outlook's Word engine ignores padding on an anchor; mso-padding-alt is
     what gives the button its box there rather than bare text on a colour. */
  padding: 13px 22px; mso-padding-alt: 13px 22px; border-radius: 8px; text-decoration: none;
  font-family: "Figtree", system-ui, Arial, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1;
}

/* ---- media ------------------------------------------------------------ */
.email img { border: 0; outline: none; display: block; }
/* Outlook on Windows ignores border-radius: these corners go square there.
   To ship it bulletproof, export each photo with the corners pre-rounded and
   the band colour matted in behind them (every photo sits on a known flat
   fill, so that composites exactly). */
.email .rounded    { border-radius: 16px; }
.email .rounded-lg { border-radius: 20px; }

/* ---- service cards ---------------------------------------------------- */
.email .card { background-color: #FFFFFF; border-radius: 16px; }
.email .card-body { padding: 14px 14px 18px; text-align: center; }

/* ---- marquee strip ---------------------------------------------------- */
.email .marquee {
  background-color: #FFFFFF; padding: 14px 12px; text-align: center;
  font-family: "Figtree", system-ui, Arial, sans-serif;
  font-size: 13px; font-weight: 700; color: #323132; line-height: 1.4;
}
.email .marquee .dot { color: #F09124; }

/* ---- footer ----------------------------------------------------------- */
.email .footer p { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.7; margin: 0; }
.email .footer a { color: rgba(255,255,255,.72); text-decoration: underline; font-size: 12px; }