/* Alexsias Digital Vault brand (Sep 2026): black glass set in gold, the same look as the vault plaques.
   Loaded after vault.css on every public page, so the whole site shares one palette. */
:root {
  --bg: #060504;
  --bg-2: #0d0a07;
  --navy: #120e09;
  --line: rgba(230, 200, 120, .24);
  --line-soft: rgba(240, 211, 134, .10);
  --text: #f3ecdd;
  --muted: #b3a58a;
  --dim: #7a6d57;
}
body { background: radial-gradient(1200px 700px at 50% -10%, #2a2014 0%, #0b0907 55%, #060504 100%) fixed, #060504; }

/* Tier cards and every holo panel become gold framed black glass plaques. */
.holo {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 230, 170, .08), rgba(0, 0, 0, 0) 60%),
    linear-gradient(162deg, #16120c, #070605 55%, #1c160d);
  border: 1px solid rgba(240, 211, 134, .75);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .85), inset 0 0 0 3px rgba(163, 122, 44, .6), inset 0 0 0 4px rgba(255, 226, 150, .22),
    0 0 26px rgba(230, 200, 120, .14), 0 0 70px -20px rgba(230, 200, 120, .3), 0 30px 60px -30px rgba(0, 0, 0, .9);
  backdrop-filter: none;
}
.holo.dim { border-color: rgba(240, 211, 134, .5); }
.holo.dim::before, .holo.dim::after { opacity: .55; }
.holo .ht { font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .22em; color: #f0d386; text-shadow: 0 0 12px rgba(240, 200, 110, .35); }
.tier .amt { color: #f6efe2; }
.tier li { color: #eadfc8; }
.tier li.inc, .tier .desc { color: #b3a58a; }
.tier.feature { box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .85), inset 0 0 0 3px #a37a2c, inset 0 0 0 5px rgba(255, 226, 150, .45),
    0 0 34px rgba(230, 200, 120, .24), 0 0 90px -20px rgba(230, 200, 120, .4), 0 30px 60px -30px rgba(0, 0, 0, .9); }

/* Panels, forms and library cards */
.panel { background: linear-gradient(180deg, rgba(28, 22, 14, .82), rgba(8, 7, 5, .88)); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select { background: rgba(0, 0, 0, .55); border-color: rgba(240, 211, 134, .16); }
.card { background: linear-gradient(162deg, #15110b, #070605 60%, #1a140c); border-color: rgba(240, 211, 134, .26); }
.card:hover { border-color: rgba(240, 211, 134, .6); }
.cover { background: radial-gradient(120% 90% at 30% 0%, #3a2c14, #0c0a07 70%); }
.inv .item { background: rgba(20, 16, 10, .6); }
footer { border-top-color: rgba(240, 211, 134, .14); }

/* The Vault film, rising out of the light as you walk through the door. */
.film { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .9s ease; }
.film.on { opacity: 1; }
.film-bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(255, 238, 200, .42), rgba(60, 42, 14, .78) 55%, rgba(0, 0, 0, .94)); }
.film-card { position: relative; width: min(1000px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; transform: scale(.96); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.film.on .film-card { transform: none; }
.film-eyebrow { font: 600 11px/1 'Cinzel', Georgia, serif; letter-spacing: .32em; text-transform: uppercase; color: #e6c878; }
.film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000;
  border: 1px solid rgba(240, 211, 134, .85);
  box-shadow: inset 0 0 0 1px #000, 0 0 0 3px rgba(163, 122, 44, .55), 0 0 0 4px rgba(255, 226, 150, .25), 0 0 60px rgba(230, 200, 120, .25), 0 40px 80px -30px #000; }
.film-frame video { width: 100%; height: 100%; display: block; background: #000; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 15px var(--sans); color: #1c1405; background: linear-gradient(180deg, #f0d386, #c9a24b); box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(230, 200, 120, .45); }
.film.playing .film-play { display: none; }
.film.playing.needsound .film-play { display: block; top: auto; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 10px 20px; font-size: 13px; white-space: nowrap; }
.film.playing.needsound .film-eyebrow { visibility: hidden; }
.film.ended .film-play { display: none; }
.film-actions { display: flex; gap: 12px; }

/* Last frame of the film: gold buttons rise just under the picture, never on top of it. */
.film-frame { overflow: visible; }
.film-frame video { border-radius: 10px; }
.film-end { position: absolute; left: 0; right: 0; top: calc(100% + 22px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 16px;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .8s ease .2s, transform .8s cubic-bezier(.2, .7, .2, 1) .2s; }
.film.ended .film-end { opacity: 1; transform: none; pointer-events: auto; }
.film-cta { display: inline-block; padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font: 700 15px var(--sans); letter-spacing: .02em; color: #1c1405; background: linear-gradient(180deg, #f0d386, #c9a24b);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .65), 0 0 34px rgba(230, 200, 120, .5); }
.film-cta.alt { color: #f0d386; background: rgba(0, 0, 0, .72); border: 1px solid rgba(240, 211, 134, .85); box-shadow: 0 10px 40px rgba(0, 0, 0, .65); }
.film-cta:hover, .film-cta:focus-visible { filter: brightness(1.08); outline: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .65), 0 0 0 2px #000, 0 0 0 4px #f0d386; }
.film.ended .film-actions { visibility: hidden; }
/* Short screens: shrink the picture so the buttons always fit below it. */
.film-card { width: min(1000px, 100%, calc((100vh - 230px) * 16 / 9)); }
/* Phones: stack the two buttons. */
@media (max-width: 700px) {
  .film-card { width: 100%; }
  .film-end { flex-direction: column; align-items: center; }
  .film-cta { padding: 13px 26px; font-size: 14px; min-width: 240px; }
}

/* Upgrade price: the full tier price shows crossed out beside what they actually pay. */
.btn s.was { opacity: .55; margin-left: 6px; font-weight: 500; }
.upgrade-note { margin-top: 10px; }