/*
Theme Name: Hello Biz Child
Template: hello-biz
Version: 1.0.12
Description: Child theme for Hello Biz with RemarkableCloud library CSS.
*/

/* =====================================================
     RC Cloudcubes — Shared Styles Library v1
     =====================================================
     Drop ONCE at the top of every cloudcubes page (or save
     as Elementor Template and reuse). All cloudcubes widgets
     reference these classes — no per-widget CSS allowed.

     Class prefix : .rcc-*  (RemarkableCloud Cloudcubes)
     Brand fonts  : Inter (heading) / Montserrat (sub) /
                    Lato (body) / Roboto (label)
     Brand colors : #1C389A navy / #4F80FF accent /
                    #E6EFFF light / #011640 deep navy
     ===================================================== */


/* ════════════════════════════════════════════════════════
   1. TOKENS
   ════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --rcc-navy:        #1C389A;
  --rcc-deep:        #011640;
  --rcc-mid:         #0D2270;
  --rcc-accent:      #4F80FF;
  --rcc-accent-hov:  #3a6aee;
  --rcc-light:       #E6EFFF;
  --rcc-pale:        #A8C4FF;

  /* Neutrals */
  --rcc-dark:        #303030;
  --rcc-text:        #4A4A4A;
  --rcc-gray:        #666666;
  --rcc-mute:        #7A7A7A;
  --rcc-border:      #D6E4FF;
  --rcc-bg-alt:      #FAFBFF;
  --rcc-white:       #FFFFFF;

  /* Status */
  --rcc-success:     #16A34A;
  --rcc-success-bg:  #F0FDF4;
  --rcc-success-bd:  #C8E6D2;
  --rcc-warn:        #B45309;
  --rcc-warn-bg:     #FFF8F0;
  --rcc-warn-bd:     #F2DDC0;
  --rcc-info:        #7B61FF;
	
/* Existing tokens stay as-is, add these: */
  --rcc-bad:        #DC2626;
  --rcc-bad-bg:     #FEF2F2;
  --rcc-bad-border: #FECACA;
  --rcc-good:       #059669;
  --rcc-good-bg:    #F0FDF4;
  --rcc-good-border:#BBF7D0;
  
  /* Competitor brand color, default = neutral.
     Each compare page body class overrides this below. */
  --rcc-comp-color: #6B7280;
}

/* Per-page competitor brand colors.
   WordPress auto-adds body.page-{slug} class for each page. */
body.page-digitalocean  { --rcc-comp-color: #0080FF; }
body.page-cloudways     { --rcc-comp-color: #0B5EFF; }
body.page-kinsta        { --rcc-comp-color: #3ECAB0; }
body.page-wpengine      { --rcc-comp-color: #0ECAD4; }
body.page-vultr         { --rcc-comp-color: #007BFC; }
body.page-linode        { --rcc-comp-color: #00A95C; }
body.page-hetzner       { --rcc-comp-color: #D50C2D; }
body.page-ovh           { --rcc-comp-color: #123F6D; }
body.page-aws           { --rcc-comp-color: #FF9900; }
body.page-siteground    { --rcc-comp-color: #F04E23; }
body.page-liquidweb     { --rcc-comp-color: #0071CE; }
body.page-hostinger     { --rcc-comp-color: #673DE6; }
body.page-bluehost      { --rcc-comp-color: #003087; }
body.page-a2hosting     { --rcc-comp-color: #E84545; }
body.page-scalahosting  { --rcc-comp-color: #00A4E4; }
body.page-knowhost      { --rcc-comp-color: #2E7D32; }
body.page-hostgator     { --rcc-comp-color: #F5821F; }
body.page-webempresa    { --rcc-comp-color: #2196F3; }
body.page-raiola        { --rcc-comp-color: #E8B84B; }
body.page-neolo         { --rcc-comp-color: #1565C0; }	

  /* Typography */
  --rcc-fh: 'Inter', sans-serif;        /* Headings (primary) */
  --rcc-fs: 'Montserrat', sans-serif;   /* Sub-headings, plan names */
  --rcc-fb: 'Lato', sans-serif;          /* Body */
  --rcc-fl: 'Roboto', sans-serif;        /* Labels, accents */

  /* Radii */
  --rcc-r-sm: 6px;
  --rcc-r-md: 10px;
  --rcc-r-lg: 14px;
  --rcc-r-xl: 18px;

  /* Shadows */
  --rcc-sh-sm: 0 2px 8px rgba(28,56,154,.06);
  --rcc-sh-md: 0 6px 18px rgba(28,56,154,.10);
  --rcc-sh-lg: 0 12px 36px rgba(28,56,154,.12);

  /* Container */
  --rcc-container: 1800px;
}

/* Box-sizing reset, scoped to .rcc-* elements */
[class*="rcc-"], [class*="rcc-"]::before, [class*="rcc-"]::after {
  box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════
   2. SECTION + CONTAINER
   ════════════════════════════════════════════════════════ */
.rcc-section {
  padding: 90px 24px;
  background: var(--rcc-white);
  font-family: var(--rcc-fb);
  color: var(--rcc-text);
  position: relative;
  overflow: hidden;
}
.rcc-section--alt    { background: var(--rcc-light); }
.rcc-section--dark {
  background:
    /* Grid lines */
    linear-gradient(rgba(79, 128, 255, 0.07) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(79, 128, 255, 0.07) 1px, transparent 1px) 0 0 / 60px 60px,
    /* Radial accent glow top-right */
    radial-gradient(circle at 80% 20%, rgba(79, 128, 255, 0.15) 0%, transparent 50%),
    /* Base navy gradient */
    linear-gradient(143deg, var(--rcc-deep) 0%, var(--rcc-navy) 100%);
  color: var(--rcc-pale);
  position: relative;
}

/* Optional: fade the grid at edges so it doesn't clip harshly */
.rcc-section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, var(--rcc-deep) 100%);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.rcc-section--dark > * {
  position: relative;
  z-index: 1;
}
.rcc-section--tight  { padding: 60px 24px; }
.rcc-section--flush  { padding: 0; }
.rcc-section--bordered::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--rcc-accent) 30%, var(--rcc-navy) 70%, transparent 100%);
}

.rcc-container { max-width: var(--rcc-container); margin: 0 auto; }
.rcc-container--narrow { max-width: 880px; }
.rcc-container--medium { max-width: 1100px; }

/* Vertical rhythm helper for stacked content blocks */
.rcc-stack > * + *      { margin-top: 18px; }
.rcc-stack--lg > * + *  { margin-top: 32px; }
.rcc-block + .rcc-block { margin-top: 80px; }

/* Extra-wide container variant.
   Use sparingly: only for content where the standard 1200px feels cramped,
   like wide comparison tables or dense data grids. */
.rcc-container--xwide {
  max-width: 1800px;
}

/* ════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════════════════ */
.rcc-eyebrow {
  font-family: var(--rcc-fl);
  font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rcc-accent);
  margin: 0 0 16px;
}
.rcc-section--dark .rcc-eyebrow { color: var(--rcc-pale); }

.rcc-h1 {
  font-family: var(--rcc-fh);
  font-weight: 900;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.05; letter-spacing: -0.8px;
  color: var(--rcc-dark);
  margin: 0 0 20px;
}
.rcc-h1 em, .rcc-h1 .rcc-accent-text {
  font-style: normal; color: var(--rcc-accent);
}
.rcc-section--dark .rcc-h1 { color: var(--rcc-white); }

.rcc-h2 {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15; letter-spacing: -0.4px;
  color: var(--rcc-dark);
  margin: 0 0 24px;
}
.rcc-h2 em, .rcc-h2 .rcc-accent-text {
  font-style: normal; color: var(--rcc-accent);
}
.rcc-section--dark .rcc-h2 { color: var(--rcc-white); }

.rcc-h3 {
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--rcc-dark);
  margin: 32px 0 14px;
}

.rcc-h4 {
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--rcc-dark);
  margin: 0 0 14px;
}

.rcc-lead {
  font-size: 19px; line-height: 1.6; font-weight: 400;
  color: var(--rcc-dark);
  margin: 0 0 20px;
}

.rcc-section--dark .rcc-lead { color: rgba(255,255,255,.80); }

.rcc-prose {
  font-size: 16px; line-height: 1.7;
  color: var(--rcc-text);
  margin: 0 0 18px;
}
.rcc-prose strong { color: var(--rcc-dark); font-weight: 700; }
.rcc-section--dark .rcc-prose { color: rgba(255,255,255,.82); }
.rcc-section--dark .rcc-prose strong { color: var(--rcc-white); }

/* Inline links inside any .rcc- element */
[class*="rcc-"] :is(p, li, td) > a:not([class*="rcc-btn"]) {
  color: var(--rcc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color .15s;
}
[class*="rcc-"] :is(p, li, span, div, td) > a:not([class*="rcc-btn"]):hover {
  color: var(--rcc-navy);
}
.rcc-section--dark a:not([class*="rcc-btn"]) { color: var(--rcc-pale); }
.rcc-section--dark a:not([class*="rcc-btn"]):hover { color: var(--rcc-white); }

/* ════════════════════════════════════════════════════════
   4. PILLS / BADGES
   ════════════════════════════════════════════════════════ */
.rcc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--rcc-light);
  color: var(--rcc-navy);
  border: 1px solid var(--rcc-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--rcc-fl);
  font-size: 11px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
}
.rcc-pill--accent {
  background: rgba(79,128,255,.10);
  border-color: rgba(79,128,255,.30);
  color: var(--rcc-accent);
}
.rcc-pill--frosted {
  background: rgba(79,128,255,.15);
  border-color: rgba(79,128,255,.35);
  color: var(--rcc-pale);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rcc-pill--success {
  background: var(--rcc-success-bg);
  border-color: rgba(22,163,74,.20);
  color: var(--rcc-success);
}

/* Inline savings badge (for billing toggles) */
.rcc-savings-badge {
  display: inline-flex; align-items: center;
  background: var(--rcc-success-bg);
  color: var(--rcc-success);
  border: 1px solid rgba(22,163,74,.20);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--rcc-fl);
  font-size: 11px; font-weight: 600;
}
/* ============================================================
   PILL-STYLE EYEBROW VARIANT
   Matches the "Most Popular" / "Shared Upgrade" badge style
   used across the pricing cards.
   ============================================================ */
.rcc-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rcc-light);
  color: var(--rcc-accent);
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid rgba(79, 128, 255, 0.18);
  margin-bottom: 4px;
}
.rcc-eyebrow--pill::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--rcc-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   ACCENT WORD inside an H2 or H3
   For highlighting one phrase in a heading.
   ============================================================ */
.rcc-accent-word {
  color: var(--rcc-accent);
}

/* ============================================================
   SECTION HEAD — PRICING VARIANT
   Tightens spacing below; pairs naturally with the Cloud Cubes
   pricing widget (which has its own internal top padding).
   ============================================================ */
.rcc-section-head--pricing {
  margin-bottom: 32px;
}
.rcc-section-head--pricing .rcc-lead {
  max-width: 780px;
  font-size: 17px;
  line-height: 1.65;
}
/* ════════════════════════════════════════════════════════
   5. CTA BUTTONS
   ════════════════════════════════════════════════════════ */
.rcc-btn {
  display: inline-block;
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s, transform .15s, background .15s, border-color .15s, color .15s;
}
.rcc-btn:hover { transform: translateY(-1px); text-decoration: none; }

.rcc-btn--primary { background: var(--rcc-accent); color: var(--rcc-white); }
.rcc-btn--primary:hover { background: var(--rcc-accent-hov); color: var(--rcc-white); }

.rcc-btn--navy { background: var(--rcc-navy); color: var(--rcc-white); }
.rcc-btn--navy:hover { background: #16318a; color: var(--rcc-white); }

.rcc-btn--outline { background: transparent; border: 1.5px solid var(--rcc-border); color: var(--rcc-navy); }
.rcc-btn--outline:hover { border-color: var(--rcc-accent); color: var(--rcc-accent); }

.rcc-btn--ghost-light {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.45);
  color: var(--rcc-white);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rcc-btn--ghost-light:hover {
  background: var(--rcc-accent);
  border-color: var(--rcc-accent);
  color: var(--rcc-white);
}

.rcc-btn--small { font-size: 12px; padding: 8px 14px; border-radius: 6px; }
.rcc-btn--block { display: block; width: 100%; }

/* Group of action buttons */
.rcc-actions {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 24px;
}

/* When .rcc-actions follows .rcc-tiernav, add a divider gap */
.rcc-tiernav + .rcc-actions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* ════════════════════════════════════════════════════════
   6. TRUST STRIP (icon · label · separator)
   ════════════════════════════════════════════════════════ */
.rcc-trust {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.rcc-trust__item {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: var(--rcc-gray);
}
.rcc-trust__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--rcc-border);
}
.rcc-section--dark .rcc-trust__item { color: rgba(255,255,255,.82); }
.rcc-section--dark .rcc-trust__sep  { background: rgba(255,255,255,.30); }

/* ════════════════════════════════════════════════════════
   7. GRIDS
   ════════════════════════════════════════════════════════ */
.rcc-grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rcc-grid-3     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.rcc-grid-4     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rcc-grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ════════════════════════════════════════════════════════
   8. CARDS — generic + price + use case + info column
   ════════════════════════════════════════════════════════ */
/* Generic card (price, content, etc.) */
.rcc-card {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-xl);
  padding: 24px 20px 20px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: box-shadow .25s, border-color .25s, transform .2s;
}
.rcc-card:hover {
  box-shadow: var(--rcc-sh-lg);
  border-color: #b0c8f8;
  transform: translateY(-3px);
}
.rcc-card--featured {
  border-color: var(--rcc-accent);
  box-shadow: 0 4px 20px rgba(79,128,255,.14);
}
.rcc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rcc-accent), var(--rcc-navy));
  opacity: 0; transition: opacity .25s;
}
.rcc-card:hover::before, .rcc-card--featured::before { opacity: 1; }

.rcc-card__badge { margin-bottom: 12px; align-self: flex-start; }
.rcc-card__name {
  font-family: var(--rcc-fs);
  font-weight: 700; font-size: 15px;
  color: var(--rcc-dark);
  margin: 0 0 16px;
}

/* Price block */
.rcc-price {
  display: flex; align-items: flex-end; gap: 2px;
  line-height: 1; margin-bottom: 4px;
}
.rcc-price__cur {
  font-family: var(--rcc-fh);
  font-size: 20px; font-weight: 700;
  color: var(--rcc-navy);
  padding-bottom: 4px;
}
.rcc-price__amt {
  font-family: var(--rcc-fh);
  font-size: 42px; font-weight: 800;
  color: var(--rcc-navy);
  letter-spacing: -1px;
}
.rcc-price__per {
  font-family: var(--rcc-fb);
  font-size: 14px; color: var(--rcc-gray);
  padding-bottom: 6px;
}
.rcc-price-note {
  font-family: var(--rcc-fl);
  font-size: 11px; color: var(--rcc-gray);
  margin-bottom: 14px;
  min-height: 16px;
}

/* Specs grid (inside card) */
.rcc-specs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.rcc-specs__val {
  font-family: var(--rcc-fs);
  font-weight: 700; font-size: 13px;
  color: var(--rcc-dark);
}
.rcc-specs__lbl {
  font-family: var(--rcc-fl);
  font-size: 10px; font-weight: 500;
  color: var(--rcc-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Feature list */
.rcc-feats {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column;
  gap: 6px; flex: 1;
}
.rcc-feats li {
  font-size: 12px; color: var(--rcc-gray);
  display: flex; align-items: flex-start;
  gap: 7px; line-height: 1.5;
}
.rcc-feats li::before {
  content: '✓'; color: var(--rcc-success);
  font-weight: 700; font-size: 11px;
  flex-shrink: 0; margin-top: 1px;
}

.rcc-divider { height: 1px; background: var(--rcc-border); margin: 12px 0; }

/* Use case card (lighter, left accent border) */
.rcc-uc {
  background: var(--rcc-light);
  border-left: 3px solid var(--rcc-accent);
  border-radius: 8px;
  padding: 20px 24px;
}
.rcc-uc__title {
  font-family: var(--rcc-fh);
  font-weight: 700; font-size: 16px;
  color: var(--rcc-dark);
  line-height: 1.4;
  margin: 0 0 10px;
}
.rcc-uc__body {
  font-size: 14px; line-height: 1.6;
  color: var(--rcc-gray);
  margin: 0;
}

/* Info column (We do / You control / Won't do) */
.rcc-info-col {
  border-radius: 12px; padding: 24px;
  border: 1.5px solid var(--rcc-border);
}
.rcc-info-col--ok      { background: var(--rcc-success-bg); border-color: var(--rcc-success-bd); border-top: 3px solid var(--rcc-success); }
.rcc-info-col--neutral { background: var(--rcc-light);       border-top: 3px solid var(--rcc-accent); }
.rcc-info-col--alert   { background: var(--rcc-warn-bg);     border-color: var(--rcc-warn-bd);    border-top: 3px solid var(--rcc-warn); }

.rcc-info-col h4 {
  font-family: var(--rcc-fh);
  font-weight: 700; font-size: 14px;
  color: var(--rcc-dark); line-height: 1.3;
  margin: 0 0 14px;
}
.rcc-info-col__sub {
  font-size: 13px; color: var(--rcc-gray);
  margin: 0 0 18px; line-height: 1.4;
}
.rcc-info-col ul { list-style: none; padding: 0; margin: 0; }
.rcc-info-col li {
  font-size: 14px; line-height: 1.55;
  padding: 5px 0 5px 20px;
  position: relative;
  color: var(--rcc-text);
}
.rcc-info-col--ok      li::before { content: '✓'; color: var(--rcc-success); position: absolute; left: 0; font-weight: 700; }
.rcc-info-col--neutral li::before { content: '◆'; color: var(--rcc-accent);  position: absolute; left: 0; font-size: 11px; top: 7px; }
.rcc-info-col--alert   li::before { content: '✕'; color: var(--rcc-warn);    position: absolute; left: 0; font-weight: 700; }

/* Compact CTA inside info-col (e.g. "Talk to a human") */
.rcc-info-col__cta {
  margin-top: 18px; padding: 14px 16px;
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-warn-bd);
  border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  color: var(--rcc-gray);
}
.rcc-info-col__cta p {
  margin: 0 0 6px;
  font-family: var(--rcc-fh);
  font-weight: 700; font-size: 13px;
  color: var(--rcc-dark);
}
.rcc-info-col__cta a {
  font-family: var(--rcc-fl);
  font-weight: 500; font-size: 13px;
  color: var(--rcc-warn);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .15s;
}
.rcc-info-col__cta a::after { content: '→'; transition: transform .15s; }
.rcc-info-col__cta a:hover { color: #8C3F00; }
.rcc-info-col__cta a:hover::after { transform: translateX(2px); }

/* ════════════════════════════════════════════════════════
   9. TABLES — price + comparison
   ════════════════════════════════════════════════════════ */
.rcc-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1.5px solid var(--rcc-border);
  background: var(--rcc-white);
}
.rcc-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--rcc-fb);
  font-size: 14px;
  min-width: 880px;
}
.rcc-table thead th {
  background: var(--rcc-navy);
  color: var(--rcc-white);
  font-family: var(--rcc-fh);
  font-weight: 700; font-size: 12px;
  text-align: left;
  padding: 14px 18px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rcc-table thead th.rcc-table__col--accent { background: var(--rcc-accent); }
.rcc-table thead th a {
  color: var(--rcc-white);
  text-decoration: underline;
}
.rcc-table thead th a:hover { color: var(--rcc-light); }

.rcc-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rcc-border);
  vertical-align: middle;
  line-height: 1.5;
}
.rcc-table tbody tr:last-child td { border-bottom: none; }
.rcc-table tbody tr:nth-child(even) { background: var(--rcc-bg-alt); }

.rcc-table__plan {
  font-family: var(--rcc-fs);
  font-weight: 700;
  color: var(--rcc-dark);
}
.rcc-table__price-monthly,
.rcc-table__price-annual {
  font-family: var(--rcc-fh);
  font-weight: 700; font-size: 16px;
}
.rcc-table__price-monthly { color: var(--rcc-navy); }
.rcc-table__price-annual  { color: var(--rcc-accent); }
.rcc-table__price-monthly small,
.rcc-table__price-annual small {
  font-family: var(--rcc-fb);
  font-weight: 400; font-size: 11px;
  color: var(--rcc-gray);
  display: block;
}

/* Comparison table (highlights "us" column) */
.rcc-table--compare td:first-child { font-weight: 700; color: var(--rcc-dark); }
.rcc-table--compare td.rcc-table__col--us {
  background: var(--rcc-light);
  font-weight: 600;
  color: var(--rcc-navy);
}
.rcc-table--compare strong { color: var(--rcc-navy); font-weight: 700; }

.rcc-table-note {
  font-size: 13px; color: var(--rcc-gray);
  margin: 16px 4px 0;
  line-height: 1.5;
}
/* Winner badges inline in the RC column */
.rcc-table--compare .win {
  display: inline-block;
  font-family: var(--rcc-fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.rcc-table--compare .win--rc   { background: var(--rcc-good-bg); color: var(--rcc-good); }
.rcc-table--compare .win--comp { background: var(--rcc-bad-bg);  color: var(--rcc-bad); }
.rcc-table--compare .win--tie  { background: var(--rcc-light);   color: var(--rcc-navy); }

/* ════════════════════════════════════════════════════════
   10. FAQ ACCORDION (HTML <details>/<summary>, no JS)
   ════════════════════════════════════════════════════════ */
.rcc-faq__list {
  display: flex; flex-direction: column; gap: 12px;
}
.rcc-faq__item {
  border: 1.5px solid var(--rcc-border);
  border-radius: 10px;
  background: var(--rcc-white);
  transition: border-color .18s, box-shadow .18s;
}
.rcc-faq__item[open] {
  border-color: var(--rcc-accent);
  box-shadow: 0 6px 18px rgba(28,56,154,.08);
}
.rcc-faq__q {
  font-family: var(--rcc-fh);
  font-weight: 700; font-size: 16px;
  color: var(--rcc-dark);
  padding: 18px 24px;
  padding-right: 50px;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.4;
}
.rcc-faq__q::-webkit-details-marker { display: none; }
.rcc-faq__q::after {
  content: '+';
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 400;
  color: var(--rcc-accent);
  transition: transform .2s;
}
.rcc-faq__item[open] .rcc-faq__q::after { content: '−'; }
.rcc-faq__a {
  padding: 0 24px 22px;
  font-size: 15px; line-height: 1.65;
  color: var(--rcc-text);
}
.rcc-faq__a p { margin: 0 0 12px; }
.rcc-faq__a p:last-child { margin: 0; }

/* ════════════════════════════════════════════════════════
   11. CALLOUTS / CHOICES
   ════════════════════════════════════════════════════════ */
.rcc-callout {
  background: var(--rcc-light);
  border-left: 3px solid var(--rcc-accent);
  border-radius: 8px;
  padding: 20px 24px;
}
.rcc-callout p { margin: 0 0 8px; font-size: 15px; line-height: 1.65; }
.rcc-callout p:last-child { margin: 0; }
.rcc-callout strong { color: var(--rcc-navy); font-weight: 700; }
.rcc-callout--small p { font-size: 14px; }
.rcc-callout--white {
  background: var(--rcc-white);
  box-shadow: var(--rcc-sh-sm);
  border: 1.5px solid var(--rcc-border);
  border-left: 3px solid var(--rcc-accent);
}
.rcc-callout--header {
  font-family: var(--rcc-fh);
  font-weight: 700;
  color: var(--rcc-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  margin-bottom: 8px;
}

/* "Choices" block under comparison table */
.rcc-choices {
  margin-top: 22px;
  padding: 18px 24px;
  background: var(--rcc-light);
  border-radius: 10px;
}
.rcc-choices p {
  margin: 6px 0; font-size: 15px; line-height: 1.6;
}
.rcc-choices strong { color: var(--rcc-navy); }

/* ════════════════════════════════════════════════════════
   12. CSS-ONLY BILLING TOGGLE
   ──────────────────────────────────────────────────────
   Per-page wrapper: <section class="rcc-cards">
   Inside it:
     <input type="radio" name="rcc-bill" id="..." checked>  (1st = monthly)
     <input type="radio" name="rcc-bill" id="...">          (2nd = annual)
     <div class="rcc-billing-bar"> ... <label for="..."> ... </div>
     <div class="rcc-grid-4">
       <article class="rcc-card">
         <div class="rcc-price rcc-price--monthly"> ... </div>
         <div class="rcc-price rcc-price--annual"> ... </div>
         <div class="rcc-price-note rcc-price-note--monthly">...</div>
         <div class="rcc-price-note rcc-price-note--annual">...</div>
         <a class="rcc-btn rcc-btn--primary rcc-cta--monthly" href="...">Order</a>
         <a class="rcc-btn rcc-btn--primary rcc-cta--annual"  href="...">Order</a>
       </article>
     </div>
   ════════════════════════════════════════════════════════ */
.rcc-cards { position: relative; }
.rcc-cards > input[type="radio"] {
  position: absolute; left: -9999px; opacity: 0;
}

/* Toggle bar */
.rcc-billing-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 0 40px; flex-wrap: wrap;
}
.rcc-billing-bar__label {
  font-family: var(--rcc-fl);
  font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--rcc-gray);
}
.rcc-billing-btns { display: flex; gap: 8px; }
.rcc-billing-btn {
  width: 110px; padding: 8px 0;
  text-align: center;
  border: 1.5px solid var(--rcc-border);
  border-radius: 8px;
  background: var(--rcc-white);
  color: var(--rcc-gray);
  font-family: var(--rcc-fb);
  font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: all .18s;
}
.rcc-billing-btn:hover {
  border-color: var(--rcc-accent);
  color: var(--rcc-accent);
}

/* Active button states */
.rcc-cards > input[type="radio"]:nth-of-type(1):checked ~ .rcc-billing-bar .rcc-billing-btns .rcc-billing-btn:nth-of-type(1),
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-billing-bar .rcc-billing-btns .rcc-billing-btn:nth-of-type(2) {
  background: var(--rcc-accent);
  border-color: var(--rcc-accent);
  color: var(--rcc-white);
}

/* Default visibility: monthly visible, annual hidden */
.rcc-cards .rcc-price--annual,
.rcc-cards .rcc-price-note--annual,
.rcc-cards .rcc-cta--annual { display: none; }

/* When 2nd radio (annual) is checked, swap visibility */
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-grid-4 .rcc-price--monthly,
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-grid-4 .rcc-price-note--monthly,
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-grid-4 .rcc-cta--monthly { display: none; }

.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-grid-4 .rcc-price--annual { display: flex; }
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-grid-4 .rcc-price-note--annual { display: block; }
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ .rcc-grid-4 .rcc-cta--annual { display: block; }

/* ════════════════════════════════════════════════════════
   13. HERO TIER NAV (small pill-row of 4 tiers)
   ════════════════════════════════════════════════════════ */
.rcc-tiernav { display: flex; flex-wrap: wrap; gap: 8px; }
.rcc-tiernav a {
  font-family: var(--rcc-fl);
  font-size: 13px; font-weight: 500;
  color: var(--rcc-white);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s, color .15s, border-color .15s;
}
.rcc-tiernav a:hover,
.rcc-tiernav a[aria-current="page"] {
  background: var(--rcc-accent);
  color: var(--rcc-white);
  border-color: var(--rcc-accent);
}
.rcc-tiernav a {
  display: inline-block;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════
   14. UTILITIES
   ════════════════════════════════════════════════════════ */
.rcc-text-center { text-align: center; }
.rcc-mt-0  { margin-top: 0 !important; }
.rcc-mt-md { margin-top: 24px; }
.rcc-mt-lg { margin-top: 32px; }
.rcc-hide-mobile { /* set in media query below */ }

/* ════════════════════════════════════════════════════════
   15. RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .rcc-grid-4     { grid-template-columns: 1fr 1fr; }
  .rcc-grid-split { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 900px) {
  .rcc-grid-3 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 800px) {
  .rcc-section { padding: 60px 18px; }
  .rcc-grid-2  { grid-template-columns: 1fr; gap: 14px; }
  .rcc-block + .rcc-block { margin-top: 56px; }
}
@media (max-width: 600px) {
  .rcc-grid-4 { grid-template-columns: 1fr; }
  .rcc-billing-btn { width: 90px; }
  .rcc-faq__q { font-size: 15px; padding: 16px 20px; padding-right: 44px; }
  .rcc-faq__a { font-size: 14px; padding: 0 20px 18px; }
  .rcc-table thead th { font-size: 10px; padding: 10px 12px; }
  .rcc-table tbody td { padding: 12px; font-size: 13px; }
  .rcc-actions { flex-direction: column; align-items: stretch; }
  .rcc-actions .rcc-btn { text-align: center; }
  .rcc-hide-mobile { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   16. HERO VISUAL — image column for split heroes
   ════════════════════════════════════════════════════════ */
.rcc-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcc-hero-visual img {
  max-width: 100%;
  height: auto;
  width: 480px;
  filter: drop-shadow(0 20px 36px rgba(28,56,154,.20));
  animation: rcc-float 5s ease-in-out infinite;
}
@keyframes rcc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (max-width: 1100px) {
  .rcc-hero-visual img { width: 380px; }
}
@media (max-width: 600px) {
  .rcc-hero-visual img { width: 280px; }
}
.rcc-section--dark .rcc-trust__item svg { stroke: var(--rcc-accent); }

/* ════════════════════════════════════════════════════════
   17. AT-A-GLANCE FACT BOX (LLM-extractable specs)
   ════════════════════════════════════════════════════════ */
.rcc-glance {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 28px 32px;
  margin-top: 32px;
  box-shadow: var(--rcc-sh-sm);
}
.rcc-glance__title {
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rcc-navy);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rcc-glance__title::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--rcc-accent);
  display: inline-block;
}
.rcc-glance__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcc-glance__list li {
  font-family: var(--rcc-fb);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rcc-text);
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rcc-glance__list li::before { content: none; }
.rcc-glance__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--rcc-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rcc-accent);
}
.rcc-glance__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-glance__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rcc-glance__lbl {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rcc-gray);
}
.rcc-glance__val {
  font-family: var(--rcc-fb);
  font-weight: 700;
  color: var(--rcc-dark);
  font-size: 14px;
  line-height: 1.4;
}
.rcc-glance__val a {
  color: var(--rcc-navy);
  text-decoration: none;
  border-bottom: 1.5px solid var(--rcc-accent);
  transition: color .15s;
}
.rcc-glance__val a:hover { color: var(--rcc-accent); }
.rcc-glance__list li::before { content: none; }
.rcc-glance__lbl {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rcc-gray);
}
.rcc-glance__val {
  font-family: var(--rcc-fb);
  font-weight: 700;
  color: var(--rcc-dark);
  font-size: 15px;
}
.rcc-glance__val a {
  color: var(--rcc-navy);
  text-decoration: none;
  border-bottom: 1.5px solid var(--rcc-accent);
  transition: color .15s;
}
.rcc-glance__val a:hover { color: var(--rcc-accent); }

@media (max-width: 700px) {
  .rcc-glance { padding: 22px 20px; }
  .rcc-glance__list { grid-template-columns: 1fr; gap: 12px; }
}

/* ════════════════════════════════════════════════════════
   18. SECTION HEADERS — centered intro pattern
   ════════════════════════════════════════════════════════ */
.rcc-section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
}
.rcc-section-head .rcc-eyebrow,
.rcc-section-head .rcc-h2,
.rcc-section-head .rcc-lead { margin-left: auto; margin-right: auto; }
.rcc-section-head .rcc-lead { color: var(--rcc-gray); }

/* Anchor helper - jump-to target spacing */
.rcc-anchor { scroll-margin-top: 80px; }

/* Section footer link (e.g. "Need bigger plans?") */
.rcc-section-footer {
  text-align: center;
  margin-top: 32px;
  font-family: var(--rcc-fb);
  font-size: 15px;
  color: var(--rcc-gray);
}
.rcc-section-footer a {
  color: var(--rcc-accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid var(--rcc-accent);
  transition: color .15s;
}
.rcc-section-footer a:hover { color: var(--rcc-navy); }

/* ════════════════════════════════════════════════════════
   19. PRICE TABLE — wide-format (no scroll on desktop)
   ════════════════════════════════════════════════════════ */
.rcc-table--wide { min-width: 0; }
.rcc-table--wide thead th { font-size: 11px; padding: 12px 14px; }
.rcc-table--wide tbody td { padding: 14px; font-size: 14px; }
.rcc-table__price-monthly--lg,
.rcc-table__price-annual--lg {
  font-size: 18px;
}
.rcc-table--wide tbody td:last-child { text-align: right; }

/* Mobile: switch to horizontal scroll */
@media (max-width: 900px) {
  .rcc-table--wide { min-width: 880px; }
}

/* ════════════════════════════════════════════════════════
   20. PRICING TABLE — pricing.com style (multi-line cells)
   ════════════════════════════════════════════════════════ */
.rcc-ptable-wrap {
  border-radius: 12px;
  border: 1.5px solid var(--rcc-border);
  background: var(--rcc-white);
  overflow: hidden;
}
.rcc-ptable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rcc-fb);
}

.rcc-ptable thead th {
  background: var(--rcc-light);
  color: var(--rcc-navy);
  font-family: var(--rcc-fl);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--rcc-border);
}
.rcc-ptable tbody td {
  padding: 18px;
  background: var(--rcc-white);
  border-bottom: 1px solid var(--rcc-border);
  vertical-align: middle;
  transition: background .15s;
}
.rcc-ptable tbody tr:last-child td { border-bottom: none; }
.rcc-ptable tbody tr:hover td { background: var(--rcc-light); }

.rcc-ptable__plan {
  font-family: var(--rcc-fs);
  font-weight: 700;
  font-size: 15px;
  color: var(--rcc-dark);
}
.rcc-ptable__cell-main {
  font-family: var(--rcc-fs);
  font-weight: 700;
  font-size: 14px;
  color: var(--rcc-dark);
  line-height: 1.3;
}
.rcc-ptable__cell-sub {
  font-family: var(--rcc-fl);
  font-weight: 500;
  font-size: 11px;
  color: var(--rcc-gray);
  letter-spacing: .04em;
  margin-top: 2px;
  line-height: 1.3;
}

/* Price cell - shows monthly OR annual based on parent toggle */
.rcc-ptable__price {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 22px;
  color: var(--rcc-navy);
  line-height: 1;
  letter-spacing: -0.5px;
}
.rcc-ptable__price small {
  font-family: var(--rcc-fb);
  font-weight: 400;
  font-size: 13px;
  color: var(--rcc-gray);
  margin-left: 2px;
}
.rcc-ptable__price-yearly {
  font-family: var(--rcc-fl);
  font-size: 11px;
  color: var(--rcc-gray);
  margin-top: 4px;
  display: block;
}

/* Mobile: horizontal scroll */
@media (max-width: 1100px) {
  .rcc-ptable-wrap { overflow-x: auto; }
  .rcc-ptable { min-width: 920px; }
}

/* Footer note inside the wrap (S3 free notice) */
.rcc-ptable__footnote {
  background: var(--rcc-light);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--rcc-navy);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1.5px solid var(--rcc-border);
}
.rcc-ptable__footnote svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  stroke: var(--rcc-accent);
}

/* ════════════════════════════════════════════════════════
   21. UNIFIED TOGGLE — toggle drives BOTH cards and table
   ════════════════════════════════════════════════════════ */
/* Default: monthly visible everywhere */
.rcc-cards .rcc-ptable-price--annual { display: none; }
.rcc-cards .rcc-ptable-price--monthly { display: block; }

/* Annual radio checked: swap visibility in table too */
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ * .rcc-ptable-price--monthly { display: none; }
.rcc-cards > input[type="radio"]:nth-of-type(2):checked ~ * .rcc-ptable-price--annual { display: block; }

/* ════════════════════════════════════════════════════════
   22. USE CASE CARDS — enhanced (icon + features + fit)
   ════════════════════════════════════════════════════════ */
.rcc-uc {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-left: 3px solid var(--rcc-accent);
  border-radius: var(--rcc-r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .25s, border-color .25s, transform .2s;
}
.rcc-uc:hover {
  box-shadow: var(--rcc-sh-md);
  transform: translateY(-2px);
}

.rcc-uc__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--rcc-light);
  color: var(--rcc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-uc__icon svg {
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rcc-uc__title {
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 18px;
  color: var(--rcc-dark);
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.2px;
}

.rcc-uc__body {
  font-family: var(--rcc-fb);
  font-size: 15px;
  line-height: 1.6;
  color: var(--rcc-text);
  margin: 0;
}

.rcc-uc__feats {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcc-uc__feats li {
  font-family: var(--rcc-fb);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rcc-gray);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
}
.rcc-uc__feats li::before {
  content: '';
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2316A34A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.rcc-uc__fit {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rcc-border);
  font-family: var(--rcc-fl);
  font-size: 12px;
  font-weight: 500;
  color: var(--rcc-navy);
  letter-spacing: 0.04em;
}
.rcc-uc__fit strong {
  color: var(--rcc-accent);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════
   23. STAT CALLOUT — large highlighted differentiator number
   ════════════════════════════════════════════════════════ */
.rcc-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

/* Vertical stack version (for split layouts) */
.rcc-stat-row--vertical {
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}
.rcc-stat-row--vertical .rcc-stat {
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  align-items: center;
}
.rcc-stat-row--vertical .rcc-stat__num {
  font-size: 36px;
  margin: 0;
  grid-row: 1 / span 2;
  align-self: center;
}
.rcc-stat-row--vertical .rcc-stat__num small { font-size: 18px; }
.rcc-stat-row--vertical .rcc-stat__label {
  margin: 0;
  align-self: end;
}
.rcc-stat-row--vertical .rcc-stat__detail {
  font-size: 13px;
  margin: 0;
  align-self: start;
}
@media (max-width: 1100px) {
  .rcc-stat-row--vertical {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }
  .rcc-stat-row--vertical .rcc-stat {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 8px;
  }
  .rcc-stat-row--vertical .rcc-stat__num {
    grid-row: auto;
    font-size: 42px;
  }
}

.rcc-stat {
  background: var(--rcc-light);
  border-radius: var(--rcc-r-lg);
  padding: 24px;
  border-left: 3px solid var(--rcc-accent);
}

/* Tinted variants — lighter to darker for stat row progression */
.rcc-stat--shade-1 {
  background: #F0F5FF;
  border-left-color: #6B95FF;
}
.rcc-stat--shade-2 {
  background: #DCE6FF;
  border-left-color: #4F80FF;
}
.rcc-stat--shade-3 {
  background: #C2D2FF;
  border-left-color: #3A6AEE;
}
.rcc-stat--shade-4 {
  background: #1C389A;
  border-left-color: #4F80FF;
}
.rcc-stat--shade-4 .rcc-stat__num {
  color: #FFFFFF;
}
.rcc-stat--shade-4 .rcc-stat__num small {
  color: #A8C4FF;
}
.rcc-stat--shade-4 .rcc-stat__label {
  color: #A8C4FF;
}
.rcc-stat--shade-4 .rcc-stat__detail {
  color: rgba(255, 255, 255, 0.85);
}

.rcc-stat__num {
  font-family: var(--rcc-fh);
  font-weight: 900;
  font-size: 42px;
  color: var(--rcc-navy);
  line-height: 1;
  letter-spacing: -1.5px;
  margin: 0 0 8px;
}
.rcc-stat__num small {
  font-size: 22px;
  color: var(--rcc-accent);
  font-weight: 700;
  margin-left: 2px;
  letter-spacing: -0.5px;
}
.rcc-stat__label {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rcc-gray);
  margin: 0 0 8px;
}
.rcc-stat__detail {
  font-family: var(--rcc-fb);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rcc-text);
  margin: 0;
}

/* ════════════════════════════════════════════════════════
   24. COMPARISON BOXES — pro/con side-by-side cards
   ════════════════════════════════════════════════════════ */
.rcc-compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.rcc-cbox {
  background: var(--rcc-light);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.rcc-cbox--good {
  border-top: 4px solid var(--rcc-success);
}
.rcc-cbox--bad {
  border-top: 4px solid var(--rcc-warn);
}
.rcc-cbox__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--rcc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-cbox--good .rcc-cbox__icon { color: var(--rcc-success); }
.rcc-cbox--bad .rcc-cbox__icon { color: var(--rcc-warn); }
.rcc-cbox__icon svg {
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-cbox__title {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 22px;
  color: var(--rcc-navy);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.3px;
}
.rcc-cbox__intro {
  font-family: var(--rcc-fb);
  font-size: 15px;
  line-height: 1.6;
  color: var(--rcc-text);
  margin: 0;
}
.rcc-cbox__intro strong { color: var(--rcc-dark); font-weight: 700; }
.rcc-cbox__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rcc-cbox__list li {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rcc-text);
  position: relative;
  padding-left: 28px;
}
.rcc-cbox__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--rcc-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.rcc-cbox--good .rcc-cbox__list li::before {
  border: 1.5px solid var(--rcc-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316A34A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
}
.rcc-cbox--bad .rcc-cbox__list li::before {
  border: 1.5px solid var(--rcc-warn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B45309' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}
.rcc-cbox__list strong {
  color: var(--rcc-navy);
  font-weight: 700;
  display: inline;
}
.rcc-cbox__close {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rcc-gray);
  font-style: italic;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rcc-border);
}
.rcc-cbox__close a {
  color: var(--rcc-navy);
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .rcc-compare-pair { grid-template-columns: 1fr; gap: 16px; }
  .rcc-cbox { padding: 24px; }
  .rcc-cbox__title { font-size: 19px; }
}

/* ════════════════════════════════════════════════════════
   25. DECISION TRIO — three-column tier comparison cards
   ════════════════════════════════════════════════════════ */
.rcc-decision-trio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 1400px) {
  .rcc-decision-trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .rcc-decision-trio { grid-template-columns: 1fr; }
}
.rcc-dcard {
  background: var(--rcc-light);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .25s, transform .2s, border-color .25s;
  position: relative;
}
.rcc-dcard:hover {
  box-shadow: var(--rcc-sh-md);
  transform: translateY(-3px);
  border-color: var(--rcc-accent);
}
.rcc-dcard--current {
  border-top: 4px solid var(--rcc-accent);
  background: var(--rcc-white);
  box-shadow: var(--rcc-sh-sm);
}
.rcc-dcard--current::after {
  content: 'You are here';
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--rcc-accent);
  color: var(--rcc-white);
  font-family: var(--rcc-fl);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
}

.rcc-dcard__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rcc-border);
}
.rcc-dcard__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--rcc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rcc-accent);
}
.rcc-dcard--current .rcc-dcard__icon { background: var(--rcc-light); }
.rcc-dcard__icon svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-dcard__title {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 18px;
  color: var(--rcc-navy);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.rcc-dcard__price {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 600;
  color: var(--rcc-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 0;
}
.rcc-dcard__price strong {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 14px;
  color: var(--rcc-navy);
  text-transform: none;
  letter-spacing: -0.2px;
}

.rcc-dcard__when {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  color: var(--rcc-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.rcc-dcard__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.rcc-dcard__list li {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rcc-text);
  position: relative;
  padding-left: 22px;
}
.rcc-dcard__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rcc-accent);
}
.rcc-dcard__list strong { color: var(--rcc-dark); font-weight: 700; }

.rcc-dcard__cta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rcc-border);
}
.rcc-dcard__cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 13px;
  color: var(--rcc-accent);
  text-decoration: none;
  transition: gap .18s, color .15s;
}
.rcc-dcard__cta a::after {
  content: '→';
  transition: transform .18s;
}
.rcc-dcard__cta a:hover {
  color: var(--rcc-navy);
}
.rcc-dcard__cta a:hover::after { transform: translateX(3px); }
.rcc-dcard--current .rcc-dcard__cta a { color: var(--rcc-gray); cursor: default; }
.rcc-dcard--current .rcc-dcard__cta a::after { content: '✓'; }
.rcc-dcard--current .rcc-dcard__cta a:hover { color: var(--rcc-gray); }
.rcc-dcard--current .rcc-dcard__cta a:hover::after { transform: none; }

@media (max-width: 1100px) {
  .rcc-decision-trio { grid-template-columns: 1fr; gap: 16px; }
  .rcc-dcard { padding: 24px; }
}

/* ════════════════════════════════════════════════════════
   26. INFO COLUMNS — three-column responsibility blocks
   (We handle / You control / Won't do)
   Each column on a different shade of blue, with a colored
   top border to signal type (success / accent / warn).
   ════════════════════════════════════════════════════════ */
.rcc-info-col {
  border-radius: var(--rcc-r-lg);
  padding: 28px;
  border: 1.5px solid var(--rcc-border);
  display: flex;
  flex-direction: column;
}

/* Three blue shades, lightest to deepest */
.rcc-info-col--ok {
  background: #F0F5FF;
  border-color: #D6E4FF;
  border-top: 4px solid var(--rcc-success);
}
.rcc-info-col--neutral {
  background: #DCE6FF;
  border-color: #B8CCFF;
  border-top: 4px solid var(--rcc-accent);
}
.rcc-info-col--alert {
  background: #C2D2FF;
  border-color: #9DB5FF;
  border-top: 4px solid var(--rcc-warn);
}

/* Header row: icon + title */
.rcc-info-col__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.rcc-info-col__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--rcc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-info-col__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-info-col--ok      .rcc-info-col__icon { color: var(--rcc-success); }
.rcc-info-col--neutral .rcc-info-col__icon { color: var(--rcc-accent); }
.rcc-info-col--alert   .rcc-info-col__icon { color: var(--rcc-warn); }

.rcc-info-col__head h4 {
  margin: 0;
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--rcc-navy);
}

/* Subtitle */
.rcc-info-col__sub {
  font-size: 14px;
  color: var(--rcc-text);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* List */
.rcc-info-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rcc-info-col li {
  font-size: 14px;
  line-height: 1.55;
  padding: 0 0 0 24px;
  position: relative;
  color: var(--rcc-text);
}
.rcc-info-col--ok      li::before { content: '✓'; color: var(--rcc-success); position: absolute; left: 4px; top: 0; font-weight: 800; font-size: 14px; }
.rcc-info-col--neutral li::before { content: '◆'; color: var(--rcc-accent);  position: absolute; left: 4px; top: 1px; font-size: 11px; }
.rcc-info-col--alert   li::before { content: '✕'; color: var(--rcc-warn);    position: absolute; left: 4px; top: 0; font-weight: 800; font-size: 14px; }
.rcc-info-col li strong { color: var(--rcc-dark); font-weight: 700; }

/* Compact CTA card inside info-col (e.g. "Talk to a human") */
.rcc-info-col__cta {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rcc-gray);
}
.rcc-info-col__cta p {
  margin: 0 0 4px;
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 13px;
  color: var(--rcc-dark);
}
.rcc-info-col__cta a {
  font-family: var(--rcc-fl);
  font-weight: 600;
  font-size: 13px;
  color: var(--rcc-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}
.rcc-info-col__cta a::after { content: '→'; transition: transform .15s; }
.rcc-info-col__cta a:hover { color: var(--rcc-navy); }
.rcc-info-col__cta a:hover::after { transform: translateX(2px); }

/* ════════════════════════════════════════════════════════
   27. CHOICES GRID — three "choose X if" callout cards
   ════════════════════════════════════════════════════════ */
.rcc-choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
.rcc-choice {
  background: var(--rcc-light);
  border: 1.5px solid var(--rcc-border);
  border-left: 3px solid var(--rcc-accent);
  border-radius: var(--rcc-r-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rcc-choice--us {
  background: var(--rcc-white);
  border-color: var(--rcc-accent);
  border-left: 3px solid var(--rcc-accent);
  box-shadow: var(--rcc-sh-sm);
}
.rcc-choice__label {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  color: var(--rcc-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rcc-choice__title {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 17px;
  color: var(--rcc-navy);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.rcc-choice__body {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rcc-text);
  margin: 0;
}
.rcc-choice__body strong { color: var(--rcc-dark); font-weight: 700; }

@media (max-width: 1100px) {
  .rcc-choices-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Ensure the comparison table's "us" column reads cleanly */
.rcc-table--compare thead th.rcc-table__col--us {
  background: var(--rcc-accent);
  color: var(--rcc-white);
  position: relative;
}
.rcc-table--compare thead th.rcc-table__col--us::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rcc-pale), var(--rcc-accent), var(--rcc-pale));
}

/* ════════════════════════════════════════════════════════
   28. FEATURE CARDS — fully responsive auto-fit grid
   ════════════════════════════════════════════════════════ */
.rcc-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.rcc-feature {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .25s, box-shadow .25s, transform .2s;
  position: relative;
  overflow: hidden;
}
.rcc-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rcc-accent), var(--rcc-navy));
  opacity: 0;
  transition: opacity .25s;
}
.rcc-feature:hover {
  border-color: var(--rcc-accent);
  box-shadow: var(--rcc-sh-md);
  transform: translateY(-3px);
}
.rcc-feature:hover::before { opacity: 1; }

.rcc-feature__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--rcc-light);
  color: var(--rcc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-feature__icon svg {
  width: 26px; height: 26px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rcc-feature__title {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 17px;
  color: var(--rcc-dark);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.rcc-feature__body {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rcc-text);
  margin: 0;
}
.rcc-feature__body strong {
  color: var(--rcc-dark);
  font-weight: 700;
}

.rcc-feature__metric {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  color: var(--rcc-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rcc-border);
}

/* Sub-headline for the abundance signal ("Every plan ships with the full stack") */
.rcc-section-head .rcc-features-tagline {
  display: inline-block;
  background: var(--rcc-light);
  border: 1px solid var(--rcc-border);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--rcc-fl);
  font-size: 12px;
  font-weight: 600;
  color: var(--rcc-navy);
  letter-spacing: 0.04em;
  margin-top: 18px;
}

/* ════════════════════════════════════════════════════════
   29. SLA EQUATION — big "1 hour = 5 hours" math block
   ════════════════════════════════════════════════════════ */
.rcc-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: 0 0 52px;
}
.rcc-eq-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 48px;
  border-radius: var(--rcc-r-lg);
  min-width: 160px;
}
.rcc-eq-box--neutral {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.rcc-eq-box--accent {
  background: rgba(79, 128, 255, 0.10);
  border: 1px solid rgba(79, 128, 255, 0.30);
}
.rcc-eq-num {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 88px);
  color: var(--rcc-white);
  line-height: 1;
  letter-spacing: -2px;
}
.rcc-eq-num--accent { color: var(--rcc-accent); }
.rcc-eq-label {
  font-family: var(--rcc-fl);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 12px;
}
.rcc-eq-label--accent { color: var(--rcc-pale); }
.rcc-eq-equals {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--rcc-accent);
  padding: 0 28px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════
   30. DARK CARDS — info cards for dark sections
   ════════════════════════════════════════════════════════ */
.rcc-darkcard {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--rcc-r-md);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .2s, border-color .2s;
}
.rcc-darkcard:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(79, 128, 255, 0.4);
}
.rcc-darkcard__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(79, 128, 255, 0.12);
  color: var(--rcc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-darkcard__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-darkcard__title {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 17px;
  color: var(--rcc-white);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.rcc-darkcard__body {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.rcc-darkcard__body strong { color: var(--rcc-white); font-weight: 700; }

/* ════════════════════════════════════════════════════════
   31. DARK COMPARE STRIP — side-by-side compare on dark sections
   ════════════════════════════════════════════════════════ */
.rcc-darkcompare {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--rcc-r-md);
  padding: 28px 36px;
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.rcc-darkcompare__col { flex: 1; min-width: 220px; }
.rcc-darkcompare__label {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.rcc-darkcompare__label--muted { color: rgba(255, 255, 255, 0.5); }
.rcc-darkcompare__label--bright { color: var(--rcc-pale); }
.rcc-darkcompare__text {
  font-family: var(--rcc-fb);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.rcc-darkcompare__text--muted { color: rgba(255, 255, 255, 0.55); }
.rcc-darkcompare__text--bright { color: var(--rcc-white); }
.rcc-darkcompare__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .rcc-equation { gap: 8px; }
  .rcc-eq-box { padding: 24px 32px; }
  .rcc-eq-equals { padding: 0 12px; }
  .rcc-darkcompare { padding: 24px 22px; flex-direction: column; gap: 24px; }
  .rcc-darkcompare__divider { width: 100%; height: 1px; }
}

/* ════════════════════════════════════════════════════════
   32. CLOSING CTA — final conversion section
   ════════════════════════════════════════════════════════ */
.rcc-closing {
  background: var(--rcc-light);
  border-radius: 28px;
  padding: 64px 72px;
  position: relative;
  overflow: hidden;
}
.rcc-closing::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(79, 128, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.rcc-closing__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.rcc-closing__copy { display: flex; flex-direction: column; gap: 18px; }

.rcc-closing__title {
  font-family: var(--rcc-fh);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--rcc-deep);
  margin: 0;
}
.rcc-closing__title em {
  font-style: normal;
  color: var(--rcc-accent);
  display: block;
}

.rcc-closing__price-line {
  font-family: var(--rcc-fb);
  font-size: 18px;
  color: var(--rcc-text);
  margin: 0;
  line-height: 1.55;
}
.rcc-closing__price-line strong {
  font-family: var(--rcc-fh);
  font-weight: 800;
  color: var(--rcc-navy);
}

.rcc-closing__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 4px 0 8px;
}
.rcc-closing__signal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rcc-fb);
  font-size: 14px;
  color: var(--rcc-text);
  font-weight: 500;
}
.rcc-closing__signal svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--rcc-accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-closing__signal strong {
  color: var(--rcc-navy);
  font-weight: 700;
}

.rcc-closing__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.rcc-closing__actions .rcc-btn {
  padding: 16px 36px;
  font-size: 16px;
}

.rcc-closing__finepr {
  font-family: var(--rcc-fl);
  font-size: 12px;
  color: var(--rcc-gray);
  margin: 4px 0 0;
}

.rcc-closing__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcc-closing__visual img {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(28, 56, 154, 0.18));
  animation: rcc-float 5s ease-in-out infinite;
}

@media (max-width: 1100px) {
  .rcc-closing { padding: 48px 40px; }
  .rcc-closing__inner { grid-template-columns: 1fr; gap: 32px; }
  .rcc-closing__visual { order: -1; }
  .rcc-closing__visual img { max-width: 280px; }
}
@media (max-width: 600px) {
  .rcc-closing { padding: 40px 24px; border-radius: 20px; }
  .rcc-closing__actions .rcc-btn { width: 100%; padding: 14px 24px; }
}

/* ════════════════════════════════════════════════════════
   34. REVIEWS GRID — testimonial cards with sources
   ════════════════════════════════════════════════════════ */
.rcc-reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.rcc-review {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.rcc-review::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rcc-accent), var(--rcc-navy));
  opacity: 0;
  transition: opacity .25s;
}
.rcc-review:hover {
  border-color: var(--rcc-accent);
  box-shadow: var(--rcc-sh-md);
  transform: translateY(-3px);
}
.rcc-review:hover::before { opacity: 1; }

/* Featured review spans 2 columns */
.rcc-review--featured {
  grid-column: span 2;
  background: linear-gradient(140deg, #F4F7FF 0%, #EBF0FF 100%);
  border-color: #C5D5FF;
}
.rcc-review--featured::before { opacity: 1; }

/* Quote mark (decorative, top-right) */
.rcc-review__qmark {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 28px;
  height: 28px;
  color: var(--rcc-accent);
  opacity: 0.18;
  pointer-events: none;
}
.rcc-review--featured .rcc-review__qmark {
  width: 40px;
  height: 40px;
  opacity: 0.15;
  top: 20px;
  right: 24px;
}
.rcc-review__qmark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Stars row */
.rcc-review__stars {
  display: inline-flex;
  gap: 2px;
  color: #FBBF24;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

/* Quote text */
.rcc-review__text {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.7;
  color: var(--rcc-text);
  margin: 0;
  flex: 1;
}
.rcc-review--featured .rcc-review__text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--rcc-dark);
}

/* Author row */
.rcc-review__author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rcc-border);
}
.rcc-review--featured .rcc-review__author {
  border-top-color: rgba(28, 56, 154, 0.10);
}
.rcc-review__name {
  font-family: var(--rcc-fs);
  font-weight: 700;
  font-size: 13px;
  color: var(--rcc-navy);
}

/* Source badge */
.rcc-review__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--rcc-fl);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--rcc-light);
  color: var(--rcc-navy);
  border: 1px solid var(--rcc-border);
}
.rcc-review__source svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.rcc-review__source--tp { color: #00A77D; border-color: rgba(0, 167, 125, 0.25); background: #F0FAF7; }
.rcc-review__source--gg { color: #3355BB; border-color: rgba(51, 85, 187, 0.25); background: #F2F5FF; }

/* Verified rating callout (right side of first row) */
.rcc-review-rating {
  background: linear-gradient(145deg, var(--rcc-navy) 0%, var(--rcc-deep) 100%);
  color: var(--rcc-white);
  border-radius: var(--rcc-r-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-column: span 2;
  position: relative;
  overflow: hidden;
}
.rcc-review-rating::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(79, 128, 255, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.rcc-review-rating > * { position: relative; z-index: 1; }
.rcc-review-rating__eyebrow {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--rcc-pale);
}
.rcc-review-rating__score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.rcc-review-rating__num {
  font-family: var(--rcc-fh);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--rcc-white);
  letter-spacing: -2px;
}
.rcc-review-rating__outof {
  font-family: var(--rcc-fb);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
}
.rcc-review-rating__stars {
  display: inline-flex;
  gap: 3px;
  color: #FBBF24;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.rcc-review-rating__count {
  font-family: var(--rcc-fb);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
.rcc-review-rating__count strong {
  color: var(--rcc-white);
  font-weight: 700;
}
.rcc-review-rating__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.rcc-review-rating__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-family: var(--rcc-fl);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--rcc-white);
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.rcc-review-rating__btn:hover {
  background: rgba(79, 128, 255, 0.25);
  border-color: rgba(79, 128, 255, 0.45);
  color: var(--rcc-white);
  text-decoration: none;
}
.rcc-review-rating__btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1100px) {
  .rcc-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .rcc-review--featured,
  .rcc-review-rating { grid-column: span 2; }
}
@media (max-width: 700px) {
  .rcc-reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  .rcc-review--featured,
  .rcc-review-rating { grid-column: span 1; }
  .rcc-review-rating__num { font-size: 52px; }
}

/* ════════════════════════════════════════════════════════
   35. ARCHITECTURE COMPARE — light AND dark variants
   ════════════════════════════════════════════════════════ */
.rcc-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.rcc-arch-col {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-md);
  padding: 18px 20px;
}
.rcc-arch-col--us {
  background: linear-gradient(140deg, #F4F7FF 0%, #EBF0FF 100%);
  border-color: #B8CCFF;
  border-top: 4px solid var(--rcc-accent);
}
.rcc-arch-col__title {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rcc-gray);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rcc-border);
}
.rcc-arch-col--us .rcc-arch-col__title {
  color: var(--rcc-navy);
  border-bottom-color: rgba(28, 56, 154, 0.15);
}
.rcc-arch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rcc-fb);
  font-size: 14px;
  padding: 8px 0;
  line-height: 1.4;
}
.rcc-arch-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rcc-arch-row__detail {
  font-family: var(--rcc-fl);
  font-size: 11px;
  color: var(--rcc-gray);
  margin-left: auto;
  font-weight: 500;
}
.rcc-arch-row--heavy .rcc-arch-row__dot { background: var(--rcc-mute); }
.rcc-arch-row--heavy span:not(.rcc-arch-row__detail):not(.rcc-arch-row__badge) {
  color: var(--rcc-mute);
  text-decoration: line-through;
}
.rcc-arch-row--heavy .rcc-arch-row__detail {
  color: var(--rcc-mute);
  text-decoration: line-through;
}
.rcc-arch-row--rc .rcc-arch-row__dot { background: var(--rcc-accent); }
.rcc-arch-row--rc span:not(.rcc-arch-row__detail):not(.rcc-arch-row__badge) {
  color: var(--rcc-accent);
  font-weight: 700;
}
.rcc-arch-row--yours .rcc-arch-row__dot { background: var(--rcc-success); }
.rcc-arch-row--yours span:not(.rcc-arch-row__detail):not(.rcc-arch-row__badge) {
  color: var(--rcc-dark);
}
.rcc-arch-row--yours .rcc-arch-row__detail {
  color: var(--rcc-success);
  font-weight: 700;
}
.rcc-arch-row__badge {
  font-family: var(--rcc-fl);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--rcc-accent);
  color: var(--rcc-white);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* DARK MODE OVERRIDES for arch-grid (when inside .rcc-section--dark) */
.rcc-section--dark .rcc-arch-col {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(79, 128, 255, 0.15);
}
.rcc-section--dark .rcc-arch-col--us {
  background: rgba(79, 128, 255, 0.07);
  border-color: rgba(79, 128, 255, 0.30);
  border-top: 4px solid var(--rcc-accent);
}
.rcc-section--dark .rcc-arch-col__title {
  color: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(79, 128, 255, 0.12);
}
.rcc-section--dark .rcc-arch-col--us .rcc-arch-col__title {
  color: var(--rcc-pale);
  border-bottom-color: rgba(79, 128, 255, 0.25);
}
.rcc-section--dark .rcc-arch-row--heavy .rcc-arch-row__dot { background: rgba(255, 255, 255, 0.20); }
.rcc-section--dark .rcc-arch-row--heavy span:not(.rcc-arch-row__detail):not(.rcc-arch-row__badge) {
  color: rgba(255, 255, 255, 0.25);
}
.rcc-section--dark .rcc-arch-row--heavy .rcc-arch-row__detail {
  color: rgba(255, 255, 255, 0.25);
}
.rcc-section--dark .rcc-arch-row--yours span:not(.rcc-arch-row__detail):not(.rcc-arch-row__badge) {
  color: rgba(255, 255, 255, 0.85);
}

/* ════════════════════════════════════════════════════════
   36. PRICING NOTE — light AND dark variants
   ════════════════════════════════════════════════════════ */
.rcc-pricing-note {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-left: 4px solid var(--rcc-success);
  border-radius: var(--rcc-r-md);
  padding: 16px 20px;
  margin: 0 0 24px;
  font-family: var(--rcc-fb);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rcc-text);
}
.rcc-pricing-note strong { color: var(--rcc-dark); font-weight: 700; }
.rcc-pricing-note__free {
  color: var(--rcc-success);
  font-weight: 800;
}

.rcc-section--dark .rcc-pricing-note {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(79, 128, 255, 0.18);
  border-left: 4px solid #2EE187;
  color: rgba(255, 255, 255, 0.78);
}
.rcc-section--dark .rcc-pricing-note strong {
  color: var(--rcc-white);
}
.rcc-section--dark .rcc-pricing-note__free {
  color: #2EE187;
}

/* ════════════════════════════════════════════════════════
   37. BENEFIT PILLS — light AND dark variants
   ════════════════════════════════════════════════════════ */
.rcc-benefits-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.rcc-benefit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rcc-white);
  border: 1px solid var(--rcc-border);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: var(--rcc-text);
}
.rcc-benefit-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--rcc-accent);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-benefit-pill strong {
  color: var(--rcc-navy);
  font-weight: 700;
}

.rcc-section--dark .rcc-benefit-pill {
  background: rgba(79, 128, 255, 0.08);
  border-color: rgba(79, 128, 255, 0.20);
  color: rgba(255, 255, 255, 0.70);
}
.rcc-section--dark .rcc-benefit-pill strong {
  color: var(--rcc-white);
}
.rcc-section--dark .rcc-benefit-pill svg {
  stroke: var(--rcc-accent);
}

/* ════════════════════════════════════════════════════════
   38. PANEL VISUAL — image column (now with dark bg glow)
   ════════════════════════════════════════════════════════ */
.rcc-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 480px;
}
.rcc-panel-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 95%;
  background: radial-gradient(circle, rgba(79, 128, 255, 0.25) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.rcc-section--dark .rcc-panel-visual::before {
  background: radial-gradient(circle, rgba(79, 128, 255, 0.35) 0%, transparent 65%);
}
.rcc-panel-visual img,
.rcc-panel-visual svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 32px 64px rgba(28, 56, 154, 0.25));
  border-radius: var(--rcc-r-lg);
}
.rcc-section--dark .rcc-panel-visual img,
.rcc-section--dark .rcc-panel-visual svg {
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.45));
  border: 1px solid rgba(79, 128, 255, 0.22);
}

@media (max-width: 1100px) {
  .rcc-panel-visual { min-height: auto; }
  .rcc-panel-visual img,
  .rcc-panel-visual svg { max-width: 600px; }
}
@media (max-width: 900px) {
  .rcc-arch-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .rcc-panel-visual img,
  .rcc-panel-visual svg { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════
   39. PANEL DETAILS — light AND dark variants
   ════════════════════════════════════════════════════════ */
.rcc-panel-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}
.rcc-panel-detail {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .2s, border-color .2s;
}
.rcc-panel-detail__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--rcc-light);
  color: var(--rcc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.rcc-panel-detail__icon svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-panel-detail__title {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 16px;
  color: var(--rcc-navy);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.rcc-panel-detail__body {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rcc-text);
  margin: 0;
}
.rcc-panel-detail__body strong {
  color: var(--rcc-dark);
  font-weight: 700;
}
.rcc-panel-detail__meta {
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  color: var(--rcc-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rcc-border);
}

.rcc-section--dark .rcc-panel-detail {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(79, 128, 255, 0.15);
}
.rcc-section--dark .rcc-panel-detail:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(79, 128, 255, 0.4);
}
.rcc-section--dark .rcc-panel-detail__icon {
  background: rgba(79, 128, 255, 0.15);
  color: var(--rcc-accent);
}
.rcc-section--dark .rcc-panel-detail__title {
  color: var(--rcc-white);
}
.rcc-section--dark .rcc-panel-detail__body {
  color: rgba(255, 255, 255, 0.72);
}
.rcc-section--dark .rcc-panel-detail__body strong {
  color: var(--rcc-white);
}
.rcc-section--dark .rcc-panel-detail__meta {
  color: var(--rcc-accent);
  border-top-color: rgba(79, 128, 255, 0.18);
}

@media (max-width: 1100px) {
  .rcc-panel-details { grid-template-columns: 1fr; gap: 14px; }
}

/* ════════════════════════════════════════════════════════
   40. ELEMENTOR PARENT CONTAINER FIX — full-bleed sections
   Removes default 10px padding + 20px gap from page-level
   wrapper so .rcc-section elements render edge-to-edge.
   ════════════════════════════════════════════════════════ */
.e-con-full.e-flex.e-con.e-parent {
  padding: 0 !important;
  gap: 0 !important;
}

/* Sticky variant of the billing bar — used on /pricing for the master toggle */
.rcc-billing-bar--sticky {
  position: sticky;
  top: 80;
  z-index: 50;
  margin-bottom: 32px;
  /* Keep the existing .rcc-billing-bar styling underneath */
}

/* Mobile: ensure sticky toggle doesn't overlap header if the site has a fixed header */
@media (max-width: 768px) {
  .rcc-billing-bar--sticky {
    top: 60px; /* Adjust this based on RC site's mobile header height */
  }
}

/* ════════════════════════════════════════════════════════
   41. HOMEPAGE TRUST BAR :: 4-up dark strip
   Lives directly under the dark hero on the homepage.
   Solid --rcc-deep background (no grid pattern) so it
   visually layers under the gradient hero above it.
   ════════════════════════════════════════════════════════ */
.rcc-trustbar-section {
  background: var(--rcc-deep);
  padding: 28px 24px;
  border-top: 1px solid rgba(79, 128, 255, 0.18);
}
.rcc-trustbar {
  max-width: var(--rcc-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.rcc-trustbar__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  position: relative;
}
.rcc-trustbar__item + .rcc-trustbar__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 44px;
  background: rgba(79, 128, 255, 0.20);
}
.rcc-trustbar__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(79, 128, 255, 0.10);
  color: var(--rcc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-trustbar__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-trustbar__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rcc-trustbar__label {
  font-family: var(--rcc-fh);
  font-weight: 800;
  font-size: 16px;
  color: var(--rcc-white);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.rcc-trustbar__sub {
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .rcc-trustbar { grid-template-columns: 1fr 1fr; }
  .rcc-trustbar__item { padding: 16px 20px; }
  .rcc-trustbar__item:nth-child(3)::before { display: none; }
}
@media (max-width: 600px) {
  .rcc-trustbar { grid-template-columns: 1fr; }
  .rcc-trustbar__item { padding: 14px 8px; }
  .rcc-trustbar__item + .rcc-trustbar__item::before {
    width: 100%;
    height: 1px;
    top: 0;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════
   42. COMPACT FEATURE ITEM :: horizontal icon + copy
   For tight side-by-side layouts where vertical card grids
   would push the section too tall (e.g. 6 features next to
   a terminal demo). Light backgrounds only.

   ⚠  REPLACE the previous Module 42 with this version.
   Icon container, SVG size, and stroke weight all bumped
   so the icons carry visual weight against bold titles.
   ════════════════════════════════════════════════════════ */
.rcc-feat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin: 8px 0 36px;
}
.rcc-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.rcc-feat-item__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--rcc-light);
  color: var(--rcc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcc-feat-item__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcc-feat-item__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.rcc-feat-item__title {
  font-family: var(--rcc-fh);
  font-weight: 700;
  font-size: 17px;
  color: var(--rcc-navy);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 0;
}
.rcc-feat-item__body {
  font-family: var(--rcc-fb);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rcc-gray);
  margin: 0;
}

@media (max-width: 700px) {
  .rcc-feat-list { grid-template-columns: 1fr; gap: 20px; }
  .rcc-feat-item__icon { width: 48px; height: 48px; }
  .rcc-feat-item__icon svg { width: 26px; height: 26px; }
}

/* ════════════════════════════════════════════════════════
   43. TERMINAL ANIMATION :: provisioning demo
   Self-contained dark terminal that animates a provision
   flow. Pairs with inline JS in the section markup.
   Uses rc- prefix (not rcc-) to mark it as a distinct
   widget separate from the design-token system.
   ════════════════════════════════════════════════════════ */
.rc-terminal {
  background: #0a1628;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(1, 22, 64, 0.22);
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  box-sizing: border-box;
}
.rc-terminal-bar {
  background: #0f1e35;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.rc-dot.red    { background: #FF5F57; }
.rc-dot.yellow { background: #FEBC2E; }
.rc-dot.green  { background: #28C840; }
.rc-terminal-title {
  font-size: 12px;
  color: #3d5a8a;
  margin-left: 8px;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-terminal-body {
  padding: 20px 24px 24px;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.85;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Table layout */
.rc-t {
  width: 100%;
  border-collapse: collapse;
  border: none;
  table-layout: auto;
}
.rc-t td {
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1.85;
  vertical-align: top;
}
.rc-t .tc {
  width: 18px;
  color: #4F80FF;
  font-weight: bold;
  white-space: nowrap;
  padding-right: 8px;
}
.rc-t .tl {
  color: #8aaad4;
  padding-right: 16px;
  white-space: nowrap;
}
.rc-t .tv {
  color: #F2B01E;
  white-space: nowrap;
  text-align: right;
}

/* Animation */
.rc-tline {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rc-tline.rc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Row types */
.rc-comment td { color: #3d5a8a; font-style: italic; }
.rc-blank   td { line-height: 0.8; }
.rc-divider td { padding: 4px 0; }
.rc-divider hr { border: none; border-top: 1px solid #1a2e4a; margin: 0; }
.rc-done    td { color: #ffffff; font-weight: 700; }

/* Cursor */
.rc-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: #4F80FF;
  vertical-align: middle;
  margin-left: 1px;
  animation: rc-blink 1s step-end infinite;
}
@keyframes rc-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Stats footer */
.rc-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2px;
}
.rc-stats-table td {
  border: none;
  padding: 0;
  background: transparent;
  line-height: 1.7;
}
.rc-stat-label { color: #3d5a8a; }
.rc-stat-val   { color: #4F80FF; font-weight: 700; text-align: right; }

/* Responsive */
@media (max-width: 900px) {
  .rc-terminal-body { font-size: clamp(11px, 1.8vw, 14px); }
}
@media (max-width: 600px) {
  .rc-terminal-body { padding: 14px 16px 18px; font-size: 12px; line-height: 1.7; }
  .rc-t .tl { white-space: normal; word-break: break-word; padding-right: 8px; }
  .rc-t .tv { white-space: normal; word-break: break-word; font-size: 11px; }
}
@media (max-width: 400px) {
  .rc-t .tv { display: none; }
  .rc-terminal-body { font-size: 11px; padding: 12px 12px 14px; }
  .rc-terminal-bar  { padding: 10px 12px; }
  .rc-dot { width: 10px; height: 10px; }
}

/* ════════════════════════════════════════════════════════
   44. FINAL CTA STRIP :: centered conversion block
   Pairs with .rcc-section--dark. Use as the last section
   before the footer for the page's main conversion ask.
   ════════════════════════════════════════════════════════ */
.rcc-cta-strip {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Pulsing eyebrow pill */
.rcc-cta-strip__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 128, 255, 0.10);
  border: 1px solid rgba(79, 128, 255, 0.25);
  color: var(--rcc-accent);
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.rcc-cta-strip__pulse {
  width: 7px;
  height: 7px;
  background: var(--rcc-accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: rcc-cta-pulse 2s infinite;
}
@keyframes rcc-cta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(1.8); }
}

/* Headline override :: bigger than the default .rcc-h2 since
   this is the page's last conversion moment */
.rcc-cta-strip .rcc-h2 {
  color: var(--rcc-white);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 20px;
}
.rcc-cta-strip .rcc-h2 em {
  color: var(--rcc-accent);
  font-style: normal;
}

/* Sub copy */
.rcc-cta-strip__sub {
  font-family: var(--rcc-fb);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(168, 196, 255, 0.55);
  margin: 0 0 36px;
}
.rcc-cta-strip__sub strong {
  color: var(--rcc-pale);
  font-weight: 600;
}

/* Centered button group */
.rcc-cta-strip__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 32px;
}

/* Trust row at bottom */
.rcc-cta-strip__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.rcc-cta-strip__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  padding: 4px 12px;
}
.rcc-cta-strip__trust li::before {
  content: '\2713';
  color: var(--rcc-accent);
  font-weight: 700;
  font-size: 12px;
}
.rcc-cta-strip__trust li:not(:last-child)::after {
  content: '\00B7';
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  margin-left: 16px;
  line-height: 0;
}

@media (max-width: 640px) {
  .rcc-cta-strip__actions { flex-direction: column; width: 100%; }
  .rcc-cta-strip__actions .rcc-btn { width: 100%; }
  .rcc-cta-strip__trust { flex-direction: column; gap: 6px; }
  .rcc-cta-strip__trust li:not(:last-child)::after { display: none; }
}

/* ════════════════════════════════════════════════════════
   45. TECH STACK CAROUSEL :: scrolling wordmark bar
   Horizontal infinite-scroll carousel of partner / tech
   wordmarks. Pure CSS animation, no JS.
   IMPORTANT :: HTML must duplicate the full item list inside
   the track so the loop appears seamless.

   ⚠  REPLACE the previous Module 45 with this version.
   Wordmarks are now muted gray (not deep navy) so the row
   reads as supporting credibility rather than dominating.
   Vertical gradient separators sit between items.
   ════════════════════════════════════════════════════════ */
.rcc-stack-section {
  background: var(--rcc-white);
  padding: 56px 0;
  border-top: 1px solid var(--rcc-border);
  border-bottom: 1px solid var(--rcc-border);
  overflow: hidden;
  position: relative;
}

/* Edge fade gradients on left + right so items appear/disappear softly */
.rcc-stack-section::before,
.rcc-stack-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.rcc-stack-section::before {
  left: 0;
  background: linear-gradient(to right, var(--rcc-white) 0%, transparent 100%);
}
.rcc-stack-section::after {
  right: 0;
  background: linear-gradient(to left, var(--rcc-white) 0%, transparent 100%);
}

/* Section eyebrow label */
.rcc-stack-label {
  display: block;
  text-align: center;
  font-family: var(--rcc-fl);
  font-size: 12px;
  font-weight: 600;
  color: var(--rcc-gray);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 32px;
}

/* Track wrapper hides overflow so the moving track stays inside */
.rcc-stack-track-wrap {
  overflow: hidden;
}

/* The moving track. Width is content-driven so the keyframe
   translates exactly half (= one full set) to seamlessly loop.
   Note :: gap is 0; spacing between items comes from item padding
   so the gradient separators sit cleanly in that padding. */
.rcc-stack-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: rcc-stack-scroll 50s linear infinite;
}
.rcc-stack-track:hover {
  animation-play-state: paused;
}
@keyframes rcc-stack-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual wordmark item :: muted gray default, navy on hover.
   Each item carries its own right-edge gradient separator so the
   loop seam stays clean even at the wrap point. */
.rcc-stack-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
  padding: 0 28px;
  position: relative;
  transition: transform 0.25s ease;
}
.rcc-stack-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(79, 128, 255, 0.28) 50%,
    transparent 100%
  );
  pointer-events: none;
}
.rcc-stack-item:hover {
  transform: translateY(-2px);
}

.rcc-stack-item__name {
  font-family: var(--rcc-fh);
  font-size: 20px;
  font-weight: 700;
  color: var(--rcc-gray);
  line-height: 1.2;
  letter-spacing: -0.3px;
  transition: color 0.25s ease;
}
.rcc-stack-item:hover .rcc-stack-item__name {
  color: var(--rcc-navy);
}

.rcc-stack-item__sub {
  font-family: var(--rcc-fb);
  font-size: 11px;
  font-weight: 500;
  color: var(--rcc-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  transition: color 0.25s ease;
}
.rcc-stack-item:hover .rcc-stack-item__sub {
  color: var(--rcc-accent);
}

@media (max-width: 600px) {
  .rcc-stack-section { padding: 40px 0; }
  .rcc-stack-item { padding: 0 20px; }
  .rcc-stack-item::after { height: 28px; }
  .rcc-stack-item__name { font-size: 16px; }
  .rcc-stack-item__sub { font-size: 10px; }
  .rcc-stack-section::before,
  .rcc-stack-section::after { width: 60px; }
}

/* ════════════════════════════════════════════════════════
   46. SOCIAL PROOF STATS :: 4-up stat grid
   Light-blue tinted section with grid overlay + center glow.
   Each stat :: gradient icon box, big number, descriptive label.
   ════════════════════════════════════════════════════════ */

/* Section wrapper */
.rcc-stats-section {
  background: #f0f5ff;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}

/* Subtle grid overlay */
.rcc-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 128, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 128, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Soft center glow */
.rcc-stats-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(79, 128, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Eyebrow above the stats */
.rcc-stats-eyebrow {
  text-align: center;
  font-family: var(--rcc-fl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rcc-accent);
  margin: 0 0 52px;
  position: relative;
  z-index: 1;
}

/* Stat grid */
.rcc-stats-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

/* Each stat */
.rcc-stat-item {
  padding: 0 32px;
  position: relative;
  text-align: center;
}

/* Vertical dividers between items */
.rcc-stat-item + .rcc-stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(79, 128, 255, 0.2);
}

/* Gradient icon box */
.rcc-stat-item__icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--rcc-accent), var(--rcc-navy));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(79, 128, 255, 0.25);
  color: var(--rcc-white);
}
.rcc-stat-item__icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Big number */
.rcc-stat-item__number {
  font-family: var(--rcc-fh);
  font-size: 50px;
  font-weight: 900;
  color: var(--rcc-deep);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.rcc-stat-item__number span {
  color: var(--rcc-accent);
}

/* Descriptive label */
.rcc-stat-item__label {
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: #4a6a94;
  line-height: 1.45;
  max-width: 140px;
  margin: 0 auto;
}

/* RESPONSIVE */
@media (max-width: 860px) {
  .rcc-stats-section { padding: 60px 24px; }
  .rcc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 0; }
  .rcc-stat-item:nth-child(2n+1)::before { display: none; }
  .rcc-stat-item:nth-child(1),
  .rcc-stat-item:nth-child(2) {
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(79, 128, 255, 0.15);
  }
  .rcc-stat-item__number { font-size: 42px; }
}

@media (max-width: 480px) {
  .rcc-stats-section { padding: 48px 18px; }
  .rcc-stats-grid { gap: 36px 0; }
  .rcc-stat-item__number { font-size: 34px; }
  .rcc-stat-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }
  .rcc-stat-item__icon svg {
    width: 22px;
    height: 22px;
  }
  .rcc-stat-item__label { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════
   47. LINKABLE CARDS :: wrap any card in <a class="rcc-uc-link">
   so the entire card becomes clickable without inheriting the
   global div > a underline + accent-color rule. Use for
   solutions grids, navigational card decks, or any other case
   where the whole card should link out.
   ════════════════════════════════════════════════════════ */
a.rcc-uc-link,
[class*="rcc-"] :is(p, li, span, div, td) > a.rcc-uc-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border: none;
}
a.rcc-uc-link:hover,
[class*="rcc-"] :is(p, li, span, div, td) > a.rcc-uc-link:hover {
  color: inherit;
  text-decoration: none;
}

/* When wrapping .rcc-feature, let the inner card handle hover
   transforms so the link doesn't add a second outline */
a.rcc-uc-link:focus-visible {
  outline: 2px solid var(--rcc-accent);
  outline-offset: 4px;
  border-radius: var(--rcc-r-lg);
}

/* ════════════════════════════════════════════════════════
   48. EQUAL-HEIGHT GRID VARIANTS
   By default CSS Grid sizes each row to its tallest item,
   so 2-row grids end up with mismatched row heights when
   content varies. These modifiers force all rows to match
   the tallest row in the grid for a clean rectangular
   footprint.

   Usage:
     <div class="rcc-grid-4 rcc-grid-4--equal"> ... </div>
     <div class="rcc-grid-3 rcc-grid-3--equal"> ... </div>

   Pairs naturally with .rcc-feature cards (which already use
   margin-top: auto on the metric band) so the bottom band
   stays flush across all rows.
   ════════════════════════════════════════════════════════ */
.rcc-grid-3--equal,
.rcc-grid-4--equal {
  grid-auto-rows: 1fr;
}

/* Stretch every direct child to fill its grid cell */
.rcc-grid-3--equal > *,
.rcc-grid-4--equal > * {
  height: 100%;
}

/* When wrapping cards in .rcc-uc-link (Module 47), make sure
   the inner card also fills the link wrapper so the visual
   card stretches edge to edge of the cell */
.rcc-grid-3--equal > a.rcc-uc-link > .rcc-feature,
.rcc-grid-4--equal > a.rcc-uc-link > .rcc-feature,
.rcc-grid-3--equal > a.rcc-uc-link > .rcc-uc,
.rcc-grid-4--equal > a.rcc-uc-link > .rcc-uc {
  height: 100%;
}

/* ============================================================
   RC SHARED LIBRARY v1 : MODULES 49, 50, 51
   For: Compare-to-others section on CloudCubes product page
   ============================================================ */


/* --------------------------------------------------------------
   MODULE 49 : STAT-LED NARRATIVE CARDS
   .rcc-statcard, .rcc-statcard__stat, .rcc-statcard__stat-num,
   .rcc-statcard__stat-suffix, .rcc-statcard__stat-label,
   .rcc-statcard__title, .rcc-statcard__body,
   .rcc-statcard__logos, .rcc-statcard__logo-label,
   .rcc-statcard__logo-link
   -------------------------------------------------------------- */

.rcc-statcard {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-md);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  height: 100%;
}
.rcc-statcard:hover {
  border-color: var(--rcc-accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(28, 56, 154, 0.12);
}

.rcc-statcard__stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}
.rcc-statcard__stat-num {
  font-family: var(--rcc-fh);
  font-size: 78px;
  font-weight: 900;
  line-height: 1;
  color: var(--rcc-accent);
  letter-spacing: -0.025em;
}
.rcc-statcard__stat-suffix {
  font-family: var(--rcc-fh);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--rcc-accent);
  letter-spacing: -0.01em;
}
.rcc-statcard__stat-label {
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: var(--rcc-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.rcc-statcard__title {
  font-family: var(--rcc-fh);
  font-size: 22px;
  font-weight: 700;
  color: var(--rcc-dark);
  line-height: 1.3;
  margin-top: 14px;
}
.rcc-statcard__body {
  font-family: var(--rcc-fb);
  font-size: 15.5px;
  color: var(--rcc-text);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

.rcc-statcard__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--rcc-border);
}
.rcc-statcard__logo-label {
  font-family: var(--rcc-fb);
  font-size: 11.5px;
  color: var(--rcc-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 100%;
  margin-bottom: 4px;
}
.rcc-statcard__logo-link {
  font-family: var(--rcc-fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--rcc-text);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--rcc-bg-alt, #E6EFFF);
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.rcc-statcard__logo-link:hover {
  background: var(--rcc-accent);
  color: var(--rcc-white);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .rcc-statcard { padding: 32px 24px 26px; }
  .rcc-statcard__stat-num { font-size: 60px; }
  .rcc-statcard__stat-suffix { font-size: 26px; }
}


/* --------------------------------------------------------------
   MODULE 50 : HIGHLIGHTED COMPARE COLUMN
   Used inside .rcc-table--compare to make one column visually pop.
   Apply .rcc-col-highlight to the relevant <th> and every <td>
   in that column.
   -------------------------------------------------------------- */

.rcc-table--compare th.rcc-col-highlight {
  background: var(--rcc-accent);
  color: var(--rcc-white);
  font-weight: 800;
  font-size: 15px;
}
.rcc-table--compare td.rcc-col-highlight {
  background: rgba(79, 128, 255, 0.08);
  color: var(--rcc-dark);
  font-weight: 700;
}
.rcc-table--compare tbody tr:first-child td.rcc-col-highlight {
  border-top: 2px solid var(--rcc-accent);
}
.rcc-table--compare tbody tr:last-child td.rcc-col-highlight {
  border-bottom: 2px solid var(--rcc-accent);
}


/* --------------------------------------------------------------
   MODULE 51 : COMPARE LINKS STRIP (dark)
   Dark navy strip with white pill links. Used at the bottom of
   comparison sections to expose all individual compare pages.
   -------------------------------------------------------------- */

.rcc-comparestrip {
  background: var(--rcc-primary);
  border-radius: var(--rcc-r-lg);
  padding: 32px 36px;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.rcc-comparestrip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rcc-accent) 0%, #6FA0FF 100%);
}
.rcc-comparestrip__heading {
  font-family: var(--rcc-fh);
  font-size: 18px;
  font-weight: 700;
  color: var(--rcc-white);
  margin: 0;
  text-align: center;
  letter-spacing: -0.005em;
}
.rcc-comparestrip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
}
.rcc-comparestrip__link {
  font-family: var(--rcc-fb);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rcc-white);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.rcc-comparestrip__link:hover {
  background: var(--rcc-accent);
  border-color: var(--rcc-accent);
  color: var(--rcc-white);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .rcc-comparestrip { padding: 26px 22px; }
  .rcc-comparestrip__heading { font-size: 16px; }
}

/* ============================================================
   RC SHARED LIBRARY v1 : MODULES 52, 53
   Small utility additions for final CTA layouts
   ============================================================ */


/* --------------------------------------------------------------
   MODULE 52 : CENTERED ACTIONS ROW
   Modifier for the existing .rcc-actions flex container.
   Centers buttons horizontally inside the row.
   -------------------------------------------------------------- */

.rcc-actions--center {
  justify-content: center;
}


/* --------------------------------------------------------------
   MODULE 53 : CTA TRUST LINE
   Inline trust signal strip designed to sit below the buttons
   in a final CTA section on a dark background. Use middle-dot
   separators between items.
   -------------------------------------------------------------- */

.rcc-cta-trust {
  font-family: var(--rcc-fb);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 28px;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.rcc-cta-trust strong {
  color: var(--rcc-white);
  font-weight: 600;
}

@media (max-width: 640px) {
  .rcc-cta-trust { font-size: 13px; }
}

/* ============================================================
   RC SHARED LIBRARY v1 : MODULE 54
   PRODUCT LINE CARDS
   Large 2-up product cards for the /products hub page.
   Linkable cards (entire card is an anchor).
   ============================================================ */

.rcc-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.rcc-product-card {
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
  border-radius: var(--rcc-r-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.rcc-product-card:hover {
  border-color: var(--rcc-accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(28, 56, 154, 0.14);
  color: inherit;
  text-decoration: none;
}

.rcc-product-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rcc-product-card__eyebrow {
  font-family: var(--rcc-fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rcc-accent);
}

.rcc-product-card__name {
  font-family: var(--rcc-fh);
  font-size: 32px;
  font-weight: 800;
  color: var(--rcc-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.rcc-product-card__lead {
  font-family: var(--rcc-fb);
  font-size: 15.5px;
  color: var(--rcc-text);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.rcc-product-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  padding: 22px 0;
  border-top: 1px solid var(--rcc-border);
  border-bottom: 1px solid var(--rcc-border);
}

.rcc-product-card__spec {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rcc-product-card__spec-label {
  font-family: var(--rcc-fb);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rcc-gray);
}

.rcc-product-card__spec-value {
  font-family: var(--rcc-fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--rcc-dark);
}

.rcc-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rcc-product-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rcc-product-card__price-label {
  font-family: var(--rcc-fb);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rcc-gray);
}

.rcc-product-card__price-value {
  font-family: var(--rcc-fh);
  font-size: 24px;
  font-weight: 800;
  color: var(--rcc-navy);
  line-height: 1;
}

.rcc-product-card__price-value small {
  font-family: var(--rcc-fb);
  font-size: 14px;
  font-weight: 500;
  color: var(--rcc-gray);
}

.rcc-product-card__price-value--text {
  font-size: 18px;
}

.rcc-product-card__cta {
  font-family: var(--rcc-fh);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--rcc-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s;
  white-space: nowrap;
}

.rcc-product-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.rcc-product-card:hover .rcc-product-card__cta {
  gap: 10px;
}

.rcc-product-card:hover .rcc-product-card__cta svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .rcc-product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .rcc-product-card {
    padding: 32px 28px;
  }
  .rcc-product-card__name {
    font-size: 26px;
  }
}

@media (max-width: 500px) {
  .rcc-product-card {
    padding: 28px 22px;
  }
  .rcc-product-card__specs {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .rcc-product-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
/* ============================================================
   MODULE 55: COMPARE PAGE — VS HERO
   ============================================================ */
.rcc-vs-hero {
  background: linear-gradient(135deg, var(--rcc-deep) 0%, var(--rcc-navy) 100%);
  color: var(--rcc-white);
  padding: 80px 24px 96px;
  position: relative;
  overflow: hidden;
}
.rcc-vs-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rcc-accent) 0%, var(--rcc-comp-color) 100%);
}
.rcc-vs-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.rcc-vs-hero__crumb {
  font-family: var(--rcc-fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
.rcc-vs-hero__crumb a {
  color: inherit;
  text-decoration: none;
}
.rcc-vs-hero__crumb a:hover {
  color: var(--rcc-white);
}
.rcc-vs-hero__brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.rcc-vs-hero__brand {
  font-family: var(--rcc-fh);
  font-size: 22px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--rcc-r-md);
}
.rcc-vs-hero__brand--rc {
  background: var(--rcc-accent);
  color: var(--rcc-white);
}
.rcc-vs-hero__brand--comp {
  background: var(--rcc-comp-color);
  color: var(--rcc-white);
}
.rcc-vs-hero__vs {
  font-family: var(--rcc-fh);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: lowercase;
}
.rcc-vs-hero__h1 {
  font-family: var(--rcc-fh);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--rcc-white);
}
.rcc-vs-hero__verdict {
  font-family: var(--rcc-fb);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 780px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .rcc-vs-hero { padding: 56px 20px 64px; }
  .rcc-vs-hero__h1 { font-size: 32px; }
  .rcc-vs-hero__brand { font-size: 17px; padding: 8px 16px; }
  .rcc-vs-hero__verdict { font-size: 16px; }
}

/* ============================================================
   MODULE 56: COMPARE PAGE — DIFF GRID (good/bad cards)
   ============================================================ */
.rcc-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.rcc-diff {
  display: flex;
  gap: 16px;
  padding: 24px 26px;
  border-radius: var(--rcc-r-md);
  border: 1.5px solid;
}
.rcc-diff--bad {
  background: var(--rcc-bad-bg);
  border-color: var(--rcc-bad-border);
}
.rcc-diff--good {
  background: var(--rcc-good-bg);
  border-color: var(--rcc-good-border);
}
.rcc-diff__mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rcc-white);
}
.rcc-diff--bad .rcc-diff__mark  { background: var(--rcc-bad); }
.rcc-diff--good .rcc-diff__mark { background: var(--rcc-good); }
.rcc-diff__mark svg {
  width: 18px;
  height: 18px;
}
.rcc-diff__body h3 {
  font-family: var(--rcc-fh);
  font-size: 16px;
  font-weight: 700;
  color: var(--rcc-dark);
  margin: 0 0 6px;
  line-height: 1.3;
}
.rcc-diff__body p {
  font-family: var(--rcc-fb);
  font-size: 14.5px;
  color: var(--rcc-text);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 760px) {
  .rcc-diff-grid { grid-template-columns: 1fr; gap: 14px; }
  .rcc-diff { padding: 20px 22px; }
}

/* ============================================================
   MODULE 57: COMPARE PAGE — PRICE COMPARISON CARDS
   ============================================================ */
.rcc-pricecard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.rcc-pricecard {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--rcc-r-lg);
  border: 1.5px solid var(--rcc-border);
  background: var(--rcc-white);
  position: relative;
}
.rcc-pricecard--comp {
  border-color: var(--rcc-bad-border);
  background: var(--rcc-bad-bg);
}
.rcc-pricecard--star {
  border-color: var(--rcc-accent);
  border-width: 2px;
  box-shadow: 0 12px 36px rgba(28, 56, 154, 0.14);
}
.rcc-pricecard--star::before {
  content: "Best value";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rcc-accent);
  color: var(--rcc-white);
  font-family: var(--rcc-fh);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
}

.rcc-pricecard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.rcc-pricecard__brand {
  font-family: var(--rcc-fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 4px;
  color: var(--rcc-white);
}
.rcc-pricecard--comp .rcc-pricecard__brand { background: var(--rcc-comp-color); }
.rcc-pricecard--rc   .rcc-pricecard__brand,
.rcc-pricecard--star .rcc-pricecard__brand { background: var(--rcc-accent); }
.rcc-pricecard__tier {
  font-family: var(--rcc-fb);
  font-size: 12px;
  font-weight: 600;
  color: var(--rcc-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rcc-pricecard__specs {
  font-family: var(--rcc-fh);
  font-size: 17px;
  font-weight: 700;
  color: var(--rcc-dark);
  line-height: 1.3;
  margin: 0 0 10px;
}
.rcc-pricecard__sub {
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: var(--rcc-text);
  line-height: 1.55;
  margin: 0 0 22px;
}

.rcc-pricecard__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.rcc-pricecard__amt {
  font-family: var(--rcc-fh);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: var(--rcc-dark);
}
.rcc-pricecard--rc   .rcc-pricecard__amt,
.rcc-pricecard--star .rcc-pricecard__amt { color: var(--rcc-navy); }
.rcc-pricecard__mo {
  font-family: var(--rcc-fb);
  font-size: 13px;
  color: var(--rcc-gray);
  margin: 0 0 14px;
}
.rcc-pricecard__first {
  display: inline-block;
  font-family: var(--rcc-fb);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rcc-accent);
  background: var(--rcc-light);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}

.rcc-pricecard__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rcc-pricecard__list li {
  display: flex;
  gap: 9px;
  font-family: var(--rcc-fb);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rcc-text);
}
.rcc-pricecard__list .ico {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.rcc-pricecard--comp .rcc-pricecard__list .ico { color: var(--rcc-bad); }
.rcc-pricecard--rc   .rcc-pricecard__list .ico,
.rcc-pricecard--star .rcc-pricecard__list .ico { color: var(--rcc-good); }

.rcc-pricecard__note {
  font-family: var(--rcc-fb);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rcc-gray);
  padding-top: 14px;
  margin: 0;
  border-top: 1px solid var(--rcc-border);
}
.rcc-pricecard__saving {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rcc-fh);
  font-size: 13px;
  font-weight: 700;
  color: var(--rcc-good);
  padding-top: 14px;
  border-top: 1px solid var(--rcc-good-border);
}

.rcc-pricecard__list .ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rcc-pricecard__saving > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 980px) {
  .rcc-pricecard-grid { grid-template-columns: 1fr; gap: 18px; }
  .rcc-pricecard--star { order: -1; }
}

/* ============================================================
   MODULE 58: COMPARE PAGE — HONEST PICK (2-column lists)
   ============================================================ */
.rcc-honest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.rcc-honest__col {
  padding: 32px 30px;
  border-radius: var(--rcc-r-md);
  background: var(--rcc-white);
  border: 1.5px solid var(--rcc-border);
}
.rcc-honest__col--rc {
  background: var(--rcc-light);
  border-color: var(--rcc-accent);
}
.rcc-honest__title {
  font-family: var(--rcc-fh);
  font-size: 18px;
  font-weight: 700;
  color: var(--rcc-dark);
  margin: 0 0 18px;
  line-height: 1.3;
}
.rcc-honest__col--rc .rcc-honest__title { color: var(--rcc-navy); }
.rcc-honest__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rcc-honest__list li {
  display: flex;
  gap: 11px;
  font-family: var(--rcc-fb);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rcc-text);
}
.rcc-honest__list li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F80FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 760px) {
  .rcc-honest { grid-template-columns: 1fr; gap: 16px; }
  .rcc-honest__col { padding: 26px 24px; }
}

/* ============================================================
   MODULE 59: COMPARE PAGE — PERFORMANCE SIDE-BY-SIDE
   ============================================================ */
.rcc-perfcompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  gap: 0 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.rcc-perfcompare__side {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 16px 0;
}
.rcc-perfcompare__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--rcc-fh);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rcc-gray);
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--rcc-border);
}
.rcc-perfcompare__brand {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 4px;
  font-family: var(--rcc-fh);
  font-size: 12px;
  font-weight: 700;
  color: var(--rcc-white);
  letter-spacing: 0.05em;
}
.rcc-perfcompare__side--comp .rcc-perfcompare__brand { background: var(--rcc-comp-color); }
.rcc-perfcompare__side--rc   .rcc-perfcompare__brand { background: var(--rcc-accent); }

@media (max-width: 760px) {
  .rcc-perfcompare {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 36px;
  }
  .rcc-perfcompare__side {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    grid-row: auto;
    gap: 16px;
  }
}

/* ============================================================
   MODULE 59: COMPARE PAGE — PERFORMANCE SIDE-BY-SIDE
   ============================================================ */
/* ============================================================
   SECTION DARK + SUBTLE GRID PATTERN
   For sections that host .rcc-darkcard content.
   Reusable: migration steps, process flows, dark CTA sections.
   ============================================================ */
.rcc-section--dark {
  background: var(--rcc-deep);
  color: var(--rcc-white);
  position: relative;
  overflow: hidden;
}
.rcc-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%);
}
.rcc-section--dark > .rcc-container,
.rcc-section--dark > .rcc-container--xwide,
.rcc-section--dark > .rcc-container--medium {
  position: relative;
  z-index: 1;
}
/* Heading text inside dark sections */
.rcc-section--dark .rcc-h2,
.rcc-section--dark .rcc-section-head h2 {
  color: var(--rcc-white);
}
.rcc-section--dark .rcc-eyebrow {
  color: var(--rcc-accent);
}
.rcc-section--dark .rcc-lead {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   MODULE 60: COMPARE PAGE — RELATED COMPARE CARDS
   Each card uses the competitor's own brand color as accent.
   ============================================================ */
.rcc-relcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .rcc-relcard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .rcc-relcard-grid { grid-template-columns: 1fr; }
}

.rcc-relcard-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.rcc-relcard {
  --rc-card-color: var(--rcc-accent);
  position: relative;
  background: var(--rcc-white);
  border: 1px solid var(--rcc-border);
  border-radius: 14px;
  padding: 28px 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(1, 22, 64, 0.04);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
/* Top accent strip in competitor color */
.rcc-relcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--rc-card-color);
  transition: height .3s ease;
}
/* Subtle decorative blob in top-right corner */
.rcc-relcard::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--rc-card-color);
  opacity: 0.06;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.rcc-relcard__eyebrow {
  display: inline-block;
  font-family: var(--rcc-fb);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rcc-gray);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.rcc-relcard__title {
  font-family: var(--rcc-fh);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--rcc-dark);
  position: relative;
  z-index: 1;
}
.rcc-relcard__vs {
  font-weight: 500;
  color: var(--rcc-gray);
  font-size: 18px;
  margin-right: 4px;
}
.rcc-relcard__brand {
  color: var(--rc-card-color);
}

.rcc-relcard__body {
  font-family: var(--rcc-fb);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rcc-text);
  margin: 0 0 22px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.rcc-relcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rcc-fh);
  font-size: 13px;
  font-weight: 700;
  color: var(--rc-card-color);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.rcc-relcard__cta svg {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}

/* Hover: lift, deepen shadow, thicken top strip, grow blob, slide arrow */
.rcc-relcard-link:hover .rcc-relcard {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(1, 22, 64, 0.14);
  border-color: var(--rc-card-color);
}
.rcc-relcard-link:hover .rcc-relcard::before { height: 6px; }
.rcc-relcard-link:hover .rcc-relcard::after  {
  opacity: 0.10;
  transform: scale(1.15);
}
.rcc-relcard-link:hover .rcc-relcard__cta svg { transform: translateX(6px); }

/* Per-competitor brand colors */
.rcc-relcard--digitalocean { --rc-card-color: #0080FF; }
.rcc-relcard--vultr        { --rc-card-color: #007BFC; }
.rcc-relcard--linode       { --rc-card-color: #00A95C; }
.rcc-relcard--hetzner      { --rc-card-color: #D50C2D; }
.rcc-relcard--cloudways    { --rc-card-color: #0B5EFF; }
.rcc-relcard--aws          { --rc-card-color: #FF9900; }
.rcc-relcard--kinsta       { --rc-card-color: #3ECAB0; }
.rcc-relcard--wpengine     { --rc-card-color: #0ECAD4; }
.rcc-relcard--ovh          { --rc-card-color: #123F6D; }
.rcc-relcard--siteground   { --rc-card-color: #F04E23; }
.rcc-relcard--liquidweb    { --rc-card-color: #0071CE; }
.rcc-relcard--hostinger    { --rc-card-color: #673DE6; }
.rcc-relcard--bluehost     { --rc-card-color: #003087; }
.rcc-relcard--a2hosting    { --rc-card-color: #E84545; }
.rcc-relcard--scalahosting { --rc-card-color: #00A4E4; }
.rcc-relcard--knowhost     { --rc-card-color: #2E7D32; }
.rcc-relcard--hostgator    { --rc-card-color: #F5821F; }
.rcc-relcard--webempresa   { --rc-card-color: #2196F3; }
.rcc-relcard--raiola       { --rc-card-color: #E8B84B; }
.rcc-relcard--neolo        { --rc-card-color: #1565C0; }