/**
 * RCS Theme — Main Stylesheet v1.3.0
 * Antique cartographic aesthetic.
 * @package RCS_Theme
 */

/* ── 1. Custom Properties ─────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINT MODEL — three viewports
   ═══════════════════════════════════════════════════════════════════════════

   desktop            no query
   mobile portrait    (max-width: 950px) and (orientation: portrait)
   mobile landscape   (orientation: landscape) and (max-width: 950px)
   any narrow         (max-width: 950px)
   small phone        (max-width: 600px)   — refinement tier, not a viewport

   ── The gap, and why every 950px query carries a second condition ──────────

   Every `max-width: 950px` block also fires for
   `(max-width: 1150px) and (max-height: 650px)`.

   A foldable in landscape reports a CSS viewport around 980px — wider than
   950, so none of the mobile rules applied, but narrower than the desktop
   layout assumes. The result was a page that was neither: the site title
   wrapped to two lines, the region pills wrapped, Charts on Watch dropped
   below the post list because its own breakpoint is 1100, and the text-size
   control reappeared because it hides only below 600. Every symptom followed
   from landing between two breakpoints that disagreed.

   The second condition is guarded on HEIGHT, not width alone. Simply raising
   the mobile boundary to 1150 would catch a laptop window snapped to half a
   screen — around 1024-1100 wide but 700-900 tall — and hand a keyboard user
   drawers and a bottom toolbar. A phone in landscape is wide AND short; a
   laptop window is wide and tall. Height is what separates them.

   Reproduced in Firefox on Android but not Chrome, which computed a narrower
   viewport on the same device. Rather than chase the difference between two
   browsers' viewport reporting, the gap itself was closed.

   ── Deliberately left alone ────────────────────────────────────────────────

   1100  .rcs-region__grid          three columns to two — a narrow-DESKTOP
   1000  .rcs-homepage-grid           tier, correct above 950 and unrelated
    700  .rcs-homepage-grid           to the gap
    720  .rcs-subscribe__standalone-title  overflow guard, well below the gap
    400  header site name, logo     very-small-phone tier

   These are progressive tiers, not strays. Folding them into 950 would change
   layout at widths where nothing is wrong.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Navy/parchment hybrid palette */
    --rcs-navy:          #0a1628;
    --rcs-navy-mid:      #0e1e38;
    --rcs-cobalt:        #1e3a5f;
    --rcs-parchment:     #f0e6c8;
    --rcs-parchment-dk:  #e0d0a0;
    --rcs-parchment-worn:#d4bc82;
    --rcs-ink:           #1e130a;
    --rcs-ink-faded:     #4a3520;
    --rcs-ink-light:     #7a6040;
    --rcs-gold:          #c9a84c;
    --rcs-gold-dk:       #9a7820;

    /* Chart sentiment border colors — slightly lightened from the original
       hover-only tones (2026-07 request) so they read clearly at rest,
       not just when a chart is magnified. Still muted/antique rather than
       "traffic light" bright, to stay in keeping with the map palette. */
    --rcs-chart-positive: #539265;
    --rcs-chart-negative: #a64841;
    --rcs-chart-neutral:  #a7987c;
    --rcs-red:           #8b1a1a;
    --rcs-rule:          #a0845c;
    --rcs-cobalt-accent: #2a5f9e;

    /* Typography */
    --rcs-font-brand:   'Outfit', 'Helvetica Neue', Arial, sans-serif;
    --rcs-font-display: 'Cinzel', 'Times New Roman', serif;
    --rcs-font-body:    'IM Fell English', 'Garamond', Georgia, serif;
    --rcs-font-mono:    'Courier Prime', 'Courier New', monospace;

    /* Spacing — scale runs 1,2,3,4,5,6,8,10,12 (0.25rem steps up to 1.5rem,
       then 0.5rem steps). NOTE: 5 and 10 were referenced in several rules
       before they were ever defined; an undefined custom property makes the
       browser throw away the WHOLE declaration, which silently killed the
       subscribe ribbon's padding among others. Keep every step that's used
       defined here. */
    --rcs-space-1: 0.25rem;
    --rcs-space-2: 0.5rem;
    --rcs-space-3: 0.75rem;
    --rcs-space-4: 1rem;
    --rcs-space-5: 1.25rem;
    --rcs-space-6: 1.5rem;
    --rcs-space-8: 2rem;
    --rcs-space-10: 2.5rem;
    --rcs-space-12: 3rem;

    --rcs-max-width: 1460px;
    --rcs-shadow-sm: 2px 2px 6px rgba(30,19,10,.18);
    --rcs-shadow-md: 4px 4px 14px rgba(30,19,10,.25);
    --rcs-transition: 180ms ease-in-out;
}

/* ── 2. Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
    background-color: var(--rcs-parchment);
    color: var(--rcs-ink);
    font-family: var(--rcs-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    min-height: 100vh;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--rcs-red); text-decoration: none; transition: color var(--rcs-transition); }
a:hover, a:focus-visible { color: var(--rcs-ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--rcs-gold); outline-offset: 3px; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

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

/* ── 3. Typography ────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--rcs-font-display);
    font-weight: 600;
    line-height: 1.25;
    color: var(--rcs-ink);
    letter-spacing: 0.03em;
}
h1 { font-size: clamp(1.75rem,4vw,2.75rem); }
h2 { font-size: clamp(1.4rem,3vw,2rem); }
h3 { font-size: clamp(1.1rem,2.5vw,1.5rem); }
p { line-height: 1.85; margin-bottom: var(--rcs-space-4); }
p:last-child { margin-bottom: 0; }

/* ── 4. Site Header ───────────────────────────────────────────────────────── */
.rcs-header {
    background-color: var(--rcs-navy);
    border-bottom: 3px solid var(--rcs-cobalt);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.rcs-header__inner {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-4) var(--rcs-space-6);
    display: flex;
    align-items: center;
    gap: var(--rcs-space-6);
}
.rcs-header__logo-img { width: 120px; height: auto; }

/* Account link (Log In / Log Out) — pinned to the far right of the header
   regardless of how much space the logo/title take up on the left. */
.rcs-header__account {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* Upgrade button — deliberately more pronounced than Log Out/Log In
   (solid gold fill vs. their subtle outline) since this is meant to
   stand out as an upsell prompt, not blend in as routine navigation. */
.rcs-header__upgrade-link {
    display: inline-block;
    font-family: var(--rcs-font-brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    text-decoration: none;
    background-color: var(--rcs-gold);
    border: 1px solid var(--rcs-gold);
    padding: 0.4rem 0.95rem;
    border-radius: 3px;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rcs-header__upgrade-link:hover,
.rcs-header__upgrade-link:focus-visible {
    background-color: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
    color: var(--rcs-parchment);
}
.rcs-header__account-link {
    display: inline-block;
    font-family: var(--rcs-font-brand);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240,230,200,.75);
    text-decoration: none;
    border: 1px solid rgba(201,168,76,.4);
    padding: 0.4rem 0.95rem;
    border-radius: 3px;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.rcs-header__account-link:hover,
.rcs-header__account-link:focus-visible {
    color: var(--rcs-gold);
    border-color: var(--rcs-gold);
    background-color: rgba(201,168,76,.1);
}

/* Consultation button — more present than the plain Log Out link (it gets
   a faint gold fill + fuller gold border), but deliberately quieter than
   the solid-gold Upgrade button. A middle tier of emphasis. */
.rcs-header__consult-link {
    display: inline-block;
    font-family: var(--rcs-font-brand);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rcs-gold);
    text-decoration: none;
    background-color: rgba(201,168,76,.12);
    border: 1px solid var(--rcs-gold);
    padding: 0.4rem 0.95rem;
    border-radius: 3px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.rcs-header__consult-link:hover,
.rcs-header__consult-link:focus-visible {
    background-color: var(--rcs-gold);
    color: var(--rcs-navy);
}

/* Subscribe — solid gold call-to-action in the header, same weight as the
   Upgrade button (they're never shown together: Upgrade is for Macro
   subscribers, Subscribe is for non-subscribers). */
.rcs-header__subscribe-link {
    display: inline-block;
    font-family: var(--rcs-font-brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    text-decoration: none;
    background-color: var(--rcs-gold);
    border: 1px solid var(--rcs-gold);
    padding: 0.4rem 0.95rem;
    border-radius: 3px;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rcs-header__subscribe-link:hover,
.rcs-header__subscribe-link:focus-visible {
    background-color: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
    color: var(--rcs-parchment);
}

/* WordPress custom-logo (set via Appearance → Customize → Site Identity) */
.custom-logo-link         { display: block; line-height: 0; flex-shrink: 0; }
.custom-logo-link:hover,
.custom-logo-link:focus   { opacity: 0.85; }
.custom-logo              { width: 120px; height: auto; display: block; }
.rcs-header__title-group {
    padding-left: var(--rcs-space-6);
    border-left: 1px solid rgba(30,58,95,.8);
}
.rcs-header__site-name {
    display: block;
    font-family: var(--rcs-font-display) !important;  /* Cinzel — was Outfit */
    font-weight: 700 !important;
    font-size: clamp(1.2rem,2.1vw,1.75rem) !important;
    text-transform: uppercase !important;  /* matches the footer brand line's treatment */
    letter-spacing: 0.05em;  /* dialed back from 0.14em, which read as too spread out at this larger size */
    color: var(--rcs-parchment) !important;  /* unchanged — footer uses gold, this stays parchment as requested */
    text-decoration: none;
    line-height: 1.1;
}
.rcs-header__site-name:hover { color: var(--rcs-cobalt-accent) !important; text-decoration: none; }
.rcs-header__tagline {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(200,215,240,.5) !important;
    margin-top: 0.3rem;
}

/* Nav */
.rcs-header__nav { margin-top: auto; margin-left: auto; }
.rcs-nav__list {
    display: flex; flex-wrap: wrap; gap: 0; align-items: center;
    border-top: 1px solid rgba(255,255,255,.06);
}
.rcs-nav__list li a {
    display: inline-block;
    font-family: var(--rcs-font-display);
    font-size: 0.82rem !important;
    font-weight: 600;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    color: rgba(200,215,240,.7);
    text-decoration: none;
    padding: var(--rcs-space-3) var(--rcs-space-4);
    border-bottom: 2px solid transparent;
    transition: color var(--rcs-transition), border-color var(--rcs-transition);
}
.rcs-nav__list li a:hover,
.rcs-nav__list li.current-menu-item > a {
    color: var(--rcs-gold);
    border-bottom-color: var(--rcs-gold);
    text-decoration: none;
}

/* ── 5. Map Hero ──────────────────────────────────────────────────────────── */
.rcs-map-hero {
    background-color: #1a120a;
    position: relative;
    border-top: 3px solid #2a1e0a;
    border-bottom: 3px solid #2a1e0a;
}
.rcs-map-hero__inner {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding-inline: 8% !important;
    padding-block: 0 !important;
}
.rcs-map-hero__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid var(--rcs-rule);
    box-shadow: var(--rcs-shadow-md), 0 0 40px rgba(154,120,32,.12);
    background: #1a120a;
    max-height: none !important;
    transition: max-height 400ms ease;
}
.rcs-map-hero__frame--collapsed { max-height: 0 !important; overflow: hidden !important; }
.rcs-map-hero__image {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    filter: none !important;
    user-select: none;
    -webkit-user-drag: none;
}
.rcs-map-hero__overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.rcs-map-hero__toolbar { min-height: 0; padding-bottom: 0; }
.rcs-map-hero__heading { display: none; }

/* Map pins */
.rcs-map-pin { cursor: pointer; pointer-events: all; transition: transform var(--rcs-transition); transform-origin: center; }
.rcs-map-pin:hover, .rcs-map-pin:focus { transform: scale(1.4); }
.rcs-map-pin__dot { fill: var(--rcs-red); stroke: var(--rcs-parchment); stroke-width: 1.5; }
.rcs-map-pin__pulse { fill: var(--rcs-red); opacity: 0; animation: rcs-pin-pulse 2.4s ease-out infinite; }
@keyframes rcs-pin-pulse { 0% { opacity:.6; r:6; } 100% { opacity:0; r:20; } }

/* Map panel */
.rcs-map-panel {
    position: absolute; top: var(--rcs-space-6); left: var(--rcs-space-6);
    width: 300px; max-width: calc(100% - var(--rcs-space-12));
    background: var(--rcs-parchment); border: 2px solid var(--rcs-rule);
    box-shadow: var(--rcs-shadow-md); z-index: 20;
}
.rcs-map-panel[hidden] { display: none; }
.rcs-map-panel__inner { padding: var(--rcs-space-4); }
.rcs-map-panel__close {
    position: absolute; top: var(--rcs-space-2); right: var(--rcs-space-2);
    width: 24px; height: 24px; background: none;
    border: 1px solid var(--rcs-rule); color: var(--rcs-ink-faded);
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
}
.rcs-map-panel__close:hover { background: var(--rcs-red); color: var(--rcs-parchment); border-color: var(--rcs-red); }

/* ── 6. Homepage Panels ───────────────────────────────────────────────────── */
.rcs-panels { padding: var(--rcs-space-12) 0; background-color: var(--rcs-parchment); }
.rcs-panels__inner {
    max-width: var(--rcs-max-width); margin-inline: auto;
    padding-inline: var(--rcs-space-6);
    display: grid; gap: var(--rcs-space-8); align-items: start;
}
.rcs-panels__inner--two-col  { grid-template-columns: 2fr 1fr; }
.rcs-panels__inner--four-col { grid-template-columns: repeat(4, 1fr); }
.rcs-panels__placeholder {
    background: var(--rcs-parchment-dk); border: 1px dashed var(--rcs-parchment-worn);
    padding: var(--rcs-space-6); text-align: center;
    font-family: var(--rcs-font-mono); font-size: 0.75rem; color: var(--rcs-ink-light);
}

/* Premium upsell */
.rcs-upsell {
    margin-top: var(--rcs-space-8);
    padding: var(--rcs-space-6);
    border: 1px solid var(--rcs-parchment-worn);
    border-left: 4px solid var(--rcs-cobalt-accent);
    background: var(--rcs-parchment-dk);
}
.rcs-upsell__heading {
    font-family: var(--rcs-font-display);
    font-size: 1.15rem !important;
    letter-spacing: 0.08em;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-4);
}
.rcs-upsell__text { font-size: 1rem !important; line-height: 1.7; color: var(--rcs-ink-faded); }
.rcs-upsell__link {
    display: inline-block;
    margin-top: var(--rcs-space-3);
    margin-right: var(--rcs-space-3);
    padding: var(--rcs-space-3) var(--rcs-space-4);
    font-family: var(--rcs-font-display);
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--rcs-cobalt);
    color: var(--rcs-cobalt);
    text-decoration: none;
    transition: all var(--rcs-transition);
}
.rcs-upsell__link--primary {
    background: var(--rcs-navy); color: var(--rcs-parchment); border-color: var(--rcs-navy);
}
/* Consultation link — gold outline, echoing the header's low-key
   consultation button so the trio reads consistently across the site. */
.rcs-upsell__link--consult {
    border-color: var(--rcs-gold-dk);
    color: var(--rcs-gold-dk);
}
.rcs-upsell__link--consult:hover {
    background: var(--rcs-gold-dk) !important;
    color: var(--rcs-parchment) !important;
    border-color: var(--rcs-gold-dk);
}
.rcs-upsell__link:hover { background: var(--rcs-navy); color: var(--rcs-parchment); text-decoration: none; }

/* Free-tier Substack pointer — sits below Premium Access inside the SAME
   sticky wrapper (see .rcs-upsell-sticky-wrap below), deliberately with no
   border/background so it doesn't read as a second boxed upsell. */
.rcs-free-access {
    margin-top: var(--rcs-space-6);
}
.rcs-free-access__heading {
    font-family: var(--rcs-font-display);
    font-size: 1.15rem !important;
    letter-spacing: 0.08em;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-3);
}
.rcs-free-access__text {
    font-size: 1rem !important;
    line-height: 1.7;
    color: var(--rcs-ink-faded);
    margin-bottom: var(--rcs-space-3);
}

/* Substack button — same understated, site-palette treatment as the
   LinkedIn button in the bio section (navy/gold, not the platform's own
   brand color), so it reads as part of the site. */
.rcs-substack-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    text-decoration: none;
    transition: background-color var(--rcs-transition), color var(--rcs-transition);
}
.rcs-substack-btn:hover,
.rcs-substack-btn:focus-visible {
    background-color: var(--rcs-navy);
    color: var(--rcs-parchment);
    text-decoration: none;
}
.rcs-substack-btn__icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ── 7. Widgets ───────────────────────────────────────────────────────────── */
.rcs-widget { margin-bottom: var(--rcs-space-8); }
.rcs-widget:last-child { margin-bottom: 0; }
.rcs-widget__title {
    font-family: var(--rcs-font-display);
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rcs-parchment);
    background-color: var(--rcs-navy);
    padding: var(--rcs-space-2) var(--rcs-space-4);
    margin-bottom: var(--rcs-space-4);
    position: relative;
}
.rcs-widget__title::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--rcs-gold);
}
.rcs-widget__title span { display: block; }

/* ── 8. REGION PAGES ──────────────────────────────────────────────────────── */
.rcs-region {
    background: var(--rcs-parchment);
    min-height: 80vh;
}

/* Region page header */
.rcs-region__header {
    background: var(--rcs-navy);
    border-bottom: 2px solid var(--rcs-cobalt);
    padding: var(--rcs-space-6) 0 var(--rcs-space-4);
}
.rcs-region__header-inner {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding-inline: var(--rcs-space-6);
}

/* Breadcrumb */
.rcs-region__breadcrumb {
    font-family: var(--rcs-font-mono);
    font-size: 0.75rem;
    color: rgba(200,215,240,.55);
    margin-bottom: var(--rcs-space-3);
}
.rcs-region__breadcrumb a { color: rgba(200,215,240,.7); text-decoration: none; }
.rcs-region__breadcrumb a:hover { color: var(--rcs-gold); }
.rcs-region__breadcrumb-sep { margin-inline: var(--rcs-space-2); }
.rcs-region__breadcrumb-current { color: rgba(200,215,240,.9); }

/* Region title */
.rcs-region__title {
    font-family: var(--rcs-font-brand) !important;
    font-size: clamp(1.6rem,3vw,2.4rem);
    font-weight: 700;
    color: var(--rcs-parchment);
    letter-spacing: 0.02em;
    margin-bottom: var(--rcs-space-4);
}

/* Sibling region nav strip */
.rcs-region__sibling-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rcs-space-2);
    margin-top: var(--rcs-space-2);
}
.rcs-region__sibling-link {
    font-family: var(--rcs-font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(200,215,240,.6);
    text-decoration: none;
    padding: var(--rcs-space-1) var(--rcs-space-3);
    border: 1px solid rgba(200,215,240,.2);
    transition: all var(--rcs-transition);
}
.rcs-region__sibling-link:hover {
    color: var(--rcs-gold);
    border-color: var(--rcs-gold);
    text-decoration: none;
}
.rcs-region__sibling-link--active {
    color: var(--rcs-gold);
    border-color: var(--rcs-gold);
    background: rgba(201,168,76,.12);
}

/* Three-column body grid */
.rcs-region__body {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-8) var(--rcs-space-6);
}
.rcs-region__grid {
    display: grid;
    grid-template-columns: 340px 1fr 340px;
    grid-template-areas: "left center right";
    gap: var(--rcs-space-8);
    align-items: start;
}
.rcs-region__col--left   { grid-area: left; }
.rcs-region__col--center { grid-area: center; }
.rcs-region__col--right  { grid-area: right; }

/* ── Post cards (center column) ─────────────────────────────────────────── */
.rcs-region__posts-header {
    border-bottom: 2px solid var(--rcs-navy);
    padding-bottom: var(--rcs-space-3);
    margin-bottom: var(--rcs-space-6);
}
.rcs-region__posts-heading {
    font-family: var(--rcs-font-display);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    font-weight: 700;
}

.rcs-post-list { display: flex; flex-direction: column; }

.rcs-post-card { padding-bottom: var(--rcs-space-4); }

/* Post card header — thumbnail left, title right */
.rcs-post-card__header {
    display: flex;
    gap: var(--rcs-space-4);
    align-items: flex-start;
    margin-bottom: var(--rcs-space-3);
}
.rcs-post-card__thumb-link {
    flex: 0 0 120px;
    display: block;
}
.rcs-post-card__thumb {
    width: 120px !important;
    height: auto !important;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(10, 22, 40, 0.12);
    display: block;
}
.rcs-post-card__header-text {
    flex: 1;
    min-width: 0;
}

.rcs-post-card__title {
    font-family: var(--rcs-font-display);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
.rcs-post-card__title-link {
    color: var(--rcs-navy);
    text-decoration: none;
    transition: color var(--rcs-transition);
}
.rcs-post-card__title-link:hover { color: var(--rcs-red); text-decoration: none; }

/* Ideas badge + bold excerpts — inside header-text, below title */
.rcs-post-card__ideas {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin-top: var(--rcs-space-2);
    margin-bottom: var(--rcs-space-2);
    font-family: var(--rcs-font-brand);
    font-size: 0.88rem;
    line-height: 1.5;
}
.rcs-post-card__ideas-badge {
    font-family: var(--rcs-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rcs-ink-light);
    border: none;
    padding: calc(0.1rem + 2px) 0.4rem 0.1rem;
    border-radius: 2px;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}
.rcs-post-card__ideas-text {
    color: var(--rcs-ink-faded);
    font-weight: 600;
}
.rcs-post-card__ideas-text--fade {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%),
                        linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%),
                linear-gradient(to right, black 80%, transparent 100%);
    mask-composite: intersect;
}

/* Read More teaser — full content before <!--more-->, no badge, no fade */
.rcs-post-card__teaser {
    font-family: var(--rcs-font-brand);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--rcs-ink-faded);
    margin-top: var(--rcs-space-2);
    margin-bottom: var(--rcs-space-2);
}
.rcs-post-card__teaser p {
    margin-bottom: var(--rcs-space-2);
}
.rcs-post-card__teaser p:last-child {
    margin-bottom: 0;
}

/* Posted on line — inside header-text, below ideas */
.rcs-post-card__meta {
    margin-bottom: 0;
}
/* When a badge is present, flex pushes it right.
   space-between distributes ALL children, so with two pills the Markets badge
   ended up floating between the date and the region rather than beside it.
   margin-left:auto on the first pill absorbs the free space instead, which
   keeps any number of pills together at the right edge. */
.rcs-post-card__meta--with-region {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rcs-space-2);
}

/* Region pages have no region pill — every post there is already that region —
   so their meta row was never flexed. It needs to be, or the Markets badge
   simply follows the date inline instead of sitting right. */
.rcs-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rcs-space-2);
}

/* THE DATE takes up the slack, not the pills.
   One rule, and it works for any number of pills in any combination.

   Two earlier attempts put margin-left:auto on the pills themselves and then
   tried to reset it on the ones that followed. Both were wrong for a case they
   did not anticipate: `justify-content: space-between` spread all three items
   evenly, and a `tier ~ region` reset handled MARKETS+China but not two REGION
   pills, which each took the auto-margin and pushed apart — visible on a post
   tagged both Global and Latin America.

   Pushing from the left end removes the problem class entirely: whatever pills
   exist end up flush together at the right edge, separated only by the flex
   gap. No sibling selectors, nothing to enumerate. */
.rcs-post-card__meta > .rcs-post-card__date {
    margin-right: auto;
    /* Never lets flex-shrink squeeze the date's own text into a wrap — the
       date is either alone on its line (plenty of room) or sharing the line
       with the pill group (which, per flex-shrink: 0 below, only shares that
       line when it actually fits). The date should never be the thing that
       gives. */
    flex-shrink: 0;
}
.rcs-post-card__date {
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem;
    color: var(--rcs-ink-light);
    letter-spacing: 0.02em;
}

/* All pills (Markets badge + region terms) are rendered inside ONE wrapper
   by rcs_post_card_pills() — see inc/roles.php — specifically so they wrap
   as a single unit, not individually.

   .rcs-post-card__meta is flex-wrap: wrap and this wrapper is flex-shrink: 0,
   so there are only two outcomes for a given row width: the date and the
   whole pill group share one line (everything fits), or the group drops
   to its own line under the date (it doesn't) — never a partial break where
   some pills stay on the date's line and others don't, and never an
   individual pill's OWN text wrapping internally, because nothing here ever
   shrinks a pill below its natural single-line width. */
.rcs-post-card__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rcs-space-2);
    flex-shrink: 0;
    /* flex-shrink: 0 means this wrapper never compresses, which is exactly
       what stops any individual pill's text from wrapping — but without a
       cap it also means the wrapper happily sizes itself to fit all pills
       in one row and OVERFLOWS past the card's edge on a narrow viewport
       instead of wrapping, widening the whole page and leaving dead space
       to scroll into. max-width: 100% caps it to its column's actual width
       (the same width .rcs-post-card__meta already has), so once the pill
       group's own line is narrower than the pills need, flex-wrap above
       kicks in and the group breaks onto a second line WITHIN itself —
       still never touching an individual pill's own text, which stays
       nowrap and single-line regardless of how many lines the group takes.
       This is the deliberate exception to "the group is always one line":
       three-plus region pills is the rare case where two lines of pills is
       the right tradeoff over the group spilling off-screen. */
    max-width: 100%;
}



.rcs-post-card__divider {
    border: none;
    border-top: 1px solid var(--rcs-parchment-worn);
    margin-top: var(--rcs-space-4);
    opacity: 0.6;
}

/* View all link — sits above the section divider, not below */
.rcs-region__view-all {
    margin-top: var(--rcs-space-2);
    padding-bottom: var(--rcs-space-4);
    border-bottom: 2px solid var(--rcs-navy);
}
.rcs-region__view-all-link {
    font-family: var(--rcs-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--rcs-navy);
    padding-bottom: 1px;
    transition: all var(--rcs-transition);
}
.rcs-region__view-all-link:hover { color: var(--rcs-red); border-color: var(--rcs-red); text-decoration: none; }

/* Empty state */
.rcs-region__empty {
    background: var(--rcs-parchment-dk);
    border: 1px dashed var(--rcs-parchment-worn);
    padding: var(--rcs-space-8);
    text-align: center;
}
.rcs-region__empty-msg {
    font-family: var(--rcs-font-mono);
    font-size: 1.05rem;
    color: var(--rcs-ink-light);
    line-height: 1.6;
}

/* ── 9. Footer ────────────────────────────────────────────────────────────── */
.rcs-footer {
    background-color: var(--rcs-navy);
    color: var(--rcs-parchment-worn);
    /* Border-top removed — was showing as a stray thin blue line sitting
       above the new compass divider, which already does the job of
       marking the transition into the footer on its own. */
    padding: 2.65rem 0 3rem;
    /* No margin-top — the ornate divider below now handles the visual
       transition into the footer instead of leaving a gap where the
       page's parchment background showed through. */
}

/* ── Ornate map-themed divider — sits at the top of the footer, replacing
   the plain gap that used to expose the parchment page background between
   whatever navy section came before and the footer's own navy background.
   Two fading gold rules flank a small compass-rose SVG, echoing the
   compass rose already used on the hero map. ─────────────────────────── */
.rcs-ornate-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rcs-space-6);
    max-width: 600px;
    /* No bottom margin here — the space below the divider comes entirely
       from .rcs-footer__columns's margin-bottom (2rem) plus
       .rcs-footer__copyright's padding-top (1rem) = 3rem, matching the
       footer's 3rem top padding above. Giving the divider its own margin
       on top of that chain was compounding into roughly double the space
       below versus above. */
    margin: 0 auto;
    padding-inline: var(--rcs-space-6);
    color: var(--rcs-gold-dk);
}
.rcs-ornate-divider__line {
    flex: 1 1 auto;
    height: 1.5px;
}
.rcs-ornate-divider__line--left {
    background: linear-gradient(to right, transparent, var(--rcs-gold-dk));
}
.rcs-ornate-divider__line--right {
    background: linear-gradient(to left, transparent, var(--rcs-gold-dk));
}
.rcs-ornate-divider__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.rcs-footer__inner {
    max-width: var(--rcs-max-width); margin-inline: auto; padding-inline: var(--rcs-space-6);
}
.rcs-footer__columns {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--rcs-space-8); margin-bottom: var(--rcs-space-8);
}
.rcs-footer__copyright {
    /* border-top removed — was showing as a second stray thin line, this
       time sitting directly above the bottom brand text. */
    padding-top: var(--rcs-space-4);
    text-align: center;
}
/* Posts RSS link — deliberately quiet: small, muted, brightens to gold on
   hover/focus like every other footer link, but never competes visually
   with the brand line directly below it. */
.rcs-footer__rss {
    text-align: center;
    padding-top: var(--rcs-space-2);
}
.rcs-footer__rss-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rcs-parchment-worn);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.rcs-footer__rss-link:hover,
.rcs-footer__rss-link:focus-visible {
    opacity: 1;
    color: var(--rcs-gold);
}
.rcs-footer__rss-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
/* Small logo + name row — reuses the gold/Cinzel/uppercase treatment that
   used to style the site name up top, now living down here instead since
   restating the name twice on the same page was redundant. */
.rcs-footer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rcs-space-3);
}
/* Scoped to override the header's fixed 120px .custom-logo sizing — this
   selector has higher specificity so it wins regardless of source order. */
.rcs-footer__brand .custom-logo,
.rcs-footer__brand-logo-img {
    width: 40px;
    height: auto;
    display: block;
}
.rcs-footer__brand p {
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rcs-gold);
    margin: 0;
}
/* "Vibe-coded with Claude" — sits inline within the main line now, smaller
   than the surrounding text so it reads as a quiet aside rather than
   competing with the firm name / rights text around it. */
.rcs-footer__vibe-inline {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}
/* Line break before "All Rights Reserved" — hidden on desktop (no break),
   shown as display:block on mobile for a three-line layout. */
.rcs-footer__rights-break {
    display: none;
}

/* ── 10. Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .rcs-region__grid {
        grid-template-columns: 220px 1fr 240px;
        gap: var(--rcs-space-6);
    }
}
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-region__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "center" "left" "right";
    }
    .rcs-panels__inner--two-col,
    .rcs-panels__inner--four-col { grid-template-columns: 1fr; }
    .rcs-footer__columns { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .rcs-region__sibling-nav { gap: var(--rcs-space-1); }
    .rcs-region__sibling-link { font-size: 0.65rem; padding: 2px var(--rcs-space-2); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .rcs-map-pin__pulse { animation: none; }
}

/* ── Region nav strip (below map, visible to all) ───────────────────────── */
.rcs-region-strip {
    background: var(--rcs-navy);
    border-bottom: 2px solid var(--rcs-cobalt);
    padding: 0.6rem 0;
}
.rcs-region-strip__inner {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding-inline: var(--rcs-space-6);
    display: flex;
    align-items: center;
    gap: var(--rcs-space-2);
    flex-wrap: wrap;
}
.rcs-region-strip__label {
    font-family: var(--rcs-font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(200,215,240,.45);
    margin-right: var(--rcs-space-2);
    white-space: nowrap;
}
.rcs-region-strip__link {
    font-family: var(--rcs-font-display);
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(200,215,240,.75);
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(200,215,240,.2);
    transition: all var(--rcs-transition);
    white-space: nowrap;
}
.rcs-region-strip__link:hover {
    color: var(--rcs-gold);
    border-color: var(--rcs-gold);
    text-decoration: none;
}

/* ── Region RSS section divider ─────────────────────────────────────────── */
.rcs-region__rss-section {
    margin-top: var(--rcs-space-8);
}

.rcs-region__rss-divider {
    display: flex;
    align-items: center;
    gap: var(--rcs-space-4);
    margin-bottom: var(--rcs-space-6);
}

.rcs-region__rss-divider::before,
.rcs-region__rss-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rcs-navy);
    opacity: 0.3;
}

.rcs-region__rss-divider span {
    font-family: var(--rcs-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    white-space: nowrap;
}

/* Headlines rolodex — shows 10 items, rolodex-scrolls on desktop hover,
   tap-to-jump-5 on mobile */
.rcs-headlines-rolodex {
    position: relative;
}
.rcs-headlines-rolodex__viewport {
    overflow: hidden;
    /* Height set by JS based on first 10 items */
}
/* Hide all items beyond the visible count via JS; this is the
   fallback if JS hasn't run — show all items normally. */
.rcs-headlines-rolodex__viewport ul {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease;
}
.rcs-headlines-rolodex__viewport li {
    padding: var(--rcs-space-2) 0;
    border-bottom: 1px solid rgba(10, 22, 40, 0.08);
}
.rcs-headlines-rolodex__chevron {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--rcs-space-2) 0;
    background: var(--rcs-navy);
    border: none;
    color: var(--rcs-gold);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.rcs-headlines-rolodex__chevron:hover {
    background: var(--rcs-cobalt);
}
/* Hide chevron if all items are already visible */
.rcs-headlines-rolodex__chevron--hidden {
    display: none;
}

/* Calendar rolodex — "Data On Our Radar" box, desktop only (Rodrigo, Sept
   2026). Visual treatment intentionally cloned from the Headlines rolodex
   above rather than sharing selectors — the JS engines are independent (see
   footer.php for why), so keeping the CSS independent too avoids one engine's
   markup accidentally being styled — or mis-styled — by the other's rules. */
.rcs-calendar-rolodex {
    position: relative;
}
.rcs-calendar-rolodex__viewport {
    overflow: hidden;
    /* Height set by JS on desktop, based on the first 11 events. On mobile
       the JS never runs (see footer.php), so no height is ever set here —
       the box simply grows to fit its content, same as before this change.
       No media query is needed for this rule to be mobile-safe. */
}
.rcs-calendar-rolodex__viewport .simcal-calendar-list {
    transition: transform 0.4s ease;
}
.rcs-calendar-rolodex__chevron {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--rcs-space-2) 0;
    background: var(--rcs-navy);
    border: none;
    color: var(--rcs-gold);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.rcs-calendar-rolodex__chevron:hover {
    background: var(--rcs-cobalt);
}
/* Hide chevron if all events already fit, or JS hasn't set a real state yet */
.rcs-calendar-rolodex__chevron--hidden {
    display: none;
}
/* Belt-and-suspenders: the JS already returns early on mobile and never
   touches these buttons, but this guarantees they can never show as live
   (non-functional) controls on mobile even if that JS path changes later.
   Same compound condition as rcsIsMobileViewport() in footer.php — keep
   both in sync if that threshold ever changes. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-calendar-rolodex__chevron {
        display: none !important;
    }
}

/* ── Archive page ────────────────────────────────────────────────────────── */
.rcs-archive__body {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-8) var(--rcs-space-6);
    position: relative;
}
.rcs-archive__inner {
    max-width: 700px;
    margin-inline: auto;
}

/* Compass rose side decorations — elaborate, faded, non-intrusive.
   Uses CSS-generated compass shapes on both sides of the content area.
   Only shown on wider viewports where there's room for them. */
@media (min-width: 1100px) {
    .rcs-archive__body::before,
    .rcs-archive__body::after {
        content: '';
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        opacity: 0.10;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23a0845c'%3E%3C!-- Outer circle --%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%23a0845c' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='88' fill='none' stroke='%23a0845c' stroke-width='0.5'/%3E%3C!-- Cardinal points N/S --%3E%3Cpolygon points='100,8 106,85 100,75 94,85' fill='%23a0845c'/%3E%3Cpolygon points='100,192 106,115 100,125 94,115' fill='%23a0845c'/%3E%3C!-- Cardinal points E/W --%3E%3Cpolygon points='192,100 115,94 125,100 115,106' fill='%23a0845c'/%3E%3Cpolygon points='8,100 85,94 75,100 85,106' fill='%23a0845c'/%3E%3C!-- Intercardinal points NE/NW/SE/SW --%3E%3Cpolygon points='165,35 112,88 118,82 108,82' fill='%23a0845c' opacity='0.7'/%3E%3Cpolygon points='35,35 88,82 82,82 92,88' fill='%23a0845c' opacity='0.7'/%3E%3Cpolygon points='165,165 112,112 118,118 108,118' fill='%23a0845c' opacity='0.7'/%3E%3Cpolygon points='35,165 82,118 88,112 92,118' fill='%23a0845c' opacity='0.7'/%3E%3C!-- Center circles --%3E%3Ccircle cx='100' cy='100' r='12' fill='none' stroke='%23a0845c' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='4' fill='%23a0845c'/%3E%3C!-- Degree marks --%3E%3Cline x1='100' y1='5' x2='100' y2='15' stroke='%23a0845c' stroke-width='1'/%3E%3Cline x1='100' y1='185' x2='100' y2='195' stroke='%23a0845c' stroke-width='1'/%3E%3Cline x1='5' y1='100' x2='15' y2='100' stroke='%23a0845c' stroke-width='1'/%3E%3Cline x1='185' y1='100' x2='195' y2='100' stroke='%23a0845c' stroke-width='1'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
    }
    .rcs-archive__body::before {
        left: calc((100vw - 700px) / 4 - 100px);
    }
    .rcs-archive__body::after {
        right: calc((100vw - 700px) / 4 - 100px);
    }
}
.rcs-archive__subtitle {
    font-weight: 400;
    font-size: 0.7em;
    color: rgba(200,215,240,.6);
    letter-spacing: 0.05em;
}
.rcs-archive__back-link {
    display: inline-block;
    margin-top: var(--rcs-space-3);
    font-family: var(--rcs-font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(200,215,240,.7);
    text-decoration: none;
    transition: color var(--rcs-transition);
}
.rcs-archive__back-link:hover { color: var(--rcs-gold); text-decoration: none; }
.rcs-archive__pagination {
    margin-top: var(--rcs-space-8);
    padding-top: var(--rcs-space-6);
    border-top: 1px solid var(--rcs-parchment-worn);
}
.rcs-archive__pagination .nav-links {
    display: flex; gap: var(--rcs-space-3); flex-wrap: wrap; align-items: center;
}
.rcs-archive__pagination a,
.rcs-archive__pagination span {
    font-family: var(--rcs-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: var(--rcs-space-2) var(--rcs-space-3);
    border: 1px solid var(--rcs-parchment-worn);
    color: var(--rcs-navy);
    text-decoration: none;
    transition: all var(--rcs-transition);
}
.rcs-archive__pagination a:hover { background: var(--rcs-navy); color: var(--rcs-parchment); text-decoration: none; }
.rcs-archive__pagination .current { background: var(--rcs-navy); color: var(--rcs-parchment); border-color: var(--rcs-navy); }


/* ── v26 style fixes ────────────────────────────────────────────────────── */

/* 1. Region strip — centered */
.rcs-region-strip__inner {
    justify-content: center !important;
}
.rcs-region-strip__label {
    margin-right: var(--rcs-space-3);
}

/* 2. Homepage three-column grid (TC2000 | RSS | Calendar) */
.rcs-homepage-grid {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-8) var(--rcs-space-6);
    display: grid;
    grid-template-columns: 340px 1fr 340px;
    grid-template-areas: "left center right";
    gap: var(--rcs-space-8);
    /* stretch (not start) — the left column's box needs to be as tall as
       the tallest column (the bio text in the center) for the sticky
       upsell box inside it to have room to actually float as the user
       scrolls. With `start`, the column was only ever as tall as the
       upsell box itself, leaving position:sticky nothing to stick within.
       This doesn't affect the premium layout's collapsible cards visually
       — it only changes the invisible height of the column box around
       them, not the cards' own sizing. */
    align-items: stretch;
}
.rcs-homepage-grid__left  { grid-area: left; }
.rcs-homepage-grid__center { grid-area: center; }
.rcs-homepage-grid__right { grid-area: right; }

/* 3. Calendar — constrained width, slightly narrower */
.rcs-homepage-grid__right .rcs-widget,
.rcs-region__col--right .rcs-widget {
    max-width: 300px;
}

/* Calendar top alignment with "Latest Analysis" heading */
.rcs-region__col--right {
    padding-top: 0;
    margin-top: 0;
}
/* Zeroes the widget's own top margin regardless of which column it's in —
   the calendar ("Data On Our Radar") renders in the right column for Macro
   subscribers but the left column for Markets subscribers, so this can't
   be scoped to one column the way it originally was. */
.rcs-collapsible__body .rcs-widget {
    margin-top: 0;
}

/* 4. "Latest Analysis" heading — matches the "About the Strategist" /
   "Markets Amid Geopolitics" heading size, per Rodrigo's request */
.rcs-region__posts-heading {
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    letter-spacing: 0.14em !important;
}

/* 5. "Latest Headlines of Interest" divider — now styled to match
   "About the Strategist" / "Markets Amid Geopolitics" exactly (title
   case, not all-caps, same weight and tracking), per Rodrigo's choice to
   keep "Latest Analysis" as the more prominent, distinctly-styled one. */
.rcs-region__rss-divider span {
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}

/* 6. Hide duplicate widget title inside RSS section
      (the divider already labels it; the widget title is redundant) */
.rcs-region__rss-section .rcs-widget__title {
    display: none !important;
}

/* 7. Responsive: stack homepage grid on smaller screens */
@media (max-width: 1000px) {
    .rcs-homepage-grid {
        grid-template-columns: 1fr 300px;
        grid-template-areas:
            "center right"
            "left   right";
    }
}
@media (max-width: 700px) {
    .rcs-homepage-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "center" "right" "left";
    }
}


/* ── Homepage: About / value prop section ───────────────────────────────── */
.rcs-homepage__about {
    margin-bottom: var(--rcs-space-6);
}

.rcs-homepage__about-heading {
    font-family: var(--rcs-font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-4);
    padding-bottom: var(--rcs-space-3);
    border-bottom: 2px solid var(--rcs-navy);
}

.rcs-homepage__bio-photo {
    /* Positioning (margin-top) removed from this class — the bio photo
       moved out of the theme template entirely and into the "Homepage:
       Geo Images (Free)" widget area, positioned there with a Spacer
       block instead. This class is left available in case it's useful
       to apply (via the image block's "Additional CSS Class" field) for
       matching width/border styling, but no longer controls position. */
    width: 200px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--rcs-parchment-worn);
}

.rcs-homepage__about-body p {
    font-family: var(--rcs-font-body);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--rcs-ink-faded);
    margin-bottom: var(--rcs-space-4);
}
/* Links within body copy — the site-wide default (a dark brick red) was
   too close in tone to the body text's dark brown to read as a link at
   a glance. Gold gives real contrast without going to a jarring bright
   blue; permanent underline (not just on hover) makes it unambiguous. */
.rcs-homepage__about-body a {
    color: var(--rcs-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rcs-homepage__about-body a:visited {
    color: var(--rcs-gold);
}
.rcs-homepage__about-body a:hover,
.rcs-homepage__about-body a:focus-visible {
    color: var(--rcs-ink);
}

.rcs-homepage__about-body p:last-child {
    margin-bottom: 0;
}

/* LinkedIn button — small, understated, matching the site's navy/gold
   palette rather than LinkedIn's own brand blue, so it reads as part of
   the site rather than a bolted-on social widget. */
.rcs-linkedin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.55rem 1rem;
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    text-decoration: none;
    transition: background-color var(--rcs-transition), color var(--rcs-transition);
}
.rcs-linkedin-btn:hover,
.rcs-linkedin-btn:focus-visible {
    background-color: var(--rcs-navy);
    color: var(--rcs-parchment);
    text-decoration: none;
}
.rcs-linkedin-btn__icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}


/* ── v29 fixes ──────────────────────────────────────────────────────────── */

/* Hide map collapse button */
.rcs-map-hero__collapse-btn { display: none !important; }
.rcs-map-hero__toolbar { display: none !important; }

/* Hide Simple Calendar "Edit Calendar" admin link */
.simcal-edit-calendar-btn,
.simcal-calendar-head a[href*="edit"],
a.simcal-edit-calendar { display: none !important; }

/* ── Clickable map region overlays ──────────────────────────────────────── */
.rcs-map-hero__overlay--regions {
    pointer-events: all;
    cursor: pointer;
}

/* Transparent hotspot — invisible by default */
.rcs-map-region__shape {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    transition: fill 200ms ease, stroke 200ms ease;
}

/* Label — hidden by default, appears on hover */
.rcs-map-region__label {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    fill: transparent;
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: fill 200ms ease;
    text-shadow: none;
    paint-order: stroke fill;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 3px;
}

/* Hover: subtle highlight + label appears */
.rcs-map-region:hover .rcs-map-region__shape,
.rcs-map-region:focus .rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0.22);
    stroke: rgba(255, 255, 255, 0.60);
    stroke-width: 2;
}

.rcs-map-region:hover .rcs-map-region__label,
.rcs-map-region:focus .rcs-map-region__label {
    fill: #ffffff;
}

.rcs-map-region {
    cursor: pointer;
    outline: none;
}
.rcs-map-region:focus .rcs-map-region__shape {
    stroke: var(--rcs-gold);
}


/* ── Clickable map region tooltip ───────────────────────────────────────── */
.rcs-map-hero__tooltip {
    position: absolute;
    background: rgba(10,22,40,0.88);
    color: #f0e6c8;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(201,168,76,0.5);
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    border-radius: 2px;
}

/* Map overlay — pointer cursor on hover */
.rcs-map-hero__overlay ellipse:hover {
    cursor: pointer;
}

/* ── Hide Simple Calendar "Edit Calendar" admin link ────────────────────── */
.simcal-edit-calendar,
a.simcal-edit-calendar,
.simcal-calendar-head .simcal-edit-calendar-link,
a[href*="action=edit"][href*="post_type=calendar"] {
    display: none !important;
}


/* ── v29 fixes ──────────────────────────────────────────────────────────── */

/* Hide Simple Calendar "Edit Calendar" admin link for all users */
.simcal-calendar-head a,
.simcal-admin-toolbox,
a[href*="post.php?post"][href*="action=edit"].simcal-edit-calendar,
.simcal-calendar-head .simcal-calendar-meta a {
    display: none !important;
}

/* Clickable map regions — SVG overlay hotspots */
.rcs-map-hero__overlay--regions {
    pointer-events: all !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rcs-map-region {
    cursor: pointer;
    text-decoration: none;
}

.rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0);           /* Invisible by default */
    stroke: rgba(255, 255, 255, 0);
    transition: fill 200ms ease, stroke 200ms ease;
}

.rcs-map-region:hover .rcs-map-region__shape,
.rcs-map-region:focus .rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0.18);        /* Subtle white glow on hover */
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5px;
}

.rcs-map-region__label {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    fill: rgba(0, 0, 0, 0);                 /* Hidden by default */
    transition: fill 200ms ease;
    pointer-events: none;
    letter-spacing: 1px;
}

.rcs-map-region:hover .rcs-map-region__label,
.rcs-map-region:focus .rcs-map-region__label {
    fill: rgba(255, 255, 255, 0.95);        /* Show label on hover */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}


/* ── Clickable map regions ───────────────────────────────────────────────── */
.rcs-map-region {
    cursor: pointer;
    text-decoration: none;
}

.rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0);
    stroke: none;
    transition: fill 200ms ease, stroke 200ms ease;
}

.rcs-map-region:hover .rcs-map-region__shape,
.rcs-map-region:focus .rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0.22);
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2;
}

.rcs-map-region__label {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    fill: rgba(255, 255, 255, 0);
    pointer-events: none;
    letter-spacing: 0.05em;
    transition: fill 200ms ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.rcs-map-region:hover .rcs-map-region__label,
.rcs-map-region:focus .rcs-map-region__label {
    fill: rgba(255, 255, 255, 0.95);
}

/* SVG text-shadow equivalent via filter */
.rcs-map-region__label {
    filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.9));
}

/* ── Hide "Edit Calendar" admin link on front end ────────────────────────── */
.simcal-calendar-head a,
a.simcal-calendar-head-nav[href*="edit"],
.simcal-admin-add-calendar,
[class*="simcal"] a[href*="post.php"],
[class*="simcal"] a[href*="edit"] {
    display: none !important;
}

/* Catch the specific "Edit Calendar" text link Simple Calendar outputs */
.simcal-view-wrapper > a:last-child,
.simcal-default-calendar-grid > a,
.simcal-default-calendar-list > a {
    display: none !important;
}


/* ── Clickable map region hotspots ──────────────────────────────────────── */
.rcs-map-hero__overlay--regions {
    pointer-events: all; /* Enable clicks on the overlay */
}

.rcs-map-region {
    cursor: pointer;
    text-decoration: none;
}

.rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0);       /* Invisible by default */
    stroke: rgba(255, 255, 255, 0);
    stroke-width: 2;
    transition: fill 200ms ease, stroke 200ms ease;
}

.rcs-map-region:hover .rcs-map-region__shape,
.rcs-map-region:focus .rcs-map-region__shape {
    fill: rgba(255, 255, 255, 0.18);    /* Subtle white glow on hover */
    stroke: rgba(255, 255, 255, 0.55);
}

.rcs-map-region__label {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    fill: rgba(255, 255, 255, 0);       /* Hidden by default */
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 3px;
    pointer-events: none;
    transition: fill 200ms ease;
    letter-spacing: 0.05em;
}

.rcs-map-region:hover .rcs-map-region__label,
.rcs-map-region:focus .rcs-map-region__label {
    fill: rgba(255, 255, 255, 0.95);    /* White label appears on hover */
}

/* Focus ring for keyboard navigation */
.rcs-map-region:focus {
    outline: none;
}
.rcs-map-region:focus .rcs-map-region__shape {
    stroke: var(--rcs-gold);
    stroke-width: 3;
    fill: rgba(201, 168, 76, 0.15);
}


/* ── Hide Simple Calendar's own internal title bar ───────────────────────── */
/* The collapsible <summary> in template-region.php now owns the "On Our
   Radar" heading, styled to match this element's old look (see
   .rcs-collapsible__summary--dark below). This is Simple Calendar's own
   plugin output, separate from the sidebar's before_title/after_title
   wrapper, which is why suppressing the wrapper title alone didn't remove
   it. Removing it (not just hiding) lets the date-range nav below it rise
   up to fill the freed space. */
p.simcal-calendar-title {
    display: none !important;
}


/* ── Hide Simple Calendar "Edit Calendar" admin link ────────────────────── */
/* This link is only visible to logged-in admins — we suppress it site-wide */
.simcal-calendar-header a[href*="post.php"],
.simcal-calendar-title a[href*="wp-admin"],
a.simcal-admin-edit,
.simcal-edit-calendar-btn,
p.simcal-calendar-title + a,
.simcal-calendar-above-header a[href*="action=edit"] {
    display: none !important;
}
/* Broader catch-all for the Edit Calendar link pattern */
[class*="simcal"] a[href*="action=edit"] {
    display: none !important;
}


/* ── Hide Simple Calendar "Edit Calendar" admin link ────────────────────── */
.simcal-calendar-head a,
.simcal-edit-calendar,
a[href*="post.php?post"][href*="action=edit"].simcal-edit-calendar {
    display: none !important;
}

/* ── Map region overlays ─────────────────────────────────────────────────── */
.rcs-map-region {
    pointer-events: all;
}
.rcs-map-region rect,
.rcs-map-region text {
    transition: fill-opacity 0.2s ease, stroke-opacity 0.2s ease;
}
/* Cursor hint that map is clickable */
#rcs-map-frame:has(.rcs-map-region) {
    cursor: default;
}


/* ── Map tooltip (hover-only region label) ──────────────────────────────── */
.rcs-map-tooltip {
    position: absolute;
    background: rgba(10, 22, 40, 0.88);
    color: #f0e6c8;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    pointer-events: none;
    z-index: 50;
    border: 1px solid rgba(201, 168, 76, 0.65);
    white-space: nowrap;
    /* Position above and centered on cursor */
    transform: translate(-50%, -160%);
    transition: opacity 0.15s ease;
}
.rcs-map-tooltip[hidden] { display: none; }


/* ── Region strip — map hover highlight ─────────────────────────────────── */
/* Triggered via JS when cursor hovers the corresponding map region */
.rcs-region-strip__link--map-hover {
    color: var(--rcs-gold) !important;
    border-color: var(--rcs-gold) !important;
    background: rgba(201, 168, 76, 0.18) !important;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}


/* ── Free homepage layout overrides ─────────────────────────────────────── */

/* Three-column grid for free visitors */
.rcs-homepage-grid--free {
    grid-template-columns: 240px 1fr 280px;
    /* Base .rcs-homepage-grid has 2rem bottom padding from its shared
       padding rule — this was a real, previously-unaddressed contributor
       to the "too much space before the speaking-photos section"
       complaint. Scoped to --free specifically so the premium layout
       (which doesn't have this gap issue) is untouched. */
    padding-bottom: 0.25rem;
}
/* .rcs-panels (shared wrapper) has 3rem top/bottom padding — the single
   largest contributor to the gap, and one the earlier fix never touched
   at all (it only adjusted .rcs-homepage__speaking's margin-top, a much
   smaller piece of the total). Scoped to --free only. */
.rcs-panels--free {
    padding-bottom: 0.75rem;
}

/* Sticky upsell — floats in left column as user scrolls.
   top is set to clear the header's actual rendered height (measured via
   DevTools in a prior session at ~110px for the current logo+title+tagline
   stacked header with no nav row) rather than a small arbitrary gap —
   otherwise the box slides up underneath the header, which sits above it
   (higher z-index), and "Premium Access" gets visually clipped off. If the
   header's height changes later (e.g. a nav row gets added), re-measure via
   DevTools → click the <header class="rcs-header"> element → check its
   height in the box model panel — and update this value to match.

   As of v624/5.03.37: this class now lives on .rcs-upsell-sticky-wrap, a
   wrapper AROUND both the Premium Access box and the Free Limited Access
   block, rather than on .rcs-upsell directly — so the two travel together
   as one sticky unit. The rule itself is unchanged; only the element it's
   attached to in front-page.php moved. Every other selector below that
   targets `.rcs-upsell--sticky` still resolves correctly against the new
   wrapper with no edits needed. */
.rcs-upsell--sticky {
    position: sticky;
    top: 110px;
}

/* Geopolitical images in right column */
.rcs-homepage-grid__right .rcs-geo-image {
    margin-bottom: var(--rcs-space-4);
}
.rcs-homepage-grid__right .rcs-geo-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--rcs-parchment-worn);
}
.rcs-homepage-grid__right .rcs-geo-image figcaption {
    font-family: var(--rcs-font-mono);
    font-size: 0.65rem;
    color: var(--rcs-ink-light);
    padding: var(--rcs-space-1) 0;
    letter-spacing: 0.04em;
}

/* Responsive — stack on smaller screens */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-homepage-grid--free {
        grid-template-columns: 1fr;
        grid-template-areas: "center" "left" "right";
    }
    .rcs-upsell--sticky { position: static; }
    /* The manually-tuned Spacer block in the geo-images widget area exists
       only to bridge a gap specific to the side-by-side desktop layout —
       once columns stack, that gap no longer makes sense and would just
       show as an oddly large empty space for no visible reason. */
    .rcs-homepage-grid__right .wp-block-spacer {
        display: none;
    }
}


/* ── Full-width speaking photos section ─────────────────────────────────── */
.rcs-homepage__speaking {
    background: var(--rcs-navy);
    border-top: 2px solid var(--rcs-cobalt);
    padding: var(--rcs-space-8) 0;
    margin-top: 0.6rem;
    overflow: hidden;  /* prevent collage from causing horizontal scroll */
}

.rcs-homepage__speaking-inner {
    /* Width matches the free layout's center bio-text column exactly:
       max page width, minus the left/right column widths and padding/gaps
       used by .rcs-homepage-grid--free (240px left, 280px right — the
       free-visitor layout, since that's the layout this photo section
       actually appears in). Tied to the same variables as that grid so it
       stays in sync if those column widths or spacing ever change, rather
       than a guessed pixel number that could drift out of alignment later. */
    width: calc(var(--rcs-max-width) - (2 * var(--rcs-space-6)) - 240px - 280px - (2 * var(--rcs-space-8)));
    max-width: 100%;  /* safety cap on narrow screens */
    margin-inline: auto;  /* keeps it centered */
    /* Small correction on top of that centering: because the left column
       (240px) is narrower than the right column (280px) above, a
       symmetrically-centered block of the SAME WIDTH as the center column
       actually sits 20px to the right of where that center column really
       starts (half the 40px difference between the two side columns).
       This nudges it back to genuinely align. */
    position: relative;
    left: -20px;
    padding: var(--rcs-space-6);
    /* Horizontal scrolling row of photos */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* centers each row within the fixed-width container — needed now that the container has a set width rather than shrinking to fit its content exactly */
    row-gap: var(--rcs-space-4);
    column-gap: var(--rcs-space-8);  /* wider than row-gap — makes each photo read as a distinct, separate event */
    align-items: flex-start;

    /* Antique double-rule frame around the collage itself, echoing the
       hero map's border treatment but more restrained — a thin solid
       inner line plus a fainter outer line with a gap between them,
       the way an old engraved plaque or map border is often set off
       from its mount. Kept subtle (low-opacity glow, no heavy shine)
       so it reads as aged brass/gold rather than a modern gloss frame. */
    border: 1px solid var(--rcs-gold-dk);
    outline: 1px solid rgba(201,168,76,.32);
    outline-offset: 6px;
    box-shadow: 0 0 22px rgba(154,120,32,.07);
}

/* Each photo widget inside the speaking section */
.rcs-homepage__speaking .rcs-widget {
    flex: 1 1 340px;   /* min 340px, grows to fill space — was 280px */
    max-width: 560px;  /* was 420px — bigger presence, but capped well short of full native image size */
    margin: 0;
}

.rcs-homepage__speaking img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Mobile collage: hidden on desktop, shown on mobile */
.rcs-speaking-mobile {
    display: none !important;
}
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-speaking-mobile {
        display: block !important;
        width: 100%;
        height: auto;
    }
    .rcs-speaking-desktop {
        display: none !important;
    }
}
/* WordPress block wrapper must also be constrained */
.rcs-homepage__speaking .wp-block-image {
    max-width: 100%;
}
.rcs-homepage__speaking figure {
    max-width: 100%;
    margin-inline: 0;
}

.rcs-homepage__speaking .rcs-widget__title span {
    color: var(--rcs-gold);
}

/* Bio section spacing */
.rcs-homepage__bio {
    margin-top: var(--rcs-space-12);   /* restores the separation the removed divider used to provide */
}


/* ── Simple Calendar — "On Our Radar" styling ───────────────────────────── */

/* Larger, more readable base font */
.simcal-default-calendar-list .simcal-events-list,
.simcal-default-calendar-list .simcal-event {
    font-family: var(--rcs-font-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: var(--rcs-ink) !important;
}

/* Event title — display font, bold */
.simcal-default-calendar-list .simcal-event-title,
.simcal-default-calendar-list .simcal-event-title a {
    font-family: var(--rcs-font-display) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--rcs-navy) !important;
    text-decoration: none !important;
    letter-spacing: 0.01em;
}

.simcal-default-calendar-list .simcal-event-title a:hover {
    color: var(--rcs-red) !important;
}

/* Date / when line */
.simcal-default-calendar-list .simcal-event-when,
.simcal-default-calendar-list .simcal-event-start-date,
.simcal-default-calendar-list .simcal-event-start-time {
    font-family: var(--rcs-font-mono) !important;
    font-size: 0.72rem !important;
    color: var(--rcs-ink-light) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* Zebra/base card rules removed here 28 Aug 2026 — dead once the JS zebra
   runs, and actively wrong when it doesn't (see footer.php): the removed
   :nth-child(odd) rule matched nearly every event, since Simple Calendar
   wraps each day's event(s) in its own <ul>, so most events are
   structurally "odd" regardless of true position. Alternating color is
   applied exclusively by JS in footer.php. Do not re-add nth-child color
   rules against .simcal-event — they cannot alternate correctly here. */

.simcal-default-calendar-list .simcal-event:last-child {
    border-bottom: 1px solid var(--rcs-parchment-worn) !important;
}

/* Month header row */
.simcal-default-calendar-list .simcal-day {
    font-family: var(--rcs-font-display) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--rcs-parchment) !important;
    background: var(--rcs-navy) !important;
    padding: 0.35rem 0.75rem !important;
    margin-top: var(--rcs-space-3) !important;
    border-left: 3px solid var(--rcs-gold) !important;
}

/* Navigation arrows */
.simcal-calendar-head .simcal-nav {
    color: var(--rcs-navy) !important;
    font-size: 1rem !important;
}

/* Month/year heading */
.simcal-calendar-head .simcal-current {
    font-family: var(--rcs-font-display) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--rcs-navy) !important;
}


/* ── Region breadcrumb — current page styled as h1 ──────────────────────── */
.rcs-region__breadcrumb {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: var(--rcs-space-4);
}
.rcs-region__breadcrumb-current {
    font-family: var(--rcs-font-brand) !important;
    /* Sized to sit between the site title (clamp 1.4–2.1rem) and the
       "Home ›" breadcrumb link (0.72rem) — was previously set even larger
       than the site's own title, which read as top-heavy. */
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: var(--rcs-parchment) !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    display: inline;
}
.rcs-region__breadcrumb a {
    font-family: var(--rcs-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200,215,240,.55);
    text-decoration: none;
    white-space: nowrap;
}
.rcs-region__breadcrumb a:hover { color: var(--rcs-gold); }
.rcs-region__breadcrumb-sep {
    color: rgba(200,215,240,.35);
    font-size: 0.9rem;
}
/* Hide old standalone title (now removed from PHP but defensive) */
.rcs-region__title { display: none !important; }


/* ── Simple Calendar — Google Schedule style (v2) ───────────────────────── */
/* Reset previous boxy styling */
.simcal-default-calendar-list .simcal-event {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Event card — rounded, subtle warm shade, no heavy borders */
.simcal-default-calendar-list .simcal-events-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--rcs-space-3) 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

.simcal-default-calendar-list .simcal-event {
    background: #f0e6c8 !important;
    border-radius: 0 !important;
    padding: 0.55rem 0.9rem !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
    cursor: default !important;
}

.simcal-default-calendar-list .simcal-event:hover {
    background: inherit !important;
    box-shadow: none !important;
}

/* Zero gap — color alternation does the separating */
.simcal-default-calendar-list .simcal-events-list {
    gap: 0 !important;
}

/* Event title */
.simcal-default-calendar-list .simcal-event-title,
.simcal-default-calendar-list .simcal-event-title a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--rcs-navy) !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
    display: block;
}

.simcal-default-calendar-list .simcal-event-title a:hover {
    color: var(--rcs-red) !important;
}

/* Date/time line */
.simcal-default-calendar-list .simcal-event-when,
.simcal-default-calendar-list .simcal-event-start-date,
.simcal-default-calendar-list .simcal-event-start-time,
.simcal-default-calendar-list .simcal-event-end-date,
.simcal-default-calendar-list .simcal-event-end-time {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: var(--rcs-ink-light) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 0.1rem !important;
    display: block;
}

/* Day label — slim, understated */
.simcal-default-calendar-list .simcal-day,
.simcal-default-calendar-list .simcal-events-day > strong,
.simcal-default-calendar-list .simcal-events-day > .simcal-day-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--rcs-ink-light) !important;
    background: none !important;
    border: none !important;
    padding: var(--rcs-space-3) 0 0.25rem 0 !important;
    margin: 0 !important;
    display: block;
}

/* Month/year nav heading */
.simcal-calendar-head .simcal-current {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--rcs-navy) !important;
    text-transform: none !important;
}

/* Nav arrows */
.simcal-calendar-head .simcal-nav {
    color: var(--rcs-navy) !important;
    opacity: 0.7;
}
.simcal-calendar-head .simcal-nav:hover { opacity: 1; }

/* Remove any remaining heavy lines */
.simcal-default-calendar-list hr,
.simcal-default-calendar-list .simcal-event-divider {
    display: none !important;
}


/* ── Calendar v3 — right-justified dates, no gap, inline date ranges ─────── */

/* Remove the gap between cards */
.simcal-default-calendar-list .simcal-events-list {
    gap: 0.15rem !important;
}

/* Event details container — flex row: title left, date right */
.simcal-default-calendar-list .simcal-event-details,
.simcal-default-calendar-list .simcal-event > div,
.simcal-default-calendar-list .simcal-event {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
}

/* Title — takes all available width, wraps normally */
.simcal-default-calendar-list .simcal-event-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

/* Date/time block — right-aligned, never wraps */
.simcal-default-calendar-list .simcal-event-when {
    flex: 0 0 auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    align-self: flex-end !important;
    margin-top: 0 !important;
    display: block !important;
}

/* Force all date/time children inline — prevents end-date wrapping to new line */
.simcal-default-calendar-list .simcal-event-when > *,
.simcal-default-calendar-list .simcal-event-start-date,
.simcal-default-calendar-list .simcal-event-start-time,
.simcal-default-calendar-list .simcal-event-end-date,
.simcal-default-calendar-list .simcal-event-end-time,
.simcal-default-calendar-list .simcal-event-when abbr,
.simcal-default-calendar-list .simcal-event-when span {
    display: inline !important;
    white-space: nowrap !important;
}


/* ── RSS widget styling — "Latest Headlines of Interest" ─────────────────── */
/* Migrated from Appearance → Customize → Additional CSS on 2026-07-11 so
   this lives in version control with everything else, rather than only in
   a text box that isn't part of the theme package. */
.rcs-widget .rcs-rss__link {
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.35 !important;
    color: #0a1628 !important;
}
.rcs-widget .rcs-rss__link:hover { color: #8b1a1a !important; }
.rcs-widget .rcs-rss__item {
    padding: 0.45rem 0 !important;
    border-bottom: 1px solid #d4bc82 !important;
    margin: 0 !important;
}
.rcs-widget .rcs-rss__source {
    font-family: 'Courier Prime', monospace !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #2a5f9e !important;
    font-style: normal !important;
}
.rcs-widget .rcs-rss__date {
    font-family: 'Courier Prime', monospace !important;
    font-size: 0.64rem !important;
    color: #7a6040 !important;
    font-style: normal !important;
}

/* ── Calendar — card color, no hover ──────────────────────────────────────── */
html body .simcal-default-calendar-list li.simcal-event {
    background-color: #c8a870 !important;
    box-shadow: none !important;
    transition: none !important;
    cursor: default !important;
}
html body .simcal-default-calendar-list li.simcal-event:hover {
    background-color: #c8a870 !important;
    box-shadow: none !important;
}

/* Calendar — title on its own line, date right-justified below */
.simcal-event-details p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
.simcal-event-details br {
    display: none !important;
}
.simcal-event-details .simcal-event-title {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}
.simcal-event-details em {
    display: block !important;
    width: 100% !important;
    /* NOTE: a later rule in the original Additional CSS also set
       text-align:left on this same selector, overriding an earlier
       text-align:right — this consolidated version keeps the final
       (left-aligned) behavior that was actually taking effect live. */
    text-align: left !important;
    font-style: normal !important;
    margin-top: 0.1rem !important;
}
.simcal-event-details em span {
    display: inline !important;
    white-space: nowrap !important;
}

/* Tight gap between cards */
.simcal-events-list {
    gap: 0.15rem !important;
}

/* Hover no longer sets its own background-color here (removed 28 Aug 2026 —
   same structural flaw as the base zebra rules removed above: nth-child
   can't alternate correctly against Simple Calendar's per-day <ul> markup).
   The inline background-color the JS sets in footer.php already persists
   on hover since nothing here overrides it — this rule only needs to
   neutralize shadow/transition, which it still does below. */
.simcal-default-calendar-list li.simcal-event:hover {
    box-shadow: none !important;
    transition: none !important;
}

/* Remove border and gap between calendar entries */
.simcal-default-calendar-list .simcal-event,
.simcal-default-calendar-list li.simcal-event {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    margin: 0 !important;
}
.simcal-default-calendar-list .simcal-events-list,
.simcal-default-calendar-list ul.simcal-events {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}
.simcal-default-calendar-list .simcal-events-day,
.simcal-default-calendar-list .simcal-day {
    margin: 0 !important;
    padding: 0 !important;
}

.simcal-calendar-head {
    margin-top: -0.3rem !important;
    padding-top: 0 !important;
}
.simcal-calendar-head .simcal-current {
    font-size: 1.125rem !important;
}
/* Safety net: an empty <p></p> sometimes ends up as the first thing inside
   a widget block (e.g. from a stray blank line when the widget content was
   saved) — browsers apply their own default margin to empty paragraphs
   just like headings, which can silently recreate the same kind of gap we
   just fixed for the calendar's h3. Hiding it outright removes both the
   (invisible anyway) empty element and its margin in one step. */
.rcs-widget.widget_block > p:empty {
    display: none;
}
/* Simple Calendar wraps its "Edit Calendar" admin link in a paragraph
   (.simcal-align-right). We already hide the link itself elsewhere, but
   hiding a child doesn't remove the PARENT paragraph's own default
   margin — this paragraph was still sitting there with invisible content,
   contributing its own ~1em of space even though nothing in it is visible. */
.simcal-align-right {
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}

/* The date range ("Jul - Aug 2026") is rendered inside an <h3> by Simple
   Calendar. Every browser applies a default ~1em top/bottom margin to any
   <h3> — none of our prior rules ever targeted the h3 itself (only its
   wrapping divs), so that default margin was never actually overridden,
   which is what was creating the visible gap above the date row. Matching
   both the simple and more specific selector here in case Simple Calendar's
   own CSS uses the same specificity level with !important, which would
   otherwise still win over a less-specific rule despite both being !important. */
.simcal-current h3,
.simcal-default-calendar .simcal-current h3,
.simcal-default-calendar-list .simcal-current h3 {
    margin: 0 !important;
    padding: 0 !important;
}

/* NOTE: The old ".wp-block-heading" dark-brown-header rules and the
   "h4.wp-block-heading" gap-removal rule were intentionally NOT migrated
   here. Both targeted the manually-added Heading widget you deleted from
   the calendar sidebar — that element no longer exists, and .wp-block-heading
   is WordPress's generic class for any Gutenberg Heading block anywhere on
   the site, so keeping that rule around risked unexpectedly styling an
   unrelated heading elsewhere later. If deleting it revealed any visual
   regression, let me know and we'll rebuild it scoped more safely. */


/* ── Collapsible sections (left/right column widgets) ────────────────────── */
/* Uses native <details>/<summary> — accessible and keyboard-operable with
   zero JavaScript. Multiple sections can be stacked and each toggles
   independently, which is what keeps Tier 2 columns from growing too long. */
.rcs-collapsible {
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 4px;
    margin-bottom: var(--rcs-space-6);
    background: rgba(255,255,255,0.25);
}

.rcs-collapsible + .rcs-collapsible {
    margin-top: 0; /* gap handled by margin-bottom above */
}

.rcs-collapsible__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rcs-space-2);
    cursor: pointer;
    list-style: none;
    padding: var(--rcs-space-2) var(--rcs-space-3);
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rcs-ink-faded);
    user-select: none;
}

/* Remove default browser triangle marker so we can draw our own */
.rcs-collapsible__summary::-webkit-details-marker { display: none; }
.rcs-collapsible__summary::marker { content: ''; }

/* Custom chevron — rotates on open via the [open] attribute selector */
.rcs-collapsible__summary::before {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--rcs-gold-dk);
    transition: transform 0.2s ease;
    order: -1;
    margin-right: var(--rcs-space-2);
}

.rcs-collapsible[open] > .rcs-collapsible__summary::before {
    transform: rotate(180deg);
}

.rcs-collapsible__summary:hover,
.rcs-collapsible__summary:focus-visible {
    background: rgba(201,168,76,.12);
}

.rcs-collapsible__body {
    padding: var(--rcs-space-3);
    border-top: 1px solid var(--rcs-parchment-worn);
}

/* Tier 2 (Markets) sections get a subtle gold left-border to distinguish
   them from Tier 1 (Macro) sections at a glance. Economic Indicators also
   uses this accent (via --accent) purely for visual consistency across the
   left column — it isn't a tier signal there, just a shared border style. */
.rcs-collapsible--markets,
.rcs-collapsible--accent {
    border-left: 3px solid var(--rcs-gold-dk);
}

.rcs-collapsible__badge {
    font-family: var(--rcs-font-brand);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rcs-navy);
    background: var(--rcs-gold);
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Dark variant — matches the old .simcal-calendar-title's look (Cinzel
   serif) now that the plugin's own title bar is hidden above. Left-
   justified with tightened letter-spacing so longer titles like "Economic
   Indicators" fit on one line in the narrow column. The chevron is
   absolutely positioned on the left; extra left padding on the summary
   clears space for it so the title text doesn't overlap it. */
.rcs-collapsible__summary--dark {
    background-color: var(--rcs-navy);
    color: var(--rcs-parchment);
    padding: var(--rcs-space-3) var(--rcs-space-4) var(--rcs-space-3) 1.75rem;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;       /* always one line — see .rcs-collapsible__summary-text for overflow handling */
    gap: 0.5rem;
    text-align: left;
    font-family: var(--rcs-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-transform: none;
    overflow: hidden;         /* safety net so nothing can spill past the card edge */
}
/* "Charts on Watch" specifically — centers just the title text within its
   own available space (between the chevron and the right edge), without
   touching the chevron's own position, which is set separately via
   ::before and unaffected by this. */
.rcs-collapsible--accent .rcs-collapsible__summary-text {
    text-align: center;
}
/* Title text specifically (not the badge) truncates with an ellipsis if the
   column is ever too narrow to fit the full title — the badge next to it
   (flex-shrink: 0, below) always stays fully visible either way. */
.rcs-collapsible__summary-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;   /* required for text-overflow to work inside a flex item */
    flex: 1 1 auto;
}
/* Used for longer titles (e.g. "Eco. Charts on Watch") that need a bit more
   room to fit on one line without truncating in the narrow column. */
.rcs-collapsible__summary-text--small {
    font-size: 1.15rem;
}
.rcs-collapsible__summary--dark::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--rcs-gold);
}
.rcs-collapsible__summary--dark:hover,
.rcs-collapsible__summary--dark:focus-visible {
    background-color: var(--rcs-navy-mid);
}
.rcs-collapsible__summary--dark::before {
    /* Override the default flex-flow chevron positioning (order/margin)
       with absolute positioning so it sits at the left edge independent
       of the title text's own alignment. */
    position: absolute;
    left: var(--rcs-space-4);
    top: 50%;
    margin: -3px 0 0 0;
    order: 0;
    border-top-color: var(--rcs-gold); /* chevron stays visible on dark bg */
}

/* Markets cards (and now Economic Indicators, via --accent) already have
   their own full-height gold border-left — suppress the summary's own
   short gold stripe there so the two don't sit side-by-side as a doubled
   accent. */
.rcs-collapsible--markets .rcs-collapsible__summary--dark::after,
.rcs-collapsible--accent .rcs-collapsible__summary--dark::after {
    display: none;
}

/* Static (non-collapsible) header — used for "On Our Radar", which is now
   a plain div rather than a <details>/<summary>. Same dark navy look as
   the collapsible headers, but no chevron, no pointer cursor, no hover
   state, and the title is centered instead of left-justified since there's
   no toggle icon competing for space on the left. */
.rcs-collapsible__summary--static {
    cursor: default;
    user-select: auto;
    justify-content: center;
    padding-left: var(--rcs-space-4); /* no chevron, so no need for extra left clearance */
}
.rcs-collapsible__summary--static .rcs-collapsible__summary-text {
    text-align: center;
    flex: 0 1 auto; /* don't force-stretch the text now that it's the only item */
}
.rcs-collapsible__summary--static::before {
    content: none; /* no chevron at all */
}
.rcs-collapsible__summary--static:hover,
.rcs-collapsible__summary--static:focus-visible {
    background-color: var(--rcs-navy); /* no hover feedback — it isn't interactive */
}


/* ── Floating text-size control ───────────────────────────────────────── */
.rcs-text-zoom {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    gap: 2px;
    background: var(--rcs-navy);
    border: 1px solid var(--rcs-gold-dk);
    border-radius: 6px;
    padding: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.rcs-text-zoom__btn {
    font-family: var(--rcs-font-brand);
    font-size: 12px;
    font-weight: 700;
    color: var(--rcs-parchment);
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 7px 9px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rcs-text-zoom__btn:hover,
.rcs-text-zoom__btn:focus-visible {
    background-color: rgba(201,168,76,.18);
    color: var(--rcs-gold);
}
.rcs-text-zoom__btn--reset {
    color: var(--rcs-gold);
    min-width: 42px;
    text-align: center;
}
@media (max-width: 600px) {
    .rcs-text-zoom { bottom: 12px; right: 12px; }
}

/* ── Bottom Line — nested bullet list + conclusion ────────────────────────
   Replaces the old chart-based "Charts on Watch" section. "+" bullets
   (upside/positive forces) and "-" bullets (downside/negative forces) use
   the same green/red convention as the Performance table's return values,
   so polarity reads at a glance regardless of which section you're in. */
.rcs-bottom-line {
    font-family: var(--rcs-font-brand);
    font-size: 0.88rem;
    line-height: 1.5;
}
.rcs-bottom-line__list {
    list-style: none;
    margin: 0 0 0.75rem 0;
    padding: 0;
}
.rcs-bottom-line__list .rcs-bottom-line__list {
    margin: 0.35rem 0 0.35rem 1.1rem;   /* nested sub-lists indent further */
}
.rcs-bottom-line__item {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--rcs-ink);
}
.rcs-bottom-line__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.rcs-bottom-line__item--positive::before { background: #2a7a4a; }
.rcs-bottom-line__item--negative::before { background: #8b1a1a; }

/* Regular paragraph typed anywhere in the Bottom Line box (a line with no
   leading "+" or "-"; 5.04.06). Sits in the same <ul> as the bullets so it can
   appear at any position or nesting level, but it is NOT a bullet: no dot, no
   hanging indent. Same ink colour as a bullet's text and the same gap below. */
.rcs-bottom-line__paragraph {
    list-style: none;
    margin-bottom: 0.5rem;
    color: var(--rcs-ink);
}

/* Plain simple gold line — used for in-text "---" dividers separating
   bullet categories (e.g. positive vs negative groups). Kept visually
   distinct from the compass-rose divider, which is now reserved for
   separating the optional top image from the bullet list. */
.rcs-bottom-line__hr {
    border: none;
    border-top: 1px solid var(--rcs-gold-dk);
    margin: 0;
    opacity: 0.6;
}

/* Optional image shown above the bullets — reuses .rcs-chart__wrap /
   .rcs-chart__img directly (same classes the chart images use), so the
   existing hover-zoom effect and mobile tap-toggle JS apply automatically
   with no extra code needed. */
.rcs-bottom-line__image-wrap {
    margin-bottom: 0.9rem;
}

.rcs-bottom-line__divider-wrap {
    list-style: none;
    padding-left: 0 !important;
    margin: 0.6rem 0;
}
.rcs-bottom-line__divider-wrap::before {
    content: none;   /* no bullet dot for the divider row itself */
}
/* Compass-rose divider — now specifically the separator between the
   optional image and the bullet list below it (see rcs_render_compass_divider()). */
.rcs-bottom-line__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 260px;   /* longer than before, still shorter than the full row width */
    margin: 0 auto 0.9rem;
    color: var(--rcs-gold-dk);   /* darker gold, matching the site's existing accent */
}
.rcs-bottom-line__divider-line {
    flex: 1 1 auto;
    height: 2px;   /* was 1px — a 1px box can round to 0 device px and vanish
                      at non-100% browser zoom (confirmed reproducible at 90%
                      zoom); 2px keeps a visible line even if it rounds down */
}
.rcs-bottom-line__divider-line--left {
    background: linear-gradient(to right, transparent, var(--rcs-gold-dk));
}
.rcs-bottom-line__divider-line--right {
    background: linear-gradient(to left, transparent, var(--rcs-gold-dk));
}
.rcs-bottom-line__divider-icon {
    width: 20px;    /* ~50% of the footer compass's 40px */
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;   /* keeps an uploaded image proportional if its aspect ratio isn't perfectly square */
}
.rcs-bottom-line__conclusion {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rcs-parchment-worn);
    font-style: italic;
    color: var(--rcs-ink-light);
}
.rcs-bottom-line__conclusion strong {
    font-style: normal;
    font-family: var(--rcs-font-display);
    color: var(--rcs-ink);
}

/* ── Custom ETF Performance table ─────────────────────────────────────────
   Replaces the earlier TradingView widget with a real in-theme table
   showing MTD/QTD/YTD returns, styled to match the rest of the site rather
   than a third-party widget's own look. */
.rcs-performance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-family: var(--rcs-font-brand);  /* Outfit — was inheriting IM Fell English, a serif not well-suited to scanning numbers */
}
.rcs-performance-table th {
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rcs-ink-faded);
    text-align: right;
    padding: 0.4rem 0.3rem;
    border-bottom: 1px solid var(--rcs-parchment-worn);
}
.rcs-performance-table th:first-child {
    text-align: left;
}
/* Sortable column headers — clickable, with a small arrow indicator that
   appears once a column is actively sorted (ascending or descending). */
.rcs-performance-table__sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.1rem !important;
}
.rcs-performance-table__sortable:hover {
    color: var(--rcs-gold-dk);
}
.rcs-performance-table__sortable::after {
    content: '';
    position: absolute;
    right: 0.2rem;
    top: 50%;
    width: 0;
    height: 0;
    opacity: 0.35;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    transform: translateY(-70%);
}
.rcs-performance-table__sortable[data-sort-dir="asc"]::after {
    opacity: 1;
    border-bottom: 5px solid currentColor;
    border-top: none;
}
.rcs-performance-table__sortable[data-sort-dir="desc"]::after {
    opacity: 1;
    border-bottom: none;
    border-top: 5px solid currentColor;
    transform: translateY(0%);
}
.rcs-performance-table td {
    padding: 0.45rem 0.3rem;
    border-bottom: 1px solid rgba(160,132,92,.18);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rcs-performance-table__symbol {
    text-align: left !important;
    font-weight: 700;
    color: var(--rcs-ink);
}
/* Wraps the ticker so the tooltip can be positioned relative to it, and
   gives touch devices something to tap (see the JS tap-toggle at the
   bottom of footer.php, same mechanism as the chart image tooltips). */
.rcs-performance-table__ticker-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.rcs-performance-table__ticker {
    display: block;
    font-size: 0.95rem;
}
.rcs-performance-table__ticker--link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--rcs-ink-light);
}
.rcs-performance-table__ticker--link:hover,
.rcs-performance-table__ticker--link:focus-visible {
    color: var(--rcs-gold-dk);
    border-bottom-color: var(--rcs-gold-dk);
}
/* Floating name tooltip — same dark navy/gold-border treatment as the
   chart hover tooltips and consistent with the Hero map's floating-label
   style, so hovering (or tapping, on mobile) the ticker reveals the full
   name without permanently taking up space in the table row. */
.rcs-performance-table__tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.4rem);
    min-width: 170px;
    background: rgba(10, 22, 40, 0.94);
    border: 1px solid rgba(201,168,76,.5);
    padding: 0.5rem 0.7rem;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(240,230,200,.9);
    white-space: nowrap;
    text-align: left;
}
.rcs-performance-table__ticker-wrap:hover .rcs-performance-table__tooltip,
.rcs-performance-table__ticker-wrap.rcs-performance-table__ticker-wrap--active .rcs-performance-table__tooltip {
    opacity: 1;
    pointer-events: auto;
}
.rcs-performance-table__value {
    font-weight: 700;
    font-size: 0.95rem;
}
.rcs-performance-table__value--positive { color: #2a7a4a; }
.rcs-performance-table__value--negative { color: #8b1a1a; }
.rcs-performance-table__updated {
    font-family: var(--rcs-font-display);
    font-size: 0.8rem;
    color: var(--rcs-ink-faded);
    text-align: right;
    margin-top: 0.5rem;
}
.rcs-performance-table__disclaimer {
    font-family: var(--rcs-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    font-style: normal;
    color: var(--rcs-ink-light);
    text-align: center;
    width: 100%;
    margin-top: 0.4rem;
    line-height: 1.4;
    white-space: normal;
}

/* ── Economic Indicator Charts — left column ────────────────────────────── */
.rcs-charts {
    display: flex;
    flex-direction: column;
    gap: var(--rcs-space-6);
}

.rcs-chart {
    position: relative;
}

/* Title — same style as calendar date range text */
.rcs-chart__title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: var(--rcs-ink-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.3rem 0 !important;
    line-height: 1.3 !important;
}

/* Image wrapper — clip needed so scaled image doesn't reflow layout */
.rcs-chart__wrap {
    position: relative;
    overflow: visible;
}

/* Chart image — compact, smooth hover expansion */
.rcs-chart__img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    /* Sentiment color is applied unconditionally below (not just on
       hover/zoom) — this is just a fallback in the unlikely case none of
       the --positive/--negative/--neutral wrap classes match.
       box-sizing: border-box (set globally near the top of this file, on
       the universal * reset) means this border is drawn INSIDE the 100%
       width above rather than added on top of it — so widening the
       border only eats into the image itself, it never pushes the
       image's outer edge wider than the title text sitting above it. */
    border: 4px solid var(--rcs-parchment-worn);
    /* No fixed transform-origin here anymore — it's set per-column below,
       since a single fixed origin (e.g. "top left") meant the zoomed image
       always grew toward the same corner regardless of where the widget
       actually sits on the page, causing it to run off narrower viewports
       when the widget was near that edge. */
    transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s;
    position: relative;
    z-index: 1;
}

.rcs-chart__wrap:hover .rcs-chart__img,
.rcs-chart__wrap.rcs-chart--active .rcs-chart__img {
    transform: scale(1.75);
    box-shadow: 0 6px 20px rgba(30,14,4,.22);
    z-index: 30;
}

/* Sentiment border — shown at all times (resting thumbnail and zoomed
   pop-out alike), so the color reads as a permanent, discreet cue rather
   than something that only shows up on interaction. Colors are deliberately
   muted/antique rather than bright "traffic light" tones, to stay discreet
   rather than garish. Determined by a leading "+"/"-" in the Chart Context
   field, same convention as the Bottom Line bullets. */
.rcs-chart__wrap--positive .rcs-chart__img { border-color: var(--rcs-chart-positive); }
.rcs-chart__wrap--negative .rcs-chart__img { border-color: var(--rcs-chart-negative); }
.rcs-chart__wrap--neutral  .rcs-chart__img { border-color: var(--rcs-chart-neutral); }

/* Column-aware zoom direction — biases the growth toward the page's
   center rather than off toward the nearest edge, without moving all the
   way to dead-center. IMPORTANT: transform-origin marks the point that
   stays FIXED in place — the image grows AWAY from that point, not
   toward it. So to make a right-column image grow LEFTWARD (toward
   center), the origin needs to sit toward the RIGHT of the image (most
   of the image's width is then to the left of that fixed point, so most
   of the growth happens leftward) — the opposite of what you'd first
   guess, and the reverse of what the previous version had.
   Vertical origin is "top" (not "center") for both — this keeps the
   image's top edge fixed in place so the zoomed image only grows
   downward, never upward into the tooltip's space above it. */
.rcs-chart__wrap--left-column .rcs-chart__img {
    transform-origin: 15% top;   /* grows mostly rightward + downward */
}
.rcs-chart__wrap--right-column .rcs-chart__img {
    transform-origin: 85% top;   /* grows mostly leftward + downward */
}

/* Tooltip — always appears above the image, horizontally centered */
.rcs-chart__tooltip {
    position: absolute;
    /* This gap needs to be much larger than it looks like it should,
       for a specific reason: "100%" here refers to the chart's ORIGINAL,
       unzoomed box width. CSS transform:scale() (the hover-zoom effect)
       doesn't change that box's layout size at all — it only visually
       stretches the image on top of it. Since the zoom origin is biased
       left (so the chart grows mostly rightward on hover), the visually
       zoomed chart's right edge extends well past this "100%" point —
       roughly 60%+ of the chart's own width further right, which is why
       small increases (1.5rem, then 5rem) barely moved anything relative
       to what's actually visible on hover. */
    left: calc(100% + 15rem);
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-width: 90vw;   /* safety net on very narrow viewports */
    background: rgba(10, 22, 40, 0.94);
    border: 1px solid rgba(201,168,76,.5);
    padding: 0.65rem 0.85rem;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border-radius: 4px;
}

.rcs-chart__wrap:hover .rcs-chart__tooltip,
.rcs-chart__wrap.rcs-chart--active .rcs-chart__tooltip {
    opacity: 1;
    pointer-events: auto;
}

.rcs-chart__tooltip-title {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rcs-gold);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    text-align: center;
}

.rcs-chart__tooltip-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(240,230,200,.9);
    margin: 0;
}

/* Region tag on homepage Latest Analysis cards */
/* Markets-tier badge on post cards.
   Mirrors .rcs-post-card__region exactly — same face, size, tracking, padding
   and radius — so the two read as one row of pills rather than two competing
   treatments. Gold instead of cobalt, matching the Tier 2 accent used on the
   tier cards, and carrying the same visual weight as the thicker gold border
   that marks Mapping Out Strategies on the Subscribe page.

   Shown only when a post is Markets-only AND not free: free wins, so a free
   post labelled "Markets" would be a false claim about who can read it. */
.rcs-post-card__tier {
    font-family: var(--rcs-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rcs-gold-dk);
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--rcs-gold-dk);
    border-radius: 2px;
    vertical-align: middle;
    /* Slightly filled, unlike the region pill's outline-only treatment — the
       tier is the more consequential label and earns a touch more presence
       without shouting. */
    background: rgba(201, 168, 76, 0.10);
    white-space: nowrap;
}

.rcs-post-card__region {
    font-family: var(--rcs-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rcs-cobalt-accent);
    /* No margin-left — the flex gap on .rcs-post-card__pills handles spacing,
       and a margin here would fight the auto-margin on .rcs-post-card__date. */
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--rcs-cobalt-accent);
    border-radius: 2px;
    vertical-align: middle;
    /* Two earlier passes tried to make a long term ("International
       Relations") wrap onto two tidy lines within its own pill — first
       fit-content, then min-content. Both worked as CSS but produced a
       result nobody wanted: a two-line pill reads as clunky regardless of
       how tightly it's sized. The actual fix isn't at the individual pill
       at all — it's grouping (see .rcs-post-card__pills, and
       rcs_post_card_pills() in inc/roles.php): the whole pill row moves to
       its own line under the date when it doesn't fit, so no single pill is
       ever forced to shrink or wrap. white-space: nowrap is a hard guarantee
       of that — this pill is single-line or it isn't shown at its natural
       width at all. */
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════════════
   8. SUBSCRIBE PAGE (template-subscribe.php) — v180 redesign
   ══════════════════════════════════════════════════════════════════════════ */

.rcs-subscribe {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-8) var(--rcs-space-6) var(--rcs-space-12);
}

/* ── Full-width parchment ribbon (Subscribe + trial note) ───────────────── */
.rcs-subscribe__ribbon {
    /* FULL VIEWPORT width, not merely the container's. The earlier negative
       margins only cancelled the container's own padding (1.5rem a side), so
       the ribbon still stopped at the max-width boundary — it was never
       genuinely edge to edge. This breaks out of any centred ancestor:
       100vw wide, pulled left by the distance from the container's edge to
       the viewport's. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    text-align: center;
    background-color: rgba(247, 240, 218, 0.92);
    /* Classic old-world diagonal-lattice watermark, drawn as an inline SVG
       data-URI so there's no extra image request. Very low-contrast so it
       reads as a subtle pattern behind the text. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%239a7820' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z'/%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    border-top: 1px solid var(--rcs-gold-dk);
    border-bottom: 1px solid var(--rcs-gold-dk);
    /* Tight vertical padding — the ribbon's overall height was cut ~40%.
       Bottom padding matches the note's top margin so it stays centered. */
    padding: var(--rcs-space-2) var(--rcs-space-6);
    margin-bottom: var(--rcs-space-8);
}
.rcs-subscribe__ribbon-title {
    font-family: var(--rcs-font-display);
    font-size: 1.8rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rcs-navy);
    /* No bottom margin here: the note's top margin (space-2) alone sets the
       gap above it, matching the ribbon's space-2 bottom padding below it,
       so the note sits exactly midway. */
    margin: 0;
    line-height: 1.2;
}
/* The only place the 3-day free trial is mentioned now, so it carries some
   weight: bold and gold. Equal margin above and matching ribbon padding
   below keep it sitting midway between the title and the lower border. */
.rcs-subscribe__ribbon-note {
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem !important;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rcs-gold-dk);
    margin: var(--rcs-space-2) auto 0;
    max-width: 680px;
}

/* Standalone title replacing the old boxed intro. */
.rcs-subscribe__standalone-title {
    font-family: var(--rcs-font-display);
    font-size: 1.4rem !important;
    line-height: 1.4;
    color: var(--rcs-navy);
    text-align: center;
    margin: 0 auto 4rem;
    max-width: none;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .rcs-subscribe__standalone-title { white-space: normal; font-size: 1.2rem !important; margin-bottom: var(--rcs-space-12); }
}

/* ── "Illuminated manuscript" border treatment ───────────────────────────
   Used on the header box and both tier cards. A double-rule border (outer
   solid line via `border`, inner thinner line via a negative-offset
   `outline` drawn INSIDE the box) plus a small diamond ornament at each
   corner — evoking an old picture/document border rather than a flat
   modern box edge. Pure CSS, no images. */
.rcs-illuminated-border {
    position: relative;
    border: 2px solid var(--rcs-gold-dk);
    outline: 1px solid var(--rcs-gold-dk);
    outline-offset: -6px;
}
.rcs-illuminated-corner {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--rcs-gold-dk);
    transform: rotate(45deg);
    z-index: 1;
}
.rcs-illuminated-corner--tl { top: -5.5px; left: -5.5px; }
.rcs-illuminated-corner--tr { top: -5.5px; right: -5.5px; }
.rcs-illuminated-corner--bl { bottom: -5.5px; left: -5.5px; }
.rcs-illuminated-corner--br { bottom: -5.5px; right: -5.5px; }

/* ── Main layout ──────────────────────────────────────────────────────────
   Tier cards now STACK vertically (Geo-Economic Map on top), each wide
   (~20cm), sitting left; the addon column sits to their right. On narrow
   screens the addon column drops below. */
.rcs-subscribe__layout {
    display: flex;
    gap: var(--rcs-space-6);
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.rcs-subscribe__layout {
    display: flex;
    justify-content: center;
}
.rcs-subscribe__tier-cards {
    display: flex;
    flex-direction: column;
    /* Large gap so the pediment ornament atop the SECOND box has clear room
       above it, not crowding the box above. */
    gap: 5rem;
    width: min(21cm, 100%);
    margin-inline: auto;
}

/* Big tier cards now borrow the small add-on cubes' treatment: light
   translucent fill + thin parchment border with a colored left accent. */
.rcs-subscribe__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 6.3cm;
    /* More transparent so the map watermark reads through more. */
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid var(--rcs-parchment-worn);
    border-left: 3px solid var(--rcs-cobalt-accent);
    /* Padding trimmed from space-12 as part of the ~10% height reduction;
       horizontal padding kept generous so the text still has fat margins. */
    padding: var(--rcs-space-8) var(--rcs-space-12) var(--rcs-space-8);
    box-shadow: var(--rcs-shadow-sm);
    text-align: left;
}
/* Markets gets a thicker GOLD left border to signal the premium tier. */
.rcs-subscribe__card--markets {
    border-left: 6px solid var(--rcs-gold-dk);
}

/* Broken-scroll pediment ornament, centered above each box, overlapping
   the top border slightly so it reads as a crest sitting on the box. */
.rcs-subscribe__pediment-wrap {
    position: absolute;
    top: -46px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.rcs-subscribe__pediment {
    width: 300px;
    max-width: 70%;
    height: 60px;
}

/* Sits fully ABOVE the card, clear of the compass divider inside it —
   the divider is the first thing inside the card's own top padding, so as
   long as the badge's negative offset clears the card's border entirely
   (with a visible gap), the two never compete for the same visual space. */
.rcs-subscribe__card-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--rcs-gold);
    color: var(--rcs-navy);
    font-family: var(--rcs-font-brand);
    font-size: 0.66rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 0 0 0 3px;
    margin: 0;
    white-space: nowrap;
    z-index: 1;
}

/* Compass-rose divider, reused from inc/bottom-line.php's
   rcs_render_compass_divider(), recolored per tier via `color`. Replaces
   the earlier dashed "route line" design. */
.rcs-subscribe__card-divider {
    margin-bottom: var(--rcs-space-4);
}
.rcs-subscribe__card-divider .rcs-bottom-line__divider {
    max-width: 260px;
    margin-left: 0;
    margin-bottom: 0;
}
.rcs-subscribe__card-divider--macro .rcs-bottom-line__divider { color: var(--rcs-cobalt-accent); }
.rcs-subscribe__card-divider--markets .rcs-bottom-line__divider { color: var(--rcs-gold-dk); }

.rcs-subscribe__card-head {
    text-align: center;
    margin-bottom: var(--rcs-space-5);
    /* 0.15cm nudge down for the title + price block. */
    padding-top: 0.15cm;
    padding-bottom: var(--rcs-space-5);
    border-bottom: 1px solid var(--rcs-parchment-worn);
    /* Vertically center the title + price block within the head area. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.7cm;
}
.rcs-subscribe__card-title {
    font-family: var(--rcs-font-display);
    font-size: 1.8rem !important;
    line-height: 1.3;
    color: var(--rcs-navy);
    /* Nudged 0.25cm down toward the price. Taking the same 0.25cm off the
       bottom margin keeps the head block's overall height unchanged, so its
       vertical centering isn't disturbed. */
    margin-top: 0.25cm;
    margin-bottom: calc(var(--rcs-space-3) - 0.25cm);
}
.rcs-subscribe__card-price { font-family: var(--rcs-font-display); margin: 0; display: inline-block; }
.rcs-subscribe__card-price-amount { font-size: 2.4rem; color: var(--rcs-navy); }
.rcs-subscribe__card-price-period { font-family: var(--rcs-font-brand); font-size: 1rem; color: var(--rcs-ink-light); }
/* For price slots that carry words instead of a figure (e.g. "Quote on
   request") — without this the period-sized type reads far too small on
   its own, since it's normally a suffix beside a large dollar amount. */
.rcs-subscribe__card-price--text .rcs-subscribe__card-price-period {
    font-size: 1.5rem;
    color: var(--rcs-navy);
    font-weight: 600;
}
.rcs-subscribe__card-trial {
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem !important;
    color: var(--rcs-gold-dk);
    font-weight: 600;
    margin: var(--rcs-space-2) 0 0;
    display: inline-block;
    margin-left: var(--rcs-space-4);
}

/* Top-level feature list — left-justified, thematic diamond bullets.
   The list has its own horizontal padding so bullets never touch the box
   border; each li reserves a left gutter wide enough that text never
   overlaps its diamond. */
.rcs-subscribe__features { list-style: none; padding: 0 var(--rcs-space-2); margin: 0 0 var(--rcs-space-5); flex-grow: 1; }
.rcs-subscribe__features > li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: var(--rcs-space-3);
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem !important;
    line-height: 1.5;
    color: var(--rcs-ink);
    text-align: left;
}
.rcs-subscribe__features > li::before {
    content: '\25C6'; /* ◆ filled diamond, echoing the map/compass motif */
    position: absolute;
    left: 0;
    top: 0.25em; /* nudge down to sit on the first text line */
    font-size: 0.72rem;
    line-height: 1;
    color: var(--rcs-cobalt-accent);
}
.rcs-subscribe__card--markets .rcs-subscribe__features > li::before { color: var(--rcs-gold-dk); }
/* Trailing margins zeroed so the gap above the button is set purely by
   .rcs-subscribe__card-action's padding-top — see the note there. */
.rcs-subscribe__features > li:last-child { margin-bottom: 0; }

/* Nested sub-bullets — smaller open diamond, indented further right. */
.rcs-subscribe__features-sub {
    list-style: none;
    padding: 0;
    margin: var(--rcs-space-3) 0 0 1.4rem;
}
.rcs-subscribe__features-sub > li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: var(--rcs-space-2);
    font-size: 0.95rem !important;
    line-height: 1.5;
    color: var(--rcs-ink-faded);
}
.rcs-subscribe__features-sub > li::before {
    content: '\25C7'; /* ◇ open diamond */
    position: absolute;
    left: 0;
    top: 0.25em;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--rcs-gold-dk);
}
.rcs-subscribe__features-sub > li:last-child { margin-bottom: 0; }

/* Tertiary level (e.g. the six ETFs under "Our tactical recommendations") —
   small filled square, indented one step further again. */
.rcs-subscribe__features-sub3 {
    list-style: none;
    padding: 0;
    margin: var(--rcs-space-2) 0 var(--rcs-space-2) 1.2rem;
}
.rcs-subscribe__features-sub3 > li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: var(--rcs-space-1);
    font-size: 0.9rem !important;
    line-height: 1.45;
    color: var(--rcs-ink-faded);
}
.rcs-subscribe__features-sub3 > li::before {
    content: '\25AA'; /* ▪ small filled square */
    position: absolute;
    left: 0;
    top: 0.12em;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--rcs-cobalt-accent);
}

/* Modifier: drop the bullet marker on a specific list item (used for the
   trailing "and more" line, which reads as a continuation rather than a
   separate item). */
.rcs-subscribe__features-nobullet::before { content: '' !important; }

.rcs-subscribe__features-everything {
    font-family: var(--rcs-font-brand);
    font-weight: 700;
    font-style: normal;
    color: var(--rcs-navy) !important;
    padding-left: 0 !important;
    margin-bottom: var(--rcs-space-3) !important;
}
.rcs-subscribe__features-everything::before { content: '' !important; }

/* Footnote pinned to the bottom-left of a card, under the bullet list.
   (.rcs-subscribe__features has flex-grow:1, so it absorbs the slack and
   pushes this — and the button row after it — to the bottom of the box.) */
.rcs-subscribe__footnote {
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem !important;
    line-height: 1.5;
    color: var(--rcs-ink-light);
    font-style: italic;
    text-align: left;
    margin: 0;
    padding-top: var(--rcs-space-3);
    border-top: 1px solid var(--rcs-parchment-worn);
}
/* The asterisk marker, both inline in the bullet and leading the footnote. */
.rcs-subscribe__fn-ref {
    color: var(--rcs-gold-dk);
    font-weight: 700;
    font-style: normal;
}

/* "Compare both plans" link under the standalone card on the upgrade page. */
.rcs-subscribe__compare-link {
    text-align: center;
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem !important;
    margin-top: var(--rcs-space-8);
}
.rcs-subscribe__compare-link a { color: var(--rcs-ink-light); }

/* Button row stays centered even though card content is left-justified.
   padding-top here is deliberately set to the SAME token as the card's
   bottom padding (space-8), and the trailing margins on the last bullet /
   sub-bullet / footnote are zeroed above — so the button ends up with an
   equal gap above and below, centered between the final line of copy and
   the box's bottom border. */
.rcs-subscribe__card-action { margin-top: auto; padding-top: var(--rcs-space-8); text-align: center; }

.rcs-subscribe__select-btn {
    display: inline-block;
    text-align: center;
    padding: var(--rcs-space-3) var(--rcs-space-6);
    background: var(--rcs-navy);
    color: var(--rcs-parchment) !important;
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--rcs-transition);
}
.rcs-subscribe__select-btn:hover { background: var(--rcs-gold-dk); border-color: var(--rcs-gold-dk); }
.rcs-subscribe__select-btn--markets { border-color: var(--rcs-gold-dk); }

/* Card-level consultation button — same middle-emphasis idea as the header
   one (gold outline + faint fill, quieter than the navy "Select This Plan"
   button). Sits below the subscribed/upgrade state in a card. */
.rcs-subscribe__consult-btn {
    display: block;
    text-align: center;
    margin-top: var(--rcs-space-3);
    padding: var(--rcs-space-2) var(--rcs-space-4);
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rcs-gold-dk);
    text-decoration: none !important;
    background-color: rgba(201,168,76,.12);
    border: 1px solid var(--rcs-gold-dk);
    border-radius: 3px;
    transition: background-color var(--rcs-transition), color var(--rcs-transition);
}
.rcs-subscribe__consult-btn:hover,
.rcs-subscribe__consult-btn:focus-visible {
    background-color: var(--rcs-gold-dk);
    color: var(--rcs-parchment) !important;
}

.rcs-subscribe__included {
    font-family: var(--rcs-font-brand);
    text-align: center;
    font-size: 0.85rem !important;
    color: var(--rcs-ink-faded);
    padding: var(--rcs-space-3);
    background: rgba(255,255,255,0.4);
    border: 1px dashed var(--rcs-parchment-worn);
}
.rcs-subscribe__included a { display: block; margin-top: var(--rcs-space-2); font-family: var(--rcs-font-brand); font-size: 0.8rem !important; font-weight: 600; }
.rcs-subscribe__upgrade-note {
    font-family: var(--rcs-font-brand);
    font-size: 0.72rem !important;
    color: var(--rcs-ink-light);
    text-align: center;
    margin-top: var(--rcs-space-2);
    font-style: italic;
}

/* ── Additional Options — the "cubes" freed up by narrower tier cards ──── */

/* ══════════════════════════════════════════════════════════════════════════
   9. COMPLETE SUBSCRIPTION PAGE (template-complete-subscription.php)
   ══════════════════════════════════════════════════════════════════════════ */

.rcs-complete-sub {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-8) var(--rcs-space-6) var(--rcs-space-12);
}

/* Single-tier completion page (template-complete-macro/markets.php): one
   centered panel with generous breathing room, rather than the two-column
   grid of the old shared page. */
.rcs-complete-sub--single {
    max-width: 520px;
    padding-block: var(--rcs-space-12);
}
.rcs-complete-sub--single .rcs-complete-sub__panel {
    /* Same fill as the Subscribe / Consultation cards, so every box across
       the site reads with identical transparency. */
    background: rgba(255, 255, 255, 0.18);
    padding: var(--rcs-space-8) var(--rcs-space-6);
    text-align: center;
}
.rcs-complete-sub__compare {
    margin-top: var(--rcs-space-6);
    font-family: var(--rcs-font-brand);
    font-size: 1rem !important;
    font-weight: 600;
}
/* Explains to a one-time consultation buyer why account details are asked
   for at all — sits under the form, above the back-link. */
.rcs-complete-sub__disclaimer {
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem !important;
    line-height: 1.55;
    color: var(--rcs-ink-light);
    font-style: italic;
    max-width: 340px;
    margin: var(--rcs-space-6) auto 0;
}
.rcs-complete-sub__compare a { color: var(--rcs-ink-light); }

.rcs-complete-sub__header { text-align: center; margin-bottom: var(--rcs-space-10); }
.rcs-complete-sub__title {
    font-family: var(--rcs-font-display);
    font-size: 2.1rem !important;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-3);
}
.rcs-complete-sub__intro { font-size: 0.95rem !important; color: var(--rcs-ink-faded); }
.rcs-complete-sub__intro a { font-weight: 600; }

.rcs-complete-sub__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rcs-space-8);
    align-items: start;
    scroll-margin-top: var(--rcs-space-8);
}
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-complete-sub__grid { grid-template-columns: 1fr; }
}

.rcs-complete-sub__panel {
    scroll-margin-top: var(--rcs-space-8);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid var(--rcs-parchment-worn);
    border-top: 4px solid var(--rcs-cobalt-accent);
    padding: var(--rcs-space-8) var(--rcs-space-6);
    box-shadow: var(--rcs-shadow-sm);
}
.rcs-complete-sub__panel--markets { border-top-color: var(--rcs-gold-dk); }

/* Give the MemberPress form breathing room from the panel borders and
   center it — the form markup (.mp_wrapper) gets a max-width and auto
   margins so fields sit in a centered column rather than edge-to-edge. */
.rcs-complete-sub__panel .mp_wrapper,
.rcs-complete-sub__panel .mepr-registration-form-wrap {
    max-width: 360px;
    margin-inline: auto;
}
/* Label|input horizontal rows (MemberPress's real row class is .mp-form-row).
   Label sits left, input shifted right and shortened. */
.rcs-complete-sub__panel .mp-form-row {
    display: flex;
    align-items: center;
    gap: var(--rcs-space-3);
    margin-bottom: var(--rcs-space-3);
    text-align: left;
}
/* Non-field rows (price/terms, submit) stay block + centered. */
.rcs-complete-sub__panel .mp-form-row.mepr_price,
.rcs-complete-sub__panel .mp-form-row.mepr_submit {
    display: block;
    text-align: center;
}

/* Title + dollar amount mirror the Subscribe page's tier cards exactly
   (same font, same sizes) so the checkout reads as the same family of
   pages. */
.rcs-complete-sub__panel-title {
    font-family: var(--rcs-font-display);
    font-size: 1.8rem !important;
    line-height: 1.3;
    color: var(--rcs-navy);
    text-align: center;
    margin-bottom: var(--rcs-space-3);
}
.rcs-complete-sub__panel-price {
    text-align: center;
    font-family: var(--rcs-font-display);
    font-size: 2.4rem;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-6);
    padding-bottom: var(--rcs-space-6);
    border-bottom: 1px solid var(--rcs-parchment-worn);
}
/* "/ year" and "one-time" mirror the Subscribe page's card-price-period —
   Outfit, small, muted — rather than inheriting the large display font of
   the dollar amount they sit beside. */
.rcs-complete-sub__panel-period {
    font-family: var(--rcs-font-brand);
    font-size: 1rem;
    color: var(--rcs-ink-light);
}
/* The billing terms line, above the thin divider, carrying the gold
   treatment the old "3-day free trial" fragment used. MemberPress prints
   its own copy inside the form; that one is hidden below. */
.rcs-complete-sub__panel-terms {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--rcs-gold-dk);
    margin-top: var(--rcs-space-3);
}

/* Added 27 August 2026 alongside the repeat-trial eligibility check
   (rcs-repeat-trial-check-v10.js). Distinct from the default gold trial
   copy — cobalt rather than red, since this is informational, not an
   error: it's telling a repeat subscriber the correct price ahead of time,
   not reporting something wrong with the form. */
.rcs-complete-sub__panel-terms--repeat {
    color: var(--rcs-red);
    font-weight: 600;
}

/* Hide MemberPress's built-in "Terms: ..." row — the same information now
   appears above the divider, styled to match the rest of the page. */
.rcs-complete-sub__panel .mp-form-row.mepr_price,
.rcs-complete-sub__panel .mepr_price {
    display: none !important;
}

/* Remove the required-field asterisks MemberPress appends to labels. Where
   it wraps them in an element we can hide it outright; the trailing bare
   "*" characters are stripped by the small script in footer.php, since
   those are plain text nodes CSS can't target. */
.rcs-complete-sub__panel .mepr-required,
.rcs-complete-sub__panel .cc-error,
.rcs-complete-sub__panel label .required {
    display: none !important;
}

/* All entry controls share one set of dimensions and typography. Selects
   were previously styled only for alignment, so they fell back to the
   browser's default control size and rendered noticeably larger than the
   text inputs beside them. */
.rcs-complete-sub__panel input[type="text"],
.rcs-complete-sub__panel input[type="email"],
.rcs-complete-sub__panel input[type="password"],
.rcs-complete-sub__panel input.mepr-form-input,
.rcs-complete-sub__panel select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0;
    background: #fff;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--rcs-ink);
    box-sizing: border-box;
    /* Entered values sit right-justified; the labels beside them stay left. */
    text-align: right;
}
/* MemberPress's real row markup (confirmed via DevTools):
 *   <div class="mp-form-row">
 *     <div class="mp-form-label"><label>…</label></div>
 *     <input class="mepr-form-input">          ← most fields
 *     …or…
 *     <div class="mp-hide-pw"><input type="password"><button …></div>
 *
 * So the label is NOT a direct <label> child of the row, and the password
 * input is nested one level deeper than every other field. Earlier rules
 * targeted `> label` and `.mepr-password-wrapper`, neither of which exists —
 * which is why labels wrapped onto two lines and the password field never
 * picked up the shared sizing. */
.rcs-complete-sub__panel .mp-form-row > .mp-form-label {
    flex: 0 0 130px;
    text-align: left;
    margin: 0;
}
.rcs-complete-sub__panel .mp-form-row > .mp-form-label label {
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    color: var(--rcs-ink-faded);
    margin: 0;
    display: inline;
}
/* The password wrapper must flex like a plain input would, so the field
   fills the row instead of collapsing to its natural width. */
.rcs-complete-sub__panel .mp-hide-pw {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: block;
}
.rcs-complete-sub__panel .mp-hide-pw input {
    width: 100%;
    box-sizing: border-box;
    /* Room for the eye button so typed text never sits underneath it. */
    padding-right: 2.2rem;
}
/* Pull the show/hide eye INSIDE the field. Left in normal flow it renders
   as a block beneath the input, which made the two password rows taller
   than every other row and pushed their labels out of alignment. */
.rcs-complete-sub__panel .mp-hide-pw button {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
}
/* Right-justify every entry control in a row regardless of nesting depth,
   excluding buttons and toggles. !important because MemberPress's own
   stylesheet sets alignment on .mepr-form-input. */
.rcs-complete-sub__panel .mp-form-row input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.rcs-complete-sub__panel .mp-form-row select {
    text-align: right !important;
}
.rcs-complete-sub__panel .mepr-password-wrapper input,
.rcs-complete-sub__panel input[type="password"] {
    flex: 1 1 auto;
    width: 100%;
    text-align: right !important;
}
.rcs-complete-sub__panel select {
    /* text-align on a closed <select> isn't universally honoured; this is
       the property browsers actually respect for the collapsed value. */
    text-align-last: right;
}
.rcs-complete-sub__panel input[type="text"]:focus,
.rcs-complete-sub__panel input[type="email"]:focus,
.rcs-complete-sub__panel input[type="password"]:focus,
.rcs-complete-sub__panel select:focus {
    outline: 2px solid var(--rcs-gold);
    outline-offset: 1px;
}
.rcs-complete-sub__panel .mepr_register_button,
.rcs-complete-sub__panel button[type="submit"],
.rcs-complete-sub__panel input[type="submit"] {
    width: 100%;
    padding: var(--rcs-space-3) var(--rcs-space-4);
    background: var(--rcs-navy);
    color: var(--rcs-parchment);
    border: 1px solid var(--rcs-navy);
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--rcs-transition);
}
.rcs-complete-sub__panel .mepr_register_button:hover,
.rcs-complete-sub__panel button[type="submit"]:hover,
.rcs-complete-sub__panel input[type="submit"]:hover {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}

/* ══════════════════════════════════════════════════════════════════════════
   11. ACCOUNT PAGE UPSELL ([rcs_tier_cards] shortcode, below the receipt)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Account page ordering ────────────────────────────────────────────────
   MemberPress appends its account UI (profile, payments, subscriptions)
   AFTER the page content, so the [rcs_tier_cards] shortcode placed in the
   editor renders above it by default. Flipping the content wrapper to a
   flex column lets us send the upsell last, so a client looking for a
   receipt sees their account details first and the offer sits quietly
   underneath. Scoped to body.rcs-account-page so no other page's layout
   is affected. */
body.rcs-account-page .rcs-page__content {
    display: flex;
    flex-direction: column;
}
body.rcs-account-page .rcs-account-upsell {
    order: 99;
}

.rcs-account-upsell {
    max-width: var(--rcs-max-width);
    margin: var(--rcs-space-12) auto 0;
    padding-top: var(--rcs-space-10);
    border-top: 1px solid var(--rcs-parchment-worn);
    text-align: center;
}
.rcs-account-upsell__title {
    font-family: var(--rcs-font-display);
    font-size: 1.6rem !important;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-3);
}
.rcs-account-upsell__intro {
    font-family: var(--rcs-font-brand);
    font-size: 0.98rem !important;
    line-height: 1.7;
    color: var(--rcs-ink-faded);
    max-width: 520px;
    /* The tier cards' pediment ornament is absolutely positioned ~46px above
       each card, so it needs clearance here or it overlaps this paragraph. */
    margin: 0 auto 5rem;
}
/* The tier cards inside the account upsell drop their addon column, so
   center the two cards on their own. */
.rcs-account-upsell .rcs-subscribe__layout { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   12. SUBSCRIPTION-PAGE WATERMARK BACKGROUND
   Applied to body.rcs-subscription-page (subscribe / complete-subscription /
   book-appointment). A large, faded Hero map sits behind the content via a
   fixed pseudo-element, so it reads as a subtle watermark rather than a
   literal image. Very low opacity keeps text fully legible over it.
   ══════════════════════════════════════════════════════════════════════════ */

body.rcs-subscription-page {
    position: relative;
}
body.rcs-subscription-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('../img/mercator-map-v25.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(1100px, 130%) auto;
    opacity: 0.06;
    pointer-events: none;
}
/* Keep actual page content above the watermark. */
/* .rcs-page added for the account, thank-you and login pages, which render
   through page.php. Without it the watermark's fixed pseudo-element would
   sit above their content. (.rcs-book is retained only as a no-op; that
   class was retired in v197.) */
body.rcs-subscription-page .rcs-subscribe,
body.rcs-subscription-page .rcs-complete-sub,
body.rcs-subscription-page .rcs-page,
body.rcs-subscription-page .rcs-book {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   13. BOOKING CALENDAR ([rcs_booking_calendar] shortcode)
   Wraps the embedded Google appointment-schedule booking page. Intended for
   the MemberPress consultation thank-you message, but works on any page.
   ══════════════════════════════════════════════════════════════════════════ */

.rcs-booking {
    max-width: 950px;
    margin: var(--rcs-space-8) auto 0;
    text-align: center;
}
.rcs-booking__title {
    font-family: var(--rcs-font-display);
    font-size: 1.6rem !important;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-3);
}
.rcs-booking__intro {
    font-family: var(--rcs-font-brand);
    font-size: 1.05rem !important;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
    max-width: 560px;
    margin: 0 auto var(--rcs-space-6);
}
/* The iframe sits in a bordered parchment panel so Google's unbranded
   booking UI still reads as part of the site rather than a bolted-on frame. */
.rcs-booking__frame {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid var(--rcs-parchment-worn);
    border-top: 4px solid var(--rcs-cobalt-accent);
    box-shadow: var(--rcs-shadow-sm);
    padding: var(--rcs-space-3);
    overflow: hidden;
}
.rcs-booking__frame iframe {
    display: block;
    width: 100%;
    border: 0;
}
.rcs-booking__fallback {
    font-family: var(--rcs-font-brand);
    font-size: 0.8rem !important;
    color: var(--rcs-ink-light);
    margin-top: var(--rcs-space-3);
}
.rcs-booking__btn {
    display: inline-block;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment) !important;
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background var(--rcs-transition);
}
.rcs-booking__btn:hover,
.rcs-booking__btn:focus-visible {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}

/* ══════════════════════════════════════════════════════════════════════════
   14. STANDARD PAGES (page.php)
   Plain WordPress Pages — e.g. the MemberPress Account and Thank You pages,
   which host shortcodes rather than theme templates.
   ══════════════════════════════════════════════════════════════════════════ */

.rcs-page {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-10) var(--rcs-space-6) var(--rcs-space-12);
}
.rcs-page__inner {
    max-width: 900px;
    margin-inline: auto;
}
.rcs-page__title {
    font-family: var(--rcs-font-display);
    font-size: 2rem !important;
    letter-spacing: 0.04em;
    color: var(--rcs-navy);
    text-align: center;
    margin-bottom: var(--rcs-space-8);
}
.rcs-page__content {
    font-family: var(--rcs-font-brand);
    color: var(--rcs-ink);
}
.rcs-page__content h2 {
    font-family: var(--rcs-font-display);
    color: var(--rcs-navy);
    margin-top: var(--rcs-space-8);
}
.rcs-page__content a { font-weight: 600; }

/* ── Single post article template (single.php for post type) ─────────────
   Full article view: Cinzel title linked to source, scaled featured image,
   Outfit body, taxonomy pills, LinkedIn share, prev/next nav.
   Scoped entirely to .rcs-single so it cannot bleed into MemberPress
   pages or other CPTs that share single.php's generic fallback.
   ════════════════════════════════════════════════════════════════════════ */
.rcs-single {
    max-width: var(--rcs-max-width);
    margin-inline: auto;
    padding: var(--rcs-space-10) var(--rcs-space-6) var(--rcs-space-12);
}
.rcs-single__article {
    max-width: 800px;
    margin-inline: auto;
}

/* Header — thumbnail left, title + meta right */
.rcs-single__header {
    display: flex;
    gap: var(--rcs-space-6);
    align-items: flex-start;
    margin-bottom: var(--rcs-space-8);
}

/* Thumbnail image — left side */
.rcs-single__figure {
    flex: 0 0 180px;
    margin: 0;
}
.rcs-single__image {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(10, 22, 40, 0.15);
    display: block;
}
.rcs-single__figure a {
    display: block;
}

/* Title + meta — right side */
.rcs-single__header-text {
    flex: 1;
    min-width: 0;
}

/* Title — Cinzel, linked to source article */
.rcs-single__title {
    font-family: var(--rcs-font-display);
    font-size: 1.7rem;
    letter-spacing: 0.04em;
    color: var(--rcs-navy);
    margin: 0 0 var(--rcs-space-3) 0;
    line-height: 1.3;
}
.rcs-single__title a {
    color: var(--rcs-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}
.rcs-single__title a:hover {
    color: var(--rcs-red);
}

/* Source + Date on same line */
.rcs-single__meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem;
    color: var(--rcs-ink-light);
}
/* Source attribution */
.rcs-single__source {
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem;
    color: var(--rcs-ink-light);
}
.rcs-single__source a {
    color: var(--rcs-cobalt-accent);
    font-weight: 600;
    text-decoration: none;
}
.rcs-single__source a:hover {
    color: var(--rcs-red);
    text-decoration: underline;
}

/* Post body */
.rcs-single__content {
    font-family: var(--rcs-font-brand);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--rcs-ink);
    margin-bottom: var(--rcs-space-8);
}
.rcs-single__content p {
    margin-bottom: var(--rcs-space-4);
}
.rcs-single__content a {
    color: var(--rcs-cobalt-accent);
    font-weight: 600;
    text-decoration: none;
}
.rcs-single__content a:hover {
    color: var(--rcs-red);
    text-decoration: underline;
}
.rcs-single__content strong {
    color: var(--rcs-navy);
}
/* Restore native bullets/numbers for lists written into the post body.
   The global reset at the top of this file (`ul, ol { list-style: none; }`)
   is there for the nav menus, rolodex, and tier-card feature lists, which
   are deliberately unbulleted — but it also stripped markers and the
   hanging indent from any Gutenberg list block an author adds to a post,
   since `* { margin: 0; padding: 0; }` zeroes the indent too. `revert`
   rather than a hardcoded `disc` so an <ol> still gets numbers. Scoped to
   this content wrapper only — nav/rolodex/cards are untouched. */
.rcs-single__content .wp-block-list {
    list-style: revert;
    padding-left: 1.5em;
    margin-bottom: var(--rcs-space-4);
}
.rcs-single__content .wp-block-list li {
    margin-bottom: 0.4em;
}

/* Footer meta — Posted on (left) + LinkedIn share (right) on same row */
.rcs-single__article {
    display: flex;
    flex-direction: column;
}
/* ⚠ EVERY child of .rcs-single__article is positioned by `order`, not by its
   position in the markup. An element without one defaults to order:0 and renders
   FIRST — above the title and the featured image.

   That is exactly what happened when the complimentary notice was added: the
   template placed it correctly between the content and the footer, and it
   appeared at the very top of the post. `order` also takes an INTEGER, so a
   value of 3.5 to slot something in is silently discarded and falls back to 0 —
   the same bug by a different route. Renumber instead.

   Anything added to this article needs a number in this sequence. */
.rcs-single__header { order: 1; }
.rcs-single__content { order: 2; }
.rcs-single__gate-panel,
.rcs-gate__panel { order: 3; }
.rcs-single__complimentary { order: 4; }
.rcs-single__disclaimer { order: 5; }
.rcs-single__footer-meta { order: 6; }
.rcs-single__taxonomies { order: 7; }
.rcs-single__related { order: 8; }
/* Jetpack auto-injected Related Posts (fallback if filter doesn't work) */
.rcs-single__article .jp-relatedposts { order: 8; }

.rcs-single__footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--rcs-space-4);
    border-top: 1px solid var(--rcs-parchment-dk);
    margin-bottom: var(--rcs-space-2);
}
.rcs-single__footer-meta-left {
    display: flex;
    align-items: baseline;
    gap: var(--rcs-space-2);
    flex-wrap: wrap;
}
.rcs-single__byline {
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem;
    color: var(--rcs-ink-light);
    letter-spacing: 0.02em;
}
.rcs-single__share-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem;
    color: var(--rcs-ink-light);
    text-decoration: none;
    transition: color 0.2s ease;
}
.rcs-single__share-link:hover {
    color: var(--rcs-cobalt-accent);
}
.rcs-single__share-icon {
    flex-shrink: 0;
}

/* Date — inside footer-meta row */
.rcs-single__date {
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem;
    color: var(--rcs-ink-light);
    letter-spacing: 0.02em;
}

/* Taxonomy pills — flat horizontal flow, no labels */
.rcs-single__taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    margin-bottom: var(--rcs-space-4);
    padding-top: 0;
}
.rcs-single__pill {
    display: inline-block;
    font-family: var(--rcs-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--rcs-parchment);
    background-color: var(--rcs-cobalt);
    padding: 0.25em 0.75em;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.rcs-single__pill:hover {
    background-color: var(--rcs-navy);
    color: var(--rcs-parchment);
    text-decoration: none;
}

/* Prev / Return to list / Next navigation */
.rcs-single__nav {
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--rcs-space-6);
    border-top: 1px solid var(--rcs-parchment-dk);
    font-family: var(--rcs-font-brand);
    font-size: 1.05rem;
}
.rcs-single__nav a {
    color: var(--rcs-cobalt-accent);
    text-decoration: none;
    font-weight: 600;
}
.rcs-single__nav a:hover {
    color: var(--rcs-red);
}
.rcs-single__nav-prev,
.rcs-single__nav-next {
    flex: 1;
}
.rcs-single__nav-prev { text-align: left; }
.rcs-single__nav-next { text-align: right; }
.rcs-single__nav-list { text-align: center; flex: 1; }

/* ── Responsive: post cards at ≤950px ──────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    /* Portrait: keep side-by-side layout, just shrink the thumbnail */
    .rcs-post-card__thumb-link {
        flex: 0 0 80px;
    }
    .rcs-post-card__thumb {
        width: 80px !important;
    }
    .rcs-post-card__title {
        font-size: 0.85rem;
    }
    .rcs-post-card__ideas {
        font-size: 0.78rem;
    }
    .rcs-post-card__date {
        font-size: 0.7rem;
    }
    /* No mobile-specific stacking override needed here — .rcs-post-card__meta's
       flex-wrap now handles this at every viewport (see the base rule near
       .rcs-post-card__pills): the date and the pill group share one line
       whenever they both fit, and the whole pill group drops to its own line
       under the date the moment they don't. Mobile just hits that overflow
       point more often, because there's less width to share. An earlier
       version of this block forced the date onto its own line unconditionally
       at ≤950px — that also split a single short pill (e.g. "EUROPE") onto
       its own line even when there was plenty of room beside the date, which
       wasn't the goal. */
    /* Jetpack Related Posts: show only 2 on mobile portrait */
    .jp-relatedposts-items .jp-relatedposts-post:nth-child(n+3) {
        display: none !important;
    }

    /* Single post: keep stacked/centered in portrait */
    .rcs-single__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .rcs-single__figure {
        flex: 0 0 auto;
        max-width: 200px;
    }
    .rcs-single__meta-line {
        justify-content: center;
    }
    .rcs-single__title {
        font-size: 1.4rem;
    }
    .rcs-single__content {
        font-size: 1rem;
    }
}

/* ── Landscape: single post uses desktop layout ───────────────────────── */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    /* Single post header: side-by-side like desktop */
    .rcs-single__header {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
    .rcs-single__figure {
        flex: 0 0 160px;
        max-width: 160px;
    }
    .rcs-single__meta-line {
        justify-content: flex-start;
    }
    .rcs-single__title {
        font-size: 1.4rem;
    }

    /* Jetpack Related Posts: show all 3 in landscape */
    .jp-relatedposts-items .jp-relatedposts-post:nth-child(n+3) {
        display: block !important;
    }
    .jp-relatedposts-items .jp-relatedposts-post:nth-child(n+4) {
        display: none !important;
    }
}

/* ── Landscape: post cards in 2×2 grid ────────────────────────────────── */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-post-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--rcs-space-4);
    }
    .rcs-post-card__divider {
        display: none;
    }
    .rcs-post-card {
        border: 1px solid var(--rcs-parchment-dk);
        border-radius: 4px;
        padding: var(--rcs-space-3);
    }
    .rcs-post-card__thumb-link {
        flex: 0 0 70px;
    }
    .rcs-post-card__thumb {
        width: 70px !important;
    }
    .rcs-post-card__title {
        font-size: 0.8rem;
    }
}

/* ── MemberPress account area, rendered through our theme ────────────────
   ReadyLaunch is switched off for this page, so MemberPress's markup
   inherits the site styles.

   Selectors confirmed from the live DOM (not guessed): the nav is
   <nav id="mepr-account-nav"> wrapping a <ul> of <li class="mepr-nav-item">,
   and the greeting is <div id="mepr-account-welcome-message"> containing a
   <p>. Both are IDs — earlier class-based attempts never matched. */

/* Nav row: Home | Subscriptions | Payments | Logout — set apart from the
   profile form below it with spacing and a rule, so the two read as
   separate sections rather than one run-on block. */
body.rcs-account-page #mepr-account-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rcs-space-8);
    list-style: none;
    margin: 0 0 var(--rcs-space-6) 0;
    padding: 0 0 var(--rcs-space-5) 0;
    border-bottom: 1px solid var(--rcs-parchment-worn);
}
body.rcs-account-page #mepr-account-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.rcs-account-page #mepr-account-nav a {
    font-family: var(--rcs-font-brand);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rcs-navy);
    text-decoration: none;
    transition: color var(--rcs-transition);
}
body.rcs-account-page #mepr-account-nav a:hover,
body.rcs-account-page #mepr-account-nav a:focus-visible {
    color: var(--rcs-gold-dk);
}
/* Current tab marked in gold rather than relying on colour alone elsewhere. */
body.rcs-account-page #mepr-account-nav .mepr-active-nav-tab a {
    color: var(--rcs-gold-dk);
}

/* Greeting — "Welcome to Rational Capitalist Strategist" */
body.rcs-account-page #mepr-account-welcome-message p {
    font-family: var(--rcs-font-display) !important;
    font-size: 1.7rem !important;
    line-height: 1.3;
    color: var(--rcs-navy);
    margin: var(--rcs-space-6) 0 var(--rcs-space-8) 0;
}

/* Section heading above the profile fields, so it's clear the First Name /
   Last Name / Email values are the details we hold on record for them.
   MemberPress renders the form as <form id="mepr_account_form"> directly
   after the welcome message, with no heading of its own — this inserts one
   without needing to filter MemberPress's output.

   Tradeoff worth knowing: this is generated content, so it isn't a real
   <h2> in the document outline. Fine for a field-group label like this; if
   it ever needs to be a genuine heading (for SEO or stricter accessibility),
   say so and it can be injected via a the_content filter instead. */
body.rcs-account-page #mepr_account_form::before {
    content: "Your Account Information";
    display: block;
    font-family: var(--rcs-font-display);
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--rcs-navy);
    margin: 0 0 var(--rcs-space-2) 0;
    padding-bottom: var(--rcs-space-3);
    border-bottom: 1px solid var(--rcs-parchment-worn);
}

/* ── MemberPress unauthorized / login prompt ─────────────────────────────
   Shown wherever a logged-out visitor hits gated content, so these rules
   are deliberately NOT scoped to the account page. Selector confirmed from
   the live DOM: <div class="mepr-unauthorized-message"><p>…</p></div>
   followed by <div class="mepr-login-form-wrap">. */
.mepr-unauthorized-message p {
    font-family: var(--rcs-font-brand);
    font-size: 1.15rem !important;
    font-weight: 600;
    line-height: 1.5;
    color: var(--rcs-gold-dk);
    margin: 0 0 var(--rcs-space-8) 0;
    padding-bottom: var(--rcs-space-5);
    border-bottom: 1px solid var(--rcs-parchment-worn);
}

/* Note under the login form reminding people to check spam for the reset
   email. Generated content on the form wrapper, so it needs no changes to
   MemberPress's own markup. */
.mepr-login-form-wrap::after {
    content: "If you request a password reset and the email doesn't arrive within a few minutes, please check your spam or junk folder.";
    display: block;
    max-width: 46ch;
    margin-top: var(--rcs-space-6);
    font-family: var(--rcs-font-brand);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--rcs-ink-light);
}

/* ══════════════════════════════════════════════════════════════════════════
   15. RESTORED IN v220
   These rules were removed by accident during the v219 cleanup. The dead
   .rcs-subscribe__addon-cube block wasn't contiguous — the FAQ rules sat
   between its first and last declarations, and the removal swept from the
   first addon-cube rule to the last, taking everything in between. Restored
   verbatim here rather than spliced back mid-file, since appending is lower
   risk and nothing competes with these selectors.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FAQ — single consolidated dropdown ──────────────────────────────────
   One <details> instead of three, titled "Frequently Asked Questions"
   directly on the summary row (no separate section heading above it). */
.rcs-subscribe__faq {
    max-width: 720px;
    margin: var(--rcs-space-12) auto 0;
}
.rcs-subscribe__faq-summary {
    font-family: var(--rcs-font-brand) !important;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--rcs-navy);
    padding: var(--rcs-space-4);
    justify-content: center; /* base .rcs-collapsible__summary is space-between; center just this one */
}

.rcs-subscribe__faq-item { margin-bottom: var(--rcs-space-8); }
.rcs-subscribe__faq-item:last-child { margin-bottom: 0; }
.rcs-subscribe__faq-q {
    font-family: var(--rcs-font-brand);
    font-weight: 700;
    font-size: 0.95rem !important;
    color: var(--rcs-ink);
    margin-bottom: var(--rcs-space-2) !important;
}
.rcs-subscribe__faq-item p {
    font-family: var(--rcs-font-brand);
}

/* Also lost in v219: the MemberPress form's base font on the checkout
   panels. The sizing rule survived; only this declaration went. */
.rcs-complete-sub__panel .mp_wrapper,
.rcs-complete-sub__panel .mepr-registration-form-wrap {
    font-family: var(--rcs-font-brand);
}

/* Visible email fallback beneath a mailto button. A mailto link does nothing
   at all when the browser has no registered mail handler — common for people
   using webmail — so the address is shown in full and stays copyable. */
.rcs-subscribe__contact-fallback {
    font-family: var(--rcs-font-brand);
    font-size: 0.82rem !important;
    color: var(--rcs-ink-light);
    margin: var(--rcs-space-4) 0 0;
}
.rcs-subscribe__contact-fallback a {
    color: var(--rcs-gold-dk);
    word-break: break-word;
}

/* Pages where a tier card is the FIRST element (the upgrade page) need extra
   top padding: the pediment ornament is absolutely positioned 46px above its
   card, which overflowed the container's normal 2rem padding and was being
   clipped. On the subscribe page the ribbon and title already provide that
   clearance, so this is scoped rather than applied to .rcs-subscribe. */
.rcs-subscribe--standalone-card {
    padding-top: 5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   16. STICKY FOOTER + THANK-YOU PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* On short pages (thank-you, login, confirmation states) the content ran out
   well before the viewport did, leaving the footer stranded mid-screen with
   bare background beneath it. Making the body a full-height flex column and
   letting the main region absorb the slack pins the footer to the bottom
   where it belongs, without affecting long pages. */
html {
    min-height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .rcs-footer,
body > footer {
    margin-top: auto;
}

/* Thank-you page: MemberPress appends its confirmation message after the
   page content, so anything typed into the editor lands above it. Same
   flex-ordering approach as the account page sends editor content below,
   so a closing line reads as a sign-off rather than a preamble. */
body.rcs-thankyou-page .rcs-page__content {
    display: flex;
    flex-direction: column;
    text-align: center;
}
body.rcs-thankyou-page .rcs-page__content > p:not(:empty) {
    order: 99;
    font-family: var(--rcs-font-brand);
    font-size: 1.15rem !important;
    font-weight: 600;
    color: var(--rcs-gold-dk);
    margin-top: var(--rcs-space-6);
}

/* MemberPress login form — the submit button ships as a browser-default
   blue, which reads as someone else's UI inside the branded page. Matched
   to the site's primary button treatment. Selector kept broad because the
   login form renders in several contexts (the login page itself, and the
   unauthorized prompt on any gated page). */
.mepr-login-form-wrap input[type="submit"],
.mepr-login-form-wrap button[type="submit"],
.mepr-login-form input[type="submit"],
.mp_wrapper input[type="submit"].mepr-share-button,
.mepr-login-form-wrap .mepr-submit {
    display: inline-block;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--rcs-transition), border-color var(--rcs-transition);
}
.mepr-login-form-wrap input[type="submit"]:hover,
.mepr-login-form-wrap button[type="submit"]:hover,
.mepr-login-form input[type="submit"]:hover {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}
/* Login fields, matched to the checkout forms. */
.mepr-login-form-wrap input[type="text"],
.mepr-login-form-wrap input[type="password"],
.mepr-login-form-wrap input[type="email"] {
    padding: var(--rcs-space-3);
    background: #fff;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink);
}

/* Consultation offer on the account page — its own box beneath the tier
   cards, rather than a button tucked inside a plan's card where it read as
   part of that plan. */
.rcs-account-consult {
    max-width: 21cm;
    margin: 4rem auto 0;
    padding: var(--rcs-space-8);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid var(--rcs-parchment-worn);
    border-left: 3px solid var(--rcs-cobalt-accent);
    box-shadow: var(--rcs-shadow-sm);
    text-align: center;
}
.rcs-account-consult__title {
    font-family: var(--rcs-font-display);
    font-size: 1.3rem !important;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-3);
}
.rcs-account-consult__intro {
    font-family: var(--rcs-font-brand);
    font-size: 0.92rem !important;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
    max-width: 460px;
    margin: 0 auto var(--rcs-space-5);
}
.rcs-account-consult .rcs-subscribe__consult-btn {
    display: inline-block;
    margin-top: 0;
}

/* ── MemberPress pages rendered through page.php / single.php ────────────
   MemberPress's own registration pages (/register/<membership>/) and group
   pages render as custom post types, so they come through single.php with
   the .rcs-page wrapper — not the bespoke .rcs-complete-sub templates. That
   means none of the checkout styling applied, leaving browser-default
   inputs and an unstyled Sign Up button inside an otherwise branded page.

   These rules mirror the .rcs-complete-sub__panel treatment so the two
   checkout experiences match. Scoped to .rcs-page__content so ordinary
   pages are unaffected. */
body:not(.rcs-account-page) .rcs-page__content .mp_wrapper,
body:not(.rcs-account-page) .rcs-page__content .mepr-registration-form-wrap {
    max-width: 420px;
    margin-inline: auto;
}
/* Font applies everywhere; only the width constraint is registration-specific. */
.rcs-page__content .mp_wrapper,
.rcs-page__content .mepr-registration-form-wrap {
    font-family: var(--rcs-font-brand);
}
.rcs-page__content .mp-form-row {
    display: flex;
    align-items: center;
    gap: var(--rcs-space-3);
    margin-bottom: var(--rcs-space-3);
    text-align: left;
}
.rcs-page__content .mp-form-row > .mp-form-label {
    flex: 0 0 130px;
    text-align: left;
    margin: 0;
}
.rcs-page__content .mp-form-row > .mp-form-label label {
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    color: var(--rcs-ink-faded);
    margin: 0;
    display: inline;
}
.rcs-page__content .mp-form-row.mepr_price,
.rcs-page__content .mp-form-row.mepr_submit {
    display: block;
    text-align: center;
}
.rcs-page__content input[type="text"],
.rcs-page__content input[type="email"],
.rcs-page__content input[type="password"],
.rcs-page__content input.mepr-form-input,
.rcs-page__content select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    background: #fff;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--rcs-ink);
    box-sizing: border-box;
    text-align: right;
}
.rcs-page__content select { text-align-last: right; }
.rcs-page__content .mp-hide-pw {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: block;
}
.rcs-page__content .mp-hide-pw input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.2rem;
}
.rcs-page__content .mp-hide-pw button {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
}
/* The Sign Up button — was rendering as a bare browser default. */
.rcs-page__content .mepr-submit input[type="submit"],
.rcs-page__content input[type="submit"],
.rcs-page__content button[type="submit"] {
    display: inline-block;
    width: auto;
    min-width: 240px;
    margin-top: var(--rcs-space-4);
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--rcs-transition), border-color var(--rcs-transition);
}
.rcs-page__content .mepr-submit input[type="submit"]:hover,
.rcs-page__content input[type="submit"]:hover,
.rcs-page__content button[type="submit"]:hover {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}
/* Terms line above the form, matched to the checkout pages' gold treatment. */
.rcs-page__content .mepr_price {
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--rcs-gold-dk);
    margin-bottom: var(--rcs-space-6);
}

/* ── Login form (#mepr_loginform) ────────────────────────────────────────
   Markup confirmed from the live DOM — there is NO .mepr-login-form-wrap on
   this page, which is why the v232 rules matched nothing. The real structure:

     <form id="mepr_loginform" class="mepr-form">
       <div class="mp-form-row mepr_username">
         <div class="mp-form-label"><label>…</label></div>
         <input type="text" id="user_login">        ← sibling of the label div
       <div class="mp-form-row mepr_password">
         <div class="mp-form-label">
           <label>…</label>
           <div class="mp-hide-pw"><input type="password"><button>
                                                     ↑ nested INSIDE the label div
       <div class="submit"><input type="submit" id="wp-submit">

   The v230 registration rules (.rcs-page__content .mp-form-row) match here
   too and impose the checkout treatment. These ID-scoped rules override that
   and restore stacked labels with full-width fields. */
#mepr_loginform .mp-form-row {
    display: block;
    text-align: left;
    margin-bottom: var(--rcs-space-4);
}
#mepr_loginform .mp-form-label {
    flex: none;
    display: block;
    margin-bottom: var(--rcs-space-2);
}
#mepr_loginform .mp-form-label label {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    color: var(--rcs-ink-faded);
    margin: 0 0 var(--rcs-space-2) 0;
}
#mepr_loginform input[type="text"],
#mepr_loginform input[type="password"] {
    display: block;
    width: 100%;
    max-width: 360px;
    flex: none;
    padding: var(--rcs-space-3);
    background: #fff;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink);
    text-align: left;
    box-sizing: border-box;
}
/* Password wrapper sits inside the label div here, so it needs its own width. */
#mepr_loginform .mp-hide-pw {
    position: relative;
    display: block;
    width: 100%;
    max-width: 360px;
}
#mepr_loginform .mp-hide-pw input[type="password"] {
    padding-right: 2.4rem;
}
#mepr_loginform .mp-hide-pw button {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
}
/* "Remember Me" — plain div, no MemberPress class of its own. */
#mepr_loginform label input[type="checkbox"] {
    width: auto;
    margin-right: var(--rcs-space-2);
    vertical-align: middle;
}
/* Submit sits in a bare .submit div as #wp-submit. */
#mepr_loginform #wp-submit,
#mepr_loginform .submit input[type="submit"] {
    display: inline-block;
    width: auto;
    min-width: 200px;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--rcs-transition), border-color var(--rcs-transition);
}
#mepr_loginform #wp-submit:hover,
#mepr_loginform .submit input[type="submit"]:hover {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}

/* ── Account page: subscriptions table ───────────────────────────────────
   MemberPress's table was rendering cramped, wrapping "Change Plan" onto
   three lines. Given it full width with room to breathe. */
body.rcs-account-page .mepr-account-table,
body.rcs-account-page table.mepr-account-table,
body.rcs-account-page .mp_wrapper table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
}
body.rcs-account-page .mp_wrapper table th,
body.rcs-account-page .mp_wrapper table td {
    padding: var(--rcs-space-4) var(--rcs-space-3);
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--rcs-parchment-worn);
}
body.rcs-account-page .mp_wrapper table th {
    font-weight: 700;
    color: var(--rcs-navy);
    white-space: nowrap;
}
/* Action links sit side by side on one row. They were previously display:block,
   which stacked them three-deep and stretched the row height well beyond the
   payment-history rows. white-space:nowrap keeps each label intact. */
body.rcs-account-page .mp_wrapper table td a {
    white-space: nowrap;
    display: inline-block;
    margin: 0 var(--rcs-space-3) 0 0;
}
body.rcs-account-page .mp_wrapper table td a:last-child {
    margin-right: 0;
}
/* Uniform row height across both tables. */
body.rcs-account-page .mp_wrapper table td,
body.rcs-account-page .mp_wrapper table th {
    padding: var(--rcs-space-3) var(--rcs-space-3);
    vertical-align: middle;
    white-space: nowrap;
}
body.rcs-account-page [data-label="Actions"] {
    white-space: nowrap;
}

/* The spam-folder note was attached to .mepr-login-form-wrap, which exists on
   the unauthorized-access view but NOT on the dedicated login page. Add it
   there too, so anyone resetting a password sees it wherever they started. */
#mepr_loginform::after {
    content: "If you request a password reset and the email doesn't arrive within a few minutes, please check your spam or junk folder.";
    display: block;
    max-width: 46ch;
    margin-top: var(--rcs-space-6);
    font-family: var(--rcs-font-brand);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--rcs-ink-light);
}

/* ══════════════════════════════════════════════════════════════════════════
   17. MEMBERPRESS REGISTRATION PAGES (/register/<membership>/)
   Reached via Change Plan and MemberPress's own links. Styled to match the
   bespoke checkout templates so members see one consistent checkout however
   they arrive. The post type renders through single.php, so the panel
   treatment has to come from the .rcs-page wrapper rather than markup.
   ══════════════════════════════════════════════════════════════════════════ */

body.rcs-register-page .rcs-page {
    max-width: 620px;
    padding-block: var(--rcs-space-12);
}
/* Illuminated double-rule border, matching .rcs-illuminated-border on the
   custom checkout panels. The corner diamonds there are separate <span>
   elements in the template's markup; MemberPress emits none, so they're
   approximated with pseudo-elements on the two available hooks. */
body.rcs-register-page .rcs-page__inner {
    position: relative;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid var(--rcs-gold-dk);
    outline: 1px solid var(--rcs-gold-dk);
    outline-offset: -6px;
    padding: var(--rcs-space-10) var(--rcs-space-8);
    box-shadow: var(--rcs-shadow-sm);
}
body.rcs-register-page .rcs-page__inner::before,
body.rcs-register-page .rcs-page__inner::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--rcs-gold-dk);
    transform: rotate(45deg);
    z-index: 1;
}
body.rcs-register-page .rcs-page__inner::before { top: -5.5px; left: -5.5px; }
body.rcs-register-page .rcs-page__inner::after  { top: -5.5px; right: -5.5px; }
body.rcs-register-page .rcs-page__content { position: relative; }
body.rcs-register-page .rcs-page__content::before,
body.rcs-register-page .rcs-page__content::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--rcs-gold-dk);
    transform: rotate(45deg);
    z-index: 1;
}
body.rcs-register-page .rcs-page__content::before {
    bottom: calc(-1 * var(--rcs-space-10) - 5.5px);
    left: calc(-1 * var(--rcs-space-8) - 5.5px);
}
body.rcs-register-page .rcs-page__content::after {
    bottom: calc(-1 * var(--rcs-space-10) - 5.5px);
    right: calc(-1 * var(--rcs-space-8) - 5.5px);
}

/* Terms row → the prominent price treatment used on the custom checkouts.
   MemberPress splits it into a "Terms:" label cell and a value cell; the
   label is redundant once the value is styled as the headline figure. */
body.rcs-register-page .mepr_price_cell_label { display: none; }
body.rcs-register-page .mepr_price_cell {
    text-align: center;
    margin-bottom: var(--rcs-space-8);
}
/* Spans created by rcsFormatRegisterTerms() in footer.php, matching the
   price block on the custom checkout templates.
   NOTE: MemberPress puts .mepr_bold on this row, so the weight has to be
   reset explicitly or the amount inherits bold. */
.rcs-mepr-price__amount {
    font-family: var(--rcs-font-display);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--rcs-navy);
}
.rcs-mepr-price__period {
    font-family: var(--rcs-font-brand);
    font-size: 1rem;
    font-weight: 400;
    /* Muted, matching the direct checkout. It briefly went gold in v242 —
       but the bold was what actually looked wrong, and that's now reset. */
    color: var(--rcs-ink-light);
}
.rcs-mepr-price__trial {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--rcs-gold-dk);
    margin-top: var(--rcs-space-3);
}

/* Sign Up button — MemberPress renders it as a bare input inside
   <div class="mp-form-submit">, left-aligned and only as wide as its label.
   Span the content width, centred. */
body.rcs-register-page .mp-form-submit {
    text-align: center;
    margin-top: var(--rcs-space-8);
}
body.rcs-register-page .mp-form-submit input[type="submit"],
body.rcs-register-page input.mepr-submit {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}
/* Membership title, matched to the checkout panels. */
body.rcs-register-page .rcs-page__title {
    font-family: var(--rcs-font-display);
    font-size: 1.8rem !important;
    line-height: 1.3;
    color: var(--rcs-navy);
    text-align: center;
    margin-bottom: var(--rcs-space-6);
    padding-bottom: var(--rcs-space-6);
    border-bottom: 1px solid var(--rcs-parchment-worn);
}
/* Terms line, in the same gold treatment as the other checkouts. */
body.rcs-register-page .mepr_price,
body.rcs-register-page .mp-form-row.mepr_price {
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--rcs-gold-dk);
    text-align: center;
    margin-bottom: var(--rcs-space-8);
}

/* ── Account page: profile form field widths ─────────────────────────────
   v233 removed the 420px constraint from .mp_wrapper on the account page so
   the welcome message and nav weren't squeezed — but that left the profile
   form's inputs stretching the full page width, which reads as a giant bar
   rather than a field. Constrain the INPUTS instead of the wrapper, so the
   surrounding text keeps its width and the fields look normal.
   Form confirmed as <form id="mepr_account_form"> from the live DOM. */
body.rcs-account-page #mepr_account_form input[type="text"],
body.rcs-account-page #mepr_account_form input[type="email"],
body.rcs-account-page #mepr_account_form input[type="password"],
body.rcs-account-page #mepr_account_form select,
body.rcs-account-page #mepr_account_form .mp-hide-pw {
    display: block;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
/* Stacked label above field, which suits a profile form better than the
   label-left treatment used at checkout. */
body.rcs-account-page #mepr_account_form .mp-form-row {
    display: block;
    margin-bottom: var(--rcs-space-5);
}
body.rcs-account-page #mepr_account_form .mp-form-label {
    display: block;
    margin-bottom: var(--rcs-space-2);
}
body.rcs-account-page #mepr_account_form .mp-form-label label {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    color: var(--rcs-ink-faded);
    margin: 0;
}

/* ── Account page: centre the profile-form block ─────────────────────────
   The nav row and the welcome greeting stay left-aligned; the "Your Account
   Information" block sits centred on the page, matching how the upsell
   section below it is positioned. The block is centred as a unit — labels
   and fields keep their normal left alignment inside it, which is what a
   form wants. */
body.rcs-account-page #mepr_account_form {
    max-width: 480px;
    margin-inline: auto;
}
body.rcs-account-page #mepr_account_form::before {
    text-align: center;
}
/* Fields fill the centred block rather than sitting left inside it. */
body.rcs-account-page #mepr_account_form input[type="text"],
body.rcs-account-page #mepr_account_form input[type="email"],
body.rcs-account-page #mepr_account_form input[type="password"],
body.rcs-account-page #mepr_account_form select,
body.rcs-account-page #mepr_account_form .mp-hide-pw {
    max-width: 100%;
}
/* Save Profile centred under the block. */
body.rcs-account-page #mepr_account_form .mepr_submit,
body.rcs-account-page #mepr_account_form .submit {
    text-align: center;
}

/* Thank-you copy from [rcs_thankyou], which distinguishes an upgrade from a
   fresh signup. Sits below MemberPress's own confirmation line. */
.rcs-thankyou {
    max-width: 560px;
    margin: var(--rcs-space-8) auto 0;
    text-align: center;
}
.rcs-thankyou__lead {
    font-family: var(--rcs-font-display);
    font-size: 1.5rem !important;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-4);
}
.rcs-thankyou__body {
    font-family: var(--rcs-font-brand);
    font-size: 1rem !important;
    line-height: 1.7;
    color: var(--rcs-gold-dk);
    font-weight: 600;
}

/* ── Booking calendar refinements ────────────────────────────────────────
   Gold border around the embed, and a prominent "book later" link — a
   client who closes the page without booking otherwise has no obvious route
   back to the scheduler. */
.rcs-booking__frame {
    border: 2px solid var(--rcs-gold-dk);
    border-top: 2px solid var(--rcs-gold-dk);
    outline: 1px solid var(--rcs-gold-dk);
    outline-offset: -6px;
    padding: var(--rcs-space-4);
}
.rcs-booking__later {
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem !important;
    color: var(--rcs-ink);
    /* Full width of the booking block, matching the calendar frame and the
       notes prompt — a narrower box between two wider ones read as an
       afterthought. */
    margin: 0 auto var(--rcs-space-8);
    max-width: none;
    padding: var(--rcs-space-4);
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid var(--rcs-parchment-worn);
    border-left: 3px solid var(--rcs-gold-dk);
    text-align: center;
}
.rcs-booking__later a {
    font-weight: 700;
    color: var(--rcs-gold-dk);
}
/* Link drops onto its own line beneath the question. */
.rcs-booking__later-link {
    display: block;
    margin-top: var(--rcs-space-2);
}
.rcs-booking__later-note {
    display: block;
    margin-top: var(--rcs-space-2);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--rcs-ink-light);
}

/* Scope disclaimer on the account-page consultation box. */
.rcs-account-consult__note {
    font-family: var(--rcs-font-brand);
    font-size: 0.78rem !important;
    line-height: 1.5;
    font-style: italic;
    color: var(--rcs-ink-light);
    max-width: 460px;
    margin: var(--rcs-space-5) auto 0;
}

/* Explains what happens after booking. The calendar runs in a cross-origin
   iframe, so the page genuinely cannot detect a completed booking and can't
   swap itself for a thank-you state — expectations have to be set up front
   instead. */
.rcs-booking__confirm {
    font-family: var(--rcs-font-brand);
    font-size: 0.88rem !important;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
    max-width: 520px;
    /* Sits directly under the intro, as part of the same explanatory block. */
    margin: calc(-1 * var(--rcs-space-4)) auto var(--rcs-space-6);
    text-align: center;
}

/* ── Consultation account state ──────────────────────────────────────────
   Larger than the standard "included" note, since on the consultation this
   is the primary message rather than a footnote. */
.rcs-subscribe__included--lg {
    font-size: 1.05rem !important;
    color: var(--rcs-ink);
}
.rcs-subscribe__consult-links {
    font-family: var(--rcs-font-brand);
    font-size: 0.88rem !important;
    margin-top: var(--rcs-space-4);
}
.rcs-subscribe__consult-links a {
    color: var(--rcs-gold-dk);
    font-weight: 600;
    margin: 0 var(--rcs-space-3);
}

/* Scope disclaimer sized to match the bullets above it, rather than reading
   as fine print — it sets a real expectation about what the session covers. */
.rcs-subscribe__footnote,
.rcs-account-consult__note {
    font-size: 0.95rem !important;
}

/* ── Account subscriptions table: drop redundant columns ─────────────────
   Column 2 (Subscription) shows a raw sub_… ID, or "Lifetime" for the
   consultation, which reads as a plan name and confuses. Column 3 (Active)
   duplicates what the row styling already conveys. Both hidden; Membership
   and Actions carry everything a member needs. */
/* ── Account tables: column control, from CONFIRMED markup ───────────────
   Subscriptions table is #mepr-account-subscriptions-table. Its columns are
   Membership | Terms | Active | Created | Card Expires | Actions, each cell
   carrying a data-label. Header cells carry none, so those are positional —
   but scoped to this table by ID, so they can't stray into Payment History
   the way the earlier rules did.

   Note the header reads "SUBSCRIPTION" while the data-label says "Terms". */
/* ACTIVE IS NO LONGER HIDDEN. It was removed on the understanding that the
   active row is highlighted white — but that highlight is plain zebra striping
   (.mepr-alt-row on alternate rows), applied regardless of status. Hiding the
   column therefore removed the ONLY indication of which subscription is live,
   which is the most useful thing on this table.

   Terms stays hidden (it shows "Lifetime" for the consultation, which reads
   like a plan name) and so does Card Expires. */
#mepr-account-subscriptions-table td[data-label="Terms"],
#mepr-account-subscriptions-table td[data-label="Card Expires"] {
    display: none;
}
/* Headers: 2 = Subscription/Terms, 5 = Card Expires. Column 3 (Active) is
   deliberately left visible. */
#mepr-account-subscriptions-table thead th:nth-child(2),
#mepr-account-subscriptions-table thead th:nth-child(5) {
    display: none;
}
/* The raw sub_… / ch_… identifier printed beneath each membership name.
   Meaningless to a member, and it made the cell look like an error. */
.mepr-account-subscr-id {
    display: none;
}

/* ── Account profile form: tighter, labels to the left ───────────────────
   Matches the payment sections' layout and cuts the vertical sprawl. */
body.rcs-account-page #mepr_account_form {
    max-width: 560px;
}
body.rcs-account-page #mepr_account_form .mp-form-row {
    display: flex;
    align-items: center;
    gap: var(--rcs-space-4);
    margin-bottom: var(--rcs-space-3);
    text-align: left;
}
body.rcs-account-page #mepr_account_form .mp-form-label {
    flex: 0 0 150px;
    margin-bottom: 0;
    text-align: left;
}
body.rcs-account-page #mepr_account_form .mp-form-label label {
    display: inline;
    margin: 0;
}
body.rcs-account-page #mepr_account_form input[type="text"],
body.rcs-account-page #mepr_account_form input[type="email"],
body.rcs-account-page #mepr_account_form input[type="password"],
body.rcs-account-page #mepr_account_form select,
body.rcs-account-page #mepr_account_form .mp-hide-pw {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-bottom: 0;
}

/* Clarifying note under the consultation account state. The button has to
   stay — nothing connects MemberPress (who bought) to Google Calendar (who
   booked), so hiding it would strand anyone who paid but hasn't scheduled.
   The ambiguity is resolved with words instead. */
.rcs-subscribe__included-note {
    display: block;
    margin-top: var(--rcs-space-3);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--rcs-ink-light);
}

/* ── Account tables: wider, and free of noise ────────────────────────────
   Wider container on the account page (~30%), the raw sub_… ID under each
   membership name hidden, and Card Exp dropped. */
/* Wider container for account page removed — back to the standard 900px
   from .rcs-page__inner.  Tables that need more room get overflow-x:auto
   on their .mp_wrapper parent instead of blowing out the whole container. */
body.rcs-account-page .mp_wrapper {
    max-width: none;
    overflow-x: auto;
}
.rcs-account-consult__note {
    text-align: center;
}

/* Invoice request button beneath the payments table (added by
   rcsAccountTweaks() in footer.php). A real PDF invoice needs a higher
   MemberPress tier; this is the no-cost stand-in. */
.rcs-invoice-request {
    text-align: center;
    margin-top: var(--rcs-space-8);
}
.rcs-invoice-request__note {
    display: block;
    margin-top: var(--rcs-space-3);
    font-family: var(--rcs-font-brand);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--rcs-ink-light);
}

/* Consultation card's scope disclaimer sits centred. Deliberately a modifier
   rather than a change to .rcs-subscribe__footnote, which the tier cards also
   use — there it's left-aligned to match the bullets above it. */
.rcs-subscribe__footnote--center {
    text-align: center;
    border-top: none;
    padding-top: 0;
}

/* ── Account payment history table ───────────────────────────────────────
   MemberPress helpfully puts data-label on every cell, so columns can be
   targeted by NAME rather than position — which survives MemberPress
   reordering them, unlike nth-child.

   Columns: Date | Total | Membership | Method | Status | Invoice
   Invoice holds a raw Stripe charge ID (ch_…) that means nothing to a member
   and links nowhere, so it's hidden. Total already carries the amount. */
body.rcs-account-page table {
    width: 100%;
    min-width: 22cm;
}
/* Payment History — Date | Total | Membership | Method | Status | Invoice.
   Method always reads "RCS - Stripe Payment" (there's only one gateway), and
   Invoice is a raw Stripe charge ID linking nowhere. Both dropped. */
body.rcs-account-page td[data-label="Invoice"],
body.rcs-account-page td[data-label="Method"] {
    display: none;
}
body.rcs-account-page table:has(.mepr-payment-row) thead th:nth-child(4),
body.rcs-account-page table:has(.mepr-payment-row) thead th:nth-child(6) {
    display: none;
}

/* Larger type in the account tables — the default read as small print for
   information members actually need. */
body.rcs-account-page table {
    font-size: 1rem;
}
body.rcs-account-page table th {
    font-size: 0.95rem;
}

/* ── Account page: final table + form adjustments ────────────────────────
   Subscriptions table narrower than payment history and centred; payment
   history keeps its width since it has more columns. */
#mepr-account-subscriptions-table {
    width: 15cm;
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
}

/* Text typed into the profile fields reads left-to-right like any form.
   It had been inheriting the right-alignment set for the CHECKOUT forms in
   v230, which suits a payment form but looks wrong on a profile. */
body.rcs-account-page #mepr_account_form input[type="text"],
body.rcs-account-page #mepr_account_form input[type="email"],
body.rcs-account-page #mepr_account_form input[type="password"],
body.rcs-account-page #mepr_account_form select {
    text-align: left !important;
    text-align-last: left;
}

/* Save Profile centred beneath the form. MemberPress wraps it in a bare
   .mp-form-submit div with no class of its own on the button. */
body.rcs-account-page #mepr_account_form .mp-form-submit,
body.rcs-account-page #mepr_account_form .mepr_submit,
body.rcs-account-page #mepr_account_form .submit {
    text-align: center;
}
body.rcs-account-page #mepr_account_form input[type="submit"] {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin: var(--rcs-space-4) auto 0;
}

/* ── Account page: remaining alignment + spacing ─────────────────────────
   Save Profile centred. MemberPress wraps it inconsistently, so the button
   itself is centred with auto margins rather than relying on a parent's
   text-align. */
body.rcs-account-page #mepr_account_form input[type="submit"],
body.rcs-account-page #mepr_account_form button[type="submit"] {
    display: block !important;
    width: auto;
    min-width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* "Change Password" sits below the form, in its own span. */
body.rcs-account-page .mepr-account-change-password {
    display: block;
    text-align: center;
    margin-top: var(--rcs-space-6);
}

/* Divider above the upsell section — heavier, with real space beneath it so
   the first card isn't crowding the rule. */
.rcs-account-upsell {
    border-top: 2px solid var(--rcs-gold-dk);
    padding-top: 4rem;
    margin-top: 4rem;
}

/* Subscriptions table matches payment history's width. The extra room lets
   the Actions links sit side by side rather than stacking, which is what was
   making those rows several times taller than the payment rows. */
#mepr-account-subscriptions-table {
    width: 100%;
    min-width: 22cm;
    margin-inline: auto;
}

/* Note above the consultation form when the member has bought before. */
.rcs-complete-sub__prior {
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem !important;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid var(--rcs-parchment-worn);
    border-left: 3px solid var(--rcs-gold-dk);
    padding: var(--rcs-space-4);
    margin-bottom: var(--rcs-space-6);
    text-align: center;
}
.rcs-complete-sub__prior a {
    display: block;
    margin-top: var(--rcs-space-3);
    font-weight: 700;
    color: var(--rcs-red);
    text-decoration: underline;
}
.rcs-complete-sub__prior a:hover,
.rcs-complete-sub__prior a:focus-visible {
    color: var(--rcs-navy);
}

/* ── Subscriptions table: Actions on one row ─────────────────────────────
   The links were still stacking after being set to inline-block, which means
   MemberPress separates them with <br> or wraps each in its own block-level
   element. Both are neutralised here rather than guessing which — hiding the
   breaks and forcing any wrapper inline covers either shape.

   The Membership column is also capped so the freed width goes to Actions. */
body.rcs-account-page [data-label="Actions"] br {
    display: none;
}
/* NOTE: a rule here previously forced [data-label="Actions"] > div to
   inline-block. It was written before the markup was known, and its
   attribute selector out-specified the .mepr-account-actions flex rule
   below — so display:flex never applied and justify-content/gap did
   nothing. Removed in v270; the flex rule is the correct one now that the
   structure is confirmed. */
body.rcs-account-page [data-label="Actions"] {
    white-space: nowrap;
    text-align: right;
}
/* Membership column takes the slack, and is the one column allowed to wrap
   if a plan name is long. */
/* Column widths on the subscriptions table, after Terms / Active / Card
   Expires are hidden, leaving: Membership | Created | Actions.

   Membership sizes to its content and never wraps, so plan names stay on one
   line. Created is pinned shrink-to-fit — it only ever holds a short date, so
   it has no claim on spare width. Everything left over therefore falls to
   Actions, which is what needed the room.

   (An earlier attempt narrowed Membership instead and left Actions
   shrink-to-fit, so the freed width simply moved to Created.) */
#mepr-account-subscriptions-table [data-label="Membership"],
#mepr-account-subscriptions-table thead th:first-child {
    white-space: nowrap;
    width: auto;
    max-width: none;
}
#mepr-account-subscriptions-table [data-label="Created"],
#mepr-account-subscriptions-table thead th:nth-child(4) {
    white-space: nowrap;
    width: 1%;
}
/* Actions is given an explicit width — 2cm wider than the content needs —
   with Membership left on auto so it absorbs exactly that 2cm. Created stays
   shrink-to-fit and is unaffected, which is the point: the width moves from
   the left column to the right, and nothing else shifts. */
#mepr-account-subscriptions-table [data-label="Actions"],
#mepr-account-subscriptions-table thead th:last-child {
    width: 10.2cm;
    white-space: nowrap;
}

/* ── Subscriptions table: Actions on ONE row (from confirmed markup) ──────
   The cell's real structure:

     <td data-label="Actions">
       <div class="mepr-account-actions">
         <a class="mepr-account-row-action mepr-account-update">Update</a>
         <div class="mepr-white-popup mfp-hide">…</div>      ← hidden modal
         <a class="mepr-account-row-action mepr-account-upgrade">Change Plan</a>
         <div class="mepr-white-popup mfp-hide">…</div>      ← hidden modal
         <a class="mepr-account-row-action mepr-account-cancel">Cancel</a>

   Two things defeated the earlier attempts: the links carry
   .mepr-account-row-action, which MemberPress renders as block (my generic
   `td a` rule wasn't specific enough to override it), and there are hidden
   popup divs interleaved between them.

   Flex on the container lays the links out in a row; the popups are held at
   display:none so they never become flex items. */
body.rcs-account-page .mepr-account-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    /* Right-justified as a group, with a clear gap between each. Previously
       space-between, which stretched them edge to edge — spread, but not
       right-aligned. */
    justify-content: flex-end;
    gap: 3rem;
    width: 100%;
}
body.rcs-account-page .mepr-account-actions > .mepr-white-popup,
body.rcs-account-page .mepr-account-actions > .mfp-hide {
    display: none !important;
}
body.rcs-account-page a.mepr-account-row-action {
    display: inline-block !important;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0;
}

/* "Actions" column header centred over its links. */
body.rcs-account-page .mp_wrapper table thead th:last-child,
#mepr-account-subscriptions-table thead th:last-child {
    text-align: center;
}

/* Final word on the Actions layout. Stated with enough specificity that it
   can't be undercut by an earlier attribute-based rule, and kept together so
   the intent is obvious in one place. */
body.rcs-account-page td[data-label="Actions"] .mepr-account-actions {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 3rem;
    width: 100%;
    text-align: right;
}
body.rcs-account-page td[data-label="Actions"] .mepr-account-actions > .mepr-white-popup,
body.rcs-account-page td[data-label="Actions"] .mepr-account-actions > .mfp-hide {
    display: none !important;
}
body.rcs-account-page td[data-label="Actions"] a.mepr-account-row-action {
    display: inline-block !important;
    white-space: nowrap;
    margin: 0 !important;
    flex: 0 0 auto;
}

/* ── Password-reset request form ─────────────────────────────────────────
   Markup CONFIRMED from the live page:

     <form id="mepr_forgot_password_form">
       <div class="mp-form-row mepr_forgot_password_input">
         <label for="mepr_user_or_email">…</label>     ← direct child, NOT
         <input id="mepr_user_or_email">                  wrapped in .mp-form-label
       <div class="mp-spacer">&nbsp;</div>
       <div class="submit"><input id="wp-submit" value="Request Password Reset">

   Note this differs from the login form, where the label IS wrapped — which
   is why the earlier .mp-form-label rules had no effect here. Also note
   #wp-submit is shared with the login form, so every rule below is scoped to
   this form's ID. */
#mepr_forgot_password_form {
    text-align: center;
    max-width: 100%;
}
#mepr_forgot_password_form .mp-form-row {
    display: block;
    text-align: center;
    margin-bottom: var(--rcs-space-4);
}
#mepr_forgot_password_form label {
    display: block;
    text-align: center;
    margin: 0 0 var(--rcs-space-3) 0;
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink-faded);
}
#mepr_forgot_password_form input[type="text"] {
    display: block;
    width: 10cm;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--rcs-space-3);
    background: #fff;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink);
    text-align: center;
}
#mepr_forgot_password_form input[type="text"]:focus {
    outline: 2px solid var(--rcs-gold);
    outline-offset: 1px;
}
#mepr_forgot_password_form .submit {
    text-align: center;
}
#mepr_forgot_password_form #wp-submit {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin: var(--rcs-space-2) auto 0;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--rcs-transition), border-color var(--rcs-transition);
}
#mepr_forgot_password_form #wp-submit:hover {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}

/* MemberPress renders its own <h3> heading immediately before the reset form,
   inside .mp_wrapper. Since v272 retitles the page <h1> to the same words,
   that h3 is a duplicate — hidden here rather than reverting the page title,
   because the h1 is the one that belongs in the document outline.

     <div class="mp_wrapper">
       <h3>Request a Password Reset</h3>      ← this
       <form id="mepr_forgot_password_form">

   :has() scopes it to the wrapper containing THIS form, so MemberPress's
   headings elsewhere are untouched. */
.mp_wrapper:has(#mepr_forgot_password_form) > h3 {
    display: none;
}

/* ── Password reset requested confirmation ───────────────────────────────
   <div class="mp_wrapper mepr_password_reset_requested">
     <h3>Successfully requested password reset</h3>
     <p>If a matching account is found…</p>

   Note this wrapper does NOT contain the form, so the h3-hiding rule above
   doesn't reach it — which is correct, this heading is wanted. */
.mepr_password_reset_requested {
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
}
.mepr_password_reset_requested h3 {
    font-family: var(--rcs-font-display);
    font-size: 1.5rem;
    color: var(--rcs-navy);
    white-space: nowrap;
    margin: 0 0 var(--rcs-space-6) 0;
}
.mepr_password_reset_requested p {
    font-family: var(--rcs-font-brand);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--rcs-ink-faded);
    margin: 0;
}
/* nowrap would overflow a narrow screen, so it's released there — a wrapped
   heading is better than one running off the edge. */
@media (max-width: 600px) {
    .mepr_password_reset_requested h3 {
        white-space: normal;
        font-size: 1.3rem;
    }
}

/* ── Set-new-password screen (?action=reset_password) ────────────────────
   Scoped by body class rather than form ID: MemberPress serves several
   screens from the login page and this one's form markup hasn't been
   inspected, so keying off the URL action is both safer and simpler.

   Confirmed from the live page: the confirm field is
   #mepr_user_password_confirm with class .mepr-forgot-password-confirm. The
   first field is addressed generically rather than assumed. */

/* MemberPress's own <h3>, duplicating the page title. */
body.rcs-reset-password-page .mp_wrapper > h3 {
    display: none;
}

body.rcs-reset-password-page .mp_wrapper {
    text-align: center;
}

/* The two password fields sit side by side on one row; the submit drops
   beneath at full width. */
/* Deliberately NOT flex. With a flex form, the submit (or its wrapper)
   became a flex item sized to its own content — so auto margins centred it
   inside a box the width of the button, which does nothing visible. Plain
   inline-block for the field rows keeps them side by side while leaving the
   submit as an ordinary block that auto margins can actually centre. */
body.rcs-reset-password-page .mp_wrapper form {
    display: block;
    text-align: center;
}
body.rcs-reset-password-page .mp_wrapper form > div {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0 var(--rcs-space-6) var(--rcs-space-5);
}
body.rcs-reset-password-page .mp_wrapper form label {
    display: block;
    text-align: center;
    margin: 0 0 var(--rcs-space-3) 0;
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink-faded);
}
body.rcs-reset-password-page input[type="password"] {
    display: block;
    width: 10cm;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--rcs-space-3);
    background: #fff;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink);
    text-align: center;
}
body.rcs-reset-password-page input[type="submit"] {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin: var(--rcs-space-4) auto 0;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment);
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
}
body.rcs-reset-password-page input[type="submit"]:hover {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}
/* Two 10cm fields side by side need ~21cm; stack them below that. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    body.rcs-reset-password-page .mp_wrapper form > div {
        display: block;
        margin-inline: auto;
    }
}

/* Update Password button — centre it regardless of how MemberPress wraps it.
   The earlier rule relied on the parent's text-align, which only works if the
   button is inline AND the parent is the flex row it's expected to be. Auto
   margins centre it in either case, and the row is forced full-width so it
   can't share a line with the fields. */
/* Whichever element wraps the submit becomes a full-width block, so the
   button below is centring inside the form rather than inside itself.
   :has() covers it without needing to know the wrapper's class. */
body.rcs-reset-password-page .mp_wrapper form > *:has(#wp-submit),
body.rcs-reset-password-page .mp_wrapper form > .submit {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}
body.rcs-reset-password-page input[type="submit"],
body.rcs-reset-password-page button[type="submit"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Password fields on the reset screen sit inside MemberPress's .mp-hide-pw
   wrapper (the show/hide eye), same as the login and checkout forms. Sizing
   the input alone left the wrapper at its natural width, so the eye button
   sat outside the field and the whole control no longer lined up with its
   label. The wrapper takes the 10cm and the button is positioned inside it. */
body.rcs-reset-password-page .mp-hide-pw {
    position: relative;
    display: block;
    width: 10cm;
    max-width: 100%;
    margin: 0 auto;
}
body.rcs-reset-password-page .mp-hide-pw input[type="password"],
body.rcs-reset-password-page .mp-hide-pw input[type="text"] {
    display: block;
    width: 100%;
    margin: 0;
    padding-right: 2.4rem;
    box-sizing: border-box;
    text-align: left;
}
body.rcs-reset-password-page .mp-hide-pw button {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
}
/* Each field group is a fixed 10cm column so the label sits directly over
   its field rather than centring across a wider box. */
body.rcs-reset-password-page .mp_wrapper form > div {
    width: 10cm;
    max-width: 100%;
}

/* Nudge the reset-screen fields 0.5cm left to sit square under their labels.
   Done with a transform rather than a margin so it shifts the visual position
   without altering the layout box — a margin change would re-centre the
   inline-block column and move the label with it, defeating the purpose. */
body.rcs-reset-password-page .mp-hide-pw,
body.rcs-reset-password-page .mp_wrapper form > div > input[type="password"],
body.rcs-reset-password-page .mp_wrapper form > div > input[type="text"] {
    transform: translateX(-0.5cm);
}

/* ── Password-reset confirmation ─────────────────────────────────────────
   Shown once beneath the header after a successful reset, since WordPress
   auto-logs the member in and would otherwise acknowledge nothing. */
.rcs-pw-notice {
    max-width: 620px;
    margin: var(--rcs-space-8) auto 0;
    padding: var(--rcs-space-6);
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid var(--rcs-parchment-worn);
    border-left: 4px solid var(--rcs-gold-dk);
    box-shadow: var(--rcs-shadow-sm);
    text-align: center;
}
.rcs-pw-notice__msg {
    font-family: var(--rcs-font-brand);
    font-size: 1.05rem !important;
    font-weight: 600;
    color: var(--rcs-navy);
    margin: 0;
}
.rcs-pw-notice__btn {
    display: inline-block;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment) !important;
    border: 1px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background var(--rcs-transition), border-color var(--rcs-transition);
}
.rcs-pw-notice__btn:hover,
.rcs-pw-notice__btn:focus-visible {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}

/* The confirmation heading wasn't centring from the wrapper's text-align —
   something upstream is setting alignment on headings directly, and an
   inherited value can't beat a direct one. Stated explicitly on the element,
   with the wrapper's own class included for specificity. */
.mp_wrapper.mepr_password_reset_requested h3,
body.rcs-subscription-page .mepr_password_reset_requested h3 {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}
.mp_wrapper.mepr_password_reset_requested p,
body.rcs-subscription-page .mepr_password_reset_requested p {
    text-align: center !important;
}

/* THE ACTUAL FIX for the confirmation heading.
   .mp_wrapper is capped at 420px for registration forms (see the
   body:not(.rcs-account-page) rule earlier), and that selector out-specifies
   the 620px set on .mepr_password_reset_requested. The heading carries
   white-space:nowrap and is wider than 420px, so it overflowed its box to the
   right — which looks identical to being left-aligned, and is why adding
   !important to text-align changed nothing. The alignment was never wrong;
   the container was too narrow.

   Specificity here deliberately exceeds the 420px rule. */
body:not(.rcs-account-page) .rcs-page__content .mp_wrapper.mepr_password_reset_requested {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

/* ── Homepage upsell buttons (non-subscriber view) ───────────────────────
   Heavier outline and bold text across all three, then each differentiated:
   Log In borrows the header's treatment, Subscribe gains a brown fill for
   contrast against its unchanged lettering, and Consultation's text is
   darkened for legibility. */
.rcs-upsell__link {
    border-width: 2px !important;
    font-weight: 700 !important;
}

/* Log In — the header button's CHARACTER (quiet outlined button, gold accent,
   fills on hover) rather than its literal colours. The header sits on navy so
   its light parchment text works there; this box is light parchment, where the
   same colour would be near-invisible. Inverted accordingly: navy text on a
   gold-tinted outline, filling to navy on hover. */
.rcs-upsell__link:not(.rcs-upsell__link--primary):not(.rcs-upsell__link--consult) {
    /* The header button is transparent over a navy bar, so navy has to be set
       explicitly here — this panel is light parchment. Border and text colour
       are taken verbatim from .rcs-header__account-link. */
    background-color: var(--rcs-navy) !important;
    border-color: rgba(201, 168, 76, 0.4) !important;
    color: rgba(240, 230, 200, 0.75) !important;
}
.rcs-upsell__link:not(.rcs-upsell__link--primary):not(.rcs-upsell__link--consult):hover,
.rcs-upsell__link:not(.rcs-upsell__link--primary):not(.rcs-upsell__link--consult):focus-visible {
    /* Same hover as the header: text and border warm to full gold. */
    color: var(--rcs-gold) !important;
    border-color: var(--rcs-gold) !important;
    background-color: var(--rcs-navy) !important;
}

/* Subscribe — brown fill so the parchment lettering reads clearly against it,
   rather than sitting on navy. */
.rcs-upsell__link--primary {
    background: #6b4a20 !important;
    border-color: #6b4a20 !important;
    color: var(--rcs-parchment) !important;
}
.rcs-upsell__link--primary:hover,
.rcs-upsell__link--primary:focus-visible {
    background: #56391733 !important;
    background-color: #543a18 !important;
    border-color: var(--rcs-gold-dk) !important;
    color: var(--rcs-gold) !important;
}

/* Consultation — darker text; the previous gold sat too light on the panel. */
.rcs-upsell__link--consult {
    color: var(--rcs-gold-dk) !important;
    border-color: var(--rcs-gold-dk) !important;
    filter: brightness(0.85);
}
.rcs-upsell__link--consult:hover,
.rcs-upsell__link--consult:focus-visible {
    filter: none;
    background: var(--rcs-gold-dk) !important;
    color: var(--rcs-parchment) !important;
}

/* ── Subscriber gate on region pages ─────────────────────────────────────
   Shown to non-subscribers instead of the silent homepage redirect that ran
   until v290. */
.rcs-gate__panel {
    max-width: 640px;
    margin: var(--rcs-space-12) auto;
    padding: var(--rcs-space-10) var(--rcs-space-8);
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid var(--rcs-parchment-worn);
    border-top: 4px solid var(--rcs-cobalt-accent);
    box-shadow: var(--rcs-shadow-sm);
    text-align: center;
}
.rcs-gate__title {
    font-family: var(--rcs-font-display);
    font-size: 1.8rem !important;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-5);
}
.rcs-gate__intro {
    font-family: var(--rcs-font-brand);
    font-size: 1rem !important;
    line-height: 1.7;
    color: var(--rcs-ink-faded);
    margin: 0 auto var(--rcs-space-8);
}
.rcs-gate__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rcs-space-4);
}
.rcs-gate__btn {
    display: inline-block;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 2px solid var(--rcs-navy);
    border-radius: 3px;
    background: var(--rcs-navy);
    color: rgba(240, 230, 200, 0.85) !important;
    transition: background var(--rcs-transition), color var(--rcs-transition);
}
.rcs-gate__btn:hover,
.rcs-gate__btn:focus-visible {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
    color: var(--rcs-parchment) !important;
}
.rcs-gate__btn--primary {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
    color: var(--rcs-parchment) !important;
}
.rcs-gate__btn--primary:hover,
.rcs-gate__btn--primary:focus-visible {
    background: var(--rcs-navy);
    border-color: var(--rcs-navy);
}
.rcs-gate__note {
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem !important;
    font-style: italic;
    color: var(--rcs-ink-light);
    margin-top: var(--rcs-space-6);
}

/* "Continue to the page you were reading" — shown on the thank-you page when
   the subscriber arrived via a gated page. */
.rcs-thankyou__continue {
    margin-top: var(--rcs-space-8);
}
.rcs-thankyou__continue-btn {
    display: inline-block;
    padding: var(--rcs-space-3) var(--rcs-space-8);
    background: var(--rcs-navy);
    color: var(--rcs-parchment) !important;
    border: 2px solid var(--rcs-navy);
    border-radius: 3px;
    font-family: var(--rcs-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background var(--rcs-transition), border-color var(--rcs-transition);
}
.rcs-thankyou__continue-btn:hover,
.rcs-thankyou__continue-btn:focus-visible {
    background: var(--rcs-gold-dk);
    border-color: var(--rcs-gold-dk);
}

/* Upgrade note beneath "Change Your Plan" — enlarged; it carries the refund
   commitment and was reading as fine print. */
.rcs-subscribe__upgrade-note {
    font-size: 0.95rem !important;
    line-height: 1.6;
}

/* Spacing between stacked paragraphs in the gate and thank-you blocks, now
   that both carry more than one. */
.rcs-gate__intro + .rcs-gate__intro,
.rcs-thankyou__body + .rcs-thankyou__body {
    margin-top: var(--rcs-space-5);
}

/* Upgrade card: centre the "Change Your Plan" button in the gap between the
   last bullet and the italic note.

   The action block carries margin-top:auto, so it's anchored to the bottom of
   the card and all the slack sits above the button. Trimming that padding and
   adding a matching gap beneath the button balances the two, which lifts it to
   the middle of the space rather than leaving it near the note. */
.rcs-subscribe__card-action:has(.rcs-subscribe__upgrade-note) {
    padding-top: var(--rcs-space-6);
}
.rcs-subscribe__upgrade-note {
    margin-top: var(--rcs-space-8) !important;
}

/* Make the Active value read at a glance — it's the one thing a member
   actually needs from this table. */
#mepr-account-subscriptions-table [data-label="Active"] {
    font-weight: 700;
    text-align: center;
}

/* ── Account table zebra striping ────────────────────────────────────────
   MemberPress alternates white against its own default. White reads as an
   imported component on a parchment site — and it was also what made the
   striping look like a status indicator (see the Active column note above).
   Two parchment tones instead: quiet enough to scan, and unmistakably not a
   highlight. */
body.rcs-account-page .mp_wrapper table tbody tr {
    background-color: rgba(255, 255, 255, 0.18) !important;
}
body.rcs-account-page .mp_wrapper table tbody tr.mepr-alt-row,
body.rcs-account-page .mp_wrapper table tbody tr:nth-child(even) {
    background-color: rgba(180, 155, 100, 0.18) !important;
}
/* Header sits a shade deeper again, so the column labels read as a band
   rather than another data row. */
body.rcs-account-page .mp_wrapper table thead th {
    background-color: rgba(216, 201, 163, 0.45);
}

/* Proration credit on the registration page. Styled more prominently than the
   trial clause it sits in place of — it's a discount the member is deciding
   on, not a footnote. */
.rcs-mepr-price__proration {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rcs-gold-dk);
    /* Sits tight under the figure it explains, with the gap moved below so it
       separates from the renewal line rather than floating between the two. */
    margin-top: var(--rcs-space-1);
    margin-bottom: var(--rcs-space-4);
}

/* Recurring price beneath a prorated upgrade — what they'll pay from next
   renewal, once the credit no longer applies. Quiet, but must be present:
   the large figure above is a one-off. */
.rcs-mepr-price__renews {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--rcs-ink-light);
    /* Spacing comes from the credit line's margin-bottom above. */
    margin-top: 0;
}

/* Recurring price when the credit covers the whole term — nothing is owed
   today, so this carries the gold emphasis rather than the quiet italic used
   when there IS a charge today. */
.rcs-mepr-price__renews-gold {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--rcs-gold-dk);
    margin-top: var(--rcs-space-1);
}
/* "1 Year for free" is words, not a figure — sized down from the numeric
   headline so it doesn't overwhelm the panel. */
.rcs-mepr-price__amount {
    line-height: 1.2;
}

/* Explains why card details are still requested when the proration credit
   covers the whole term and nothing is charged today. */
.rcs-no-charge-note {
    font-family: var(--rcs-font-brand);
    font-size: 0.82rem !important;
    font-style: italic;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
    max-width: 420px;
    margin: 0 auto var(--rcs-space-5);
    text-align: center;
}

/* A cancelled-but-not-expired subscription: "Until [date]" rather than a bare
   "Yes", which reads as though the cancellation failed. */
#mepr-account-subscriptions-table .rcs-active-ending {
    font-weight: 600;
    color: var(--rcs-ink-faded);
    line-height: 1.4;
}
#mepr-account-subscriptions-table .rcs-until-date {
    font-weight: 700;
    color: var(--rcs-navy);
    white-space: nowrap;
}

/* Cancellation confirmation. MemberPress's bare "are you sure?" now carries
   the reassurance that access continues to the end of the current period.
   (Lost in the same v316 splice as the JS; restored in v321.) */
.mepr-cancel-sub-text strong {
    display: block;
    font-family: var(--rcs-font-display);
    font-size: 1.2rem;
    color: var(--rcs-navy);
    margin-bottom: var(--rcs-space-3);
}
.rcs-cancel-note {
    display: block;
    font-family: var(--rcs-font-brand);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
    max-width: 400px;
    margin: 0 auto;
}

/* ── Separation between subscription tiers and one-off services ──────────
   The consultation and speaking cards carry a pediment ornament positioned
   ~46px above them, which was overlapping the tier card above. Beyond the
   clearance, these are a different KIND of offer — one-off services rather
   than subscriptions — so a faint rule marks the shift. Deliberately shorter
   and lighter than the divider above the upsell section, which separates the
   account from the offers entirely. */
.rcs-account-extras {
    position: relative;
    margin-top: 7rem;
    padding-top: 5rem;
}
.rcs-account-extras::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    max-width: 380px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--rcs-parchment-worn) 20%,
        var(--rcs-parchment-worn) 80%,
        transparent
    );
}

/* Prompt to use the booking form's notes field. Emphasised because it can
   only be acted on BEFORE booking — Google accepts notes at booking time
   only, so anyone who skips it would have to book a second appointment to
   add them. */
.rcs-booking__notes-prompt {
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem !important;
    font-weight: 700;
    line-height: 1.6;
    /* Gold, not red — this is guidance, and red read as a warning. */
    color: var(--rcs-gold-dk);
    max-width: none;
    margin: 0 auto var(--rcs-space-6);
    padding: var(--rcs-space-4);
    background: rgba(255, 255, 255, 0.3);
    border-left: 3px solid var(--rcs-gold-dk);
    text-align: center;
}

/* ── One-off services with no tier cards above them ──────────────────────
   .rcs-account-extras carries its own top margin, padding and faint rule to
   separate the one-off services from the tier cards. When no tier cards
   render — a Markets subscriber, or an account sub-view — it becomes the
   only child of .rcs-account-upsell, and its separation stacks on top of that
   wrapper's gold divider: roughly 20rem of space and two rules where one is
   wanted. Zeroed in that case; the wrapper's divider already does the job. */
.rcs-account-upsell > .rcs-account-extras:first-child {
    margin-top: 0;
    padding-top: 0;
}
.rcs-account-upsell > .rcs-account-extras:first-child::before {
    display: none;
}

/* Extra clearance below the account divider when a pedimented card follows
   it directly. The card's pediment is absolutely positioned 46px above the
   card, INSIDE this padding — so a 4rem (64px) pad left only ~18px of visible
   gap, against 4rem above the line. Measured equal, looked wrong. 5.5rem
   leaves ~42px clear of the ornament. */
.rcs-account-upsell > .rcs-account-extras:first-child {
    padding-top: 1.5rem;
}
.rcs-account-upsell:has(> .rcs-account-extras:first-child) {
    padding-top: 4rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — v329
   Target: ~390px phone width as primary, tablet portrait as secondary.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile drawer overlay system ─────────────────────────────────────────
   On phone widths, the left/right columns transform from grid cells into
   full-screen overlays activated by a fixed bottom toolbar.  The columns
   stay in the DOM — no duplication — and CSS handles the visual switch.
   JS (rcs-mobile.js) toggles .rcs-drawer--open on the column and
   .rcs-drawer-active on <body>.
   ──────────────────────────────────────────────────────────────────────── */

/* Close buttons are injected by JS into column DOM — hidden globally by
   default so they NEVER appear on desktop.  Only shown inside the mobile
   media query when a drawer is actually open. */
.rcs-drawer-close {
    display: none;
}

/* Mobile-only line breaks — <br class="rcs-mobile-br"> tags in PHP that
   are hidden on desktop and shown on mobile for controlled text wrapping
   in card titles and bullet text. */
br.rcs-mobile-br {
    display: none;
}
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    br.rcs-mobile-br {
        display: initial;
    }
}

/* Drawer overlay — the column itself becomes the overlay when .rcs-drawer--open
   is added.  These rules are NOT inside a media query because the class is only
   toggled by JS, which checks the viewport width.  But we still gate the
   visual treatment behind a max-width so a stale class on a resized window
   doesn't break desktop. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    /* Hide side columns in their normal grid positions on mobile.
       The existing 700px / 950px stacking breakpoints dump them below
       the center column — we override that to hide them entirely and
       let the drawers take over. */
    .rcs-panels--premium .rcs-homepage-grid__left,
    .rcs-panels--premium .rcs-homepage-grid__right,
    .rcs-region__col--left,
    .rcs-region__col--right {
        display: none;
    }

    /* When a drawer is open, it overrides the display:none above.
       This covers both full columns AND standalone sub-section widgets
       (e.g. Performance or Bottom Line details elements). */
    .rcs-homepage-grid__left.rcs-drawer--open,
    .rcs-homepage-grid__right.rcs-drawer--open,
    .rcs-region__col--left.rcs-drawer--open,
    .rcs-region__col--right.rcs-drawer--open,
    .rcs-drawer--open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;        /* above header (z-index:100) */
        overflow-y: auto;
        overflow-x: hidden;   /* prevent horizontal scroll to empty space */
        -webkit-overflow-scrolling: touch;
        background: var(--rcs-parchment, #f7f0da);
        padding: var(--rcs-space-4);
        padding-top: calc(var(--rcs-space-4) + 48px);  /* room for close button */
        padding-bottom: calc(var(--rcs-space-4) + 70px); /* room for toolbar */
        animation: rcsDrawerSlideUp 250ms ease-out;
    }

    /* Sub-section drawer targets (Calendar, Charts, Performance, Bottom
       Line) are physically moved to <body> by JS so they aren't trapped
       inside display:none columns.  This hides them at body level until
       .rcs-drawer--open is toggled. */
    .rcs-mobile-drawer-target:not(.rcs-drawer--open) {
        display: none;
    }

    @keyframes rcsDrawerSlideUp {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* Prevent body scroll while a drawer is open */
    body.rcs-drawer-active {
        overflow: hidden;
    }

    /* Close button — positioned at top-right of the overlay.
       Only visible when its parent column has .rcs-drawer--open
       (the global default is display:none — set above the media query). */
    .rcs-drawer--open > .rcs-drawer-close {
        position: fixed;
        top: var(--rcs-space-3);
        right: var(--rcs-space-3);
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--rcs-gold-dk);
        background: var(--rcs-navy);
        color: var(--rcs-parchment);
        cursor: pointer;
        box-shadow: var(--rcs-shadow-sm);
        transition: background-color 0.15s ease;
    }
    .rcs-drawer--open > .rcs-drawer-close:hover,
    .rcs-drawer--open > .rcs-drawer-close:focus-visible {
        background: var(--rcs-cobalt);
    }

    /* Unconstrain widgets inside an open drawer so they use the phone's
       full width instead of the desktop 300px max, but ALSO cap them at
       the viewport so nothing overflows right.  The Simple Calendar
       widget in particular has its own internal sizing that can push
       wider than the drawer. */
    .rcs-drawer--open .rcs-widget {
        max-width: 100%;
    }
    .rcs-drawer--open .rcs-collapsible,
    .rcs-drawer--open .rcs-static-box,
    .rcs-drawer--open .rcs-collapsible__body,
    .rcs-drawer--open .rcs-collapsible__summary {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Force all content inside a drawer to respect the container width */
    .rcs-drawer--open * {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Restore explicit sizing on elements that need it */
    .rcs-drawer--open .rcs-drawer-close {
        max-width: none;
    }

    /* The homepage grid itself: single column, show only center */
    .rcs-panels--premium .rcs-homepage-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "center";
    }

    /* Region grid: same treatment */
    .rcs-region__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "center";
    }
}

/* ── Fixed bottom toolbar ─────────────────────────────────────────────────
   Two buttons anchored to the bottom of the viewport.  Hidden on desktop
   (JS creates the DOM, but CSS hides it above the breakpoint).
   ──────────────────────────────────────────────────────────────────────── */
.rcs-mobile-toolbar {
    display: none;  /* hidden on desktop by default */
}

@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-mobile-toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;       /* below open drawer (1000) but above everything else */
        display: flex;
        justify-content: center;
        gap: var(--rcs-space-2);
        padding: var(--rcs-space-2) var(--rcs-space-3);
        /* Capped at 8px. env(safe-area-inset-bottom) exists for the iPhone
           home indicator, and browsers disagree wildly about what to report on
           Android: Firefox returns a value for the gesture-navigation area that
           Chrome reports as zero, and it CHANGES as the address bar shows and
           hides. Uncapped, that put a shifting band of navy below the buttons —
           the toolbar appearing to "hover higher every once in a while".

           8px is enough to clear a genuine home indicator while making the
           worst case a barely perceptible shift instead of a visible gap. */
        padding-bottom: calc(var(--rcs-space-2) + min(env(safe-area-inset-bottom, 0px), 8px));
        background: var(--rcs-navy);
        border-top: 2px solid var(--rcs-gold-dk);
        box-shadow: 0 -2px 12px rgba(0,0,0,.35);
    }
    .rcs-mobile-toolbar__btn {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-family: var(--rcs-font-brand);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--rcs-parchment);
        background: rgba(201,168,76,.12);
        border: 1px solid var(--rcs-gold-dk);
        padding: 0.5rem 0.55rem;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
        /* Each button flexes to share space evenly */
        flex: 1;
        justify-content: center;
        min-width: 0;       /* allow flex shrinking below content width */
    }
    /* Hover: only on devices with a real pointer — prevents sticky
       gold background on touch devices after tapping. */
    @media (hover: hover) {
        .rcs-mobile-toolbar__btn:hover {
            background: var(--rcs-gold);
            color: var(--rcs-navy);
        }
    }
    .rcs-mobile-toolbar__btn:focus-visible {
        background: var(--rcs-gold);
        color: var(--rcs-navy);
    }
    .rcs-mobile-toolbar__btn[aria-expanded="true"] {
        background: var(--rcs-gold);
        color: var(--rcs-navy);
    }
    .rcs-mobile-toolbar__btn svg {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
    }

    /* When a drawer IS open, raise the toolbar above it so buttons
       remain tappable (to close or switch drawers). */
    body.rcs-drawer-active .rcs-mobile-toolbar {
        z-index: 1002;
    }
}


/* ── Header — mobile ──────────────────────────────────────────────────────
   Logo, title, and motto centred on the page, stacked vertically.
   Account buttons wrap to their own centred row beneath.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        padding: var(--rcs-space-3) var(--rcs-space-3);
        gap: var(--rcs-space-1);
    }

    /* Logo centred on its own — flex item before the title group */
    .rcs-header__logo-img,
    .custom-logo {
        width: 70px;
    }
    .custom-logo-link,
    .rcs-header__logo-link {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
    }

    /* Title group: centred, full width, no left border.
       padding-block matches the account row's padding-top + border so
       the space above and below the title is visually symmetric. */
    .rcs-header__title-group {
        flex-basis: 100%;
        text-align: center;
        padding-left: 0;
        border-left: none;
        padding-top: 0.35rem;
        padding-bottom: var(--rcs-space-1);
    }
    .rcs-header__site-name {
        font-size: clamp(1.05rem, 4.5vw, 1.5rem) !important;
        letter-spacing: 0.03em;
    }
    .rcs-header__tagline {
        font-size: clamp(0.48rem, 2.2vw, 0.72rem) !important;
        letter-spacing: 0.08em;
        margin-top: 0.15rem;
    }

    /* Account buttons: own centred row beneath */
    .rcs-header__account {
        flex-basis: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--rcs-space-2);
        margin-left: 0;
        padding-top: var(--rcs-space-1);
        border-top: 1px solid rgba(201,168,76,.15);
    }
    /* Slightly smaller button text */
    .rcs-header__account-link,
    .rcs-header__consult-link,
    .rcs-header__subscribe-link,
    .rcs-header__upgrade-link {
        font-size: 0.62rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Tighter still on very narrow phones */
@media (max-width: 400px) {
    .rcs-header__site-name {
        font-size: 0.95rem !important;
    }
    .rcs-header__logo-img,
    .custom-logo {
        width: 55px;
    }
}


/* ── Map hero — mobile ────────────────────────────────────────────────────
   The map is already width:100% / height:auto, so it scales.  Just
   reduce the generous side padding so it doesn't eat phone real estate.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-map-hero__inner {
        padding-inline: 0 !important;
    }

    /* Crop the sides of the map image to make the globe fill more of the
       phone screen.  The original is 1920×700 with empty ocean on both
       sides of the Nicolosi globe.

       Approach: CSS transform:scale() on BOTH the image AND the SVG
       overlay.  scale() is purely visual — the layout box stays at 100%
       width, and the frame's overflow:hidden clips the scaled-up
       overflow.  Because both elements scale from the same origin
       (center center), the hotspot overlay stays perfectly aligned with
       the image.  No width, margin, or position changes needed — this
       avoids the class of centering bugs that margin-left:-25% and
       left:50%/translateX had.

       scale(1.4) enlarges the globe ~40% and crops ~15% from each side
       + ~15% from top and bottom. */
    .rcs-map-hero__image {
        transform: scale(1.37);
        transform-origin: center center;
    }
    .rcs-map-hero__overlay {
        transform: scale(1.37);
        transform-origin: center center;
    }
    /* Tooltip: flip to BELOW the tap point on mobile so it doesn't get
    /* Tooltip repositioned below the tap point on mobile so it isn't
       clipped by overflow:hidden near the top edge. Auto-hidden after
       1.5 seconds by JS (footer.php) to prevent sticky hover state. */
    .rcs-map-tooltip {
        transform: translate(-50%, 60%);
    }
}


/* ── Region nav strip — mobile ────────────────────────────────────────────
   Needs to wrap gracefully on narrow viewports.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-region-strip__inner {
        flex-wrap: wrap;
        gap: var(--rcs-space-1);
        padding: var(--rcs-space-2) var(--rcs-space-3);
    }
    .rcs-region-strip__label {
        flex-basis: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: var(--rcs-space-1);
    }
    .rcs-region-strip__link {
        font-size: 0.65rem;
        padding: 3px var(--rcs-space-2);
    }
}


/* ── Free homepage — mobile ───────────────────────────────────────────────
   The free layout doesn't need drawers — its content (upsell box, bio,
   geo images) stacks fine.  Just tighten spacing.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-homepage-grid--free {
        grid-template-columns: 1fr;
        grid-template-areas: "center" "left" "right";
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
    /* Upsell box doesn't need sticky on mobile */
    .rcs-homepage-grid--free .rcs-upsell--sticky {
        position: static;
    }
}


/* ── Premium homepage grid — mobile spacing ───────────────────────────────
   Tighter padding when the grid has collapsed to single column.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-panels--premium .rcs-homepage-grid {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
}


/* ── Body bottom padding — room for the fixed toolbar ─────────────────── */
/* Only on pages that have the drawer toolbar (premium homepage + region pages).
   Free homepage and other pages don't have a toolbar — the extra space
   creates an empty parchment strip below the footer. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    body.rcs-front-page.rcs-premium-user,
    body.page-template-template-region {
        padding-bottom: 56px;  /* toolbar height + safe-area */
    }
}


/* ── Footer — mobile ─────────────────────────────────────────────────────
   Make sure the footer content above the fixed toolbar isn't clipped.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-footer {
        /* Top and bottom content padding match.  The body's own
           padding-bottom (56px) handles toolbar clearance, so this
           only needs to cover the content breathing room. */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    /* Tighten gap between compass divider and logo — should match
       the 1.5rem padding-top above the divider. */
    .rcs-footer__columns {
        grid-template-columns: 1fr;
        gap: var(--rcs-space-4);
        margin-bottom: var(--rcs-space-1);
    }
    .rcs-footer__copyright {
        padding-top: 0;
    }
    /* Footer brand: logo above title, all centred */
    .rcs-footer__brand {
        flex-direction: column;
        align-items: center;
        gap: var(--rcs-space-2);
    }
    .rcs-footer__brand p {
        text-align: center;
    }
    /* Each line on its own row for a balanced three-line layout:
       Line 1: Rational Capitalist Strategist.
       Line 2: Vibe-coded with Claude.
       Line 3: All Rights Reserved. © 2026. */
    .rcs-footer__vibe-inline {
        display: block;
    }
    .rcs-footer__rights-break {
        display: block;
    }
}


/* ── Post cards — mobile ──────────────────────────────────────────────────
   Prevent long titles from overflowing on narrow screens.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rcs-post-card__title {
        font-size: 1rem;
    }
    .rcs-post-card__excerpt {
        font-size: 0.88rem;
    }
}


/* ── Speaking photos section — mobile ─────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-homepage__speaking-inner {
        /* The desktop width is calculated for the three-column layout
           (subtracting column widths). On mobile there are no columns,
           so reset to full width. */
        width: 100% !important;
        padding: var(--rcs-space-4) 0;
    }
}


/* ── Account tables — mobile card-stacking ────────────────────────────────
   MemberPress puts data-label="…" on every <td>, designed for exactly this:
   responsive stacking where each cell shows its own label.  The desktop CSS
   overrode this with min-width:22cm.  Below the mobile breakpoint, we undo
   the wide table and let each row become a "card" of labelled key-value lines.

   Zebra striping distinguishes one subscription/payment row from the next.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {

    /* ── Remove the desktop table constraints ──────────────────────────── */
    body.rcs-account-page table,
    #mepr-account-subscriptions-table {
        min-width: 0 !important;
        width: 100% !important;
    }
    body.rcs-account-page .rcs-page__inner {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ── Hide thead — labels come from data-label on each cell ─────── */
    body.rcs-account-page table thead {
        /* Visually hide but keep accessible for screen readers */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    /* ── Each row becomes a stacked card ────────────────────────────── */
    body.rcs-account-page table tbody tr {
        display: block;
        padding: var(--rcs-space-4) var(--rcs-space-3);
        margin-bottom: var(--rcs-space-2);
        border: 1px solid var(--rcs-parchment-worn);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.18);
    }
    /* Zebra striping to distinguish entries */
    body.rcs-account-page table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.35);
    }

    /* ── Each cell becomes a labelled line — label left, value right ── */
    body.rcs-account-page table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        text-align: right;
        padding: var(--rcs-space-2) 0;
        border: none;
        border-bottom: 1px solid rgba(201,168,76,.1);
        white-space: normal;
        width: auto !important;
        min-width: 0 !important;
    }
    body.rcs-account-page table tbody td:last-child {
        border-bottom: none;
    }
    /* Render the column header via the data-label attribute */
    body.rcs-account-page table tbody td::before {
        content: attr(data-label);
        display: inline;
        font-family: var(--rcs-font-brand);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rcs-ink-light);
        margin-right: var(--rcs-space-3);
        flex-shrink: 0;
        text-align: left;
    }

    /* ── Actions cell: label on top, buttons right-aligned below.
       Unlike the other cells (one label + one value), Actions has
       multiple <a> tags as direct children of the <td>.  The label
       takes full width so the buttons group below it. ────────────── */
    body.rcs-account-page td[data-label="Actions"] {
        flex-wrap: wrap;
        justify-content: flex-end;
        white-space: normal !important;
    }
    body.rcs-account-page td[data-label="Actions"]::before {
        flex-basis: 100%;
        text-align: left;
        margin-bottom: var(--rcs-space-2);
    }
    /* Keep action links as tappable buttons on mobile */
    body.rcs-account-page a.mepr-account-row-action {
        padding: var(--rcs-space-2) var(--rcs-space-3) !important;
        border: 1px solid var(--rcs-gold-dk);
        border-radius: 3px;
        font-size: 0.8rem;
        text-decoration: none;
    }

    /* ── Profile form fields: full width on mobile ─────────────────── */
    body.rcs-account-page #mepr_account_form input[type="text"],
    body.rcs-account-page #mepr_account_form input[type="email"],
    body.rcs-account-page #mepr_account_form input[type="password"],
    body.rcs-account-page #mepr_account_form select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    body.rcs-account-page #mepr_account_form .mp-form-row {
        max-width: 100%;
    }

    /* ── Account nav tabs: wrap and centre ──────────────────────────── */
    nav#mepr-account-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: var(--rcs-space-2);
    }

    /* ── Upsell cards: full width ──────────────────────────────────── */
    .rcs-account-upsell .rcs-subscribe__tier-cards {
        width: 100%;
    }
    .rcs-account-upsell .rcs-subscribe__card {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
}


/* ── Checkout / registration forms — mobile ───────────────────────────────
   The single-panel checkout (template-complete-*.php) is already max-width:
   520px, so it fits phones.  Just reduce its padding on narrow screens and
   ensure MemberPress form fields don't overflow.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rcs-complete-sub {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
    .rcs-complete-sub--single {
        padding-block: var(--rcs-space-6);
    }
    .rcs-complete-sub--single .rcs-complete-sub__panel {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
    /* MemberPress form inputs — full width on mobile */
    .rcs-complete-sub .mp_wrapper input[type="text"],
    .rcs-complete-sub .mp_wrapper input[type="email"],
    .rcs-complete-sub .mp_wrapper input[type="password"],
    .rcs-complete-sub .mp_wrapper select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}


/* ── Booking calendar — mobile ────────────────────────────────────────────
   Google's widget is responsive, but the fixed height may be more than needed
   on a narrow phone (Google stacks the time picker vertically, which actually
   INCREASES the needed height). Reduce the frame's padding only. */
@media (max-width: 600px) {
    .rcs-booking {
        margin-top: var(--rcs-space-4);
    }
    .rcs-booking__title {
        font-size: 1.3rem !important;
    }
    .rcs-booking__intro {
        font-size: 0.92rem !important;
    }
    .rcs-booking__frame {
        padding: var(--rcs-space-1);
    }
    .rcs-booking__notes-prompt {
        font-size: 0.85rem !important;
        padding: var(--rcs-space-3) !important;
    }
}


/* ── Subscribe page — mobile ─────────────────────────────────────────────
   Tier cards already stack (flex-wrap + vertical layout). Just tighten
   padding on the outer wrapper and ensure the ribbon doesn't cause
   horizontal overflow. */
@media (max-width: 600px) {
    .rcs-subscribe {
        padding-inline: var(--rcs-space-2);
    }
    .rcs-subscribe__ribbon {
        padding-inline: var(--rcs-space-3);
    }
    .rcs-subscribe__card {
        padding: var(--rcs-space-4) var(--rcs-space-3) var(--rcs-space-4);
    }
    .rcs-subscribe__faq {
        padding-inline: var(--rcs-space-2);
    }
}


/* ── Login / Unauthorized pages — mobile ──────────────────────────────── */
@media (max-width: 600px) {
    .rcs-page__inner {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
}


/* ── Consultation page — mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
    .rcs-consult__intro {
        padding-inline: var(--rcs-space-3);
    }
}


/* ── Collapsible panels inside drawers — mobile ───────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-drawer--open .rcs-collapsible__summary {
        padding: var(--rcs-space-3);
    }
    .rcs-drawer--open .rcs-collapsible__body {
        padding: var(--rcs-space-2);
    }
}


/* ── Chart lightbox — full-screen mobile viewer with pinch-zoom ───────────
   Replaces the desktop hover-zoom + tooltip on mobile.  Tapping a chart
   opens it full-screen; the user can pinch-zoom and pan.  Context text
   (the tooltip content) sits below the chart in portrait, beside it in
   landscape.  Built by rcs-mobile.js — the lightbox shell lives in the
   DOM but is hidden until opened.

   Desktop is COMPLETELY UNTOUCHED — the hover rules above this section
   are not inside any media query and remain in full effect.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Disable hover-zoom and tooltip on mobile ─────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-chart__wrap:hover .rcs-chart__img,
    .rcs-chart__wrap.rcs-chart--active .rcs-chart__img {
        transform: none;
        box-shadow: none;
        z-index: 1;
    }
    .rcs-chart__wrap:hover .rcs-chart__tooltip,
    .rcs-chart__wrap.rcs-chart--active .rcs-chart__tooltip {
        opacity: 0;
        pointer-events: none;
    }
    /* Visual hint that charts are tappable */
    .rcs-chart__img {
        cursor: pointer;
    }
}

/* ── Lightbox overlay — hidden by default ─────────────────────────────── */
.rcs-chart-lightbox {
    display: none;
}
.rcs-chart-lightbox--open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 22, 40, 0.97);
    animation: rcsLightboxFadeIn 200ms ease-out;
}
@keyframes rcsLightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Prevent body scroll while lightbox is open */
body.rcs-chart-lightbox-active {
    overflow: hidden;
}

/* Close button — top right */
.rcs-chart-lightbox__close {
    position: absolute;
    top: var(--rcs-space-3);
    right: var(--rcs-space-3);
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.5);
    background: rgba(10, 22, 40, 0.8);
    color: var(--rcs-parchment);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.rcs-chart-lightbox__close:hover,
.rcs-chart-lightbox__close:focus-visible {
    background: var(--rcs-cobalt);
}

/* Content container — portrait: column, landscape: row */
.rcs-chart-lightbox__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 56px var(--rcs-space-3) var(--rcs-space-3);
    overflow: hidden;
}

/* Image wrapper — holds the pinch-zoomable image */
.rcs-chart-lightbox__img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;        /* JS handles all touch gestures */
    -webkit-user-select: none;
    user-select: none;
}
.rcs-chart-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 3px solid var(--rcs-parchment-worn);
    transform-origin: center center;
    will-change: transform;
}
/* Sentiment border — matches the chart's own border color in the column */
.rcs-chart-lightbox__img--positive { border-color: var(--rcs-chart-positive); }
.rcs-chart-lightbox__img--negative { border-color: var(--rcs-chart-negative); }
.rcs-chart-lightbox__img--neutral  { border-color: var(--rcs-chart-neutral); }

/* Context panel — below the image in portrait */
.rcs-chart-lightbox__context {
    padding: var(--rcs-space-4) var(--rcs-space-2);
    text-align: center;
    flex-shrink: 0;
    max-height: 35vh;
    overflow-y: auto;
}
.rcs-chart-lightbox__context-title {
    display: block;
    font-family: var(--rcs-font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rcs-gold);
    letter-spacing: 0.06em;
    margin-bottom: var(--rcs-space-2);
}
.rcs-chart-lightbox__context-text {
    font-family: var(--rcs-font-brand);
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(240,230,200,.85);
    margin: 0;
}

/* ── Landscape orientation: image left, context right ─────────────────
   No max-width constraint here — the lightbox is already mobile-only
   (JS only opens it below 950px), so these rules can target landscape
   unconditionally.  Phone landscape widths (850-930px) exceed the 950px
   breakpoint used elsewhere, which is why the earlier version never
   matched.  Scoped to the lightbox's --open class for safety. */
@media (orientation: landscape) {
    .rcs-chart-lightbox--open .rcs-chart-lightbox__content {
        flex-direction: row;
        padding-top: var(--rcs-space-3);
    }
    .rcs-chart-lightbox--open .rcs-chart-lightbox__img-wrap {
        flex: 5;
    }
    .rcs-chart-lightbox--open .rcs-chart-lightbox__context {
        flex: 2;
        overflow-y: auto;
        max-height: none;
        padding: var(--rcs-space-3) var(--rcs-space-4);
        text-align: left;
        /* No border-left. In portrait the context sits below the image with no
           rule between them, and the divider made the landscape arrangement
           read as two separate panels rather than one figure with its caption
           beside it. Consistency with portrait wins. */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* ── Toolbar icons: hidden in portrait, shown in landscape ────────────
   Frees horizontal space for button labels like "Bottom Line" in portrait;
   icons add visual clarity in landscape where there's room.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px) and (orientation: portrait) {
    .rcs-mobile-toolbar__icon {
        display: none;
    }
}


/* ── Account page — mobile spacing pass ───────────────────────────────────
   Tightens vertical spacing throughout the account page for portrait
   phone viewports.  All rules scoped to body.rcs-account-page so they
   only affect the MemberPress account page.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {

    /* Page wrapper — reduce top/bottom padding */
    body.rcs-account-page .rcs-page {
        padding-top: var(--rcs-space-4);
        padding-bottom: var(--rcs-space-4);
        padding-inline: var(--rcs-space-3);
    }

    /* "My Account" title — less space above and below.
       Gap to menu bar reduced ~40% from 0.75rem to 0.45rem. */
    body.rcs-account-page .rcs-page__title {
        font-size: 1.6rem !important;
        margin-bottom: 0.45rem;
    }

    /* Nav tabs — centred, slightly larger font, space above matches
       the page's padding-top so it mirrors the title's clearance. */
    body.rcs-account-page #mepr-account-nav ul {
        gap: var(--rcs-space-4);
        margin-top: 0;
        margin-bottom: var(--rcs-space-3);
        padding-bottom: var(--rcs-space-3);
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
    }
    body.rcs-account-page #mepr-account-nav a {
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* "Welcome to Rational Capitalist Strategist" — tighter, symmetric,
       centred.  JS inserts a <br> after "Welcome to" for two lines. */
    body.rcs-account-page #mepr-account-welcome-message p {
        font-size: 1.2rem !important;
        margin: var(--rcs-space-3) 0 var(--rcs-space-3) 0;
        text-align: center;
    }

    /* "Your Account Information" heading — smaller than the welcome
       message (1.2rem) so the hierarchy reads correctly. */
    body.rcs-account-page #mepr_account_form::before {
        font-size: 0.95rem;
        margin-bottom: var(--rcs-space-1);
        padding-bottom: var(--rcs-space-2);
    }

    /* Save Profile button — reduce space above and below */
    body.rcs-account-page #mepr_account_form input[type="submit"],
    body.rcs-account-page #mepr_account_form button[type="submit"] {
        margin-top: var(--rcs-space-3) !important;
        margin-bottom: 0 !important;
    }

    /* "Change Password" — reduce space, match Save Profile */
    body.rcs-account-page .mepr-account-change-password {
        margin-top: var(--rcs-space-3);
        margin-bottom: 0;
    }

    /* Dark divider above upsell section — spacing matches what the
       Markets tier shows (same visual weight both sides of the line). */
    body.rcs-account-page .rcs-account-upsell {
        margin-top: var(--rcs-space-8);
        padding-top: var(--rcs-space-8);
    }

    /* Upsell intro text — less bottom margin so the first card is closer */
    body.rcs-account-page .rcs-account-upsell__intro {
        margin-bottom: 3rem;
    }

    /* Extras section (consultation box) — space above the faded line
       (margin-top) and below it (padding-top) should look symmetrical.
       The pediment ornament extends ~46px above the card's box, so
       padding-top needs to be larger than margin-top by that amount
       to produce equal VISIBLE gaps. */
    body.rcs-account-page .rcs-account-extras {
        margin-top: 3rem;
        padding-top: 4rem;
    }

    /* When extras is the first child (Markets tier — no tier cards above),
       space above the consultation card.  Generous enough that the
       pediment ornament's loops sit well clear of the gold divider. */
    body.rcs-account-page .rcs-account-upsell > .rcs-account-extras:first-child {
        padding-top: 3.5rem;
    }
    body.rcs-account-page .rcs-account-upsell:has(> .rcs-account-extras:first-child) {
        padding-top: var(--rcs-space-8);
    }
}


/* ── "Most comprehensive" badge — mobile ──────────────────────────────────
   Pulled into the normal flow as a centred block between the ornament
   and the title.  No other card properties are changed. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-subscribe__card-badge {
        position: static;
        display: block;
        text-align: center;
        border-radius: 3px;
        margin: var(--rcs-space-1) auto 0.3cm;
        width: fit-content;
    }
    /* Mapping Out Strategies card only: close the gap between the badge
       and the title by reducing the title's own top margin.  The card-head
       container is left untouched. */
    .rcs-subscribe__card--markets .rcs-subscribe__card-title {
        margin-top: 0;
    }
    .rcs-subscribe__card--markets .rcs-subscribe__card-action {
        padding-top: var(--rcs-space-4);
    }
}


/* ── Mobile subscription cards — replaces the MemberPress table ───────────
   JS-built cards that read from the real table. Fully controlled markup
   and styling, no fighting with MemberPress's table CSS.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    /* Hide the original MemberPress table on mobile when replaced by cards */
    body.rcs-account-page table.rcs-mobile-hidden {
        display: none !important;
    }

    .rcs-mobile-sub-cards {
        margin-bottom: var(--rcs-space-6);
    }

    .rcs-mobile-sub-card {
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid var(--rcs-parchment-worn);
        border-radius: 4px;
        padding: var(--rcs-space-3);
        margin-bottom: var(--rcs-space-3);
    }
    .rcs-mobile-sub-card:nth-child(even) {
        background: rgba(180, 155, 100, 0.18);
    }

    /* Each row: label left, value right */
    .rcs-mobile-sub-card__row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: var(--rcs-space-2) 0;
        border-bottom: 1px solid rgba(201,168,76,.1);
    }
    .rcs-mobile-sub-card__row:last-child {
        border-bottom: none;
    }

    .rcs-mobile-sub-card__label {
        font-family: var(--rcs-font-brand);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rcs-ink-light);
        flex-shrink: 0;
        margin-right: var(--rcs-space-3);
    }

    .rcs-mobile-sub-card__value {
        font-family: var(--rcs-font-brand);
        font-size: 0.9rem;
        color: var(--rcs-ink);
        text-align: right;
    }

    /* Actions: buttons right-aligned */
    .rcs-mobile-sub-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--rcs-space-2);
        justify-content: flex-end;
    }
    .rcs-mobile-sub-card__btn {
        display: inline-block;
        padding: var(--rcs-space-2) var(--rcs-space-3);
        border: 1px solid var(--rcs-gold-dk);
        border-radius: 3px;
        font-family: var(--rcs-font-brand);
        font-size: 0.8rem;
        text-decoration: none;
        color: var(--rcs-navy);
        white-space: nowrap;
    }
    .rcs-mobile-sub-card__btn:hover {
        background: var(--rcs-gold);
        color: var(--rcs-navy);
    }
}


/* ── Account forms — centre Submit buttons ─────────────────────────────────
   MemberPress and Stripe forms use various wrapper classes. Target the
   button/input itself with auto margins for reliable centering. */
body.rcs-account-page input[type="submit"],
body.rcs-account-page button[type="submit"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
body.rcs-account-page .mp-form-submit,
body.rcs-account-page .mepr_submit {
    text-align: center;
}


/* ── Checkout pages — mobile ──────────────────────────────────────────────
   The single-panel checkout (template-complete-*.php) overflows at phone
   width because the label|input rows are side-by-side flex.  Stack them
   vertically on mobile and constrain everything to the viewport. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-complete-sub--single {
        max-width: 100%;
        padding-block: var(--rcs-space-6);
    }
    .rcs-complete-sub--single .rcs-complete-sub__panel {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
    /* Stack label above input instead of side-by-side.
       The label wrapper's flex: 0 0 130px must be reset or it becomes
       a 130px HEIGHT in column mode, creating a huge gap. */
    .rcs-complete-sub__panel .mp-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--rcs-space-1);
    }
    .rcs-complete-sub__panel .mp-form-row > .mp-form-label {
        flex: none;
        text-align: left;
        margin-bottom: 0;
    }
    .rcs-complete-sub__panel .mp_wrapper,
    .rcs-complete-sub__panel .mepr-registration-form-wrap {
        max-width: 100%;
    }
    /* Prevent any form element from overflowing */
    .rcs-complete-sub__panel input,
    .rcs-complete-sub__panel select {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Left-align input text on mobile (desktop right-aligns for the
       side-by-side layout; stacked reads better left-aligned) */
    .rcs-complete-sub__panel .mp-form-row input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
    .rcs-complete-sub__panel .mp-form-row select {
        text-align: left !important;
    }
    /* Title */
    .rcs-complete-sub__panel-title {
        font-size: 1.5rem !important;
    }
    /* Credit/proration text */
    .rcs-complete-sub__panel-credit {
        font-size: 0.85rem !important;
    }
}


/* ── MemberPress registration page — mobile ───────────────────────────────
   The /register/<membership>/ pages render through single.php with
   body.rcs-register-page.  These have their own form layout separate from
   the template-complete-*.php checkout panels.  Tighten padding and
   constrain form elements to the viewport. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    body.rcs-register-page .rcs-page {
        max-width: 100%;
        padding-block: var(--rcs-space-6);
        padding-inline: var(--rcs-space-2);
    }
    body.rcs-register-page .rcs-page__inner {
        padding: var(--rcs-space-4) var(--rcs-space-3);
    }
    /* Corner diamonds: adjust positions for tighter padding */
    body.rcs-register-page .rcs-page__content::before {
        bottom: calc(-1 * var(--rcs-space-4) - 5.5px);
        left: calc(-1 * var(--rcs-space-3) - 5.5px);
    }
    body.rcs-register-page .rcs-page__content::after {
        bottom: calc(-1 * var(--rcs-space-4) - 5.5px);
        right: calc(-1 * var(--rcs-space-3) - 5.5px);
    }
    /* Form fields: full width */
    body.rcs-register-page input[type="text"],
    body.rcs-register-page input[type="email"],
    body.rcs-register-page input[type="password"],
    body.rcs-register-page select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Title — match the checkout template's mobile size */
    body.rcs-register-page .rcs-page__title {
        font-size: 1.5rem !important;
    }
}


/* ── Upgrade credit note — prominent note below the $250/year price ──────
   Only rendered when the viewer is a Macro subscriber (upgrade context).
   Styled to stand out as reassurance without overpowering the price. */
.rcs-subscribe__card-credit-note {
    font-family: var(--rcs-font-brand);
    font-size: 0.88rem !important;
    font-weight: 600;
    font-style: italic;
    color: var(--rcs-gold-dk);
    text-align: center;
    margin: var(--rcs-space-2) auto var(--rcs-space-1);
    max-width: 280px;
    line-height: 1.5;
}


/* ── Free homepage — mobile layout ────────────────────────────────────────
   Reorganised for portrait phone: hero → G7 image → motto → description →
   bio photo + bio → upsell → speaking photos.  The right column (geo
   images widget) is hidden since the needed images have been moved by JS.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    /* Grid reorder: center (content) → left (upsell) */
    .rcs-homepage-grid--free {
        grid-template-columns: 1fr;
        grid-template-areas: "center" "left";
        padding-inline: var(--rcs-space-3);
    }

    /* Hide the right column — its images were moved by JS */
    .rcs-homepage-grid__right.rcs-mobile-hidden-free {
        display: none !important;
    }

    /* Upsell box: not sticky on mobile, narrower with side borders */
    .rcs-homepage-grid--free .rcs-upsell--sticky {
        position: static;
    }
    .rcs-panels--free .rcs-upsell {
        max-width: 70%;
        margin-inline: auto;
        margin-top: var(--rcs-space-4);
        text-align: center;
    }
    /* Centre-justify both rows of buttons */
    .rcs-panels--free .rcs-upsell .rcs-upsell__link {
        display: inline-block;
        margin: var(--rcs-space-1);
    }
    /* Free Limited Access block: same centred treatment as the Premium
       Access box above it, so the pair reads as one matched unit stacked
       on mobile rather than a mismatched left/centred pairing. */
    .rcs-panels--free .rcs-free-access {
        max-width: 70%;
        margin-inline: auto;
        text-align: center;
    }
    .rcs-panels--free .rcs-free-access .rcs-substack-btn {
        display: inline-flex;
    }

    /* ── G7 image — smaller, centred, with visible background border ── */
    .rcs-mobile-hero-geo {
        display: block;
        max-width: 65%;
        margin: var(--rcs-space-6) auto var(--rcs-space-1);
        text-align: center;
    }
    .rcs-mobile-hero-geo img {
        width: 100%;
        height: auto;
        display: block;
        border: 2px solid var(--rcs-parchment-worn);
        box-shadow: var(--rcs-shadow-sm);
    }

    /* ── Motto — centred, bigger. Target the .rcs-homepage__about
       container's first heading specifically. ─────────────────────── */
    .rcs-panels--free .rcs-homepage__about > .rcs-homepage__about-heading {
        font-size: clamp(1.65rem, 3vw, 2.1rem) !important;
        text-align: center;
        margin-top: 0 !important;
        margin-bottom: var(--rcs-space-4);
    }
    /* Also kill any top margin/padding on the about container itself */
    .rcs-panels--free .rcs-homepage__about {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ── All text centre-justified on mobile ──────────────────────── */
    .rcs-panels--free .rcs-homepage__about-body,
    .rcs-panels--free .rcs-homepage__about-body p,
    .rcs-panels--free .rcs-homepage__bio,
    .rcs-panels--free .rcs-homepage__about-heading {
        text-align: center;
    }

    /* ── Bio photo — centred in the bio section ───────────────────── */
    .rcs-mobile-bio-photo {
        display: block;
        text-align: center;
        margin: var(--rcs-space-4) auto;
        max-width: 126px;
    }
    .rcs-mobile-bio-photo img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
    }

    /* ── Speaking photos — full width on mobile ──────────────────── */
    .rcs-homepage__speaking {
        padding-bottom: var(--rcs-space-4);
    }
    .rcs-homepage__speaking-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 0;
    }
    /* Every layer in the widget chain must allow centering.
       Structure: .rcs-widget → .wp-block-image → figure.aligncenter → a → img
       Using !important to override WordPress core block styles. */
    .rcs-homepage__speaking .rcs-widget {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .rcs-homepage__speaking .wp-block-image {
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .rcs-homepage__speaking figure {
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
    }
    .rcs-homepage__speaking figure img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ── Password reset / forgot password — mobile ────────────────────────────
   The title "Request a Password Reset" overflows at phone width. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    body.rcs-forgot-password-page .rcs-page__title,
    body.rcs-reset-password-page .rcs-page__title {
        font-size: 1.5rem !important;
        text-align: center;
    }
    body.rcs-forgot-password-page .rcs-page__inner,
    body.rcs-reset-password-page .rcs-page__inner {
        padding-inline: 1.5cm;
    }
    #mepr_forgot_password_form input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #mepr_forgot_password_form #wp-submit {
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* ── Header — landscape override ──────────────────────────────────────────
   In landscape, vertical space is precious. Override the portrait stacking
   (logo centred → title → tagline → buttons) with a single horizontal row:
   logo + title left, buttons right, tagline hidden. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-header__inner {
        flex-wrap: nowrap;
        align-items: center;
        padding: var(--rcs-space-2) var(--rcs-space-3);
        gap: var(--rcs-space-2);
    }
    .custom-logo-link,
    .rcs-header__logo-link {
        flex-basis: auto;
        display: inline-flex;
    }
    .rcs-header__logo-img,
    .custom-logo {
        width: 40px;
    }
    .rcs-header__title-group {
        flex-basis: auto;
        flex: 0 1 auto;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: var(--rcs-space-2);
        border-left: 1px solid rgba(201,168,76,.3);
    }
    .rcs-header__site-name {
        font-size: 0.85rem !important;
    }
    .rcs-header__tagline {
        display: none;
    }
    .rcs-header__account {
        flex-basis: auto;
        flex: 1 1 auto;
        justify-content: flex-end;
        margin-left: auto;
        padding-top: 0;
        border-top: none;
    }
    .rcs-header__account-link,
    .rcs-header__consult-link,
    .rcs-header__subscribe-link,
    .rcs-header__upgrade-link {
        font-size: 0.55rem;
        padding: 0.3rem 0.5rem;
    }
}


/* ── Charts inside drawers — landscape grid ───────────────────────────────
   Two charts per row, left-aligned. An odd chart sits alone on the left
   of its row. Compass dividers centre on their own full-width row.
   The lightbox handles full-screen on tap. */
/* Landscape chart grid handled by JS in openDrawer() — inline styles
   applied directly to .rcs-charts and .rcs-chart elements. */


/* ── Calendar widget — landscape compact ──────────────────────────────────
   In landscape the full-width calendar wastes space. Shrink it to a
   centred panel with a translucent parchment background. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-drawer--open .rcs-static-box,
    .rcs-drawer--open .simcal-default-calendar-list {
        max-width: 500px;
        margin-inline: auto;
        background: rgba(247, 240, 218, 0.85);
        border-radius: 6px;
        padding: var(--rcs-space-3);
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
    /* The collapsible header above it */
    .rcs-drawer--open .rcs-collapsible__summary {
        max-width: 500px;
        margin-inline: auto;
    }
}


/* ── Hero map — landscape scale ───────────────────────────────────────────
   Portrait uses scale(1.37) for aggressive crop on narrow phones.
   Landscape has more width, so a gentler scale splits the difference —
   globe is still prominent but more of the surrounding map is visible.
   Both image and overlay scale identically so hotspots stay aligned. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-map-hero__image {
        transform: scale(1.15);
        transform-origin: center center;
    }
    .rcs-map-hero__overlay {
        transform: scale(1.15);
        transform-origin: center center;
    }
}


/* ── Side borders — landscape ─────────────────────────────────────────────
   Add breathing room on the left and right edges in landscape mode. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-panels,
    .rcs-page {
        padding-inline: 0.5cm;
    }
}


/* ── Markets-tier drawers — landscape compact ─────────────────────────────
   Performance table and Bottom Line are too large in landscape drawers.
   Constrain them with translucent parchment backgrounds. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    /* ── Remove the chevron in landscape drawers ──────────────────── */
    .rcs-drawer--open .rcs-collapsible__summary::before {
        display: none;
    }

    /* ── Performance & Bottom Line: panel wrapper added by JS ─────── */
    .rcs-landscape-panel {
        max-width: 500px !important;
        margin-inline: auto;
        background: rgba(247, 240, 218, 0.85) !important;
        border: 1px solid var(--rcs-parchment-worn);
        border-radius: 6px;
        padding: var(--rcs-space-3) !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
    .rcs-drawer--open .rcs-performance-table td {
        border-bottom: 1px solid rgba(160,132,92,.3);
    }
    /* Shrink the Bottom Line image by 50% within the panel */
    .rcs-drawer--open .rcs-bottom-line__image-wrap {
        max-width: 300px;
        margin-inline: auto;
    }
    .rcs-drawer--open .rcs-bottom-line__image-wrap img {
        width: 100%;
        height: auto;
    }
}


/* ── Account upsell boxes — landscape ─────────────────────────────────────
   Full width is too large in landscape (~900px). Constrain to split the
   difference between desktop and portrait. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-account-upsell {
        max-width: 650px;
        margin-inline: auto;
    }
    .rcs-subscribe__layout {
        max-width: 600px;
        margin-inline: auto;
    }
    .rcs-account-extras {
        max-width: 600px;
        margin-inline: auto;
    }
}


/* ── Card titles — one line in landscape ──────────────────────────────────
   The mobile <br> breaks that split titles across three lines are hidden
   in landscape where there's enough width for one line. Scoped to card
   titles and the MSCI EAFE bullet only — other mobile breaks stay. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-subscribe__card-title br.rcs-mobile-br {
        display: none !important;
    }
    .rcs-subscribe__features-sub br.rcs-mobile-br {
        display: none !important;
    }
}


/* ── Text zoom panel — hidden on mobile ───────────────────────────────────
   Pinch-to-zoom is native on touch devices, and the floating panel
   competes with the drawer toolbar for bottom-right space. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-text-zoom {
        display: none !important;
    }
}


/* ── Consultation page cards — landscape ──────────────────────────────────
   Cards are wide enough in landscape for titles on one line. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    .rcs-subscribe__card {
        max-width: 700px;
        margin-inline: auto;
    }
    .rcs-subscribe__card-title {
        font-size: 1.6rem !important;
    }
}


/* ── Free homepage — landscape adjustments ────────────────────────────────
   G7 photo smaller, body text left-justified (titles and images stay
   centred), LinkedIn button left-aligned. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    /* Body text left-justified — titles and images stay centred */
    .rcs-panels--free .rcs-homepage__about-body,
    .rcs-panels--free .rcs-homepage__about-body p {
        text-align: left !important;
    }

    /* LinkedIn button left-aligned */
    .rcs-panels--free .rcs-linkedin-btn {
        justify-content: flex-start;
        margin-left: 0;
        margin-right: auto;
    }
    .rcs-panels--free .rcs-homepage__bio {
        text-align: left;
    }

    /* Section titles — one line in landscape (hide mobile breaks) */
    .rcs-panels--free .rcs-homepage__about-heading br.rcs-mobile-br {
        display: none !important;
    }
}


/* Free homepage landscape handled by mobile JS + landscape overrides below */


/* ── Landscape-only line breaks ───────────────────────────────────────────
   Like rcs-mobile-br but ONLY visible in landscape orientation on mobile.
   Hidden on desktop and in portrait. */
br.rcs-landscape-br {
    display: none;
}
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-width: 1150px) and (max-height: 650px) {
    br.rcs-landscape-br {
        display: initial !important;
    }
}


/* ── Change Password page (account/?action=newpassword) ───────────────────
   MemberPress renders the password form at full container width, spreading
   the labels and inputs far apart. Constrain to a comfortable width and
   centre the form + cancel link.
   Form class is mepr-newpassword-form (no hyphen between new and password).
   Labels are direct <label> children of .mp-form-row, NOT inside
   .mp-form-label wrappers. */
body.rcs-account-page .mepr-newpassword-form {
    max-width: 480px;
    margin-inline: auto;
}
body.rcs-account-page .mepr-newpassword-form .mp-form-row {
    display: flex;
    align-items: center;
    gap: var(--rcs-space-3);
    margin-bottom: var(--rcs-space-4);
}
body.rcs-account-page .mepr-newpassword-form .mp-form-row > label {
    flex: 0 0 160px;
    text-align: left;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    color: var(--rcs-ink-faded);
    margin: 0;
}
body.rcs-account-page .mepr-newpassword-form .mp-hide-pw {
    flex: 1 1 auto;
    min-width: 0;
    position: relative !important;
    display: block;
}
body.rcs-account-page .mepr-newpassword-form .mp-hide-pw input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.2rem;
}
/* Eye toggle — inside the field, right-aligned */
body.rcs-account-page .mepr-newpassword-form .mp-hide-pw button {
    position: absolute !important;
    right: 0.4rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: auto !important;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
}
/* Submit button + "or Cancel" — centred, tighter gap */
body.rcs-account-page .mepr-newpassword-form .mepr-submit {
    display: block;
    min-width: 240px;
    margin: var(--rcs-space-3) auto var(--rcs-space-2);
}
body.rcs-account-page .mepr-newpassword-form {
    text-align: center;
}


/* ── Performance table group break ────────────────────────────────────────
   A blank row separating groups within one table — on the Latin America
   page, the region's own funds from the broader commodity and EM context
   below. Height rather than margin: table rows do not take margins, and a
   border would read as a second header rule. Removed by the sort script
   once the table is reordered (footer.php). */
.rcs-performance-table__break td {
    height: var(--rcs-space-4);
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {

    .rcs-performance-table__break td {
        height: var(--rcs-space-3);
    }
}

/* ── Terms & Policies link on the account page ────────────────────────────
   Injected by rcsAccountLegalLink() in footer.php — under Change Password on
   the Home tab, below the subscriptions table on the Subscriptions tab.

   Gold rather than the site's link red: this is a reference route, not an
   action, and it sits close enough to Cancel and Change Plan that matching
   their treatment would overstate it. Centred so it reads as a footer to the
   panel above rather than as another item in a list. */
.rcs-account-legal {
    margin: var(--rcs-space-6) 0 var(--rcs-space-2);
    text-align: center;
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

.rcs-account-legal a {
    color: var(--rcs-gold-dk);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rcs-account-legal a:hover,
.rcs-account-legal a:focus {
    color: var(--rcs-cobalt-accent);
}

/* The subscriptions table sits inside a wrapper with its own bottom spacing,
   so the link needs less above it than on the Home tab or the gap doubles. */
.rcs-account-legal--subs {
    margin-top: var(--rcs-space-3);
}

/* ── Charts on Watch: no chevron on mobile ────────────────────────────────
   The chevron signals "this collapses", which is true on desktop where the
   section sits in a column alongside others and closing it is useful. In a
   mobile drawer the widget IS the screen — it opens full-bleed with its own
   close button — so a disclosure marker on the heading offers an action that
   makes no sense there, and invites a tap that collapses the only content
   present.

   Scoped to #rcs-mobile-charts, so Performance and Bottom Line keep theirs.
   Applied via the same gap-aware condition as everything else, so a foldable
   in landscape matches a phone rather than falling back to desktop. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {

    #rcs-mobile-charts > .rcs-collapsible__summary::before {
        display: none;
    }

    /* The chevron carried the left margin that separated it from the title.
       Without this the heading sits hard against the panel edge. */
    #rcs-mobile-charts > .rcs-collapsible__summary {
        padding-left: var(--rcs-space-4);
    }
}

/* ── Confirm Email field ──────────────────────────────────────────────────
   Injected on checkout by assets/js/rcs-email-confirm-v8.js.

   ⚠ Styled entirely on OUR OWN classes. The row and input previously carried
   MemberPress's .mp-form-row / .mepr-form-input / .mepr-field-required in order
   to inherit their form styling. That broke LIVE checkouts: MemberPress's
   validator claims anything wearing its classes as one of its own fields, and
   this input deliberately has no `name` — its value is never submitted — so the
   validator could not read a value, marked it invalid, and failed the form.
   Symptoms were "Please fix the errors above" with nothing highlighted, and a
   spurious "passwords do not match" on one tier.

   Borrowing a third-party class borrows its BEHAVIOUR, not just its appearance.

   These rules reproduce MemberPress's field appearance independently. If their
   form styling changes this will need a look — an acceptable cost for staying
   outside their validation.

   No inline error element: every checkout failure writes to the shared summary
   above the Sign Up button (.mepr-form-has-errors, further down). */
.rcs-email-confirm-row {
    /* Matched to MemberPress's own .mp-form-row (display: flex; align-items:
       center; gap: var(--rcs-space-3)) and .mp-form-label (flex: 0 0 130px),
       read directly from DevTools on the live checkout — not guessed. Without
       this the row fell back to block stacking, so the label sat above the
       input instead of beside it at the shared label-column width every
       other field uses. */
    display: flex;
    align-items: center;
    gap: var(--rcs-space-3);
    margin-bottom: var(--rcs-space-4);
}

.rcs-email-confirm-label {
    flex: 0 0 130px;
    margin: 0;
    text-align: left;
}

/* Styled on the LABEL element itself, matching the exact selector depth and
   values .rcs-complete-sub__panel .mp-form-row > .mp-form-label label uses
   on this same page — read live, not approximated on the wrapping div,
   which is what previously left this field's label visually heavier/larger
   than every other field's. */
.rcs-email-confirm-label label {
    font-family: var(--rcs-font-brand);
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--rcs-ink-faded);
    margin: 0;
    display: inline;
}

.rcs-email-confirm-input {
    flex: 1 1 auto;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rcs-parchment-worn);
    border-radius: 2px;
    background: #fff;
    font-family: var(--rcs-font-body);
    font-size: 1rem;
    color: var(--rcs-ink);
    box-sizing: border-box;
    /* ⚠ !important is deliberate here, not a habit. The general rule
     * `.rcs-complete-sub__panel input[type="email"] { text-align: right; }`
     * (further down this file) targets every field by its raw HTML type
     * attribute — written for MemberPress's own native fields before this
     * one existed, but it also matches THIS field, since it needs
     * type="email" too for the browser's own format validation. That
     * rule's selector (a class + an attribute) out-specifies this one (a
     * single class), so it silently won regardless of file order. Found
     * 28 August via the Computed panel showing the winning source line
     * directly. Scoped to only this field — the general rule is left
     * untouched, since it correctly governs the real MemberPress fields
     * and nothing else on this form asked to change.
     */
    text-align: left !important;
}

/* Mobile: stack vertically like every native .mp-form-row does on this same
   page at this same breakpoint (§7329 above) — this row was missing its own
   copy of that rule, so it stayed side-by-side at widths where every other
   field on the form had already switched to stacked. */
@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {
    .rcs-email-confirm-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--rcs-space-1);
    }
    .rcs-email-confirm-label {
        flex: none;
        margin-bottom: 0;
    }
    .rcs-email-confirm-input {
        max-width: 100%;
        text-align: left;
    }
}

.rcs-email-confirm-input:focus {
    outline: 2px solid var(--rcs-cobalt-accent);
    outline-offset: 1px;
}

/* ── Thank-you page: email read-back ──────────────────────────────────────
   Quieter than the welcome copy above it — this is a check, not an
   announcement, and it should not compete with "Welcome aboard". But the
   address itself is bold, because scanning it is the entire point. */
.rcs-thankyou__email-check {
    margin-top: var(--rcs-space-6);
    font-family: var(--rcs-font-brand);
    font-size: 0.95rem;
    color: var(--rcs-ink-faded);
    text-align: center;
}

.rcs-thankyou__email-check strong {
    color: var(--rcs-ink);
    word-break: break-word;   /* long addresses must not widen the page */
}

.rcs-thankyou__email-check-note {
    display: inline-block;
    margin-top: var(--rcs-space-1);
    font-size: 0.85rem;
}

.rcs-thankyou__email-check-note a {
    color: var(--rcs-cobalt-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Checkout error summary ───────────────────────────────────────────────
   MemberPress's summary node, rewritten in place by
   assets/js/rcs-checkout-errors-v10.js. Only the list needs styling — the
   surrounding node keeps whatever MemberPress gave it, so a single-cause
   message looks exactly as it did before. */
.rcs-checkout-errors {
    margin: var(--rcs-space-2) 0 0;
    padding-left: 1.25rem;
    list-style: disc outside;
    text-align: left;
}

.rcs-checkout-errors li {
    margin-bottom: var(--rcs-space-1);
}


/* ── Checkout error summary — the single message location ─────────────────
   MemberPress renders span.mepr-form-has-errors inside .mp-form-submit,
   AFTER the Sign Up button. Three guards now write to it: the consent
   checkbox, the confirm-email field, and MemberPress's own validation as
   rewritten by rcs-checkout-errors.

   Before this there were three locations and three treatments — a password
   mismatch spoke from the bottom, an email mismatch beside its own field, the
   consent error beside the checkbox — so a buyer had to hunt for whichever
   applied. */
.rcs-complete-sub__panel .mepr-form-has-errors,
.mp-form-submit .mepr-form-has-errors {
    /* Above the button, not below it. The button is what they just pressed;
       the reason it did nothing belongs where their eye already is. Flex
       order rather than a DOM move, so MemberPress can keep inserting and
       clearing the node wherever it likes. */
    order: -1;
    display: block;
    width: 100%;
    margin: 0 0 var(--rcs-space-3);
    padding: var(--rcs-space-3) var(--rcs-space-4);
    border: 1px solid var(--rcs-red);
    border-left: 3px solid var(--rcs-red);
    background: rgba(139, 26, 26, 0.06);
    font-family: var(--rcs-font-brand);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--rcs-red);
    text-align: left;
}

/* ⚠ Found 17 August: the rule above applies its full border/background/
   padding UNCONDITIONALLY — MemberPress renders this span into the DOM with
   no text content at all before any validation has run, and the block above
   gave it a fully visible bordered box regardless, with nothing inside it.
   Neither JS guard's "hand visibility back to MemberPress" logic can fix
   this from script, because it only ever toggles the INLINE style property —
   this stylesheet rule wins regardless of that, since display:block here is
   unconditional. :empty only matches when the element has no child nodes at
   all (not even a blank text node), so this stops matching the instant real
   text is written in, and every other behaviour above is unaffected. */
.rcs-complete-sub__panel .mepr-form-has-errors:empty,
.mp-form-submit .mepr-form-has-errors:empty {
    display: none !important;
    border: none;
    padding: 0;
    margin: 0;
}

/* order: -1 needs a flex parent. MemberPress's wrapper is block by default. */
.rcs-complete-sub__panel .mp-form-submit,
.mp-form-submit:has(.mepr-form-has-errors) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* The submit button and loading gif keep their natural order after the
   summary. */
.mp-form-submit .mepr-submit {
    order: 1;
}

.mp-form-submit .mepr-loading-gif {
    order: 2;
    align-self: center;
}

/* Consent block sits above the summary, since its checkbox is what the
   message may be about. */
.mp-form-submit .rcs-legal-consent {
    order: -2;
}

/* Every rejected field shades identically, whoever flagged it. The
   confirm-email row overrides this below, because MemberPress marks that input
   invalid permanently and it must only shade when actually checked. */
.rcs-complete-sub__panel .mepr-form-input.invalid,
.rcs-complete-sub__panel [aria-invalid="true"] {
    border: 2px solid var(--rcs-red) !important;
    background: rgba(139, 26, 26, 0.12) !important;
}

/* Our own field must not shade until it has actually been checked —
   MemberPress leaves `invalid` on it permanently because it has no name.

   The earlier specificity war here is gone: MemberPress no longer touches this
   field, so there is no permanent `invalid` class to neutralise and no competing
   selector to out-rank. One rule. */
.rcs-email-confirm-row--invalid .rcs-email-confirm-input {
    /* Matched to the shading MemberPress gives its own rejected fields —
       a visible fill, not a border tint. */
    border: 2px solid var(--rcs-red);
    background: rgba(139, 26, 26, 0.12);
}

/* ── Portrait-only line breaks ────────────────────────────────────────────
   Narrower than rcs-mobile-br, which also fires in mobile landscape. Used on
   the thank-you page, where landscape has room for the sentences to sit on
   one line and portrait does not.

   Portrait is tested explicitly rather than assumed from width: the drawer
   breakpoint deliberately includes short wide viewports (a foldable in
   landscape), and those must NOT get portrait breaks. */
br.rcs-portrait-br {
    display: none;
}

@media (max-width: 950px) and (orientation: portrait) {
    br.rcs-portrait-br {
        display: initial;
    }
}

/* ── Post-card meta row on narrow screens ─────────────────────────────────
   DELIBERATELY NO RULES HERE.

   The row is flex with `align-items: center`, and at phone width the browser's
   own wrapping does the right thing: the date drops to its own line and the
   pills stay grouped and vertically centred with it. Verified on a phone.

   An earlier version added `flex-wrap: wrap` plus a 600px block that reset
   margin-left on the pills. That RESET was the mistake — it removed the
   auto-margin holding the pills together, so they spilled onto a separate line
   and lost their grouping. Both blocks were removed rather than adjusted.

   The lesson is the one this build keeps relearning: when the default behaviour
   is already correct, declaring it explicitly is not neutral. Every rule added
   is a rule that can be wrong. */

/* ── Complimentary-post notice ────────────────────────────────────────────
   Foot of a post marked both Markets-tier and Free — a sample of Tier 2
   content, with a route to the subscription. Rendered by
   rcs_complimentary_notice() in inc/roles.php.

   Quiet by design. It sits between the article and its metadata, and it is a
   postscript rather than a call to action competing with the piece the reader
   has just finished. Italic, one size down, cobalt link. */
.rcs-single__complimentary {
    /* NO border-top. .rcs-single__footer-meta below already draws one, so a
       border here produced two faded lines bracketing the notice. The single
       divider belongs to the metadata block, not to this. */
    margin: var(--rcs-space-6) 0 var(--rcs-space-6);
    font-family: var(--rcs-font-brand);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--rcs-ink-faded);
}

.rcs-single__complimentary a {
    color: var(--rcs-cobalt-accent);
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rcs-single__complimentary a:hover,
.rcs-single__complimentary a:focus {
    color: var(--rcs-gold-dk);
}

/* ── Advisory disclaimer ──────────────────────────────────────────────────
   "This is not intended to be advice…" notice at the foot of a post.
   Automatic whenever the editor checks "Free Post" — not a separate
   toggle (briefly was one, 5.03.81 → 5.03.82; folded in per Rodrigo's
   request). Rendered by rcs_advisory_disclaimer_notice() in inc/roles.php.

   Styled to match the manually-typed version Rodrigo published on the
   Sept 25 2026 post BEFORE this checkbox existed (screenshot reviewed same
   day): same size, weight and ink as the article body, italic, reading as
   the piece's own closing line rather than a small-print footnote bolted
   on after it. Deliberately NOT the smaller/faded treatment
   .rcs-single__complimentary uses — that one is a marketing postscript
   about a different subscription tier; this one is the actual legal
   disclosure and should look like a natural part of the article, not an
   afterthought a reader might skim past.

   NO border-top of its own, same reasoning as .rcs-single__complimentary
   above: .rcs-single__footer-meta already draws one immediately below
   whichever of these notices renders last, so a second border here would
   double the line rather than add a second real divider. */
.rcs-single__disclaimer {
    margin: 0 0 var(--rcs-space-6);
    font-family: var(--rcs-font-brand);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--rcs-ink);
}

.rcs-single__disclaimer a {
    color: var(--rcs-cobalt-accent);
    font-weight: 600;
    text-decoration: none;
}

.rcs-single__disclaimer a:hover,
.rcs-single__disclaimer a:focus {
    color: var(--rcs-red);
    text-decoration: underline;
}

/* ── Anchor offset for the account tier cards ─────────────────────────────
   .rcs-header is position:sticky, top:0, so following #rcs-tier-markets-heading
   scrolls the heading flush to y=0 — directly underneath the header, where it
   is invisible. Same fault fixed on /legal, same fix.

   A generous fixed value rather than the measured --rcs-anchor-offset: that
   variable is published by rcs-legal-page.js, which loads only on /legal. A
   second measuring script for one anchor is not worth the weight, and being a
   little low on this one heading costs nothing. */
#rcs-tier-markets-heading,
#rcs-tier-macro-heading {
    scroll-margin-top: 8rem;
}

@media (max-width: 950px), (max-width: 1150px) and (max-height: 650px) {

    #rcs-tier-markets-heading,
    #rcs-tier-macro-heading {
        scroll-margin-top: 6rem;
    }
}