/* ============================================================
   RRN Portal — Design System Stylesheet
   Copy this file as-is into every build. Edit centrally only.
   ============================================================ */

/* ---- Fonts ----
   Bundled locally (assets/fonts/) so the portal renders correctly with
   NO internet connection - required since this runs off a laptop at
   conferences/seminars with no guaranteed wifi.

   A live Google Fonts <link> is NOT used for that reason: if the venue
   has no wifi, the CDN link fails and every page silently falls back to
   the wrong system font mid-presentation. If you ever *do* want the CDN
   version instead (e.g. building a version for the website, where a
   connection is guaranteed), replace this whole @font-face block with:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700;800&display=swap" rel="stylesheet">
   added to the <head> of every page, and remove the @font-face rules below. */
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --rrn-navy: #0c2448;
  --rrn-navy-2: #14315e;
  --rrn-navy-card: rgba(255,255,255,0.04);
  --rrn-border: rgba(255,255,255,0.12);
  --rrn-border-soft: rgba(255,255,255,0.08);
  --rrn-white: #ffffff;
  --rrn-muted: rgba(255,255,255,0.72);
  --rrn-muted-2: rgba(255,255,255,0.5);
  --rrn-green: #1cc478;
  --rrn-green-dark: #169d60;   /* ~20% darker, for primary button hover */
  --rrn-green-light: #77dcae;  /* lighter mint, for the hero CTAs hover */
  --rrn-mustard: #e8b81c;
  --rrn-mustard-dark: #ba9316; /* ~20% darker, for primary button hover */
  --rrn-accent: var(--rrn-green); /* overridden per-track on <html> */
  --rrn-accent-dark: var(--rrn-green-dark); /* overridden per-track on <html>, alongside --rrn-accent */
  --rrn-radius: 12px;
  --rrn-font: "Red Hat Display", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background-color: var(--rrn-navy);
  background-image: url("../img/global/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--rrn-white);
  font-family: var(--rrn-font);
  scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.rrn-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---------------- Topbar ---------------- */
.rrn-topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 28px 40px;
}
.rrn-logo { display: flex; align-items: center; gap: 12px; }
.rrn-logo-word { font-weight: 800; font-size: 0.95rem; line-height: 1.15; }
.rrn-logo-word span:nth-child(2) { color: var(--rrn-accent); }
.rrn-explore-btn {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: none; border: none; color: var(--rrn-white);
}
.rrn-explore-btn svg { width: 16px; height: 16px; }

/* ---------------- Explore slide-in menu ---------------- */
.rrn-menu-scrim {
  position: fixed; inset: 0; background: rgba(6,14,30,0.6);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;
}
.rrn-explore-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(340px, 88vw);
  background: var(--rrn-navy-2); border-left: 1px solid var(--rrn-border);
  padding: 32px 28px; transform: translateX(100%); transition: transform .25s ease;
  z-index: 41; overflow-y: auto;
}
body.rrn-menu-open .rrn-menu-scrim { opacity: 1; pointer-events: auto; }
body.rrn-menu-open .rrn-explore-panel { transform: translateX(0); }
.rrn-menu-close { background: none; border: none; color: var(--rrn-white); float: right; font-size: 1.2rem; }
.rrn-menu-zone-label {
  font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rrn-muted-2); margin: 28px 0 10px;
}
.rrn-menu-zone-label:first-of-type { margin-top: 8px; }
.rrn-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--rrn-border-soft); font-weight: 500;
}
.rrn-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rrn-accent);
  box-shadow: 0 0 0 0 var(--rrn-accent); animation: rrn-pulse 1.8s infinite;
}
@keyframes rrn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(28,196,120,.5); }
  70% { box-shadow: 0 0 0 8px rgba(28,196,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,196,120,0); }
}

/* ---------------- Hero ---------------- */
.rrn-diagonal-wash {
  position: relative; overflow: hidden;
  /* background now lives on <body> sitewide — this section is just a layout wrapper */
}
.rrn-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 40px;
}
.rrn-hero-media { border-radius: 24px; overflow: hidden; height: 568px; }
.rrn-hero-wrap { max-width: 1200px; margin: 0 auto; padding: 40px; }
.rrn-track-label {
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rrn-accent); margin: 0 0 12px;
}
.rrn-hero h1, .rrn-index-card-content h1 { font-size: 48px; font-weight: 700; line-height: 1.1; margin: 0; }
.rrn-hero p.lead, .rrn-index-card-content p.lead { color: var(--rrn-muted); font-size: 20px; max-width: 46ch; margin: 4px 0 0; }
.rrn-index-card-content p.lead { color: var(--rrn-white); }
.rrn-hero-ctas { display: flex; gap: 24px; margin-top: 32px; }
.rrn-hero-ctas .btn-filled:hover { background: var(--rrn-green-light); }

.rrn-pagination-dots { display: flex; gap: 8px; }
.rrn-pagination-dots a {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rrn-muted-2); display: block;
}
.rrn-pagination-dots a.is-active { background: var(--rrn-white); }

/* ---------------- Buttons ----------------
   Spec: 40px height, 4px border-radius. Ghost = 2px border, hover -> solid white bg / navy text.
   Primary (filled) hover -> accent darkened ~20%. --rrn-accent-dark is set per-track alongside --rrn-accent. */
.btn-filled, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 24px; border-radius: 4px; font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-filled { background: var(--rrn-accent); color: var(--rrn-navy); }
.btn-filled:hover { background: var(--rrn-accent-dark, var(--rrn-accent)); }
.btn-outline {
  background: transparent; border: 2px solid rgba(255,255,255,0.6); color: var(--rrn-white);
}
.btn-outline:hover { background: var(--rrn-white); color: var(--rrn-navy); border-color: var(--rrn-white); }
.btn-toggle[aria-pressed="true"] { background: var(--rrn-accent); color: var(--rrn-navy); border-color: var(--rrn-accent); }
.btn-toggle[aria-pressed="false"] { background: transparent; color: var(--rrn-white); border-color: rgba(255,255,255,0.3); }

/* ---------------- Stat trio ---------------- */
.rrn-stat-trio { display: flex; gap: 48px; margin-top: 32px; }
.rrn-stat-trio .stat-value { font-size: 24px; font-weight: 800; color: var(--rrn-accent); }
.rrn-stat-trio .stat-label {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rrn-white); margin-top: 2px;
}

/* ---------------- Chapters grid (overview page) ---------------- */
.rrn-chapters-section { background: var(--rrn-navy); padding-top: 56px; }
.rrn-chapters-section .rrn-section-title { margin-top: 0; }
.rrn-chapters-section .rrn-footer { margin-top: 48px; }
.rrn-section-title { font-size: 1.6rem; font-weight: 700; margin: 56px 0 24px; }
.rrn-chapter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .rrn-chapter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rrn-chapter-grid { grid-template-columns: 1fr; } }

.rrn-chapter-card {
  padding: 24px; height: 264px; overflow: hidden;
}
.rrn-chapter-card .icon { color: var(--rrn-accent); width: 26px; height: 26px; margin-bottom: 18px; }
.rrn-chapter-card .num-label {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rrn-white); margin-bottom: 8px;
}
.rrn-chapter-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.rrn-chapter-card p { font-size: 0.88rem; color: var(--rrn-white); margin: 0; }
.rrn-chapter-card .arrow-corner {
  position: absolute; right: 0; bottom: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 0 96px 80px; border-color: transparent transparent var(--rrn-accent) transparent;
}
.rrn-chapter-card .arrow-corner img { position: absolute; right: 16px; top: 64px; width: 16px; height: 16px; max-width: none; }

/* ---------------- Chapter detail layout ---------------- */
.rrn-detail-layout { display: block; grid-template-columns: 260px 1fr; gap: 56px; max-width: 1200px; margin: 0 auto; padding: 8px 40px 80px; }
@media (max-width: 900px) {
  .rrn-detail-layout { grid-template-columns: 1fr; }
  .rrn-sidebar { position: static; order: 2; }
}

.rrn-sidebar { position: sticky; top: 24px; align-self: start; }
.rrn-sidebar-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rrn-white); margin: 12px 0;
}
.rrn-chapter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rrn-chapter-list li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 32px; padding: 0 14px; border-radius: 999px; font-weight: 500; font-size: 0.92rem; color: var(--rrn-muted);
}
.rrn-chapter-list li a .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rrn-accent); margin-right: 10px; }
.rrn-chapter-list li a .num { margin-left: auto; font-size: 0.92rem; font-weight: 500; color: var(--rrn-white); }
.rrn-chapter-list li.is-active a {
  background: var(--rrn-accent); color: var(--rrn-navy); font-weight: 700; border-radius: 4px;
}
.rrn-chapter-list li.is-active a .dot { background: var(--rrn-navy); }
.rrn-chapter-list li.is-active a .num { color: var(--rrn-navy); font-weight: 700; }

.rrn-breadcrumb {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin-bottom: 18px;
}
.rrn-breadcrumb .track { color: var(--rrn-accent); font-weight: 700; }
.rrn-breadcrumb .current { color: rgba(255,255,255,0.4); }
.rrn-detail-layout h1 { font-size: 2.1rem; font-weight: 700; margin: 0 0 16px; }
.rrn-detail-layout .lead { color: var(--rrn-muted); font-size: 1.02rem; max-width: 80ch; margin-bottom: 36px; }

/* ---------------- Card grid (content blocks) ---------------- */
.rrn-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
@media (max-width: 700px) { .rrn-card-grid { grid-template-columns: 1fr; } }
.rrn-card {
  padding: 20px; overflow: hidden;
}
.rrn-card-media {
  border-radius: 8px; aspect-ratio: 16/10; margin-bottom: 16px; overflow: hidden; position: relative;
}
.rrn-card-media:not(:has(img)) { background: var(--rrn-navy-2); }
.rrn-card-media--graphic { display: flex; align-items: center; justify-content: center; }
.rrn-card-media--video::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: #ff0000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>') center/20px no-repeat;
}
.rrn-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.rrn-card p { font-size: 0.9rem; color: var(--rrn-white); margin: 0; }

/* Placeholder imagery */
.rrn-placeholder-img {
  background-image: repeating-linear-gradient(135deg, var(--rrn-navy-2), var(--rrn-navy-2) 10px, var(--rrn-navy) 10px, var(--rrn-navy) 20px);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
}
.rrn-placeholder-img::before {
  content: attr(data-caption);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
  color: var(--rrn-muted); background: rgba(12,36,72,0.75); padding: 6px 10px; border-radius: 6px;
}

/* ---------------- Callout ---------------- */
.rrn-callout {
  border: 1px solid var(--rrn-accent); border-radius: var(--rrn-radius); padding: 24px 28px; margin-bottom: 36px;
}
.rrn-callout h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
.rrn-callout p { margin: 0; color: var(--rrn-muted); }

/* ---------------- Feature rows (AI Solutions pattern) ---------------- */
.rrn-feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 80px;
}
.rrn-feature-row.is-reversed { direction: rtl; }
.rrn-feature-row.is-reversed > * { direction: ltr; }
@media (max-width: 800px) { .rrn-feature-row { grid-template-columns: 1fr; direction: ltr !important; } }
.rrn-mockup-frame {
  max-width: 360px;
}
.rrn-mockup-frame img { filter: drop-shadow(0 12px 28px rgba(0,0,0,0.35)); }
.rrn-pill-label {
  display: inline-flex; align-items: center; height: 32px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--rrn-accent); border: 1px solid var(--rrn-accent); border-radius: 4px; padding: 0 12px; margin-bottom: 14px;
  background: rgba(28,196,120,0.068);
}
.rrn-pill-label .word-white { color: var(--rrn-white); margin-left: 0.35em; }
.rrn-feature-row h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; }
.rrn-feature-row p { color: var(--rrn-muted); }

/* ---------------- Pull quote ---------------- */
.rrn-quote {
  padding: 40px 44px; margin: 60px 0;
}
.rrn-quote .mark { width: 32px; height: auto; display: block; margin-bottom: 20px; }
.rrn-quote p { font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--rrn-white); max-width: 70ch; margin: 0; }
.rrn-quote .attribution { color: var(--rrn-accent); font-weight: 700; font-style: normal; margin-top: 16px; display: block; }

/* ---------------- Calculator widget ---------------- */
.rrn-calculator { padding: 16px; margin-bottom: 24px; }
.rrn-calc-step-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rrn-white); margin-bottom: 18px;
}
.rrn-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-bottom: 20px; }
@media (max-width: 700px) { .rrn-calc-grid { grid-template-columns: 1fr; } }
.rrn-calc-field .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rrn-calc-field label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rrn-white); }
.rrn-calc-field .value { font-size: 1.3rem; font-weight: 800; color: var(--rrn-accent); }
.rrn-calc-field input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--rrn-border); margin: 8px 0;
  cursor: pointer;
}
.rrn-calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
  background: var(--rrn-accent); box-shadow: 0 0 0 3px var(--rrn-navy), 0 0 0 4px var(--rrn-accent);
}
.rrn-calc-field input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--rrn-accent); box-shadow: 0 0 0 3px var(--rrn-navy), 0 0 0 4px var(--rrn-accent);
}
.rrn-calculator .caption, .rrn-calc-result .caption { font-size: 12px; color: rgba(255,255,255,0.4); }
.rrn-calc-toggle { display: flex; gap: 24px; margin: 8px 0 6px; }
.rrn-calc-toggle button {
  flex: 1; height: 40px; padding: 0 24px; border-radius: 4px; font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid rgba(255,255,255,0.6);
  background: transparent; color: var(--rrn-white);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rrn-calc-toggle button[aria-pressed="true"] { background: var(--rrn-accent); color: var(--rrn-navy); border-color: transparent; }

.rrn-calc-result { padding: 16px; margin-top: 20px; }
.rrn-calc-result h4 { margin: 0 0 8px; font-size: 0.9rem; font-weight: 700; }
.rrn-calc-result .stat-row { display: flex; margin-top: 16px; }
.rrn-calc-result .stat-row > div { width: 50%; box-sizing: border-box; padding-right: 5%; }
.rrn-calc-result .stat-row > div + div { padding-right: 0; padding-left: 5%; border-left: 1px solid var(--rrn-border); }
.rrn-calc-result .stat-row .big { font-size: 1.6rem; font-weight: 800; color: var(--rrn-accent); }
.rrn-calc-result .stat-row #calc-days { color: var(--rrn-white); }
.rrn-calc-result .stat-row .cap { font-size: 12px; text-transform: uppercase; color: var(--rrn-muted-2); }
.rrn-big-number { font-size: 2.4rem; font-weight: 800; margin: 8px 0 4px; }
/* mix-blend-mode: screen so the navy tint actually lightens the matching navy backdrop
   instead of vanishing (normal alpha-blending a color with itself is a no-op) — the
   same fix already applied to the shared glass-card treatment, just missed here. */
.rrn-calc-subcard { padding: 16px; margin-top: 20px; }
.rrn-fineprint { font-size: 0.78rem; color: var(--rrn-white); }

/* ---------------- Footer ---------------- */
.rrn-footer {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 28px 40px;
  flex-wrap: wrap; gap: 16px;
}
/* A plain border-top on .rrn-footer would sit on its outer (unpadded) box edge —
   40px further out on each side than the padded logo/badges and the cards/hero
   above, since those are all inset by the same 40px. This pseudo draws the rule
   inset to match the padding instead, so it lines up with the actual content edges. */
.rrn-footer::before {
  content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px;
  background: var(--rrn-border-soft);
}
.rrn-footer > div { display: flex; align-items: center; }
.rrn-accred-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rrn-white); margin-right: 16px;
}
.rrn-accred-badges { display: flex; align-items: center; gap: 18px; }
.rrn-accred-badges img { height: 32px; width: auto; display: block; }

/* ---------------- Logos & badges (per design spec) ---------------- */
.rrn-logo-img { width: 200px; height: 48px; display: block; object-fit: contain; object-position: left center; }
.rrn-logo-img--footer { width: 71px; height: 32px; }
.rrn-card-media img,
.rrn-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rrn-card-media--graphic img { object-fit: contain; }
.rrn-mockup-img { max-width: 300px; width: 100%; display: block; border-radius: 16px; }
.rrn-mockup-img[src$="rapid-assess.png"] { max-width: 360px; }

/* Our Team — 4-up headshot grid */
.rrn-card-grid--team { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .rrn-card-grid--team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rrn-card-grid--team { grid-template-columns: 1fr; } }
.rrn-card-media--headshot {
  aspect-ratio: 1/1; border-radius: 50%; max-width: 120px; margin: 0 auto 16px;
}
.rrn-card-grid--team .rrn-card { text-align: center; }

/* Our Team — 2-column name/role list, matching the confirmed final design */
.rrn-team-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .rrn-team-list { grid-template-columns: 1fr; } }
.rrn-team-row {
  display: flex; align-items: center; gap: 20px;
  padding: 20px;
}
.rrn-team-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.rrn-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rrn-team-row h3 { margin: 0 0 2px; font-size: 1.1rem; font-weight: 700; }
.rrn-team-row p { margin: 0; color: var(--rrn-muted); font-size: 0.92rem; }

/* Our Network — large annotated coverage map */
.rrn-network-map { width: 578px; height: 743px; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 14px; }
.rrn-network-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Account Management — lead contact card, checklist cards, Trustpilot panel, partner grid */
.rrn-am-lead-card {
  display: flex; align-items: center; gap: 20px;
  border: 1px solid var(--rrn-accent); border-radius: var(--rrn-radius); padding: 24px 28px; margin-bottom: 28px;
}
.rrn-am-lead-photo { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.rrn-am-lead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rrn-am-lead-card h3 { margin: 0 0 2px; font-size: 1.2rem; }
.rrn-am-lead-card .role { margin: 0; color: var(--rrn-muted); }
.rrn-am-lead-card .email { color: var(--rrn-accent); font-weight: 600; }

.rrn-card--check { position: relative; padding-left: 60px; }
.rrn-card--check .check {
  position: absolute; left: 20px; top: 20px; width: 24px; height: 24px; border-radius: 6px;
  background: var(--rrn-accent); color: var(--rrn-navy); display: flex; align-items: center; justify-content: center;
}
.rrn-card--check .check img { width: 24px; height: 24px; }

.rrn-trustpilot-panel {
  border: 1px solid var(--rrn-accent); border-radius: var(--rrn-radius); padding: 24px 28px; margin: 28px 0 8px;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.rrn-trustpilot-panel .label { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; color: var(--rrn-muted); }
.rrn-trustpilot-panel .stat { font-weight: 700; }
.rrn-trustpilot-panel .tp-mark { margin-left: auto; width: 139px; height: 64px; display: block; }

.rrn-partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 700px) { .rrn-partner-grid { grid-template-columns: 1fr; } }
.rrn-partner-logo {
  padding: 24px; display: flex; align-items: center; justify-content: center;
}
.rrn-partner-logo img { max-width: 100%; height: auto; display: block; }

/* ---------------- Icons ---------------- */
.rrn-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.rrn-explore-btn { display: inline-flex; align-items: center; gap: 8px; }
.rrn-chapter-card .icon-img { width: 26px; height: 26px; margin-bottom: 18px; display: block; }

/* ---------------- Explore panel v2 (matches confirmed reference) ---------------- */
.rrn-explore-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rrn-explore-panel-header h2 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.rrn-current-track-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-weight: 700; color: var(--rrn-accent); }
.rrn-current-track-row .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rrn-accent); flex-shrink: 0; }
.rrn-menu-divider { border: none; border-top: 1px solid var(--rrn-border-soft); margin: 20px 0; }

.rrn-menu-item-v2 {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--rrn-border-soft);
}
.rrn-menu-item-v2 .rrn-icon { margin-top: 3px; flex-shrink: 0; }
.rrn-menu-item-v2 .title { font-weight: 700; font-size: 0.96rem; }
.rrn-menu-item-v2 .subtitle { font-size: 0.82rem; color: var(--rrn-muted-2); margin-top: 2px; }
.rrn-menu-item-v2 .rrn-pulse-dot--mustard { margin-left: auto; margin-top: 6px; }
.rrn-pulse-dot--mustard {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rrn-mustard);
  animation: rrn-pulse-mustard 1.8s infinite;
}
@keyframes rrn-pulse-mustard {
  0% { box-shadow: 0 0 0 0 rgba(232,184,28,.5); }
  70% { box-shadow: 0 0 0 8px rgba(232,184,28,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,184,28,0); }
}

/* ---------------- Index / entry page card ---------------- */
.rrn-index-wrap { max-width: 1200px; margin: 0 auto; padding: 40px; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.rrn-index-card {
  width: 100%; max-width: 1120px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; min-height: 640px;
}
@media (max-width: 800px) { .rrn-index-card { grid-template-columns: 1fr; } }
.rrn-index-card-media { position: relative; }
.rrn-index-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rrn-index-card-logo { position: absolute; top: 32px; left: 32px; }
.rrn-index-card-logo img { width: 200px; height: 48px; }
.rrn-index-card-content { padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; }

/* Overview-page hero: fixed height, fixed-width content column so the title wraps predictably */
.rrn-hero-wrap .rrn-index-card { height: 568px; min-height: 0; grid-template-columns: 1fr 580px; }
.rrn-hero-wrap .rrn-index-card-content h1 { font-size: 36px; }
@media (max-width: 800px) { .rrn-hero-wrap .rrn-index-card { grid-template-columns: 1fr; height: auto; } }

/* ---------------- Shared glass card treatment ----------------
   Used site-wide by the index hero, chapter hero, chapter cards and content cards:
   translucent navy fill, background blur, inset shadow, and an angular (conic) stroke,
   per Figma: fill #0C2448 6.8%, stroke #0C2448 angular 12/37/62/87% at 35/0/35/0%.

   Fill and stroke are two separate pseudo-elements, not one combined layer:
   - ::before is a FLAT fill (uniform tint, no gradient) — this is the "glass" wash.
   - ::after is the conic-gradient STROKE, confined to a true ~1.5px ring via the
     content-box/border-box mask-composite trick. Without that confinement the
     gradient paints across the whole card face like a background instead of a border.
   Both use mix-blend-mode: screen so the navy is visible even over a backdrop
   that's the exact same navy (normal alpha blending a color with itself is a
   no-op — Screen is what makes Figma's low-opacity navy actually lighten it).
   Both are pseudo-elements (not on the card itself) so the blend mode only touches
   this decorative layer, not the real photos/text painted on top of it. */
.rrn-index-card, .rrn-chapter-card, .rrn-card,
.rrn-team-row, .rrn-partner-logo, .rrn-quote, .rrn-calculator, .rrn-calc-result, .rrn-calc-subcard {
  position: relative;
  border-radius: var(--rrn-radius);
}
.rrn-index-card > *, .rrn-chapter-card > *, .rrn-card > *,
.rrn-team-row > *, .rrn-partner-logo > *, .rrn-quote > *, .rrn-calculator > *, .rrn-calc-result > *, .rrn-calc-subcard > * { position: relative; z-index: 2; }
.rrn-index-card::before, .rrn-chapter-card::before, .rrn-card::before,
.rrn-team-row::before, .rrn-partner-logo::before, .rrn-quote::before, .rrn-calculator::before, .rrn-calc-result::before, .rrn-calc-subcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: rgba(12,36,72,0.068);
  mix-blend-mode: screen;
  backdrop-filter: blur(15.16px);
  -webkit-backdrop-filter: blur(15.16px);
  box-shadow: inset 1.22px 1.13px 4.62px 0 rgba(12,36,72,0.126);
}
.rrn-index-card::after, .rrn-chapter-card::after, .rrn-card::after,
.rrn-team-row::after, .rrn-partner-logo::after, .rrn-quote::after, .rrn-calculator::after, .rrn-calc-result::after, .rrn-calc-subcard::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 0deg, rgba(12,36,72,0.35) 0%, rgba(12,36,72,0.35) 12%, rgba(12,36,72,0) 37%, rgba(12,36,72,0.35) 62%, rgba(12,36,72,0) 87%, rgba(12,36,72,0.35) 100%);
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* .rrn-calc-subcard base variant: literal #0C2448 6.8% via mix-blend-mode:screen
   (the shared default) measures at a rendered RGB delta of ~1 against its backdrop
   here — a dark navy tint screened onto a dark navy background barely lightens it,
   unlike #1CC478 which is a different hue and reads even at low opacity. Using a
   solid #0C2448-family fill at higher opacity instead so the card is actually visible;
   this is the one thing that measurably worked when this was tested earlier. */
/* Solid fill, not a translucent overlay: #0C2448 with 6.8% white mixed in,
   pre-computed to rgb(29,51,84) — opaque, so it's always visible regardless of
   what's behind it, unlike an rgba() at 6.8% alpha which composites against the
   backdrop and disappears when that backdrop is also navy. */
.rrn-calc-subcard::before { background: rgb(29,51,84); mix-blend-mode: normal; }
.rrn-calc-subcard--accent::before { background: rgba(28,196,120,0.068); }
.rrn-calc-subcard--accent::after {
  background: conic-gradient(from 0deg, rgba(28,196,120,0.35) 0%, rgba(28,196,120,0.35) 12%, rgba(28,196,120,0) 37%, rgba(28,196,120,0.35) 62%, rgba(28,196,120,0) 87%, rgba(28,196,120,0.35) 100%);
}

/* Placeholder variants keep their intended shape even before real photos land */
.rrn-team-photo.rrn-placeholder-img,
.rrn-am-lead-photo.rrn-placeholder-img { border-radius: 50%; }

/* ---------------- Objection Handler modal ---------------- */
.rrn-modal-overlay {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: rgba(6,14,30,0.72);
  display: flex; justify-content: center;
  padding: 64px 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.rrn-objection-open .rrn-modal-overlay { opacity: 1; pointer-events: auto; }
.rrn-objection-modal {
  width: 100%; max-width: 792px; height: fit-content;
  background: var(--rrn-navy-2); border: 1px solid var(--rrn-border); border-radius: var(--rrn-radius);
  padding: 40px;
}
.rrn-objection-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.rrn-objection-modal-header h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.rrn-objection-modal-header p { margin: 0; color: var(--rrn-muted-2); font-size: 0.92rem; }
.rrn-modal-close { background: none; border: none; color: var(--rrn-white); font-size: 1.2rem; line-height: 1; padding: 4px; flex-shrink: 0; }

.rrn-accordion { display: flex; flex-direction: column; gap: 16px; }
.rrn-accordion-item {
  border: 1px solid var(--rrn-border); border-radius: var(--rrn-radius);
  background: rgba(255,255,255,0.02); overflow: hidden;
}
.rrn-accordion-item.is-open { border-color: var(--rrn-accent); }
.rrn-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; color: var(--rrn-white); text-align: left;
  font-family: inherit; font-weight: 700; font-size: 1rem; padding: 20px 24px;
}
.rrn-accordion-chevron { width: 18px; height: 18px; color: var(--rrn-accent); flex-shrink: 0; transition: transform .2s ease; }
.rrn-accordion-item.is-open .rrn-accordion-chevron { transform: rotate(180deg); }
.rrn-accordion-panel { padding: 0 24px 20px; color: var(--rrn-muted); font-size: 0.92rem; line-height: 1.6; }
.rrn-accordion-panel strong { color: var(--rrn-white); }