:root{
  --paper: oklch(0.985 0.004 150);
  --paper-warm: oklch(0.965 0.008 130);
  --ink: oklch(0.16 0.012 165);
  --ink-soft: oklch(0.40 0.010 165);
  --ink-mute: oklch(0.60 0.008 155);
  --hairline: oklch(0.91 0.006 145);
  --moss: oklch(0.46 0.094 152);
  --moss-deep: oklch(0.30 0.080 152);
  --moss-soft: oklch(0.94 0.020 152);
  --danger: oklch(0.5 0.16 25);
  --glass-bg: color-mix(in oklch, var(--paper) 60%, transparent);
  --glass-bg-strong: color-mix(in oklch, var(--paper) 80%, transparent);
  --glass-border: color-mix(in oklch, white 60%, transparent);
  --glass-shadow:
    0 1px 0 0 color-mix(in oklch, white 80%, transparent) inset,
    0 24px 60px -28px color-mix(in oklch, var(--ink) 30%, transparent),
    0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent);
  --display-md: clamp(1.8rem, 3.4vw, 3rem);
  --body: 1.0625rem; --small: 0.9rem; --micro: 0.75rem;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --radius-lg: 22px; --radius-md: 14px;
  --dur-1:160ms; --dur-2:240ms; --dur-3:420ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:var(--body); line-height:1.55; color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(1200px 600px at 85% -10%, var(--moss-soft), transparent 60%),
                   radial-gradient(900px 500px at -10% 30%, var(--paper-warm), transparent 55%);
  background-attachment:fixed;
  font-feature-settings:"ss01","ss02","cv01";
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  padding-top:96px;
}
em{font-style:normal;color:var(--moss)}
.container{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,40px) var(--s-8)}
/* ---------- nav (floating glass pill, as on the site) ---------- */
.nav-wrap{position:fixed;top:16px;left:0;right:0;z-index:50;padding:0 clamp(12px,3vw,32px);display:flex;justify-content:center;pointer-events:none}
.nav{width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 8px 8px 16px;border-radius:999px;pointer-events:auto;
  background:var(--glass-bg-strong);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.nav .logo{height:26px;display:block}
.nav__links{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav__links button{font-family:inherit;font-size:var(--small);font-variation-settings:"wght" 520;
  border:0;background:transparent;color:var(--ink-soft);padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-1) var(--ease-out)}
.nav__links button:hover{background:color-mix(in oklch, var(--moss) 8%, transparent);color:var(--ink)}
.nav__links button.on{background:var(--ink);color:var(--paper)}
.nav__tagline{font-size:var(--micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-variation-settings:"wght" 500;margin-left:6px;white-space:nowrap}
@media(max-width:760px){.nav__tagline{display:none}}
/* ---------- section heads ---------- */
.section__num{font-size:var(--small);font-feature-settings:"tnum";letter-spacing:.04em;color:var(--ink-mute);margin-bottom:6px}
.section__title{font-size:var(--display-md);line-height:1.02;letter-spacing:-.026em;font-variation-settings:"wdth" 96,"wght" 440;max-width:22ch}
.lede{font-size:1.15rem;max-width:60ch;color:var(--ink-soft);margin:14px 0 var(--s-7);line-height:1.55}
.eyebrow{font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-variation-settings:"wght" 500}
/* ---------- glass cards ---------- */
.glass{background:var(--glass-bg);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-lg);padding:var(--s-6)}
.glass h3{font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-variation-settings:"wght" 560;margin-bottom:var(--s-4)}
/* ---------- metric band (ruled, exactly like the site) ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin:var(--s-6) 0}
.metric{padding:var(--s-6) var(--s-5);border-right:1px solid var(--hairline)}
.metric:first-child{padding-left:var(--s-3)}
.metric:last-child{border-right:0}
.metric__num{font-size:clamp(2.2rem,4vw,3.6rem);font-variation-settings:"wdth" 84,"wght" 500;letter-spacing:-.025em;line-height:.96;font-feature-settings:"tnum"}
.metric__num.moss{color:var(--moss)}
.metric__num small{display:block;font-size:.4em;color:var(--ink-mute);margin-top:.35em;font-variation-settings:"wdth" 100,"wght" 400;letter-spacing:0;line-height:1;text-transform:uppercase;white-space:nowrap}
.metric__label{margin-top:var(--s-3);font-size:var(--small);color:var(--ink-soft);max-width:26ch;line-height:1.45}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2n){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--hairline)}}
@media(max-width:520px){.metrics{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid var(--hairline)}.metric:last-child{border-bottom:0}}
/* ---------- forms ---------- */
label{display:block;font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);font-variation-settings:"wght" 540;margin:var(--s-4) 0 6px}
input,select{width:100%;padding:11px 14px;border:1px solid var(--hairline);border-radius:var(--radius-md);
  background:color-mix(in oklch, white 70%, transparent);font:inherit;font-size:var(--small);color:var(--ink);
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
input:focus,select:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px var(--moss-soft)}
input::placeholder{color:var(--ink-mute)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--ink);color:var(--paper);
  border-radius:999px;font:inherit;font-size:var(--small);font-variation-settings:"wght" 520;border:0;cursor:pointer;margin-top:var(--s-5);
  transition:transform var(--dur-1) var(--ease-out),background var(--dur-2) var(--ease-out)}
.btn:hover{background:var(--moss)}
.btn:active{transform:scale(.97)}
.btn .arr{width:14px;height:14px;transition:transform var(--dur-2) var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--hairline);margin-top:0}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink-mute);background:color-mix(in oklch, var(--moss) 6%, transparent)}
.mini{border:0;background:transparent;color:var(--ink-mute);font:inherit;font-size:.82rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color var(--dur-1) var(--ease-out)}
.mini:hover{color:var(--danger)}
/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--small)}
th{text-align:left;font-size:var(--micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-variation-settings:"wght" 540;padding:10px;border-bottom:1px solid var(--hairline)}
td{padding:11px 10px;border-bottom:1px solid color-mix(in oklch, var(--hairline) 55%, transparent);font-feature-settings:"tnum"}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.tnum{font-feature-settings:"tnum"}
/* ---------- pills / tags ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--glass-bg-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);padding:7px 14px;border-radius:999px;font-size:var(--micro);letter-spacing:.02em;font-variation-settings:"wght" 540;box-shadow:var(--glass-shadow)}
.tag.moss{color:var(--moss-deep);background:color-mix(in oklch, var(--moss-soft) 85%, transparent)}
/* ---------- chart ---------- */
.chart{padding-top:var(--s-5)}
.bars{display:flex;align-items:stretch;gap:clamp(6px,1.2vw,14px);height:clamp(200px,28vw,280px);margin-top:var(--s-5);border-bottom:2px solid var(--ink);padding-bottom:0}
.bars .col{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-width:0;position:relative}
.bars .bar{width:100%;max-width:64px;background:linear-gradient(180deg, color-mix(in oklch, var(--moss) 55%, white) 0%, var(--moss) 55%, var(--moss-deep) 100%);border-radius:8px 8px 0 0;min-height:3px;transform-origin:bottom;animation:grow var(--dur-3) var(--ease-out) both;box-shadow:0 1px 0 0 color-mix(in oklch, white 35%, transparent) inset;transition:filter var(--dur-1) var(--ease-out)}
.bars .col:hover .bar{filter:brightness(1.12)}
.bars .col:hover .v{color:var(--moss-deep)}
.bars .bar.zero{background:color-mix(in oklch, var(--hairline) 60%, transparent);box-shadow:none;animation:none}
.bars .m{position:absolute;top:100%;margin-top:10px;font-size:.74rem;color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 520}
.bars .v{font-size:clamp(.72rem,1.1vw,.9rem);color:var(--ink);font-feature-settings:"tnum";font-variation-settings:"wdth" 84,"wght" 600;letter-spacing:-.01em;white-space:nowrap;animation:fadeup var(--dur-3) var(--ease-out) both}
.bars+.axisnote{display:flex;justify-content:space-between;margin-top:34px;color:var(--ink-mute);font-size:var(--micro);letter-spacing:.08em;text-transform:uppercase}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.meadow{width:100%;height:auto;display:block;margin-top:var(--s-4)}
.meadow .stem{animation-name:sway;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.meadow .sprout{animation:grow .8s var(--ease-out) both}
.meadow .drift{animation-name:drift;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}}
@keyframes sway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.5deg)}}
.meadow-cap{margin-top:6px;color:var(--ink-mute);font-size:var(--micro);letter-spacing:.08em;text-transform:uppercase;text-align:center}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ---------- layout helpers ---------- */
.grid{display:grid;gap:var(--s-4)}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:820px){.g2{grid-template-columns:1fr}}
.row{display:flex;gap:14px;align-items:center}
.row.between{justify-content:space-between}
.muted{color:var(--ink-mute);font-size:var(--small)}
.divider{height:1px;background:var(--hairline);margin:var(--s-5) 0}
.empty{padding:40px 12px;text-align:center;color:var(--ink-mute);font-size:var(--small)}
.clientbar{display:flex;gap:10px;align-items:center;margin-bottom:var(--s-6);flex-wrap:wrap}
.clientbar select{width:auto;min-width:240px}
.clientbar label{margin:0}
/* ---------- certificate sheet ---------- */
.cert-sheet{background:white;border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:clamp(32px,6vw,64px);position:relative;overflow:hidden;box-shadow:var(--glass-shadow)}
.cert-sheet .loopmark{position:absolute;right:-90px;top:-90px;width:320px;height:320px;border:38px solid var(--moss-soft);border-radius:50%}
.cert-sheet h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.026em;font-variation-settings:"wdth" 96,"wght" 440;margin:16px 0 10px}
.cert-sheet .logo{height:30px}
.locknote{background:color-mix(in oklch, var(--moss-soft) 80%, transparent);border:1px solid color-mix(in oklch, var(--moss) 30%, transparent);border-radius:var(--radius-md);padding:14px 18px;color:var(--moss-deep);font-size:var(--small);margin-bottom:var(--s-5)}
.sig{font-variation-settings:"wdth" 80,"wght" 340;font-size:1.7rem;letter-spacing:-.02em}
/* ---------- ring + toast + views ---------- */
.ring-wrap{display:flex;gap:20px;align-items:center}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:999px;font-size:var(--small);opacity:0;transition:all var(--dur-2) var(--ease-out);pointer-events:none;z-index:60;box-shadow:0 12px 40px -12px color-mix(in oklch, var(--ink) 50%, transparent)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.view{display:none}
.view.on{display:block;animation:rise var(--dur-3) var(--ease-out)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
footer{border-top:1px solid var(--hairline);margin-top:var(--s-8);padding-top:var(--s-5);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ink-mute);font-size:var(--micro);letter-spacing:.04em}
@media print{
  body{background:white;padding-top:0}
  .nav-wrap,.no-print,.toast,footer{display:none!important}
  .cert-sheet{border:0;box-shadow:none;padding:24px}
  .container{padding:0}
}