/* ===== Brierz chrome: the one header and footer on every page. bz-* classes, fully styled here, so page CSS can't reach in. ===== */
:root { color-scheme:light dark; }
.bz-skip { position:absolute; left:16px; top:-80px; z-index:40; padding:12px 16px; border-radius:10px; background:#20201E; color:#FFFFFF; font:700 14px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration:none; }
.bz-skip:focus { top:12px; }
.bz-top, .bz-foot { font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:16px; font-weight:400; font-style:normal; line-height:1.5; letter-spacing:normal; text-align:left; text-transform:none; -webkit-font-smoothing:antialiased; }
.bz-top *, .bz-foot * { box-sizing:border-box; }
.bz-top a, .bz-foot a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.bz-top :focus-visible, .bz-foot :focus-visible { outline:2px solid #20201E; outline:2px solid light-dark(#20201E, #F4EFE5); outline-offset:3px; border-radius:6px; }
/* header */
.bz-top { box-sizing:border-box; width:min(1180px, calc(100% - 48px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid #DCD6CE; border-bottom:1px solid light-dark(#DCD6CE, #3A3B33); color:#20201E; color:light-dark(#20201E, #F4EFE5); }
.bz-brand { display:flex; align-items:center; gap:9px; min-height:44px; }
.bz-mark { display:block; width:38px; height:24px; flex:none; }
.bz-word { font-size:20px; font-weight:850; letter-spacing:-.055em; line-height:1; }
.bz-nav { display:flex; align-items:center; gap:28px; margin:0; padding:0; font-size:14px; font-weight:650; line-height:1.2; color:#6A645C; color:light-dark(#6A645C, #C4BFB3); }
.bz-nav a { display:inline-flex; align-items:center; min-height:44px; }
.bz-nav a:not(.bz-cta):hover { color:#20201E; color:light-dark(#20201E, #FFFFFF); }
.bz-top .bz-nav a[aria-current="page"] { color:#20201E; color:light-dark(#20201E, #FFFFFF); text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; text-decoration-color:#F2B56E; }
.bz-nav .bz-cta { gap:6px; padding:0 18px; border-radius:999px; background:#F2B56E; color:#20201E; font-weight:750; transition:transform .18s ease; }
.bz-nav .bz-cta:hover { transform:translateY(-2px); }
.bz-nav .bz-cta:active { transform:translateY(0) scale(.98); }
/* footer: creed and method note on the left, four link columns on the right, a quiet bar underneath */
.bz-foot { display:block; margin:0; padding:0; border:0; background:#D8CABC; background:light-dark(#D8CABC, #171A17); color:#20201E; color:light-dark(#20201E, #F4EFE5); }
.bz-foot-in { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:clamp(56px, 7vw, 88px) 0 28px; display:grid; gap:36px; }
.bz-foot-top { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:40px 56px; align-items:start; }
.bz-foot-lead { display:grid; gap:22px; max-width:560px; }
.bz-foot .bz-creed { margin:0; max-width:14ch; font-size:clamp(34px, 4.4vw, 56px); font-weight:760; letter-spacing:-.07em; line-height:.98; color:inherit; }
.bz-foot-p { display:grid; gap:8px; font-size:14px; line-height:1.65; color:#4F4D46; color:light-dark(#4F4D46, #C4BFB3); }
.bz-foot-p p { margin:0; }
.bz-foot-p b { color:#20201E; color:light-dark(#20201E, #F4EFE5); }
.bz-foot-p a { text-decoration:underline; text-underline-offset:3px; text-decoration-color:#B9AB9A; text-decoration-color:light-dark(#B9AB9A, #5A5B52); }
.bz-foot-p a:hover { color:#20201E; color:light-dark(#20201E, #FFFFFF); text-decoration-color:currentColor; }
.bz-cols { display:grid; grid-template-columns:repeat(4, auto); gap:28px 44px; margin:0; padding:0; }
.bz-col { display:grid; align-content:start; gap:2px; min-width:0; }
.bz-col-h { margin:0 0 8px; font-size:12.5px; font-weight:650; color:#5A554E; color:light-dark(#5A554E, #A9A49A); }
.bz-col a { display:inline-flex; align-items:center; min-height:40px; font-size:14.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.bz-col a:hover { text-decoration:underline; text-underline-offset:4px; }
.bz-foot-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 26px; padding-top:22px; border-top:1px solid #C2B3A1; border-top:1px solid light-dark(#C2B3A1, #3A3B33); }
.bz-foot .bz-fine { margin:0; font-size:12.5px; color:#4F4D46; color:light-dark(#4F4D46, #C4BFB3); }
.bz-legal { display:flex; gap:22px; margin:0; padding:0; font-size:13px; font-weight:600; color:#4F4D46; color:light-dark(#4F4D46, #C4BFB3); }
.bz-legal a { display:inline-flex; align-items:center; min-height:44px; }
.bz-legal a:hover { color:#20201E; color:light-dark(#20201E, #FFFFFF); }
@media (max-width: 1000px) {
  .bz-foot-top { grid-template-columns:1fr; }
  .bz-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 24px; }
  .bz-col a { white-space:normal; }
}
@media (max-width: 600px) {
  .bz-top, .bz-foot-in { width:calc(100% - 32px); }
  .bz-top { padding:12px 0; }
  .bz-top .bz-nav { gap:0; }
  .bz-top .bz-nav a:not(.bz-cta) { display:none; }
  .bz-nav .bz-cta { padding:0 14px; font-size:13px; }
  .bz-foot-bar { flex-direction:column; align-items:flex-start; gap:8px; }
  .bz-cols { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-nav .bz-cta { transition:none; }
  .bz-nav .bz-cta:hover, .bz-nav .bz-cta:active { transform:none; }
}

/* ===== Brierz page base: tokens, type, panels, buttons. Every page except the landing starts from this. ===== */
:root { --paper:#F2EDE7; --white:#FFFFFF; --ink:#20201E; --muted:#6A645C; --line:#DCD6CE; --yellow:#F2B56E; --amber:#F2B56E; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--paper); background:light-dark(var(--paper), #1D1E1A); color:var(--ink); color:light-dark(var(--ink), #F4EFE5); -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
a { color:inherit; }
h1, h2, h3, p { margin:0; }
main { padding:26px 0 72px; }
.wrap { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
:focus-visible { outline:2px solid var(--ink); outline:2px solid light-dark(var(--ink), #F4EFE5); outline-offset:3px; border-radius:6px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:0; border-radius:999px; padding:12px 18px; font:inherit; font-size:14px; font-weight:750; cursor:pointer; text-decoration:none; transition:transform .18s ease; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-primary { background:var(--yellow); color:#20201E; }
.btn-dark { background:var(--ink); background:light-dark(var(--ink), #F4EFE5); color:#FFFFFF; color:light-dark(#FFFFFF, #20201E); }
.btn-outline { background:transparent; color:inherit; border:1px solid #CFC8BD; border:1px solid light-dark(#CFC8BD, #4A4B41); }
.panel { background:var(--white); background:light-dark(var(--white), #262720); border:1px solid #E5DFD7; border:1px solid light-dark(#E5DFD7, #3A3B33); border-radius:24px; min-width:0; }
.kicker { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); color:light-dark(var(--muted), #C4BFB3); }
.muted { color:var(--muted); color:light-dark(var(--muted), #C4BFB3); }
.num { font-variant-numeric:tabular-nums; }
.fine { font-size:12.5px; line-height:1.55; color:var(--muted); color:light-dark(var(--muted), #C4BFB3); }
.crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); color:light-dark(var(--muted), #C4BFB3); margin-bottom:16px; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { color:var(--ink); color:light-dark(var(--ink), #FFFFFF); text-decoration:underline; }
.kv { display:grid; margin:0; }
.kv div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-top:1px solid var(--line); border-top:1px solid light-dark(var(--line), #3A3B33); font-size:14px; }
.kv dt { color:var(--muted); color:light-dark(var(--muted), #C4BFB3); }
.kv dd { margin:0; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
/* the yellow closing band */
.cta { margin-top:18px; padding:clamp(26px, 4vw, 44px); border-radius:24px; background:var(--yellow); color:#20201E; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.cta h2 { font-size:clamp(28px, 3.6vw, 44px); line-height:1; letter-spacing:-.065em; font-weight:780; max-width:18ch; }
.cta p { font-size:15px; line-height:1.6; color:#4F4A44; max-width:52ch; margin-top:12px; }
.cta .acts { display:flex; flex-wrap:wrap; gap:10px; }
.cta .btn-outline { border-color:#20201E4D; color:#20201E; }
.cta .btn-dark { background:#20201E; color:#FFFFFF; }
.toast { position:fixed; z-index:30; bottom:22px; left:50%; transform:translate(-50%, 16px); opacity:0; pointer-events:none; padding:12px 16px; border-radius:999px; background:var(--ink); background:light-dark(var(--ink), #F2B56E); color:#FFFFFF; color:light-dark(#FFFFFF, #20201E); font-size:13.5px; transition:all .2s ease; }
.toast.show { transform:translate(-50%, 0); opacity:1; }
@media (max-width: 600px) { .wrap { width:calc(100% - 32px); } main { padding:18px 0 56px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .toast, .btn { transition:none; } .btn:hover, .btn:active { transform:none; } }

/* ===== Tier chips, shared by every page: a soft pill, a coloured dot and the tier name in sentence case. ===== */
.tchip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 9px; border-radius:999px; font-size:12px; font-weight:650; line-height:1; letter-spacing:-.01em; white-space:nowrap; background:#F1EDE6; background:light-dark(#F1EDE6, #2F302A); color:#20201E; color:light-dark(#20201E, #F4EFE5); }
.tchip::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--dot, #B5ADA1); }
.tchip.t0 { --dot:#3D3934; --dot:light-dark(#3D3934, #CFC8BE); }
.tchip.t1 { --dot:#8A827A; --dot:light-dark(#8A827A, #9A9389); }
.tchip.t2 { --dot:#B5ADA1; --dot:light-dark(#B5ADA1, #8E887E); }
.tchip.t3 { --dot:#F2B56E; }
.tchip.t4 { --dot:#D07A1F; --dot:light-dark(#D07A1F, #F0A34E); }
.tchip.none { background:transparent; box-shadow:inset 0 0 0 1px #D6CFC4; box-shadow:inset 0 0 0 1px light-dark(#D6CFC4, #4A4B41); color:#6A645C; color:light-dark(#6A645C, #C4BFB3); }
.tchip.none::before { background:transparent; box-shadow:inset 0 0 0 1.5px #B5ADA1; box-shadow:inset 0 0 0 1.5px light-dark(#B5ADA1, #6E6B62); }
.tchip.lg { font-size:13.5px; padding:8px 14px 8px 11px; gap:8px; }
.tchip.lg::before { width:9px; height:9px; }
.tchip .ts { display:none; }

/* ===== The 0-100 scale with the 90% range: vault pages and the method page ===== */
.vscale { display:grid; gap:8px; }
.vtrack { position:relative; height:34px; }
.vseg { position:absolute; top:10px; height:14px; }
.vseg.l0 { background:#EDE6DB; background:light-dark(#EDE6DB, #3A3B33); }
.vseg.l1 { background:#E0D6C8; background:light-dark(#E0D6C8, #33342D); }
.vseg.l2 { background:#D0C3B2; background:light-dark(#D0C3B2, #2C2D27); }
.vseg.first { border-radius:999px 0 0 999px; }
.vseg.last { border-radius:0 999px 999px 0; }
.vmid { position:absolute; top:0; bottom:0; left:50%; border-left:1.5px dashed var(--ink); border-left:1.5px dashed light-dark(var(--ink), #F4EFE5); opacity:.55; }
.vrange { position:absolute; top:6px; height:22px; border-radius:999px; background:var(--amber); border:2px solid var(--ink); border:2px solid light-dark(var(--ink), #F4EFE5); }
.vmark { position:absolute; top:0; width:4px; height:34px; margin-left:-2px; border-radius:2px; background:var(--ink); background:light-dark(var(--ink), #F4EFE5); box-shadow:0 0 0 2px #F7F4EE; box-shadow:0 0 0 2px light-dark(#F7F4EE, #2C2D26); }
.vaxis, .vtiers { position:relative; height:17px; font-size:12px; color:var(--muted); color:light-dark(var(--muted), #C4BFB3); }
.vaxis span, .vtiers span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.vaxis span:first-child { transform:none; }
.vaxis span:last-child { transform:translateX(-100%); }
.vtiers span.on { color:var(--ink); color:light-dark(var(--ink), #F4EFE5); font-weight:800; }
.vaxis small { font-size:inherit; }
@media (max-width: 600px) { .vaxis small { display:none; } .vtiers span:not(.on) { display:none; } }