/* ============================================================================
   design-tokens.css — Reality Cheque design system
   Source of truth: realitycheque.co (Elementor Kit #6 + page/header/footer CSS)
   Extracted: 2026-09-01

   Layers in this file:
     1. Primitives ....... raw palette, type scale, spacing ramp
     2. Semantic ......... roles (surface / ink / brand / state)
     3. Component tokens . button, link, nav, card, list, form, badge, table
     4. Base elements .... html, headings, text, a, ul/ol/li, hr, table...
     5. Components ....... .rc-btn, .rc-card, .rc-list, .rc-field, .rc-nav...
     6. Utilities
     7. Responsive

   Fonts are self-hosted in ../fonts/ and declared in fonts.css (imported below).
   ============================================================================ */

@import url("fonts.css");

/* ============================================================================
   1. PRIMITIVES
   ========================================================================= */
:root {

  /* --- Brand golds (the signature Reality Cheque colour) ----------------- */
  --rc-gold-100: #FDF6E3;
  --rc-gold-200: #F2C6140D;   /* 5% gold wash — tinted section background */
  --rc-gold-300: #ECB422;
  --rc-gold-400: #F2C614;     /* bright gold — hero CTA, outline buttons     */
  --rc-gold-500: #EAC055;     /* PRIMARY brand gold — main CTA fill          */
  --rc-gold-600: #CA950D;     /* deep gold — pressed / emphasis              */
  --rc-gold-700: #B68C2E;     /* hover gold — every primary button hover     */
  --rc-gold-800: #987828;     /* dark gold — glows, overlays                 */
  --rc-gold-900: #7A6E3E;     /* olive gold — gradient tail                  */

  /* --- Lime accents ------------------------------------------------------ */
  --rc-lime-300: #C6E957;
  --rc-lime-400: #C1E355;
  --rc-lime-700: #7D9827;

  /* --- Neutrals / ink ---------------------------------------------------- */
  --rc-black:    #000000;
  --rc-ink-900:  #111110;     /* ACCENT — near-black: dark sections, on-gold text */
  --rc-ink-800:  #1C1C1B;
  --rc-ink-700:  #202020;
  --rc-gray-600: #686868;
  --rc-gray-500: #979797;
  --rc-gray-400: #A6A6A6;
  --rc-gray-300: #B0B6B6;
  --rc-gray-200: #D9D9D0;     /* TEXT — muted body copy on dark surfaces     */
  --rc-gray-100: #FAFAFA;     /* subtle section background                   */
  --rc-cream:    #FFFEF4;     /* SECONDARY — warm off-white                  */
  --rc-white:    #FFFFFF;

  /* --- Alpha primitives (exactly as used on the live site) --------------- */
  --rc-ink-a69:    #111110B0;   /* 69% ink — disabled / muted button label   */
  --rc-black-a42:  #0000006B;   /* 42% black — inactive icon-list icon       */
  --rc-black-a80:  rgba(0, 0, 0, .8);
  --rc-gray-a43:   #9797976E;   /* 43% gray — "ghost" pill button fill       */
  --rc-gold-a81:   #987828CF;   /* 81% dark gold — overlay panel             */
  --rc-gray-a70:   rgba(176, 182, 182, .7);

  /* --- Gradients / glows ------------------------------------------------- */
  --rc-gradient-gold: linear-gradient(180deg, #ECB422 0%, #7A6E3E 100%);
  --rc-gradient-gold-h: linear-gradient(90deg, #ECB422 0%, #EAC055 50%, #7A6E3E 100%);
  --rc-glow-gold: 50px -100px 120px 80px rgba(152, 120, 40, .5);
  --rc-glow-white-l: -70px 0 100px 70px #FFFFFF;
  --rc-glow-white-r: 70px 0 100px 60px #FFFFFF;

  /* --- Type families ----------------------------------------------------- */
  --rc-font-display: "Bricolage Grotesque", "Poppins", "Segoe UI", system-ui, sans-serif;
  --rc-font-body:    "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --rc-font-label:   "Anybody", "Bricolage Grotesque", system-ui, sans-serif;
  --rc-font-alt:     "Poppins", "Manrope", system-ui, sans-serif;
  --rc-font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* --- Type scale (px values taken verbatim from the live site) ---------- */
  --rc-text-3xs: 0.625rem;   /* 10px */
  --rc-text-2xs: 0.75rem;    /* 12px — micro pill buttons, captions */
  --rc-text-xs:  0.875rem;   /* 14px — small buttons, meta          */
  --rc-text-sm:  1rem;       /* 16px — eyebrows, list items         */
  --rc-text-md:  1.125rem;   /* 18px                                */
  --rc-text-base:1.25rem;    /* 20px — UI / button / nav default    */
  --rc-text-lg:  1.3125rem;  /* 21px — GLOBAL BODY COPY             */
  --rc-text-xl:  1.5rem;     /* 24px — h5 / lead                    */
  --rc-text-2xl: 1.75rem;    /* 28px — h4                           */
  --rc-text-3xl: 2rem;       /* 32px                                */
  --rc-text-4xl: 2.25rem;    /* 36px — h3                           */
  --rc-text-5xl: 2.625rem;   /* 42px                                */
  --rc-text-6xl: 2.875rem;   /* 46px — h2 (uppercase display)       */
  --rc-text-7xl: 3.1875rem;  /* 51px                                */
  --rc-text-8xl: 4rem;       /* 64px — h1 hero                      */

  /* --- Weights: the brand runs BOLD. 600 is the floor for anything set in
         the display face; body copy sits at 500, never lighter. ---------- */
  --rc-weight-regular:  400;
  --rc-weight-medium:   500;   /* body copy                        */
  --rc-weight-semibold: 600;   /* display default, buttons, nav    */
  --rc-weight-bold:     700;   /* headings, CTA emphasis           */
  --rc-weight-extra:    800;   /* hero display                     */

  /* --- Line heights ------------------------------------------------------ */
  --rc-leading-flat:    1;
  --rc-leading-tight:   1.2;    /* display headings                */
  --rc-leading-snug:    1.35;   /* sub-headings                    */
  --rc-leading-normal:  1.5;    /* UI                              */
  --rc-leading-relaxed: 1.6;    /* body copy, list items           */
  --rc-leading-loose:   1.75;

  /* --- Letter spacing ---------------------------------------------------- */
  --rc-tracking-tight:  -0.02em;  /* large display                   */
  --rc-tracking-normal: 0;
  --rc-tracking-wide:   0.04em;   /* uppercase headings              */
  --rc-tracking-label:  0.12em;   /* eyebrow / kicker                */
  --rc-tracking-mega:   0.3em;    /* marquee lockups (site: 6.3–9.5px) */

  /* --- Spacing ramp (4px base) ------------------------------------------- */
  --rc-space-0:  0;
  --rc-space-1:  0.25rem;   /*  4px */
  --rc-space-2:  0.5rem;    /*  8px */
  --rc-space-3:  0.625rem;  /* 10px */
  --rc-space-4:  0.9375rem; /* 15px */
  --rc-space-5:  1.25rem;   /* 20px — Elementor widget gap */
  --rc-space-6:  1.5rem;    /* 24px */
  --rc-space-7:  1.875rem;  /* 30px — button x-padding, container gap */
  --rc-space-8:  2.5rem;    /* 40px */
  --rc-space-9:  3.125rem;  /* 50px */
  --rc-space-10: 3.75rem;   /* 60px */
  --rc-space-11: 5rem;      /* 80px — wide CTA padding */
  --rc-space-12: 6.25rem;   /* 100px — section rhythm  */

  /* --- Layout ------------------------------------------------------------ */
  --rc-container: 1140px;         /* Elementor container max-width */
  --rc-container-wide: 1366px;
  --rc-gutter: var(--rc-space-5);
  --rc-widget-gap: 20px;
  --rc-section-y: var(--rc-space-12);

  /* --- Breakpoints (informational; the media queries below use them) ----- */
  --rc-bp-mobile: 767px;
  --rc-bp-tablet: 1024px;
  --rc-bp-laptop: 1366px;
  --rc-bp-wide:   1800px;

  /* --- Radii ------------------------------------------------------------- */
  --rc-radius-none: 0;
  --rc-radius-xs:   4px;
  --rc-radius-sm:   6px;
  --rc-radius-md:   8px;    /* standard button / input */
  --rc-radius-lg:   10px;   /* dropdown panel          */
  --rc-radius-xl:   15px;
  --rc-radius-2xl:  17px;
  --rc-radius-3xl:  20px;   /* cards                   */
  --rc-radius-4xl:  30px;   /* pill-outline buttons    */
  --rc-radius-5xl:  32px;
  --rc-radius-pill: 50px;   /* CTA pills               */
  --rc-radius-full: 9999px;
  --rc-radius-card-top: 20px 20px 0 0;
  --rc-radius-card-bottom: 0 0 20px 20px;

  /* --- Borders ----------------------------------------------------------- */
  --rc-border-width: 1px;
  --rc-border-width-thick: 2px;
  --rc-border-color: var(--rc-gray-200);
  --rc-border-color-strong: var(--rc-ink-900);
  --rc-border-color-brand: var(--rc-gold-500);
  --rc-border: var(--rc-border-width) solid var(--rc-border-color);

  /* --- Elevation --------------------------------------------------------- */
  --rc-shadow-none: none;
  --rc-shadow-sm: 0 0 10px 0 rgba(76, 64, 64, .5);       /* site card shadow */
  --rc-shadow-md: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  --rc-shadow-lg: 0 18px 45px -12px rgba(17, 17, 16, .35);
  --rc-shadow-gold: 0 12px 30px -10px rgba(234, 192, 85, .55);
  --rc-focus-ring: 0 0 0 3px rgba(234, 192, 85, .45);

  /* --- Motion ------------------------------------------------------------ */
  --rc-duration-fast: .15s;
  --rc-duration: .3s;                 /* site standard */
  --rc-duration-slow: .475s;
  --rc-ease: cubic-bezier(.4, 0, .2, 1);
  --rc-transition: all var(--rc-duration) var(--rc-ease);
  --rc-transition-color: color var(--rc-duration) var(--rc-ease),
                         background-color var(--rc-duration) var(--rc-ease),
                         border-color var(--rc-duration) var(--rc-ease),
                         fill var(--rc-duration) var(--rc-ease);

  /* --- Z-index ----------------------------------------------------------- */
  --rc-z-base: 0;
  --rc-z-raised: 1;
  --rc-z-sticky: 100;
  --rc-z-header: 200;
  --rc-z-dropdown: 300;
  --rc-z-overlay: 800;
  --rc-z-modal: 900;
  --rc-z-toast: 1000;


/* ============================================================================
   2. SEMANTIC ROLES  (light surface = default)
   ========================================================================= */

  --rc-color-primary:        var(--rc-gold-500);
  --rc-color-primary-hover:  var(--rc-gold-700);
  --rc-color-primary-active: var(--rc-gold-600);
  --rc-color-secondary:      var(--rc-cream);
  --rc-color-accent:         var(--rc-ink-900);
  --rc-color-highlight:      var(--rc-gold-400);
  --rc-color-lime:           var(--rc-lime-300);

  --rc-surface:          var(--rc-white);
  --rc-surface-subtle:   var(--rc-gray-100);
  --rc-surface-warm:     var(--rc-cream);
  --rc-surface-tinted:   var(--rc-gold-200);
  --rc-surface-inverse:  var(--rc-ink-900);
  --rc-surface-raised:   var(--rc-white);
  --rc-surface-overlay:  var(--rc-black-a80);

  --rc-ink:          var(--rc-ink-900);   /* primary text            */
  --rc-ink-muted:    var(--rc-gray-600);  /* secondary text          */
  --rc-ink-subtle:   var(--rc-gray-400);  /* tertiary / placeholder  */
  --rc-ink-disabled: var(--rc-ink-a69);
  --rc-ink-inverse:  var(--rc-cream);     /* text on dark surfaces   */
  --rc-ink-on-brand: var(--rc-ink-900);   /* text on gold            */
  --rc-ink-brand:    var(--rc-gold-600);  /* gold text on light bg   */

  --rc-link:           var(--rc-gold-600);
  --rc-link-hover:     var(--rc-gold-700);
  --rc-link-visited:   var(--rc-gold-800);
  --rc-link-underline: currentColor;

  --rc-state-success: var(--rc-lime-700);
  --rc-state-warning: var(--rc-gold-400);
  --rc-state-error:   #FF0000;
  --rc-state-info:    var(--rc-ink-700);


/* ============================================================================
   3. COMPONENT TOKENS
   ========================================================================= */

  /* --- Buttons: shared --------------------------------------------------- */
  --rc-btn-font:         var(--rc-font-display);
  --rc-btn-size:         var(--rc-text-base);      /* 20px */
  --rc-btn-weight:       var(--rc-weight-semibold);
  --rc-btn-leading:      var(--rc-leading-normal);
  --rc-btn-tracking:     var(--rc-tracking-normal);
  --rc-btn-radius:       var(--rc-radius-md);      /* 8px  */
  --rc-btn-radius-pill:  var(--rc-radius-pill);    /* 50px */
  --rc-btn-padding-y:    var(--rc-space-5);        /* 20px */
  --rc-btn-padding-x:    var(--rc-space-7);        /* 30px */
  --rc-btn-border-width: var(--rc-border-width);
  --rc-btn-transition:   var(--rc-transition-color);

  /* Primary / main CTA — solid gold, ink label */
  --rc-btn-primary-bg:           var(--rc-gold-500);
  --rc-btn-primary-fg:           var(--rc-ink-900);
  --rc-btn-primary-border:       var(--rc-gold-500);
  --rc-btn-primary-bg-hover:     var(--rc-gold-700);
  --rc-btn-primary-fg-hover:     var(--rc-ink-900);
  --rc-btn-primary-border-hover: var(--rc-gold-700);
  --rc-btn-primary-bg-active:    var(--rc-gold-600);
  --rc-btn-primary-shadow-hover: var(--rc-shadow-gold);

  /* Secondary — outlined, fills gold on hover */
  --rc-btn-secondary-bg:           transparent;
  --rc-btn-secondary-fg:           var(--rc-cream);
  --rc-btn-secondary-border:       var(--rc-cream);
  --rc-btn-secondary-bg-hover:     var(--rc-gold-500);
  --rc-btn-secondary-fg-hover:     var(--rc-ink-900);
  --rc-btn-secondary-border-hover: var(--rc-gold-500);

  /* Tertiary — bright-gold 2px pill outline */
  --rc-btn-tertiary-bg:           transparent;
  --rc-btn-tertiary-fg:           var(--rc-gold-400);
  --rc-btn-tertiary-border:       var(--rc-gold-400);
  --rc-btn-tertiary-border-width: var(--rc-border-width-thick);
  --rc-btn-tertiary-radius:       var(--rc-radius-4xl);
  --rc-btn-tertiary-bg-hover:     var(--rc-gold-400);
  --rc-btn-tertiary-fg-hover:     var(--rc-ink-900);

  /* Ghost / muted pill (the site's translucent grey CTA) */
  --rc-btn-ghost-bg:       var(--rc-gray-a43);
  --rc-btn-ghost-fg:       var(--rc-ink-a69);
  --rc-btn-ghost-bg-hover: var(--rc-gold-500);
  --rc-btn-ghost-fg-hover: var(--rc-ink-900);

  /* Link-style button */
  --rc-btn-link-fg:       var(--rc-link);
  --rc-btn-link-fg-hover: var(--rc-link-hover);

  /* Size variants */
  --rc-btn-sm-size:    var(--rc-text-2xs);   /* 12px */
  --rc-btn-sm-weight:  var(--rc-weight-medium);
  --rc-btn-sm-padding: var(--rc-space-3) var(--rc-space-4);   /* 10px 15px */
  --rc-btn-md-size:    var(--rc-text-md);    /* 18px */
  --rc-btn-md-padding: var(--rc-space-4) 1rem;
  --rc-btn-lg-size:    var(--rc-text-base);  /* 20px */
  --rc-btn-lg-padding: var(--rc-space-5) var(--rc-space-7);
  --rc-btn-xl-padding: var(--rc-space-5) var(--rc-space-11);  /* 20px 80px */
  --rc-btn-disabled-opacity: .5;

  /* --- Navigation -------------------------------------------------------- */
  --rc-nav-font:            var(--rc-font-display);
  --rc-nav-size:            var(--rc-text-base);   /* 20px desktop */
  --rc-nav-weight:          var(--rc-weight-bold);
  --rc-nav-leading:         34px;
  --rc-nav-fg:              var(--rc-cream);
  --rc-nav-fg-hover:        var(--rc-gold-500);
  --rc-nav-fg-active:       var(--rc-cream);
  --rc-nav-item-px:         25px;
  --rc-nav-indicator:       var(--rc-gold-500);
  --rc-nav-indicator-h:     2px;
  --rc-nav-dropdown-bg:     var(--rc-gold-500);
  --rc-nav-dropdown-fg:     var(--rc-ink-900);
  --rc-nav-dropdown-radius: 0 0 var(--rc-radius-lg) var(--rc-radius-lg);
  --rc-nav-dropdown-item-py: 12px;
  --rc-nav-toggle-size:     40px;
  --rc-header-bg:           var(--rc-ink-900);
  --rc-header-height:       88px;

  /* --- Cards ------------------------------------------------------------- */
  --rc-card-bg:           var(--rc-white);
  --rc-card-bg-alt:       var(--rc-gray-100);
  --rc-card-fg:           var(--rc-ink-900);
  --rc-card-border:       var(--rc-border);
  --rc-card-radius:       var(--rc-radius-3xl);      /* 20px */
  --rc-card-padding:      var(--rc-space-5);
  --rc-card-shadow:       var(--rc-shadow-sm);
  --rc-card-shadow-hover: var(--rc-shadow-md);
  --rc-card-gap:          var(--rc-space-7);

  /* --- Lists ------------------------------------------------------------- */
  --rc-list-font:       var(--rc-font-body);
  --rc-list-size:       var(--rc-text-lg);        /* 21px */
  --rc-list-weight:     var(--rc-weight-medium);
  --rc-list-leading:    var(--rc-leading-relaxed);
  --rc-list-fg:         var(--rc-ink);
  --rc-list-gap:        var(--rc-space-3);
  --rc-list-indent:     1.35em;
  --rc-list-marker:     var(--rc-gold-500);       /* ul bullets  */
  --rc-list-marker-ol:  var(--rc-gold-600);       /* ol numerals */
  --rc-list-icon-size:  24px;
  --rc-list-icon-gap:   .6em;
  --rc-list-icon-color: var(--rc-gold-500);
  --rc-list-icon-muted: var(--rc-black-a42);
  --rc-list-divider:    var(--rc-gray-200);
  --rc-list-item-hover: var(--rc-gold-600);

  /* --- Forms ------------------------------------------------------------- */
  --rc-field-font:         var(--rc-font-body);
  --rc-field-size:         var(--rc-text-sm);
  --rc-field-weight:       var(--rc-weight-medium);
  --rc-field-bg:           var(--rc-white);
  --rc-field-fg:           var(--rc-ink);
  --rc-field-placeholder:  var(--rc-ink-subtle);
  --rc-field-border:       var(--rc-gray-300);
  --rc-field-border-hover: var(--rc-gray-600);
  --rc-field-border-focus: var(--rc-gold-500);
  --rc-field-radius:       var(--rc-radius-md);
  --rc-field-padding:      14px 16px;
  --rc-field-height:       52px;
  --rc-field-shadow-focus: var(--rc-focus-ring);
  --rc-field-error:        var(--rc-state-error);
  --rc-label-font:         var(--rc-font-display);
  --rc-label-size:         var(--rc-text-xs);
  --rc-label-weight:       var(--rc-weight-semibold);
  --rc-label-fg:           var(--rc-ink);

  /* --- Badge / eyebrow / pill -------------------------------------------- */
  --rc-badge-font:     var(--rc-font-label);
  --rc-badge-size:     var(--rc-text-2xs);
  --rc-badge-weight:   var(--rc-weight-semibold);
  --rc-badge-tracking: var(--rc-tracking-label);
  --rc-badge-bg:       var(--rc-gold-500);
  --rc-badge-fg:       var(--rc-ink-900);
  --rc-badge-radius:   var(--rc-radius-pill);
  --rc-badge-padding:  6px 14px;
  --rc-eyebrow-font:   var(--rc-font-label);
  --rc-eyebrow-size:   var(--rc-text-sm);          /* 16px / 600 / 20px lh */
  --rc-eyebrow-weight: var(--rc-weight-semibold);
  --rc-eyebrow-fg:     var(--rc-ink-900);

  /* --- Divider / rule ---------------------------------------------------- */
  --rc-divider-color: var(--rc-gray-200);
  --rc-divider-width: 1px;
  --rc-divider-brand: var(--rc-gold-500);
  --rc-divider-gap:   var(--rc-space-6);

  /* --- Table ------------------------------------------------------------- */
  --rc-table-head-bg:   var(--rc-ink-900);
  --rc-table-head-fg:   var(--rc-cream);
  --rc-table-row-bg:    var(--rc-white);
  --rc-table-row-alt:   var(--rc-gray-100);
  --rc-table-border:    var(--rc-gray-200);
  --rc-table-cell-py:   14px;
  --rc-table-cell-px:   18px;
  --rc-table-row-hover: var(--rc-gold-200);
}

/* ---------------------------------------------------------------------------
   Dark surface — the site's inverted sections (#111110).
   Put .rc-dark (or data-theme="dark") on any wrapper and the roles re-map.
   ------------------------------------------------------------------------ */
.rc-dark,
[data-theme="dark"] {
  --rc-surface:         var(--rc-ink-900);
  --rc-surface-subtle:  var(--rc-ink-800);
  --rc-surface-warm:    var(--rc-ink-700);
  --rc-surface-raised:  var(--rc-ink-800);
  --rc-surface-inverse: var(--rc-cream);

  --rc-ink:         var(--rc-cream);
  --rc-ink-muted:   var(--rc-gray-200);
  --rc-ink-subtle:  var(--rc-gray-400);
  --rc-ink-inverse: var(--rc-ink-900);
  --rc-ink-brand:   var(--rc-gold-500);

  --rc-link:       var(--rc-gold-500);
  --rc-link-hover: var(--rc-gold-400);

  --rc-border-color: rgba(255, 254, 244, .18);

  /* Pure red reaches only 4.26:1 against this surface, just short of the 4.5:1 that
     body text needs. This is the same hue lightened until it clears, so error text
     on a dark panel is actually readable. */
  --rc-state-error: #E66767;

  --rc-card-bg:     var(--rc-ink-800);
  --rc-card-fg:     var(--rc-cream);
  --rc-card-shadow: none;

  --rc-btn-secondary-fg:     var(--rc-cream);
  --rc-btn-secondary-border: var(--rc-cream);

  --rc-field-bg:     var(--rc-ink-800);
  --rc-field-fg:     var(--rc-cream);
  --rc-field-border: rgba(255, 254, 244, .28);

  --rc-list-fg:      var(--rc-gray-200);
  --rc-list-marker:  var(--rc-gold-500);
  --rc-table-row-bg:  var(--rc-ink-800);
  --rc-table-row-alt: var(--rc-ink-700);
  --rc-table-border:  rgba(255, 254, 244, .14);

  background-color: var(--rc-surface);
  color: var(--rc-ink);
}


/* ============================================================================
   4. BASE ELEMENTS
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--rc-surface);
  color: var(--rc-ink);
  font-family: var(--rc-font-body);
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-weight-medium);
  line-height: var(--rc-leading-relaxed);
  letter-spacing: var(--rc-tracking-normal);
}

/* --- Headings: display face, bold and clean ----------------------------- */
h1, h2, h3, h4, h5, h6,
.rc-h1, .rc-h2, .rc-h3, .rc-h4, .rc-h5, .rc-h6 {
  margin: 0 0 var(--rc-space-4);
  font-family: var(--rc-font-display);
  font-weight: var(--rc-weight-bold);
  line-height: var(--rc-leading-tight);
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-ink);
  text-wrap: balance;
}

h1, .rc-h1 { font-size: var(--rc-text-8xl); font-weight: var(--rc-weight-extra); }
h2, .rc-h2 { font-size: var(--rc-text-6xl); }
h3, .rc-h3 { font-size: var(--rc-text-4xl); }
h4, .rc-h4 { font-size: var(--rc-text-2xl); line-height: var(--rc-leading-snug); }
h5, .rc-h5 { font-size: var(--rc-text-xl);  line-height: var(--rc-leading-snug); }
h6, .rc-h6 { font-size: var(--rc-text-base); line-height: var(--rc-leading-normal);
             letter-spacing: var(--rc-tracking-normal); }

/* Display variants seen on the site */
.rc-display       { font-size: var(--rc-text-7xl); font-weight: var(--rc-weight-bold);
                    text-transform: uppercase; letter-spacing: var(--rc-tracking-wide);
                    line-height: 1.37; }
.rc-heading-upper { text-transform: uppercase; letter-spacing: var(--rc-tracking-wide); }
.rc-heading-alt   { font-family: var(--rc-font-alt); font-weight: var(--rc-weight-bold); }
.rc-heading-gold  { color: var(--rc-color-primary); }
.rc-heading-cream { color: var(--rc-cream); }

/* --- Body text ---------------------------------------------------------- */
p, .rc-text {
  margin: 0 0 var(--rc-space-5);
  font-family: var(--rc-font-body);
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-weight-medium);
  line-height: var(--rc-leading-relaxed);
  color: var(--rc-ink);
}
p:last-child { margin-bottom: 0; }

.rc-lead    { font-size: var(--rc-text-xl); font-weight: var(--rc-weight-semibold);
              line-height: var(--rc-leading-snug); }
.rc-text-sm { font-size: var(--rc-text-sm); }
.rc-text-xs { font-size: var(--rc-text-xs); }
.rc-muted   { color: var(--rc-ink-muted); }
.rc-subtle  { color: var(--rc-ink-subtle); }

small, .rc-small { font-size: var(--rc-text-xs); line-height: var(--rc-leading-normal); }
strong, b { font-weight: var(--rc-weight-bold); }
em, i     { font-style: italic; }
mark      { background: var(--rc-gold-200); color: inherit; padding: 0 .18em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Eyebrow / kicker — Anybody 16/600/20px on the live site */
.rc-eyebrow {
  display: inline-block;
  margin-bottom: var(--rc-space-2);
  font-family: var(--rc-eyebrow-font);
  font-size: var(--rc-eyebrow-size);
  font-weight: var(--rc-eyebrow-weight);
  line-height: 20px;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-eyebrow-fg);
}

/* --- Links -------------------------------------------------------------- */
a {
  color: var(--rc-link);
  font-weight: var(--rc-weight-semibold);
  text-decoration: none;
  transition: var(--rc-transition-color);
}
a:hover  { color: var(--rc-link-hover); }
a:active { color: var(--rc-color-primary-active); }
a:focus-visible {
  outline: 2px solid var(--rc-color-primary);
  outline-offset: 2px;
  border-radius: var(--rc-radius-xs);
}

/* Underline-on-hover link, matching the nav pointer treatment */
.rc-link-underline { position: relative; text-decoration: none; }
.rc-link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: var(--rc-nav-indicator-h);
  background-color: var(--rc-nav-indicator);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rc-duration) var(--rc-ease);
}
.rc-link-underline:hover::after,
.rc-link-underline:focus-visible::after { transform: scaleX(1); }

/* --- Lists: ul / ol / li ------------------------------------------------ */
ul, ol, .rc-list {
  margin: 0 0 var(--rc-space-5);
  padding-left: var(--rc-list-indent);
  font-family: var(--rc-list-font);
  font-size: var(--rc-list-size);
  font-weight: var(--rc-list-weight);
  line-height: var(--rc-list-leading);
  color: var(--rc-list-fg);
}
ul { list-style: disc; }
ol { list-style: decimal; }
ul ul, ol ol, ul ol, ol ul { margin-block: var(--rc-space-2); }
ul ul { list-style: circle; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }

li { margin-bottom: var(--rc-list-gap); }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--rc-list-marker); font-weight: var(--rc-weight-bold); }
ol > li::marker { color: var(--rc-list-marker-ol); }

/* Unstyled / inline lists */
.rc-list--plain  { list-style: none; padding-left: 0; }
.rc-list--inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap;
                   gap: var(--rc-space-4) var(--rc-space-6); margin-bottom: var(--rc-space-5); }
.rc-list--inline > li { margin-bottom: 0; }

/* Divided list */
.rc-list--divided { list-style: none; padding-left: 0; }
.rc-list--divided > li {
  padding-block: var(--rc-space-3);
  border-bottom: var(--rc-divider-width) solid var(--rc-list-divider);
  margin-bottom: 0;
}
.rc-list--divided > li:last-child { border-bottom: 0; }

/* Icon list — mirrors Elementor's icon-list widget */
.rc-list--icon { list-style: none; padding-left: 0; }
.rc-list--icon > li {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-list-icon-gap);
  transition: color var(--rc-duration) var(--rc-ease);
}
.rc-list--icon > li > .rc-list-icon,
.rc-list--icon > li > svg,
.rc-list--icon > li > i {
  flex: 0 0 auto;
  width: var(--rc-list-icon-size);
  height: var(--rc-list-icon-size);
  font-size: var(--rc-list-icon-size);
  line-height: 1;
  color: var(--rc-list-icon-color);
  fill: var(--rc-list-icon-color);
  transition: color var(--rc-duration) var(--rc-ease),
              fill var(--rc-duration) var(--rc-ease);
}
.rc-list--icon > li:hover { color: var(--rc-list-item-hover); }
.rc-list--icon > li:hover > .rc-list-icon,
.rc-list--icon > li:hover > svg { color: var(--rc-gold-700); fill: var(--rc-gold-700); }
.rc-list--icon > li.is-muted,
.rc-list--icon > li.is-muted > .rc-list-icon { color: var(--rc-list-icon-muted);
                                               fill: var(--rc-list-icon-muted); }

/* Check list (feature / pricing bullets) */
.rc-list--check { list-style: none; padding-left: 0; }
.rc-list--check > li { position: relative; padding-left: 1.9em; }
.rc-list--check > li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  width: 1.35em; height: 1.35em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rc-radius-full);
  background: var(--rc-color-primary);
  color: var(--rc-ink-on-brand);
  font-size: .72em;
  font-weight: var(--rc-weight-bold);
}

/* Ordered list, numbered-badge style */
.rc-list--steps { list-style: none; padding-left: 0; counter-reset: rc-step; }
.rc-list--steps > li {
  position: relative;
  padding-left: 2.6em;
  counter-increment: rc-step;
  margin-bottom: var(--rc-space-5);
}
.rc-list--steps > li::before {
  content: counter(rc-step);
  position: absolute; left: 0; top: -.05em;
  width: 1.9em; height: 1.9em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rc-radius-full);
  background: var(--rc-color-primary);
  color: var(--rc-ink-on-brand);
  font-family: var(--rc-font-display);
  font-size: .78em;
  font-weight: var(--rc-weight-bold);
}

dl { margin: 0 0 var(--rc-space-5); }
dt { font-family: var(--rc-font-display); font-weight: var(--rc-weight-bold);
     color: var(--rc-ink); margin-bottom: var(--rc-space-1); }
dd { margin: 0 0 var(--rc-space-4); color: var(--rc-ink-muted); }

/* --- Quotes, rules, media, code ----------------------------------------- */
blockquote {
  margin: 0 0 var(--rc-space-5);
  padding: var(--rc-space-5) var(--rc-space-6);
  border-left: 4px solid var(--rc-color-primary);
  border-radius: 0 var(--rc-radius-md) var(--rc-radius-md) 0;
  background: var(--rc-surface-tinted);
  font-size: var(--rc-text-xl);
  font-weight: var(--rc-weight-semibold);
  line-height: var(--rc-leading-snug);
}
blockquote cite { display: block; margin-top: var(--rc-space-3);
                  font-size: var(--rc-text-sm); font-weight: var(--rc-weight-medium);
                  font-style: normal; color: var(--rc-ink-muted); }

hr, .rc-divider {
  border: 0;
  height: var(--rc-divider-width);
  background: var(--rc-divider-color);
  margin: var(--rc-divider-gap) 0;
}
.rc-divider--brand { background: var(--rc-divider-brand); height: 2px; }
.rc-divider--short { width: 72px; }

/* --- Form controls ------------------------------------------------------- */
/*
 * Buttons keep the user agent's own grey `buttonface` background unless something
 * resets it, which on a dark surface renders a light box behind the label.
 *
 * This belongs here rather than in an application stylesheet for a specific reason:
 * `[type="submit"]` is an attribute selector, so it carries the same specificity as a
 * class. Declared alongside utility classes it would tie with them and win on source
 * order, quietly stripping the background off every primary button. Declared in this
 * sheet — which loads first — utilities layered on top always win.
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: transparent;
  background-image: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 var(--rc-space-5); }
figcaption { margin-top: var(--rc-space-3); font-size: var(--rc-text-xs);
             color: var(--rc-ink-muted); }

code, kbd, samp, pre { font-family: var(--rc-font-mono); font-size: .92em; }
code { background: var(--rc-surface-subtle); padding: .12em .38em;
       border-radius: var(--rc-radius-xs); color: var(--rc-ink); }
pre  { background: var(--rc-ink-900); color: var(--rc-cream);
       padding: var(--rc-space-5); border-radius: var(--rc-radius-md);
       overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }

/* --- Tables ------------------------------------------------------------- */
table, .rc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rc-font-body);
  font-size: var(--rc-text-sm);
  color: var(--rc-ink);
  margin-bottom: var(--rc-space-5);
}
th {
  background: var(--rc-table-head-bg);
  color: var(--rc-table-head-fg);
  font-family: var(--rc-font-display);
  font-weight: var(--rc-weight-bold);
  text-align: left;
  padding: var(--rc-table-cell-py) var(--rc-table-cell-px);
}
td {
  background: var(--rc-table-row-bg);
  padding: var(--rc-table-cell-py) var(--rc-table-cell-px);
  border-bottom: 1px solid var(--rc-table-border);
}
tbody tr:nth-child(even) td { background: var(--rc-table-row-alt); }
tbody tr:hover td { background: var(--rc-table-row-hover); }


/* ============================================================================
   5. COMPONENTS
   ========================================================================= */

/* --- Layout ------------------------------------------------------------- */
.rc-container {
  width: 100%;
  max-width: var(--rc-container);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
}
.rc-container--wide  { max-width: var(--rc-container-wide); }
.rc-section          { padding-block: var(--rc-section-y); background: var(--rc-surface); }
.rc-section--subtle  { background: var(--rc-surface-subtle); }
.rc-section--warm    { background: var(--rc-surface-warm); }
.rc-section--tinted  { background: var(--rc-surface-tinted); }
.rc-section--inverse { background: var(--rc-surface-inverse); color: var(--rc-ink-inverse); }
.rc-section--gold    { background: var(--rc-gradient-gold); color: var(--rc-ink-900); }
.rc-stack > * + *    { margin-top: var(--rc-space-5); }

/* --- BUTTONS ------------------------------------------------------------ */
.rc-btn {
  --_bg:     var(--rc-btn-primary-bg);
  --_fg:     var(--rc-btn-primary-fg);
  --_border: var(--rc-btn-primary-border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: var(--rc-btn-padding-y) var(--rc-btn-padding-x);
  border: var(--rc-btn-border-width) solid var(--_border);
  border-radius: var(--rc-btn-radius);
  background-color: var(--_bg);
  color: var(--_fg);
  fill: var(--_fg);
  font-family: var(--rc-btn-font);
  font-size: var(--rc-btn-size);
  font-weight: var(--rc-btn-weight);
  line-height: var(--rc-btn-leading);
  letter-spacing: var(--rc-btn-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: var(--rc-btn-transition),
              box-shadow var(--rc-duration) var(--rc-ease),
              transform var(--rc-duration-fast) var(--rc-ease);
}
.rc-btn svg { width: 1em; height: 1em; fill: currentColor; }

.rc-btn:hover,
.rc-btn:focus {
  background-color: var(--rc-btn-primary-bg-hover);
  border-color: var(--rc-btn-primary-border-hover);
  color: var(--rc-btn-primary-fg-hover);
  fill: var(--rc-btn-primary-fg-hover);
}
.rc-btn:hover { box-shadow: var(--rc-btn-primary-shadow-hover); }
.rc-btn:focus-visible { outline: none; box-shadow: var(--rc-focus-ring); }
.rc-btn:active { background-color: var(--rc-btn-primary-bg-active); transform: translateY(1px); }
.rc-btn[disabled], .rc-btn.is-disabled {
  opacity: var(--rc-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}

/* Primary CTA (explicit alias of the default) */
.rc-btn--primary { --_bg: var(--rc-btn-primary-bg); --_fg: var(--rc-btn-primary-fg);
                   --_border: var(--rc-btn-primary-border); }

/* Secondary — outlined */
.rc-btn--secondary {
  --_bg: var(--rc-btn-secondary-bg);
  --_fg: var(--rc-btn-secondary-fg);
  --_border: var(--rc-btn-secondary-border);
  box-shadow: none;
}
.rc-btn--secondary:hover,
.rc-btn--secondary:focus {
  background-color: var(--rc-btn-secondary-bg-hover);
  border-color: var(--rc-btn-secondary-border-hover);
  color: var(--rc-btn-secondary-fg-hover);
  fill: var(--rc-btn-secondary-fg-hover);
  box-shadow: none;
}

/* Tertiary — bright-gold 2px pill */
.rc-btn--tertiary {
  --_bg: var(--rc-btn-tertiary-bg);
  --_fg: var(--rc-btn-tertiary-fg);
  --_border: var(--rc-btn-tertiary-border);
  border-width: var(--rc-btn-tertiary-border-width);
  border-radius: var(--rc-btn-tertiary-radius);
  font-weight: var(--rc-weight-bold);
  box-shadow: none;
}
.rc-btn--tertiary:hover,
.rc-btn--tertiary:focus {
  background-color: var(--rc-btn-tertiary-bg-hover);
  border-color: var(--rc-btn-tertiary-bg-hover);
  color: var(--rc-btn-tertiary-fg-hover);
  fill: var(--rc-btn-tertiary-fg-hover);
  box-shadow: none;
}

/* Ghost / translucent pill */
.rc-btn--ghost {
  --_bg: var(--rc-btn-ghost-bg);
  --_fg: var(--rc-btn-ghost-fg);
  --_border: transparent;
  border-radius: var(--rc-btn-radius-pill);
  box-shadow: none;
}
.rc-btn--ghost:hover,
.rc-btn--ghost:focus {
  background-color: var(--rc-btn-ghost-bg-hover);
  color: var(--rc-btn-ghost-fg-hover);
  fill: var(--rc-btn-ghost-fg-hover);
  border-color: transparent;
  box-shadow: none;
}

/* Link-style button */
.rc-btn--link {
  --_bg: transparent; --_fg: var(--rc-btn-link-fg); --_border: transparent;
  padding-inline: 0;
  box-shadow: none;
}
.rc-btn--link:hover, .rc-btn--link:focus {
  background: transparent; border-color: transparent;
  color: var(--rc-btn-link-fg-hover); box-shadow: none;
  text-decoration: underline;
}

/* Shape + size modifiers */
.rc-btn--pill  { border-radius: var(--rc-btn-radius-pill); }
.rc-btn--sq    { border-radius: var(--rc-radius-sm); }
.rc-btn--sm    { font-size: var(--rc-btn-sm-size); font-weight: var(--rc-btn-sm-weight);
                 padding: var(--rc-btn-sm-padding); line-height: 20px; }
.rc-btn--md    { font-size: var(--rc-btn-md-size); padding: var(--rc-btn-md-padding); }
.rc-btn--lg    { font-size: var(--rc-btn-lg-size); padding: var(--rc-btn-lg-padding); }
.rc-btn--xl    { padding: var(--rc-btn-xl-padding); }
.rc-btn--block { display: flex; width: 100%; }
.rc-btn-group  { display: inline-flex; flex-wrap: wrap; gap: var(--rc-space-4); }

/* The site's signature hero CTA: bright gold, wide pill */
.rc-cta {
  --_bg: var(--rc-gold-400);
  --_fg: var(--rc-ink-900);
  --_border: var(--rc-gold-400);
  border-radius: var(--rc-radius-pill);
  padding: var(--rc-space-5) 4.375rem;   /* 20px 70px */
  font-size: 1.1875rem;                  /* 19px */
  font-weight: var(--rc-weight-semibold);
}
.rc-cta:hover, .rc-cta:focus {
  background-color: var(--rc-gold-700);
  border-color: var(--rc-gold-700);
  color: var(--rc-ink-900);
}

/* --- Header / nav ------------------------------------------------------- */
.rc-header {
  background: var(--rc-header-bg);
  min-height: var(--rc-header-height);
  display: flex;
  align-items: center;
  z-index: var(--rc-z-header);
}
.rc-logo img { max-height: 44px; width: auto; }

.rc-nav { display: flex; align-items: center; }
.rc-nav ul { display: flex; align-items: center; gap: 0;
             list-style: none; margin: 0; padding: 0; }
.rc-nav li { margin: 0; }
.rc-nav a {
  position: relative;
  display: inline-block;
  padding: var(--rc-space-2) var(--rc-nav-item-px);
  font-family: var(--rc-nav-font);
  font-size: var(--rc-nav-size);
  font-weight: var(--rc-nav-weight);
  line-height: var(--rc-nav-leading);
  color: var(--rc-nav-fg);
  fill: var(--rc-nav-fg);
  transition: var(--rc-transition-color);
}
.rc-nav a::after {
  content: "";
  position: absolute;
  left: var(--rc-nav-item-px); right: var(--rc-nav-item-px);
  bottom: 2px;
  height: var(--rc-nav-indicator-h);
  background: var(--rc-nav-indicator);
  transform: scaleX(0);
  transition: transform var(--rc-duration) var(--rc-ease);
}
.rc-nav a:hover { color: var(--rc-nav-fg-hover); fill: var(--rc-nav-fg-hover); }
.rc-nav a:hover::after,
.rc-nav a.is-active::after { transform: scaleX(1); }
.rc-nav a.is-active { color: var(--rc-nav-fg-active); }

.rc-nav__dropdown {
  background: var(--rc-nav-dropdown-bg);
  border-radius: var(--rc-nav-dropdown-radius);
  list-style: none; margin: 0; padding: 0;
  overflow: hidden;
  z-index: var(--rc-z-dropdown);
}
.rc-nav__dropdown a {
  display: block;
  padding: var(--rc-nav-dropdown-item-py) var(--rc-space-5);
  color: var(--rc-nav-dropdown-fg);
  fill: var(--rc-nav-dropdown-fg);
}
.rc-nav__dropdown a::after { display: none; }
.rc-nav__dropdown a:hover { background: var(--rc-gold-700); color: var(--rc-ink-900); }

.rc-nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  font-size: var(--rc-nav-toggle-size);
  line-height: 1;
  color: var(--rc-color-primary);
  fill: var(--rc-color-primary);
}
.rc-nav-toggle:hover, .rc-nav-toggle:focus { color: var(--rc-cream); fill: var(--rc-cream); }

/* --- Cards -------------------------------------------------------------- */
.rc-card {
  background: var(--rc-card-bg);
  color: var(--rc-card-fg);
  border-radius: var(--rc-card-radius);
  padding: var(--rc-card-padding);
  box-shadow: var(--rc-card-shadow);
  transition: box-shadow var(--rc-duration) var(--rc-ease),
              transform var(--rc-duration) var(--rc-ease);
}
.rc-card:hover    { box-shadow: var(--rc-card-shadow-hover); transform: translateY(-3px); }
.rc-card--flat    { box-shadow: none; border: var(--rc-card-border); }
.rc-card--alt     { background: var(--rc-card-bg-alt); }
.rc-card--inverse { background: var(--rc-ink-900); color: var(--rc-cream); box-shadow: none; }
.rc-card--gold    { background: var(--rc-color-primary); color: var(--rc-ink-on-brand); box-shadow: none; }
.rc-card__media   { border-radius: var(--rc-radius-card-top); overflow: hidden;
                    margin: calc(var(--rc-card-padding) * -1) calc(var(--rc-card-padding) * -1)
                            var(--rc-card-padding); }
.rc-card__title   { font-family: var(--rc-font-display); font-size: var(--rc-text-xl);
                    font-weight: var(--rc-weight-bold); margin-bottom: var(--rc-space-3); }
.rc-card__body    { font-size: var(--rc-text-sm); color: var(--rc-ink-muted); }
.rc-card__footer  { margin-top: var(--rc-space-5); display: flex; gap: var(--rc-space-4);
                    align-items: center; }
.rc-card-grid     { display: grid; gap: var(--rc-card-gap);
                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Forms -------------------------------------------------------------- */
.rc-label {
  display: block;
  margin-bottom: var(--rc-space-2);
  font-family: var(--rc-label-font);
  font-size: var(--rc-label-size);
  font-weight: var(--rc-label-weight);
  color: var(--rc-label-fg);
}
.rc-field,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%;
  min-height: var(--rc-field-height);
  padding: var(--rc-field-padding);
  background: var(--rc-field-bg);
  color: var(--rc-field-fg);
  border: var(--rc-border-width) solid var(--rc-field-border);
  border-radius: var(--rc-field-radius);
  font-family: var(--rc-field-font);
  font-size: var(--rc-field-size);
  font-weight: var(--rc-field-weight);
  line-height: var(--rc-leading-normal);
  transition: var(--rc-transition-color), box-shadow var(--rc-duration) var(--rc-ease);
}
textarea { min-height: 140px; resize: vertical; }
.rc-field::placeholder,
input::placeholder, textarea::placeholder { color: var(--rc-field-placeholder); }
.rc-field:hover, input:hover, select:hover, textarea:hover { border-color: var(--rc-field-border-hover); }
.rc-field:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rc-field-border-focus);
  box-shadow: var(--rc-field-shadow-focus);
}
.rc-field[aria-invalid="true"], .rc-field.is-error { border-color: var(--rc-field-error); }
.rc-field[disabled], input[disabled], textarea[disabled], select[disabled] {
  opacity: .55; cursor: not-allowed; background: var(--rc-surface-subtle);
}
.rc-help  { font-size: var(--rc-text-xs); color: var(--rc-ink-muted); margin-top: var(--rc-space-2); }
.rc-error { font-size: var(--rc-text-xs); color: var(--rc-field-error); margin-top: var(--rc-space-2); }
.rc-form-row { margin-bottom: var(--rc-space-5); }

/* --- Badges / pills / tags ---------------------------------------------- */
.rc-badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: var(--rc-badge-padding);
  background: var(--rc-badge-bg);
  color: var(--rc-badge-fg);
  border-radius: var(--rc-badge-radius);
  font-family: var(--rc-badge-font);
  font-size: var(--rc-badge-size);
  font-weight: var(--rc-badge-weight);
  letter-spacing: var(--rc-badge-tracking);
  text-transform: uppercase;
  line-height: 1.2;
}
.rc-badge--outline { background: transparent; color: var(--rc-color-primary);
                     border: 1px solid var(--rc-color-primary); }
.rc-badge--ink     { background: var(--rc-ink-900); color: var(--rc-cream); }
.rc-badge--lime    { background: var(--rc-lime-300); color: var(--rc-ink-900); }

/* --- Misc UI ------------------------------------------------------------ */
.rc-avatar { border-radius: var(--rc-radius-full); width: 60px; height: 60px;
             object-fit: cover; }
.rc-media--rounded { border-radius: var(--rc-card-radius); overflow: hidden; }
.rc-overlay { position: absolute; inset: 0; background: var(--rc-surface-overlay);
              z-index: var(--rc-z-overlay); }
.rc-glow-gold { box-shadow: var(--rc-glow-gold); }

::selection { background: var(--rc-color-primary); color: var(--rc-ink-900); }
:focus-visible { outline: 2px solid var(--rc-color-primary); outline-offset: 2px; }

.rc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ============================================================================
   6. UTILITIES
   ========================================================================= */
.rc-font-display { font-family: var(--rc-font-display); }
.rc-font-body    { font-family: var(--rc-font-body); }
.rc-font-label   { font-family: var(--rc-font-label); }
.rc-font-alt     { font-family: var(--rc-font-alt); }

.rc-w-medium   { font-weight: var(--rc-weight-medium); }
.rc-w-semibold { font-weight: var(--rc-weight-semibold); }
.rc-w-bold     { font-weight: var(--rc-weight-bold); }
.rc-w-extra    { font-weight: var(--rc-weight-extra); }

.rc-upper  { text-transform: uppercase; letter-spacing: var(--rc-tracking-wide); }
.rc-caps   { text-transform: capitalize; }
.rc-center { text-align: center; }
.rc-right  { text-align: right; }

.rc-c-primary { color: var(--rc-color-primary); }
.rc-c-accent  { color: var(--rc-color-accent); }
.rc-c-cream   { color: var(--rc-cream); }
.rc-c-lime    { color: var(--rc-color-lime); }
.rc-c-muted   { color: var(--rc-ink-muted); }

.rc-bg-primary  { background-color: var(--rc-color-primary); color: var(--rc-ink-on-brand); }
.rc-bg-accent   { background-color: var(--rc-color-accent); color: var(--rc-ink-inverse); }
.rc-bg-cream    { background-color: var(--rc-cream); color: var(--rc-ink); }
.rc-bg-subtle   { background-color: var(--rc-surface-subtle); }
.rc-bg-gradient { background-image: var(--rc-gradient-gold); color: var(--rc-ink-900); }

.rc-r-sm   { border-radius: var(--rc-radius-sm); }
.rc-r-md   { border-radius: var(--rc-radius-md); }
.rc-r-lg   { border-radius: var(--rc-radius-3xl); }
.rc-r-pill { border-radius: var(--rc-radius-pill); }
.rc-r-full { border-radius: var(--rc-radius-full); }

.rc-shadow-sm { box-shadow: var(--rc-shadow-sm); }
.rc-shadow-md { box-shadow: var(--rc-shadow-md); }
.rc-shadow-lg { box-shadow: var(--rc-shadow-lg); }


/* ============================================================================
   7. RESPONSIVE  (breakpoints match Elementor: 1366 / 1024 / 767)
   ========================================================================= */
@media (max-width: 1366px) {
  :root {
    --rc-text-8xl: 3.375rem;   /* 54px */
    --rc-text-6xl: 2.625rem;   /* 42px */
    --rc-section-y: var(--rc-space-11);
  }
}

@media (max-width: 1024px) {
  :root {
    --rc-container: 1024px;
    --rc-text-8xl: 2.875rem;   /* 46px */
    --rc-text-6xl: 2.25rem;    /* 36px */
    --rc-text-4xl: 2rem;       /* 32px */
    --rc-text-lg:  1.1875rem;  /* 19px */
    --rc-btn-size: var(--rc-text-md);
    --rc-nav-size: var(--rc-text-sm);
    --rc-nav-item-px: 20px;
    --rc-section-y: var(--rc-space-10);
  }
  .rc-nav-toggle { display: inline-flex; }
}

@media (max-width: 767px) {
  :root {
    --rc-container: 767px;
    --rc-text-8xl: 2.25rem;    /* 36px */
    --rc-text-6xl: 1.875rem;   /* 30px */
    --rc-text-4xl: 1.75rem;    /* 28px */
    --rc-text-2xl: 1.5rem;     /* 24px */
    --rc-text-lg:  1.0625rem;  /* 17px */
    --rc-btn-size: var(--rc-text-sm);
    --rc-btn-padding-y: var(--rc-space-4);
    --rc-btn-padding-x: var(--rc-space-5);
    --rc-nav-size: 0.8125rem;  /* 13px */
    --rc-nav-item-px: 10px;
    --rc-section-y: var(--rc-space-8);
    --rc-card-padding: var(--rc-space-4);
  }
  .rc-cta { padding: var(--rc-space-5); width: 100%; }
  .rc-btn-group { width: 100%; }
  .rc-btn-group > .rc-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}