@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-normal-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-normal-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Inter-normal-400_700.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/Newsreader-italic-300_700.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/Newsreader-normal-300_700.woff2) format('woff2');}
:root{
  --paper:#F6F3EC;--paper-2:#EFEADF;--paper-3:#E4DDCF;--card:#FBF9F4;
  --ink:#16181D;--ink-2:#353943;--ink-3:#5F636C;--ink-4:#8A8C91;
  --rule:rgba(22,24,29,.13);--rule-2:rgba(22,24,29,.24);
  --slate:#3E5C7A;--slate-2:#5F7D9B;--slate-soft:#DFE6EC;
  --pass:#2F7D5B;--pass-ink:#24654A;--pass-soft:#E0ECE4;
  --gold:#C99A2E;--gold-ink:#7A5A10;--gold-soft:#F4EAD0;
  --serif:'Newsreader',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --r:6px;--max:1200px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--slate-soft)}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.eyebrow{font:500 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.serif{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0;font-optical-sizing:auto}
h1{font-size:clamp(44px,6.4vw,84px);line-height:1.0;letter-spacing:-.025em}
h2{font-size:clamp(32px,3.6vw,48px);line-height:1.05}
h3{font-size:24px;line-height:1.15}
p{margin:0}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:40em}
.muted{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:4px;z-index:100;text-decoration:none}
.skip:focus{top:12px}

/* ---------- header ---------- */
.top{border-bottom:1px solid var(--rule);background:rgba(246,243,236,.86);backdrop-filter:saturate(1.2) blur(10px);position:sticky;top:0;z-index:40;view-transition-name:top}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:26px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font-size:14px;text-decoration:none;color:var(--ink-2);padding:8px 12px;border-radius:4px;transition:background .25s var(--ease),color .25s}
.nav a.btn,.nav a.btn:hover{color:var(--paper);background:var(--ink)}
.nav a:not(.btn):hover{background:var(--paper-2);color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}
.nav .pp-link{display:inline-flex;gap:6px;align-items:center}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);border-radius:4px;font:500 12px var(--mono);letter-spacing:.08em;padding:8px 12px;color:var(--ink);cursor:pointer}
@media (max-width:880px){
  .wrap{padding:0 20px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:0}
  .nav.open{display:flex}
  .nav a{padding:13px 8px;border-bottom:1px solid var(--rule);border-radius:0}
  .nav a[aria-current=page]{box-shadow:none;font-weight:600}
  .nav .btn{margin-top:12px;justify-content:center}
}

/* ---------- buttons ---------- */
.btn{--bg:var(--ink);--fg:var(--paper);display:inline-flex;align-items:center;gap:10px;background:var(--bg);color:var(--fg);border:1px solid var(--bg);font:500 15px/1 var(--sans);padding:15px 22px;border-radius:4px;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s;position:relative}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(22,24,29,.5)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .arr{transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
.btn.sm{font-size:13.5px;padding:10px 14px}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{background:var(--card);box-shadow:none}
.btn[disabled],.btn[aria-disabled=true]{--bg:var(--paper-3);--fg:var(--ink-3);border-color:var(--paper-3);cursor:not-allowed;transform:none;box-shadow:none}
.link{font:500 14px var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px;transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--ink)}

/* ---------- tags / pills ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:3px;border:1px solid var(--rule-2);color:var(--ink-2);white-space:nowrap}
.tag.pass{color:var(--pass-ink);border-color:color-mix(in srgb,var(--pass) 45%,transparent);background:var(--pass-soft)}
.tag.warn{color:var(--gold-ink);border-color:color-mix(in srgb,var(--gold) 70%,transparent);background:var(--gold-soft)}
.tag.slate{color:var(--slate);border-color:color-mix(in srgb,var(--slate) 45%,transparent);background:var(--slate-soft)}
.tag.demo{color:var(--ink);background:var(--paper-2);border-style:dashed}
.pp-pill{display:inline-flex;align-items:baseline;gap:6px;font:600 11px/1 var(--sans);letter-spacing:.06em;font-variant:small-caps;font-feature-settings:"c2sc","smcp";text-transform:none;border:1px solid var(--rule-2);padding:4px 7px 5px;border-radius:999px;color:var(--ink-2)}
.pp-pill i{font-style:normal;display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--slate);transform:translateY(-1px)}

/* ---------- record header (document feel) ---------- */
.record{display:flex;flex-wrap:wrap;gap:6px 22px;font:400 11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--rule)}
.record b{font-weight:500;color:var(--ink)}
.record .sp{margin-left:auto}
@media (max-width:640px){.record .sp{margin-left:0}}

/* ---------- demo banner ---------- */
.demo-bar{background:var(--ink);color:var(--paper);font:400 11.5px/1.4 var(--mono);letter-spacing:.06em}
.demo-bar .wrap{display:flex;gap:14px;align-items:center;min-height:36px;padding-top:6px;padding-bottom:6px}
.demo-bar b{font-weight:500;color:#fff;border:1px dashed rgba(246,243,236,.5);padding:2px 6px;border-radius:2px;letter-spacing:.12em}
.demo-bar span{opacity:.82}

/* ---------- fee strip ---------- */
.fees{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.2fr);border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);overflow:hidden}
.fees>div{padding:16px 20px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:5px}
.fees>div:first-child{border-left:0}
.fees .k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fees .v{font:500 15px/1.35 var(--sans);color:var(--ink)}
.fees .v em{font-style:normal;color:var(--ink-3);font-weight:400}
.fees .v strong{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em;margin-right:4px}
@media (max-width:880px){.fees{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fees>div:nth-child(3){border-left:0}.fees>div:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:420px){.fees{grid-template-columns:minmax(0,1fr)}.fees>div{border-left:0!important;border-top:1px solid var(--rule)}.fees>div:first-child{border-top:0}}
.fees-dock{position:sticky;bottom:0;z-index:30;background:linear-gradient(to top,var(--paper) 70%,rgba(246,243,236,0));padding:18px 0 14px}
.fees-dock .fees{box-shadow:0 10px 30px -18px rgba(22,24,29,.35)}
.fees.compact>div{padding:10px 16px;flex-direction:row;align-items:baseline;gap:10px}
.fees.compact .v strong{font-size:17px}
.fees.compact .v{font-size:13.5px}
@media (max-width:880px){.fees-dock{position:static;background:none}.fees.compact>div{flex-direction:column;gap:4px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);margin-top:96px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.foot p{font:400 15px/1.4 var(--serif);color:var(--ink-2)}
.foot img{height:22px;width:22px;opacity:.85}

/* ---------- cards & paper ---------- */
.sheet{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 24px 48px -32px rgba(22,24,29,.28)}
.hair{height:1px;background:var(--rule);border:0;margin:0}
.section{padding:96px 0 0}
.section-head{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;margin-bottom:40px;align-items:start}
.section-head .num{font:500 12px var(--mono);letter-spacing:.12em;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--ink)}
.section-head h2{max-width:18ch}
.section-head p{margin-top:14px;color:var(--ink-2);max-width:44em}
@media (max-width:880px){.section{padding-top:64px}.section-head{grid-template-columns:minmax(0,1fr);gap:12px}.section-head .num{border-top:0;padding-top:0}}

/* ---------- stamp ---------- */
.stamp{position:absolute;font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:8px 11px;border:2px solid var(--ink);border-radius:3px;outline:1px solid var(--ink);outline-offset:2px;background:rgba(251,249,244,.78);transform:rotate(-8deg);white-space:nowrap;mix-blend-mode:multiply}
.stamp.gold{color:var(--gold-ink);border-color:var(--gold);outline-color:var(--gold);background:rgba(244,234,208,.85)}
.stamp.thunk{animation:thunk .7s var(--ease-out) both;animation-delay:var(--d,.6s)}
@keyframes thunk{0%{opacity:0;transform:rotate(-14deg) scale(1.9)}55%{opacity:1;transform:rotate(-7deg) scale(.94)}75%{transform:rotate(-8deg) scale(1.02)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
.mount{animation:mount 1s var(--ease-out) both;animation-delay:var(--d,.1s)}
@keyframes mount{0%{opacity:0;transform:translateY(14px) rotate(-1.2deg);box-shadow:0 0 0 rgba(0,0,0,0)}100%{opacity:1;transform:none}}
.rise{animation:rise .9s var(--ease-out) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* corner registration marks */
.reg{position:relative}
.reg::before,.reg::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--ink);pointer-events:none}
.reg::before{left:-8px;top:-8px;border-right:0;border-bottom:0}
.reg::after{right:-8px;bottom:-8px;border-left:0;border-top:0}

/* ---------- exam rows ---------- */
.exam{position:relative;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);overflow:hidden}
.exam-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:16px;align-items:start;padding:20px 20px;border-top:1px solid var(--rule);transition:background .6s var(--ease),opacity .6s var(--ease);opacity:.5;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;color:inherit}
.row:first-of-type{border-top:0}
.row .n{font:500 11px/24px var(--mono);color:var(--ink-3);letter-spacing:.06em}
.row .t{font:500 16.5px/1.35 var(--sans);color:var(--ink)}
.row .why{font-size:14.5px;color:var(--ink-2);margin-top:6px;opacity:0;transform:translateY(4px);transition:opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s;max-width:52ch}
.row .st{display:flex;align-items:center;gap:10px;min-height:24px}
.row .ck{width:26px;height:26px;flex:none}
.row .ck circle{fill:none;stroke:var(--rule-2);stroke-width:1.2}
.row .ck path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.row .lab{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.row.scanning{opacity:1;background:linear-gradient(90deg,rgba(62,92,122,.07),rgba(62,92,122,.02))}
.row.scanning .lab{color:var(--slate)}
.row.pass{opacity:1;background:linear-gradient(90deg,var(--pass-soft),rgba(224,236,228,.25) 70%)}
.row.pass .ck circle{stroke:var(--pass);fill:var(--pass)}
.row.pass .ck path{stroke:#fff;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) .1s}
.row.pass .lab{color:var(--pass-ink)}
.row.warn,.row.stop{opacity:1;background:linear-gradient(90deg,var(--gold-soft),rgba(244,234,208,.3) 70%);box-shadow:inset 3px 0 0 var(--gold)}
.row.warn .ck circle,.row.stop .ck circle{stroke:var(--gold);fill:var(--gold)}
.row.warn .ck path,.row.stop .ck path{stroke:#fff;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease) .1s}
.row.warn .lab,.row.stop .lab{color:var(--gold-ink)}
.row.na{opacity:.55}
.row.na .lab{color:var(--ink-3)}
.row.done .why{opacity:1;transform:none}
.row[data-open]{cursor:pointer}
.row[data-open]:hover{filter:brightness(.985)}
.row .open-hint{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .4s;margin-top:10px;display:inline-flex;gap:6px;align-items:center}
.row.done[data-open] .open-hint{opacity:1}
.scan{position:absolute;left:0;right:0;height:2px;background:var(--slate);box-shadow:0 0 0 0 transparent;pointer-events:none;opacity:0;transition:top 1.6s var(--ease),opacity .4s}
.scan::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:56px;background:linear-gradient(to top,rgba(62,92,122,.14),rgba(62,92,122,0))}
.scan.on{opacity:1}
@media (max-width:640px){.row{grid-template-columns:28px minmax(0,1fr);padding:18px 16px}.row .st{grid-column:2;grid-row:2}}

/* ---------- drawer ---------- */
.drawer-bg{position:fixed;inset:0;background:rgba(22,24,29,.32);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--card);z-index:61;transform:translateX(102%);transition:transform .55s var(--ease-out);display:flex;flex-direction:column;border-left:1px solid var(--rule-2);box-shadow:-30px 0 60px -30px rgba(22,24,29,.4)}
.drawer.open{transform:none}.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer header{padding:22px 26px 18px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.drawer .body{padding:24px 26px;overflow:auto;display:grid;gap:18px}
.drawer .x{background:none;border:1px solid var(--rule-2);border-radius:4px;width:36px;height:36px;cursor:pointer;font-size:18px;color:var(--ink);flex:none}
.ev{border:1px solid var(--rule);border-radius:4px;padding:14px 16px;background:var(--paper)}
.ev dt{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ev dd{margin:4px 0 12px;font-size:14.5px}
.ev dd:last-child{margin-bottom:0}
@media (max-width:640px){.drawer{top:auto;width:100%;height:82vh;border-left:0;border-top:1px solid var(--rule-2);border-radius:12px 12px 0 0;transform:translateY(102%)}}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(22,24,29,.4);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:80;padding:20px}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{background:var(--card);border:1px solid var(--rule-2);border-radius:8px;max-width:440px;width:100%;padding:30px 30px 26px;transform:translateY(12px) scale(.98);transition:transform .5s var(--ease-out);box-shadow:0 40px 80px -40px rgba(22,24,29,.6)}
.modal-bg.open .modal{transform:none}
.modal h3{margin:12px 0 10px}
.modal p{color:var(--ink-2);font-size:15px}
.modal .acts{margin-top:22px;display:flex;gap:10px}

/* ---------- forms ---------- */
.field{display:grid;gap:8px}
.field>label:not(.drop){font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.field .hint{font-size:13.5px;color:var(--ink-3)}
.input{font:400 17px var(--sans);padding:14px 16px;border:1px solid var(--rule-2);border-radius:4px;background:var(--card);color:var(--ink);width:100%;transition:border-color .25s,box-shadow .25s}
.input:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(62,92,122,.15)}
.input.mono{font-family:var(--mono);font-size:15px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
}
@media print{.top,.demo-bar,.fees-dock,.no-print{display:none!important}body::before{display:none}}
