/* Quiet canvas — the Rhappsody marketing identity, adopted October 2026.
   Color belongs to customer examples and meaningful status, not platform decoration. */
@font-face { font-family: 'MuseoModerno'; src: url('/assets/brand/museo-moderno.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: light;
  --primary: #303030; --secondary: #444444; --tertiary: #444444;
  --accent: #303030; --accent-end: #303030; --feature-gradient: #303030; --flex: #444444;
  --gray-900: #262626; --gray-700: #555555; --gray-500: #666666;
  --gray-300: #D8D8D8; --gray-100: #F3F3F3; --white: #FFFFFF;
  --background: #F5F5F5; --surface: #FFFFFF; --text-primary: #262626; --text-secondary: #555555;
  --header-bg: #282828; --header-text: #F5F5F5;
  --card-bg: #FFFFFF; --card-border: #DDDDDD; --card-shadow: rgba(0,0,0,.04);
}
body { color: var(--text-primary); background: var(--background); }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #777; outline-offset: 4px; }
.hero, .pricing-hero { background: #282828; color: #F5F5F5; }
.hero h1, .pricing-hero h1 { font-family: 'MuseoModerno', sans-serif; font-weight: 500; letter-spacing: -.035em; }
.hero .subtitle, .pricing-hero .subtitle { color: #DDDDDD; opacity: 1; }
.cta-button { border-radius: 28px; }
.feature-tile > .iconify { color: #303030; }
.feature-tile { box-shadow: none; }
.plan-subtitle, .popular-badge, .flex-mini { text-transform: none; letter-spacing: 0; }
.cta-button.flex:hover { background-color: #262626; }
.flex-features code { background-color: #eee; }
.contact-plan-card.enterprise { border-color: #bbb; }
.billing-toggle input:focus-visible + .slider { outline: 3px solid #777; outline-offset: 4px; }
/* Existing pre-launch access gate retains its behavior, with the new identity. */
#pinOverlay { background: #282828 !important; }
#pinOverlay .pin-logo img { filter: brightness(0); }
#pinOverlay .pin-container h2 { color: #262626; }
#pinOverlay .pin-dot.filled { background: #303030; border-color: #303030; }
#pinOverlay .pin-btn[data-num="enter"] { background: #303030; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Chalk sketches — one per feature hero. Source of truth: $r/brand/assets/quiet-canvas/sketches. */
@font-face { font-family: 'Architects Daughter'; src: url('/assets/brand/architects-daughter.woff2') format('woff2'); font-display: swap; }
.hero-sketch { position: relative; display: inline-block; margin: 0 0 .75rem; }
.hero-sketch img { display: block; width: 112px; height: auto; }
.hero-sketch figcaption { position: absolute; left: 100%; bottom: 18px; margin-left: -4px; white-space: nowrap; font: 20px/1 'Architects Daughter', cursive; color: #D9D9D9; transform: rotate(-6deg); transform-origin: left bottom; }
@media (max-width: 560px) {
  .hero-sketch img { width: 96px; }
  .hero-sketch figcaption { position: static; display: block; margin: -2px 0 0; transform: rotate(-4deg); font-size: 18px; }
}