/* site-chrome.css: the class-scoped half of the one look (CL-1535): the gold
   button (.sl-btn), a page's own disclosure (.sl-note) and the shared footer
   (.sf, from renderSiteFooter in site-nav.js). Everything here is scoped to its
   own classes, so the React app can load it without touching the advisor app.
   The page-wide half (fonts, page-title size) is site-look.css, static pages only. */

:root {
  --sl-navy: #0D1C33;
  --sl-navy2: #1E3A5F;
  --sl-gold: #C9A227;
  --sl-gold2: #D4AF37;
  --sl-cream: #FAF8F5;
  --sl-sans: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sl-serif: 'Playfair Display', Georgia, serif;
}

/* ---- 2. the gold button ---- */
.sl-btn {
  background: linear-gradient(135deg, var(--sl-gold), var(--sl-gold2)) !important;
  /* Navy on gold, not white: white on this gold is 2.3:1, below the 3:1 floor
     even for large text, and 47 of the 78 gold buttons measured were already navy. */
  color: var(--sl-navy) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--sl-sans) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(201, 162, 39, .28) !important;
}
.sl-btn:hover { filter: brightness(1.06); }
.sl-btn:focus-visible { outline: 2px solid var(--sl-navy) !important; outline-offset: 3px; }

/* ---- 3. page notes (a page's own disclosure) and the shared footer ---- */
.sl-note { background: #0a1628; color: rgba(255, 255, 255, .62); font-family: var(--sl-sans); font-size: 13px; line-height: 1.6; padding: 28px 24px 0; }
.sl-note > * { max-width: 1120px; margin: 0 auto 10px; }
.sl-note p { margin: 0 auto 10px; }
.sl-note a { color: var(--sl-gold); }

/* margin/padding/border reset: some pages style the bare `footer` element. */
.sf { margin: 0 !important; padding: 0 !important; border: 0 !important; background: #0a1628; color: rgba(255, 255, 255, .72); font-family: var(--sl-sans); font-size: 14.5px; line-height: 1.55; text-align: left; }
.sf * { box-sizing: border-box; }
.sf a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.sf a:hover { color: var(--sl-gold); }
.sf-in { max-width: 1120px; margin: 0 auto; padding: 44px 24px 26px; display: grid; gap: 28px; }
.sf-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px; }
.sf-brand { display: grid; gap: 6px; align-content: start; }
.sf-word { font-family: var(--sl-serif); font-size: 20px; font-weight: 700; color: #fff !important; }
.sf-word b { color: var(--sl-gold); font-weight: 700; }
.sf-tag { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sl-gold); }
.sf-brand p { margin: 6px 0 0; }
.sf-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sf-plan { background: linear-gradient(135deg, var(--sl-gold), var(--sl-gold2)); color: var(--sl-navy) !important; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 14px; }
.sf-call { border: 1px solid rgba(201, 162, 39, .6); color: var(--sl-gold) !important; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 14px; }
.sf-social { display: flex; gap: 14px; margin-top: 6px; font-size: 13.5px; }
.sf-col { display: grid; gap: 2px; align-content: start; min-width: 0; }
.sf-col h4 { margin: 0 0 8px; font-family: var(--sl-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-gold); }
.sf-col a { padding: 3px 0; }
.sf-fine { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.sf-fine p { margin: 0 0 6px; max-width: 900px; }
.sf-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; font-size: 13px; }
.sf-legal span:last-child { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 900px) { .sf-top { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 340px) { .sf-top { grid-template-columns: 1fr; } }
/* Printed pages keep the footer: the recap leave-behind's disclosure printed before this change. */

/* ---- 4. a page's last step: the Plan, then a sample and a call (renderSiteEnding) ---- */
.se { display: grid; gap: 12px; justify-items: center; text-align: center; margin: 18px auto 0; font-family: var(--sl-sans); }
.se-plan { display: inline-flex !important; align-items: center; gap: 8px; padding: 15px 30px !important; font-size: 16px !important; }
.se-alt { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.se-alt a { color: var(--sl-gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.se-light .se-alt { color: #4a5568; }
.se-light .se-alt a { color: var(--sl-navy2); text-decoration-color: var(--sl-gold); }