/* ==========================================================================
   KuduDoc v6 — Vault (vault.html), on top of theme.css.
   The v5 page CSS sits in layer v5, so plain rules here win. The page text lives in
   lab/v6/source/vault.html (rewritten 24 Sep 2026: one recovery warning, no fact grid,
   no limit card, no work/life pair, the capture cropped to the Vault's own screen).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. the opening
   The landing blue with the flat mark poster, copy set left as on the landing fold, and the
   genuine Vault capture straddling the blue's lower edge (as .hero-cu + .proof-cu do). Two
   full-bleed blue pieces make one ground:
   · the copy wrap's ::before — from the top of the page down to the capture;
   · the capture's ::before — from its top edge down about half its frame: the title bar + the
     880×252 crop (28.6% of the frame's width; padding percentages resolve against width, so
     the edge tracks the frame at every size).
   The poster (the .hero-cu shape, cropped at the right) is painted on both pieces and anchored
   to the edge they share — bottom of one, top of the other — so its strokes run on without a
   seam and can never spill onto the pale ground below. The v5 faded mark it replaces is off. */
html body #hero.v-hero.surface-dawn {
  padding: 0 0 80px !important; overflow-x: clip; color: #fff;
  background: transparent; background-image: none;
}
.v-hero > .v-wrap { position: relative; padding-top: 168px; padding-bottom: 60px; }
.v-hero > .v-wrap::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right -6vw bottom -366px / auto 1180px no-repeat, #2a64a0;
}
html body .v-hero > .kd-mark--behind { display: none; }
/* 880px wide, so the crop shows at its own size; its left edge on the copy's column */
.v-hero .v-capture { position: relative; width: calc(100% - 80px); max-width: 880px; margin: 0 auto 0 max(40px, calc((100% - 1080px) / 2)); }
.v-hero .v-capture::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: calc(-1 * max(40px, (100vw - 1080px) / 2)); width: 100vw; top: 0; height: 0;
  padding-bottom: calc(20px + 14%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right -6vw top -814px / auto 1180px no-repeat, #2a64a0;
}
/* the copy, set left like the landing fold (v5 centred it) */
.v-hero .v-center { text-align: left; }
/* the stroke stays beside the first line when the long eyebrow wraps on a phone */
.v-hero .eyebrow {
  display: flex; align-items: flex-start; max-width: 100%; margin: 0 0 24px; color: #d6eeff;
  font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
.v-hero .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin: 3px 10px 0 0; border-radius: 2px;
  background: var(--orange); transform: skewX(-14deg);
}
html body .v-hero h1 {
  color: #fff; font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em;
}
.v-hero h1 .kd-rule { width: 120px; margin: 20px 0 16px; background: var(--orange); }
.v-hero h1 > .text-sky { color: #a9dcff; }
.v-hero .v-lead {
  margin: 26px 0 0; max-width: 34ch; color: rgba(236, 244, 252, .86);
  font: 400 clamp(20px, 2vw, 26px)/1.4 var(--font-sans); letter-spacing: -.012em;
}
.v-hero .v-actions { justify-content: flex-start; margin: 30px 0 0; gap: 12px; }
/* the primary action is the one orange pill, as .btn-primary is everywhere else */
html body .v-hero .btn-ember {
  color: #fff; border: 0; background: linear-gradient(180deg, #ff8f45 0%, #ff6a30 55%, #ff5528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(160,40,10,.25), 0 1px 2px rgba(120,30,0,.25), 0 8px 22px -6px rgba(255,90,40,.55);
}
html body .v-hero .btn-ember:hover { background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); }
/* the capture: v6 radius, the landing's capture shadow; the caption sits on the pale ground below */
/* html body: the frame carries .surface-white, which theme.css clears to transparent */
html body .v-capture .mock-frame {
  border: 0; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
.v-capture .mock-titlebar { background: #f5f8fb; }
/* the crop: the Vault's own screen — its title, the lock and "Vault opens after recovery is set up"
   (x 400–1280, y 64–316 of the 1280×800 capture); no sidebar, no profile, no older recovery text */
.v-capture-crop { position: relative; aspect-ratio: 880 / 252; overflow: hidden; background: #f7f8fb; }
html body .v-capture .v-capture-crop img { position: absolute; width: 145.4545%; max-width: none; height: auto; left: -45.4545%; top: -25.397%; }
/* one rule per caption, a step away from the words (v5 left them flush against it); the proof
   chip inside no longer draws a second rule */
html body .v-capture .capture-caption { margin-top: 18px; padding-left: 12px; color: #56697f; border-left-color: #8a9bb0; }
html body .v-capture .capture-caption .chip-proof { border-left: 0; padding-left: 0; }
.v-capture .chip-proof-actual { background: transparent; color: #3f5470; }
.v-capture .capture-caption .v-link { color: #006bcb; font-weight: 600; }

/* ---------------------------------------------------------------- 2. shared type, labels, links */
/* headings never leave one word stranded on its own line on a narrow screen */
html body .v-vault :is(h1, h2, h3) { text-wrap: pretty; }
.v-vault .kd-h2 { font-weight: 650; letter-spacing: -.03em; }
.v-vault h3 { font-weight: 650; }
.v-vault :is(#decide, #tabs, #faq) .eyebrow { color: #006bcb; }
.v-vault :is(#decide, #tabs, #faq) .kd-h2 { color: #102d49; }
.v-vault .kd-h2 .text-slate { color: #5d7087; }
.v-vault :is(#decide, #tabs, #faq) p:not(.fence) { color: #3f5470; }
.v-vault :is(#decide, #tabs, #faq) .fence { color: #3f5470; }
.v-vault :is(#decide, #faq) .v-link { color: #006bcb; }

/* ---------------------------------------------------------------- 3. decide: one question, two choice cards */
.v-vault .v-decision { padding-left: 0; }
.v-vault .v-question { padding-bottom: 0; }
.v-vault .v-question .kd-h2 { max-width: 20ch; }
.v-vault .v-question p { padding-left: 0; font-size: 18px; }
.v-vault .v-question p { max-width: 60ch; }
/* the household checklist line under the two cards */
.v-vault .v-answer .v-more { margin: 24px 0 0; font-size: 16px; line-height: 1.55; }
.v-vault .v-answer .v-more a { color: #006bcb; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* html body: the cards carry .surface-paper, which theme.css clears to transparent */
html body .v-option {
  border: 0; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
  transition: box-shadow .16s var(--v6-ease), transform .16s var(--v6-ease);
}
html body .v-option:hover { box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .45), 0 1px 2px rgba(16, 45, 73, .05), 0 20px 44px -24px rgba(16, 45, 73, .4); }
.v-option .eyebrow { color: #006bcb; }
.v-option h3 { color: #102d49; }
.v-option h3 span { color: #006bcb; }
.v-option ul.kd-marks { color: #3f5470; }

/* ---------------------------------------------------------------- 4. recovery tabs: cards, blue progress, card mocks */
.v-tablist button {
  border: 0; border-radius: 18px; background: #fff; color: #3f5470;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08);
}
.v-tablist small { color: #006bcb; }
.v-tablist button[aria-selected="true"] {
  color: #102d49; background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .5), 0 16px 40px -24px rgba(16, 45, 73, .32);
}
.v-tablist button.is-done { box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .3); }
.v-tablist i { background: #006bcb; border-radius: 0 3px 3px 0; }
.v-tablist .is-done:not([aria-selected="true"]) i { background: #9cc8ee; }
.v-tabs:not(.is-enhanced) .v-panel + .v-panel { border-top-color: rgba(16, 45, 73, .1); }
.v-tab-copy h3 { color: #102d49; }
html body .v-mock {
  border: 0; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
}
.v-secret { border: 0; border-radius: 12px; background: #f5f9fd; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
.v-tabs.is-enhanced .v-pause { color: #006bcb; }
/* two setup steps now: two tabs side by side */
.v-vault .v-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the one warning on the page: plain, readable, where the recovery key is explained */
html body .v-vault #tabs p.v-warning {
  margin: 28px 0 0; max-width: 70ch; padding: 18px 22px; border-radius: 16px; background: #fff;
  box-shadow: inset 3px 0 0 #102d49, inset 0 0 0 1px rgba(16, 45, 73, .08);
  font-size: 16px; line-height: 1.6; color: #102d49;
}
html body .v-vault #tabs p.v-warning strong { font-weight: 650; }
/* polish.js moves each mock's proof label after the mock, which wrapped it into the copy column
   under the grid; keep it directly under its card */
.v-panel { row-gap: 14px; }
.v-panel > .v-tab-copy { grid-row: 1 / span 2; }
.v-panel > .kd-mock-label { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
html body .v-panel > .kd-mock-label { color: #56697f; border-left-color: #8a9bb0; }

/* ---------------------------------------------------------------- 5. the boundary: a contained flat blue panel, not a band
   The v5 navy cards become a flat deeper blue on the panel; every caption stays legible. */
html body #bento.surface-dawn {
  width: min(1080px, calc(100% - 80px)); margin: 16px auto; padding: 72px 0 64px;
  border-radius: 28px; background: #2a64a0; background-image: none;
}
#bento .kd-h2 .text-sky { color: #a9dcff; }
.v-bcard { border: 0; border-radius: 20px; background: #245a92; box-shadow: inset 0 0 0 1px rgba(191, 227, 255, .16); }
.v-bcard h3 { color: #fff; }
.v-bcard p { color: rgba(236, 244, 252, .86); }
.v-card-number { color: #d6eeff; }
.v-bcard > .icon { color: #a9dcff; }
.v-device, .v-cipher { border: 0; border-radius: 16px; background: #2a64a0; box-shadow: inset 0 0 0 1px rgba(191, 227, 255, .2); }
.v-encryption-flow b { border-top-color: rgba(191, 227, 255, .2); color: #a9dcff; }
.v-encryption-flow ul.kd-marks { color: rgba(236, 244, 252, .86); }
.v-cipher-lines { color: #a9dcff; }
.v-transfer span, .v-encryption-figure figcaption { color: rgba(226, 238, 250, .82); }
.v-storage span { border-color: rgba(191, 227, 255, .3); border-radius: 999px; padding: 7px 12px; color: #d6eeff; }
.v-bcard-5, .v-bcard-6 { grid-column: span 9; }
#bento .v-link { color: #fff; }

/* ---------------------------------------------------------------- 6. FAQ: the accordion items are cards; give the text room */
.v-faq .accordion { border-top: 0; }
.v-faq .accordion-trigger { padding: 16px 24px; min-height: 66px; }
.v-faq .accordion-body { padding: 0 24px 22px; color: #3f5470; }
.v-faq .accordion-item.is-active .accordion-trigger { color: #006bcb; }
.v-faq .accordion-item:has([aria-expanded=true]) { box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .3); }

/* ---------------------------------------------------------------- 7. the closing: one full-bleed blue into the footer
   theme.css styles both #closing and .cta-gradient; here the section and a wrap sit around
   the band, so they step aside and the band runs edge to edge, its copy on the page's column. */
html body section#closing.v-section { max-width: none !important; padding: 0 !important; }
html body section#closing > .v-wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; }
html body section#closing .cta-gradient { display: block; max-width: none !important; margin: 0 !important; }
html body section#closing .cta-gradient > .cta-gradient-inner { max-width: 1080px !important; margin: 0 auto !important; }
/* theme.css zeroes the band's padding inside #closing and the section and wrap are at 0 too: the band pads itself (phones below) */
html body section#closing .cta-gradient { padding: 112px 40px 96px !important; }

/* ---------------------------------------------------------------- 8. tablets and phones */
@media (max-width: 900px) {
  html body #bento.surface-dawn { width: calc(100% - 40px); }
  /* the page column narrows to 20px gutters here: the capture keeps to it */
  .v-hero .v-capture { width: calc(100% - 40px); margin-left: 20px; }
  .v-hero .v-capture::before { left: -20px; }
}
@media (max-width: 700px) {
  .v-panel > .v-tab-copy, .v-panel > .kd-mock-label { grid-column: auto; grid-row: auto; }
  /* phones: the lock and "Vault opens after recovery is set up" (x 560–1120, y 180–312) */
  .v-capture-crop { aspect-ratio: 560 / 132; }
  html body .v-capture .v-capture-crop img { width: 228.571%; left: -100%; top: -136.364%; }
  .v-vault .v-question p { font-size: 16px; }
  html body .v-vault #tabs p.v-warning { padding: 16px 18px; font-size: 15px; }
  .v-bcard-5, .v-bcard-6 { grid-column: auto; }
  .v-hero > .v-wrap { padding-top: 128px; padding-bottom: 40px; }
  /* the poster at phone scale, still anchored to the shared edge: its foot 19px above it, its head 659px above it */
  .v-hero > .v-wrap::before { background-position: right -34vw bottom 19px, 0 0; background-size: auto 640px, auto; }
  .v-hero .v-capture::before { padding-bottom: calc(18px + 12%); background-position: right -34vw top -659px, 0 0; background-size: auto 640px, auto; }
  .v-hero .v-actions { gap: 10px; }
  .v-tablist button { border-radius: 14px; }
  html body #bento.surface-dawn { padding: 48px 0 40px; border-radius: 22px; }
  .v-faq .accordion-trigger { padding: 14px 20px; }
  .v-faq .accordion-body { padding: 0 20px 20px; }
  html body section#closing .cta-gradient { padding: 72px 20px 64px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .v-option { transition: none; }
}

/* kda · the app panel: shared, in theme.css */

/* review (27 Sep 2026): the closing's primary action is the landing's orange, as on every other page */
html body #closing .btn-onblue {
  color: #fff; border: 0; background: linear-gradient(180deg, #ff8f45 0%, #ff6a30 55%, #ff5528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(160,40,10,.25), 0 1px 2px rgba(120,30,0,.25), 0 8px 22px -6px rgba(255,90,40,.55);
}
html body #closing .btn-onblue:hover { background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); color: #fff; }