/* Shared chrome from the homepage navigation and the Security FAQ and waitlist.
   Page color matches the homepage: #030607 with a quiet teal wash. */
body:has(.assistant-page),
body:has(.security-page),
body:has(.deposit-page),
body:has(.card-page) {
  background: #030607;
  color: #f8f9fa;
}
.assistant-page,
.security-page,
.deposit-page,
.card-page {
  --bg: #030607;
  --text: #f8f9fa;
  --muted: #b4b8ba;
  --accent: #60d4cf;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  padding-top: 0;
  background-color: #030607;
  background-image:
    radial-gradient(ellipse 12% 42% at 82% 18%, rgba(126, 231, 223, .32), transparent 68%),
    radial-gradient(ellipse 20% 50% at 78% 28%, rgba(36, 150, 140, .55), transparent 64%),
    radial-gradient(ellipse 32% 46% at 74% 34%, rgba(12, 57, 57, .95), transparent 66%);
}
.deposit-page .panel { border-color: rgba(96, 212, 207, .32); }
.deposit-page .balance { border-color: rgba(186, 206, 204, .55); }
.card-page .ambiance-orb--teal,
.card-page .ambiance-orb--teal-soft {
  background: radial-gradient(circle, rgba(18, 78, 76, .72) 0%, transparent 62%);
}
.card-page .ambiance-orb--blue,
.card-page .ambiance-orb--violet { background: transparent; }
.assistant-page .vn-header,
.security-page .vn-header,
.deposit-page .vn-header,
.card-page .vn-header {
  width: min(1310px, calc(100% - 9%));
  max-width: 1310px;
  min-height: 64px;
  height: auto;
  margin: 20px auto 0;
  padding: 0;
  background: rgba(8, 15, 16, .48);
  border: 1px solid rgba(180, 218, 214, .10);
  border-radius: 16px;
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: Arial, Helvetica, sans-serif;
}
.assistant-page .vn-header .vn-bar,
.security-page .vn-header .vn-bar,
.deposit-page .vn-header .vn-bar,
.card-page .vn-header .vn-bar {
  min-height: 62px;
  padding: 10px 18px;
  gap: 24px;
}
.assistant-page .vn-header .vn-brand,
.security-page .vn-header .vn-brand,
.deposit-page .vn-header .vn-brand,
.card-page .vn-header .vn-brand {
  font-size: 24px;
  gap: 9px;
  letter-spacing: -.8px;
}
.assistant-page .vn-header .vn-brand img,
.security-page .vn-header .vn-brand img,
.deposit-page .vn-header .vn-brand img,
.card-page .vn-header .vn-brand img { width: 30px; height: 30px; }
.assistant-page .vn-header .vn-links,
.security-page .vn-header .vn-links,
.deposit-page .vn-header .vn-links,
.card-page .vn-header .vn-links { font-size: 14px; gap: 8px; }
.assistant-page .vn-header .vn-links a,
.security-page .vn-header .vn-links a,
.deposit-page .vn-header .vn-links a,
.card-page .vn-header .vn-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 104px;
  height: 40px;
  padding: 0;
  line-height: 1;
  text-align: center;
}
.assistant-page .vn-header .vn-links a span,
.security-page .vn-header .vn-links a span,
.deposit-page .vn-header .vn-links a span,
.card-page .vn-header .vn-links a span { position: relative; }
.assistant-page .vn-header .vn-links a::after,
.security-page .vn-header .vn-links a::after,
.deposit-page .vn-header .vn-links a::after,
.card-page .vn-header .vn-links a::after { content: none; }
.assistant-page .vn-header .vn-cta,
.security-page .vn-header .vn-cta,
.deposit-page .vn-header .vn-cta,
.card-page .vn-header .vn-cta {
  font-size: 13px;
  min-height: 40px;
  padding: 11px 20px;
}

.assistant-page .faq,
.security-page .faq,
.deposit-page .faq,
.card-page .faq {
  width: min(1310px, calc(100% - 9%));
  max-width: 1310px;
  margin: 0 auto;
  padding: 54px 0 55px;
  border: 0;
}
.assistant-page .faq h2,
.security-page .faq h2,
.deposit-page .faq h2,
.card-page .faq h2 {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.08;
  margin: 0 0 32px;
}
.assistant-page .faq details,
.security-page .faq details,
.deposit-page .faq details,
.card-page .faq details { border-top: 1px solid #ffffff35; padding: 0; }
.assistant-page .faq details:last-child,
.security-page .faq details:last-child,
.deposit-page .faq details:last-child,
.card-page .faq details:last-child { border-bottom: 1px solid #ffffff35; }
.assistant-page .faq summary,
.security-page .faq summary,
.deposit-page .faq summary,
.card-page .faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  padding: 25px 0;
  line-height: 1.4;
  min-height: 0;
}
.assistant-page .faq summary::-webkit-details-marker,
.security-page .faq summary::-webkit-details-marker,
.deposit-page .faq summary::-webkit-details-marker,
.card-page .faq summary::-webkit-details-marker { display: none; }
.assistant-page .faq summary span:last-child::before,
.security-page .faq summary span:last-child::before,
.deposit-page .faq summary span:last-child::before,
.card-page .faq summary span:last-child::before { content: '+'; font-size: 27px; font-weight: 300; line-height: 1; }
.assistant-page .faq details[open] summary span:last-child::before,
.security-page .faq details[open] summary span:last-child::before,
.deposit-page .faq details[open] summary span:last-child::before,
.card-page .faq details[open] summary span:last-child::before { content: '−'; }
.assistant-page .faq details p,
.security-page .faq details p,
.deposit-page .faq details p,
.card-page .faq details p { font-size: 17px; line-height: 1.55; padding: 0 0 26px; max-width: 85ch; }
.assistant-page .faq details[open] p,
.security-page .faq details[open] p,
.deposit-page .faq details[open] p,
.card-page .faq details[open] p { animation: answer-in .25s cubic-bezier(.2,.8,.2,1); }

.assistant-page .waitlist,
.security-page .waitlist,
.deposit-page .waitlist,
.card-page .waitlist {
  width: min(1440px, 100%);
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
  padding: 45px 5% 100px;
  background: transparent;
}
.assistant-page .waitlist h2,
.security-page .waitlist h2,
.deposit-page .waitlist h2,
.card-page .waitlist h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.08;
  margin: 0 0 20px;
}
.assistant-page .waitlist > p,
.security-page .waitlist > p,
.deposit-page .waitlist > p,
.card-page .waitlist > p { font-size: 18px; line-height: 1.55; margin: 0; }
.assistant-page .waitlist-form,
.security-page .waitlist-form,
.deposit-page .waitlist-form,
.card-page .waitlist-form {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: 680px;
  width: auto;
  margin: 30px auto 0;
}
.assistant-page .waitlist input,
.security-page .waitlist input,
.deposit-page .waitlist input,
.card-page .waitlist input {
  min-width: 0;
  flex: 1;
  border: 1px solid #ffffff65;
  border-radius: 999px;
  background: #02100d80;
  color: white;
  padding: 15px 24px;
  font-size: 16px;
  min-height: 0;
}
.assistant-page .waitlist-form .button,
.security-page .waitlist-form .button,
.deposit-page .waitlist-form .button,
.card-page .waitlist-form .button {
  min-height: 46px;
  padding: 13px 25px;
  font-size: 14px;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .assistant-page,
  .security-page,
  .deposit-page,
  .card-page { padding-top: 0; }
  .assistant-page .vn-header,
  .security-page .vn-header,
  .deposit-page .vn-header,
  .card-page .vn-header { margin-top: 12px; }
  .assistant-page .vn-header .vn-bar,
  .security-page .vn-header .vn-bar,
  .deposit-page .vn-header .vn-bar,
  .card-page .vn-header .vn-bar { min-height: 60px; }
  .assistant-page .faq,
  .security-page .faq,
  .deposit-page .faq,
  .card-page .faq { padding: 10px 0 35px; }
  .assistant-page .faq h2,
  .security-page .faq h2,
  .deposit-page .faq h2,
  .card-page .faq h2 { font-size: 32px; }
  .assistant-page .faq summary,
  .security-page .faq summary,
  .deposit-page .faq summary,
  .card-page .faq summary { font-size: 17px; padding: 22px 0; }
  .assistant-page .faq details p,
  .security-page .faq details p,
  .deposit-page .faq details p,
  .card-page .faq details p { font-size: 16px; }
  .assistant-page .waitlist,
  .security-page .waitlist,
  .deposit-page .waitlist,
  .card-page .waitlist { padding: 35px 6% 65px; }
  .assistant-page .waitlist h2,
  .security-page .waitlist h2,
  .deposit-page .waitlist h2,
  .card-page .waitlist h2 { font-size: 42px; }
  .assistant-page .waitlist-form,
  .security-page .waitlist-form,
  .deposit-page .waitlist-form,
  .card-page .waitlist-form { flex-direction: column; max-width: 440px; }
  .assistant-page .waitlist input,
  .security-page .waitlist input,
  .deposit-page .waitlist input,
  .card-page .waitlist input { min-height: 48px; }
  .assistant-page .waitlist-form .button,
  .security-page .waitlist-form .button,
  .deposit-page .waitlist-form .button,
  .card-page .waitlist-form .button { width: 100%; min-height: 48px; }
}
.assistant-page .waitlist.is-joined .waitlist-lead,
.security-page .waitlist.is-joined .waitlist-lead,
.deposit-page .waitlist.is-joined .waitlist-lead,
.card-page .waitlist.is-joined .waitlist-lead,
.assistant-page .waitlist.is-joined .waitlist-form,
.security-page .waitlist.is-joined .waitlist-form,
.deposit-page .waitlist.is-joined .waitlist-form,
.card-page .waitlist.is-joined .waitlist-form,
.assistant-page .waitlist.is-joined .form-status,
.security-page .waitlist.is-joined .form-status,
.deposit-page .waitlist.is-joined .form-status,
.card-page .waitlist.is-joined .form-status { display: none; }
#waitJoined[hidden] { display: none !important; }
.waitlist-joined { margin: 28px auto 0; text-align: center; background: none; border: 0; padding: 0; }
.waitlist-joined p { margin: 0; font-size: 18px; line-height: 1.55; color: #f8f9fa; }
.waitlist-joined p + p { margin-top: 8px; color: #b4b8ba; }

@media (prefers-reduced-motion: reduce) {
  .assistant-page .faq details[open] p,
  .security-page .faq details[open] p,
  .deposit-page .faq details[open] p,
  .card-page .faq details[open] p { animation: none; }
}