/* Toolwoven Certificates — a proofing desk: the certificate is shown at true proportions, every page in a strip below. UI in navy ink with an ochre highlight. */
:root{
  --ink:#1b2a41;--ink2:#3e4a5c;--muted:#5d6878;--line:#d5d9e0;--line2:#e8eaef;
  --bg:#f4f5f7;--panel:#fff;--wash:#f8f9fb;
  --gold:#b7791f;--gold-dk:#8a5a12;--gold-wash:#fbf3e4;
  --focus:#2563eb;--err:#b42318;--err-wash:#fdecea;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --head:"Optima","Candara","Segoe UI",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}
a{color:#1d4ed8}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:30}
.skip:focus{top:10px}
#measure{position:absolute;left:-99999px;top:0}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(24px,calc((100vw - 1400px)/2));background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand-name{font:700 19px/1 var(--head);letter-spacing:.01em}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
.top nav a{color:var(--ink2);text-decoration:none;font-size:15px;padding:10px 12px;border-radius:6px}
.top nav a:hover{background:var(--wash);color:var(--ink)}

main{max-width:1400px;margin:0 auto;padding:0 24px}
.headline{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;padding:22px 0 16px}
h1{font:700 34px/1.1 var(--head);margin:0;letter-spacing:-.005em}
.headline p{margin:0;max-width:640px;color:var(--ink2);font-size:16.5px}

.maker{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start;padding-bottom:44px}
.stage{min-width:0;position:sticky;top:12px}
.stage-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pager{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:none;display:grid;place-items:center;color:var(--ink)}
.icon-btn:hover:not(:disabled){background:var(--wash)}
.pager-txt{min-width:72px;text-align:center;font-weight:650;font-size:15px;font-variant-numeric:tabular-nums}
.btn-text{border:0;background:none;color:#1d4ed8;font-weight:650;text-decoration:underline;min-height:40px;padding:0 6px;font-size:15px}
.sample-flag{margin-left:auto;font-size:13.5px;font-weight:650;background:var(--gold-wash);border:1px solid #e6c88d;color:var(--gold-dk);padding:5px 11px;border-radius:999px}
.proof{background:#e3e6eb;border-radius:10px;padding:22px;display:flex;justify-content:center}
.proof:focus{outline:none}.proof:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.proof-scale{position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.15),0 16px 34px -18px rgba(15,23,42,.55)}
.proof-scale .certificate{position:absolute;left:0;top:0}
.sheet-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.sheet-head h2{font:700 18px/1.2 var(--head);margin:0}
.fit-note{margin:0;font-size:14px;color:var(--ink2)}
.sheet{list-style:none;margin:0;padding:4px 2px 10px;display:flex;gap:12px;overflow-x:auto}
.sheet li{flex:none}
.thumb{display:flex;flex-direction:column;gap:6px;padding:6px;border:2px solid transparent;border-radius:8px;background:none;text-align:left;max-width:166px}
.thumb:hover{background:var(--panel)}
.thumb.on{border-color:var(--ink);background:var(--panel)}
.thumb-box{position:relative;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.thumb-box .certificate{position:absolute;left:0;top:0}
.thumb.tight .thumb-box{box-shadow:0 0 0 2px var(--gold)}
.thumb-cap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;line-height:1.3;max-width:150px}
.thumb-n{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.thumb-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.tight-tag{font-size:12px;font-weight:700;color:var(--gold-dk);background:var(--gold-wash);border-radius:4px;padding:0 5px}

.controls{display:flex;flex-direction:column;gap:14px}
.block{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.block h2{font:700 18px/1.2 var(--head);margin:0;display:flex;align-items:center;gap:9px}
.n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px/1 var(--sans)}
.count{margin-left:auto;font:700 13px/1 var(--sans);background:var(--gold-wash);color:var(--gold-dk);border-radius:999px;padding:5px 10px}
.f{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:650;color:var(--ink2);min-width:0}
.f em{font-style:normal;font-weight:400;color:var(--muted)}
.f input,.f select,.f textarea{border:1px solid #b6bdc8;border-radius:7px;background:#fff;font-size:16px;font-weight:400;color:var(--ink);padding:0 11px;width:100%;min-width:0}
.f input,.f select{height:42px}
.f textarea{padding:9px 11px;line-height:1.5;resize:vertical}
.f select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink)}
[aria-invalid="true"]{border-color:var(--err)!important;background-color:var(--err-wash)!important}
.note{margin:-4px 0 0;font-size:13.5px;color:var(--muted)}
.err{margin:-2px 0 0;font-size:14px;font-weight:650;color:var(--err)}
.check{display:flex;align-items:center;gap:8px;min-height:40px;font-size:15px;cursor:pointer}
.check input{width:19px;height:19px;accent-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signer{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1px solid var(--line2)}
.signer .img-pick{grid-column:1/-1}
.img-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn-line{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid #9aa3b0;border-radius:7px;background:#fff;font-weight:650;font-size:14.5px;cursor:pointer}
.btn-line:hover{border-color:var(--ink);background:var(--wash)}
.img-pick input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.themes{border:0;padding:0;margin:0;min-width:0}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.theme-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 8px;border:2px solid transparent;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:600;text-align:center;line-height:1.2;color:var(--ink2)}
.theme-opt:has(input:checked){border-color:var(--ink);color:var(--ink);background:var(--wash)}
.theme-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}
.swatch{position:relative;width:100%;aspect-ratio:1.41;border-radius:4px;box-shadow:0 0 0 1px var(--line);overflow:hidden;background:#fff}
.swatch i,.swatch b{position:absolute;display:block}
.sw-heritage{background:#fffdf6}
.sw-heritage i{inset:9%;border:3px double var(--gold)}
.sw-heritage b{left:30%;right:30%;top:46%;height:3px;background:#1b2a41;border-radius:2px}
.sw-modern i{left:0;top:0;bottom:0;width:16%;background:#1d4ed8}
.sw-modern b{left:30%;right:14%;top:44%;height:5px;background:#1b2a41}
.sw-playful i{inset:8%;border:3px dotted #f0605d;border-radius:8px}
.sw-playful b{left:32%;right:32%;top:44%;height:6px;border-radius:3px;background:#f0605d}
.sw-minimal i{inset:10%;border:1px solid #111}
.sw-minimal b{left:28%;right:28%;top:46%;height:2px;background:#111}
.print-bar{position:sticky;bottom:0;background:var(--bg);padding:6px 0 4px;display:flex;flex-direction:column;gap:6px}
.btn-main{min-height:50px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-weight:700;font-size:16.5px}
.btn-main:hover:not(:disabled){background:#0f1a2b}
.status{margin:0;font-size:14px;color:var(--ink2)}
.btn-line.small{min-height:40px}

/* ---------- certificate (laid out at true paper size; fonts in container units) ---------- */
.certificate{position:relative;container-type:size;background:#fff;color:#1b2a41;overflow:hidden;font-family:var(--sans)}
.c-frame{position:absolute;inset:6cqmin;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4cqmin 6cqmin 3.4cqmin}
.c-top{display:flex;flex-direction:column;align-items:center;gap:1.2cqmin;min-height:11cqmin}
.c-logo{max-height:11cqmin;max-width:28cqmin;object-fit:contain}
.c-seal{display:block;width:9cqmin;height:9cqmin;border-radius:50%}
.c-org{margin:0;font-size:2.4cqmin;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.c-title{margin:2.4cqmin 0 0;font-size:7cqmin;line-height:1.08;max-height:2.25em;overflow:hidden;width:100%;font-weight:600}
.c-line{margin:2.6cqmin 0 0;font-size:2.7cqmin;letter-spacing:.04em}
.c-name{margin:1.6cqmin 0 0;width:100%;font-size:9.5cqmin;line-height:1.25;white-space:nowrap;overflow:hidden}
.c-name-t{display:inline-block}
.c-rule{width:42%;height:.3cqmin;margin:.6cqmin 0 0}
.c-reason{margin:2.4cqmin 0 0;font-size:3.3cqmin;line-height:1.35;max-width:78%;height:14cqmin;max-height:14cqmin;overflow:hidden}
.c-bottom{margin-top:auto;display:flex;justify-content:center;gap:8cqmin;width:100%}
.c-sig{display:flex;flex-direction:column;align-items:center;width:30cqmin;min-width:0}
.c-sig-val{font-size:2.8cqmin;min-height:7cqmin;display:flex;align-items:flex-end;padding-bottom:.6cqmin;white-space:nowrap}
.c-sig-img{height:7cqmin;max-width:100%;object-fit:contain;object-position:center bottom}
.c-sig-line{width:100%;height:.22cqmin;background:currentColor;opacity:.75}
.c-sig-lab{margin-top:.9cqmin;font-size:2.2cqmin;letter-spacing:.04em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portrait .c-frame{padding-top:10cqmin;padding-bottom:7cqmin}
.portrait .c-title{margin-top:10cqmin;font-size:8cqmin}
.portrait .c-line{margin-top:6cqmin}
.portrait .c-name{margin-top:4cqmin}
.portrait .c-reason{margin-top:6cqmin}
.portrait .c-reason{height:20cqmin;max-height:20cqmin}
.portrait .c-bottom{gap:5cqmin}

/* heritage */
.theme-heritage{background:#fffdf6}
.theme-heritage::before{content:"";position:absolute;inset:2.6cqmin;border:.35cqmin solid #1b2a41}
.theme-heritage .c-frame{border:.9cqmin double #b7791f;inset:4.2cqmin}
.c-corner{display:none}
.theme-heritage .c-corner{display:block;position:absolute;width:4.4cqmin;height:4.4cqmin;border:.35cqmin solid #b7791f;transform:rotate(45deg);background:#fffdf6}
.theme-heritage .c-tl{left:-2.6cqmin;top:-2.6cqmin}.theme-heritage .c-tr{right:-2.6cqmin;top:-2.6cqmin}.theme-heritage .c-bl{left:-2.6cqmin;bottom:-2.6cqmin}.theme-heritage .c-br{right:-2.6cqmin;bottom:-2.6cqmin}
.theme-heritage .c-sig-val,.theme-heritage .c-sig-lab{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.theme-heritage .c-seal{background:radial-gradient(circle,#d9a441 0 34%,#b7791f 35% 52%,#fffdf6 53% 58%,#b7791f 59% 100%)}
.theme-heritage .c-org{color:#8a5a12}
.theme-heritage .c-title{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;letter-spacing:.04em;font-variant:small-caps}
.theme-heritage .c-line,.theme-heritage .c-reason{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.theme-heritage .c-name{font-family:"Snell Roundhand","Apple Chancery","Segoe Script","Brush Script MT",cursive;font-size:10.5cqmin;color:#1b2a41}
.theme-heritage .c-rule{background:#b7791f}
/* modern */
.theme-modern::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5.5cqmin;background:#1d4ed8}
.theme-modern::after{content:"";position:absolute;left:5.5cqmin;top:0;bottom:0;width:1.2cqmin;background:#93c5fd}
.theme-modern .c-frame{inset:6cqmin 6cqmin 6cqmin 12cqmin;align-items:flex-start;text-align:left}
.theme-modern .c-top{flex-direction:row;align-items:center;gap:2.4cqmin;min-height:9cqmin}
.theme-modern .c-seal{width:6cqmin;height:6cqmin;border-radius:1.2cqmin;background:#1d4ed8}
.theme-modern .c-org{color:#1d4ed8}
.theme-modern .c-title{font-family:"Avenir Next","Segoe UI",-apple-system,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:6cqmin}
.theme-modern .c-name{font-family:"Avenir Next","Segoe UI",-apple-system,sans-serif;font-weight:700;letter-spacing:-.01em}
.theme-modern .c-rule{width:22%;height:.8cqmin;background:#1d4ed8;margin-left:0}
.theme-modern .c-reason{max-width:86%}
.theme-modern .c-bottom{justify-content:flex-start}
/* playful */
.theme-playful{background:#fff}
.theme-playful::before{content:"";position:absolute;inset:3cqmin;border:1.3cqmin dotted #f0605d;border-radius:4cqmin}
.theme-playful::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,#ffd166 0 1.4cqmin,transparent 1.5cqmin),radial-gradient(circle at 88% 14%,#06d6a0 0 1.2cqmin,transparent 1.3cqmin),radial-gradient(circle at 92% 84%,#118ab2 0 1.5cqmin,transparent 1.6cqmin),radial-gradient(circle at 8% 86%,#ef476f 0 1.1cqmin,transparent 1.2cqmin);pointer-events:none}
.theme-playful .c-seal{background:radial-gradient(circle,#fff 0 30%,#f0605d 31% 100%);box-shadow:0 0 0 .6cqmin #ffd166}
.theme-playful .c-org{color:#c2410c}
.theme-playful .c-title,.theme-playful .c-name{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Segoe UI",sans-serif;font-weight:800}
.theme-playful .c-title{color:#f0605d}
.theme-playful .c-rule{background:repeating-linear-gradient(90deg,#f0605d 0 2cqmin,transparent 2cqmin 3cqmin);height:.6cqmin}
/* minimal */
.theme-minimal{color:#111}
.theme-minimal::before{content:"";position:absolute;inset:4cqmin;border:.25cqmin solid #111}
.theme-minimal .c-seal{width:5cqmin;height:5cqmin;border:.3cqmin solid #111}
.theme-minimal .c-title{font-family:"Optima","Candara","Segoe UI",sans-serif;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:5.4cqmin}
.theme-minimal .c-name{font-family:Georgia,"Times New Roman",serif}
.theme-minimal .c-rule{background:#111;height:.18cqmin}

/* content */
.content{border-top:1px solid var(--line);padding:40px 0 56px}
.content h2{font:700 28px/1.15 var(--head);margin:0 0 16px}
.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.steps li{counter-increment:s;padding:16px 20px 16px 0;border-right:1px solid var(--line);margin-right:20px}
.steps li:last-child{border-right:0;margin-right:0}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;margin-bottom:8px}
.steps h3{margin:0 0 4px;font-size:17px}
.steps p{margin:0;color:var(--ink2);font-size:15.5px}
.wording{margin-bottom:40px}
.wording-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.wording-grid div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.wording-grid h3{margin:0 0 8px;font:700 17px/1.2 var(--head)}
.wording-grid ul{margin:0;padding-left:18px;color:var(--ink2)}
.wording-grid li{margin:4px 0}
.faq{max-width:880px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:15px 34px 15px 0;font-weight:700;font-size:17px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:11px;font-size:24px;line-height:1;color:var(--gold-dk)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ink2)}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:20px max(24px,calc((100vw - 1400px)/2));background:var(--panel);border-top:1px solid var(--line);color:var(--ink2);font-size:15px}
.foot b{font:700 16px/1 var(--head);color:var(--ink)}
.foot nav{margin-left:auto;display:flex;gap:4px}
.foot a{color:var(--ink);padding:10px 8px}
#printRoot{display:none}

@media (max-width:1100px){.maker{grid-template-columns:minmax(0,1fr) 360px}.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(2){border-right:0}}
@media (max-width:900px){
  .maker{grid-template-columns:minmax(0,1fr)}
  .stage{position:static}
  .wording-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .top{padding:8px 16px}
  .top nav a:not([href="/about"]){display:none}
  main{padding:0 16px}
  .headline{padding:18px 0 12px}
  h1{font-size:28px}
  .headline p{font-size:16px}
  .sample-flag{margin-left:0}
  .proof{padding:12px;margin:0 -16px;border-radius:0}
  .two,.signer{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}
  .content h2{font-size:24px}
  .foot{padding:18px 16px}
  .foot nav{margin-left:0}
  .print-bar{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  html,body{margin:0!important;padding:0!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block!important}
  #printRoot .certificate{break-after:page;page-break-after:always;transform:none!important}
  #printRoot .certificate:last-child{break-after:auto;page-break-after:auto}
}

/* about / privacy */
.doc{max-width:740px;margin:0 auto;padding:44px 24px 60px}
.doc h1{font-size:36px;margin-bottom:14px}
.doc h2{font:700 22px/1.2 var(--head);margin:30px 0 8px}
.doc p{color:var(--ink2);font-size:16.5px}
.doc .lead{font-size:18.5px;color:var(--ink);border-left:4px solid var(--gold);padding-left:14px}
.doc .small{font-size:14px;color:var(--muted)}
.doc code{font:15px ui-monospace,Menlo,Consolas,monospace;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.doc .back{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:8px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700}
@media (max-width:640px){.doc{padding:30px 16px 44px}.doc h1{font-size:30px}.doc-page .top nav a{display:inline-block!important}}