/* Install page (install/index.html). Loaded after voyage.css and mobile.css. */

/* ---- hero: the HaloVault install card on the product stage ---- */
.v-product-hero .v-get-stage{padding:clamp(18px,3vw,42px)}
.v-get{background:#fcfeff;border-radius:6px;box-shadow:0 2px 4px #0a283012,0 26px 56px -12px #0a283066;border:1px solid #0e3e4a38;color:#0b272d;overflow:hidden}
.v-get__bar{padding:16px 22px;border-bottom:1px solid #d3e6ea;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11px;font-weight:600}
.v-get__bar span{display:inline-flex;align-items:center;gap:8px;font:8px var(--v-mono);color:#195553;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.v-get__bar span::before{content:'';width:6px;height:6px;border-radius:50%;background:#2fc9b0;box-shadow:0 0 10px #51f6da}
.v-get__body{padding:30px}
.v-get__id{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center}
.v-get__id img{width:64px;height:64px}
.v-get h2{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.045em}
.v-get__id .v-meta{color:#385956;margin-top:8px}
.v-get__lede{font-size:14px;line-height:1.7;color:#344f55;margin-top:24px!important;max-width:470px}
.v-get .v-actions{margin-top:24px}
.v-get__specs{margin:28px 0 0;display:grid;grid-template-columns:max-content 1fr;border-top:1px solid #d3e6ea}
.v-get__specs dt,.v-get__specs dd{margin:0;padding:12px 0;border-bottom:1px solid #dbebef}
.v-get__specs dt{font:8px/2 var(--v-mono);text-transform:uppercase;letter-spacing:.08em;color:#366262;padding-right:24px}
.v-get__specs dd{font-size:12px;color:#1d363c}
.v-get__specs dt:last-of-type,.v-get__specs dd:last-of-type{border-bottom:0;padding-bottom:0}
.v-get-stage .v-stage-caption{margin-top:18px}

/* ---- setup: three steps on the dark band ---- */
ol.v-how{list-style:none;margin-bottom:0;padding:0}
ol.v-how>li{border-top:1px solid var(--v-line);padding-top:25px}
.v-how--3{grid-template-columns:repeat(3,1fr)}
#setup .v-tech-foot{margin-top:60px;padding-top:28px;border-top:1px solid var(--v-line);flex-wrap:wrap}
#setup .v-tech-foot .v-actions{margin-top:0}

/* ---- deployment: product rows beside the conversation starter ---- */
.v-deploy{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:start}
.v-deploy .v-product-links{margin-top:0}
.v-deploy-cta{background:#c3e1e7;border-left:2px solid #6aaaa7;padding:34px}
.v-deploy-cta .v-meta{color:#385956}
.v-deploy-cta h3{font-size:clamp(26px,2.6vw,36px);margin-top:16px}
.v-deploy-cta p:not(.v-meta){font-size:13px;line-height:1.8;color:#2a494b;margin-top:16px}
.v-deploy-cta .v-actions{margin-top:26px}
.v-deploy-cta small{display:block;margin-top:18px;font:9px var(--v-mono);color:#185d5e}

@media(max-width:1100px){
  /* the card is narrow beside the headline here: put the icon above the title so the name stays on one line */
  .v-get__id{grid-template-columns:1fr;gap:16px}
  .v-get__id img{width:48px;height:48px}
}
@media(max-width:820px){
  .v-how--3{grid-template-columns:1fr}
  .v-deploy{grid-template-columns:1fr;gap:36px}
}
@media(max-width:560px){
  .v-get__body{padding:22px}
  .v-get__specs dt{padding-right:16px}
  .v-get .v-actions .v-btn{width:100%}
  .v-deploy-cta{padding:26px 22px}
}