/* KeyVault · ui-pro.css
   Targeted front-end fixes guided by UI UX Pro Max (see design-system/keyvault/MASTER.md).
   Loaded after site.css. Keeps the black & white chrome, the Lucian elements and the page layout;
   only fixes what the pre-delivery checklist flagged: keyboard access, mobile navigation,
   hero CTA layout, reserved empty space, touch targets and reduced motion. */

/* ---------- 1. Keyboard access: skip link + visible focus on plain links/buttons ---------- */
.skip{position:absolute;left:16px;top:-80px;z-index:200;padding:10px 14px;border-radius:12px;background:var(--ux-ink);color:var(--ux-page);font-size:14px;font-weight:700;text-decoration:none;transition:top .2s var(--ux-ease)}
.skip:focus-visible{top:12px;outline:2px solid var(--ux-accent);outline-offset:2px;box-shadow:0 0 0 4px var(--ux-page)}
:where(body) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
main{scroll-margin-top:150px}
main:focus{outline:none}

/* ---------- 2. Headings: balanced wrapping, no orphan word ---------- */
.hero h1,.sec-h h2,.dash-h h1,.u042-pane h4{text-wrap:balance}
.hero h1{max-inline-size:13ch}
.sec-h p,.hero p.lead{text-wrap:pretty}

/* ---------- 3. Hero: both CTAs on one row; the liquid-glass canvas no longer reserves a 300x220 box ---------- */
.hero-ctas{gap:14px 22px}
.hero-ctas .u001{width:auto;height:auto;min-height:0;padding:14px 10px}
.hero-ctas .u001-blobs i{filter:blur(22px)}
.hero-ctas .u001-blobs i:nth-child(1){left:-6px;top:-4px;width:120px;height:80px}
.hero-ctas .u001-blobs i:nth-child(2){right:-6px;bottom:-4px;width:124px;height:72px}
.hero-ctas .u001-blobs i:nth-child(3){left:84px;top:-10px;width:70px;height:62px}
.hero-ctas .u009{width:auto;height:auto}
.hero-stats{margin-top:32px}
@media (max-width:900px){
  .hero{padding-top:40px}
  .hero-art .keycard{width:min(100%,420px)}
}

/* ---------- 4. Mobile navigation (menu button + drawer under the header) ---------- */
.menu-btn{display:none;width:42px;height:42px;flex:none;border:0;padding:0;border-radius:12px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);color:var(--ux-ink);cursor:pointer;place-items:center;transition:background-color .3s,transform .35s var(--ux-spring)}
.menu-btn:hover{background:var(--ux-surface-2)}
.menu-btn:active{transform:scale(.92)}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-btn .ico-close{display:none}
.menu-btn[aria-expanded="true"] .ico-open{display:none}
.menu-btn[aria-expanded="true"] .ico-close{display:block}
.mnav{display:none;position:absolute;left:0;right:0;top:100%;padding:8px 16px 16px;background:color-mix(in srgb,var(--ux-page) 92%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 1px 0 var(--ux-line),0 24px 48px -30px var(--ux-shadow-strong)}
.mnav-panel{display:grid;gap:4px;padding:8px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line)}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;font-size:16px;font-weight:650;color:var(--ux-ink-2);text-decoration:none;transition:background-color .2s,color .2s}
.mnav a:hover{background:var(--ux-surface-2);color:var(--ux-ink)}
.mnav a[aria-current="page"]{background:var(--ux-surface-2);color:var(--ux-ink)}
.mnav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.mnav-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.mnav-row a{justify-content:center;box-shadow:0 0 0 1px var(--ux-line)}
.mnav-row a.primary{background:var(--ux-ink);color:var(--ux-page);box-shadow:none}
.mnav-row a.primary:hover{background:var(--ux-ink);color:var(--ux-page);opacity:.9}
.site-head.is-menu .mnav{display:block;animation:mnav-in .3s var(--ux-ease)}
@keyframes mnav-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:860px){.menu-btn{display:grid}}
@media (min-width:861px){.mnav{display:none!important}}

/* ---------- 5. Side columns: the "all clear" placeholder of #072 overlays instead of reserving blank space ---------- */
.flow .u072-calm,.dash .u072-calm{position:absolute;inset:60px 16px 16px;min-height:0;flex:none}
.flow .u072.is-clear,.dash .u072.is-clear{min-height:260px}
.dash .u072{width:min(100%,340px)}

/* ---------- 6. Get-key page: quick guide card fills the side column ---------- */
.flow .guide{width:min(100%,340px);border-radius:28px;padding:22px 20px 18px}
.guide h3{margin:0 0 14px;font-size:17px;font-weight:800;letter-spacing:-.03em}
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.guide-steps li{display:flex;gap:12px;align-items:flex-start}
.guide-steps b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ux-ink);color:var(--ux-page);font-size:12.5px;font-weight:800}
.guide-steps span{display:grid;gap:2px;min-width:0}
.guide-steps strong{font-size:14px;font-weight:720}
.guide-steps small{font-size:12.5px;line-height:1.45;color:var(--ux-ink-3)}
.guide-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:44px;font-size:13.5px;font-weight:700;color:var(--ux-ink);text-decoration:none}
.guide-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.guide-link:hover svg{transform:translateX(2px)}

/* ---------- 7. Login: the "remember me" switch sits in its own card instead of floating ---------- */
.auth .u013{width:min(100%,340px);padding:22px 20px;border-radius:28px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong)}
.auth .u013-txt{width:auto;max-width:100%}

/* ---------- 8. Touch targets ≥ 44px for plain text links ---------- */
.foot nav a,.product-context a{display:inline-flex;align-items:center;min-height:44px}
.auth-note a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;padding:0 2px;vertical-align:middle}

/* ---------- 9. Reduced motion for site-level animations (Lucian elements handle their own) ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .keycard .kc-top span i,.keycard .kc-row i::after,.site-head.is-menu .mnav{animation:none!important}
  .keycard .kc-row i::after{transform:none}
  .theme-btn,.head-cta,.menu-btn,.skip,.mnav a,.guide-link svg{transition:none}
}