/* ============================================================================
   CROWN VAULT — THE FRONT DOOR
   ----------------------------------------------------------------------------
   Loaded on top of overview.css, which already carries the tokens, the type and
   the feature cards. Everything here is the handful of things a landing page needs
   that a document does not: a fixed chrome with a way in, real buttons, and a hero
   that has to do its work before anybody scrolls.

   Same world as the app and the overview deliberately. Somebody who signs up from
   this page should find the thing they were shown.
   ============================================================================ */

/* The way in, always reachable. */
.lp-chrome{
  position:sticky;top:0;z-index:30;
  background:rgba(233,237,242,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--stone-3);
}
.lp-chrome-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;
}
.lp-brand{margin-bottom:0;text-decoration:none;}

/* --------------------------------------------------------------- BUTTONS --- */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:100px;
  font-size:15px;font-weight:600;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.lp-btn-solid{
  background:var(--graphite);color:var(--stone-0);
  box-shadow:var(--lift-2);
}
.lp-btn-solid:hover{transform:translateY(-1px);box-shadow:var(--lift-3);}
.lp-btn-quiet{
  background:transparent;color:var(--graphite);
  border:1px solid var(--stone-3);
}
.lp-btn-quiet:hover{border-color:var(--slate-2);background:rgba(255,255,255,.6);}
.lp-btn:active{transform:translateY(0);}
.lp-btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

.lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.5vw,36px);}
.lp-note{margin:16px 0 0;font-size:13px;color:var(--slate-2);}

/* ------------------------------------------------------------------ HERO --- */
.lp-hero{padding:clamp(56px,9vw,116px) 0 clamp(48px,7vw,88px);}
.lp-hero h1{max-width:15ch;}
.lp-hero h1 em{font-style:normal;color:var(--brass-lo);}
.lp-hero .lede{margin-top:26px;}

/* The games, as their own marks. Muted at rest so they read as a fact about the
   product rather than as six competing logos, and only the row's shape registers. */
.lp-games{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3.4vw,40px);
  margin-top:clamp(40px,6vw,68px);padding-top:26px;
  border-top:1px solid var(--stone-3);
}
.lp-games img{
  height:26px;width:auto;object-fit:contain;
  opacity:.5;filter:grayscale(1);
  transition:opacity .2s ease, filter .2s ease;
}
.lp-games:hover img{opacity:.78;filter:grayscale(.45);}
@media (max-width:560px){.lp-games img{height:21px;}}

/* ----------------------------------------------------------------- PROOF --- */
/* The one section on a different ground, because it carries the only numbers on
   the page and they should not read as more copy. */
.lp-proof{background:var(--stone-0);border-block:1px solid var(--stone-3);}
.lp-figures{
  display:grid;gap:clamp(20px,3vw,36px);margin-top:clamp(32px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
}
.lp-figures .figure{
  padding-top:18px;border-top:2px solid var(--stone-3);
}
.lp-figures .fig-was{border-top-color:var(--down);}
.lp-figures .fig-now{border-top-color:var(--up);}
.lp-figures .fig-value{font-size:clamp(38px,5vw,54px);}
.lp-figures .fig-sub{max-width:26ch;}

/* ----------------------------------------------------------------- CLOSE --- */
.lp-close{padding-bottom:clamp(56px,8vw,104px);}
.lp-close h2{max-width:19ch;}

/* A landing page's feature cards are read, not opened, so they lose the pointer
   lift the overview's cards have. Nothing here expands. */
.lp-close + .footer{padding-top:0;}
#how .feat:hover{transform:none;box-shadow:var(--lift-1);}