/* ── ViseVault site chrome (added 2026-09-30, ported from the approved homepage redesign) ──
   The capsule nav + phone menu, the footer, the App Store row and the phone frame, shared by
   EVERY page. Tokens are prefixed --vv- so they never collide with shared.css (whose --navy is the
   brand blue). Page bodies keep their own stylesheet: shared.css for app/pro/support/privacy/terms,
   inline CSS for the homepage, mission, story and partners. The phone menu needs site.js. */
:root{
  --vv-blue:#2A6B8F; --vv-navy:#1E4D67; --vv-cream:#EEE3CC; --vv-white:#FFFFFF; --vv-slate-light:#B8C2C7;
  --vv-fs-13:13px; --vv-fs-15:15px;
}
footer .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
footer .wrap>*{min-width:0}

/* ---------- capsule nav: the app's own top bar, floating on the page ---------- */
.nav{position:fixed;top:12px;left:16px;right:16px;max-width:1120px;margin:0 auto;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 9px 9px 26px;border-radius:999px;background:linear-gradient(90deg,#255F80,var(--vv-blue) 50%,#3B7DA1);box-shadow:0 4px 12px rgba(18,34,44,.18)}
.nav-logo{display:flex;align-items:flex-start;flex:none;line-height:0}
.nav-logo .tm{font-size:11px;line-height:1;font-weight:600;color:var(--vv-cream);margin:1px 0 0 2px}
.nav-logo img{height:50px;width:auto}
.nav-logo:focus-visible{outline:3px solid var(--vv-cream);outline-offset:4px;border-radius:4px}
.nav-right{display:flex;align-items:center;gap:22px;min-width:0}
.nav-links{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:22px}
.nav-links a{font-size:14px;letter-spacing:.06em;color:rgba(238,227,204,.86);text-decoration:none;white-space:nowrap;padding:4px 0}
.nav-links a:hover{color:var(--vv-white)}
.nav-links a.is-current{color:var(--vv-white);font-weight:600;text-decoration:underline;text-decoration-color:rgba(238,227,204,.55);text-underline-offset:6px}
.nav-links a:focus-visible{outline:3px solid var(--vv-cream);outline-offset:4px;border-radius:3px}
.nav-cta{flex:none;background:var(--vv-cream);color:var(--vv-navy);padding:10px 18px;border-radius:999px;font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1.2}
.nav-cta:hover{background:var(--vv-white);color:var(--vv-navy)}
.nav-cta:focus-visible{outline:3px solid var(--vv-white);outline-offset:3px}
.nav-toggle{display:none;flex:none;width:40px;height:40px;border:0;border-radius:999px;background:rgba(238,227,204,.14);color:var(--vv-cream);cursor:pointer;padding:0;align-items:center;justify-content:center}
.nav-toggle:focus-visible{outline:3px solid var(--vv-cream);outline-offset:3px}
.nav-toggle svg{display:block}
.nav-toggle .x{display:none}
.nav.open .nav-toggle .x{display:block}
.nav.open .nav-toggle .bars{display:none}
/* Phone-style nav (menu button) from 900px down: with the 50px wordmark the full link row
   needs ~900px. */
@media (max-width:900px){
  .nav{top:10px;left:10px;right:10px;padding:7px 7px 7px 16px;gap:8px}
  .nav-logo img{height:34px}
  .nav-logo .tm{font-size:9px}
  .nav-right{gap:8px}
  .nav-toggle{display:flex}
  .nav-cta{font-size:12.5px;padding:10px 13px;letter-spacing:.04em}
  .nav-links{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--vv-navy);border-radius:22px;padding:8px;box-shadow:0 10px 24px rgba(18,34,44,.28)}
  .nav.open .nav-links{display:flex}
  .nav-links li{margin:0}
  .nav-links a{display:block;padding:13px 18px;font-size:16px;font-weight:600;color:var(--vv-cream);border-radius:14px}
  .nav-links a.is-current{text-decoration:none;background:rgba(238,227,204,.12)}
  .nav-links a:hover{background:rgba(238,227,204,.1)}
}
.nav-pad{height:96px}
@media (max-width:760px){.nav-pad{height:70px}}

/* ---------- footer ---------- */
footer{background:var(--vv-navy);color:var(--vv-cream);padding:34px 0 30px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:start}
footer .fbrand img.wm{height:26px;width:auto}
footer .fline{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
footer .fbrand p{margin:0;max-width:34em;color:#DCE4E8}
footer .social{display:inline-flex;flex:none;gap:4px;white-space:nowrap}
footer .ig{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--vv-cream);flex:none}
footer .ig:hover{background:rgba(238,227,204,.12)}
footer .ig:focus-visible{outline:3px solid var(--vv-cream);outline-offset:3px}
footer .tu{display:inline-flex;justify-self:start;align-items:center;gap:12px;margin-top:0;text-decoration:none;color:#C9D3D8;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
footer .tu img{height:72px;width:auto;opacity:.92}
footer .tu:focus-visible{outline:3px solid var(--vv-cream);outline-offset:4px}
footer nav{display:grid;grid-template-columns:repeat(2,auto);gap:4px 28px;font-weight:600;align-content:start}
footer nav a{color:var(--vv-cream);text-decoration:none;border-bottom:1px solid rgba(238,227,204,.4);justify-self:start;display:inline-block;padding:6px 0 3px}
footer nav a:hover{border-bottom-color:var(--vv-cream)}
footer nav a:focus-visible{outline:3px solid var(--vv-cream);outline-offset:4px}
footer .copy{font-size:var(--vv-fs-13);color:#C9D3D8;grid-column:1/-1;margin:10px 0 0;padding-top:16px;border-top:1px solid rgba(238,227,204,.2)}
@media (max-width:760px){
  footer .wrap{grid-template-columns:1fr;gap:22px}
  footer nav{grid-template-columns:repeat(2,auto);justify-content:start}
}

/* ---------- buttons, store row, device frame (shared by the homepage and interior pages) ---------- */
.btn{display:inline-block;background:var(--vv-blue);color:var(--vv-white);font-weight:800;letter-spacing:.05em;text-decoration:none;padding:13px 22px;border:0;border-radius:6px;font-size:var(--vv-fs-15);cursor:pointer;font-family:inherit;line-height:1.3}
.btn:hover{background:var(--vv-navy)}
.store-badge{display:block;line-height:0;border-radius:8px}
.store-badge:focus-visible{outline:3px solid var(--vv-blue);outline-offset:4px}
.store img{width:150px;height:auto}
.dev{background:#0f1418;border-radius:40px;padding:9px;width:300px;max-width:100%;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px -22px rgba(0,0,0,.55)}
.dev img{width:100%;height:auto;border-radius:32px;background:var(--vv-cream)}
.dev.small{width:236px;border-radius:34px;padding:8px}
.dev.small img{border-radius:27px}
@media (max-width:900px){.dev{width:78vw;max-width:524px;margin:0 auto}}

/* ---------- one page header everywhere (2026-10-01) ----------
   App, Pro, Support, Privacy and Terms use shared.css's centered .page-header; Mission, Our Story
   and Partners use the editorial .phead. Luke: "headings are inconsistent across pages" — the
   .phead look wins (uppercase navy title, olive eyebrow, left-aligned), matching the homepage hero
   and the app's own capsule titles. Scoped to header.page-header so the App page's closing
   section.page-header band is untouched. */
header.page-header{text-align:left;background:none;overflow:visible;max-width:1180px;margin:0 auto;padding:132px 20px 28px;border-bottom:1px solid #D3C4A3}
header.page-header::before{display:none}
header.page-header .eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5C6040;margin:0 0 12px;display:block}
header.page-header h1{font-size:44px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.1;color:#1E4D67;max-width:14em;margin:0}
header.page-header h1 em{font-style:inherit;color:inherit;text-transform:inherit}
header.page-header p{font-size:19px;color:#4a5650;max-width:36em;margin:18px 0 0;font-style:normal;line-height:1.55;text-align:left}
@media (max-width:760px){
  header.page-header{padding:92px 20px 24px}
  header.page-header h1{font-size:31px}
  header.page-header p{font-size:17px}
}
/* Section titles share the App chapters' heading (Find it. / Tie it.): uppercase, 28px, ink.
   shared.css and support.html's own <style> set mixed case + text-transform:none on <em>, so the
   em rule must inherit or half of each heading stays lowercase. */
body .section-title,body .faq-section h2{font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.1;color:#1a2028}
body .section-title em,body .faq-section h2 em{text-transform:inherit;font-style:inherit;color:inherit}
section.page-header h1,section.page-header .band-title{text-transform:uppercase;letter-spacing:.05em}
section.page-header h1 em,section.page-header .band-title em{text-transform:inherit}
@media (max-width:760px){body .section-title,body .faq-section h2{font-size:24px}}
@media (max-width:380px){.nav-logo img{height:30px}}
@media (min-width:601px) and (max-width:900px){.nav-logo img{height:44px}}
@media (max-width:340px){.nav-logo img{height:23px}.nav{padding-left:12px}}

/* ---------- fly-mark divider (Luke 2026-10-01, option 1 of 4) ----------
   Replaces the plain 1px rule under every page header (editorial .phead pages and the converted
   header.page-header pages) and Our Story's mid-page break: a hairline with the ViseVault fly
   (assets/fly-icon.svg, 360×239) centred in a gap. Drawn as one background so no page needs new
   markup; `body` prefix outranks each page's own inline .phead rule. */
body .phead,body header.page-header{border-bottom:none}
body .phead::after,body header.page-header::after,body .prose hr{
  content:"";display:block;height:32px;border:0;margin:26px 0 0;width:auto;
  background:
    url("assets/fly-icon.svg") center/48px auto no-repeat,
    linear-gradient(#D3C4A3,#D3C4A3) left center/calc(50% - 40px) 1px no-repeat,
    linear-gradient(#D3C4A3,#D3C4A3) right center/calc(50% - 40px) 1px no-repeat}
body .prose hr{margin:44px 0}