/*
 * RSP Comic System
 * Shared visual continuity layer for the Stone-rebuild preview.
 * Evidence stays factual; this file supplies the ink, paper, labels, and framing.
 */

@font-face {
  font-family: 'RSP Bangers';
  src: url('/assets/fonts/bangers-latin.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'RSP Sora';
  src: url('/assets/fonts/sora-latin.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

:root {
  --rsp-comic-ink: #0f0f0e;
  --rsp-comic-paper: #faf9f5;
  --rsp-comic-white: #fff;
  --rsp-comic-terra: #cd5e45;
  --rsp-comic-terra-hot: #e0714f;
  --rsp-comic-muted: #706d67;
  --rsp-comic-font: 'RSP Bangers', 'Bangers', Impact, 'Arial Black', sans-serif;
  --rsp-display-font: 'RSP Sora', 'Sora', 'Hanken Grotesk', system-ui, sans-serif;
  --rsp-comic-shadow: 7px 7px 0 var(--rsp-comic-ink);
  --rsp-comic-shadow-terra: 8px 8px 0 var(--rsp-comic-terra);
  --rsp-halftone-dark: radial-gradient(rgba(250, 249, 245, .075) 1.1px, transparent 1.1px);
  --rsp-halftone-light: radial-gradient(rgba(15, 15, 14, .09) 1.1px, transparent 1.1px);
  --rsp-action-stripe: repeating-linear-gradient(-45deg, var(--rsp-comic-ink) 0 8px, var(--rsp-comic-terra-hot) 8px 14px, var(--rsp-comic-paper) 14px 20px);
  --rspx-terra-dark: var(--rsp-comic-terra-hot);
}

/* One visual handshake across every shell. */
.site-nav,
.product-nav,
.rspx-nav {
  border-bottom: 3px solid var(--rsp-comic-ink) !important;
  box-shadow: 0 3px 0 rgba(205, 94, 69, .55);
}

.brand img,
.product-nav .brand img,
.rspx-logo img {
  border: 2px solid var(--rsp-comic-ink) !important;
  border-radius: 5px !important;
  background: var(--rsp-comic-paper) !important;
  box-shadow: 2px 2px 0 var(--rsp-comic-terra) !important;
}

.button,
.nav-book,
.rspx-cta,
.rspx-footcta-btn,
.cta {
  border: 2px solid var(--rsp-comic-ink) !important;
  border-radius: 5px !important;
  box-shadow: 4px 4px 0 var(--rsp-comic-ink) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.button:hover,
.nav-book:hover,
.rspx-cta:hover,
.rspx-footcta-btn:hover,
.cta:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--rsp-comic-ink) !important;
}

.menu-panel,
.mobile-menu,
.rspx-menu {
  border: 3px solid var(--rsp-comic-ink) !important;
  border-radius: 8px !important;
  box-shadow: var(--rsp-comic-shadow-terra) !important;
  background-color: var(--rsp-comic-white) !important;
  background-image: var(--rsp-halftone-light) !important;
  background-size: 15px 15px !important;
}

.product-link img,
.detail-card-head img {
  border: 2px solid var(--rsp-comic-ink) !important;
  border-radius: 6px !important;
  background: var(--rsp-comic-paper) !important;
  box-shadow: 3px 3px 0 var(--rsp-comic-terra) !important;
}

.menu-title,
.section-kicker,
.comic-kicker,
.comic-section-tag,
.proof-label,
.popular,
.dateline,
.updated {
  font-family: var(--rsp-comic-font) !important;
  font-weight: 400 !important;
  letter-spacing: .075em !important;
}

/* Product, proof, blog, process, and pricing pages. */
.detail-page,
.pricing-page,
.grow-page {
  background-color: var(--rsp-comic-paper);
  background-image: var(--rsp-halftone-light);
  background-size: 17px 17px;
}

.detail-hero,
.pricing-hero {
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(110deg, rgba(250, 249, 245, .96), rgba(250, 249, 245, .88)),
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(205, 94, 69, .12) 22px 25px) !important;
}

.detail-hero::after,
.pricing-hero::after {
  content: none; /* owner call 2026-07-19: ghost watermark text retired */
  position: absolute;
  z-index: -1;
  right: clamp(-42px, -2vw, -12px);
  top: 52px;
  color: rgba(15, 15, 14, .065);
  font-family: var(--rsp-comic-font);
  font-size: clamp(64px, 11vw, 164px);
  letter-spacing: .045em;
  line-height: .78;
  text-align: right;
  transform: rotate(-7deg);
  pointer-events: none;
}

.detail-hero h1,
.pricing-hero h1 {
  position: relative;
  display: table;
  margin-inline: auto;
  font-family: var(--rsp-display-font) !important;
}

.detail-hero h1::after,
.pricing-hero h1::after {
  content: '';
  position: absolute;
  left: 6%;
  right: -3%;
  bottom: -12px;
  height: 8px;
  border: 2px solid var(--rsp-comic-ink);
  border-radius: 5px;
  background: var(--rsp-comic-terra-hot);
  transform: rotate(-1.2deg);
}

.detail-top {
  position: relative;
  z-index: 1;
}

.stat-card,
.detail-card,
.step,
.compare-column,
.proof-card,
.research-card,
.evidence-card,
.leak-card {
  border: 3px solid var(--rsp-comic-ink) !important;
  border-radius: 8px !important;
  box-shadow: var(--rsp-comic-shadow) !important;
}

.stat-card {
  background-image: linear-gradient(130deg, #fff 0 78%, rgba(205, 94, 69, .14) 78% 100%) !important;
}

.detail-demo {
  position: relative;
  padding: 21px 21px 24px;
  border: 3px solid var(--rsp-comic-ink);
  border-radius: 8px;
  background: var(--rsp-comic-white);
  box-shadow: var(--rsp-comic-shadow-terra);
}

.detail-demo::before {
  content: 'SEE IT WORK';
  position: absolute;
  top: -17px;
  right: 24px;
  z-index: 3;
  padding: 7px 12px 5px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-terra-hot);
  color: var(--rsp-comic-white);
  font-family: var(--rsp-comic-font);
  font-size: 19px;
  letter-spacing: .08em;
  line-height: 1;
  transform: rotate(2.5deg);
}

.detail-demo h2 {
  font-family: var(--rsp-display-font);
  font-size: clamp(22px, 2.1vw, 32px);
}

.video-demo,
.demo-screen.video-demo {
  position: relative;
  overflow: hidden;
  border: 4px solid var(--rsp-comic-ink) !important;
  border-radius: 5px !important;
  background: var(--rsp-comic-ink) !important;
  box-shadow: 5px 5px 0 rgba(15, 15, 14, .28) !important;
}

.video-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(250, 249, 245, .3);
  pointer-events: none;
}

.video-demo video {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0 !important;
}

.video-demo video::-webkit-media-controls-fullscreen-button,
.video-demo video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

.detail-features {
  position: relative;
  background-color: var(--rsp-comic-ink) !important;
  background-image: var(--rsp-halftone-dark) !important;
  background-size: 16px 16px !important;
}

.detail-features .wrap > h2 {
  font-family: var(--rsp-display-font);
}

.detail-card {
  position: relative;
  overflow: hidden;
  background: var(--rsp-comic-white) !important;
}

.detail-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: var(--rsp-action-stripe);
}

.detail-card::after {
  position: absolute;
  right: 14px;
  top: 13px;
  color: rgba(15, 15, 14, .16);
  font-family: var(--rsp-comic-font);
  font-size: 28px;
  letter-spacing: .05em;
}

.detail-card:nth-child(1)::after { content: '01'; }
.detail-card:nth-child(2)::after { content: '02'; }
.detail-card:nth-child(3)::after { content: '03'; }
.detail-card:nth-child(4)::after { content: '04'; }

.detail-cta {
  border-width: 3px !important;
  border-radius: 8px !important;
  background-image: var(--rsp-halftone-dark) !important;
  background-size: 15px 15px !important;
  box-shadow: var(--rsp-comic-shadow-terra) !important;
}

.detail-cta > img,
.talk-card .comic-panel-img,
.grow-mascot {
  filter: drop-shadow(7px 9px 0 rgba(205, 94, 69, .72));
}

.detail-process,
.detail-proof {
  position: relative;
}

.detail-process::before,
.detail-proof::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: var(--rsp-action-stripe);
}

.step {
  background-image: linear-gradient(145deg, #fff 0 82%, rgba(205, 94, 69, .15) 82%) !important;
}

.step-num {
  border: 3px solid var(--rsp-comic-ink) !important;
  box-shadow: 3px 3px 0 var(--rsp-comic-terra-hot) !important;
  font-family: var(--rsp-comic-font) !important;
  font-size: 24px !important;
}

.proof-image {
  position: relative;
  overflow: hidden;
  border-right: 3px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-ink);
}

.proof-image::after {
  content: 'LIVE SITE EVIDENCE';
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 8px 4px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-terra-hot);
  color: #fff;
  font-family: var(--rsp-comic-font);
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1;
  transform: rotate(-1deg);
}

.proof-image img {
  filter: saturate(.94) contrast(1.03);
}

.site-footer,
.rspx-foot,
.rspx-footcta {
  background-color: var(--rsp-comic-ink) !important;
  background-image: var(--rsp-halftone-dark) !important;
  background-size: 16px 16px !important;
}

.site-footer::before,
.rspx-footcta::before {
  content: '';
  display: block;
  height: 10px;
  background: var(--rsp-action-stripe);
}

.price-card {
  border: 4px solid var(--rsp-comic-ink) !important;
  border-radius: 8px !important;
  box-shadow: 10px 10px 0 var(--rsp-comic-ink) !important;
}

.price-card::after {
  content: 'BOOKED JOB FOUNDATION';
  position: absolute;
  right: -18px;
  top: -20px;
  padding: 7px 13px 5px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-paper);
  color: var(--rsp-comic-ink);
  font-family: var(--rsp-comic-font);
  font-size: 21px;
  letter-spacing: .06em;
  transform: rotate(5deg);
}

/* Legacy About routes: Contact, Trades, and Careers. */
.product-nav {
  background: rgba(250, 249, 245, .97) !important;
}

.product-nav .brand,
.product-nav-links a {
  color: var(--rsp-comic-ink) !important;
}

.product-nav .brand span {
  font-family: var(--rsp-display-font);
  font-style: normal;
}

.product-hero {
  isolation: isolate;
  min-height: 480px;
  background-color: var(--rsp-comic-ink) !important;
  background-image:
    linear-gradient(90deg, rgba(15, 15, 14, .94), rgba(15, 15, 14, .69)),
    var(--rsp-halftone-dark) !important;
  background-size: auto, 16px 16px !important;
}

.product-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: auto;
  right: max(4vw, 34px);
  bottom: -32px;
  width: min(30vw, 330px);
  height: auto;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  background: url('/assets/comic/roscoe-canon-silver.webp') center bottom / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(9px 11px 0 rgba(205, 94, 69, .85));
  opacity: .93;
  pointer-events: none;
}

.product-hero-grid {
  position: relative;
  z-index: 1;
}

.product-hero-grid > div {
  max-width: 690px;
}

.product-hero h1 {
  max-width: 760px;
  font-family: var(--rsp-display-font) !important;
  text-wrap: balance;
}

.product-lead {
  max-width: 620px;
}

.section-white {
  background-color: var(--rsp-comic-paper) !important;
  background-image: var(--rsp-halftone-light) !important;
  background-size: 17px 17px !important;
}

.feature-card,
.workflow article,
.tw-grid figure {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--rsp-comic-ink) !important;
  border-radius: 8px !important;
  box-shadow: var(--rsp-comic-shadow) !important;
}

.feature-card::before,
.workflow article::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--rsp-action-stripe);
}

.feature-card > span,
.workflow .number {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 42px;
  padding: 5px 9px !important;
  border: 2px solid var(--rsp-comic-ink);
  border-radius: 4px !important;
  background: var(--rsp-comic-terra-hot) !important;
  box-shadow: 3px 3px 0 var(--rsp-comic-ink);
  color: #fff !important;
  font-family: var(--rsp-comic-font) !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

.tw-grid figure::after {
  content: 'TRADE FILE';
  position: absolute;
  top: 10px;
  right: 9px;
  padding: 5px 8px 3px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-paper);
  color: var(--rsp-comic-ink);
  font-family: var(--rsp-comic-font);
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1;
  transform: rotate(2deg);
}

.product-final {
  position: relative;
  border-top: 9px solid var(--rsp-comic-ink);
}

/* Published research: retain the real data, frame it like an RSP field report. */
.rspx-bar {
  border-bottom: 2px solid var(--rsp-comic-terra) !important;
}

.rspx-nav {
  background: rgba(250, 249, 245, .96) !important;
  backdrop-filter: none !important;
}

.rspx-menu a {
  border-radius: 4px !important;
}

main.paper {
  position: relative;
  max-width: 920px !important;
  margin-top: 24px !important;
  padding: clamp(30px, 5vw, 58px) clamp(22px, 5vw, 58px) 90px !important;
  border: 3px solid var(--rsp-comic-ink);
  border-radius: 8px;
  background-color: var(--rsp-comic-white);
  background-image: var(--rsp-halftone-light);
  background-size: 18px 18px;
  box-shadow: 10px 10px 0 var(--rsp-comic-terra);
}

main.paper::before {
  content: 'RSP FIELD REPORT';
  position: absolute;
  top: -18px;
  right: 28px;
  padding: 8px 13px 6px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-terra-hot);
  color: #fff;
  font-family: var(--rsp-comic-font);
  font-size: 21px;
  letter-spacing: .08em;
  line-height: 1;
  transform: rotate(2deg);
}

main.paper h1,
main.paper h2 {
  font-family: var(--rsp-display-font) !important;
  font-weight: 800 !important;
}

main.paper h1 {
  max-width: 780px;
}

main.paper h2 {
  position: relative;
  padding-left: 20px;
}

main.paper h2::before {
  content: '//';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--rsp-comic-terra-hot);
  font-family: var(--rsp-comic-font);
  letter-spacing: -.08em;
}

main.paper figure,
.censusmap,
.mediakit a,
.bridge,
.admission,
.citebox {
  border: 3px solid var(--rsp-comic-ink) !important;
  border-radius: 7px !important;
  box-shadow: 7px 7px 0 var(--rsp-comic-terra) !important;
}

main.paper figure {
  position: relative;
  background: rgba(250, 249, 245, .98) !important;
}

main.paper figure::before {
  content: 'FIELD DATA';
  display: table;
  margin: -36px 0 14px auto;
  padding: 6px 10px 4px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-paper);
  color: var(--rsp-comic-ink);
  font-family: var(--rsp-comic-font);
  font-size: 16px;
  letter-spacing: .08em;
  line-height: 1;
  transform: rotate(1deg);
}

.censusmap {
  overflow: hidden;
}

.censusmap-toggle,
.censusmap-chip {
  border: 2px solid var(--rsp-comic-ink) !important;
  border-radius: 5px !important;
  box-shadow: 3px 3px 0 var(--rsp-comic-terra) !important;
}

.bridge {
  background-color: var(--rsp-comic-ink) !important;
  background-image: var(--rsp-halftone-dark) !important;
  background-size: 15px 15px !important;
}

.citebox,
.admission,
.disclosure {
  background-color: var(--rsp-comic-paper) !important;
  background-image: var(--rsp-halftone-light) !important;
  background-size: 15px 15px !important;
}

/* Legal pages keep reading comfort while sharing the cover treatment. */
body:has(.rspx-nav) > main:not(.paper) {
  position: relative;
  max-width: 820px !important;
  margin-top: 34px !important;
  padding: clamp(34px, 5vw, 62px) clamp(24px, 5vw, 58px) 86px !important;
  border: 3px solid var(--rsp-comic-ink);
  border-radius: 8px;
  background: var(--rsp-comic-white);
  box-shadow: 9px 9px 0 var(--rsp-comic-terra);
}

body:has(.rspx-nav) > main:not(.paper)::before {
  content: 'THE FINE PRINT';
  position: absolute;
  right: 24px;
  top: -17px;
  padding: 7px 11px 5px;
  border: 2px solid var(--rsp-comic-ink);
  background: var(--rsp-comic-paper);
  color: var(--rsp-comic-ink);
  font-family: var(--rsp-comic-font);
  font-size: 18px;
  letter-spacing: .08em;
  line-height: 1;
  transform: rotate(2deg);
}

body:has(.rspx-nav) > main:not(.paper) h1,
body:has(.rspx-nav) > main:not(.paper) h2 {
  font-family: var(--rsp-display-font) !important;
}

body:has(.rspx-nav) > main:not(.paper) h2 {
  padding-left: 18px;
  border-left: 7px solid var(--rsp-comic-terra-hot);
}

/* Mobile: keep the comic depth without sacrificing the 5-second read. */
@media (max-width: 760px) {
  :root {
    --rsp-comic-shadow: 4px 4px 0 var(--rsp-comic-ink);
    --rsp-comic-shadow-terra: 5px 5px 0 var(--rsp-comic-terra);
  }

  .menu-panel,
  .mobile-menu,
  .rspx-menu {
    box-shadow: none !important;
  }

  .detail-hero::after,
  .pricing-hero::after {
    right: -24px;
    top: 36px;
    font-size: 70px;
  }

  .detail-demo {
    padding: 16px 14px 17px;
  }

  .detail-demo::before {
    right: 12px;
    font-size: 16px;
  }

  .price-card::after {
    right: -7px;
    top: 18px;
    font-size: 15px;
  }

  .product-hero {
    min-height: 620px;
    padding-bottom: 150px !important;
  }

  .product-hero::after {
    right: 14px;
    bottom: -8px;
    width: min(42vw, 170px);
    transform: none;
    opacity: .58;
  }

  main.paper {
    margin: 18px 12px 66px !important;
    padding: 38px 16px 64px !important;
    box-shadow: 5px 5px 0 var(--rsp-comic-terra);
  }

  main.paper::before {
    right: 12px;
    font-size: 16px;
  }

  main.paper figure {
    margin-inline: 0 !important;
    padding-inline: 12px !important;
    box-shadow: 4px 4px 0 var(--rsp-comic-terra) !important;
  }

  body:has(.rspx-nav) > main:not(.paper) {
    margin: 22px 12px 62px !important;
    padding: 40px 20px 62px !important;
    box-shadow: 5px 5px 0 var(--rsp-comic-terra);
  }

  .proof-image {
    border-right: 0;
    border-bottom: 3px solid var(--rsp-comic-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Detail pass 2026-07-19: lead paragraphs speak the display voice, not editorial serif. */
.product-lead {
  font-family: var(--rsp-display-font) !important;
  font-style: normal !important;
  font-size: clamp(18px, 2.1vw, 22px) !important;
}