/* ============================================================================
   vault.css — Legacy Maker Crypto/Stock Vault, crypto.shandasumpter.com

   Built 2026-09-15. The whole stylesheet for this site; nothing else loads.

   THE DESIGN IS THE REVENUE CHALLENGE BUNDLE PAGE'S PRODUCT TILE
   (rj.shandasumpter.com/p6v2/ — Revenue Jump/public-optin/css/bundle-b.css),
   cut down to what the brief allows: product name and price, nothing else.
   Tokens, fonts and base rules are copied from that project's styles.css so
   this site has no dependency on it. If the Heartcore palette ever changes,
   it has to change here too.
   ========================================================================= */


/* ---------------------------------------------------------------- Fonts
   F37 Bergman is self-hosted (licensed Heartcore face, same file as Revenue
   Jump). Work Sans comes from Google Fonts in the page head. */

@font-face {
  font-family: "F37 Bergman";
  src: url("../fonts/F37Bergman-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------- Tokens */

:root {
  --navy: #003a4a;
  --gold: #fcd271;
  --teal: #afe1da;
  --teal-deep: #0094aa;
  --cream: #f7f2ec;
  --cream-deep: #efe7dd;
  --white: #ffffff;

  --navy-80: rgba(0, 58, 74, 0.8);
  --navy-55: rgba(0, 58, 74, 0.55);
  --navy-15: rgba(0, 58, 74, 0.15);

  --display: "F37 Bergman", Georgia, serif;
  --body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 5rem);
}


/* ----------------------------------------------------------------- Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  background: var(--teal);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ---------------------------------------------------------- Brand strip */

.vault-brand {
  padding: 1rem var(--gutter) 0.9375rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-55);
  border-bottom: 1px solid var(--navy-15);
}


/* --------------------------------------------------------------- Column
   Same 688px column as /p6v2/ — written as 688 + two gutters because the
   wrapper is border-box and pads itself. */

.vault-main {
  padding-top: clamp(1.5rem, 5vw, 3.5rem);
}

.wrap {
  width: 100%;
  max-width: calc(688px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* --------------------------------------------------------- Product card
   The ring stays ON TOP at every width, unlike /p6v2/ where it moves to a
   left column from 720px. That page's detail column was short; here the Whop
   form is most of the card, so a side column became a ~900px-tall strip of
   empty cream with a small ring at the top of it. One stacked card reads
   cleanly on both, so there is deliberately no breakpoint. */

.vault-card {
  background: var(--white);
  border: 1px solid var(--navy-15);
  border-radius: 24px;
  overflow: hidden;
}

.vault-card__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--cream-deep);
  border-bottom: 1px solid var(--navy-15);
}

/* A drawn ring, not an image asset, exactly as on /p6v2/. Its three lines are
   the product name broken up — no copy that is not already in the h1. */
.vault-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 170px;
  height: 170px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  text-align: center;
}

.vault-ring__kicker,
.vault-ring__foot {
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vault-ring__name {
  font-family: var(--display);
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.vault-card__detail {
  padding: clamp(1.25rem, 3.5vw, 2rem);
}

.vault-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}


/* ---------------------------------------------------------------- Price */

.vault-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.vault-price__was {
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--navy-55);
  text-decoration-thickness: 2px;
}

.vault-price__now {
  font-weight: 800;
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
  line-height: 1.1;
}

/* Two-payment page, and the payment-plan option on /offers/. See the note in
   that page's header. */
.vault-terms {
  margin-top: 0.375rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--navy-80);
}


/* --------------------------------------------------------------- Toggle
   /offers/ only: two clickable payment-option cards, swapped by
   offer-toggle.js. */

.vault-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.vault-toggle__opt {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--cream);
  border: 1.5px solid var(--navy-15);
  border-radius: 14px;
  font: inherit;
  font-family: var(--body);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vault-toggle__opt:hover {
  border-color: var(--navy-55);
}

.vault-toggle__opt.is-active {
  background: var(--white);
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 1px var(--teal-deep);
}

.vault-toggle__name {
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-80);
}

.vault-toggle__price {
  font-weight: 800;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}

.vault-toggle__price-sub {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--navy-55);
  text-transform: none;
  letter-spacing: normal;
}


/* ------------------------------------------------------------- Checkout
   Whop's iframe mounts in here and sizes itself. */

.vault-checkout {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--navy-15);
}


/* ------------------------------------------------- Thank-you / 404 card */

.vault-done {
  text-align: center;
}

.vault-done .vault-card__detail {
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}

.vault-tick {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border: 1.5px solid var(--teal-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--teal-deep);
}

.vault-done__line {
  margin-top: 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--navy-80);
}


/* ------------------------------------------------------------ Legal row */

.legal {
  padding: clamp(2rem, 5vw, 3rem) var(--gutter);
  text-align: center;
  font-size: 0.875rem;
  color: var(--navy-55);
}

.legal a {
  color: var(--navy-55);
}

.legal a:hover {
  color: var(--navy);
}