/* ============================================================
   PRODIUS DESIGN TOKENS — v1.0 (final, from styleguide Variant C)
   One source of truth for website, app surfaces and video assets.

   Green discipline:
     green-700 DOES   (buttons, links — white text)
     green-500 ADORNS (icons, checkmarks, badges — never buttons)
     green-400 lives on DARK only (waveform, outlines, video)
   ============================================================ */
:root {
  /* brand accent */
  --green-800: #0F7B3C;
  --green-700: #128A43;
  --green-600: #169C47;
  --green-500: #1DB954;
  --green-400: #1ED760;
  --green-100: #DCF5E5;

  /* light surface (website) */
  --page:     #FAFAF8;
  --surface:  #FFFFFF;
  --border:   #E9E7E2;
  --ink:      #191414;
  --ink-soft: #4A4644;
  --ink-mute: #8A8581;

  /* dark surface (product, video, dark sections) */
  --dark-page:     #171414;   /* video canvas base                */
  --dark-section:  #1D1919;   /* dark page blocks, slightly lifted */
  --dark-elevated: #272222;
  --dark-border:   #383232;
  --dark-ink:      #FFFFFF;
  --dark-ink-soft: #B5B0AD;
  --dark-ink-mute: #7A7572;

  /* type */
  --font: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* shadows */
  --shadow-card:   0 1px 2px rgba(25,20,20,.05), 0 4px 16px rgba(25,20,20,.06);
  --shadow-pop:    0 8px 30px rgba(25,20,20,.12);
  --shadow-window: 0 24px 60px rgba(0,0,0,.5);
}

/* ============================================================
   Shared site footer (v4) — class-scoped so it never touches
   pages that style their own <footer> inline. Used by the
   converted pages: /connect/, /support/ and the legal pages.
   ============================================================ */
.site-footer { border-top: 1px solid var(--dark-border); padding: 42px 0; }
.site-footer .foot-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.site-footer .brand img { height: 28px; width: auto; display: block; }
.site-footer .foot-note { font-size: 12.5px; color: var(--dark-ink-mute); margin-top: 12px; max-width: 320px; }
.site-footer .foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer .foot-links a { font-size: 13.5px; color: var(--dark-ink-mute); }
.site-footer .foot-links a:hover { color: #fff; }
.site-footer .foot-legal { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--dark-border); font-size: 12px; color: var(--dark-ink-mute); }

.foot-lang {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--dark-ink-mute);
}

.foot-lang a {
  color: var(--dark-ink-soft);
  font-weight: 600;
}

.foot-lang a:hover {
  color: #fff;
}