/* =====================================================================
   RODE LIFE — global design tokens ONLY.
   Every page links this for the shared :root variables. All other CSS
   (base, layout, buttons, the .rl- header/footer components, and each
   page's own styles) is inlined inside the page's own <style> block.
   ===================================================================== */

:root {
  --c-ink:        #191E24;
  --c-body:       #5b6470;
  --c-blue:       #1E90FF;
  --c-blue-700:   #1253A4;
  --c-navy:       #002855;
  --c-ink-blue:   #041223;
  --c-soft:       #EDF1FC;
  --c-soft-2:     #D0DAF7;
  --c-line:       rgba(4, 18, 35, .08);
  --c-white:      #ffffff;
  --c-radius:     14px;
  --c-radius-sm:  10px;
  --c-pill:       999px;
  --c-shadow-sm:  0 4px 14px rgba(4, 18, 35, .06);
  --c-shadow:     0 10px 30px rgba(4, 18, 35, .08);
  --c-shadow-lg:  0 20px 50px rgba(4, 18, 35, .14);
}

/* Global mobile safety net (deliberate exception to the tokens-only rule above): media can never
   force horizontal scroll, so an oversized image/embed can't break a page's layout on phones. */
img, video, iframe { max-width: 100%; }