/* ═══ BACKDROP — stablecash.family-style nature footage behind the app ═══
   A full-bleed meadow clip sits behind the top of the page and dissolves into
   the app's #0a0a0a field; the bar and rail turn to dark glass over it, and
   the footer gets a blurred still of the same clip, like Stablecash's closer. */
body{position:relative;background:#0a0a0a}
#root{position:relative;z-index:1}
.hp-bg{position:absolute;top:0;left:0;right:0;height:min(118vh,1080px);z-index:0;overflow:hidden;pointer-events:none}
.hp-bg video,.hp-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.82)}
.hp-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(55% 42% at 50% 30%,rgba(10,10,10,.5),rgba(10,10,10,0) 72%),
  linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.22) 22%,rgba(10,10,10,.38) 48%,rgba(10,10,10,.86) 76%,#0a0a0a 100%)}
.hero-title,.hero-inner p{text-shadow:0 2px 24px rgba(0,0,0,.35)}

.bar{background:rgba(10,10,10,.22);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(255,255,255,.07)}
.side-inner{background:rgba(10,10,10,.38);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-right-color:rgba(255,255,255,.07)}
.side-toggle{background:rgba(10,10,10,.6)}
.bar-search .search-field,.search-field{background:rgba(255,255,255,.04)}

.footer{background:
  linear-gradient(180deg,#0a0a0a 0%,rgba(10,10,10,.72) 45%,rgba(10,10,10,.82) 100%),
  url(/bg/meadow-blur.jpg) center 60%/cover no-repeat;border-top-color:rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){.hp-bg video{display:none}}

/* WebGL redraw of the clip (bg/fx.js): parallax toward the cursor + a water wake behind it */
.hp-bg .hp-fx{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(.92) brightness(.82);opacity:0;transition:opacity .6s ease}
.hp-bg.fx-on .hp-fx{opacity:1}
.hp-bg.fx-on video,.hp-bg.fx-on img{opacity:0}

/* X link in the top bar — same footprint as the menu button, visible on every width */
.bar-actions .bar-x{display:inline-flex;align-items:center;justify-content:center;color:var(--secondary)}
.bar-actions .bar-x:hover{color:var(--primary)}

/* ═══ Stablepad type ═══
   Bold geometric sans like the "stablepad" wordmark, replacing the serif display face.
   The brand word is lowercase wherever it stands alone. */
:root{--font-display:"Manrope","Helvetica Neue",Arial,sans-serif}
.hero-title,.section-title,.sheet h2,.route-title,.setup-title,.stats-figure,.card-figure,.row-figure,.step h3,.tile-label,.empty h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em}
.hero-title{font-weight:700;letter-spacing:-.045em;line-height:1.02}
.fade-group.is-em{color:#ffffff80}
.side-word,.bar-word,.footer-name{font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-weight:700;text-transform:lowercase;letter-spacing:-.035em}
.hp-bg video,.hp-bg img,.hp-bg .hp-fx{filter:saturate(1) brightness(.9)}