.backup-box{margin-top:28px;padding:28px;background:#100e0a;border:1px solid var(--line)}
.backup-box h2{font-size:28px}
.backup-box>p:not(.eyebrow){color:var(--muted);font-size:11px;line-height:2}
.backup-box input,.backup-box textarea{display:block;width:100%;background:#070604;border:1px solid var(--line);color:white;padding:12px;margin:10px 0}
.backup-box textarea{min-height:120px;direction:ltr;resize:vertical;font:11px monospace}
.backup-box>div{display:flex;gap:10px;flex-wrap:wrap}

/* Hero composition v1.0.1 — keep copy in the negative space, away from the lion. */
.hero{direction:ltr;justify-content:flex-start}
.hero-bg{background-position:center center}
.hero-copy{direction:rtl;text-align:right}

@media(max-width:980px) and (min-width:701px){
  .hero-copy{width:48%;max-width:520px}
  .hero-bg{background-position:58% center}
}

@media(max-width:700px){
  .hero{display:block;min-height:100svh;padding:52svh 18px 38px;direction:rtl;background:#070604}
  .hero-bg{inset:0 0 auto;height:59svh;background-size:auto 100%;background-position:95% center;background-repeat:no-repeat;background-color:#070604}
  .hero-vignette{inset:0 0 auto;height:67svh;background:linear-gradient(0deg,#070604 4%,rgba(7,6,4,.88) 14%,transparent 48%),linear-gradient(90deg,rgba(7,6,4,.2),transparent 40%,rgba(7,6,4,.08))}
  .hero-copy{width:100%;max-width:520px;margin:0 auto;text-align:center}
  .hero-copy .eyebrow{justify-content:center}
  .hero-copy>p:not(.eyebrow){margin-inline:auto;max-width:390px}
  .hero-copy h1{font-size:clamp(38px,11vw,50px);line-height:1.18;margin-top:12px}
  .hero-actions{max-width:390px;margin:24px auto}
  .hero-stats{max-width:430px;margin:26px auto 0;justify-content:space-around}
}

@media(max-width:390px){
  .hero{padding-top:48svh}
  .hero-bg{height:55svh;background-position:96% center}
  .hero-vignette{height:62svh}
  .hero-copy h1{font-size:37px}
  .hero-stats{gap:10px}
}