/* VaultX — Homepage V2 preview overrides + new components (v2- prefixed) */
/* Loaded AFTER /styles.css. Contains only overrides + new component styles — */
/* styles.css itself is never modified. */

:root{
  /* Local aliases onto the existing brand tokens — no new colors introduced. */
  --v2-black:var(--black); --v2-steel:var(--steel); --v2-gray:var(--gray);
  --v2-paper:var(--paper); --v2-white:var(--white); --v2-yellow:var(--yellow);
  --v2-line:var(--line); --v2-line-dark:var(--line-dark);
}

/* ---- Skip link ---- */
.v2-skip{position:absolute; left:-9999px; top:auto; background:var(--black); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.v2-skip:focus{left:0; top:0}

/* ---- Eyebrow on light backgrounds must be dark, not yellow (contrast) ---- */
.v2-eyebrow-dark{color:var(--steel) !important}

/* ---- Text that must stay light on a dark/steel band ---- */
.v2-lightline{color:#c9ccd1; max-width:70ch; margin-top:22px; font-size:15px}

/* ---- Typography: every h3 on the V2 page is Inter, sentence case (Stencil ---- */
/* is reserved for h1/h2 and big display numbers only) ---- */
.v2-page h3{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
}

/* =========================================================
   Hero — two-column on desktop (copy left, video right)
   ========================================================= */
.v2-hero .wrap.v2-hero-grid{padding:56px 24px 20px}
.v2-hero-grid{display:flex; flex-direction:column; gap:32px}
.v2-hero-text{max-width:640px}

/* Desktop video slot lives in the hero; hidden on mobile (mobile copy shown after compare instead) */
.v2-hero-video{display:none}

@media(min-width:900px){
  .v2-hero .wrap.v2-hero-grid{
    display:grid; grid-template-columns:1fr 320px; align-items:center; gap:48px;
    padding:76px 24px 84px;
  }
  .v2-hero-text{max-width:none}
  .v2-hero-video{display:block}
}

/* Tighten mobile hero padding so hero + proof strip fit ~780px at 375x812 */
@media(max-width:640px){
  .v2-hero .wrap.v2-hero-grid{padding:32px 24px 22px}
  .v2-hero h1{font-size:clamp(30px,8vw,40px)}
  .v2-hero p.sub{font-size:16px; margin:14px 0 18px}
  .v2-hero .cta-row{gap:10px}
}

/* =========================================================
   Proof strip — 2x2 grid on mobile instead of wrapping line
   ========================================================= */
.v2-proofstrip .v2-proofgrid{display:flex; flex-wrap:wrap; gap:26px; padding:14px 24px}
@media(max-width:640px){
  .v2-proofstrip .v2-proofgrid{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding:14px 24px 16px;
  }
  .v2-proofstrip .v2-proofgrid span{white-space:normal}
}

/* =========================================================
   Outside the door — comparison illustrations
   ========================================================= */
.v2-outside{padding:64px 0; background:var(--paper)}
.v2-doorgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.v2-doorcard{margin:0; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px}
.v2-doorphoto{position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--paper)}
.v2-doorphoto img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover}
.v2-target-layer{transition:opacity .7s ease}
.v2-doorphoto.is-armed .v2-target-layer{opacity:0}
.v2-doorcard figcaption{margin-top:14px}
.v2-doorcard h3{font-size:17px; margin-bottom:6px}
.v2-doorcard p{margin:0; color:var(--ink-soft); font-size:15px}
.v2-tag-warn{display:inline-block; background:rgba(255,180,0,.18); color:var(--black); font-weight:700; border:1px solid var(--yellow); border-radius:5px; padding:2px 8px; font-size:13px}
.v2-tag-good{display:inline-block; background:rgba(58,65,72,.08); color:var(--steel); font-weight:700; border:1px solid var(--line); border-radius:5px; padding:2px 8px; font-size:13px}

/* Keep the two door cards side by side down to 375px; only stack below 340px */
@media(max-width:480px){
  .v2-doorgrid{gap:10px}
  .v2-doorcard{padding:10px}
  .v2-doorcard figcaption{margin-top:8px}
  .v2-doorcard h3{font-size:13.5px; margin-bottom:4px}
  .v2-doorcard p{font-size:12px}
  .v2-tag-warn, .v2-tag-good{font-size:10.5px; padding:2px 6px}
}
@media(max-width:340px){
  .v2-doorgrid{grid-template-columns:1fr}
}

/* =========================================================
   Video facade (click-to-play) — shared by desktop + mobile slots
   ========================================================= */
.v2-video-facade{
  position:relative; display:block; width:100%; aspect-ratio:9/16; max-width:320px;
  border-radius:16px; overflow:hidden; border:1px solid var(--line-dark); background:#000;
  box-shadow:0 12px 34px rgba(17,20,23,.14); padding:0; cursor:pointer; margin:0 auto;
}
.v2-video-facade img{width:100%; height:100%; object-fit:cover; object-position:70% center; display:block}
/* Bottom gradient only, behind the caption — thumbnail stays visible, not a near-black box */
.v2-video-overlay{position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); pointer-events:none}
.v2-playbtn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:var(--yellow); color:var(--black);
  display:flex; align-items:center; justify-content:center;
}
.v2-playbtn svg{width:24px; height:24px}
.v2-video-facade:hover .v2-playbtn{background:#ffc633}
.v2-video-caption{
  position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em; color:#fff; text-align:left;
}
.v2-video-frame{
  position:relative; width:100%; aspect-ratio:9/16; max-width:320px; margin:0 auto;
  border-radius:16px; overflow:hidden; border:1px solid var(--line-dark); background:#000;
}
.v2-video-frame iframe{width:100%; height:100%; border:0; display:block}

/* Mobile video section: placed right after the compare table, hidden on desktop */
.v2-mobilevideo{display:block; padding:48px 0 8px; background:var(--paper)}
@media(min-width:900px){.v2-mobilevideo{display:none}}

/* =========================================================
   Comparison table
   ========================================================= */
.v2-compare{padding:64px 0}
.v2-scrollhint{display:none; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--gray); margin:0 0 8px}
.v2-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.v2-table{width:100%; border-collapse:collapse; min-width:760px; background:var(--white); table-layout:fixed}
.v2-table thead th:first-child{width:22%}
.v2-table tbody td, .v2-table thead th:not(:first-child){text-align:center}
.v2-table th, .v2-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top}
.v2-table thead th{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); background:var(--paper); border-bottom:2px solid var(--line);
}
.v2-table tbody th{font-family:Inter,sans-serif; text-transform:none; font-weight:600; letter-spacing:0; color:var(--ink); font-size:14.5px}
.v2-table tbody tr:last-child th, .v2-table tbody tr:last-child td{border-bottom:none}
.v2-table td small{display:block; color:var(--gray); font-size:12px; margin-top:3px}
.v2-col-highlight{background:rgba(255,180,0,.08)}
.v2-table thead th.v2-col-highlight{background:var(--yellow); color:var(--black)}
.v2-yes{color:#1a7d3a; font-weight:700}
.v2-yes::before{content:"✓ "}
.v2-no{color:#b3261e; font-weight:700}
.v2-no::before{content:"✕ "}
.v2-partial{color:#8a6d00; font-weight:700}
.v2-partial::before{content:"– "}

@media(max-width:760px){
  .v2-scrollhint{display:block}
}

/* =========================================================
   Built for — tile row
   ========================================================= */
.v2-builtfor{padding:64px 0; background:var(--white)}
.v2-tilegrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:900px){.v2-tilegrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.v2-tilegrid{grid-template-columns:1fr}}
.v2-tile{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:20px}
.v2-tile h3{font-size:16px; margin-bottom:8px; letter-spacing:.02em}
.v2-tile p{margin:0; color:var(--ink-soft); font-size:14.5px}
.v2-tile a{color:var(--steel); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px; font-weight:600}

/* =========================================================
   Proof
   ========================================================= */
.v2-proof{padding:64px 0; background:var(--paper)}
.v2-proofcards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){.v2-proofcards{grid-template-columns:1fr}}
.v2-proofcard{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px}
.v2-proofnum{font-family:"Big Shoulders Stencil Display",Impact,sans-serif; font-weight:800; font-size:30px; color:var(--black)}
.v2-proofcard p{margin:8px 0 0; color:var(--ink-soft); font-size:15px}
.v2-proofcard a{color:var(--steel); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px; font-weight:600}
.v2-tag-note{color:var(--gray); font-size:13px}

/* =========================================================
   Demo — two columns desktop, form
   ========================================================= */
.v2-demo .wrap.v2-demogrid{padding:56px 24px}
.v2-demogrid{display:flex; flex-direction:column; gap:28px}
@media(min-width:900px){
  .v2-demogrid{display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:40px}
}
.v2-democopy h2{max-width:none}
.v2-democopy .contactline{font-family:"IBM Plex Mono",monospace; font-size:14px; margin-top:6px}
.v2-democopy .contactline a{color:var(--black); font-weight:600}
.v2-stepsintro{font-weight:700; font-size:15px; margin:18px 0 10px; color:var(--black)}

/* "What happens next" numbered steps, on the yellow demo band */
.v2-steps-list{list-style:none; margin:0 0 18px; padding:0; counter-reset:v2-step}
.v2-steps-list li{
  position:relative; counter-increment:v2-step; padding-left:34px; margin-bottom:12px;
  font-size:15.5px; line-height:1.4; color:var(--black);
}
.v2-steps-list li::before{
  content:counter(v2-step); position:absolute; left:0; top:0; width:24px; height:24px;
  border-radius:50%; background:var(--black); color:#fff; font-family:"IBM Plex Mono",monospace;
  font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;
}

/* ---- Form card ---- */
.v2-form{background:var(--white); border-radius:14px; padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.v2-field{display:flex; flex-direction:column; gap:6px}
.v2-field-wide{grid-column:1 / -1}
@media(max-width:560px){.v2-form{grid-template-columns:1fr}}

.v2-field label{
  font-family:Inter,sans-serif; font-size:14px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--ink);
}
.v2-optional{color:var(--gray); font-weight:400; font-size:13px}

.v2-field input, .v2-field select, .v2-field textarea{
  min-height:48px; padding:11px 14px; font-size:16px; font-family:Inter,sans-serif;
  border:1px solid var(--line); border-color:color-mix(in srgb, var(--line), #000 10%);
  border-radius:8px; background:var(--paper); color:var(--ink);
}
.v2-field textarea{min-height:88px; resize:vertical; padding-top:12px}
.v2-field input:focus-visible, .v2-field select:focus-visible, .v2-field textarea:focus-visible{
  outline:2px solid var(--yellow); outline-offset:1px; border-color:var(--black);
}
.v2-field input[aria-invalid="true"], .v2-field select[aria-invalid="true"], .v2-field textarea[aria-invalid="true"]{
  border-color:#b3261e;
}
.v2-error{margin:4px 0 0; color:#b3261e; font-size:13px}
.v2-error:empty{display:none}

/* ---- Chip groups (checkbox/radio pills) ---- */
.v2-chipgroup{border:none; padding:0; margin:0}
.v2-chipgroup legend{
  font-family:Inter,sans-serif; font-size:14px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--ink); padding:0; margin:0 0 8px; width:100%;
}
.v2-chiprow{display:flex; flex-wrap:wrap; gap:8px}
.v2-chip{position:relative; display:inline-flex}
.v2-chip input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; pointer-events:none;
}
.v2-chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:14px; font-weight:500;
  cursor:pointer; user-select:none; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.v2-chip input:checked + span{background:var(--black); color:#fff; border-color:var(--black)}
.v2-chip input:checked + span::before{content:"✓"; margin-right:6px}
.v2-chip input:focus-visible + span{outline:2px solid var(--yellow); outline-offset:2px}
.v2-chip:has(input:focus-visible) span{outline:2px solid var(--yellow); outline-offset:2px}
@media(prefers-reduced-motion: reduce){.v2-chip span{transition:none}}

/* ---- "+ Add details" disclosure ---- */
.v2-disclosure{
  display:inline-flex; align-items:center; background:none; border:none; padding:6px 0;
  color:var(--black); font-family:Inter,sans-serif; font-size:14px; font-weight:600; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px;
}
.v2-details-panel{display:flex; flex-direction:column; gap:14px; margin-top:12px}
.v2-details-panel[hidden]{display:none}

/* ---- Honeypot (visually hidden, never shown to real visitors) ---- */
.v2-hp-wrap{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* ---- Submit ---- */
.v2-submit{
  width:100%; min-height:52px; background:var(--black); color:#fff; border:none; border-radius:8px;
  font-family:Inter,sans-serif; font-size:16px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:background .12s ease;
}
.v2-submit:hover{background:#20242a}
.v2-submit:disabled{cursor:not-allowed; opacity:.85}
.v2-spinner{
  display:none; width:16px; height:16px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:v2-spin .7s linear infinite;
}
.v2-submit.v2-sending .v2-spinner{display:inline-block}
@keyframes v2-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion: reduce){.v2-spinner{animation:none}}

.v2-privacyline{margin:10px 0 0; font-size:12.5px; color:var(--gray)}
.v2-privacyline a{color:var(--steel); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:2px}

.v2-formalert{
  background:#fdeceb; border:1px solid #f2b8b5; color:#7a1f1a; border-radius:8px;
  padding:12px 14px; font-size:14px; margin-bottom:14px;
}
.v2-formalert[hidden]{display:none}
.v2-formalert a{color:#7a1f1a; font-weight:700; text-decoration:underline}

/* ---- Success panel (replaces form contents) ---- */
.v2-success{text-align:left}
.v2-success-icon{
  width:48px; height:48px; border-radius:50%; background:var(--black); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.v2-success-icon svg{width:22px; height:22px}
.v2-success h3{font-size:20px; margin:0 0 10px; color:var(--ink)}
.v2-success h3:focus{outline:none}
.v2-success p{margin:0 0 10px; color:var(--ink-soft); font-size:15px}
.v2-success a{color:var(--steel); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px; font-weight:600}

/* =========================================================
   Mobile sticky action bar (<768px only)
   ========================================================= */
.v2-stickybar{display:none}
@media(max-width:767px){
  .v2-stickybar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--black); border-top:1px solid var(--line-dark);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    gap:10px; transition:transform .18s ease;
  }
  .v2-stickybar.v2-hide{transform:translateY(110%)}
  .v2-stickybtn{
    flex:1; text-align:center; background:var(--yellow); color:var(--black); font-weight:700;
    text-decoration:none; padding:12px 10px; border-radius:8px; font-size:14.5px;
  }
  .v2-stickybtn-ghost{background:transparent; color:#fff; border:1px solid #3a4148}
  body.v2-page{padding-bottom:76px}
}
@media(prefers-reduced-motion: reduce){
  .v2-stickybar{transition:none}
}