/* ============================================================
   Password Vault page - Figma frame 6142:1107
   ("Password Vault — High Fidelity v1 (Desktop 1440)").
   Shared header/footer/steps/brand panel/FAQ/CTA styles live in ezee.css.
   ============================================================ */

/* ---------- 01 Hero (6161:41619) ---------- */
.vault-hero{background:var(--surface-subtle);padding-block:80px} /* Figma: raw 80px */
.vault-hero__inner{display:flex;align-items:center;gap:40px} /* Figma: raw 40px */
.vault-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);width:520px;flex:none}
.vault-hero .eyebrow img{object-fit:none} /* keep the 12x15 glyph at its Figma size inside the 16px icon box */
.vault-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.vault-hero__visual{position:relative;flex:none;width:640px;aspect-ratio:640/540}
.vault-hero__photo{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius-xl)}
.vault-hero__photo img{width:100%;height:100%;object-fit:cover}
.vault-hero__card{position:absolute;height:auto;max-width:none}
/* positions from Figma (px / 640x540 frame) */
.vault-hero__card--login{left:2.5%;top:52.593%;width:37.109%}   /* 16, 284, 237.5 */
.vault-hero__card--gen{left:67.813%;top:2.963%;width:29.688%}   /* 434, 16, 190 */

/* ---------- Web/Section Head as used in 02 + 05: 12px gap, Text/Secondary body ---------- */
.vault-head{gap:var(--space-3)}
.vault-head .section-head__body{color:var(--text-secondary)}

/* ---------- 02 What lives in your vault (6144:1202) ---------- */
.vault-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8)}
.vault-card{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.vault-card__well{aspect-ratio:382/180;background:var(--brand-subtle)}
.vault-card__well img{width:100%;height:100%;object-fit:cover}
/* Figma card is a fixed 316px with its 1px stroke inside the layout, which leaves 22px under the
   body text instead of the nominal 24px - reproduced here so the card lands on 316px. */
.vault-card__caption{flex:1;display:flex;flex-direction:column;gap:var(--space-3);padding:20px var(--space-5) 22px} /* Figma: raw 20px top */

/* ---------- 09 Security - Vault protection (6334:2) ---------- */
.vault-protect{background:var(--primary-900);padding-block:var(--section-y)}
.vault-protect__head{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center} /* Figma: raw 22px */
.vault-protect__chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 14px; /* Figma: raw 14px */
  background:var(--primary-900);border:1px solid var(--primary-800);border-radius:var(--radius-pill);
  color:var(--white);font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px;white-space:nowrap}
.vault-protect__head h2{color:var(--white)}
.vault-protect__head .t-lead{max-width:664px;color:var(--primary-100)}
.vault-protect__body{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-8)}
.vault-pillars{display:flex;flex-direction:column;gap:30px;width:511px;flex:none} /* Figma: raw 30px */
.vault-pillar{display:flex;align-items:flex-start;gap:28px} /* Figma: raw 28px */
.vault-pillar + .vault-pillar{padding-top:30px;border-top:1px solid var(--primary-800)}
.vault-pillar__num{color:var(--brand);white-space:nowrap}
.vault-pillar__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.vault-pillar__copy h3{color:var(--white)}
.vault-pillar__copy p{color:var(--primary-100)}
.vault-protect__media{flex:none;width:603px;aspect-ratio:603/522.6;overflow:hidden;border-radius:var(--radius-xl)}
.vault-protect__media img{width:100%;height:100%;object-fit:cover;object-position:50% 0} /* Figma crop: top-aligned, 107.84% tall */

/* ---------- 05 Security (6147:1283) ---------- */
/* Figma row is 1236 wide, centred on the 1200 grid (18px past each side) */
.vault-private{display:flex;align-items:stretch;justify-content:space-between;width:1236px;margin:var(--space-8) -18px 0}
.vault-private__media{position:relative;flex:none;width:586px;overflow:hidden;border-radius:var(--radius-lg)}
.vault-private__photo{position:absolute;max-width:none;width:146.76%;height:104.31%;left:-32.51%;top:-4.22%} /* Figma image crop */
.vault-private__card{position:absolute;max-width:none;height:auto}
/* positions from Figma (px / 586x464 frame; the credit card export includes its drop shadow) */
.vault-private__card--credit{left:62.014%;top:34.011%;width:32.082%} /* 363.4, 157.8, 188 */
.vault-private__card--gen{left:2.56%;top:77.459%;width:32.423%}       /* 15, 359.4, 190 */
.vault-private__features{flex:none;display:grid;grid-template-columns:repeat(2,276px);align-items:center;gap:var(--space-5);padding:var(--space-5)}
.vault-feature{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-3);background:var(--white);border-radius:var(--radius-md)}
.vault-feature__tile{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--gray-50)}
.vault-feature p{color:var(--text-secondary)}

/* ---------- 10 Social proof (6337:2) ---------- */
/* Fixed 736px band that clips the two testimonial columns, as in Figma */
.vault-proof{height:736px;overflow:hidden;background:var(--surface-subtle)}
.vault-proof__inner{display:flex;align-items:center;height:100%}
.vault-proof__rail{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);width:380px;flex:none;margin-right:var(--space-8)}
.vault-proof__rating{display:flex;align-items:center;gap:18px} /* Figma: raw 18px */
.vault-proof__score{font-family:var(--font-head);font-weight:700;font-size:76px;line-height:1;color:var(--text-primary)} /* Figma: raw 76px */
.vault-proof__stars-col{display:flex;flex-direction:column;gap:var(--space-1)}
.vault-proof__stars{font-size:16px;line-height:1.172;letter-spacing:2px;color:#fab82e} /* Figma: raw star colour, not a variable */
.vault-proof__stars--lg{font-size:22px}
.vault-proof__stats{display:flex;align-items:flex-start;gap:var(--space-5);width:100%;padding:20px var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.vault-proof__stat{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vault-proof__stat-num{font-family:var(--font-head);font-weight:700;font-size:28px;line-height:1.2;color:var(--text-primary)} /* Figma: raw 28px */
.vault-proof__stat-divider{flex:none;width:1px;height:44px;background:var(--border)}
.vault-proof__col{display:flex;flex-direction:column;gap:var(--space-5);width:366px;flex:none;align-self:flex-start}
.vault-proof__col--a{margin-top:-22.19px;margin-right:var(--space-5)}
.vault-proof__col--b{margin-top:-23.19px;padding-top:var(--space-7)}

.vault-quote{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:26px 28px; /* Figma: raw 18 / 26 / 28 */
  background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card)} /* Figma: raw 20px radius */
.vault-quote__text{font-size:16px;line-height:26px;color:var(--text-primary)}
.vault-quote__author{display:flex;align-items:center;gap:var(--space-3);width:100%}
.vault-quote__avatar{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--radius-pill);
  background:var(--brand-subtle);color:var(--brand);font-size:14px;line-height:1.172;font-weight:500}
.vault-quote__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:14px;line-height:20px}
.vault-quote__name{font-weight:500;color:var(--text-primary)}
.vault-quote__role{color:var(--text-secondary);white-space:pre-wrap}
.vault-quote--brand{background:var(--brand);border:0;box-shadow:none}
.vault-quote--brand .vault-quote__text,.vault-quote--brand .vault-quote__name{color:var(--white)}
.vault-quote--brand .vault-quote__avatar{background:var(--white)}
.vault-quote--brand .vault-quote__role{color:var(--primary-100)}

/* ============================================================
   Responsive - same content, re-flowed
   ============================================================ */
@media (max-width:1280px){
  .vault-private{width:auto;margin-inline:0;gap:var(--space-5)}
  .vault-private__media{flex:1 1 auto;width:auto}
}

@media (max-width:1100px){
  .vault-hero{padding-block:var(--space-8)}
  .vault-hero__inner{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .vault-hero__copy{width:auto;max-width:640px}
  .vault-hero__visual{width:100%;max-width:640px}

  .vault-cards{grid-template-columns:repeat(2,1fr)}

  .vault-protect__body{flex-direction:column;align-items:stretch;gap:var(--space-7)}
  .vault-pillars{width:auto}
  .vault-protect__media{width:100%;max-width:603px}

  .vault-private{flex-direction:column}
  .vault-private__media{flex:none;width:100%;aspect-ratio:586/464}
  .vault-private__features{grid-template-columns:repeat(2,1fr);align-items:stretch;padding:0}

  .vault-proof{height:auto;padding-block:var(--section-y)}
  .vault-proof__inner{flex-wrap:wrap;align-items:flex-start;gap:var(--space-5)}
  .vault-proof__rail{width:100%;margin:0 0 var(--space-5)}
  .vault-proof__col{flex:1 1 300px;width:auto}
  .vault-proof__col--a,.vault-proof__col--b{margin:0;padding-top:0}
}

@media (max-width:640px){
  .vault-hero{padding-block:var(--space-7)}
  .vault-cards{grid-template-columns:1fr}
  .vault-pillar{gap:var(--space-4)}
  .vault-private__features{grid-template-columns:1fr}
  .vault-proof__col{flex-basis:100%}
}