/* Vaultumi site: liquid glass on a calm grey stage. One accent (graphite in light, near-white in dark). */

:root{
  color-scheme:light dark;
  --bg:#e4e5e8;--stage-hi:#f4f5f7;--stage-lo:rgba(255,255,255,.4);
  --ink:#17181c;--muted:#4a4d55;--line:rgba(23,24,28,.12);--line-strong:rgba(23,24,28,.28);
  --accent:#17181c;--accent-ink:#f4f5f7;--focus:#17181c;
  --soft:rgba(23,24,28,.06);
  --fill:rgba(255,255,255,.46);--fill-hover:rgba(255,255,255,.62);--fill-solid:rgba(247,248,249,.94);
  --rim:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 38%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.7));
  --shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(23,24,28,.05),0 1px 2px rgba(23,24,28,.04),0 16px 32px -20px rgba(23,24,28,.22);
  --glyph:#17181c;--drift:rgba(255,255,255,.8);--spec:rgba(255,255,255,.5);
  --tile-a:rgba(255,255,255,.66);--tile-b:rgba(255,255,255,.16);
  --tile-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -14px 24px -16px rgba(255,255,255,.7),0 1px 2px rgba(23,24,28,.08),0 28px 44px -24px rgba(23,24,28,.34);
  --c-amber:rgba(255,168,64,.8);--c-magenta:rgba(236,72,153,.72);--c-blue:rgba(66,120,255,.8);--c-cyan:rgba(56,204,240,.72);
  --sans:ui-sans-serif,"SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e0f12;--stage-hi:#1b1d23;--stage-lo:rgba(255,255,255,.03);
  --ink:#eceef2;--muted:#a3a7b2;--line:rgba(236,238,242,.12);--line-strong:rgba(236,238,242,.3);
  --accent:#eceef2;--accent-ink:#0e0f12;--focus:#ffffff;
  --soft:rgba(255,255,255,.06);
  --fill:rgba(255,255,255,.055);--fill-hover:rgba(255,255,255,.09);--fill-solid:rgba(27,29,35,.96);
  --rim:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 40%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.2));
  --shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.03),0 16px 32px -20px rgba(0,0,0,.7);
  --glyph:#eceef2;--drift:rgba(120,132,180,.12);--spec:rgba(255,255,255,.08);
  --tile-a:rgba(255,255,255,.14);--tile-b:rgba(255,255,255,.03);
  --tile-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -14px 24px -16px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4),0 28px 44px -24px rgba(0,0,0,.8);
  --c-amber:rgba(255,168,64,.6);--c-magenta:rgba(236,72,153,.55);--c-blue:rgba(66,120,255,.65);--c-cyan:rgba(56,204,240,.55);
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.6 var(--sans);color:var(--ink);background-color:var(--bg);
  background-image:radial-gradient(900px 520px at 78% -6%,var(--stage-hi),transparent 70%),radial-gradient(640px 480px at 0% 36%,var(--stage-lo),transparent 70%);
  background-repeat:no-repeat;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-64px;background:var(--accent);color:var(--accent-ink);padding:8px 16px;border-radius:12px;z-index:20}
.skip:focus{top:12px}
.wrap{width:min(100% - 32px,1120px);margin-inline:auto}
.prose{width:min(100% - 32px,760px);margin-inline:auto}

h1,h2,h3,h4{font-family:var(--sans);font-weight:500;line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2.5rem,6.4vw,4.5rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(1.75rem,3.8vw,2.75rem);letter-spacing:-.025em;margin-top:1.6em;text-wrap:balance}
h3{font-size:1.25rem;margin-top:1.4em}
h4{font-size:1.0625rem;margin:0 0 .25em}
p,ul,ol,table,pre,blockquote{margin:0 0 1em}
.muted{color:var(--muted)}
.eyebrow{font-size:.9375rem;font-weight:400;color:var(--muted);margin:0 0 16px}

/* ---------- glass surfaces ---------- */
.glass,header.site .wrap,.toc,.badge{position:relative;background-color:var(--fill);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  transition:background-color .15s ease}
.glass::before,header.site .wrap::before,.toc::before,.badge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.card:hover,details:hover{background-color:var(--fill-hover)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--spec),transparent 65%)}
.glass.lit::after{opacity:1}
.table-wrap,.notice,.doc blockquote{background-color:var(--fill);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,header.site .wrap,.toc,.badge,.table-wrap,.notice,.doc blockquote{background-color:var(--fill-solid)}
  .card:hover,details:hover{background-color:var(--fill-solid)}
}

/* ---------- brand mark: the bare lock glyph (also the hero fallback when WebGL is unavailable) ---------- */
.mark{--s:30px;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s)}
.mark-lg{--s:clamp(200px,60vw,300px)}
.mark-glyph{display:block;width:100%;height:100%;fill:none;stroke:var(--glyph);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.mark-glyph .dot{fill:var(--glyph);stroke:none}
.mark-lg .mark-glyph{stroke-width:2.8}

[id]{scroll-margin-top:96px}
/* ---------- header, footer ---------- */
header.site{position:sticky;top:12px;z-index:10;padding:12px 0 0}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:8px 16px 8px 12px;border-radius:28px}
.brand{display:inline-flex;align-items:center;gap:12px;font:500 1.25rem/1 var(--sans);color:var(--ink);text-decoration:none}
@media (max-width:639px){header.site{position:static}[id]{scroll-margin-top:16px}}
nav ul{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0}
nav a{display:inline-block;padding:8px 12px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:.9375rem;transition:color .15s ease,background-color .15s ease}
nav a:hover{color:var(--ink);background-color:var(--soft)}
nav a[aria-current]{color:var(--ink);background-color:var(--soft)}

footer.site{border-top:1px solid var(--line);padding:48px 0 64px;color:var(--muted);font-size:.9375rem}
footer.site .wrap{display:grid;gap:32px 24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:4px}
footer.site a{color:var(--ink)}
footer.site .brand{margin-bottom:12px}
footer.site h2{font:500 .9375rem var(--sans);letter-spacing:0;margin:0 0 8px;color:var(--muted)}
.fine{grid-column:1/-1;font-size:.875rem;max-width:68ch}

/* ---------- buttons, badge ---------- */
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:32px 0 16px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;border:1px solid var(--accent);transition:opacity .15s ease,background-color .15s ease,transform .12s ease}
.btn:hover{opacity:.86}
.btn:active,nav a:active,summary:active{transform:scale(.97)}
.btn .drop{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--accent-ink);opacity:.55;pointer-events:none;animation:drop .45s ease-out forwards}
@keyframes drop{to{transform:scale(16);opacity:0}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{opacity:1;background:var(--soft)}
.badge{display:inline-flex;align-items:center;gap:12px;padding:8px 20px 8px 16px;border-radius:16px;color:var(--ink);text-decoration:none;pointer-events:none;cursor:default;text-align:left;line-height:1.2}
.badge svg{width:24px;height:24px;flex:none}
.badge small{display:block;font-size:.75rem;color:var(--muted)}
.badge strong{font-size:1rem;font-weight:500}
.note{font-size:.9375rem;color:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;padding:clamp(32px,6vw,72px) 0 clamp(32px,6vw,64px)}
.hero>.wrap{position:relative}
/* slow drifting light on the stage behind the hero: transform and opacity only */
.hero::before{content:"";position:absolute;right:-12%;top:-34%;width:min(780px,130vw);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--drift),transparent);opacity:.85;animation:drift 20s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes drift{0%{transform:translate3d(-8%,2%,0) scale(1);opacity:.85}50%{opacity:.5}100%{transform:translate3d(6%,12%,0) scale(1.14);opacity:.8}}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero-mark{position:relative;display:grid;place-items:center;width:min(360px,100%);aspect-ratio:1;justify-self:center}
.glass-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.glass-canvas[hidden]{display:none}
.hero-mark.gl .mark{display:none}
.hero h1{max-width:12em;margin-bottom:24px}
.hero .lede{font-size:clamp(1.125rem,2.2vw,1.3125rem);color:var(--muted);max-width:34rem;margin:0}
.hero-text .note{margin:0}
@media (min-width:880px){
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px}
  .hero-text{grid-column:1;grid-row:1}
  .hero-mark{grid-column:2;grid-row:1}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-text,.hero-mark{animation:rise .5s ease-out both}
.hero-text{animation-delay:.06s}

/* ---------- sections ---------- */
section{padding:clamp(48px,8vw,96px) 0}
section+section{border-top:1px solid var(--line)}
section>.wrap>h2:first-child,.prose>h2:first-child{margin-top:0}
.intro{max-width:44rem;color:var(--muted);font-size:1.125rem}
.grid{display:grid;gap:16px;grid-template-columns:1fr;margin:32px 0 0;padding:0;list-style:none}
.card{border-radius:24px;padding:24px}
.card h3{margin:16px 0 8px;font-size:1.1875rem}
.card p{margin:0;color:var(--muted);font-size:1rem}
.ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:600px){.bento{grid-template-columns:repeat(2,1fr)}.bento .c1,.bento .c7{grid-column:1/-1}}
@media (min-width:960px){
  .bento{grid-template-columns:repeat(12,1fr)}
  .bento .c1{grid-column:span 7}.bento .c2{grid-column:span 5}
  .bento .c3,.bento .c4,.bento .c5{grid-column:span 4}
  .bento .c6{grid-column:span 5}.bento .c7{grid-column:span 7}
  .bento .c1,.bento .c7{padding:32px}
}
.sub{margin:64px 0 0;font-size:1.5rem;letter-spacing:-.01em}
.feats{display:grid;gap:0 48px;grid-template-columns:1fr;list-style:none;margin:16px 0 0;padding:0}
.feats li{padding:24px 0;border-top:1px solid var(--line)}
.feats p{margin:0;color:var(--muted)}
@media (min-width:760px){.feats{grid-template-columns:repeat(2,1fr)}}
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));padding:0;list-style:none;margin:32px 0 0}
.steps li{counter-increment:s;border-radius:24px;padding:24px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-size:.875rem;color:var(--muted);margin-bottom:16px}
.steps h3{margin:0 0 8px;font-size:1.1875rem}
.steps p{margin:0;color:var(--muted);font-size:1rem}
.two{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-top:32px;align-items:start}
.two .card>h3:first-child{margin-top:0}
.plan h3{margin-top:0;font-size:1.5rem}
.plan .tag{font-size:.875rem;color:var(--muted);margin:0 0 16px}
.plan ul{list-style:none;padding:0;margin:0}
.plan li{display:flex;gap:12px;padding:6px 0}
.plan li svg{flex:none;width:20px;height:20px;margin-top:4px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan.featured{background-color:var(--fill-hover);box-shadow:var(--shadow),0 0 0 1px var(--line-strong)}
.card ul{padding-left:1.2em;margin:0;color:var(--muted)}
.card li{margin-bottom:8px}
.limits{columns:2 260px;column-gap:32px}
.limits li{break-inside:avoid}
details{border-radius:16px;margin:0 0 8px;padding:0 20px}
summary{cursor:pointer;font-weight:500;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.375rem;line-height:1;color:var(--muted)}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin:0 0 16px}
.band{background:transparent}

/* ---------- documents ---------- */
.doc{padding:clamp(32px,5vw,64px) 0 64px}
.doc h1{font-size:clamp(2.25rem,5.5vw,3.5rem);margin-bottom:24px}
.doc h2{border-top:1px solid var(--line);padding-top:24px;margin-top:48px;font-size:clamp(1.4rem,3.4vw,1.875rem);letter-spacing:-.015em}
.doc h2:first-of-type{border-top:0}
.doc h3{letter-spacing:0}
.doc li{margin-bottom:6px}
.doc code,.doc pre{font:.9em var(--mono);background:var(--soft);border-radius:6px}
.doc code{padding:.1em .4em;word-break:break-word}
.doc pre{padding:16px;overflow-x:auto;white-space:pre-wrap}
.doc pre code{background:none;padding:0}
.doc blockquote{border-radius:16px;padding:12px 20px;color:var(--muted)}
.doc blockquote p{margin:0}
.toc{border-radius:20px;padding:16px 24px;margin:0 0 32px}
.toc h2{font:500 .9375rem var(--sans);margin:0 0 8px;border:0;padding:0;color:var(--muted);letter-spacing:0}
.toc ol,.toc ul{margin:0;padding-left:1.2em;columns:2 240px;column-gap:32px}
.toc li{margin:0 0 4px;break-inside:avoid}
.notice{border-radius:16px;padding:12px 16px;color:var(--muted);font-size:.9375rem}
mark.owner{background:var(--soft);color:var(--ink);padding:1px 6px;border-radius:6px;font-weight:500;box-shadow:inset 0 0 0 1px var(--line-strong)}
.table-wrap{overflow-x:auto;border-radius:16px;margin:0 0 24px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9375rem;margin:0}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-weight:500;background:var(--soft)}
tr:last-child td{border-bottom:0}
.center{text-align:center}

/* ---------- scroll reveal: fade and 12px rise, once. Only when scripts run and motion is allowed ---------- */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease,background-color .15s ease;transition-delay:calc(var(--d,0) * 70ms),calc(var(--d,0) * 70ms),0s}
  .rv.in{opacity:1;transform:none}
  .rv:nth-child(2){--d:1}.rv:nth-child(3){--d:2}.rv:nth-child(4){--d:3}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{body{background:#fff;color:#000}header.site,.skip,footer.site,.mark,.glass-canvas,.hero::before{display:none}}