/* ==========================================================================
   Risingline — rl-site.css
   Site-specific overrides layered on top of rl-framework.css + rl-blueprint.css.
   Kept separate so the framework files stay a clean, swappable baseline.
   Created: 2026-07-13
   ========================================================================== */


/* ==========================================================================
   1. Navbar refinements
   ========================================================================== */

.navbar-brand img {
  height: 64px;
  width: auto;
}

/* Nav link + CTA vertical rhythm against the thin blueprint header border */
/* Light drop shadow once the page is scrolled (class toggled in rl-site.js) */
.site-header {
  transition: box-shadow 0.25s ease;
}

/* body.rl-blueprint .site-header sets box-shadow:none at (0,2,1) —
   the blueprint variant below outranks it, same trap as the footer. */
.site-header.is-scrolled,
body.rl-blueprint .site-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(26, 35, 50, 0.08);
}

.site-header .navbar {
  padding-top: 1.05rem;    /* 0.85rem + ~3px (2026-07-27) */
  padding-bottom: 1.05rem;
}


/* ==========================================================================
   1b. Hero rotating headline (accessible)
   The last word cross-fades through variants. Screen readers get one stable
   sentence (.visually-hidden); the animated words are aria-hidden. inline-grid
   stacks the variants so the widest one reserves the space — no layout shift.
   Honors reduced motion; a pause/resume control satisfies WCAG 2.2 SC 2.2.2.
   ========================================================================== */

.rl-rotate {
  display: inline-grid;
}

.rl-rotate-word {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* Composite the fade on its own layer so the every-few-seconds word swap
     doesn't repaint large text on the main thread (which hitches the ribbon). */
  will-change: opacity;
  transform: translateZ(0);
}

.rl-rotate-word.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rl-rotate-word { transition: none; }
}

/* Discreet pause/resume control (WCAG 2.2 SC 2.2.2; 30px ≥ 24px target). */
.rl-rotate-toggle {
  margin-top: 1.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--bp-line, rgba(0, 0, 0, 0.15));
  background: transparent;
  color: var(--rl-color-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
}

.rl-rotate-toggle:hover {
  color: var(--rl-color-text);
  border-color: rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   2. Hero — supporting blueprint graphic (right column)
   The hero grid comes from rl-blueprint.css; this styles the wireframe card
   that sits in the right cell as the "supporting visual".
   ========================================================================== */

/* Blank band between the header and the hero (blueprint default is
   3rem / 5rem at md+; tuned by eye 2026-07-24). Front page only —
   .bp-hero exists nowhere else. */
.bp-hero { margin-top: 1.5rem; }

@media (min-width: 768px) {
  .bp-hero { margin-top: 4rem; }
}

.rl-hero-figure {
  border: 1px solid var(--bp-line, rgba(0,0,0,0.08));
  border-radius: var(--rl-radius);
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 28px);
  /* Vertical padding stays light: the first/last rows carry their own
     0.6rem, so the edge gaps match the inter-row rhythm. */
  padding: 0.5rem 1.5rem;
  margin-top: 1.75rem;
}

@media (min-width: 992px) {
  .rl-hero-figure { margin-top: 0; }

  /* Variant: column also holds the eyebrow label, so offset the card by the
     label's height to align its top border with the H2 text (eye-tuned). */
  .rl-figure-h2align { margin-top: 1.8rem; }
}

.rl-hero-figure-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.rl-hero-figure-row + .rl-hero-figure-row {
  border-top: 1px solid rgba(0,0,0,0.06);
}

.rl-hero-figure-row i {
  color: var(--rl-color-primary);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.rl-hero-figure-row span {
  font-size: 0.95rem;
  color: var(--rl-color-text);
  font-weight: 500;
}

/* Two-column variant (home jobs card): 12 items as 6 balanced rows.
   Hairlines move to per-cell border-top, hidden on the first grid row. */
.rl-figure-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.75rem;
}

.rl-figure-2col .rl-hero-figure-row + .rl-hero-figure-row { border-top: 0; }

.rl-figure-2col .rl-hero-figure-row { border-top: 1px solid rgba(0, 0, 0, 0.06); }

.rl-figure-2col .rl-hero-figure-row:nth-child(-n+2) { border-top: 0; }

@media (max-width: 575.98px) {
  .rl-figure-2col { grid-template-columns: 1fr; }
  .rl-figure-2col .rl-hero-figure-row:nth-child(2) { border-top: 1px solid rgba(0, 0, 0, 0.06); }
}

/* Registration/crop tick in the corner — echoes the blueprint marks */
.rl-hero-figure-cap {
  font-family: var(--rl-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-color-primary);   /* match the eyebrow labels */
  margin: 0 0 1rem;
}


/* ==========================================================================
   2b. "The stack we build on" — logo carousel ribbon (Laravel-style)
   Fixed left label cell (with a divider to the left of its text), then an
   auto-scrolling marquee of boxed color logos that runs full-bleed off the
   right edge. Motion honors prefers-reduced-motion and has a visible
   pause/resume control (WCAG 2.2 SC 2.2.2). Also pauses on hover/focus.
   ========================================================================== */

/* Band spans the full width of <main>; top/bottom borders run edge to edge.
   No background, so the blueprint hatched gutter shows through on the left
   (same subtle grey "border" that runs down the rest of the page). */
.rl-logo-strip {
  border-top: 1px solid var(--bp-line, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--bp-line, rgba(0, 0, 0, 0.08));
}

/* Content starts at the centered container's left edge (aligned with the hero
   and section content); empty band bleeds off to the left only. */
.rl-logo-strip-inner {
  display: flex;
  align-items: stretch;
  position: relative;
  padding-left: max(var(--rl-container-padding),
                    calc(50vw - var(--bp-content, 1320px) / 2 + var(--rl-container-padding)));
}

.rl-logo-cell {
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  border-left: 1px solid var(--bp-line, rgba(0, 0, 0, 0.08));
}

.rl-logo-cell img {
  height: 48px;                        /* readable size, full brand color */
  width: auto;
  max-width: 100%;
}

/* The OpenAI lockup's artwork fills its viewBox edge to edge, so the shared
   48px renders optically larger than its neighbors; size it to match Claude. */
.rl-logo-cell img[src*="openai"] {
  height: 30px;
}

/* Fixed left label cell. Text left-aligns with the hero/section content edge
   (no left padding); the blueprint gutter to its left is the "border"
   decoration. A right divider separates it from the scrolling logos. */
.rl-logo-cell-label {
  min-width: 250px;
  justify-content: flex-start;
  padding-left: 0;
  border-left: none;
  border-right: 1px solid var(--bp-line, rgba(0, 0, 0, 0.08));
}

.rl-logo-cell-label p {
  font-family: var(--rl-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--rl-color-text);
  margin: 0;
}

/* Scrolling area — clips the moving track. Solid white background so it
   covers the RIGHT blueprint gutter (we only want the gutter on the left,
   in the transparent band beside the label). */
.rl-logo-marquee {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* Soft fade at the right edge where logos enter (over the white bg). */
.rl-logo-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 2;
}

/* Track holds two identical logo sets; a pure-CSS compositor animation moves
   it one set-width (-50%) for a seamless right-to-left loop. */
.rl-logo-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: rl-logo-scroll 60s linear infinite;
  will-change: transform;
}

@keyframes rl-logo-scroll {
  from { transform: translate3d(0, 0, 0); }        /* logos flow right-to-left, */
  to   { transform: translate3d(-50%, 0, 0); }     /* toward the message on the left */
}

/* Pause: explicit toggle (WCAG 2.2 SC 2.2.2), plus hover/focus. */
.rl-logo-strip.is-paused .rl-logo-track,
.rl-logo-marquee:hover .rl-logo-track,
.rl-logo-marquee:focus-within .rl-logo-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rl-logo-track { animation: none; }
}

/* Inconspicuous pause/resume control (WCAG 2.2 SC 2.2.2; 34px ≥ 24px target). */
.rl-logo-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bp-line, rgba(0, 0, 0, 0.12));
  color: var(--rl-color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  font-size: 0.9rem;
}

.rl-logo-toggle:hover {
  color: var(--rl-color-text);
}


/* ==========================================================================
   3. "What stops being your problem" — feature grid, left-aligned
   ========================================================================== */

.rl-problem-item {
  height: 100%;
}

.rl-problem-item .rl-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--rl-radius-sm);
  font-size: 1.75rem;
  margin: 0 0 0.875rem;   /* 4px + ~10px, eye-tuned 2026-07-24 */
}

.rl-problem-item h3 {
  font-size: var(--rl-h4);
  margin: 0 0 0.4rem;
}

.rl-problem-item p {
  color: var(--rl-color-text-light);
  font-size: 0.975rem;
  line-height: 1.6;
  margin: 0;
}


/* --------------------------------------------------------------------------
   Buttons: one standard sitewide (owner directive 2026-07-24) — the
   Contact-button blue (--rl-color-cta) with the hero's pill radius.
   Overrides the blueprint hero's dark-pill treatment and the framework's
   white dark-band variant so every button matches.
   -------------------------------------------------------------------------- */
.rl-btn,
.rl-btn-outline,
.rl-btn-light,
.rl-btn-outline-light {
  border-radius: 999px;
}

.bp-hero-buttons .rl-btn {
  background-color: var(--rl-color-cta);
  border-color: var(--rl-color-cta);
}

.bp-hero-buttons .rl-btn:hover {
  background-color: var(--rl-color-cta-hover);
  border-color: var(--rl-color-cta-hover);
}

.bp-hero-buttons .rl-btn-outline {
  border-color: var(--rl-color-cta);
  color: var(--rl-color-cta);
}

.bp-hero-buttons .rl-btn-outline:hover {
  background-color: var(--rl-color-cta);
  border-color: var(--rl-color-cta);
  color: var(--rl-color-white);
}

/* Dark CTA bands: same blue button as everywhere else */
.rl-btn-light {
  background-color: var(--rl-color-cta);
  border-color: var(--rl-color-cta);
  color: var(--rl-color-white);
}

.rl-btn-light:hover {
  background-color: var(--rl-color-cta-hover);
  border-color: var(--rl-color-cta-hover);
  color: var(--rl-color-white);
}


/* Eyebrow labels: pull the following heading tight (framework h2 carries a
   2rem top margin that otherwise wins the collapse — 32px of dead air). */
.rl-section-label + h1,
.rl-section-label + h2,
.rl-section-label + h3 {
  margin-top: 0;
}

/* Full-width lead prose flowed as two balanced columns (desktop only) */
@media (min-width: 992px) {
  .rl-lead-cols {
    column-count: 2;
    column-gap: 3rem;
  }
}


/* ==========================================================================
   4. Check-bullet lists (Laravel-style)
   ========================================================================== */

.rl-checks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.rl-checks li {
  position: relative;
  padding: 0.35rem 0 0.35rem 2rem;
  color: var(--rl-color-text);
}

.rl-checks li::before {
  content: "\f633"; /* bootstrap-icons check-lg */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0.35rem;
  color: var(--rl-color-primary);
  font-weight: 700;
}


/* ==========================================================================
   5. Ghost "explore" link
   ========================================================================== */

.rl-explore {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  color: var(--rl-color-primary);
}

.rl-explore i { transition: transform 0.2s ease; }
.rl-explore:hover i { transform: translateX(3px); }


/* ==========================================================================
   6. "How it works" — numbered steps
   ========================================================================== */

.rl-step-num {
  font-family: var(--rl-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--rl-color-primary);
  display: block;
  margin-bottom: 0.5rem;
}

.rl-step h3 {
  font-size: var(--rl-h4);
  margin: 0 0 0.4rem;
}

.rl-step p {
  color: var(--rl-color-text-light);
  margin: 0;
}

/* "You never do any of this" callout */
.rl-never {
  border: 1px solid var(--rl-color-border);
  border-radius: var(--rl-radius);
  padding: 1.75rem 2rem;
  background: var(--rl-color-light);
}

.rl-never h3 {
  font-size: var(--rl-h4);
  margin: 0 0 1rem;
}

.rl-never ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem 2rem;
}

@media (min-width: 576px) {
  .rl-never ul { grid-template-columns: 1fr 1fr; }
}

.rl-never li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--rl-color-text-light);
}

.rl-never li::before {
  content: "\f659"; /* bootstrap-icons x-lg */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: #9aa4b2;
}


/* ==========================================================================
   7. Testimonial band (curated subset, one dark contrast card)
   ========================================================================== */

.rl-quote {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rl-quote blockquote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--rl-color-text);
  margin: 0 0 1.25rem;
  flex-grow: 1;
}

.rl-quote figcaption {
  font-size: 0.9rem;
  color: var(--rl-color-text-light);
}

.rl-quote figcaption strong {
  color: var(--rl-color-text);
  display: block;
  font-weight: 600;
}

/* Testimonial wall (client-testimonials page): CSS-column masonry so
   quotes of very different lengths pack cleanly. */
.rl-quote-wall {
  column-count: 1;
  column-gap: 1.5rem;
}

@media (min-width: 768px) {
  .rl-quote-wall { column-count: 2; }
}

@media (min-width: 992px) {
  .rl-quote-wall { column-count: 3; }
}

.rl-quote-wall .rl-quote {
  display: block;          /* release the equal-height flex used in band rows */
  height: auto;
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

.rl-quote blockquote p { margin: 0 0 0.75rem; }
.rl-quote blockquote p:last-child { margin-bottom: 0; }

/* Dark contrast card */
.rl-quote-dark {
  background: var(--rl-color-dark);
  border-color: var(--rl-color-dark);
}

.rl-quote-dark blockquote { color: #fff; }
.rl-quote-dark figcaption { color: rgba(255,255,255,0.7); }
.rl-quote-dark figcaption strong { color: #fff; }


/* ==========================================================================
   8. Footer (dark rl-footer-columns)
   ========================================================================== */

/* Restore the dark footer background — body.rl-blueprint .site-footer forces
   #fff (specificity 0,2,1), which would otherwise leave white text on white.
   This selector (0,3,1) wins. */
body.rl-blueprint .site-footer.rl-footer-columns,
.site-footer.rl-footer-columns {
  background: var(--rl-color-dark);
  /* Extra bottom padding keeps the small print clear of the fixed
     Enzuzo cookie button (bottom-left, ~76px zone). */
  padding: 3.5rem 0 5.5rem;
}

.rl-footer-logo {
  /* Explicit CSS height — the framework's global `img { height: auto }`
     reset overrides the HTML height attribute, so it must be set here. */
  height: 64px;   /* matches the header logo */
  width: auto;
  /* white-out the dark-navy logo for the dark footer */
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 1rem;
}

.rl-footer-brand p {
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  max-width: 22rem;
  margin: 0;
}

.rl-footer-heading {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

.rl-footer-legal,
.rl-footer-credit {
  margin: 0;
  color: rgba(255,255,255,0.6);
}

.rl-footer-credit {
  font-size: 0.8125rem;
}

.rl-footer-bottom .site-version {
  font-family: var(--rl-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  margin-left: 0.5rem;
}

/* Combined © + trademark small print — full fluid width, centered
   (owner call 2026-07-27); version stamp wraps to its own lower-left row. */
.rl-footer-legal {
  font-size: 0.8125rem;
  line-height: 1.6;
  width: 100%;
  text-align: center;
}


/* ==========================================================================
   9. Back-to-top (button reset — framework markup is a <button>)
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--rl-color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  font-size: 1.25rem;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover { background: var(--rl-color-cta-hover); }


/* ==========================================================================
   9b. Globe band (index-test experiment) — 500px canvas stage with dotted
   edge fades; component mounts absolutely inside.
   ========================================================================== */

.rl-globe-band {
  position: relative;
  height: 400px;   /* matches the reduced-height component (2026-07-27) */
  background: #fff;
}

.rl-globe-band.rl-globe-reduced { display: none; }

.rl-globe-mount,
.rl-globe-mount globe-hero {
  position: absolute;
  inset: 0;
  display: block;
}

.rl-globe-dots {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 240px;
  opacity: 0.5;
  background-image: radial-gradient(rgba(28, 40, 54, 0.35) 1px, transparent 1.3px);
  background-size: 14px 14px;
  pointer-events: none;
}

.rl-globe-dots-l {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent);
  mask-image: linear-gradient(to right, #000 30%, transparent);
}

.rl-globe-dots-r {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
  mask-image: linear-gradient(to left, #000 30%, transparent);
}

/* Pause control sits bottom-right (base styles from .rl-logo-toggle) */
.rl-globe-toggle {
  top: auto;
  bottom: 14px;
  transform: none;
}

@media (max-width: 767.98px) {
  .rl-globe-band { height: 360px; }
  .rl-globe-dots { display: none; }
}

/* Split variant (index-test2): globe rides the right column of a fluid
   two-col row; only the right dot fade applies. Solid white background
   covers the blueprint gutter strips; full-width rule closes the band. */
.rl-globe-white {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--bp-line, rgba(0, 0, 0, 0.08));
  /* The section itself carries no vertical padding: the text column brings
     its own symmetric padding, and the globe column stretches border to
     border. Even by construction. */
  padding-top: 0;
  padding-bottom: 0;
}

/* Text column: same vertical rhythm as a standard section; sits above the
   left dot flourish so the copy stays clean. */
.rl-globe-copy {
  position: relative;
  z-index: 2;
  padding-top: var(--rl-section-padding);
  padding-bottom: var(--rl-section-padding);
}

/* Desktop: neutralize the row's vertical gutter outright so the columns
   sit exactly at the section's top edge (utility gy-lg-0 loses the
   cascade here; set it explicitly). */
@media (min-width: 992px) {
  .rl-globe-white .row {
    --bs-gutter-y: 0;
    margin-top: 0;
  }

  .rl-globe-white .row > * {
    margin-top: 0;
  }

  /* The globe's "artboard": standard section padding above the canvas so
     the drawing starts on the same rhythm line as neighboring sections,
     while the canvas itself still runs to the bottom border. */
  .rl-globe-white .rl-globe-stage {
    padding-top: var(--rl-section-padding);
  }
}

/* Section-level dot fade spans the full container height, over the band */
.rl-globe-white > .rl-globe-dots {
  z-index: 1;
}

/* Globe fills the row height (text column drives it), never under 400px;
   flush to the section's top and bottom edges at desktop. */
.rl-globe-band-split {
  height: 100%;
  min-height: 400px;
}

@media (max-width: 991.98px) {
  .rl-globe-band-split { height: 360px; min-height: 0; }
}

/* ==========================================================================
   Resources: article share row, sidebar search, subscribe (2026-08-06)
   ========================================================================== */

.rl-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rl-color-border);
}

.rl-share-label {
  font-family: var(--rl-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rl-color-text-light);
  margin-right: 2px;
}

.rl-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rl-color-primary);
  border: none;
  padding: 0;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}

.rl-share-btn:hover,
.rl-share-btn:focus { opacity: 0.85; color: #fff; }

/* Post-body link styling must not tint the glyphs */
a.rl-share-btn,
a.rl-share-btn:visited,
a.rl-share-btn:hover,
a.rl-share-btn:focus { color: #fff; }

.rl-share-btn svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.rl-share--fb { background: #1877f2; }
.rl-share--x { background: #000; }
.rl-share--li { background: #0A66C2; }

/* The device share sheet is a touch idiom — hide it where a mouse rules */
@media (hover: hover) and (pointer: fine) {
  .rl-share-native { display: none !important; }
}
.rl-share-row [hidden] { display: none !important; }

.rl-share-status {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--rl-color-text-light);
}

/* Article legal notice: collapsed one-line disclosure (owner 2026-08-06);
   full canonical text ships in the page, expands on demand. */
.rl-article-notice {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--rl-color-text-light);
}

.rl-article-notice summary {
  cursor: pointer;
  width: fit-content;
}

.rl-article-notice summary:hover { color: var(--rl-color-text); }

.rl-article-notice p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0.6rem 0 0;
}

/* Sidebar blog search (hands off to the modal, scoped to /resources/) */
.rl-res-search { margin-bottom: 1.75rem; }

.rl-res-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--rl-color-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: #fff;
}

.rl-res-search-box:focus-within { border-color: var(--rl-color-primary); }
.rl-res-search-box i { color: var(--rl-color-text-light); font-size: 0.9rem; }

.rl-res-search-box input {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-family: var(--rl-font-body);
  background: transparent;
  color: var(--rl-color-text);
}

/* Sidebar subscribe component (delivery backend TBD) */
.rl-res-subscribe {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rl-color-border);
}

.rl-res-subscribe-note {
  font-size: 0.9rem;
  color: var(--rl-color-text-light);
  margin: 0.25rem 0 0.9rem;
}

.rl-subscribe-form input[type="email"] {
  width: 100%;
  border: 1px solid var(--rl-color-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-family: var(--rl-font-body);
  margin-bottom: 0.6rem;
}

.rl-subscribe-status {
  font-size: 0.85rem;
  color: var(--rl-color-text-light);
  margin: 0.5rem 0 0;
  min-height: 1em;
}

/* Inverted gutter flourish (owner 2026-08-06): the blueprint hatching,
   drawn in WHITE inside a section's own band (body-level gutters sit
   behind section backgrounds, so tinted sections cover them). Geometry
   mirrors body.rl-blueprint::before/::after in rl-blueprint.css. */
.rl-gutters-invert { position: relative; }
.rl-gutters-invert > .container { position: relative; z-index: 1; }

.rl-gutters-invert::before,
.rl-gutters-invert::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--bp-gutter, 40px);
  background-image: repeating-linear-gradient(315deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  pointer-events: none;
}

.rl-gutters-invert::before { right: calc(50% + var(--bp-content, 1320px) / 2); }
.rl-gutters-invert::after  { left: calc(50% + var(--bp-content, 1320px) / 2); }

@media (max-width: 1480px) {
  .rl-gutters-invert::before,
  .rl-gutters-invert::after { display: none; }
}

/* ==========================================================================
   Site search (Cloudflare-style modal; trigger sits right of Contact)
   ========================================================================== */

.rl-search-open {
  width: 40px;
  height: 40px;
  margin-left: 0.75rem;
  border: 1px solid var(--rl-color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--rl-color-text);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rl-search-open:hover { background: #f4f6f8; border-color: rgba(0, 0, 0, 0.25); }

html.rl-search-lock { overflow: hidden; }

.rl-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 1rem 2rem;
  background: rgba(20, 26, 34, 0.35);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.rl-search-overlay.is-open { display: flex; }

.rl-search-panel {
  width: min(760px, 100%);
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.094);
  box-shadow: 0 24px 60px rgba(15, 22, 33, 0.22), 0 4px 14px rgba(15, 22, 33, 0.12);
  overflow: hidden;
}

.rl-search-inputrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.35rem;
  border-bottom: 1px solid var(--rl-color-border);
}

.rl-search-inputrow > i { color: var(--rl-color-text-light); font-size: 1.1rem; }

.rl-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 1.25rem;
  font-family: var(--rl-font-body);
  color: var(--rl-color-text);
  background: transparent;
}

.rl-search-input::placeholder { color: var(--rl-color-text-light); opacity: 0.75; }

.rl-search-body { min-height: 240px; max-height: 52vh; overflow-y: auto; }

.rl-search-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--rl-color-text-light);
}

.rl-search-empty > i { font-size: 2.4rem; opacity: 0.45; }
.rl-search-empty > p { margin: 0; font-size: 0.95rem; }

.rl-search-results { list-style: none; margin: 0; padding: 0.5rem; }

.rl-search-results a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--rl-color-text);
}

.rl-search-results li.is-active a { background: #f2f5f9; }

.rl-search-rt { display: block; font-weight: 600; font-size: 1rem; }
.rl-search-ru {
  display: block;
  font-family: var(--rl-font-mono);
  font-size: 0.72rem;
  color: var(--rl-color-text-light);
  margin-top: 0.1rem;
}
.rl-search-rs { display: block; font-size: 0.85rem; color: var(--rl-color-text-light); margin-top: 0.25rem; }
.rl-search-results mark, .rl-search-rt mark { background: #fff3bf; padding: 0 0.05em; }

.rl-search-foot {
  display: flex;
  gap: 1.25rem;
  padding: 0.65rem 1.35rem;
  border-top: 1px solid var(--rl-color-border);
  font-size: 0.78rem;
  color: var(--rl-color-text-light);
}

.rl-search-foot-brand {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}

/* Explicit size: the framework's img { height: auto } reset overrides the
   height attribute and would balloon the SVG to the flex cell's width. */
.rl-search-foot-brand img { display: block; height: 14px; width: auto; }

.rl-search-foot kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.05em 0.35em;
  margin-right: 0.3em;
  border: 1px solid var(--rl-color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f8f9fa;
  color: var(--rl-color-text);
  font-family: var(--rl-font-mono);
  font-size: 0.9em;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .rl-search-overlay.is-open .rl-search-panel { animation: rlSearchIn 0.16s ease-out; }
  @keyframes rlSearchIn {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

/* Hero right-column lead line (owner 2026-08-05): visual heading
   treatment while staying a <p> semantically (tagline pattern; a real
   h2 here would near-duplicate the Enterprise-Class section heading). */
.bp-hero-sub-lead {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rl-color-text);
}

/* Stacked band (index / index-test): transparent background so the
   blueprint hatched gutter strips stay visible through the section
   (owner call 2026-08-03; the split variant keeps its sealed white).
   Border sits directly at the canvas bottom (owner 2026-08-05: no gap
   under the wireframe); card containment is handled by the component's
   sink guard, tightened to match. */
.rl-globe-band:not(.rl-globe-band-split) {
  background: transparent;
  border-bottom: 1px solid var(--bp-line, rgba(0, 0, 0, 0.08));
}


/* ==========================================================================
   10. Independent-audit footer note (HM-7)
   ========================================================================== */

.rl-audit-note {
  font-size: 0.95rem;
  color: var(--rl-color-text-light);
  text-align: center;
  margin: 0;
}

.rl-audit-note a { font-weight: 600; }


/* ==========================================================================
   11. Top strip — dark brand bar with the phone number (right-aligned)
   ========================================================================== */

.rl-topbar {
  background: var(--rl-color-dark);
}

.rl-topbar .container {
  display: flex;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
}

.rl-topbar-phone {
  /* Vertical padding lives on the link so the bar stays slim while the
     tap target holds the 24px accessibility minimum. */
  display: inline-block;
  padding: 0.25rem 0;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.rl-topbar-phone:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}


/* ==========================================================================
   12. Main nav — centered items + mega panels
   Cloudflare: centered item cluster (1fr/auto/1fr grid), items are real
   links, stacked double-chevron glyph at 30% opacity 6px from the label,
   sliding hover pill behind the items.
   Laravel: hover/focus opens a rounded panel card under the bar; items are
   bold label + one-line grey descriptor rows.
   Mobile: Bootstrap collapse; per-section accordion via .rl-mega-m-toggle.
   Behavior lives in rl-site.js.
   ========================================================================== */

/* --- Bar layout: logo | centered cluster | Contact (true centering) --- */
@media (min-width: 992px) {
  .rl-navgrid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  /* Let the collapse's children (ul + CTA) participate in the grid */
  .rl-navgrid .navbar-collapse { display: contents !important; }

  .rl-nav-center { justify-self: center; }
  .rl-nav-right  { justify-self: end; display: flex; align-items: center; }

  /* Panels anchor to the bar, not the item — they can never clip */
  .site-header .navbar { position: relative; }
}

/* --- Top-level item (Cloudflare pill link) --- */
.rl-nav-center { position: relative; }

.rl-nav-center .nav-link {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;      /* py-1.5 px-3 */
  border-radius: var(--rl-radius-sm);
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: opacity 0.2s ease-out;
}

.rl-nav-center .nav-link:hover { opacity: 0.8; }

/* Chevron: stacked double chevron, 16px, 30% opacity, 6px from the label */
.rl-chev {
  width: 16px;
  height: 16px;
  margin-left: 0.375rem;          /* ml-1.5 */
  margin-right: -3px;
  opacity: 0.3;
  flex-shrink: 0;
  transition: opacity 0.2s ease-out;
}

/* --- Sliding hover pill (Cloudflare's gliding highlight) --- */
.rl-nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border: 1px solid var(--rl-color-border);
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--rl-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease-out, width 0.3s ease-out, opacity 0.2s ease-out;
  z-index: 0;
}

.rl-nav-pill.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rl-nav-pill { transition: opacity 0.2s ease-out; }
}

/* --- Mega panel (Laravel wide card, measured from laravel.com live:
   12px radius, 1px hairline border, layered shadow, ~13px under the bar,
   items = icon tile + 16px/500 label + 14px grey one-liner) ---
   Positioning context is .rl-nav-center (the centered cluster), so every
   panel opens centered under the cluster like Laravel's shared viewport;
   the top offset clears the navbar's bottom padding so the card sits just
   under the bar line. */
.rl-mega-panel {
  position: absolute;
  top: calc(100% + 1.1rem);   /* tracks the navbar's bottom padding */
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(1080px, calc(100vw - 3rem));
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.094);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s;
  z-index: 1030;
}

.rl-nav-mega.is-open > .rl-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rl-mega-panel { transition: none; }
}

/* Items lay out in three columns (Management wraps to a second row) */
.rl-mega-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem 1.25rem;
}

/* Four-up variant: panels whose item count fits one row of four (About Us) */
.rl-mega-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.rl-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--rl-radius-sm);
  text-decoration: none;
  height: 100%;
}

.rl-mega-item:hover,
.rl-mega-item:focus-visible {
  background: var(--rl-color-light, #f7f8fa);
}

.rl-mega-tile {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(43, 94, 167, 0.08);
  color: var(--rl-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.rl-mega-text { display: block; }

.rl-mega-label {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: var(--rl-color-text);
}

.rl-mega-desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--rl-color-text-light);
  margin-top: 1px;
}

/* Development panel framing line (establishes custom-built before any click) */
.rl-mega-frame {
  grid-column: 1 / -1;
  padding: 0.1rem 0.65rem 0.65rem;
  margin: 0 0 0.35rem;
  border-bottom: 1px solid var(--rl-color-border);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rl-color-text-light);
}

/* --- Mobile accordion (<992px) --- */
@media (max-width: 991.98px) {
  .rl-nav-mega {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .rl-nav-mega > .nav-link { flex: 1 1 auto; }

  .rl-mega-m-toggle {
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rl-color-text);
    cursor: pointer;
    border-radius: var(--rl-radius-sm);
  }

  .rl-mega-m-toggle .rl-chev {
    margin: 0;
    transition: transform 0.2s ease, opacity 0.2s ease-out;
  }

  .rl-mega-m-toggle[aria-expanded="true"] .rl-chev {
    transform: rotate(180deg);
    opacity: 0.7;
  }

  /* Panel becomes an in-flow accordion body: plain single-column list,
     no card chrome, no icon tiles */
  .rl-mega-panel {
    position: static;
    transform: none;
    width: auto;
    flex-basis: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0.5rem 1rem;
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .rl-nav-mega.is-open > .rl-mega-panel { display: block; transform: none; }

  .rl-mega-grid { display: block; }

  .rl-mega-tile { display: none; }

  .rl-mega-frame { padding-left: 0; }

  .rl-nav-pill { display: none; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .rl-mega-m-toggle .rl-chev { transition: opacity 0.2s ease-out; }
}

/* Comfortable landing for the panel's in-page anchor targets */
main [id] { scroll-margin-top: 1.5rem; }


/* ==========================================================================
   13. Legal pages (Client Services Agreement — verbatim document)
   ========================================================================== */

.rl-legal h1 { margin-bottom: 1.5rem; }

.rl-legal h2 { margin-top: 2.5rem; }

.rl-legal h3 {
  font-size: var(--rl-h4);
  margin-top: 2rem;
}

.rl-legal h4 {
  font-size: 1rem;
  margin-top: 1.25rem;
}

.rl-legal ol { padding-left: 1.5rem; }

.rl-legal blockquote {
  margin: 0.75rem 0 0.75rem 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--rl-color-border);
  color: var(--rl-color-text-light);
}

.rl-legal hr {
  margin: 2rem 0;
  border-color: var(--rl-color-border);
  opacity: 1;
}


/* ==========================================================================
   16. Blog cards (ported from rl-framework.css, framework section 33)
   ========================================================================== */



/* ==========================================================================
   33. Blog / News Cards

   Card patterns for news, updates, and blog listing pages.
   .rl-blog-card — image-top card
   .rl-blog-card-horizontal — image-left card
   .rl-blog-card-minimal — text-only, no image
   ========================================================================== */

.rl-blog-card {
  background: var(--rl-color-white);
  border: 1px solid var(--rl-color-border);
  border-radius: var(--rl-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rl-blog-card:hover {
  box-shadow: var(--rl-shadow);
}

.rl-blog-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.rl-blog-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rl-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--rl-color-text-light);
  margin-bottom: 0.75rem;
}

.rl-blog-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--rl-color-primary);
  color: var(--rl-color-white);
  border-radius: var(--rl-radius-sm);
}

.rl-blog-card h3 {
  font-size: var(--rl-h4);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.rl-blog-card h3 a {
  color: var(--rl-color-text);
  text-decoration: none;
}

.rl-blog-card h3 a:hover {
  color: var(--rl-color-primary);
}

.rl-blog-card p {
  color: var(--rl-color-text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
}

.rl-blog-read-more {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rl-color-primary);
  text-decoration: none;
  margin-top: auto;
}

.rl-blog-read-more:hover {
  text-decoration: underline;
}

/* Horizontal variant */
.rl-blog-card-horizontal {
  flex-direction: row;
}

.rl-blog-card-horizontal img {
  width: 280px;
  height: auto;
  min-height: 200px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .rl-blog-card-horizontal {
    flex-direction: column;
  }
  .rl-blog-card-horizontal img {
    width: 100%;
    height: 200px;
  }
}

/* Minimal text-only variant */
.rl-blog-card-minimal {
  border: none;
  border-bottom: 1px solid var(--rl-color-border);
  border-radius: 0;
  overflow: visible;
}

.rl-blog-card-minimal:hover {
  box-shadow: none;
}

.rl-blog-card-minimal .rl-blog-card-body {
  padding: 1rem 0;
}

/* ==========================================================================
   16b. Blog: listing + post styles (site-specific)
   ========================================================================== */

.rl-blog-cat {
  margin-top: 2.5rem;
}

.rl-blog-cat:first-child { margin-top: 0; }

.rl-blog-card-minimal { margin-right: 2rem; }

.rl-post-meta {
  font-family: var(--rl-font-mono);
  font-size: 0.8125rem;
  color: var(--rl-color-text-light);
  margin-bottom: 2rem;
}

.rl-post-body h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.rl-post-body h3 { margin-top: 2rem; margin-bottom: 0.5rem; }
.rl-post-body li { margin-bottom: 0.35rem; }
.rl-post-body img { max-width: 100%; height: auto; border-radius: var(--rl-radius-sm); }

/* ==========================================================================
   16c. Resources listing: featured article + topic sidebar
   Type scale (deliberate, page-wide):
     page H1        framework default
     featured title 1.75rem
     body h2        1.3125rem   (inside featured article)
     body h3        1.125rem
     body text      1rem
     column heads   1.0625rem   ("More guides", "Browse by topic")
     entry titles   1.25rem
     entry deks     0.9375rem
     sidebar links  0.875rem
     meta rows      0.8125rem
     topic labels   0.72rem mono caps
   ========================================================================== */

/* Hero: contained bottom rule closes the lead-in; listing sits close below */
.rl-res-hero .container {
  border-bottom: 1px solid var(--rl-color-border);
  padding-bottom: 2rem;
}

.rl-res-listing { padding-top: 2rem; }

.rl-res-featured {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rl-color-border);
  margin-bottom: 2.5rem;
}

.rl-res-featured > h2 {
  /* Ladder token, not a fixed px: the hard-coded 2rem predated the type
     retune and ended up SMALLER than the article-section h2s below it. */
  font-size: var(--rl-h2);
  line-height: 1.2;
  margin: 0.6rem 0 1.25rem;
}

/* Inline article headings: clear size CONTRAST against body, and PROXIMITY
   discipline — far from the block above (~3x), tight to their own content */
.rl-res-featured-body h2,
.rl-post-body h2 { font-size: var(--rl-h3); line-height: 1.25; margin: 2.5rem 0 0.75rem; }
.rl-res-featured-body h3,
.rl-post-body h3 { font-size: var(--rl-h4); line-height: 1.3;  margin: 2rem 0 0.5rem; }
.rl-res-featured-body p,
.rl-res-featured-body li { font-size: 1rem; line-height: 1.65; }
.rl-res-featured-body p  { margin: 0 0 1rem; }

.rl-blog-meta { font-size: 0.8125rem; }

/* Category label in article contexts: small mono in brand blue — reads as
   a category marker, matches the sidebar topic labels, no pill weight */
.rl-res-main .rl-blog-tag,
.rl-res-featured .rl-blog-tag,
.rl-res-entry .rl-blog-tag {
  background: none;
  color: var(--rl-color-primary);
  padding: 0;
  font-family: var(--rl-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.rl-res-subhead {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.rl-res-entry { padding: 1.25rem 0; }

.rl-res-entry + .rl-res-entry {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.rl-res-entry h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0.35rem 0;
}

.rl-res-entry p {
  margin: 0;
  color: var(--rl-color-text-light);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Topic sidebar */
/* Sticky (top offset clears the 109px sticky header) with a left divider rail.
   At lg the rail moves to a full-height line on the column, overshooting the
   section padding so it meets the hero rule above and the CTA band below;
   the sticky inner box slides along it. */
.rl-res-side {
  /* Sticky removed (owner, 2026-08-05): the pinned aside forced users to
     scroll the full article column before the rail's tail was reachable;
     it now scrolls with the page. */
  border-left: 1px solid var(--rl-color-border);
  padding-left: 1.5rem;
}

@media (min-width: 992px) {
  .rl-res-side { border-left: 0; }

  .rl-res-aside-col { position: relative; }

  .rl-res-aside-col::before {
    content: "";
    position: absolute;
    /* 12px centers the rail in the 54px corridor between main text and
       aside text: 27px each side, matching the 27px container insets. */
    left: 12px;
    top: -2rem;
    bottom: calc(-1 * var(--rl-section-padding));
    border-left: 1px solid var(--rl-color-border);
  }
}

.rl-res-side-title {
  font-size: 1.5rem; /* one-off exception (owner call 2026-07-28) */
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.rl-res-side-group { margin-bottom: 1.5rem; }

.rl-res-side-group h3 {
  font-family: var(--rl-font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-color-primary);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rl-color-border);
  margin-bottom: 0.6rem;
}


.rl-res-side-group ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.1rem;
}

.rl-res-side-group p,
.rl-res-side-group li {
  padding: 0 0 0.45rem;
  font-size: 0.875rem;
  line-height: 1.3;
}

.rl-res-side-group li::marker { color: var(--rl-color-primary); }

.rl-res-side-group a { color: var(--rl-color-text); }

/* Title links: nav-context links, not in-text links */
a.rl-title-link {
  color: var(--rl-color-dark);
  text-decoration: none;   /* Bootstrap reboot underlines all links by default */
}

a.rl-title-link:hover,
a.rl-title-link:focus-visible {
  color: var(--rl-color-primary);
  text-decoration: underline;
}


/* v3 additions (2026-07-28): low-emphasis engagement link under dark CTAs,
   and review markers for [PLACEHOLDER]/[CONFIRM] copy awaiting owner facts */
.rl-cta-dark .rl-cta-sublink { margin: 1rem 0 0; }

.rl-cta-dark .rl-cta-sublink a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rl-cta-dark .rl-cta-sublink a:hover,
.rl-cta-dark .rl-cta-sublink a:focus-visible { color: #fff; }

mark.rl-todo {
  background: #fff3bf;
  color: #4a3b00;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}


/* ==========================================================================
   v4 layout primitives (2026-07-28): inset card, pull quote, stat callout,
   strike-out exclusion list, cyber hero lockup
   ========================================================================== */
.rl-inset-card {
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid var(--rl-color-border);
  border-radius: var(--rl-radius);
  padding: 2.5rem 2.5rem;
  text-align: center;
}

.rl-pullquote {
  border-left: 4px solid var(--rl-color-cta);
  padding: 0.5rem 0 0.5rem 1.75rem;
  max-width: 52rem;
}

.rl-pullquote p {
  font-size: 1.375rem;
  line-height: 1.6;
}

.rl-stat-callout {
  font-family: var(--rl-font-heading);
  font-size: clamp(64px, 6vw + 24px, 112px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--rl-color-cta);
}

.rl-stat-attrib {
  font-size: 0.9375rem;
  color: var(--rl-color-text-light);
}

.rl-x-list { list-style: none; padding-left: 0; }

.rl-x-list li {
  padding: 0.4rem 0 0.4rem 2.1rem;
  position: relative;
}

.rl-x-list li::before {
  font-family: "bootstrap-icons";
  content: "\F62A"; /* bi-x-circle */
  position: absolute;
  left: 0;
  color: var(--rl-color-cta);
}

.rl-hiai {
  font-family: var(--rl-font-heading);
  font-size: clamp(40px, 4vw + 20px, 72px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.rl-hiai-sub {
  font-family: var(--rl-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-color-text-light);
  margin-bottom: 1.25rem;
}