/* ================================================================
   reaper-login.css — Donor showcase sections for reaper.html
   Dark theme, JetBrains Mono, red accent (#d93636)
   Scoped to: #rp-abyss, #rp-spider, #rp-services, #rp-contact, #rp-modal
   ================================================================ */

/* ── Base reset for new sections ────────────────────────────── */
#rp-abyss,
#rp-spider,
#rp-services,
#rp-contact,
#rp-modal,
#rp-abyss *,
#rp-spider *,
#rp-services *,
#rp-contact *,
#rp-modal * {
  box-sizing: border-box;
  text-transform: none;
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
}

/* ── Mouse glow overlay ─────────────────────────────────────── */
#rp-mouse-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    var(--glow-size, 600px) circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(120, 119, 198, var(--glow-opacity, 0.07)),
    transparent 60%
  );
}

/* ── Scroll reveal utility ───────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}
[data-reveal].rp-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-abyss-fragment] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out, filter 1.4s ease-out;
}
[data-abyss-fragment].rp-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Shared section patterns ─────────────────────────────────── */
.rp-section-divider {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39,39,42,0.5), transparent);
}

.rp-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.rp-label-pill {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(217, 54, 54, 0.7);
  text-transform: uppercase;
}
.rp-label-line-short {
  display: block;
  height: 1px;
  width: 2rem;
  background: linear-gradient(to right, transparent, rgba(217,54,54,0.4));
}
.rp-label-row .rp-label-line-short:last-child {
  background: linear-gradient(to left, transparent, rgba(217,54,54,0.4));
}

.rp-h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase !important;
  margin: 0;
  line-height: 1.08;
}

.rp-red       { color: #d93636; }
.rp-red-glow  { text-shadow: 0 0 10px rgba(220,38,38,0.6), 0 0 30px rgba(220,38,38,0.4); }

/* Spans inside display headings must inherit the uppercase transform */
.rp-h2 span,
.rp-contact-h2 span,
.rp-final-cta-h2 span {
  text-transform: inherit !important;
}

/* ── Abyss section ───────────────────────────────────────────── */
#rp-abyss {
  position: relative;
  background: #000;
  overflow: hidden;
}

.rp-abyss-top {
  height: 30vh;
  background: linear-gradient(to bottom, #030303, #000);
}

.rp-abyss-body {
  position: relative;
  min-height: 120vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rp-abyss-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 40%);
  mask-image: linear-gradient(to bottom, white 0%, transparent 40%);
}

.rp-abyss-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

.rp-abyss-thread {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
}
.rp-abyss-thread-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(63,63,70,0.6), rgba(217,54,54,0.15), transparent);
  -webkit-mask-image: linear-gradient(to bottom, white 10%, white 60%, transparent 90%);
  mask-image: linear-gradient(to bottom, white 10%, white 60%, transparent 90%);
}

.rp-abyss-fragments {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20vh;
}

.rp-abyss-frag {
  text-align: center;
}

.rp-frag-label {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

.rp-red-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(217, 54, 54, 0.7);
}

.rp-frag-body {
  text-align: center;
}
.rp-frag-line1 {
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}
.rp-frag-line2 {
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.68);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0.4rem 0 0;
}

.rp-frag-scanline {
  display: block;
  height: 1px;
  width: 100%;
  max-width: 20rem;
  background: linear-gradient(to right, transparent, rgba(217,54,54,0.3), transparent);
}

.rp-frag-reveal {
  font-size: clamp(0.9rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.25em;
  color: rgba(217, 54, 54, 0.85);
  text-transform: uppercase;
  margin: 0;
}

.rp-abyss-bottom {
  height: 15vh;
  background: linear-gradient(to bottom, transparent, #000);
}

/* ── Abyss SCROLL TO INVESTIGATE — tactical command cue ──────────────────
   Sits at the end of the abyss narrative so users understand the section
   is scroll-driven and the live investigation graph is next. Red bracketed
   box + slow downward chevron. No flashing, no pulse on the label. */
.rp-abyss-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1vh;
}
.rp-abyss-cta-box {
  position: relative;
  padding: 0.95rem 2.1rem;
  border: 1px solid rgba(217, 54, 54, 0.55);
  background: rgba(10, 3, 3, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 0 24px rgba(217, 54, 54, 0.18),
    inset 0 0 12px rgba(217, 54, 54, 0.05);
  animation: rp-abyss-cta-breathe 2.8s ease-in-out infinite;
}
.rp-abyss-cta-bracket {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid #ff2d2d;
  pointer-events: none;
}
.rp-abyss-cta-bracket.tl { top: -2px;    left: -2px;    border-width: 1.5px 0 0 1.5px; }
.rp-abyss-cta-bracket.tr { top: -2px;    right: -2px;   border-width: 1.5px 1.5px 0 0; }
.rp-abyss-cta-bracket.bl { bottom: -2px; left: -2px;    border-width: 0 0 1.5px 1.5px; }
.rp-abyss-cta-bracket.br { bottom: -2px; right: -2px;   border-width: 0 1.5px 1.5px 0; }
.rp-abyss-cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #ffdede;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(217, 54, 54, 0.55);
}
.rp-abyss-cta-arrow {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 1.5px solid #ff2d2d;
  border-bottom: 1.5px solid #ff2d2d;
  transform: rotate(45deg);
  opacity: 0.85;
  animation: rp-abyss-cta-drift 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  box-shadow: 2px 2px 10px rgba(217, 54, 54, 0.28);
}
@keyframes rp-abyss-cta-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(217, 54, 54, 0.18), inset 0 0 10px rgba(217, 54, 54, 0.04); }
  50%      { box-shadow: 0 0 34px rgba(217, 54, 54, 0.38), inset 0 0 16px rgba(217, 54, 54, 0.09); }
}
@keyframes rp-abyss-cta-drift {
  0%, 100% { transform: rotate(45deg) translate(0, 0);   opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-abyss-cta-box   { animation: none; }
  .rp-abyss-cta-arrow { animation: none; opacity: 1; }
}

/* ── Spider / Graph demo section ─────────────────────────────── */
#rp-spider {
  position: relative;
  background: #000;
  padding: 5rem 0 6rem;
  overflow: hidden;
}

.rp-spider-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(220,38,38,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.rp-spider-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.rp-spider-inner {
  position: relative;
  z-index: 1;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.rp-section-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
}

.rp-section-desc {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 0.9rem;
  color: #71717a;
  line-height: 1.7;
  text-transform: none;
}

/* Terminal frame */
.rp-terminal {
  position: relative;
  border: 1px solid rgba(39,39,42,0.5);
  background: #000;
  overflow: hidden;
}

.rp-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(217,54,54,0.3);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}
.rp-corner-tl { top: 0; left: 0;  border-width: 2px 0 0 2px; }
.rp-corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.rp-corner-bl { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.rp-corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.rp-term-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid rgba(39,39,42,0.5);
  background: rgba(9,9,11,0.8);
}
.rp-term-dotgroup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.rp-term-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.rp-term-dot-red    { background: rgba(239,68,68,0.8); }
.rp-term-dot-yellow { background: rgba(234,179,8,0.8); }
.rp-term-dot-green  { background: rgba(34,197,94,0.8); }
.rp-term-url {
  font-size: 12px;
  color: #52525b;
  margin-left: 0.75rem;
  display: none;
}
@media (min-width: 640px) { .rp-term-url { display: inline; } }

.rp-term-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rp-live-wrap {
  position: relative;
  width: 8px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-live-ring {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(74,222,128,0.75);
  animation: liveRing 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
.rp-live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
@keyframes liveRing {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.rp-term-live-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #52525b;
  text-transform: uppercase;
}

.rp-graph-viewport {
  height: 400px;
  background: #000;
  position: relative;
}
@media (min-width: 640px)  { .rp-graph-viewport { height: 500px; } }
@media (min-width: 768px)  { .rp-graph-viewport { height: 600px; } }

/* Loading placeholder for graph */
.rp-graph-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  color: rgba(217,54,54,0.5);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rp-graph-loading-bar {
  width: 120px;
  height: 1px;
  background: rgba(217,54,54,0.1);
  overflow: hidden;
}
.rp-graph-loading-fill {
  height: 100%;
  width: 30%;
  background: #d93636;
  animation: graphLoad 1.4s ease-in-out infinite;
}
@keyframes graphLoad {
  0%   { transform: translateX(-200%) scaleX(0.3); }
  50%  { transform: translateX(0%) scaleX(1); }
  100% { transform: translateX(200%) scaleX(0.3); }
}

/* Graph info overlay */
.rp-graph-info {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(39,39,42,0.7);
  padding: 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: none;
  max-width: 90%;
  overflow: hidden;
}
.rp-info-type {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #52525b;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rp-info-sep {
  color: #3f3f46;
  font-size: 10px;
}
.rp-info-value {
  font-size: 11px;
  color: #a1a1aa;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-term-botbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid rgba(39,39,42,0.5);
  background: rgba(9,9,11,0.8);
  font-size: 10px;
  color: #52525b;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rp-term-botbar-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rp-term-botbar-sep {
  width: 1px;
  height: 12px;
  background: #27272a;
}
.rp-term-botbar-sm-hide { display: none; }
@media (min-width: 640px) { .rp-term-botbar-sm-hide { display: inline; } }

/* Graph top accent line */
.rp-term-top-accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217,54,54,0.5), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Graph bottom glow */
.rp-graph-btm-glow {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 4rem;
  background: linear-gradient(to bottom, rgba(217,54,54,0.1), transparent);
  filter: blur(1.5rem);
  pointer-events: none;
}

.rp-graph-note {
  text-align: center;
  margin: 3rem auto 0;
  font-size: 13px;
  color: #52525b;
  max-width: 36rem;
  text-transform: none;
}
.rp-graph-note strong { color: #a1a1aa; }

/* ── Services / Pricing section ──────────────────────────────── */
#rp-services {
  position: relative;
  background: #000;
  padding: 6rem 0 8rem;
}

.rp-services-inner {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.rp-section-head--center {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 4rem;
}

.rp-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .rp-tier-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

/* Tier card */
.rp-tier {
  position: relative;
  border: 1px solid;
  transition: border-color 0.4s ease;
  overflow: hidden;
}

.rp-tier-blue   { border-color: rgba(59,130,246,0.15); }
.rp-tier-red    { border-color: rgba(239,68,68,0.3); }
.rp-tier-purple { border-color: rgba(168,85,247,0.15); }

@media (min-width: 768px) {
  .rp-tier-red { margin-top: -1rem; margin-bottom: -1rem; }
}

.rp-tier-blue:hover   { border-color: rgba(59,130,246,0.4); }
.rp-tier-red:hover    { border-color: rgba(239,68,68,0.5); }
.rp-tier-purple:hover { border-color: rgba(168,85,247,0.4); }

/* Top accent line */
.rp-tier-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
}
.rp-tier-top-line-blue   { background: linear-gradient(to right, transparent, rgba(59,130,246,0.3), transparent); }
.rp-tier-top-line-red    { background: linear-gradient(to right, transparent, rgba(239,68,68,0.8), transparent); }
.rp-tier-top-line-purple { background: linear-gradient(to right, transparent, rgba(168,85,247,0.3), transparent); }

/* Background gradient */
.rp-tier::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rp-tier-blue::before   { background: linear-gradient(to bottom, rgba(59,130,246,0.03), transparent); }
.rp-tier-red::before    { background: linear-gradient(to bottom, rgba(239,68,68,0.04), transparent); }
.rp-tier-purple::before { background: linear-gradient(to bottom, rgba(168,85,247,0.03), transparent); }

/* Bottom glow on hover */
.rp-tier-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  filter: blur(3rem);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.rp-tier:hover .rp-tier-glow { opacity: 1; }
.rp-tier-glow-blue   { background: rgba(59,130,246,0.2); }
.rp-tier-glow-red    { background: rgba(239,68,68,0.25); }
.rp-tier-glow-purple { background: rgba(168,85,247,0.2); }

/* Popular / Classified / Declassified badges
   Sit fully INSIDE the card top instead of at top:-14px (where the
   parent .rp-tier's `overflow: hidden` clipped the top half of the
   badge and left the user-reported chunk-above-card artifact). At
   top:0 + translateY(0) the badge reads as a flat label at the
   card's top edge — clean across all three cards. */
.rp-popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #d93636;
  color: #000;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  white-space: nowrap;
}

.rp-classified-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  background: rgba(39,39,42,0.8);
  border: 1px solid rgba(82,82,91,0.3);
  border-top: none;
  color: #71717a;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.rp-declassified-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(168,85,247,0.8);
  color: #000;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  white-space: nowrap;
}

/* Tier content area */
.rp-tier-content {
  position: relative;
  z-index: 1;
  padding: 1.75rem 2rem;
  transition: opacity 0.7s ease;
}
/* Cards with a top-edge badge (Enterprise = "Most Popular",
   Government = "Classified") need a taller top padding so the badge
   sits in its own band and the icon/category below isn't crowded
   underneath. Was previously achieved with badge top:-14px (which
   floated the badge OUTSIDE the card and got clipped by the
   .rp-tier's overflow:hidden, producing the user-reported artifact).
   Now badges are inside the card at top:0 and the content shifts
   down to clear them. */
.rp-tier-popular .rp-tier-content,
#rp-gov-card .rp-tier-content {
  padding-top: 2.6rem;
}
@media (min-width: 768px) {
  .rp-tier-red .rp-tier-content { padding-top: 3rem; padding-bottom: 2.5rem; }
}

.rp-tier-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  margin-bottom: 1.75rem;
}
.rp-tier-icon-blue   { color: #60a5fa; background: rgba(59,130,246,0.1);  border-color: rgba(59,130,246,0.2);  }
.rp-tier-icon-red    { color: #f87171; background: rgba(239,68,68,0.1);   border-color: rgba(239,68,68,0.2);   }
.rp-tier-icon-purple { color: #c084fc; background: rgba(168,85,247,0.1);  border-color: rgba(168,85,247,0.2);  }

.rp-tier-category {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.rp-tier-cat-blue   { color: #60a5fa; }
.rp-tier-cat-red    { color: #f87171; }
.rp-tier-cat-purple { color: #c084fc; }

.rp-tier-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase !important;
  color: #fff;
  margin: 0 0 0.75rem;
}
@media (min-width: 640px) { .rp-tier-title { font-size: 1.4rem; } }

.rp-tier-desc {
  font-size: 0.875rem;
  color: #71717a;
  line-height: 1.65;
  text-transform: none;
  margin: 0 0 2rem;
}

.rp-tier-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(39,39,42,0.8), rgba(63,63,70,0.4), rgba(39,39,42,0.8));
  margin-bottom: 1.75rem;
}

.rp-tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.rp-tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: #a1a1aa;
  text-transform: none;
  line-height: 1.5;
}
.rp-tier-features li strong {
  font-weight: 500;
}

.rp-check {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.rp-check-blue   { color: #60a5fa; }
.rp-check-red    { color: #f87171; }
.rp-check-purple { color: #c084fc; }

/* CTA buttons */
.rp-btn-tier {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.25s ease;
  background: transparent;
}
.rp-btn-blue {
  color: #60a5fa;
  border-color: rgba(59,130,246,0.15);
}
.rp-btn-blue:hover { background: rgba(59,130,246,0.1); }

.rp-btn-red-solid {
  color: #000;
  background: #d93636;
  border-color: #d93636;
}
.rp-btn-red-solid:hover { background: #b82a2a; border-color: #b82a2a; }

.rp-btn-purple {
  color: #c084fc;
  border-color: rgba(168,85,247,0.2);
}
.rp-btn-purple:hover { background: rgba(168,85,247,0.1); }

/* Gov overlay ── */
.rp-gov-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  transition: background 0.7s ease, backdrop-filter 0.7s ease;
}
.rp-gov-overlay.rp-gov-granted {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  pointer-events: none;
}

/* CRT scanlines texture */
.rp-gov-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0,
    transparent 50%,
    rgba(255,255,255,0.01) 50%,
    rgba(255,255,255,0.01) 100%
  );
  background-size: 100% 4px;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.rp-gov-overlay.rp-gov-granted .rp-gov-scanlines { opacity: 0; }

/* Scan bar animation */
.rp-gov-scanbar {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(168,85,247,0.6);
  box-shadow: 0 0 20px rgba(168,85,247,0.4);
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: top 80ms linear;
}
.rp-gov-overlay.rp-gov-scanning .rp-gov-scanbar { opacity: 1; }

.rp-gov-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.rp-gov-overlay.rp-gov-granted .rp-gov-overlay-inner {
  opacity: 0;
  transform: scale(0.5);
}

.rp-gov-lockbox {
  position: relative;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(82,82,91,0.5);
  background: rgba(9,9,11,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: border-color 0.3s ease, background 0.3s ease;
  color: #71717a;
}
.rp-gov-overlay.rp-gov-scanning .rp-gov-lockbox {
  border-color: rgba(168,85,247,0.6);
  background: rgba(168,85,247,0.05);
  color: #c084fc;
}
.rp-gov-overlay:hover .rp-gov-lockbox:not(.rp-gov-scanning .rp-gov-lockbox) {
  border-color: rgba(168,85,247,0.3);
  background: rgba(168,85,247,0.05);
}

.rp-gov-lock-ping {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(168,85,247,0.3);
  animation: govPing 1.5s cubic-bezier(0,0,0.2,1) infinite;
  display: none;
}
.rp-gov-overlay.rp-gov-scanning .rp-gov-lock-ping { display: block; }
@keyframes govPing { 75%, 100% { transform: scale(1.4); opacity: 0; } }

.rp-gov-status-text {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #d4d4d8;
  margin: 0 0 0.5rem;
}
.rp-gov-overlay.rp-gov-scanning .rp-gov-status-text {
  color: rgba(192,132,252,0.9);
  animation: govPulse 1s ease-in-out infinite;
}
@keyframes govPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.rp-gov-hint-text {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #52525b;
  margin: 0;
}

.rp-gov-progress-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.rp-gov-overlay.rp-gov-scanning .rp-gov-progress-wrap { display: flex; }

.rp-gov-bar-track {
  width: 8rem;
  height: 1px;
  background: #27272a;
  overflow: hidden;
}
@media (min-width: 640px) { .rp-gov-bar-track { width: 10rem; } }

.rp-gov-bar-fill {
  height: 100%;
  width: 0%;
  background: #a855f7;
  transition: width 100ms linear;
}

.rp-gov-pct-text {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #52525b;
  text-transform: uppercase;
}

/* Access granted text (shown briefly) */
.rp-gov-granted-msg {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rp-gov-overlay.rp-gov-show-granted .rp-gov-granted-msg { display: flex; }
.rp-gov-granted-text {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c084fc;
  animation: govPulse 1s ease-in-out infinite;
}

/* ── Contact CTA section ──────────────────────────────────────── */
#rp-contact {
  position: relative;
  background: #000;
  padding: 6rem 0 8rem;
}

.rp-contact-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at bottom, rgba(220,38,38,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.rp-contact-inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.rp-question-mark {
  display: block;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 700;
  color: rgba(217,54,54,0.05);
  line-height: 1;
  user-select: none;
}

.rp-contact-h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase !important;
  color: #fff;
  margin: -3rem 0 0;
  line-height: 1.1;
}
@media (min-width: 640px) { .rp-contact-h2 { margin-top: -4rem; } }

.rp-contact-sub {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-size: 0.875rem;
  color: #71717a;
  line-height: 1.65;
  text-transform: none;
}

.rp-contact-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .rp-contact-btns { flex-direction: row; justify-content: center; }
}

.rp-btn-contact-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #d93636;
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  transition: background 0.25s ease;
}
.rp-btn-contact-primary:hover { background: #b82a2a; }
.rp-btn-contact-primary svg:last-child {
  transition: transform 0.25s ease;
}
.rp-btn-contact-primary:hover svg:last-child { transform: translateX(2px); }

.rp-btn-contact-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #27272a;
  color: #a1a1aa;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.rp-btn-contact-secondary:hover {
  border-color: #52525b;
  color: #e4e4e7;
}

.rp-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
}
@media (min-width: 640px) { .rp-stats-row { gap: 3rem; } }

.rp-stat { text-align: center; }
.rp-stat-val {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.rp-stat-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #52525b;
  text-transform: uppercase;
}
.rp-stat-sep {
  width: 1px;
  height: 1.5rem;
  background: #27272a;
  flex-shrink: 0;
}

.rp-contact-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(39,39,42,0.5);
  padding-top: 2.5rem;
  margin-top: 5rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) {
  .rp-contact-footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

.rp-contact-branding {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rp-footer-logo {
  height: 14px;
  width: auto;
  opacity: 0.4;
  filter: invert(1);
  display: block;
}
.rp-footer-brand {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #52525b;
}
.rp-footer-tagline {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3f3f46;
  margin: 0;
}

/* ── Contact Modal ────────────────────────────────────────────── */
.rp-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.rp-modal.rp-modal-open {
  pointer-events: all;
  opacity: 1;
}

.rp-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  cursor: pointer;
}

.rp-modal-box {
  position: relative;
  z-index: 1;
  width: 95vw;
  max-width: 28rem;
  background: #000;
  border: 1px solid rgba(39,39,42,0.6);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.rp-modal.rp-modal-open .rp-modal-box { transform: scale(1); }

.rp-modal-accent-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0.4;
}
.rp-modal-accent-blue   { background: #3b82f6; }
.rp-modal-accent-red    { background: #d93636; }
.rp-modal-accent-purple { background: #a855f7; }

.rp-modal-header {
  padding: 1.75rem 1.5rem 0.75rem;
}
.rp-modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}
.rp-modal-icon-blue   { color: #60a5fa; }
.rp-modal-icon-red    { color: #f87171; }
.rp-modal-icon-purple { color: #c084fc; }
.rp-modal-h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: none;
}
.rp-modal-sub {
  font-size: 11px;
  color: #52525b;
  margin: 0;
  text-transform: none;
}

.rp-modal-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #52525b;
  transition: color 0.2s ease;
  padding: 0;
}
.rp-modal-close:hover { color: #a1a1aa; }

.rp-modal-body {
  padding: 0.75rem 1.5rem 1.5rem;
}

/* Form */
.rp-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.rp-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.rp-field label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #71717a;
}
.rp-required { color: #d93636; margin-left: 1px; }
.rp-field input {
  width: 100%;
  background: #09090b;
  border: 1px solid rgba(39,39,42,0.8);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  padding: 0.625rem 0.75rem;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
}
.rp-field input::placeholder { color: #3f3f46; }
.rp-field input:focus { border-color: #52525b; }

.rp-form-error {
  font-size: 11px;
  color: #f87171;
  text-align: center;
  min-height: 1rem;
  margin: 0;
  text-transform: none;
}

.rp-form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0;
}
.rp-form-success.rp-showing { display: flex; }

.rp-success-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-success-icon-blue   { background: #3b82f6; color: #000; }
.rp-success-icon-red    { background: #d93636; color: #000; }
.rp-success-icon-purple { background: #a855f7; color: #000; }

.rp-success-msg { font-size: 1rem; font-weight: 500; color: #fff; margin: 0; text-transform: none; }
.rp-success-sub { font-size: 12px; color: #71717a; margin: 0; text-transform: none; }

.rp-form-submit {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.rp-form-submit:hover { filter: brightness(1.1); }
.rp-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.rp-submit-blue   { background: #3b82f6; }
.rp-submit-red    { background: #d93636; }
.rp-submit-purple { background: #a855f7; }

/* ── SVG Graph canvas ────────────────────────────────────────── */
.rp-g-canvas {
  position: relative;
  overflow: hidden;
  background: hsl(0 0% 4%);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* allow JS to own all touch handling; enables click synthesis */
}
.rp-g-canvas:active { cursor: grabbing; }

/* Inject bounce animation for start hint */
@keyframes rp-bounce {
  0%, 100% { transform: translate(-50%, -100%) translateY(0); }
  50%       { transform: translate(-50%, -100%) translateY(-6px); }
}
@keyframes rp-slide-in {
  from { transform: translateX(-8px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes rp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Section continuity ──────────────────────────────────────── */

/* Shared background for all showcase sections — pure black, seamless */
#rp-abyss,
#rp-spider,
#rp-services,
#rp-contact,
#rp-final-cta {
  background-color: #000;
}

/* Label pill: consistent mono font */
.rp-label-pill {
  font-family: 'JetBrains Mono', monospace;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-abyss-fragment] {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .rp-live-ring,
  .rp-graph-loading-fill,
  .rp-gov-lock-ping,
  .rp-gov-scanbar { animation: none; }
}

@media (max-width: 480px) {
  .rp-tier-content { padding: 1.5rem; }
  .rp-contact-h2  { margin-top: -2.5rem; }
  .rp-field-row   { grid-template-columns: 1fr; }
}

/* ── Final Access CTA section ────────────────────────────────── */
#rp-final-cta,
#rp-final-cta * {
  box-sizing: border-box;
  text-transform: none;
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
}

#rp-final-cta {
  position: relative;
  background: #000;
  padding: 4rem 1.5rem 6rem;
  text-align: center;
  border-top: 1px solid rgba(39,39,42,0.4);
  overflow: hidden;
}

.rp-final-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(217,54,54,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.rp-final-cta-inner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(217,54,54,0.12);
  padding: 3rem 2rem;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

.rp-final-cta-label {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(217,54,54,0.5);
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.rp-final-cta-h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  /* Slightly tighter than the prior 1.75/4vw/2.75 — keeps the headline
     readable while letting the red accent + sub copy lead the moment. */
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase !important;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.15;
}

.rp-final-cta-sub {
  font-size: 0.875rem;
  color: #71717a;
  margin: 0 0 2.5rem;
  text-transform: none;
  line-height: 1.6;
}

.rp-btn-final {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #d93636;
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.875rem 2rem;
  min-height: 48px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.rp-btn-final:hover {
  background: #b82a2a;
  box-shadow: 0 0 30px rgba(217,54,54,0.3);
}
.rp-btn-final svg {
  transition: transform 0.25s ease;
}
.rp-btn-final:hover svg { transform: translateX(3px); }

.rp-final-cta-note {
  font-size: 9px;
  color: #3f3f46;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 1.5rem 0 0;
}

/* ── Mobile improvements ─────────────────────────────────────── */

/* Abyss: tighten vertical gaps on small screens */
@media (max-width: 640px) {
  .rp-abyss-top    { height: 15vh; }
  .rp-abyss-body   { min-height: 80vh; }
  .rp-abyss-bottom { height: 8vh; }
  .rp-abyss-fragments { gap: 10vh; }

  /* Scroll CTA reads cleanly inside the viewport on phones */
  .rp-abyss-cta-box {
    padding: 0.85rem 1.45rem;
  }
  .rp-abyss-cta-label {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
  }
  .rp-abyss-cta-arrow {
    width: 12px;
    height: 12px;
  }
  /* Pull the CTA a touch tighter to "LET US SHOW YOU" so it sits
     within the same screenful rather than requiring extra scroll. */
  .rp-abyss-cta {
    margin-top: -4vh;
  }
}

/* Contact stats: reduce spacing on very small screens */
@media (max-width: 360px) {
  .rp-stats-row { gap: 1rem; }
  .rp-stat-val  { font-size: 1rem; }
}

/* Tier buttons: ensure 44px min tap target */
.rp-btn-tier {
  min-height: 44px;
}

/* Contact buttons: ensure 44px min tap target */
.rp-btn-contact-primary,
.rp-btn-contact-secondary {
  min-height: 44px;
}

/* Spider section: reduce top/bottom padding on mobile */
@media (max-width: 640px) {
  #rp-spider   { padding: 3rem 0 4rem; }
  #rp-services { padding: 3.5rem 0 5rem; }
  #rp-contact  { padding: 3.5rem 0 5rem; }
  #rp-final-cta { padding: 2.5rem 1rem 4rem; }
  .rp-final-cta-inner { padding: 2rem 1.25rem; }
  .rp-section-head { margin-bottom: 2rem; }
  .rp-section-head--center { margin-bottom: 2.5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE UX OVERHAUL — restored section spacing + readability
   Overrides the 640px reductions above. Desktop untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Section padding: 80px minimum (overrides the 48-64px reductions) ── */
  #rp-spider      { padding: 5rem 0 6rem; }
  #rp-services    { padding: 5rem 0 7rem; }
  #rp-contact     { padding: 5rem 0 7rem; }
  #rp-final-cta   { padding: 5rem 1.25rem 7rem; }

  .rp-final-cta-inner {
    padding: 2.75rem 1.5rem;
  }

  /* ── Section headers ───────────────────────────────────────── */
  .rp-section-head         { margin-bottom: 3rem; }
  .rp-section-head--center { margin-bottom: 3.5rem; }

  /* ── Abyss: more generous vertical rhythm ─────────────────── */
  .rp-abyss-top      { height: 20vh; }
  .rp-abyss-body     { min-height: 90vh; }
  .rp-abyss-bottom   { height: 14vh; }
  .rp-abyss-fragments { gap: 15vh; }

  /* ── Spider graph: reduce height ~25% on mobile ───────────── */
  .rp-graph-viewport { height: 300px; }

  /* ── Headings: clear line-heights ─────────────────────────── */
  .rp-h2 {
    line-height: 1.1;
    margin-bottom: 1.25rem;
  }

  .rp-frag-label {
    line-height: 1.1;
    margin-bottom: 0.625rem;
  }

  .rp-frag-line1,
  .rp-frag-line2 {
    line-height: 1.35;
  }

  /* ── Buttons: 56px min tap target ─────────────────────────── */
  .rp-btn-tier,
  .rp-btn-contact-primary,
  .rp-btn-contact-secondary {
    min-height: 56px;
  }

  /* ── Tier cards: internal spacing ─────────────────────────── */
  .rp-tier-content {
    padding: 1.75rem 1.5rem;
  }

  /* ── Stats row: room to breathe ───────────────────────────── */
  .rp-stats-row {
    gap: 2rem;
  }

  .rp-stat-val {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  /* ── Body text: readable line-height ──────────────────────── */
  .rp-tier-desc,
  .rp-contact-body,
  .rp-final-cta-inner p {
    line-height: 1.65;
  }

  /* ── Final CTA: ensure visual separation ──────────────────── */
  .rp-final-cta-title {
    margin-bottom: 1.25rem;
    line-height: 1.15;
  }

}

/* ══════════════════════════════════════════════════════════════════
   Mobile fix — ReaperGov / Access Granted overlay clipping.
   On phones the overlay's centered stack (lockbox + status + hint +
   progress) was taller than the card on shorter viewports, and the
   parent .rp-tier `overflow: hidden` clipped the top portion behind
   the card frame. Switching to flex-start + a top safe padding +
   making the overlay itself scrollable as a last resort guarantees
   the lockbox is always visible and no text hides behind the rim.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .rp-gov-overlay {
    justify-content: flex-start;
    padding: 1.5rem 1rem 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rp-gov-overlay-inner {
    width: 100%;
    align-items: center;
  }
  .rp-gov-lockbox {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
  }
  .rp-gov-status-text {
    text-align: center;
    margin-bottom: 0.4rem;
  }
  .rp-gov-hint-text {
    text-align: center;
    margin-bottom: 0.6rem;
  }
  /* Ensure the parent tier card has enough room so no content sits
     under the .rp-tier-top-line accent strip. */
  #rp-services .rp-tier-purple {
    min-height: clamp(360px, 56vh, 480px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   Mobile spacing tighten — Reaper page.
   Section paddings were authored for desktop (5–8rem). On phones that
   manifests as huge dead bands between sections. Reduce ~40% on mobile
   while keeping clear breathing room.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #rp-abyss     { padding: 3rem 0 3.5rem; }
  #rp-spider    { padding: 3rem 0 3.5rem; }
  #rp-services  { padding: 3.5rem 0 4rem; }
  #rp-contact   { padding: 3.5rem 0 4rem; }
  #rp-final-cta { padding: 3.5rem 0 4rem; }

  /* Tier cards: trim internal padding so the title + features fit
     without forcing the card to be unnecessarily tall. */
  .rp-tier-content { padding: 1.5rem 1.25rem; }
  .rp-tier-icon    { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; }

  /* Tier grid gap on phones — 1.25rem reads as a clear set without
     ballooning the section height. */
  .rp-tier-grid { gap: 1.25rem; }

  /* Section header → first card / element: tighten lead-in margin */
  .rp-section-divider { margin: 1.75rem auto; }
}