:root{--accent:var(--blue)}
/* Hero, rebuilt around a real device screenshot.
 *
 * The previous hero was a CSS drawing: a gradient rectangle with absolutely
 * positioned dots and an SVG path. It had no status bar, no home indicator,
 * square "dots", and a pattern line that floated off the grid -- it read as a
 * placeholder. This stylesheet frames a genuine screenshot instead, so the
 * chrome is real pixels and cannot drift.
 */
.vault-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(32px,6vw,88px);
  align-items:center;
  padding:32px 0 36px;
  max-width:1180px;
  margin:0 auto;
  padding-inline:0;
}

.hero-copy h1{
  font-family:var(--display);
  font-size:clamp(42px,6.2vw,84px);
  line-height:.94;
  letter-spacing:-.02em;
  margin:0 0 20px;
  color:var(--text);
}
.hero-copy h1 span{color:var(--accent)}

.hero-sub{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.55;
  color:var(--muted);
  margin:0 0 28px;
  max-width:32ch;
}

/* Three claims, not a feature dump. Each is checkable. */
.hero-points{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:grid;
  gap:10px;
  max-width:38ch;
}
.hero-points li{
  display:grid;
  gap:2px;
  padding-left:18px;
  position:relative;
}
.hero-points li::before{
  content:"";
  position:absolute;
  left:0;top:.55em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(155,216,243,.14);
}
.hero-points strong{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  letter-spacing:.01em;
}
.hero-points span{
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  align-items:center;
  margin-bottom:16px;
}

.availability{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:var(--muted);
  margin:0;
}
.availability span{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  flex:none;
}

/* ---- The device ---- */
.vault-phone{
  margin:0;
  display:grid;
  gap:14px;
  justify-items:center;
  perspective:1200px;
}

/* Thin bezel only. The screenshot already contains the status bar, Dynamic
 * Island, home indicator and a correctly drawn pattern, so the frame does no
 * work beyond separating the screen from the page. */
.vault-bezel{
  position:relative;
  width:100%;
  max-width:245px;
  border-radius:40px;
  padding:9px;
  background:linear-gradient(165deg,#2b323c,#14171d 55%,#0a0c0f);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 26px 60px -18px rgba(0,0,0,.85),
    0 2px 0 rgba(255,255,255,.05) inset;
  transform:rotateY(-7deg) rotateX(2deg);
  transform-style:preserve-3d;
}
.vault-bezel::after{
  /* screen gloss */
  content:"";
  position:absolute;
  inset:9px;
  border-radius:32px;
  background:linear-gradient(122deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%);
  pointer-events:none;
}
.vault-bezel picture{display:block}
.vault-bezel img{
  display:block;
  width:100%;
  height:auto;
  border-radius:32px;
  background:#0a0c0f;
}

.vault-caption{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  margin:0;
  max-width:34ch;
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .vault-hero{
    grid-template-columns:1fr;
    gap:40px;
    padding-top:40px;
    text-align:left;
  }
  .vault-phone{max-width:320px;margin-inline:auto}
  .vault-bezel{transform:none}
  .hero-sub,.hero-points{max-width:none}
}

@media (max-width:560px){
  .vault-hero{padding-inline:0;gap:32px}
  .hero-copy h1{font-size:clamp(46px,12vw,60px)}
  .vault-hero .hero-actions{gap:12px}
  .vault-hero .hero-actions .button{padding:12px 16px;font-size:13px}
  .vault-hero .hero-actions .text-action{font-size:12px;gap:8px}
  .vault-phone{max-width:270px}
}

@media (prefers-reduced-motion:reduce){
  .vault-bezel{transform:none}
}

/* The tour explains the app with actual captures, not a simulated security claim. */
.vault-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,360px);gap:6%}
.hero-copy h1{font-size:clamp(52px,6.2vw,84px)}
.hero-sub{max-width:43ch;font-size:17px}
.vault-phone{position:relative}
.tour-screen{display:grid;isolation:isolate}
.tour-screen .tour-image{grid-area:1/1;opacity:0;transition:opacity 350ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.tour-screen .tour-image.is-active{opacity:1}
.tour-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 15px;width:100%}
.tour-steps{display:flex;gap:6px}
.tour-steps button,.tour-toggle{border:0;background:transparent;color:var(--muted);font:500 12px var(--sans);min-height:44px;padding:8px;transition:color 150ms ease}
.tour-steps button{border-bottom:2px solid transparent}
.tour-steps button[aria-pressed=true]{color:var(--blue);border-bottom-color:var(--blue)}
.tour-toggle{text-decoration:underline;text-underline-offset:4px}
.tour-steps button:hover,.tour-toggle:hover{color:var(--text)}
.vault-caption strong,.vault-caption span{display:block}
.vault-caption strong{color:var(--text);font-size:14px;font-weight:500;margin-bottom:3px}
.vault-caption span{font-size:12px}
.button:active{transform:scale(.98)}
@media(max-width:900px){.vault-hero{grid-template-columns:1fr;gap:28px}.vault-phone{width:100%;max-width:360px}.hero-copy h1{font-size:clamp(48px,9vw,76px)}}
@media(max-width:560px){.hero-copy h1{font-size:clamp(43px,10vw,56px)}.hero-sub{font-size:16px}.hero-points{gap:8px}.hero-points strong{font-size:14px}.hero-points span{font-size:13px}.hero-actions .text-action{font-size:12px}.vault-hero .hero-actions{gap:8px 16px}}
@media(prefers-reduced-motion:reduce){.tour-screen .tour-image,.tour-steps button,.tour-toggle{transition:none}.button:active{transform:none}}

.vault-faq{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:80px 0 0}.vault-faq h2{font-size:clamp(42px,4.4vw,62px)}.vault-faq>div>p{color:var(--muted)}.vault-faq details{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px}.vault-faq summary{cursor:pointer;min-height:44px;padding:8px 0;font-size:16px;font-weight:500}.vault-faq details p{font-size:14px;color:var(--muted);margin:12px 0 0}.vault-faq details[open] summary{color:var(--blue)}@media(max-width:767px){.vault-faq{grid-template-columns:1fr;gap:25px;padding-top:60px}}
/* Keep support reachable without covering the tour controls or mobile CTAs. */
body:has([data-app-tour]) .assist.is-collapsed{position:static;display:flex;justify-content:flex-end;margin:0 auto;padding:0 4.5vw 24px;max-width:1400px}