/* ==========================================================================
   social-trading.css
   The prototype design for /social-trading, ported from
   update/SocialTreading/royce-social-trading.html.

   EVERYTHING IS SCOPED UNDER .rst — the prototype namespaced its whole
   stylesheet to #royce-social-trading and carried a second, unscoped block
   that styled html and body. That block is NOT here: the host page owns
   html/body, and this page injects the shared header and footer like every
   other page (NFR-07). The scope is the <main class="rst"> wrapper, so the
   chrome above and below it keeps the site's own styling.

   Type: the prototype loaded Cormorant Garamond, Jost and DM Mono from Google
   Fonts. None of the three came across. The sans stack is repointed at
   'Ping AR + LT', the site's self-hosted face, which is also what covers
   Arabic (NFR-10); the serif and mono stacks fall back to system faces, so
   nothing is fetched. Display weight comes from size, weight and
   letter-spacing, as it does on every other ported page.

   Direction: the prototype is written in logical properties throughout, so
   RTL needs almost nothing. The two exceptions are the <select> arrow and its
   padding, both corrected in the RTL block at the foot of this file. --rc-serif
   is also repointed under RTL: Georgia has no Arabic coverage and would fall
   through to an arbitrary system face mid-page.

   Palette — NOTE FOR REVIEW: --rc-teal #0F8F88, --rc-mint #43D7C3 and
   --rc-gold #F5C518 are the prototype's own "Signal Teal" palette. They are
   NOT the BRD §9.1 tokens: Royce Gold is #D6A61C and there is no teal in the
   §9.1 table at all. The palette is kept here as local custom properties, and
   deliberately does not leak into the site's :root, so this page reads cooler
   than the rest of the site by design of the source document. The teal/gold
   split is load-bearing in the design — mint marks the copy-trader side and
   gold the strategy-provider side throughout — which is why it was not simply
   remapped onto the site tokens. Wants design sign-off.

   Theme: the prototype was dark only. The light set below the token block
   (September 2026) is the site's own — Ivory White ground, white cards,
   Royce Black type, deep mint / gold for accent-as-text — gated on
   html[data-bs-theme='light'] like every other page sheet. Only the closing
   band stays dark in both themes.
   ========================================================================== */

.rst {
  /* -- Royce Signal Teal palette ------------------------------------------ */
  --rc-midnight: #06141b;
  --rc-petrol: #0b2630;
  --rc-teal: #0f8f88;
  --rc-mint: #43d7c3;
  --rc-gold: #f5c518;
  --rc-navy: #0a1628;
  --rc-ivory: #f4f1ea;
  --rc-slate: #93a8af;
  --rc-charcoal: #16181d;

  /* -- Derived surfaces & lines ------------------------------------------- */
  --rc-raised: #0e2c37;
  --rc-sunken: #051017;
  --rc-hair: rgba(147, 168, 175, 0.18);
  --rc-hair-soft: rgba(147, 168, 175, 0.1);
  --rc-hair-mint: rgba(67, 215, 195, 0.26);
  --rc-hair-gold: rgba(245, 197, 24, 0.28);
  --rc-glow-teal: rgba(15, 143, 136, 0.2);
  --rc-glow-mint: rgba(67, 215, 195, 0.16);
  --rc-glow-gold: rgba(245, 197, 24, 0.14);

  /* -- Theme-dependent families ------------------------------------------ */
  /* Every value below that is not a brand accent reads one of these, so the
     light set after this block is the only other place a surface, wash or
     text colour is declared. rgb triplets feed the alpha surfaces. */
  --rc-ground-rgb: 6, 20, 27; /* --rc-midnight as a triplet: sub-nav, pills, badge rings */
  --rc-petrol-rgb: 11, 38, 48;
  --rc-raised-rgb: 14, 44, 55;
  --rc-slate-rgb: 147, 168, 175; /* hover washes and soft borders */
  --rc-band-alt: var(--rc-navy); /* the provider section's ground */
  --rc-hero-glow: rgba(10, 22, 40, 0.85);
  --rc-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --rc-shadow-card: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
  --rc-shadow-modal: 0 60px 120px -40px rgba(0, 0, 0, 0.95);
  --rc-txt-strong: #ffffff; /* headings, names, selected labels */
  --rc-txt-2: #c4d2d7; /* body copy inside cards */
  --rc-txt-3: #b6c6cc; /* the quieter step: risk notes, paths */
  --rc-risk-med: #7fc4d8;
  --rc-risk-med-rgb: 127, 196, 216;
  /* Ink on a mint or gold fill. Was --rc-midnight / --rc-charcoal, which is
     fine while the ground is dark and wrong the moment it is not. */
  --rc-on-accent: #06141b;
  /* Mint and gold as FOREGROUNDS. Both are fills in the design; as text on the
     light surfaces they measure ~1.5–1.8:1, so the light set swaps these two
     tokens for deep variants and every fill keeps --rc-mint / --rc-gold. */
  --rc-mint-text: var(--rc-mint);
  --rc-gold-text: var(--rc-gold);

  /* -- Type --------------------------------------------------------------- */
  --rc-serif: Georgia, 'Times New Roman', 'Iowan Old Style', 'Palatino Linotype', serif;
  --rc-sans: 'Ping AR + LT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --rc-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* -- Layout ------------------------------------------------------------- */
  --rc-max: 1280px;
  --rc-gutter: 32px;
  --rc-pad-y: 108px; /* desktop section rhythm */
  --rc-read: 660px; /* comfortable paragraph measure */
  --rc-radius: 4px;
  --rc-radius-sm: 2px;

  /* -- Integration -------------------------------------------------------- */
  /* The sticky sub-nav clears whatever sits above it through this value. The
     prototype's note says to set it to the live header's exact height; do not
     hard-code one. css/royce-header.css sets the fixed navbar's resting
     height on <html> as --nav-h, and it differs across the width tiers. */
  --rc-header-offset: var(--nav-h);
  --rc-subnav-h: 62px;

  position: relative;
  /* Reserve the fixed site header. The sub-nav is the first child, so this
     lays it out exactly at its sticky offset and the hero starts under it —
     the same reservation accounts.css / contact.css make on their first band.
     Not a margin on the hero: that left the sub-nav laid out under the header
     and relied on the sticky shift to float it into the gap. */
  padding-top: var(--rc-header-offset);
  /* NO isolation: isolate here, although the prototype had it. It creates a
     stacking context on <main>, and the two modal overlays are fixed children
     of it — their z-index: 9000 would then only rank inside <main>, which
     itself sits at z-index auto, under the fixed .rz-header (z-index 100).
     The header painted over the top of every open modal and the scrim never
     dimmed it. With no context on .rst the overlays rank at 9000 in the root
     context: above the header and drawer, below the language panel and the
     page loader, which is where a modal belongs. */
  background: var(--rc-midnight);
  color: var(--rc-ivory);
  font-family: var(--rc-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ==========================================================================
   Light theme. Gated on html[data-bs-theme='light'] like css/style.css and
   css/accounts.css. The Signal Teal palette keeps its accents; the grounds
   invert to the site's Ivory White with white cards and a warm off-white for
   the sunken and alternate bands, and the type goes to Royce Black /
   Editorial Grey. Teal is deepened one step so white-on-teal fills and
   teal-as-text both clear 4.5:1; mint and gold text go to deep variants.
   The closing band (.rc-social-final) is NOT here: it is a dark teal band in
   both themes, like the site's other dark bands, and its ivory text stays.
   ========================================================================== */
html[data-bs-theme='light'] .rst {
  --rc-midnight: #f8f8f8;
  --rc-petrol: #ffffff;
  --rc-teal: #0c7a73;
  --rc-ivory: #111111;
  --rc-slate: #5a666c;

  --rc-raised: #ffffff;
  --rc-sunken: #f1efea;
  --rc-hair: rgba(17, 17, 17, 0.12);
  --rc-hair-soft: rgba(17, 17, 17, 0.07);
  --rc-hair-mint: rgba(12, 122, 115, 0.3);
  --rc-hair-gold: rgba(138, 106, 15, 0.32);
  --rc-glow-teal: rgba(15, 143, 136, 0.12);
  --rc-glow-mint: rgba(67, 215, 195, 0.12);
  --rc-glow-gold: rgba(245, 197, 24, 0.12);

  --rc-ground-rgb: 248, 248, 248;
  --rc-petrol-rgb: 255, 255, 255;
  --rc-raised-rgb: 255, 255, 255;
  --rc-slate-rgb: 17, 17, 17;
  --rc-band-alt: #f1efea;
  --rc-hero-glow: rgba(10, 22, 40, 0.06);
  --rc-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --rc-shadow-card: 0 40px 90px -50px rgba(17, 17, 17, 0.28);
  --rc-shadow-modal: 0 60px 120px -40px rgba(17, 17, 17, 0.35);
  --rc-txt-strong: #111111;
  --rc-txt-2: rgba(46, 49, 55, 0.86);
  --rc-txt-3: #4f5b61;
  --rc-risk-med: #2a6f86;
  --rc-risk-med-rgb: 42, 111, 134;
  --rc-mint-text: #0b6e68;
  --rc-gold-text: #8a6a0f;
}

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

.rst h1,
.rst h2,
.rst h3,
.rst h4,
.rst p,
.rst ul,
.rst ol,
.rst li,
.rst figure,
.rst blockquote,
.rst dl,
.rst dd {
  margin: 0;
  padding: 0;
}
.rst ul,
.rst ol {
  list-style: none;
}
.rst img,
.rst svg {
  display: block;
  max-width: 100%;
}
.rst button,
.rst input,
.rst select {
  font: inherit;
  color: inherit;
  margin: 0;
}
.rst a {
  color: inherit;
}

/* -- Focus: one consistent, highly visible ring ---------------------------- */
.rst :focus-visible {
  outline: 2px solid var(--rc-mint);
  outline-offset: 3px;
  border-radius: var(--rc-radius-sm);
}

/* -- Utilities ------------------------------------------------------------- */
.rst .rc-social-shell {
  max-width: var(--rc-max);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
}
.rst .rc-social-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rst .rc-social-band {
  padding-block: var(--rc-pad-y);
  position: relative;
}
.rst .rc-social-band--tight {
  padding-block: calc(var(--rc-pad-y) * 0.72);
}

/* Fine grid texture — used only on the two anchor bands, not everywhere. */
.rst .rc-social-grid-tex::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(to right, var(--rc-hair-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--rc-hair-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 0%, transparent 78%);
  opacity: 0.55;
}
.rst .rc-social-band > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
.rst .rc-social-eyebrow {
  font-family: var(--rc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rc-mint-text);
}
.rst .rc-social-h1 {
  font-family: var(--rc-serif);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--rc-txt-strong);
}
.rst .rc-social-h2 {
  font-family: var(--rc-serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--rc-txt-strong);
}
.rst .rc-social-h3 {
  font-family: var(--rc-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.16;
  color: var(--rc-txt-strong);
}
.rst .rc-social-h4 {
  font-family: var(--rc-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--rc-txt-strong);
}
.rst .rc-social-lede {
  font-size: 18.5px;
  line-height: 1.68;
  color: var(--rc-txt-2);
  max-width: var(--rc-read);
  font-weight: 300;
}
.rst .rc-social-body {
  color: var(--rc-slate);
  max-width: var(--rc-read);
}
.rst .rc-social-num {
  font-family: var(--rc-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* Placeholder token styling — deliberately legible as a token, never as data. */
.rst .rc-social-token {
  font-family: var(--rc-mono);
  font-size: 0.92em;
  font-weight: 400;
  color: var(--rc-mint-text);
  background: rgba(67, 215, 195, 0.09);
  border: 1px dashed var(--rc-hair-mint);
  border-radius: var(--rc-radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.rst .rc-social-token--gold {
  color: var(--rc-gold-text);
  background: rgba(245, 197, 24, 0.09);
  border-color: var(--rc-hair-gold);
}

/* Section heading block: rule + heading. The rule is the "signal spine". */
.rst .rc-social-head {
  max-width: 780px;
  margin-bottom: 52px;
}
.rst .rc-social-head p {
  margin-top: 18px;
}
.rst .rc-social-spine {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.rst .rc-social-spine i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-mint);
  box-shadow: 0 0 0 4px rgba(67, 215, 195, 0.14);
  flex: none;
}
.rst .rc-social-spine span {
  font-family: var(--rc-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rc-slate);
}
.rst .rc-social-spine::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rc-hair-mint), transparent);
}
.rst .rc-social-spine--gold i {
  background: var(--rc-gold);
  box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.14);
}
.rst .rc-social-spine--gold::after {
  background: linear-gradient(90deg, var(--rc-hair-gold), transparent);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.rst .rc-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--rc-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.012em;
  border: 1px solid transparent;
  border-radius: var(--rc-radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.rst .rc-social-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Mint primary — dark text for AA contrast on a bright fill. */
.rst .rc-social-btn--mint {
  background: var(--rc-mint);
  color: var(--rc-on-accent);
  font-weight: 600;
  box-shadow: 0 0 0 0 rgba(67, 215, 195, 0.4);
}
.rst .rc-social-btn--mint:hover {
  background: #62e3d1;
  box-shadow: 0 6px 26px -8px rgba(67, 215, 195, 0.55);
}

/* Gold — provider journey. Dark text. */
.rst .rc-social-btn--gold {
  background: var(--rc-gold);
  color: var(--rc-on-accent);
  font-weight: 600;
}
.rst .rc-social-btn--gold:hover {
  background: #ffd642;
  box-shadow: 0 6px 26px -8px rgba(245, 197, 24, 0.5);
}

.rst .rc-social-btn--teal {
  background: var(--rc-teal);
  color: var(--rc-txt-strong);
  font-weight: 500;
}
.rst .rc-social-btn--teal:hover {
  background: #13a79f;
}

.rst .rc-social-btn--outline {
  background: transparent;
  color: var(--rc-ivory);
  border-color: var(--rc-hair);
}
.rst .rc-social-btn--outline:hover {
  border-color: var(--rc-mint-text);
  color: var(--rc-mint-text);
  background: rgba(67, 215, 195, 0.06);
}

.rst .rc-social-btn--outline-gold {
  background: transparent;
  color: var(--rc-gold-text);
  border-color: var(--rc-hair-gold);
}
.rst .rc-social-btn--outline-gold:hover {
  background: rgba(245, 197, 24, 0.09);
  border-color: var(--rc-gold-text);
}

.rst .rc-social-btn--ghost {
  background: transparent;
  color: var(--rc-slate);
  border-color: transparent;
  min-height: 44px;
  padding: 10px 4px;
  font-weight: 400;
  border-bottom: 1px solid var(--rc-hair);
  border-radius: 0;
}
.rst .rc-social-btn--ghost:hover {
  color: var(--rc-mint-text);
  border-bottom-color: var(--rc-mint-text);
}

.rst .rc-social-btn--sm {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13.5px;
}
.rst .rc-social-btn--block {
  width: 100%;
}

.rst .rc-social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ==========================================================================
   RISK DISCLOSURE — never colour-only, always carries an icon + text
   ========================================================================== */
.rst .rc-social-risk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--rc-radius-sm);
  background: rgba(var(--rc-slate-rgb), 0.07);
  border-inline-start: 2px solid var(--rc-slate);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rc-txt-3);
  max-width: 620px;
}
.rst .rc-social-risk svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  stroke: var(--rc-slate);
}
.rst .rc-social-risk strong {
  color: var(--rc-ivory);
  font-weight: 500;
}
.rst .rc-social-risk--inline {
  padding: 11px 14px;
  font-size: 12.5px;
  max-width: none;
}

/* ==========================================================================
   1. SECTION SUB-NAVIGATION
   Sits beneath the live Royce site header via --rc-header-offset.
   ========================================================================== */
.rst .rc-social-subnav {
  position: sticky;
  top: var(--rc-header-offset);
  z-index: 40;
  background: rgba(var(--rc-ground-rgb), 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rc-hair-soft);
}
.rst .rc-social-subnav__in {
  max-width: var(--rc-max);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
  min-height: var(--rc-subnav-h);
  display: flex;
  align-items: center;
  gap: 26px;
  justify-content: space-between;
}
.rst .rc-social-subnav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rst .rc-social-subnav__links::-webkit-scrollbar {
  display: none;
}
.rst .rc-social-subnav__links a {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  padding: 10px 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--rc-slate);
  border-radius: var(--rc-radius-sm);
  transition: color 0.16s ease;
}
.rst .rc-social-subnav__links a:hover {
  color: var(--rc-ivory);
}
.rst .rc-social-subnav__links a[aria-current='true'] {
  color: var(--rc-mint-text);
}
.rst .rc-social-subnav__links a[aria-current='true']::after {
  content: '';
  position: absolute;
  inset-inline: 13px;
  bottom: 6px;
  height: 1px;
  background: var(--rc-mint);
}
.rst .rc-social-subnav__acts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.rst .rc-social-subnav__acts .rc-social-btn {
  min-height: 40px;
  padding: 8px 15px;
  font-size: 13px;
}
.rst .rc-social-subnav__login {
  font-size: 13.5px;
  color: var(--rc-slate);
  text-decoration: none;
  padding: 10px 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.rst .rc-social-subnav__login:hover {
  color: var(--rc-ivory);
  border-bottom-color: var(--rc-hair);
}

/* Mobile: a compact scroll rail plus one persistent primary action. */
.rst .rc-social-subnav__more {
  display: none;
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.rst .rc-social-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(32px, 4vw, 58px) clamp(32px, 4vw, 52px);
  background: radial-gradient(120% 90% at 84% 12%, rgba(15, 143, 136, 0.2) 0%, transparent 58%), radial-gradient(80% 70% at 6% 88%, var(--rc-hero-glow) 0%, transparent 62%), var(--rc-midnight);
}
.rst .rc-social-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.rst .rc-social-hero__eyebrow {
  margin-bottom: 26px;
  display: block;
}
.rst .rc-social-hero h1 {
  margin-bottom: 24px;
}
.rst .rc-social-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rc-mint-text);
}
.rst .rc-social-hero__lede {
  margin-bottom: 34px;
}
.rst .rc-social-hero__actions {
  margin-bottom: 18px;
}
.rst .rc-social-hero__login {
  margin-bottom: 30px;
}
.rst .rc-social-hero__login a {
  font-size: 14.5px;
  color: var(--rc-slate);
  text-decoration: none;
  border-bottom: 1px solid var(--rc-hair);
  padding-bottom: 2px;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.rst .rc-social-hero__login a:hover {
  color: var(--rc-mint-text);
  border-bottom-color: var(--rc-mint-text);
}

/* -- Hero signal network figure ------------------------------------------- */
.rst .rc-social-net {
  position: relative;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-soft);
  background: linear-gradient(160deg, rgba(var(--rc-raised-rgb), 0.92) 0%, rgba(var(--rc-ground-rgb), 0.94) 62%), var(--rc-petrol);
  box-shadow: var(--rc-shadow-card), var(--rc-inset);
  overflow: hidden;
}
.rst .rc-social-net__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rc-hair-soft);
  font-family: var(--rc-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-slate);
}
.rst .rc-social-net__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rc-mint-text);
}
.rst .rc-social-net__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-mint);
  animation: rc-social-breathe 2.6s ease-in-out infinite;
}
.rst .rc-social-net__svg {
  display: block;
  width: 100%;
  height: auto;
}
.rst .rc-social-net__foot {
  padding: 13px 20px;
  border-top: 1px solid var(--rc-hair-soft);
  font-size: 12px;
  color: var(--rc-slate);
  line-height: 1.55;
}

@keyframes rc-social-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* Animated signal dashes travelling provider -> hub -> followers */
.rst .rc-social-net .rc-flow {
  stroke-dasharray: 4 10;
  animation: rc-social-flow 2.4s linear infinite;
}
@keyframes rc-social-flow {
  to {
    stroke-dashoffset: -28;
  }
}
.rst .rc-social-net .rc-flow--b {
  animation-duration: 3.1s;
}
.rst .rc-social-net .rc-flow--c {
  animation-duration: 2.7s;
}
.rst .rc-social-net .rc-flow--d {
  animation-duration: 3.5s;
}
.rst .rc-social-net .rc-pulse {
  animation: rc-social-pulse 3.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes rc-social-pulse {
  0%,
  100% {
    opacity: 0.25;
    r: 3;
  }
  50% {
    opacity: 0.9;
    r: 4.6;
  }
}

/* ==========================================================================
   3. ROLE-SELECTION GATEWAY
   ========================================================================== */
.rst .rc-social-gateway {
  background: var(--rc-sunken);
}
.rst .rc-social-roles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}
.rst .rc-social-role {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.4vw, 46px);
  background: var(--rc-petrol);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rst .rc-social-role::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
}
.rst .rc-social-role--copy::before {
  background: linear-gradient(90deg, var(--rc-teal), var(--rc-mint));
}
.rst .rc-social-role--provide::before {
  background: linear-gradient(90deg, var(--rc-gold), rgba(245, 197, 24, 0.25));
}
.rst .rc-social-role--copy {
  background-image: linear-gradient(178deg, rgba(67, 215, 195, 0.07) 0%, rgba(67, 215, 195, 0) 46%);
}
.rst .rc-social-role--provide {
  background-image: linear-gradient(178deg, rgba(245, 197, 24, 0.06) 0%, rgba(245, 197, 24, 0) 46%);
}
.rst .rc-social-role__mark {
  margin-bottom: 24px;
}
.rst .rc-social-role__mark svg {
  width: 44px;
  height: 44px;
}
.rst .rc-social-role__tag {
  font-family: var(--rc-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.rst .rc-social-role--copy .rc-social-role__tag {
  color: var(--rc-mint-text);
}
.rst .rc-social-role--provide .rc-social-role__tag {
  color: var(--rc-gold-text);
}
.rst .rc-social-role h3 {
  margin-bottom: 14px;
}
.rst .rc-social-role > p {
  color: var(--rc-slate);
  font-size: 15.5px;
  margin-bottom: 26px;
}
.rst .rc-social-role ul {
  display: grid;
  gap: 13px;
  margin-bottom: 32px;
}
.rst .rc-social-role li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--rc-txt-2);
  line-height: 1.5;
}
.rst .rc-social-role li svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 5px;
}
.rst .rc-social-role--copy li svg {
  stroke: var(--rc-mint);
}
.rst .rc-social-role--provide li svg {
  stroke: var(--rc-gold);
}
.rst .rc-social-role__cta {
  margin-top: auto;
}

/* Central relationship connector between the two role cards */
.rst .rc-social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px;
  padding-block: 20px;
  gap: 10px;
}
.rst .rc-social-link__rail {
  flex: 1;
  width: 1px;
  min-height: 40px;
  background: linear-gradient(180deg, transparent, var(--rc-hair-mint) 40%, var(--rc-hair-gold) 60%, transparent);
}
.rst .rc-social-link__badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--rc-midnight);
  border: 1px solid var(--rc-hair);
  box-shadow:
    0 0 0 8px rgba(var(--rc-ground-rgb), 0.9),
    0 0 34px -10px var(--rc-glow-teal);
}
.rst .rc-social-link__badge svg {
  width: 26px;
  height: 26px;
}
.rst .rc-social-link__cap {
  font-family: var(--rc-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-slate);
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-block: 8px;
}

/* ==========================================================================
   5. WHAT IS SOCIAL TRADING — comparison
   ========================================================================== */
.rst .rc-social-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 34px;
}
.rst .rc-social-compare__col {
  padding: 32px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-soft);
  background: var(--rc-petrol);
}
.rst .rc-social-compare__col--wide {
  border-color: var(--rc-hair-mint);
  background: linear-gradient(165deg, rgba(15, 143, 136, 0.14), rgba(var(--rc-petrol-rgb), 0.9));
}
.rst .rc-social-compare__hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rc-hair-soft);
}
.rst .rc-social-compare__hd svg {
  width: 30px;
  height: 30px;
  flex: none;
}
.rst .rc-social-compare__col p {
  font-size: 15px;
  color: var(--rc-slate);
  margin-bottom: 20px;
}
.rst .rc-social-compare__col ul {
  display: grid;
  gap: 11px;
}
.rst .rc-social-compare__col li {
  font-size: 14.5px;
  color: var(--rc-txt-2);
  display: flex;
  gap: 11px;
  line-height: 1.5;
}
.rst .rc-social-compare__col li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  margin-top: 9px;
  background: var(--rc-teal);
}
.rst .rc-social-compare__col--wide li::before {
  background: var(--rc-mint);
}

.rst .rc-social-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rc-hair-soft);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rst .rc-social-facts div {
  background: var(--rc-midnight);
  padding: 26px 28px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rst .rc-social-facts svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  stroke: var(--rc-mint);
}
.rst .rc-social-facts p {
  font-size: 14.5px;
  color: var(--rc-txt-2);
  line-height: 1.55;
}
.rst .rc-social-facts strong {
  color: var(--rc-txt-strong);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

/* ==========================================================================
   6. HOW IT WORKS — tabs + stepper
   ========================================================================== */
.rst .rc-social-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--rc-sunken);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius-sm);
  margin-bottom: 46px;
}
.rst .rc-social-tab {
  min-height: 44px;
  padding: 11px 22px;
  background: transparent;
  border: 0;
  border-radius: var(--rc-radius-sm);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--rc-slate);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.rst .rc-social-tab:hover {
  color: var(--rc-ivory);
}
.rst .rc-social-tab[aria-selected='true'] {
  background: var(--rc-teal);
  color: var(--rc-txt-strong);
  font-weight: 500;
}
.rst .rc-social-tab--gold[aria-selected='true'] {
  background: var(--rc-gold);
  color: var(--rc-on-accent);
  font-weight: 600;
}

.rst .rc-social-stepper {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
}
.rst .rc-social-steps {
  display: grid;
  gap: 2px;
  position: relative;
}
.rst .rc-social-step {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  width: 100%;
  text-align: start;
  cursor: pointer;
  padding: 16px 18px;
  min-height: 62px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rc-radius-sm);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}
.rst .rc-social-step:hover {
  background: rgba(var(--rc-slate-rgb), 0.05);
}
.rst .rc-social-step__n {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--rc-mono);
  font-size: 12px;
  border: 1px solid var(--rc-hair);
  color: var(--rc-slate);
  background: var(--rc-midnight);
  z-index: 1;
  transition: all 0.2s ease;
}
.rst .rc-social-step__t {
  font-size: 15px;
  color: var(--rc-slate);
  transition: color 0.18s ease;
}
.rst .rc-social-step[aria-selected='true'] {
  background: rgba(67, 215, 195, 0.07);
  border-color: var(--rc-hair-mint);
}
.rst .rc-social-step[aria-selected='true'] .rc-social-step__n {
  background: var(--rc-mint);
  color: var(--rc-on-accent);
  border-color: var(--rc-mint-text);
  font-weight: 500;
}
.rst .rc-social-step[aria-selected='true'] .rc-social-step__t {
  color: var(--rc-txt-strong);
  font-weight: 500;
}
/* Provider variant */
.rst .rc-social-steps--gold .rc-social-step[aria-selected='true'] {
  background: rgba(245, 197, 24, 0.07);
  border-color: var(--rc-hair-gold);
}
.rst .rc-social-steps--gold .rc-social-step[aria-selected='true'] .rc-social-step__n {
  background: var(--rc-gold);
  color: var(--rc-on-accent);
  border-color: var(--rc-gold-text);
}
/* The connecting spine between step markers */
.rst .rc-social-steps::before {
  content: '';
  position: absolute;
  inset-inline-start: 33px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: var(--rc-hair-soft);
}

.rst .rc-social-stepdetail {
  padding: 40px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-soft);
  background: var(--rc-petrol);
  min-height: 340px;
  display: flex;
  flex-direction: column;
}
.rst .rc-social-stepdetail h3 {
  margin-bottom: 16px;
}
.rst .rc-social-stepdetail > p {
  color: var(--rc-slate);
  margin-bottom: 26px;
  max-width: 620px;
}
.rst .rc-social-stepdetail ul {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}
.rst .rc-social-stepdetail li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  color: var(--rc-txt-2);
  line-height: 1.5;
}
.rst .rc-social-stepdetail li svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 5px;
  stroke: var(--rc-mint);
}
.rst .rc-social-steps--gold ~ .rc-social-stepdetail li svg {
  stroke: var(--rc-gold);
}
.rst .rc-social-stepdetail__foot {
  margin-top: auto;
  padding-top: 12px;
}

/* ==========================================================================
   7. STRATEGY MARKETPLACE
   ========================================================================== */
.rst .rc-social-market {
  background: var(--rc-sunken);
}
.rst .rc-social-filters {
  padding: 24px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-soft);
  background: var(--rc-petrol);
  margin-bottom: 14px;
}
.rst .rc-social-search {
  position: relative;
  margin-bottom: 20px;
}
.rst .rc-social-search svg {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  stroke: var(--rc-slate);
  pointer-events: none;
}
.rst .rc-social-search input {
  width: 100%;
  min-height: 50px;
  padding: 13px 18px 13px 46px;
  background: var(--rc-midnight);
  border: 1px solid var(--rc-hair);
  border-radius: var(--rc-radius-sm);
  color: var(--rc-ivory);
  font-size: 15px;
  transition: border-color 0.18s ease;
}
.rst .rc-social-search input::placeholder {
  color: var(--rc-slate);
  opacity: 0.8;
}
.rst .rc-social-search input:hover {
  border-color: rgba(var(--rc-slate-rgb), 0.3);
}
.rst [dir='rtl'] .rc-social-search input,
.rst .rc-social-search input {
  padding-inline: 46px 18px;
}

.rst .rc-social-fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
.rst .rc-social-field label {
  display: block;
  font-family: var(--rc-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-slate);
  margin-bottom: 8px;
}
.rst .rc-social-field select {
  width: 100%;
  min-height: 46px;
  padding: 11px 36px 11px 14px;
  background: var(--rc-midnight);
  border: 1px solid var(--rc-hair);
  border-radius: var(--rc-radius-sm);
  color: var(--rc-ivory);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A8AF' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  transition: border-color 0.18s ease;
}
.rst .rc-social-field select:hover {
  border-color: rgba(var(--rc-slate-rgb), 0.32);
}
.rst .rc-social-field select option {
  background: var(--rc-raised);
  color: var(--rc-ivory);
}

.rst .rc-social-mbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 24px;
}
.rst .rc-social-mbar__count {
  font-size: 14px;
  color: var(--rc-slate);
}
.rst .rc-social-mbar__count b {
  color: var(--rc-ivory);
  font-family: var(--rc-mono);
  font-weight: 500;
}
.rst .rc-social-mbar__right {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.rst .rc-social-reset {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rc-hair);
  color: var(--rc-slate);
  font-size: 13.5px;
  cursor: pointer;
  padding: 8px 2px;
  min-height: 44px;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.rst .rc-social-reset:hover {
  color: var(--rc-mint-text);
  border-bottom-color: var(--rc-mint-text);
}

/* -- Strategy cards -------------------------------------------------------- */
.rst .rc-social-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}
.rst .rc-social-card {
  display: flex;
  flex-direction: column;
  background: var(--rc-petrol);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.rst .rc-social-card:hover {
  border-color: var(--rc-hair-mint);
  transform: translateY(-2px);
}
.rst .rc-social-card__hd {
  padding: 22px 22px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}
.rst .rc-social-card__name {
  font-size: 16.5px;
  font-weight: 500;
  color: var(--rc-txt-strong);
  line-height: 1.3;
  margin-bottom: 6px;
}
.rst .rc-social-card__prov {
  font-size: 13px;
  color: var(--rc-slate);
  display: flex;
  align-items: center;
  gap: 7px;
}
.rst .rc-social-card__prov svg {
  width: 13px;
  height: 13px;
  stroke: var(--rc-teal);
  flex: none;
}
.rst .rc-social-watch {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--rc-hair);
  border-radius: var(--rc-radius-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}
.rst .rc-social-watch svg {
  width: 16px;
  height: 16px;
  stroke: var(--rc-slate);
  fill: none;
  transition: all 0.18s ease;
}
.rst .rc-social-watch:hover {
  border-color: var(--rc-mint-text);
}
.rst .rc-social-watch:hover svg {
  stroke: var(--rc-mint);
}
.rst .rc-social-watch[aria-pressed='true'] {
  border-color: var(--rc-mint-text);
  background: rgba(67, 215, 195, 0.1);
}
.rst .rc-social-watch[aria-pressed='true'] svg {
  stroke: var(--rc-mint);
  fill: var(--rc-mint);
}

/* Risk classification — colour PLUS text PLUS a 3-bar meter (never colour alone) */
.rst .rc-social-riskpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--rc-radius-sm);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid;
  background: rgba(var(--rc-ground-rgb), 0.6);
}
.rst .rc-social-meter {
  display: inline-flex;
  gap: 2px;
  align-items: flex-end;
}
.rst .rc-social-meter i {
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.22;
}
.rst .rc-social-meter i:nth-child(1) {
  height: 6px;
}
.rst .rc-social-meter i:nth-child(2) {
  height: 9px;
}
.rst .rc-social-meter i:nth-child(3) {
  height: 12px;
}
.rst .rc-social-meter i.on {
  opacity: 1;
}
.rst .rc-social-riskpill--low {
  color: var(--rc-mint-text);
  border-color: rgba(67, 215, 195, 0.35);
}
.rst .rc-social-riskpill--med {
  color: var(--rc-risk-med);
  border-color: rgba(var(--rc-risk-med-rgb), 0.35);
}
.rst .rc-social-riskpill--high {
  color: var(--rc-gold-text);
  border-color: rgba(245, 197, 24, 0.38);
}

.rst .rc-social-card__chart {
  position: relative;
  padding: 4px 22px 0;
}
.rst .rc-social-card__chart svg {
  width: 100%;
  height: 62px;
}

/* Badge row: carries the risk classification. */
.rst .rc-social-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 22px 14px;
}

/* Return figure sits beside the sparkline: prominent through colour, never
   larger than the strategy name, and never louder than the risk badge. */
.rst .rc-social-card__perf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 22px 0;
}
.rst .rc-social-card__return {
  flex: none;
}
.rst .rc-social-card__returnval {
  display: block;
  font-family: var(--rc-mono);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rc-mint-text);
}
.rst .rc-social-card__returnval.is-down {
  color: var(--rc-slate);
}
.rst .rc-social-card__returnlbl {
  display: block;
  margin-top: 3px;
  max-width: 92px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--rc-slate);
}
.rst .rc-social-card__spark {
  flex: 1 1 auto;
  min-width: 0;
}
.rst .rc-social-card__spark svg {
  width: 100%;
  height: 62px;
}

/* Signed value colours. Paired with a sign character, never colour alone. */
.rst .rc-social-pos {
  color: var(--rc-mint-text);
}
.rst .rc-social-neg {
  color: var(--rc-txt-3);
}
.rst .rc-social-card__chartcap {
  font-family: var(--rc-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-slate);
  opacity: 0.75;
  padding: 2px 22px 0;
}
.rst .rc-social-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rc-hair-soft);
  margin: 18px 0 0;
  border-block: 1px solid var(--rc-hair-soft);
}
.rst .rc-social-card__metrics > div {
  background: var(--rc-petrol);
  padding: 14px 12px;
  text-align: center;
}
.rst .rc-social-card__metrics dt {
  font-family: var(--rc-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-slate);
  margin-bottom: 6px;
}
.rst .rc-social-card__metrics dd {
  font-size: 13px;
  color: var(--rc-ivory);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rst .rc-social-card__tags {
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.rst .rc-social-chip {
  font-family: var(--rc-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: var(--rc-radius-sm);
  background: rgba(var(--rc-slate-rgb), 0.09);
  color: var(--rc-slate);
  border: 1px solid var(--rc-hair-soft);
}
.rst .rc-social-card__foot {
  margin-top: auto;
  padding: 0 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rst .rc-social-empty {
  grid-column: 1 / -1;
  padding: 60px 30px;
  text-align: center;
  border: 1px dashed var(--rc-hair);
  border-radius: var(--rc-radius);
  color: var(--rc-slate);
}
.rst .rc-social-empty h4 {
  margin-bottom: 8px;
}
.rst .rc-social-market__foot {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: flex-end;
}

/* ==========================================================================
   MODALS (registration routing + strategy profile)
   ========================================================================== */
.rst .rc-social-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(3, 10, 14, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.22s ease;
}
/* The closed state is display:none via the hidden attribute, not visibility.
   An element is unfocusable while it is visibility:hidden, and that value only
   settles a frame or two after the class flips — which silently swallowed the
   focus() call that moves keyboard users into the dialog. display:none is
   removed synchronously when the attribute goes, so focus lands reliably.
   The rule is needed because display:flex above would otherwise override the
   hidden attribute's built-in display:none. */
.rst .rc-social-overlay[hidden] {
  display: none;
}
.rst .rc-social-overlay.is-open {
  opacity: 1;
}
.rst .rc-social-modal {
  width: 100%;
  max-width: 720px;
  margin: auto;
  background: var(--rc-petrol);
  border: 1px solid var(--rc-hair);
  border-radius: var(--rc-radius);
  position: relative;
  box-shadow: var(--rc-shadow-modal);
  transform: translateY(10px) scale(0.99);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  max-height: none;
}
.rst .rc-social-overlay.is-open .rc-social-modal {
  transform: none;
}
.rst .rc-social-modal--wide {
  max-width: 900px;
}
.rst .rc-social-modal__hd {
  padding: 26px 30px 22px;
  border-bottom: 1px solid var(--rc-hair-soft);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.rst .rc-social-modal__logo {
  height: 44px;
  width: auto;
  margin-bottom: 16px;
  opacity: 0.95;
}
/* logo-for-black-bg.svg is white on transparent, and the light modal ground
   is #ffffff — the mark vanished. Two images, one per theme, the way the
   header's .rz-logo__img--dark / --light pair is switched. */
.rst .rc-social-modal__logo--light {
  display: none;
}
html[data-bs-theme='light'] .rst .rc-social-modal__logo--dark {
  display: none;
}
html[data-bs-theme='light'] .rst .rc-social-modal__logo--light {
  display: block;
}
.rst .rc-social-modal__hd h3 {
  margin-bottom: 8px;
}
.rst .rc-social-modal__hd p {
  font-size: 14.5px;
  color: var(--rc-slate);
  max-width: 460px;
}
.rst .rc-social-close {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--rc-hair);
  border-radius: var(--rc-radius-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}
.rst .rc-social-close svg {
  width: 16px;
  height: 16px;
  stroke: var(--rc-slate);
}
.rst .rc-social-close:hover {
  border-color: var(--rc-mint-text);
}
.rst .rc-social-close:hover svg {
  stroke: var(--rc-mint);
}
.rst .rc-social-modal__bd {
  padding: 30px;
}
.rst .rc-social-modal__ft {
  padding: 20px 30px;
  border-top: 1px solid var(--rc-hair-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--rc-slate);
}
.rst .rc-social-modal__ft a {
  color: var(--rc-mint-text);
  text-decoration: none;
  border-bottom: 1px solid var(--rc-hair-mint);
}
.rst .rc-social-modal__ft a:hover {
  border-bottom-color: var(--rc-mint-text);
}

.rst .rc-social-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.rst .rc-social-path {
  padding: 26px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-soft);
  background: var(--rc-midnight);
  display: flex;
  flex-direction: column;
}
.rst .rc-social-path h4 {
  margin-bottom: 10px;
}
.rst .rc-social-path p {
  font-size: 14px;
  color: var(--rc-slate);
  margin-bottom: 20px;
}
.rst .rc-social-path ol {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
  counter-reset: rcstep;
}
.rst .rc-social-path li {
  display: flex;
  gap: 11px;
  font-size: 13.5px;
  color: var(--rc-txt-3);
  line-height: 1.5;
  counter-increment: rcstep;
}
.rst .rc-social-path li::before {
  content: counter(rcstep);
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--rc-mono);
  font-size: 10px;
  background: rgba(var(--rc-slate-rgb), 0.12);
  color: var(--rc-slate);
}
.rst .rc-social-path .rc-social-btn {
  margin-top: auto;
}
.rst .rc-social-path--accent {
  border-color: var(--rc-hair-mint);
  background: linear-gradient(170deg, rgba(15, 143, 136, 0.12), var(--rc-midnight));
}
.rst .rc-social-path--accent-gold {
  border-color: var(--rc-hair-gold);
  background: linear-gradient(170deg, rgba(245, 197, 24, 0.09), var(--rc-midnight));
}

/* -- Strategy profile modal ------------------------------------------------ */
.rst .rc-social-prof__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 26px;
  margin-bottom: 26px;
  align-items: start;
}
.rst .rc-social-prof__chart {
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  background: var(--rc-midnight);
  padding: 20px;
}
.rst .rc-social-prof__chart svg {
  width: 100%;
  height: 168px;
}
.rst .rc-social-prof__legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  color: var(--rc-slate);
}
.rst .rc-social-prof__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rst .rc-social-prof__legend i {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}
.rst .rc-social-kv {
  display: grid;
  gap: 1px;
  background: var(--rc-hair-soft);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rst .rc-social-kv > div {
  background: var(--rc-midnight);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  font-size: 13.5px;
}
.rst .rc-social-kv dt {
  color: var(--rc-slate);
}
.rst .rc-social-kv dd {
  color: var(--rc-ivory);
  text-align: end;
}
.rst .rc-social-months div {
  background: linear-gradient(180deg, var(--rc-teal), rgba(15, 143, 136, 0.25));
  border-radius: 1px;
  min-height: 4px;
}
.rst .rc-social-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* The single row must fill the fixed height, otherwise the auto track
     collapses to zero and each bar's percentage height resolves against 0. */
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 5px;
  height: 110px;
  margin-bottom: 10px;
  position: relative;
}
.rst .rc-social-months::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--rc-hair);
  z-index: 0;
}
.rst .rc-social-months__col {
  position: relative;
  display: block;
}
.rst .rc-social-months__col span {
  position: absolute;
  inset-inline: 0;
  border-radius: 1px;
  z-index: 1;
}
.rst .rc-social-months__col span.up {
  bottom: 50%;
  background: linear-gradient(0deg, rgba(15, 143, 136, 0.55), var(--rc-mint));
}
.rst .rc-social-months__col span.dn {
  top: 50%;
  background: linear-gradient(180deg, rgba(var(--rc-slate-rgb), 0.55), rgba(var(--rc-slate-rgb), 0.22));
}
.rst .rc-social-months__lbl {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  font-family: var(--rc-mono);
  font-size: 9px;
  color: var(--rc-slate);
  text-align: center;
}
.rst .rc-social-prof__sec {
  margin-bottom: 26px;
}
.rst .rc-social-prof__sec h4 {
  margin-bottom: 14px;
}

/* ==========================================================================
   9. COPYING MODES & RISK CONTROLS
   ========================================================================== */
.rst .rc-social-modes {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px;
}
.rst .rc-social-modelist {
  display: grid;
  gap: 8px;
  align-content: start;
}
.rst .rc-social-mode {
  width: 100%;
  text-align: start;
  cursor: pointer;
  min-height: 60px;
  padding: 15px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--rc-petrol);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius-sm);
  transition: all 0.18s ease;
}
.rst .rc-social-mode:hover {
  border-color: rgba(var(--rc-slate-rgb), 0.28);
}
.rst .rc-social-mode svg {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: var(--rc-slate);
  transition: stroke 0.18s ease;
}
.rst .rc-social-mode b {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--rc-ivory);
}
.rst .rc-social-mode small {
  font-size: 12.5px;
  color: var(--rc-slate);
}
.rst .rc-social-mode[aria-selected='true'] {
  border-color: var(--rc-mint-text);
  background: rgba(67, 215, 195, 0.08);
  box-shadow: inset 3px 0 0 var(--rc-mint);
}
.rst .rc-social-mode[aria-selected='true'] svg {
  stroke: var(--rc-mint);
}
.rst .rc-social-mode[aria-selected='true'] b {
  color: var(--rc-txt-strong);
}

.rst .rc-social-sim {
  padding: 34px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-soft);
  background: var(--rc-petrol);
}
.rst .rc-social-sim h3 {
  margin-bottom: 12px;
}
.rst .rc-social-sim__desc {
  color: var(--rc-slate);
  font-size: 15px;
  margin-bottom: 28px;
  max-width: 620px;
}
.rst .rc-social-sim__rows {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}
.rst .rc-social-simrow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 108px;
  gap: 18px;
  align-items: center;
}
.rst .rc-social-simrow__lbl {
  font-size: 13.5px;
  color: var(--rc-slate);
}
.rst .rc-social-simrow__lbl b {
  display: block;
  color: var(--rc-ivory);
  font-weight: 500;
  font-size: 14.5px;
}
.rst .rc-social-simbar {
  height: 10px;
  background: rgba(var(--rc-ground-rgb), 0.8);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--rc-hair-soft);
}
.rst .rc-social-simbar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--rc-teal), var(--rc-mint));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.rst .rc-social-simbar--prov span {
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.7), var(--rc-gold));
}
.rst .rc-social-simrow__val {
  text-align: end;
  font-size: 14px;
  color: var(--rc-ivory);
}
.rst .rc-social-sim__note {
  font-size: 13px;
  color: var(--rc-slate);
  line-height: 1.6;
}
.rst .rc-social-slider {
  margin-bottom: 26px;
}
.rst .rc-social-slider label {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--rc-slate);
  margin-bottom: 10px;
}
.rst .rc-social-slider label b {
  color: var(--rc-mint-text);
  font-family: var(--rc-mono);
  font-weight: 500;
}
.rst input[type='range'] {
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.rst input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--rc-hair);
  border-radius: 2px;
}
.rst input[type='range']::-moz-range-track {
  height: 3px;
  background: var(--rc-hair);
  border-radius: 2px;
}
.rst input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  background: var(--rc-mint);
  border-radius: 50%;
  border: 3px solid var(--rc-petrol);
  box-shadow: 0 0 0 1px var(--rc-mint);
}
.rst input[type='range']::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--rc-mint);
  border-radius: 50%;
  border: 3px solid var(--rc-petrol);
  box-shadow: 0 0 0 1px var(--rc-mint);
}
.rst .rc-social-limits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rc-hair-soft);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  overflow: hidden;
  margin-top: 40px;
}
.rst .rc-social-limit {
  background: var(--rc-petrol);
  padding: 24px;
}
.rst .rc-social-limit svg {
  width: 20px;
  height: 20px;
  stroke: var(--rc-mint);
  margin-bottom: 14px;
}
.rst .rc-social-limit h4 {
  margin-bottom: 7px;
  font-size: 15.5px;
}
.rst .rc-social-limit p {
  font-size: 13.5px;
  color: var(--rc-slate);
  line-height: 1.55;
}

/* ==========================================================================
   10. PROVIDER PROGRAMME (gold)
   ========================================================================== */
.rst .rc-social-provider {
  background: radial-gradient(90% 80% at 88% 8%, rgba(245, 197, 24, 0.1) 0%, transparent 58%), var(--rc-band-alt);
  border-block: 1px solid var(--rc-hair-gold);
}
.rst .rc-social-provider .rc-social-h2 {
  color: var(--rc-txt-strong);
}
.rst .rc-social-prov__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}
.rst .rc-social-prov__item {
  padding: 26px;
  border-radius: var(--rc-radius);
  border: 1px solid rgba(245, 197, 24, 0.16);
  background: rgba(var(--rc-ground-rgb), 0.5);
}
.rst .rc-social-prov__item h4 {
  margin-bottom: 9px;
  display: flex;
  gap: 11px;
  align-items: center;
}
.rst .rc-social-prov__item h4 svg {
  width: 17px;
  height: 17px;
  stroke: var(--rc-gold);
  flex: none;
}
.rst .rc-social-prov__item p {
  font-size: 14px;
  color: var(--rc-slate);
  line-height: 1.6;
}
.rst .rc-social-prov__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-gold);
  background: rgba(245, 197, 24, 0.05);
}

/* ==========================================================================
   11. FEES
   ========================================================================== */
.rst .rc-social-fees {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 44px;
  align-items: start;
}
.rst .rc-social-acc {
  display: grid;
  gap: 10px;
}
.rst .rc-social-accitem {
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  background: var(--rc-petrol);
  overflow: hidden;
}
.rst .rc-social-accbtn {
  width: 100%;
  text-align: start;
  cursor: pointer;
  min-height: 60px;
  padding: 19px 22px;
  background: transparent;
  border: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: var(--rc-ivory);
  transition: color 0.18s ease;
}
.rst .rc-social-accbtn:hover {
  color: var(--rc-mint-text);
}
.rst .rc-social-accbtn svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: var(--rc-slate);
  transition:
    transform 0.24s ease,
    stroke 0.18s ease;
}
.rst .rc-social-accbtn[aria-expanded='true'] svg {
  transform: rotate(45deg);
  stroke: var(--rc-mint);
}
.rst .rc-social-accpanel {
  display: none;
  padding: 0 22px 24px;
}
.rst .rc-social-accpanel.is-open {
  display: block;
}
.rst .rc-social-accpanel p {
  font-size: 14.5px;
  color: var(--rc-slate);
  line-height: 1.65;
  margin-bottom: 16px;
}
.rst .rc-social-accpanel dl {
  display: grid;
  gap: 1px;
  background: var(--rc-hair-soft);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
}
.rst .rc-social-accpanel dl > div {
  background: var(--rc-midnight);
  padding: 11px 15px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  font-size: 13.5px;
}
.rst .rc-social-accpanel dt {
  color: var(--rc-slate);
  flex: none;
}
.rst .rc-social-accpanel dd {
  color: var(--rc-txt-2);
  text-align: end;
}

.rst .rc-social-calc {
  position: sticky;
  top: calc(var(--rc-header-offset) + var(--rc-subnav-h) + 24px);
  padding: 30px;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-hair-mint);
  background: linear-gradient(170deg, rgba(15, 143, 136, 0.13), var(--rc-petrol));
}
.rst .rc-social-calc__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--rc-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-mint-text);
  border: 1px solid var(--rc-hair-mint);
  padding: 5px 10px;
  border-radius: var(--rc-radius-sm);
}
.rst .rc-social-calc h3 {
  margin-bottom: 22px;
  font-size: 24px;
}
.rst .rc-social-calc__out {
  display: grid;
  gap: 1px;
  background: var(--rc-hair-soft);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  margin-block: 22px;
}
.rst .rc-social-calc__out > div {
  background: var(--rc-midnight);
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
}
.rst .rc-social-calc__out dt {
  color: var(--rc-slate);
}
.rst .rc-social-calc__out dd {
  color: var(--rc-ivory);
}
.rst .rc-social-calc__out > div.is-total {
  background: rgba(67, 215, 195, 0.1);
}
.rst .rc-social-calc__out > div.is-total dt {
  color: var(--rc-ivory);
  font-weight: 500;
}
.rst .rc-social-calc__out > div.is-total dd {
  color: var(--rc-mint-text);
  font-weight: 500;
}
.rst .rc-social-calc__note {
  font-size: 12.5px;
  color: var(--rc-slate);
  line-height: 1.6;
}

/* ==========================================================================
   12. GOVERNANCE
   ========================================================================== */
.rst .rc-social-gov {
  background: var(--rc-sunken);
}
.rst .rc-social-govgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--rc-hair-soft);
  border: 1px solid var(--rc-hair-soft);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rst .rc-social-govitem {
  background: var(--rc-midnight);
  padding: 30px 28px;
}
.rst .rc-social-govitem svg {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
}
.rst .rc-social-govitem h4 {
  margin-bottom: 8px;
  font-size: 15.5px;
}
.rst .rc-social-govitem p {
  font-size: 13.5px;
  color: var(--rc-slate);
  line-height: 1.6;
}

/* ==========================================================================
   13. WHY ROYCE — capability grid
   ========================================================================== */
.rst .rc-social-whygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  column-gap: 44px;
  row-gap: 6px;
}
.rst .rc-social-why {
  padding: 26px 0;
  border-top: 1px solid var(--rc-hair-soft);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.rst .rc-social-why svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  stroke: var(--rc-mint);
}
.rst .rc-social-why h4 {
  margin-bottom: 6px;
  font-size: 15.5px;
}
.rst .rc-social-why p {
  font-size: 13.5px;
  color: var(--rc-slate);
  line-height: 1.6;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.rst .rc-social-faq {
  max-width: 900px;
}
.rst .rc-social-faqitem {
  border-bottom: 1px solid var(--rc-hair-soft);
}
.rst .rc-social-faqbtn {
  width: 100%;
  text-align: start;
  cursor: pointer;
  min-height: 66px;
  padding: 22px 4px;
  background: transparent;
  border: 0;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--rc-ivory);
  transition: color 0.18s ease;
}
.rst .rc-social-faqbtn:hover {
  color: var(--rc-mint-text);
}
.rst .rc-social-faqbtn svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--rc-slate);
  transition:
    transform 0.25s ease,
    stroke 0.18s ease;
}
.rst .rc-social-faqbtn[aria-expanded='true'] {
  color: var(--rc-mint-text);
}
.rst .rc-social-faqbtn[aria-expanded='true'] svg {
  transform: rotate(45deg);
  stroke: var(--rc-mint);
}
.rst .rc-social-faqpanel {
  display: none;
  padding: 0 4px 26px;
  max-width: 720px;
}
.rst .rc-social-faqpanel.is-open {
  display: block;
}
.rst .rc-social-faqpanel p {
  color: var(--rc-slate);
  font-size: 15px;
  line-height: 1.7;
}
.rst .rc-social-faqpanel p + p {
  margin-top: 12px;
}

/* ==========================================================================
   15. FINAL CONVERSION
   ========================================================================== */
.rst .rc-social-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(168deg, #0f8f88 0%, #0b3f49 38%, var(--rc-navy) 100%);
}
.rst .rc-social-final::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(244, 241, 234, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(244, 241, 234, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 76%);
}
.rst .rc-social-final__in {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}
.rst .rc-social-final h2 {
  margin-bottom: 20px;
}
.rst .rc-social-final > .rc-social-shell > .rc-social-final__in > p {
  margin-inline: auto;
  color: #d4e3e6;
}
.rst .rc-social-final .rc-social-actions {
  justify-content: center;
  margin-top: 38px;
}
.rst .rc-social-final__sec {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  margin-block: 30px;
}
.rst .rc-social-final__sec a {
  font-size: 14.5px;
  color: #cfe2e4;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.28);
  padding: 8px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.rst .rc-social-final__sec a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.rst .rc-social-final .rc-social-risk {
  margin: 44px auto 0;
  text-align: start;
  background: rgba(6, 20, 27, 0.42);
  border-inline-start-color: rgba(244, 241, 234, 0.5);
  color: #d4e3e6;
}
.rst .rc-social-final .rc-social-risk svg {
  stroke: #d4e3e6;
}
.rst .rc-social-final .rc-social-risk strong {
  color: #fff;
}

/* Anchor offset so in-page links clear the site header + sticky sub-nav. */
.rst [id^='rc-social-'] {
  scroll-margin-top: calc(var(--rc-header-offset) + var(--rc-subnav-h) + 16px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .rst .rc-social-fees {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .rst .rc-social-calc {
    position: static;
  }
  .rst .rc-social-modes {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .rst .rc-social-stepper {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 30px;
  }
}

@media (max-width: 991.98px) {
  .rst {
    --rc-pad-y: 72px;
    --rc-gutter: 26px;
  }
  .rst .rc-social-hero__grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  /* Requirement: hero visualisation moves BELOW the text on small screens. */
  .rst .rc-social-hero__copy {
    order: 1;
  }
  .rst .rc-social-net {
    order: 2;
  }
  .rst .rc-social-roles {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rst .rc-social-link {
    width: auto;
    flex-direction: row;
    padding: 18px 0;
  }
  .rst .rc-social-link__rail {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--rc-hair-mint) 40%, var(--rc-hair-gold) 60%, transparent);
  }
  .rst .rc-social-link__cap {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0 12px;
  }
  .rst .rc-social-compare {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-prof__top {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-subnav__acts .rc-social-btn--outline,
  .rst .rc-social-subnav__acts .rc-social-btn--outline-gold {
    display: none;
  }
  .rst .rc-social-limits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .rst .rc-social-stepper {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rst .rc-social-steps {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .rst .rc-social-steps::-webkit-scrollbar {
    display: none;
  }
  .rst .rc-social-steps::before {
    display: none;
  }
  .rst .rc-social-step {
    border-color: var(--rc-hair-soft);
    background: var(--rc-petrol);
  }
  .rst .rc-social-facts {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-paths {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-simrow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rst .rc-social-simrow__val {
    text-align: start;
  }
  .rst .rc-social-subnav__login {
    display: none;
  }
  .rst .rc-social-subnav__in {
    gap: 12px;
  }
}

@media (max-width: 575.98px) {
  .rst {
    --rc-pad-y: 46px;
    --rc-gutter: 18px;
    font-size: 16px;
  }
  .rst .rc-social-overlay {
    padding: 0;
    align-items: stretch;
  }
  .rst .rc-social-modal {
    max-width: none;
    border-radius: 0;
    border-inline: 0;
    min-height: 100%;
  }
  .rst .rc-social-modal__hd,
  .rst .rc-social-modal__bd {
    padding: 22px 20px;
  }
  .rst .rc-social-modal__ft {
    padding: 18px 20px;
  }
  .rst .rc-social-cards {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-card__foot {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rst .rc-social-actions .rc-social-btn {
    width: 100%;
  }
  .rst .rc-social-role {
    padding: 26px 22px;
  }
  .rst .rc-social-compare__col,
  .rst .rc-social-sim,
  .rst .rc-social-calc,
  .rst .rc-social-stepdetail {
    padding: 26px 22px;
  }
  .rst .rc-social-months {
    height: 86px;
    gap: 3px;
  }
  .rst .rc-social-limits {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-subnav__acts .rc-social-btn {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 12.5px;
  }
  .rst .rc-social-subnav__links a {
    padding: 10px 9px;
    font-size: 13.5px;
  }
  .rst .rc-social-months__lbl {
    font-size: 8px;
  }
  .rst .rc-social-final .rc-social-actions .rc-social-btn {
    width: 100%;
  }
  .rst .rc-social-final__sec {
    gap: 4px;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 399.98px) {
  .rst .rc-social-fgrid {
    grid-template-columns: 1fr;
  }
  .rst .rc-social-card__metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rst *,
  .rst *::before,
  .rst *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rst .rc-social-net .rc-flow {
    stroke-dasharray: none;
    opacity: 0.55;
  }
}

/* ==========================================================================
   RTL CORRECTIONS
   The only two places the prototype reaches for a physical direction. Every
   other rule in this file is already written in logical properties, so this
   block is the whole of the RTL work.
   ========================================================================== */
html.rtl .rst,
.rst[dir='rtl'] {
  /* Georgia carries no Arabic glyphs. Left as-is, every display line in the
     Arabic copy would fall through to whatever serif the OS happens to pick,
     which is a different face on every machine. */
  --rc-serif: 'Ping AR + LT', Georgia, serif;
}

html.rtl .rst .rc-social-field select {
  /* The arrow is a background image pinned with a physical keyword, and the
     36px gap it sits in is physical padding. Both mirror together or the arrow
     lands on top of the label. */
  padding-block: 11px;
  padding-inline: 14px 36px;
  background-position: left 12px center;
}

/* The hero diagram's SVG labels. The prototype set font-family as a
   presentation attribute on each <text> ("DM Mono, monospace" / "Jost,
   sans-serif"); both webfonts are gone, so the attributes were dropped from the
   markup and the two faces are applied here instead — one place to change, and
   the RTL --rc-serif override reaches them too. */
.rst .rc-social-net__svg text {
  font-family: var(--rc-sans);
}

.rst .rc-social-net__svg .rc-net-mono,
.rst .rc-social-net__svg .rc-net-mono text {
  font-family: var(--rc-mono);
}