:root {
    --socr-coral: #FF4562;
    --socr-night: #1B1B3C;
    --socr-white: #FFFFFF;

    --socr-night-900: #1B1B3C; /* design-language: only one dark */
    --socr-night-800: #1B1B3C;
    --socr-night-700: #282851;
    --socr-night-600: #3A3A67;
    --socr-night-500: #5A5A82;
    --socr-night-400: #8A8AA8;
    --socr-night-300: #B6B6CA;
    --socr-night-200: #D8D8E3;
    --socr-night-100: #ECECF2;
    --socr-night-50:  #F6F6FA;

    --socr-coral-700: #B92C44;
    --socr-coral-600: #E0384F;
    --socr-coral-500: #FF4562;
    --socr-coral-400: #FF6B80;
    --socr-coral-300: #FF94A3;
    --socr-coral-200: #FFC2CC;
    --socr-coral-100: #FFE2E7;
    --socr-coral-50:  #FFF3F5;

    --socr-fg-1: var(--socr-night-800);
    --socr-fg-2: var(--socr-night-600);
    --socr-fg-3: var(--socr-night-500);
    --socr-fg-4: var(--socr-night-400);
    --socr-fg-on-dark-1: var(--socr-white);
    --socr-fg-on-dark-2: rgba(255,255,255,0.72);
    --socr-fg-on-dark-3: rgba(255,255,255,0.48);
    --socr-fg-accent: var(--socr-coral-500);

    --socr-bg-1: var(--socr-white);
    --socr-bg-2: var(--socr-night-50);
    --socr-bg-3: var(--socr-night-100);
    --socr-bg-dark-1: var(--socr-night-800);
    --socr-bg-dark-2: var(--socr-night-900);
    --socr-bg-dark-3: var(--socr-night-700);

    --socr-border-1: var(--socr-night-200);
    --socr-border-2: var(--socr-night-100);
    --socr-border-accent: var(--socr-coral-500);

    /* design-language: Inter only, site-wide */
    --socr-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --socr-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --socr-text-xs: 12px;
    --socr-text-sm: 14px;
    --socr-text-base: 16px;
    --socr-text-md: 18px;
    --socr-text-lg: 20px;
    --socr-text-xl: 24px;
    --socr-text-2xl: 32px;
    --socr-text-3xl: 40px;
    --socr-text-4xl: 52px;

    --socr-leading-tight: 1.1;
    --socr-leading-snug: 1.25;
    --socr-leading-normal: 1.5;
    --socr-leading-relaxed: 1.65;

    --socr-tracking-tight: -0.02em;
    --socr-tracking-caps: 0.12em;

    --socr-radius-md: 8px;
    --socr-radius-lg: 12px;
    --socr-radius-pill: 999px;

    --socr-shadow-sm: 0 2px 6px rgba(27, 27, 60, 0.08);
    --socr-shadow-md: 0 6px 20px rgba(27, 27, 60, 0.10);
    --socr-glow-coral: 0 0 0 4px rgba(255, 69, 98, 0.18);

    --socr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --socr-duration-fast: 120ms;
    --socr-duration-normal: 220ms;

    --socr-container: 1200px;
  }

  .socr-h1, .socr-h2, .socr-h3, .socr-h4 {
    font-family: var(--socr-font-display);
    color: var(--socr-fg-1);
    margin: 0;
    text-wrap: balance;
  }
  .socr-h1 { font-size: var(--socr-text-4xl); font-weight: 700; line-height: var(--socr-leading-tight); letter-spacing: var(--socr-tracking-tight); }
  .socr-h2 { font-size: var(--socr-text-3xl); font-weight: 700; line-height: var(--socr-leading-snug); letter-spacing: var(--socr-tracking-tight); }
  .socr-h3 { font-size: var(--socr-text-2xl); font-weight: 600; line-height: var(--socr-leading-snug); }
  .socr-h4 { font-size: var(--socr-text-xl); font-weight: 600; line-height: var(--socr-leading-snug); }
  .socr-lead { font-family: var(--socr-font-body); font-size: var(--socr-text-lg); font-weight: 400; line-height: var(--socr-leading-relaxed); color: var(--socr-fg-2); text-wrap: pretty; }
  .socr-body { font-family: var(--socr-font-body); font-size: var(--socr-text-base); font-weight: 400; line-height: var(--socr-leading-relaxed); color: var(--socr-fg-1); text-wrap: pretty; }
  .socr-body-sm { font-family: var(--socr-font-body); font-size: var(--socr-text-sm); font-weight: 400; line-height: var(--socr-leading-normal); color: var(--socr-fg-2); }
  .socr-caption { font-family: var(--socr-font-body); font-size: var(--socr-text-xs); font-weight: 500; color: var(--socr-fg-3); }

  /* design-language: eyebrows are retired site-wide */
  .socr-eyebrow { display: none !important; }

  .wbn-scope a { color: var(--socr-coral-600); text-decoration: none; }
  .wbn-scope a:hover { color: var(--socr-coral-700); text-decoration: underline; text-underline-offset: 3px; }
  .wbn-scope input::placeholder { color: var(--socr-night-400); }
  .wbn-scope .breadcrumb { margin: 0 0 4px; }

  .wbn-input:focus {
    border-color: var(--socr-coral-500) !important;
    box-shadow: var(--socr-glow-coral) !important;
  }

  /* buttons — pill radius per site button rule */
  .wbn-btn {
    font-family: var(--socr-font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    padding: 12px 20px;
    border-radius: var(--socr-radius-pill);
    border: 1px solid var(--socr-night-200);
    background: var(--socr-white);
    color: var(--socr-night-800);
    cursor: pointer;
    transition: background var(--socr-duration-fast) var(--socr-ease-out);
    outline-offset: 2px;
  }
  .wbn-btn:hover { background: var(--socr-night-50); }
  .wbn-btn--primary {
    font-size: 15px;
    padding: 15px 26px;
    border-color: transparent;
    background: var(--socr-coral-500);
    color: var(--socr-white);
    width: 100%;
  }
  .wbn-btn--primary:hover { background: var(--socr-coral-600); }

  /* webinar card — hover lift like the canvas runtime */
  .wbn-card {
    display: block;
    background: var(--socr-white);
    border: 1px solid var(--socr-night-100);
    border-radius: var(--socr-radius-lg);
    box-shadow: var(--socr-shadow-sm);
    color: var(--socr-night-800);
    font-family: var(--socr-font-body);
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow var(--socr-duration-normal) var(--socr-ease-out);
  }
  .wbn-scope a.wbn-card:hover { text-decoration: none; color: var(--socr-night-800); box-shadow: var(--socr-shadow-md); }

  /* responsive safety net (the canvas was desktop-first) */
  @media (max-width: 960px) {
    .wbn-layout { grid-template-columns: 1fr !important; }
    .wbn-sticky { position: static !important; }
  }
  @media (max-width: 720px) {
    .wbn-cards3 { grid-template-columns: 1fr !important; }
  }