/* Verdock design layer. One palette, one warm humanist typeface (Candara where installed, Cabin self hosted otherwise), light and dark.
   Loaded last on every page. It changes how pages look, never what they say. */


@font-face{font-family:"Cabin";font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/cabin-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cabin";font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/cabin-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cabin";font-style:normal;font-weight:500;font-display:swap;src:url(/ui/fonts/cabin-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cabin";font-style:normal;font-weight:500;font-display:swap;src:url(/ui/fonts/cabin-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cabin";font-style:normal;font-weight:600;font-display:swap;src:url(/ui/fonts/cabin-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cabin";font-style:normal;font-weight:600;font-display:swap;src:url(/ui/fonts/cabin-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cabin";font-style:normal;font-weight:700;font-display:swap;src:url(/ui/fonts/cabin-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cabin";font-style:normal;font-weight:700;font-display:swap;src:url(/ui/fonts/cabin-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --vd-serif:Candara,"Cabin","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --vd-sans:Candara,"Cabin","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --vd-mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;
  --vd-radius:.5rem;
  --vd-background:oklch(.972 .006 95);
  --vd-surface:oklch(.99 .003 95);
  --vd-foreground:oklch(.185 .004 250);
  --vd-muted:oklch(.945 .007 95);
  --vd-muted-foreground:oklch(.47 .012 250);
  --vd-border:oklch(.9 .008 90);
  --vd-border-strong:oklch(.78 .01 90);
  --vd-ledger:oklch(.46 .09 165);
  --vd-ledger-soft:oklch(.46 .09 165 / 10%);
  --vd-ledger-line:oklch(.46 .09 165 / 35%);
  --vd-amber:oklch(.5 .11 65);
  --vd-amber-soft:oklch(.6 .12 70 / 14%);
  --vd-fail:oklch(.52 .19 28);
  --vd-fail-soft:oklch(.52 .19 28 / 10%);
  --vd-grid-line:oklch(.185 .004 250 / 5%);
  --vd-shadow-tint:oklch(.185 .004 250 / 12%);
  /* Always dark panels keep readable text in both themes. */
  --vd-panel-dark:oklch(.2 .008 165);
  --vd-on-dark:oklch(.96 .004 95);
  --vd-ledger-on-dark:oklch(.78 .12 163);
  --vd-amber-on-dark:oklch(.82 .13 80);
  color-scheme:light;

  /* The older stylesheets read these names. Point them at the design. */
  --ink:var(--vd-foreground);--paper:var(--vd-background);--white:var(--vd-surface);--line:var(--vd-border);
  --muted:var(--vd-muted-foreground);--teal:var(--vd-ledger);--mint:var(--vd-ledger-soft);
  --amber:var(--vd-amber);--orange:var(--vd-amber);--sans:var(--vd-sans);--serif:var(--vd-serif);
}
html.dark{
  --vd-background:oklch(.155 .005 250);
  --vd-surface:oklch(.2 .006 250);
  --vd-foreground:oklch(.94 .002 250);
  --vd-muted:oklch(.23 .006 250);
  --vd-muted-foreground:oklch(.72 .008 250);
  --vd-border:oklch(.29 .006 250);
  --vd-border-strong:oklch(.4 .008 250);
  --vd-ledger:oklch(.73 .13 163);
  --vd-ledger-soft:oklch(.73 .13 163 / 12%);
  --vd-ledger-line:oklch(.73 .13 163 / 40%);
  --vd-amber:oklch(.78 .13 75);
  --vd-amber-soft:oklch(.78 .13 75 / 12%);
  --vd-fail:oklch(.7 .17 28);
  --vd-fail-soft:oklch(.7 .17 28 / 12%);
  --vd-grid-line:oklch(.94 .002 250 / 4%);
  --vd-shadow-tint:oklch(0 0 0 / 40%);
  --vd-panel-dark:oklch(.235 .01 165);
  color-scheme:dark;
}

/* Base */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--vd-background);color:var(--vd-foreground);font-family:var(--vd-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body,button,input,select,textarea{font-family:var(--vd-sans)}
::selection{background:var(--vd-ledger);color:var(--vd-background)}
:focus-visible{outline:2px solid var(--vd-ledger);outline-offset:3px;border-radius:4px}
a{text-underline-offset:.2em}
code,pre,kbd,samp,.mono,table.mono,[class*="trace"] b{font-family:var(--vd-mono)}

/* Type: serif display for headings, mono for labels */
body[data-ui-page] h1,body[data-ui-page] h2,body[data-ui-page] h3{font-family:var(--vd-serif);font-weight:700;font-style:normal;letter-spacing:-.025em;line-height:1.05;color:var(--vd-foreground)}
body[data-ui-page] h4,body[data-ui-page] h5,body[data-ui-page] h6{font-family:var(--vd-sans);font-weight:500}
body[data-ui-page] h1{line-height:1}
body[data-ui-page] h3{font-weight:600;letter-spacing:-.015em}
body[data-ui-page] h1 span,body[data-ui-page] .closing h2 span,body[data-ui-page] .lab h1 span,body[data-ui-page] .wd-hero h1 span{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--vd-ledger);letter-spacing:inherit}
body[data-ui-page] .eyebrow,body[data-ui-page] .wd-kicker,body[data-ui-page] .beta-label,body[data-ui-page] .overline,body[data-ui-page] .card-index,body[data-ui-page] .wd-brand-meta,body[data-ui-page] .visual-top,body[data-ui-page] .visual-foot,body[data-ui-page] .step>span,body[data-ui-page] .wd-step>span,body[data-ui-page] .wd-feature-number,body[data-ui-page] .wd-track-index,body[data-ui-page] .principle-inner>p{font-family:var(--vd-sans);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vd-muted-foreground)}
body[data-ui-page] .wd-kicker,body[data-ui-page] .eyebrow{color:var(--vd-muted-foreground)!important}
body[data-ui-page] .wd-dot,body[data-ui-page] .live-dot,body[data-ui-page] .green-dot{background:var(--vd-ledger)!important;box-shadow:0 0 0 4px var(--vd-ledger-soft)!important}
body[data-ui-page] p,body[data-ui-page] li{line-height:1.7}
body[data-ui-page] .lede,body[data-ui-page] .wd-lead,body[data-ui-page] .hero-lede{color:var(--vd-muted-foreground)}

/* Pills and badges */
body[data-ui-page] .wd-badge,body[data-ui-page] .badge,body[data-ui-page] .pill,body[data-ui-page] .privacy-chip,body[data-ui-page] .status,body[data-ui-page] .nav-cta-pill{display:inline-flex;align-items:center;gap:.375rem;border-radius:999px!important;padding:.15rem .6rem!important;font-family:var(--vd-sans)!important;font-size:.74rem!important;font-weight:600!important;line-height:1.4;white-space:nowrap;letter-spacing:.03em;color:var(--vd-ledger)!important;background:var(--vd-ledger-soft)!important;border:1px solid var(--vd-ledger-line)!important}
body[data-ui-page] .wd-badge-planned{color:var(--vd-amber)!important;background:var(--vd-amber-soft)!important;border-color:color-mix(in oklab,var(--vd-amber) 35%,transparent)!important}

/* Buttons: ink pill, outline pill */
body[data-ui-page] .button,body[data-ui-page] button.primary,body[data-ui-page] .primary,body[data-ui-page] .wd-actions .button,body[data-ui-page] .journey-cta .button,body[data-ui-page] a.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.7rem 1.25rem!important;border:1px solid transparent;border-radius:999px!important;background:var(--vd-foreground)!important;color:var(--vd-background)!important;font-family:var(--vd-sans);font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s,transform .3s;box-shadow:none!important}
body[data-ui-page] .button:hover,body[data-ui-page] button.primary:hover,body[data-ui-page] .primary:hover{background:var(--vd-ledger)!important;color:var(--vd-background)!important;transform:none}
body[data-ui-page] .button:active,body[data-ui-page] .primary:active{transform:translateY(1px)}
body[data-ui-page] .button span,body[data-ui-page] .primary span{color:inherit!important}
body[data-ui-page] .secondary,body[data-ui-page] .wd-secondary,body[data-ui-page] .text-link,body[data-ui-page] .text-button,body[data-ui-page] .back-link,body[data-ui-page] .offline-button,body[data-ui-page] button.secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.6rem 1.25rem;border:1px solid var(--vd-border);border-radius:999px;background:transparent;color:var(--vd-foreground);font-size:.9rem;font-weight:500;text-decoration:none;transition:border-color .3s}
body[data-ui-page] .secondary:hover,body[data-ui-page] .wd-secondary:hover,body[data-ui-page] .text-link:hover,body[data-ui-page] .text-button:hover,body[data-ui-page] .back-link:hover{border-color:var(--vd-foreground)}
body[data-ui-page] .text-link{border-bottom:1px solid var(--vd-border)}
body[data-ui-page] button:disabled,body[data-ui-page] .button[disabled]{opacity:.45;cursor:not-allowed}
body[data-ui-page] button{border-radius:999px}
body[data-ui-page] select,body[data-ui-page] input[type=text],body[data-ui-page] input[type=email],body[data-ui-page] input[type=number],body[data-ui-page] input[type=search],body[data-ui-page] input:not([type]),body[data-ui-page] textarea{border:1px solid var(--vd-border);border-radius:.75rem;background:var(--vd-surface);color:var(--vd-foreground);font-family:var(--vd-sans)}
body[data-ui-page] input[type=range]{accent-color:var(--vd-ledger)}
body[data-ui-page] select{border-radius:.75rem}

/* Surfaces */
body[data-ui-page] .panel,body[data-ui-page] .wd-feature,body[data-ui-page] .wd-step,body[data-ui-page] .resource-card,body[data-ui-page] .check-card,body[data-ui-page] .step,body[data-ui-page] .form-card,body[data-ui-page] .task-card,body[data-ui-page] .plan-cards>*,body[data-ui-page] .case-library,body[data-ui-page] .inspector,body[data-ui-page] .canvas-panel,body[data-ui-page] .wd-deployment-grid>article,body[data-ui-page] .wd-demo-next,body[data-ui-page] details.wd-faq-item{border:1px solid var(--vd-border)!important;border-radius:1rem!important;background:var(--vd-surface)!important;box-shadow:none!important}
body[data-ui-page] .wd-feature,body[data-ui-page] .wd-step,body[data-ui-page] .step{border-top:1px solid var(--vd-border)!important}
body[data-ui-page] .wd-close,body[data-ui-page] .boundary,body[data-ui-page] .notice,body[data-ui-page] .privacy-note,body[data-ui-page] .principle-band{border-radius:1rem}
body[data-ui-page] .notice{border:1px solid var(--vd-border);border-left:3px solid var(--vd-ledger);background:var(--vd-surface);border-radius:.75rem}
body[data-ui-page] .wd-close{background:var(--vd-surface)!important;border:1px solid var(--vd-border)!important}
body[data-ui-page] .boundary{background:var(--vd-muted)!important;border-block:1px solid var(--vd-border)!important;border-radius:0}
body[data-ui-page] .principle-band{background:var(--vd-panel-dark)!important;color:var(--vd-on-dark)!important}
body[data-ui-page] .principle-band *{color:inherit}
body[data-ui-page] table{border-collapse:collapse}
body[data-ui-page] th{font-family:var(--vd-sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vd-muted-foreground)}
body[data-ui-page] th,body[data-ui-page] td{border-color:var(--vd-border)!important}
body[data-ui-page] details{border-color:var(--vd-border)}
body[data-ui-page] hr{border-color:var(--vd-border)}

/* Hero: hairline grid, panel stage */
body[data-ui-page] .wd-hero,body[data-ui-page] .hero{position:relative;isolation:isolate}
body[data-ui-page] .wd-hero::before,body[data-ui-page] .hero::before{content:"";position:absolute;inset:0 -100vw;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,var(--vd-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--vd-grid-line) 1px,transparent 1px);background-size:64px 64px;border-bottom:1px solid var(--vd-border)}
body[data-ui-page] .wd-brand-stage,body[data-ui-page] .hero-visual{background:var(--vd-surface)!important;color:var(--vd-foreground)!important;border:1px solid var(--vd-border)!important;border-radius:1rem!important;box-shadow:0 30px 80px -40px var(--vd-shadow-tint)!important;padding:clamp(1rem,2vw,1.6rem)!important}
body[data-ui-page] .wd-brand-stage *{color:inherit}
body[data-ui-page] .wd-brand-stage::before,body[data-ui-page] .wd-brand-stage::after{display:none}
body[data-ui-page] .wd-brand-stage h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:.4rem 0 .8rem}
body[data-ui-page] .wd-brand-stage .wd-brand-meta,body[data-ui-page] .wd-brand-stage .wd-brand-meta span{color:var(--vd-muted-foreground)}
body[data-ui-page] .wd-brand-art{margin:0}
body[data-ui-page] .wd-brand-art svg,body[data-ui-page] .wd-brand-art .vd-svg{max-height:none!important;width:100%}
body[data-ui-page] .wd-brand-stage{padding:clamp(1rem,2vw,1.6rem)!important}
body[data-ui-page] .wd-brand-meta{font-family:var(--vd-sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;border-bottom:1px solid var(--vd-border)}
body[data-ui-page] .wd-brand-bottom{background:transparent!important;margin:.8rem 0 0!important;padding:.8rem 0 0!important;border-top:1px solid var(--vd-border)}
body[data-ui-page] .wd-brand-bottom>span{color:var(--vd-muted-foreground)}
body[data-ui-page] .wd-brand-art figcaption{text-align:left}
body[data-ui-page] .wd-brand-art figcaption{margin-top:.8rem;color:var(--vd-muted-foreground);font-size:.9rem}
body[data-ui-page] .wd-brand-principles{border-top:1px solid var(--vd-border);padding-top:.9rem;margin-top:1rem}
body[data-ui-page] .wd-brand-principles{border-block-color:var(--vd-border)}
body[data-ui-page] .wd-brand-principles span{color:var(--vd-foreground);border-color:var(--vd-border)}
body[data-ui-page] .wd-brand-principles span+span{border-left-color:var(--vd-border)}
body[data-ui-page] .wd-brand-bottom{border-top:1px solid var(--vd-border);color:var(--vd-muted-foreground);padding-top:.8rem;margin-top:.8rem}

/* Diagrams */
.vd-svg{display:block;width:100%;height:auto}
@keyframes vd-flow{to{stroke-dashoffset:-24}}
.vd-flow{stroke-dasharray:2 10;animation:vd-flow 1.6s linear infinite}
.vd-flow-1{animation-delay:-.4s}.vd-flow-2{animation-delay:-.8s}.vd-flow-3{animation-delay:-1.2s}
@media (prefers-reduced-motion:reduce){.vd-flow{animation:none}}
body[data-ui-page] .vd-figure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
body[data-ui-page] .vd-figure-wide{grid-column:1/-1}
body[data-ui-page] .vd-figure{margin:0;border:1px solid var(--vd-border);border-radius:1rem;background:var(--vd-surface);padding:clamp(1rem,2.4vw,2rem)}
body[data-ui-page] .vd-figure figcaption{display:flex;flex-direction:column;gap:.35rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--vd-border);color:var(--vd-muted-foreground);font-size:.95rem;line-height:1.5}
body[data-ui-page] .vd-figure-kicker{font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vd-ledger)}
body[data-ui-page] .wd-diagrams{padding-block:clamp(.5rem,1.5vw,1rem)}
@media (max-width:900px){body[data-ui-page] .vd-figure-grid{grid-template-columns:1fr}}

/* Nav: sticky, blurred, serif wordmark */
body[data-ui-page] .topbar{position:sticky;top:0;z-index:50;min-height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:0;border-bottom:1px solid var(--vd-border);background:color-mix(in oklab,var(--vd-background) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body[data-ui-page] .topbar.wrap{width:100%;max-width:none;padding-inline:max(1.25rem,calc((100vw - 1120px)/2));margin:0}
body[data-ui-page] .wordmark,body[data-ui-page] .brand{color:var(--vd-foreground);text-decoration:none}
body[data-ui-page] .brand{display:inline-flex;align-items:center;gap:11px;font-size:14px;letter-spacing:.12em;font-weight:800}
body[data-ui-page] .site-links,body[data-ui-page] .top-link,body[data-ui-page] .nav-tools{display:flex;align-items:center;gap:1.75rem}
body[data-ui-page] .site-links a,body[data-ui-page] .top-link,body[data-ui-page] .back-link,body[data-ui-page] .topbar>a:not(.wordmark){font-size:.875rem;font-weight:400;color:var(--vd-muted-foreground);text-decoration:none;transition:color .3s}
body[data-ui-page] .site-links a:hover,body[data-ui-page] .top-link:hover,body[data-ui-page] .topbar>a:not(.wordmark):hover{color:var(--vd-foreground)}
body[data-ui-page] .site-links .nav-cta,body[data-ui-page] .nav-cta{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 1rem;border-radius:999px;background:var(--vd-foreground);color:var(--vd-background)!important;font-weight:500;transition:background-color .3s}
body[data-ui-page] .site-links .nav-cta:hover{background:var(--vd-ledger);color:var(--vd-background)}
body[data-ui-page] .theme-toggle{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--vd-border);border-radius:999px;background:transparent;color:var(--vd-muted-foreground);cursor:pointer;transition:color .3s}
body[data-ui-page] .theme-toggle:hover{color:var(--vd-foreground)}
body[data-ui-page] .theme-toggle svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.5}
body[data-ui-page] .theme-toggle .sun{display:none}
html.dark .theme-toggle .sun{display:block}
html.dark .theme-toggle .moon{display:none}
body[data-ui-page] .scroll-progress{position:absolute;inset-inline:0;bottom:-1px;height:1px;pointer-events:none}
body[data-ui-page] .scroll-progress i{display:block;height:1px;background:var(--vd-ledger);transform-origin:left;transform:scaleX(0)}

/* Footer: hairline, mono, ghost lettering */
body[data-ui-page] .footer,body[data-ui-page] footer{border-top:1px solid var(--vd-border);color:var(--vd-muted-foreground);font-size:.85rem}
body[data-ui-page] .footer{flex-wrap:wrap;margin-top:2.5rem}
body[data-ui-page] .footer a{color:var(--vd-muted-foreground);text-decoration:none}
body[data-ui-page] .footer a:hover{color:var(--vd-foreground)}
body[data-ui-page] .footer::after{content:"Verdock";flex-basis:100%;display:block;order:99;padding-top:2.5rem;font-family:var(--vd-sans);font-weight:700;font-size:min(24vw,15.5rem);line-height:.8;letter-spacing:-.05em;color:color-mix(in oklab,var(--vd-foreground) 14%,transparent);user-select:none;pointer-events:none;overflow:hidden}

/* Motion: reveal on scroll, rise on load */
html.js [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js [data-reveal][data-shown="true"]{opacity:1;transform:none}
@keyframes vd-rise{from{transform:translateY(14px)}to{transform:none}}
html.js .wd-hero h1,html.js .wd-hero .wd-lead,html.js .wd-hero .wd-actions{animation:vd-rise 1s cubic-bezier(.2,.7,.2,1) both}
html.js .wd-hero .wd-lead{animation-delay:.12s}
html.js .wd-hero .wd-actions{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  html.js .wd-hero h1,html.js .wd-hero .wd-lead,html.js .wd-hero .wd-actions{animation:none}
}

/* Page rhythm */
body[data-ui-page] .wd-section,body[data-ui-page] .method,body[data-ui-page] .closing,body[data-ui-page] .boundary{padding-block:clamp(1.75rem,3.6vw,3rem)}
body[data-ui-page] .wd-section-head h2,body[data-ui-page] .section-intro h2,body[data-ui-page] .closing h2,body[data-ui-page] .lab h1{letter-spacing:-.02em}
body[data-ui-page] .wd-four,body[data-ui-page] .wd-feature-grid,body[data-ui-page] .wd-deployment-grid,body[data-ui-page] .resource-grid,body[data-ui-page] .steps{gap:1rem}
body[data-ui-page] .wd-track li{border-color:var(--vd-border)!important}
body[data-ui-page] .wd-faq-list details{border-color:var(--vd-border)!important}
body[data-ui-page] .wd-faq-list summary{font-family:var(--vd-sans);font-weight:600}

/* Skip link */
body[data-ui-page] .skip-link,body[data-ui-page] .skip{background:var(--vd-foreground);color:var(--vd-background)}

@media (max-width:700px){
  body[data-ui-page] .topbar.wrap{padding-inline:1.25rem}
  body[data-ui-page] .site-links{gap:1rem;flex-wrap:wrap}
}

/* Operation timeline: numbered nodes on one line */
body[data-ui-page] .wd-track{position:relative;list-style:none;padding:0;margin:1.5rem 0}
body[data-ui-page] .wd-track li{position:relative;display:grid;grid-template-columns:2.4rem 1fr;gap:1.1rem;align-items:start;padding:1.15rem 0;border-top:0!important}
body[data-ui-page] .wd-track li>span:last-child{display:none}
body[data-ui-page] .wd-track li::before{content:"";position:absolute;left:1.2rem;top:3.4rem;bottom:-.4rem;width:1px;background:var(--vd-border-strong)}
body[data-ui-page] .wd-track li:last-child::before{display:none}
body[data-ui-page] .wd-track-index{display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0!important;border:1px solid var(--vd-border-strong);border-radius:50%;background:var(--vd-surface);color:var(--vd-foreground)!important;font-family:var(--vd-sans);font-weight:600;font-size:.78rem!important;letter-spacing:.03em;position:relative;z-index:1}
body[data-ui-page] .wd-track li:nth-child(4) .wd-track-index{background:var(--vd-foreground);color:var(--vd-background)!important;border-color:var(--vd-foreground)}
body[data-ui-page] .wd-track li:nth-child(5) .wd-track-index{background:var(--vd-amber-soft);color:var(--vd-amber)!important;border-color:var(--vd-amber)}
body[data-ui-page] .wd-track li:nth-child(6) .wd-track-index{background:var(--vd-ledger-soft);color:var(--vd-ledger)!important;border-color:var(--vd-ledger)}
body[data-ui-page] .wd-track li:nth-child(7) .wd-track-index{background:var(--vd-ledger);color:var(--vd-background)!important;border-color:var(--vd-ledger)}
body[data-ui-page] .wd-track b{font-size:1.05rem;font-weight:600}

/* Runtime flow: connected, numbered steps */
body[data-ui-page] .flow{counter-reset:flow;gap:1.75rem}
body[data-ui-page] .flow li{counter-increment:flow;position:relative;border:1px solid var(--vd-border)!important;border-radius:1rem!important;background:var(--vd-surface)!important;padding:1.25rem!important}
body[data-ui-page] .flow li::before{content:counter(flow);display:grid;place-items:center;width:2rem;height:2rem;margin-bottom:.9rem;border-radius:50%;background:var(--vd-ledger-soft);color:var(--vd-ledger);border:1px solid var(--vd-ledger-line);font-weight:600;font-size:.8rem}
body[data-ui-page] .flow li:not(:last-child)::after{content:"";position:absolute;top:2.25rem;right:-1.75rem;width:1.75rem;height:2px;background:repeating-linear-gradient(90deg,var(--vd-ledger) 0 4px,transparent 4px 9px)}
body[data-ui-page] .flow b{font-size:1.05rem;font-weight:600}
@media (max-width:1000px){body[data-ui-page] .flow li:not(:last-child)::after{display:none}}

/* Step trail across the lab pages */
body[data-ui-page] .journey-steps{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.5rem 0 2.5rem}
body[data-ui-page] .journey-steps a,body[data-ui-page] .journey-steps li[aria-current]{display:inline-flex;padding:.4rem .95rem;border:1px solid var(--vd-border)!important;border-radius:999px;background:var(--vd-surface);color:var(--vd-muted-foreground);font-size:.85rem;font-weight:500;text-decoration:none;transition:border-color .3s,color .3s}
body[data-ui-page] .journey-steps a:hover{color:var(--vd-foreground);border-color:var(--vd-foreground)!important}
body[data-ui-page] .journey-steps [aria-current="step"]{background:var(--vd-foreground);color:var(--vd-background);border-color:var(--vd-foreground)!important;font-weight:600;padding-bottom:.4rem}

/* Figures on lab pages */
body[data-ui-page] .vd-isolation{margin:0 0 1.5rem}

/* Evidence canvas: living connections */
body[data-ui-app] .connections path{stroke-dasharray:3 7;animation:vd-flow 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){body[data-ui-app] .connections path{animation:none}}

/* Wide diagrams scroll inside their card on small screens instead of shrinking the labels */
body[data-ui-page] .vd-figure-art{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  body[data-ui-page] .vd-figure .vd-svg{min-width:600px}
  body[data-ui-page] .vd-figure-wide .vd-svg{min-width:780px}
}

/* Feedback form: the design's ink button in both themes */
body[data-ui-page] .form-card button{background:var(--vd-foreground);color:var(--vd-background);border:1px solid var(--vd-foreground);border-radius:999px;font-weight:600}
body[data-ui-page] .form-card button:hover:enabled{background:var(--vd-ledger);border-color:var(--vd-ledger);color:var(--vd-background)}

/* Working screens use the standard system typeface; the design typeface is for reading pages */
body[data-ui-work],body[data-ui-app]{--vd-sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;--vd-serif:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}

/* Spacing between blocks on the homepage */
body[data-ui-page] .wd-close{margin-block:1.25rem!important}
body[data-ui-page] .wd-hero{padding-block:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem)!important}
body[data-ui-page] .wd-section-head{margin-bottom:1.25rem!important}

/* Which page you are on: tabs, with the current page marked */
body[data-ui-page] .site-tabs{position:sticky;top:4rem;z-index:40;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding:.4rem max(1rem,calc((100vw - 1120px)/2)) .65rem;border-bottom:1px solid var(--vd-border);background:color-mix(in oklab,var(--vd-background) 92%,transparent);backdrop-filter:blur(10px)}
body[data-ui-page] .site-tabs::-webkit-scrollbar{display:none}
body[data-ui-page] .site-tabs a{position:relative;flex:none;padding:.4rem .85rem;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--vd-muted-foreground);text-decoration:none;transition:color .3s,background-color .3s}
body[data-ui-page] .site-tabs a:hover{color:var(--vd-foreground)}
body[data-ui-page] .site-tabs a[aria-current="page"]{color:var(--vd-foreground);background:var(--vd-ledger-soft);font-weight:600}
body[data-ui-page] .site-tabs a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-.56rem;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--vd-ledger);border-bottom:0}
body[data-ui-page] .site-links a[aria-current="location"]{color:var(--vd-foreground);box-shadow:inset 0 -2px 0 var(--vd-ledger);padding-bottom:.35rem}
body[data-ui-page] [id]{scroll-margin-top:5.25rem}
body[data-ui-tabs] [id]{scroll-margin-top:8rem}

/* Next steps look like buttons */
body[data-ui-page] .next-button{margin-top:.75rem}
body[data-ui-page] .journey-steps li[aria-current="step"]{background:var(--vd-foreground);color:var(--vd-background);border-color:var(--vd-foreground)!important;font-weight:600}

/* Page polish: shared header, tags, evidence blocks and workspace sidebar */
body[data-ui-page] .wordmark{display:inline-flex;align-items:center;gap:.65rem;font-size:.875rem;font-weight:800;letter-spacing:.12em}
body[data-ui-page] .wordmark .logo-mark{width:44px;height:34px;object-fit:contain;background:transparent;border-radius:0}
body[data-ui-page] .site-links a{text-decoration:none}
body[data-ui-page] .beta-label{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--vd-ledger-line);background:var(--vd-ledger-soft);color:var(--vd-ledger)}
body[data-ui-page] .beta-label::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--vd-ledger)}
body[data-ui-page] .notice{border:1px solid var(--vd-border);border-left:3px solid var(--vd-ledger);border-radius:14px;background:var(--vd-surface);padding:1rem 1.25rem;box-shadow:0 1px 2px rgb(0 0 0/.04)}
body[data-ui-page] .table-wrap{border:1px solid var(--vd-border);border-radius:16px;background:var(--vd-surface);overflow:auto;box-shadow:0 1px 2px rgb(0 0 0/.04)}
body[data-ui-page] .table-wrap table{background:transparent}
body[data-ui-page] .table-wrap th{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vd-muted-foreground)}
body[data-ui-page] .table-wrap tr:last-child td{border-bottom:0}
body[data-ui-page] .table-wrap button{border-radius:999px;padding:.35rem .9rem;font-size:.85rem;font-weight:500}
body[data-ui-page] #detail{border-radius:16px;box-shadow:0 1px 2px rgb(0 0 0/.04)}
body[data-ui-page] .evidence-link{display:inline-flex;align-items:center;gap:.4rem;margin:1rem 0;padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--vd-border);background:var(--vd-surface);color:var(--vd-foreground);font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s}
body[data-ui-page] .evidence-link:hover{border-color:var(--vd-ledger);background:var(--vd-ledger-soft)}
body[data-ui-page] .evidence-link::after{content:"\2197";font-size:.85em}
body[data-ui-page] .journey-cta{border:1px solid var(--vd-border);border-radius:16px;background:var(--vd-surface);padding:1.5rem}
body[data-ui-page] main{padding-bottom:1rem}
body[data-ui-page] .footer,body[data-ui-page] footer{margin-top:1.5rem}
body[data-ui-page] details{border:1px solid var(--vd-border);border-radius:14px;background:var(--vd-surface);padding:.2rem 1rem}
body[data-ui-page] details>summary{cursor:pointer;font-weight:600;padding:.7rem 0}
body[data-ui-page] details[open]>summary{border-bottom:1px solid var(--vd-border);margin-bottom:.6rem}

body[data-ui-app] .sidebar .workspace-links,body[data-ui-app] .sidebar nav{display:flex;flex-direction:column;gap:.2rem}
body[data-ui-app] .sidebar .workspace-links{padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--vd-border)}
body[data-ui-app] .sidebar .workspace-links a,body[data-ui-app] .sidebar nav .nav{display:flex;align-items:center;width:100%;margin:0;padding:.6rem .8rem;border:0;border-radius:10px;background:none;font:500 .92rem/1.3 var(--vd-sans);text-align:left;text-decoration:none;color:var(--vd-foreground)}
body[data-ui-app] .sidebar .workspace-links a:hover,body[data-ui-app] .sidebar nav .nav:hover{background:var(--vd-muted)}
body[data-ui-app] .sidebar nav .nav.active{background:var(--vd-ledger-soft);color:var(--vd-ledger);font-weight:600}
body[data-ui-app] .sidebar>.overline{margin-top:2rem;margin-bottom:.5rem;padding-left:.8rem}

/* Control room (/demo) and security page */
.cr-mono{font-family:var(--vd-mono,ui-monospace,monospace)}
.cr-muted{color:var(--vd-muted-foreground)}
.cr-banner{border-block:1px solid var(--vd-amber);background:var(--vd-amber-soft);backdrop-filter:blur(8px)}
.cr-banner p{margin:0;padding:.5rem 0;text-align:center;font:500 .75rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-amber)}
.cr{padding-block:2.5rem 1rem;max-width:1160px}
.cr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem}
.cr h1{margin:.25rem 0 .5rem;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.03em}
.cr-intro{max-width:34rem;margin:0;color:var(--vd-muted-foreground)}
.cr-row{display:flex;gap:.5rem;flex-wrap:wrap}
.cr-btn{display:inline-flex;align-items:center;gap:.4rem;height:2.5rem;padding:0 1rem;border:1px solid var(--vd-border-strong,var(--vd-border));border-radius:999px;background:transparent;color:var(--vd-foreground);font:500 .875rem var(--vd-sans);cursor:pointer;transition:background-color .2s,border-color .2s}
.cr-btn:hover:not(:disabled){background:var(--vd-muted)}
.cr-btn:disabled{opacity:.45;cursor:not-allowed}
.cr-btn.is-on,.cr-btn.is-ink{background:var(--vd-foreground);color:var(--vd-background);border-color:transparent}
.cr-btn.is-warn{border-color:var(--vd-amber);color:var(--vd-amber)}
.cr-scenarios{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.cr-counts{display:grid;grid-template-columns:repeat(5,1fr);margin:1.5rem 0 0;border:1px solid var(--vd-border);border-radius:14px;overflow:hidden;background:var(--vd-surface)}
.cr-count{padding:.9rem 1rem;border-left:1px solid var(--vd-border)}
.cr-count:first-child{border-left:0}
.cr-eyebrow{margin:0;font:600 .62rem var(--vd-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--vd-muted-foreground)}
.cr-eyebrow.is-warn{color:var(--vd-amber)}
.cr-num{margin:.25rem 0 0;font:500 1.25rem var(--vd-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.cr-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 340px;gap:1.5rem;margin-top:1.5rem;align-items:start}
.cr-card{border:1px solid var(--vd-border);border-radius:16px;background:var(--vd-surface);padding:1.25rem}
.cr-card h2{margin:0;font-size:1.5rem;letter-spacing:-.02em}
.cr-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.cr-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .6rem;border:1px solid var(--vd-border);border-radius:999px;font:500 .7rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground)}
.cr-pill.is-warn{color:var(--vd-amber);border-color:var(--vd-amber)}
.cr-field{display:block;margin-top:1.5rem}
.cr-field-top{display:flex;justify-content:space-between;font-size:.875rem}
.cr-field input{width:100%;margin-top:.75rem;accent-color:var(--vd-ledger)}
.cr-note{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--vd-border);font:400 .7rem/1.6 var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground)}
.cr-ledger .cr-note{margin:.1rem 0 0;padding:0;border:0}
.cr-stack{display:grid;gap:.75rem;min-width:0}
.cr-spend{padding:1rem}
.cr-spend-top{display:flex;justify-content:space-between;font:400 .75rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground)}
.cr-meter{height:.5rem;margin-top:.75rem;border-radius:999px;background:var(--vd-muted);overflow:hidden}
.cr-bar{height:100%;width:0;border-radius:999px;background:var(--vd-ledger);transition:width .7s}
.cr-bar.is-warn{background:var(--vd-amber)}
.cr-lane{border:1px solid var(--vd-border);border-radius:16px;background:var(--vd-surface);padding:1rem}
.cr-lane-head{display:flex;align-items:center;gap:.75rem}
.cr-lane-name{margin:0;font:500 .875rem var(--vd-sans)}
.cr-state{margin-left:auto;font:400 .65rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground)}
.cr-dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--vd-border);flex:none}
.cr-dot.is-ok{background:var(--vd-ledger)}.cr-dot.is-held,.cr-dot.is-blocked,.cr-dot.is-unknown{background:var(--vd-amber)}
.cr-dot.is-busy{background:var(--vd-foreground);animation:cr-pulse 1s infinite}
.cr-dot.is-unknown{animation:cr-pulse .8s infinite}
@keyframes cr-pulse{50%{opacity:.35}}
.cr-lane-text{margin:.75rem 0 0;font:400 .875rem var(--vd-mono,ui-monospace,monospace);animation:cr-in .35s both}
.cr-lane-text.is-idle{color:var(--vd-muted-foreground)}.cr-lane-text.is-ok{color:var(--vd-ledger)}
.cr-lane-text.is-held,.cr-lane-text.is-blocked,.cr-lane-text.is-unknown{color:var(--vd-amber)}
.cr-lane-log{margin:.25rem 0 0;font:400 .75rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground);opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes cr-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cr-approval{border:1px solid var(--vd-amber);border-radius:16px;background:var(--vd-amber-soft);padding:1.25rem}
.cr-approval[hidden],.cr-queue[hidden]{display:none}
.cr-approval-text{margin:.5rem 0 1rem;font:400 1.1rem var(--vd-mono,ui-monospace,monospace)}
.cr-queue{border:1px dashed var(--vd-amber);border-radius:16px;padding:1rem;font:400 .75rem/1.6 var(--vd-mono,ui-monospace,monospace);color:var(--vd-amber)}
.cr-panels{min-width:0;display:grid;gap:1.5rem}
.cr-tabs{display:none}
.cr-ledger-list,.cr-receipt-list{list-style:none;margin:1rem 0 0;padding:0}
.cr-ledger-list{max-height:14rem;overflow-y:auto}
.cr-ledger-row{display:flex;justify-content:space-between;gap:.5rem;padding:.65rem 0;border-top:1px solid var(--vd-border);font:400 .75rem var(--vd-mono,ui-monospace,monospace)}
.cr-ledger-row:first-child{border-top:0}
.cr-empty{padding:.5rem 0;font:400 .75rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground)}
.cr-receipt-list{display:grid;gap:.75rem;max-height:34rem;overflow-y:auto;padding-right:.25rem}
.cr-receipt{border:1px solid var(--vd-border);border-radius:12px;padding:.75rem;font:400 .7rem/1.6 var(--vd-mono,ui-monospace,monospace);transition:background-color .5s,border-color .5s;animation:cr-in .35s both}
.cr-receipt.is-ok{border-color:var(--vd-ledger);background:var(--vd-ledger-soft)}
.cr-receipt.is-bad{border-color:var(--vd-fail);background:var(--vd-fail-soft)}
.cr-receipt-head{display:flex;justify-content:space-between}
.cr-ok{color:var(--vd-ledger)}.cr-bad{color:var(--vd-fail)}
.cr-receipt-grid{display:grid;grid-template-columns:84px 1fr;gap:0 .5rem;margin:.5rem 0 0;color:var(--vd-muted-foreground)}
.cr-receipt-grid dt{margin:0}.cr-receipt-grid dd{margin:0;color:var(--vd-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1023px){
 .cr-grid{grid-template-columns:1fr}
 .cr-tabs{display:grid;grid-template-columns:1fr 1fr;padding:.25rem;border:1px solid var(--vd-border);border-radius:999px}
 .cr-tabs button{border:0;border-radius:999px;padding:.5rem;background:none;color:var(--vd-muted-foreground);font:500 .875rem var(--vd-sans)}
 .cr-tabs button[aria-selected=true]{background:var(--vd-foreground);color:var(--vd-background)}
 .cr-panels[data-tab=ledger] .cr-receipts,.cr-panels[data-tab=receipts] .cr-ledger{display:none}
 .cr-panels{gap:.75rem}
}
@media(max-width:700px){
 .cr-counts{grid-template-columns:repeat(3,1fr)}
 .cr-count:nth-child(4){border-left:0}
 .cr-count:nth-child(n+4){border-top:1px solid var(--vd-border)}
 .cr-count:nth-child(5){grid-column:span 2}
 .cr-scenarios{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1rem;padding:0 1rem .5rem}
 .cr-btn{flex:none}
}
@media(prefers-reduced-motion:reduce){.cr-dot.is-busy,.cr-dot.is-unknown{animation:none}}

.sec-hero{padding-block:2.5rem 1rem}
.sec-hero h1{max-width:52rem;margin:.5rem 0 0;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.04;letter-spacing:-.03em}
.sec-fig{margin:1.5rem 0 2rem}
.sec-fig figcaption{margin-top:.75rem;text-align:center;font:500 .8rem var(--vd-mono,ui-monospace,monospace);color:var(--vd-muted-foreground)}
.sec-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--vd-border)}
.sec-row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.6fr);gap:1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--vd-border)}
.sec-row h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em}
.sec-row p{margin:0;color:var(--vd-muted-foreground);line-height:1.65}
.sec-n{font-size:.75rem;color:var(--vd-muted-foreground)}
.sec-levels{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0;padding:0;list-style:none}
.sec-levels .cr-pill{color:var(--vd-foreground)}
.sec-actions{margin-top:1.25rem!important}
.sec-claim{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-block:3rem 1rem;padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--vd-amber);border-radius:24px;background:var(--vd-amber-soft)}
.sec-claim h2{margin:0;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.02em}
.sec-claim ul{margin:0 0 1rem;padding:0;list-style:none}
.sec-claim li{font-size:1.4rem;margin:.4rem 0}
@media(max-width:800px){.sec-row,.sec-claim{grid-template-columns:1fr;gap:.75rem}}