/* Galacia Vault marketing pages. Loaded only under /galacia-vault/, after company.css.
   Colours come from the shared tokens so the system theme keeps working. Dark panels
   remap those tokens locally, which keeps nested buttons, links and focus rings legible.
   Motion is decoration: every block is complete and visible without JavaScript, with
   reduced motion, and after the header's Pause motion control. */
.vault-page {
  --v-deep: #0d3238;
  --v-deep-line: #2c5359;
  --v-highlight: #c9eee2;
  --v-glow: #cfe9e2;
  --v-mono:
    ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono",
    monospace;
}
@media (prefers-color-scheme: dark) {
  .vault-page {
    --v-deep: #0b2a30;
    --v-deep-line: #2f575d;
    --v-highlight: #2a5a57;
    --v-glow: #1d4a4a;
  }
}

/* Shared section furniture */
.vault-page .v-section {
  padding: clamp(48px, 7vw, 84px) 0;
}
.v-head {
  max-width: 760px;
}
.v-head .eyebrow,
.v-kicker {
  font-family: var(--v-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.v-head h2 {
  margin-bottom: 16px;
}
.v-head p:last-child {
  max-width: 60ch;
  margin-bottom: 0;
}
.v-two,
.v-faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.v-two > :first-child > .v-more {
  display: inline-block;
  margin-top: 8px;
}
.v-two > :first-child > p {
  max-width: 44ch;
}
.v-prose p {
  max-width: 62ch;
}
.v-prose > :last-child {
  margin-bottom: 0;
}
.v-more {
  font-size: 0.92rem;
  font-weight: 600;
}
.v-more span {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s ease;
}
.v-more:hover span {
  transform: translateX(4px);
}
.v-note {
  max-width: 72ch;
  margin: 32px 0 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--green);
}
.v-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v-ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.v-ticks li:last-child {
  margin-bottom: 0;
}
.v-ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.v-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.v-chips li {
  font-family: var(--v-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.v-icon {
  flex: none;
  color: var(--green);
}
.v-jumps {
  gap: 10px;
  margin-bottom: 44px;
}
.vault-page .v-jumps a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 0.86rem;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.vault-page .v-jumps a:hover {
  border-color: var(--green);
}
.v-intro .actions {
  margin-bottom: 0;
}

/* Dark panel: the customer's side of the picture, and the closing calls to action */
.v-band,
.v-split-own,
.v-price {
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --line: var(--v-deep-line);
  --green: #97d7c9;
  --paper: #0f383e;
  --surface-raised: #133f45;
  --company-tint: #17484e;
  --company-button: #b4e3d6;
  --company-button-text: #173b35;
  --focus-ring: #a1dfd1;
  background: var(--v-deep);
  color: var(--ink);
}
.v-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--v-deep-line);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 64px);
  margin-block: 8px clamp(8px, 2vw, 24px);
}
.v-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 88% -10%, #97d7c926, transparent 55%),
    repeating-linear-gradient(174deg, #ffffff07 0 1px, transparent 1px 38px);
  pointer-events: none;
}
.v-band > * {
  position: relative;
}
.v-band + .section {
  border-top: 0;
}
.v-band .actions {
  margin-bottom: 0;
}
.v-band-note {
  max-width: 78ch;
  margin: 28px 0 0;
  font-size: 0.94rem;
}
.v-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 48px;
  margin-top: clamp(40px, 6vw, 72px);
}
.v-cta h2 {
  margin-bottom: 12px;
}
.v-cta p {
  max-width: 56ch;
  margin: 0;
}
.v-cta .actions {
  margin: 0;
}

/* Hero */
.vault-page .v-hero {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(32px, 5vw, 76px);
  padding: 44px 0 76px;
}
.v-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 22px;
}
.v-hero-meta .eyebrow {
  margin: 0;
}
.vault-page .v-hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: 24px;
}
.vault-page .v-hero h1 em {
  background: linear-gradient(
    transparent 60%,
    var(--v-highlight) 60% 92%,
    transparent 92%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.v-hero .lead {
  max-width: 54ch;
}
.v-hero .actions {
  margin: 30px 0 34px;
}
.v-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.v-facts dt {
  font-family: var(--v-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.v-facts dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Hero scene */
.v-scene {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-width: 0;
}
.v-scene::before {
  content: "";
  position: absolute;
  inset: -4% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 55% 45%,
    var(--v-glow),
    transparent 68%
  );
  pointer-events: none;
}
.v-scene figcaption,
.v-anatomy figcaption,
.v-flow figcaption {
  font-family: var(--v-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.v-scene figcaption {
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 12px;
}
.v-record {
  margin-right: 7%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 34px 60px -44px #0d3238b0;
  overflow: hidden;
}
.v-record-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--v-mono);
  font-size: 0.66rem;
  color: var(--muted);
}
.v-record-dots {
  width: 34px;
  height: 8px;
  background: radial-gradient(circle, var(--line) 3.5px, transparent 4px) 0 0 /
    13px 8px repeat-x;
}
.v-record-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 10px;
}
.v-record-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--company-tint);
  font-weight: 650;
}
.v-record-title small {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
}
.v-record-title strong {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}
.v-chip {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68rem;
  color: var(--muted);
}
.v-component {
  margin: 6px 14px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.v-component-head,
.v-anatomy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
}
.v-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--company-tint);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}
.v-mock-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--company-button);
  color: var(--company-button-text);
  font-size: 0.7rem;
  font-weight: 600;
}
.v-files {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.v-files li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  line-height: 1.4;
}
.v-file-type {
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  border-radius: 5px;
  background: var(--company-tint);
  font-family: var(--v-mono);
  font-size: 0.56rem;
  color: var(--muted);
}
.v-file-name {
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.v-file-name small {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
}
.v-file-state {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--company-tint);
  font-size: 0.64rem;
  color: var(--muted);
}
.v-stays,
.v-limit {
  margin: 4px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
  font-size: 0.72rem;
  line-height: 1.5;
}
.v-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 78px;
  margin-left: 58%;
}
.v-link-line,
.v-wire-line {
  position: relative;
  flex: none;
}
.v-link-line {
  width: 2px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    var(--green) 0 6px,
    transparent 6px 12px
  );
}
.v-link-line::after,
.v-wire-line::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}
.v-link-line::after {
  left: -5px;
  bottom: -3px;
  border-top-color: var(--green);
  border-bottom-width: 0;
}
.v-link-line i,
.v-wire-line i {
  position: absolute;
  opacity: 0;
}
.v-link-line i::before,
.v-wire-line i::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--green);
}
.v-link-line i {
  left: -4px;
  top: 0;
  width: 10px;
  height: 100%;
}
.v-link-label,
.v-wire-label {
  font-family: var(--v-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.v-bucket {
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --green: #97d7c9;
  margin-left: 13%;
  padding: 18px;
  border: 1px solid var(--v-deep-line);
  border-radius: 18px;
  background: var(--v-deep);
  color: var(--ink);
  box-shadow: 0 34px 60px -40px #0d3238;
}
.v-bucket-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v-bucket-head strong,
.v-bucket-head small {
  display: block;
}
.v-bucket-head strong {
  font-size: 0.98rem;
}
.v-bucket-head small {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
}
.v-objects {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.v-objects li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #ffffff0f;
  font-family: var(--v-mono);
  font-size: 0.72rem;
  line-height: 1.4;
}
.v-objects small {
  flex: none;
  font-size: inherit;
  color: var(--muted);
}

/* Data-flow diagram */
.v-flow {
  margin: 36px 0 0;
}
.v-flow-track {
  list-style: none;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) clamp(56px, 8vw, 104px) minmax(0, 1fr)
    clamp(56px, 8vw, 104px) minmax(0, 1fr);
  margin: 0;
  padding: 0;
}
.v-node {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-raised);
}
.v-node-step {
  font-family: var(--v-mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.v-node-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--company-tint);
}
.v-node strong {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.v-node-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}
.v-node-own {
  border-color: var(--green);
  background: var(--company-tint);
}
.v-node-own .v-node-icon {
  background: var(--surface-raised);
}
.v-wire {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 6px;
}
.v-wire-label {
  text-align: center;
}
.v-wire-line {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--green) 0 6px,
    transparent 6px 12px
  );
}
.v-wire-line::after {
  right: -3px;
  top: -5px;
  border-left-color: var(--green);
  border-right-width: 0;
}
.v-wire-line i {
  left: 0;
  top: -4px;
  width: 100%;
  height: 10px;
}
.v-flow figcaption {
  margin-top: 20px;
}

/* Benefits */
.v-benefits {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.v-benefit {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-raised);
}
.v-benefit:nth-child(-n + 2) {
  grid-column: span 3;
}
.v-benefit:first-child {
  background: var(--company-tint);
}
.v-benefit .v-icon {
  width: 30px;
  height: 30px;
}
.v-benefit h3 {
  margin: 8px 0 0;
  font-size: 1.28rem;
}
.v-benefit p {
  margin: 0;
  font-size: 0.96rem;
}
.v-benefit > :is(.v-more, .v-chips) {
  margin-top: auto;
  padding-top: 10px;
}

/* Walkthrough video */
.vault-page .vault-demo-video {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.vault-page .vault-demo-video > * {
  grid-column: 1;
}
.vault-page .vault-demo-video .v-video-frame {
  grid-column: 2;
  grid-row: 1 / span 6;
  margin: 0;
  padding: clamp(8px, 1vw, 14px);
  border-radius: 22px;
  background: var(--v-deep);
  box-shadow: 0 44px 80px -56px #0d3238;
}
.vault-page .vault-demo-video video {
  border: 0;
  border-radius: 12px;
}
.vault-page .v-video-frame figcaption {
  margin: 0;
  padding: 10px 8px 2px;
  font-family: var(--v-mono);
  font-size: 0.7rem;
  color: #cbd5e1;
}
.vault-page .vault-demo-chapters ol {
  flex-direction: column;
  gap: 10px;
  counter-reset: v-chapter;
}
.vault-page .vault-demo-chapters button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.vault-page .vault-demo-chapters button::before {
  counter-increment: v-chapter;
  content: counter(v-chapter, decimal-leading-zero);
  font-family: var(--v-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* File-size figures */
.v-fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(48px, 7vw, 84px) 0;
}
.v-fit-copy p {
  max-width: 52ch;
}
.v-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.v-figures > div {
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--green);
}
.v-figures dt {
  font-family: var(--v-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  min-height: 3em;
}
.v-figures dd {
  margin: 8px 0 0;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.v-figures dd span {
  display: block;
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* Role links */
.v-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.v-support-routes .v-roles {
  margin-top: 0;
}
.vault-page .v-support-routes {
  padding: 8px 0 60px;
}
.v-role {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0 8px;
  border-top: 2px solid var(--green);
  text-decoration: none;
}
.v-role .v-icon {
  width: 28px;
  height: 28px;
  transition: transform 0.3s var(--motion-ease-spring);
}
.v-role:hover .v-icon {
  transform: translateY(-3px);
}
.v-role strong {
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}
.v-role:hover strong {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.v-role span {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Numbered sequences */
.v-steps,
.v-checklist,
.v-callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: v-step;
}
.v-head + .v-steps,
.v-head + .v-checklist {
  margin-top: 40px;
}
.v-steps > li,
.v-callouts > li {
  counter-increment: v-step;
  position: relative;
  padding: 0 0 30px 62px;
}
.v-steps > li::before,
.v-callouts > li::before {
  content: counter(v-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-raised);
  font-family: var(--v-mono);
  font-size: 0.72rem;
  font-weight: 600;
}
.v-steps > li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.v-steps > li:last-child {
  padding-bottom: 0;
}
.v-steps > li:last-child::after {
  content: none;
}
.v-steps h3,
.v-callouts h3 {
  margin: 0 0 8px;
  padding-top: 7px;
  font-size: 1.12rem;
}
.v-steps p,
.v-callouts p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.96rem;
}
.v-callouts > li {
  padding: 0 0 22px 46px;
}
.v-callouts > li::before,
.v-pin {
  width: 26px;
  height: 26px;
  border: 0;
  background: var(--company-button);
  color: var(--company-button-text);
  font-size: 0.7rem;
}
.v-callouts > li::before {
  content: counter(v-step);
  top: 2px;
}
.v-callouts h3 {
  padding-top: 0;
  font-size: 1.04rem;
}
.v-pin {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 50%;
  font-family: var(--v-mono);
  font-size: 0.64rem;
  font-weight: 700;
}
@media (min-width: 901px) {
  .v-steps-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .v-steps-row > li {
    padding: 62px 0 0;
  }
  .v-steps-row > li::after {
    left: 52px;
    right: -16px;
    top: 20px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}
.v-checklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.v-checklist > li {
  counter-increment: v-step;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-raised);
}
.v-checklist > li::before {
  content: counter(v-step, decimal-leading-zero);
  display: block;
  margin-bottom: 26px;
  font-family: var(--v-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.v-checklist h3 {
  font-size: 1.04rem;
  margin-bottom: 10px;
}
.v-checklist p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Questions */
.v-faq details {
  border-bottom: 1px solid var(--line);
}
.v-faq details:first-child {
  border-top: 1px solid var(--line);
}
.v-faq summary {
  position: relative;
  list-style: none;
  padding: 20px 48px 20px 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.v-faq summary::-webkit-details-marker {
  display: none;
}
.v-faq summary::before,
.v-faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--green);
  transition: transform 0.3s ease;
}
.v-faq summary::after {
  transform: rotate(90deg);
}
.v-faq details[open] summary::after {
  transform: rotate(0deg);
}
.v-faq summary:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.v-faq-body {
  padding: 0 0 22px;
}
.v-faq-body p {
  max-width: 64ch;
  font-size: 0.97rem;
}
.v-faq-body > :last-child {
  margin-bottom: 0;
}
.v-prose .v-faq {
  margin-top: 28px;
}

/* What sits where */
.v-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  margin-top: 40px;
}
.v-split-plain {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.v-split-side {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-raised);
}
.v-split-own {
  border-color: var(--v-deep-line);
  background: var(--v-deep);
}
.v-split-side h3 {
  margin-bottom: 20px;
  font-size: 1.3rem;
}
.v-split-join {
  display: grid;
  align-items: center;
}
.v-split-join span {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--green) 0 6px,
    transparent 6px 12px
  );
}
.v-split-join span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 4px;
  background: var(--green);
}

/* Component drawing */
.v-anatomy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: 40px;
}
.v-anatomy {
  margin: 0;
  min-width: 0;
}
.v-anatomy-art {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: 0 34px 60px -48px #0d3238b0;
}
.v-anatomy-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.v-connection {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--muted);
}
.v-files-wide li {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 13px 0;
}
.v-tags,
.v-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
}
.v-tags span {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.v-has-menu .v-menu {
  grid-column: 3 / 5;
}
.v-menu span {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
}
.v-limit {
  display: flex;
  align-items: center;
  margin-top: 0;
  color: var(--muted);
}
.v-anatomy figcaption {
  margin-top: 14px;
  line-height: 1.6;
}

/* Capability and responsibility grids */
.v-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
  margin-top: 40px;
}
.v-caps-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v-caps article {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.v-caps .v-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
}
.v-caps h3 {
  margin-bottom: 10px;
}
.v-caps p {
  font-size: 0.96rem;
  max-width: 52ch;
}

/* Scope table */
.v-spec {
  margin: 36px 0 0;
  border-bottom: 1px solid var(--line);
}
.v-spec > div {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: 8px 32px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.v-spec dt {
  font-weight: 650;
}
.v-spec dd {
  margin: 0;
  max-width: 68ch;
  line-height: 1.7;
  color: var(--muted);
}
.v-spec dd strong {
  color: var(--ink);
}

/* Verdict pairs */
.v-verdicts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.v-verdict {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-raised);
}
.v-verdict-yes {
  border-color: var(--green);
  background: var(--company-tint);
}
.v-verdict h3 {
  margin-bottom: 16px;
  font-size: 1.3rem;
}
.v-verdict p:last-of-type {
  margin-bottom: 0;
}
.v-verdict .v-more {
  display: inline-block;
  margin-top: 18px;
}

/* Use cases */
.v-case {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding: clamp(44px, 6vw, 72px) 0;
  scroll-margin-top: 16px;
}
.v-case-title .v-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
}
.v-case-title .eyebrow {
  margin-bottom: 14px;
  color: var(--muted);
}
.v-case-title h2 {
  max-width: 16ch;
  margin-bottom: 0;
}
.v-case-body {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.v-case-body > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.v-case-body dt {
  padding-top: 5px;
  font-family: var(--v-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.v-case-body dd {
  margin: 0;
  max-width: 62ch;
  line-height: 1.75;
}

/* Comparison */
.v-table-wrap {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-raised);
}
.v-compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.v-compare th,
.v-compare td {
  padding: 20px 22px;
  vertical-align: top;
  line-height: 1.65;
  font-size: 0.95rem;
}
.v-compare tbody tr {
  border-top: 1px solid var(--line);
}
.v-compare thead th {
  font-family: var(--v-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.v-compare tbody th {
  width: 24%;
  font-weight: 650;
}
.v-compare td {
  color: var(--muted);
}
.v-compare :is(td, thead th):last-child {
  background: var(--company-tint);
}
.v-compare td:last-child {
  color: var(--ink);
}

/* Pricing */
.v-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 24px;
  align-items: stretch;
  border-top: 0;
  padding-top: 8px;
}
.v-price {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--v-deep-line);
  border-radius: 28px;
}
.v-price .eyebrow {
  font-family: var(--v-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.v-price h2 {
  max-width: 18ch;
  margin-bottom: 24px;
}
.v-price-body p:first-child {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
}
.v-price-body p:first-child strong {
  background: linear-gradient(transparent 62%, #97d7c940 62%);
}
.v-price-body p:last-child {
  margin-bottom: 0;
}
.v-quote {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-raised);
}
.v-quote h3 {
  margin-bottom: 20px;
  font-size: 1.25rem;
}
.v-quote .small {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.v-price-answer p:last-child {
  margin-bottom: 0;
}

/* Support hours supplied by commercial.mjs */
.v-support-hours .prose {
  max-width: none;
}
.v-support-hours .service-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.v-support-hours .service-facts > div {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-raised);
}
.v-support-hours .service-facts + p {
  max-width: 78ch;
}

/* Demo request panel. The form, its fields and its script are unchanged. */
.vault-page .demo-section {
  grid-template-rows: auto 1fr;
  margin-top: clamp(24px, 4vw, 48px);
  padding: clamp(20px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--company-tint);
}
.vault-page .demo-section .demo-intro .eyebrow {
  font-family: var(--v-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Guide cards */
.v-card {
  transition: border-color 0.2s ease;
}
.v-card:hover {
  border-color: var(--green);
}

/* Reveals: only blocks below the fold are ever held back, and only by vault-motion.js */
.vault-page [data-reveal] {
  transition:
    opacity var(--motion-duration) var(--motion-ease-entry),
    transform var(--motion-duration) var(--motion-ease-entry);
}
[data-motion="on"] .vault-page [data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(18px);
}

/* Diagram loops run only while the figure is on screen and motion is allowed */
[data-motion="on"] .is-live .v-link-line i {
  animation: v-drop 2.7s linear infinite;
}
[data-motion="on"] .is-live .v-wire-line i {
  animation: v-run 2.4s linear infinite;
}
[data-motion="on"] .is-live :is(.v-link-line, .v-wire-line) i:nth-child(2) {
  animation-delay: 0.9s;
}
[data-motion="on"] .is-live .v-link-line i:nth-child(3) {
  animation-delay: 1.8s;
}
[data-motion="on"] .is-live .v-wire:nth-child(4) .v-wire-line i {
  animation-delay: 1.2s;
}
[data-motion="on"] .is-live .v-wire:nth-child(4) .v-wire-line i:nth-child(2) {
  animation-delay: 2.1s;
}
[data-motion="on"] .is-live .v-objects li {
  animation: v-land 2.7s ease-in-out infinite;
}
[data-motion="on"] .is-live .v-objects li:nth-child(2) {
  animation-delay: 0.9s;
}
[data-motion="on"] .is-live .v-objects li:nth-child(3) {
  animation-delay: 1.8s;
}
[data-motion="on"] .v-faq details[open] .v-faq-body {
  animation: v-open 0.35s var(--motion-ease-entry);
}
@keyframes v-drop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  14%,
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100% - 12px));
    opacity: 0;
  }
}
@keyframes v-run {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  14%,
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100% - 12px));
    opacity: 0;
  }
}
@keyframes v-land {
  0%,
  70%,
  100% {
    background: #ffffff0f;
  }
  82% {
    background: #97d7c938;
  }
}
@keyframes v-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1101px) {
  .v-two > :first-child,
  .v-case-title {
    position: sticky;
    top: 28px;
  }
}
@media (max-width: 1100px) {
  .v-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .vault-page .v-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 56px;
  }
  .v-scene {
    max-width: 560px;
  }
  .v-benefit,
  .v-benefit:nth-child(-n + 2) {
    grid-column: span 3;
  }
  .v-benefit:last-child {
    grid-column: 1 / -1;
  }
  .vault-page .vault-demo-video,
  .v-anatomy-layout,
  .v-fit,
  .v-pricing {
    grid-template-columns: minmax(0, 1fr);
  }
  .vault-page .vault-demo-video .v-video-frame {
    grid-column: 1;
    grid-row: auto;
    margin: 24px 0 8px;
  }
  .vault-page .vault-demo-chapters ol {
    flex-direction: row;
  }
  .vault-page .vault-demo-chapters button {
    width: fit-content;
  }
  .v-fit {
    gap: 32px;
  }
}
@media (max-width: 900px) {
  .v-flow-track {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-wire {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 14px;
    height: 56px;
    padding: 0 0 0 46px;
  }
  .v-wire-line {
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      var(--green) 0 6px,
      transparent 6px 12px
    );
  }
  .v-wire-line::after {
    right: auto;
    left: -5px;
    top: auto;
    bottom: -3px;
    border: 6px solid transparent;
    border-top-color: var(--green);
    border-bottom-width: 0;
  }
  .v-wire-line i {
    left: -4px;
    top: 0;
    width: 10px;
    height: 100%;
  }
  [data-motion="on"] .is-live .v-wire-line i {
    animation-name: v-drop;
  }
  .v-two,
  .v-faq-section,
  .v-case,
  .v-cta {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-case {
    gap: 28px;
  }
  .v-case-title h2 {
    max-width: 22ch;
  }
  .v-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-split-join {
    justify-items: center;
    height: 48px;
  }
  .v-split-join span {
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      var(--green) 0 6px,
      transparent 6px 12px
    );
  }
  .v-roles,
  .v-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-checklist > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .v-table-wrap {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .v-compare,
  .v-compare tbody,
  .v-compare tr,
  .v-compare th,
  .v-compare td {
    display: block;
  }
  .v-compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .v-compare tbody tr {
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface-raised);
  }
  .v-compare tbody th {
    width: auto;
    padding: 18px 18px 6px;
    font-size: 1.02rem;
  }
  .v-compare td {
    padding: 12px 18px 16px;
  }
  .v-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-family: var(--v-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
}
@media (max-width: 680px) {
  .vault-page .v-hero {
    padding: 28px 0 44px;
  }
  .vault-page .v-hero h1 {
    font-size: clamp(2.05rem, 9.4vw, 2.6rem);
  }
  .v-facts,
  .v-figures,
  .v-roles,
  .v-caps,
  .v-caps-two,
  .v-verdicts,
  .v-split-plain,
  .v-checklist,
  .v-support-hours .service-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-facts {
    gap: 16px;
  }
  .v-figures dt {
    min-height: 0;
  }
  .v-record {
    margin-right: 0;
  }
  .v-link {
    margin-left: 50%;
    height: 64px;
  }
  .v-bucket {
    margin-left: 0;
  }
  .v-benefits {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-benefit,
  .v-benefit:nth-child(-n + 2),
  .v-benefit:last-child {
    grid-column: auto;
    padding: 24px;
  }
  .v-band {
    border-radius: 22px;
  }
  .v-spec > div,
  .v-case-body > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-case-body dt {
    padding-top: 0;
  }
  .v-files-wide li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .v-files-wide :is(.v-tags, .v-menu, .v-file-state),
  .v-has-menu .v-menu {
    grid-column: 2;
    justify-self: start;
  }
  .v-steps > li,
  .v-callouts > li {
    padding-left: 54px;
  }
  .v-jumps {
    margin-bottom: 32px;
  }
}
@media print {
  .vault-page .reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}