/* =====================================================================
   COWBOY'S AC — COMMAND WALL THEME  (shared)
   Warm espresso palette pulled verbatim from display.html.
   Load AFTER fonts, BEFORE motion.css. Self-contained (no site.css).
   ===================================================================== */
/* =========================================================
   COWBOY'S AC — COMMAND WALL THEME  (warm espresso · self-contained)
   Palette pulled verbatim from display.html
   ========================================================= */
:root {
  /* command-wall palette */
  --red:#e23c2c; --red2:#ff5a45;
  --gold:#e8b04a; --gold2:#f6cd78;
  --cream:#f4ead6; --tan:#b89a73; --tan2:#8a755a;
  --denim:#6f9fcf; --olive:#9bb06a; --rust:#d9803a;
  --panel:linear-gradient(168deg,rgba(44,28,21,.78),rgba(22,14,10,.86));
  --panel-solid:#1b120d;
  --line:rgba(232,176,74,.18);
  --line-strong:rgba(232,176,74,.32);

  /* tokens motion.css expects */
  --gold-bright:var(--gold2); --gold-glow:rgba(232,176,74,.35); --gold-subtle:rgba(232,176,74,.09); --gold-border:rgba(232,176,74,.22);
  --red-bright:var(--red2); --red-glow:rgba(226,60,44,.40);
  --bg-deep:#0e0907;
  --text-primary:var(--cream); --text-secondary:rgba(244,234,214,.72); --text-muted:#b89a73;
  --success:var(--olive);
  --font-display:'Oswald',sans-serif; --font-accent:'Oswald',sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif; --font-mono:'Share Tech Mono',monospace;
  --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --container-max:1480px;
  --radius-md:.6rem; --radius-lg:.9rem; --radius-full:9999px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream);
  background:
    radial-gradient(1500px 880px at 80% -12%, rgba(226,60,44,.16), transparent 60%),
    radial-gradient(1300px 820px at 6% 112%, rgba(232,176,74,.11), transparent 58%),
    linear-gradient(#1b120d, #0d0806);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* film grain + vignette */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ---- GOLD FRAME (the "wall" border) ---- */
.frame { position: fixed; inset: 10px; z-index: 60; pointer-events: none; border: 1.6px solid var(--line-strong); border-radius: 4px; }
.frame i { position: absolute; width: 16px; height: 16px; color: var(--gold); font-size: 14px; line-height: 16px; text-align: center; }
.frame i::before { content: "✦"; }
.frame i.tl{top:-9px;left:-9px} .frame i.tr{top:-9px;right:-9px} .frame i.bl{bottom:-9px;left:-9px} .frame i.br{bottom:-9px;right:-9px}
@media (max-width: 640px){ .frame{ inset:6px } }

/* ===================== LOADER ===================== */
.loader-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(1200px 800px at 50% 30%, rgba(226,60,44,.14), transparent 60%),
    linear-gradient(#160e0a, #0b0705);
  transition: opacity .8s ease, visibility .8s;
}
.loader-overlay.done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; width: min(90vw, 460px); }
#loaderCanvas { width: 300px; height: 260px; margin: 0 auto; }
.loader__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); margin-top: .4rem; }
.loader__wordmark em { color: var(--red); font-style: normal; }
.loader__mono { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-top: .5rem; }
.loader__bar { width: 220px; height: 2px; margin: 1.2rem auto 0; background: rgba(232,176,74,.14); overflow: hidden; border-radius: 2px; }
.loader__bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--gold), var(--red)); animation: loadbar 2.4s var(--ease-out-expo) forwards; }
@keyframes loadbar { 0%{transform:translateX(-100%);width:50%} 100%{transform:translateX(260%);width:60%} }
.loader__skip { position: absolute; bottom: 2rem; right: 2rem; background: none; border: 1px solid var(--line); color: var(--tan); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; padding: .5rem .9rem; border-radius: var(--radius-full); cursor: pointer; }

/* ===================== NAV ===================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(15,9,6,.82); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.nav__inner { width: min(var(--container-max), 94vw); margin: 0 auto; display: flex; align-items: center; gap: 1.4rem; padding: .9rem 0; }
.nav__logo img { height: 42px; width: auto; }
.nav__links { display: flex; gap: 1.5rem; list-style: none; margin: 0 auto 0 1rem; padding: 0; }
.nav__link { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tan); transition: color .25s; }
.nav__link:hover, .nav__link.is-active { color: var(--gold2); }
.nav__cta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: .9rem; color: #fff; background: linear-gradient(135deg, var(--red), var(--rust)); padding: .7rem 1.2rem; border-radius: var(--radius-full); box-shadow: 0 0 24px rgba(226,60,44,.3); }
.nav__cta-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.4} }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--gold); display: block; }
.nav__mobile { display: none; }
.nav__mobile ul { list-style: none; margin: 0; padding: 1rem 0; }
.nav__mobile a { display: block; padding: .8rem 6vw; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: var(--cream); border-bottom: 1px solid var(--line); }
@media (max-width: 940px) {
  .nav__links, .nav__cta-text-full { display: none; }
  .nav__toggle { display: flex; }
  .nav.open .nav__mobile { display: block; position: fixed; top: 62px; left: 0; right: 0; background: rgba(12,7,5,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
}

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), var(--red)); z-index: 55; }

/* ===================== SHARED CHROME ===================== */
.wrap { width: min(var(--container-max), 94vw); margin: 0 auto; }
.section { position: relative; z-index: 2; padding: clamp(4.5rem, 10vw, 9rem) 0; }
.eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.eyebrow .star { color: var(--red); }
.head { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -.01em; color: var(--cream); margin: 0 0 1.1rem; }
.head em { color: var(--red); font-style: normal; }
.lede { font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.6; color: var(--text-secondary); max-width: 42rem; }

.btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 1rem; padding: 1rem 1.6rem; border-radius: var(--radius-full); cursor: pointer; border: 0; transition: transform .3s var(--ease-spring), box-shadow .3s, background .3s; }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: linear-gradient(135deg, var(--red), var(--rust)); color: #fff; box-shadow: 0 0 30px rgba(226,60,44,.32); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 0 48px rgba(226,60,44,.5); }
.btn--ghost { background: rgba(232,176,74,.06); color: var(--gold2); border: 1px solid var(--line-strong); }
.btn--ghost:hover { transform: translateY(-3px); background: rgba(232,176,74,.12); }

/* ===================== HERO ===================== */
.chero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; z-index: 2; }
.chero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .55; filter: sepia(.26) saturate(1.06) brightness(.9); }
.chero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(95deg, rgba(14,9,7,.93) 0%, rgba(14,9,7,.6) 44%, rgba(14,9,7,.2) 100%),
  linear-gradient(180deg, rgba(14,9,7,.28), transparent 32%, #0e0907 100%); }
.chero__inner { position: relative; z-index: 2; width: min(var(--container-max), 94vw); margin: 0 auto; padding: 8rem 0 5rem; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.chero__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .96; letter-spacing: -.015em; color: var(--cream); margin: 0 0 1.3rem; }
.chero__title em { color: var(--red); font-style: normal; text-shadow: 0 0 40px rgba(226,60,44,.4); }
.chero__lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--text-secondary); margin: 0 0 2rem; max-width: 36rem; }
.chero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* command readout panel */
.readout { justify-self: end; width: min(360px, 92%); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.readout__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.readout__label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); }
.readout__live { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; color: var(--olive); display: inline-flex; align-items: center; gap: .4rem; }
.readout__live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 8px var(--olive); animation: pulseDot 1.6s infinite; }
.readout__temp { font-family: var(--font-display); font-weight: 700; font-size: 4.4rem; line-height: 1; color: var(--cream); }
.readout__temp sup { font-size: 1.6rem; color: var(--gold); vertical-align: top; }
.readout__sub { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tan); margin-top: .2rem; }
.readout__rows { margin-top: 1.2rem; display: grid; gap: .55rem; }
.readout__row { display: flex; justify-content: space-between; font-size: .82rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.readout__row span:first-child { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); }
.readout__row span:last-child { font-weight: 700; color: var(--cream); }
.readout__row .ok { color: var(--olive); }

.scrollcue { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tan); display: grid; justify-items: center; gap: .5rem; }
.scrollcue .ln { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); }

/* ===================== KPI STAT WALL ===================== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.4rem 1.3rem; position: relative; overflow: hidden; }
.kpi::before { content: "★"; position: absolute; top: 1rem; right: 1.1rem; color: var(--line-strong); font-size: .8rem; }
.kpi__label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); }
.kpi__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.05; margin-top: .4rem; }
.kpi__num.gold { color: var(--gold2); } .kpi__num.red { color: var(--red2); } .kpi__num.denim { color: var(--denim); } .kpi__num.olive { color: var(--olive); }
.kpi__sub { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tan2); margin-top: .3rem; }

/* ===================== SERVICES ===================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.svc { position: relative; overflow: hidden; min-height: 290px; border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); background: var(--panel-solid); transition: transform .5s var(--ease-out-expo), box-shadow .5s, border-color .5s; }
.svc:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(232,176,74,.12); }
.svc__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .4; filter: sepia(.3) saturate(1.05); transition: opacity .5s, transform .7s var(--ease-out-expo); z-index: 0; }
.svc:hover .svc__bg { opacity: .58; transform: scale(1.06); }
.svc::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 28%, rgba(14,9,7,.94) 100%); }
.svc > * { position: relative; z-index: 2; }
.svc__tag { align-self: flex-start; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold2); padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: rgba(14,9,7,.5); margin-bottom: auto; }
.svc__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; color: var(--cream); margin: 1rem 0 .4rem; }
.svc__desc { font-size: .92rem; color: var(--text-secondary); margin: 0; }
.svc__cta { margin-top: .9rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); }
.svc--wide { grid-column: span 2; }
.svc--emer { background: linear-gradient(135deg, rgba(139,21,16,.5), var(--panel-solid)); border-color: rgba(226,60,44,.4); }
.svc--emer .svc__tag { color: #fff; border-color: rgba(255,255,255,.3); }
.svc--emer .svc__cta { color: #fff; }

/* ===================== HOW IT WORKS (pinned) ===================== */
.howscene .scene__sticky { background: #0e0907; }
.howscene .scene__media { opacity: .42; filter: sepia(.4) saturate(1.1); }
.howstep { width: min(var(--container-max), 90vw); text-align: center; }
.howstep__num { font-family: var(--font-mono); font-size: clamp(3.5rem, 12vw, 9rem); color: transparent; -webkit-text-stroke: 1.4px var(--line-strong); line-height: .8; }
.howstep__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 5.4vw, 4rem); color: var(--cream); margin: .5rem 0 .8rem; }
.howstep__title em { color: var(--red); font-style: normal; }
.howstep__body { font-size: clamp(1rem, 1.5vw, 1.22rem); color: var(--text-secondary); max-width: 34rem; margin: 0 auto; line-height: 1.55; }
.howrail { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 5; }
.howrail span { width: 34px; height: 3px; border-radius: 3px; background: rgba(232,176,74,.18); transition: background .4s; }
.howrail span.on { background: var(--gold); }

/* ===================== REVIEWS ===================== */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
.rev { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.7rem; }
.rev__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: .7rem; }
.rev__body { font-size: 1rem; line-height: 1.6; color: var(--cream); margin: 0 0 1.1rem; }
.rev__who { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gold2); }
.rev__where { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); margin-top: .2rem; }

/* ===================== CTA ===================== */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(5rem, 11vw, 9rem) 0; z-index: 2; }
.cta__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1; color: var(--cream); margin: 0 0 1rem; }
.cta__title em { color: var(--red); font-style: normal; }
.cta__lede { color: var(--text-secondary); font-size: 1.12rem; margin: 0 auto 2.2rem; max-width: 32rem; }
.cta__row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===================== FOOTER ===================== */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 3.5rem 0 4rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer__blurb { color: var(--text-secondary); font-size: .92rem; max-width: 22rem; margin: 1rem 0; }
.footer__logo img { height: 46px; }
.footer__socials { display: flex; gap: .7rem; }
.footer__social { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color .3s, background .3s; }
.footer__social:hover { border-color: var(--gold); background: rgba(232,176,74,.1); }
.footer__social img { width: 18px; height: 18px; }
.footer__title { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__col a, .footer__col li { color: var(--text-secondary); font-size: .9rem; }
.footer__col a:hover { color: var(--gold2); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tan); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 940px) {
  .chero { min-height: 92svh; }
  .chero__inner { grid-template-columns: 1fr; padding: 6.5rem 0 3rem; gap: 1.8rem; }
  .chero__title { font-size: clamp(2.7rem, 9vw, 3.8rem); }
  .readout { justify-self: start; width: 100%; max-width: 420px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .svc-grid, .rev-grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .kpis, .svc-grid, .rev-grid, .footer__grid { grid-template-columns: 1fr; }
  .svc--wide { grid-column: span 1; }
  .chero__vid { opacity: .42; }
  .chero__cta { width: 100%; }
  .chero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .section { padding: 3.5rem 0; }
  .howscene.scene--pin { min-height: 0; }
  .howscene .scene__sticky { position: relative; height: auto; min-height: auto; display: block; padding: 3rem 0; }
  .howscene .scene__step { position: relative; opacity: 1; pointer-events: auto; padding: 2rem 0; }
  .howscene .scene__media { position: absolute; }
  .howrail { display: none; }
}
@media (min-width: 2200px) { :root { --container-max: 1840px; } html { font-size: 21px; } }

html.no-motion .howscene .scene__sticky { position: relative; height: auto; display: block; padding: 3rem 0; }
html.no-motion .howscene .scene__step { position: relative; opacity: 1; padding: 2rem 0; }
html.no-motion .howrail { display: none; }

/* =====================================================================
   INNER-PAGE COMPONENTS  (page header + install tiers)
   ===================================================================== */
.pagehead { position: relative; z-index: 2; padding: clamp(7rem, 12vw, 11rem) 0 clamp(3rem,6vw,5rem); overflow: hidden; }
.pagehead__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: sepia(.4) saturate(1.1); z-index: 0; }
.pagehead::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,9,7,.5), #0e0907); }
.pagehead > .wrap { position: relative; z-index: 2; }
.pagehead__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .97; letter-spacing: -.015em; color: var(--cream); margin: 0 0 1.2rem; }
.pagehead__title em { color: var(--red); font-style: normal; }
.pagehead__lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--text-secondary); max-width: 40rem; line-height: 1.55; }

.tiers { margin-top: 3rem; }
.tiers__intro { max-width: 42rem; margin-bottom: 2rem; }
.tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tier { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; transition: transform .5s var(--ease-out-expo), border-color .5s, box-shadow .5s; }
.tier:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.tier--better { border-color: var(--line-strong); box-shadow: 0 0 40px rgba(232,176,74,.1); }
.tier__badge { align-self: flex-start; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold2); padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); margin-bottom: 1rem; }
.tier--better .tier__badge { color: #fff; background: linear-gradient(135deg, var(--red), var(--rust)); border-color: transparent; }
.tier__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; color: var(--cream); margin: 0 0 .3rem; }
.tier__spec { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.tier__body { font-size: .92rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.2rem; }
.tier__bullets { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.tier__bullets li { position: relative; pa
/* ===================== HOW-IT-WORKS — per-step cinematic backgrounds ===================== */
.howbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.howbg [data-stepbg] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity 1s var(--ease-out-expo), transform 1.6s var(--ease-out-expo); filter: sepia(.3) saturate(1.05) brightness(.82); }
.howbg [data-stepbg].is-on { opacity: .5; transform: scale(1); }
.howscene .scene__scrim { z-index: 1; }
.howscene .scene__step { z-index: 2; }
.howprog { position: absolute; left: 9%; right: 9%; bottom: 3.6rem; height: 3px; background: rgba(232,176,74,.16); border-radius: 3px; z-index: 5; overflow: hidden; }
.howprog i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); transform-origin: left; transform: scaleX(0); }
@media (max-width: 620px) {
  .howbg [data-stepbg] { opacity: 0 !important; transform: none !important; }
  .howbg [data-stepbg]:first-child { opacity: .35 !important; position: absolute; }
  .howprog { display: none; }
}