/* ============================================================================
   DAS BLOG EMAIL SIGN-UP — the card, in its four placements (js/blog-signup.js)
   ----------------------------------------------------------------------------
   Port of ODNDR components/blog/subscribe.module.css (odndr-web 0a4b7eb),
   2026-10-16, in DAS's skin. THE ONE PLACE the card's look lives: Jayden's
   design lab for this card may replace it (2026-10-16), and only this file and
   js/blog-signup.js change when it does.

   COLOUR: explicit hex only (the DAS vars are inverted). Contrast (WCAG 2.2
   AA): white on #1A2E6E 12.6:1, on #0C1840 16.8:1; error #B42318 on #fff
   6.57:1, on #E9EEF8 5.6:1; eyebrow #1A2E6E on #E9EEF8 10.9:1; consent #3B4658
   on #E9EEF8 8.2:1, #5E6A7D on #fff 5.37:1; field border #7D8796 on #fff 3.6:1.
   ========================================================================== */
.bsu {
  --bsu-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  position: relative; border-radius: 12px; scroll-margin-top: 96px; font-family: var(--bsu-ui); color: #0E1B2E;
}
.bsu[hidden] { display: none !important; }
.bsu *, .bsu *::before, .bsu *::after { box-sizing: border-box; }
.bsu-head, .bsu-body { min-width: 0; }
.bsu .bsu-eyebrow { margin: 0; font-family: var(--bsu-ui); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1A2E6E; }
.bsu .bsu-title { margin: 10px 0 0; font-family: var(--bsu-ui); font-weight: 700; letter-spacing: -.02em; color: #0E1B2E; line-height: 1.22; scroll-margin-top: 0; }
.bsu .bsu-lede { margin: 10px 0 0; font-family: var(--bsu-ui); font-size: 15px; line-height: 1.55; color: #3B4658; }
.bsu-locked { display: flex; flex-direction: column; justify-content: center; }

.bsu-form { display: grid; gap: 10px; margin: 0; }
.bsu-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bsu .bsu-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bsu-email, .bsu-role { height: 48px; margin: 0; border: 1px solid #7D8796; border-radius: 8px; background: #FFFFFF; font-family: var(--bsu-ui); font-size: 16px; color: #0E1B2E; }
.bsu-email { flex: 1 1 200px; min-width: 0; padding: 0 16px; }
.bsu-role { flex: 0 1 190px; padding: 0 40px 0 14px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E6A7D' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.bsu-role[hidden] { display: none; }
.bsu-role.is-empty { color: #5E6A7D; }
.bsu-rise { animation: bsu-rise .18s ease-out; }
.bsu-email::placeholder { color: #6B7688; opacity: 1; }
.bsu-email:focus-visible, .bsu-role:focus-visible { outline: none; border-color: #1A2E6E; box-shadow: 0 0 0 3px rgba(26, 46, 110, .16); }
.bsu-email[aria-invalid='true'] { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.bsu-btn { height: 48px; padding: 0 24px; border: 1px solid #1A2E6E; border-radius: 999px; background: #1A2E6E; color: #FFFFFF; font-family: var(--bsu-ui); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.bsu-btn:hover:not(:disabled) { background: #0C1840; border-color: #0C1840; }
.bsu-btn:focus-visible { outline: 2px solid #1A2E6E; outline-offset: 3px; }
.bsu-btn:disabled { cursor: progress; opacity: .85; }
.bsu .bsu-consent { margin: 0; font-family: var(--bsu-ui); font-size: 12.5px; line-height: 1.55; color: #5E6A7D; }
.bsu .bsu-consent a { color: #1A2E6E; text-decoration: underline; text-underline-offset: 2px; }
.bsu-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.bsu .bsu-err, .bsu .bsu-wait { margin: 0; font-family: var(--bsu-ui); font-size: 14px; line-height: 1.5; font-weight: 600; }
.bsu .bsu-err { color: #B42318; }
.bsu .bsu-wait { color: #7A4B0B; }
.bsu .bsu-ok { margin: 0; display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 10px; background: #E9F6EF; color: #14532D; font-family: var(--bsu-ui); font-size: 15px; line-height: 1.5; outline: none; }
.bsu .bsu-ok::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1F7A52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5 6.5-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center no-repeat; }
.bsu .bsu-ok:focus-visible { box-shadow: 0 0 0 2px #1A2E6E; }
@keyframes bsu-rise { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ── mid: inside the article column, a quiet card between sections ── */
.bsu-mid { margin: 44px 0; padding: 24px 26px 22px; background: #F4F6FA; border: 1px solid #DDE2EA; }
.bsu-mid .bsu-title { font-size: 21px; }
.bsu-mid .bsu-lede { font-size: 14.5px; }
.bsu-mid .bsu-body { margin-top: 16px; }

/* ── end: the primary sign-up, after the body, before the CTA ── */
.bsu-end { margin: 48px 0 0; padding: 34px 34px 30px; background: #FFFFFF; border: 1px solid #DDE2EA; box-shadow: 0 1px 2px rgba(14, 27, 46, .04), 0 8px 28px rgba(14, 27, 46, .06); }
.bsu-end .bsu-title { font-size: clamp(24px, 2.1vw, 30px); max-width: 26ch; }
.bsu-end .bsu-body { margin-top: 20px; }

/* ── rail: compact, desktop only, under "In this article" (the rail itself is sticky) ── */
.bsu-rail { display: none; margin-top: 20px; padding: 18px 18px 16px; background: #FFFFFF; border: 1px solid #DDE2EA; }
.bsu-rail .bsu-title { font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; }
.bsu-rail .bsu-body { margin-top: 12px; }
.bsu-rail .bsu-row { flex-direction: column; gap: 8px; }
.bsu-rail .bsu-email, .bsu-rail .bsu-btn { flex: none; width: 100%; height: 44px; }
.bsu-rail .bsu-consent { font-size: 11.5px; }
.bsu-rail .bsu-ok { font-size: 14px; padding: 12px 14px; }
@media (min-width: 961px) { .bsu-rail { display: block; } }

/* ── index: /ideas, a full-width band after the first row of cards ── */
.bsu-index { grid-column: 1 / -1; padding: 34px 40px; background: #E9EEF8; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: center; }
.bsu-index .bsu-title { font-size: clamp(22px, 1.8vw, 28px); max-width: 26ch; }
.bsu-index .bsu-consent, .bsu-mid .bsu-consent { color: #3B4658; }

/* the /ideas header's one-line link down to the band */
/* (.ins-head > p is das-insights.css's subtitle rule; this beats it on specificity, on purpose) */
.bsu-headlink, .ins-head > p.bsu-headlink { margin: 18px 0 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.5; font-weight: 700; }
.bsu-headlink[hidden], .ins-head > p.bsu-headlink[hidden] { display: none; }
.bsu-headlink a { color: #1A2E6E; text-decoration: none; }
.bsu-headlink a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bsu-headlink a:focus-visible { outline: 2px solid #1A2E6E; outline-offset: 3px; border-radius: 4px; }
/* At two columns the band follows a full row: the 4th card fills the gap beside the 3rd. */
@media (min-width: 681px) and (max-width: 1200px) { .bsu-densegrid { grid-auto-flow: row dense; } }

@media (max-width: 900px) {
  .bsu-index { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 26px 22px; }
  .bsu-end { padding: 26px 22px 24px; }
}
/* das-article.css forces every body H2 to 26px on phones with !important; the card titles keep their own size. */
@media (max-width: 768px) {
  .dav2-body .bsu-mid .bsu-title { font-size: 20px !important; line-height: 1.25; }
  .dav2-body .bsu-end .bsu-title { font-size: 23px !important; line-height: 1.22; }
}
@media (max-width: 560px) {
  .bsu-row { flex-direction: column; }
  .bsu-email, .bsu-role, .bsu-btn { flex: none; width: 100%; }
  .bsu-mid { padding: 22px 20px 20px; margin: 36px 0; }
}
@media (prefers-reduced-motion: reduce) { .bsu-btn { transition: none; } .bsu-rise { animation: none; } }