/* ═══ Stablepad — banner edition ═══
   Matches the X banner and logo: near-black coin bokeh, white bold lowercase sans,
   metallic gold and silver light. Loaded after site.css / app.css and re-points
   their tokens; the few hard-coded light surfaces are overridden below. */
:root{
  --white:#0b0c0b;--paper:#141614;
  --ink:#f2efe6;--ink-2:rgba(242,239,230,.68);--ink-3:rgba(242,239,230,.45);
  --line:rgba(242,239,230,.1);--line-2:rgba(242,239,230,.18);
  --gold:#dcbc6c;--gold-2:#b8954a;--gold-ink:#e8cf8c;--gold-wash:rgba(220,188,108,.12);
  --sage:#b9c0b8;--sage-2:#7c857e;
  --brand:"Manrope","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
body{background:var(--white)}
::selection{background:var(--gold);color:#0b0c0b}

/* type: the wordmark face for every display line */
h1,.px,.st-big,h2,.big-n,.s-n,.t-n,.count b,.rn-n,.stxt h3,.f-l,.pv-name,.cap,.brand,.rates-f b{font-family:var(--brand)!important}
h1,.px{font-weight:800;letter-spacing:-.045em;line-height:.98}
h2,.st-big,.stxt h3,.pv-name,.cap,.f-l{font-weight:800;letter-spacing:-.04em}
.big-n,.s-n,.t-n,.rn-n,.count b{font-weight:800;letter-spacing:-.04em}
.brand{font-weight:800;letter-spacing:-.05em}

/* buttons keep dark text on gold */
.btn-gold{background:linear-gradient(180deg,#ead08a,#c9a456);color:#0b0c0b;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -14px rgba(220,188,108,.55)}
.btn-ink{background:var(--ink);color:#0b0c0b}

/* nav: dark glass */
.nav-pill{background:rgba(16,18,17,.62);box-shadow:0 10px 40px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.links a:hover,.x:hover{background:rgba(255,255,255,.06)}
.x svg{fill:var(--ink)}

/* hero: the banner itself, moving, with the hover ripple (bg/fx.js) */
.story-pin .hp-bg{position:absolute;inset:0;height:auto;z-index:-1}
.story-pin .hp-bg::after{background:
  linear-gradient(90deg,rgba(11,12,11,.86),rgba(11,12,11,.45) 45%,rgba(11,12,11,.1) 75%),
  linear-gradient(180deg,rgba(11,12,11,.35),rgba(11,12,11,0) 30%,rgba(11,12,11,0) 70%,#0b0c0b)}
.story-pin .hp-bg video,.story-pin .hp-bg img,.story-pin .hp-bg .hp-fx{filter:saturate(1) brightness(.95)}
.haze{display:none}
.ca{background:rgba(220,188,108,.14);box-shadow:inset 0 0 0 1px rgba(220,188,108,.45)}
.ca-l{color:var(--gold-ink)}
.ca-c{background:var(--ink);color:#0b0c0b}
.rate .sym,.st-list .sym,.tr .cur .sym{background:rgba(220,188,108,.14);box-shadow:inset 0 0 0 1px rgba(220,188,108,.35);border:0;color:var(--gold-ink)}
.rate .chip{background:rgba(220,188,108,.16);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(220,188,108,.35)}
.rate .chip b{color:var(--ink)}
.prog i{background:var(--gold)}

/* surfaces */
.st-card,.scard{background:radial-gradient(120% 140% at 0% 0%,rgba(220,188,108,.16),rgba(20,22,20,.9) 55%),#121412;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.st-list li{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.st-list .sym{background:var(--gold);color:#0b0c0b}
.fcard,.rcard,.calc-r,.qa details{background:#121412;box-shadow:inset 0 0 0 1px var(--line)}
.fart{background:#0e100f;box-shadow:inset 0 0 0 1px var(--line)}
.stats{background:radial-gradient(60% 120% at 50% 0%,rgba(220,188,108,.1),transparent 70%),#0b0c0b}
.marquee{background:#0b0c0b}
.rn{color:var(--ink)}
.rn:hover{background:rgba(255,255,255,.05)}
.cl-card{background:#0b0c0b;box-shadow:inset 0 0 0 1px var(--line)}
.cl-haze{background:url(/bg/meadow.jpg) center/cover}
.cl-haze::after{background:linear-gradient(180deg,rgba(11,12,11,.35),rgba(11,12,11,.7))}
.chart path#c-line{stroke:var(--gold)}
input[type=range]{background:linear-gradient(90deg,var(--gold) var(--p,10%),var(--line-2) var(--p,10%))}
input[type=range]::-webkit-slider-thumb{background:var(--gold);border-color:#0b0c0b}

/* app */
.appbody .app-haze{background:url(/bg/meadow.jpg) 60% 30%/cover no-repeat;height:560px}
.appbody .app-haze::after{background:linear-gradient(180deg,rgba(11,12,11,.4),rgba(11,12,11,.75) 55%,#0b0c0b)}
.card{background:rgba(18,20,18,.82);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px -36px rgba(0,0,0,.8)}
.cur-grid button{background:rgba(255,255,255,.03)}
.cur-grid button.on{background:var(--gold);box-shadow:inset 0 0 0 2px #0b0c0b}
.cur-grid button.on i,.cur-grid button.on b{color:#0b0c0b}
.fld input{background:#0e100f;color:var(--ink)}
.fld input:focus{box-shadow:inset 0 0 0 2px var(--gold)}
.chips button{background:#0e100f;color:var(--ink)}
.chips button:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.steps li.run::before{color:#0b0c0b}
.steps li.ok::before{background:var(--gold);color:#0b0c0b}
.done{background:rgba(220,188,108,.12);box-shadow:inset 0 0 0 1px rgba(220,188,108,.35)}
.pv-coin canvas{box-shadow:0 18px 50px -14px rgba(220,188,108,.45),0 0 0 1.5px rgba(242,239,230,.6)}
.tr .go{background:var(--ink);color:#0b0c0b}
.drawer{background:#121412}
.seg{background:#0e100f}
.seg button.on{background:#1c1f1c;color:var(--ink)}
.msg.err{color:#f08a78}
.drawer-bg{background:rgba(0,0,0,.5)}