:root{
  color-scheme:light;
  --bg:#ffffff; --bg2:#f7f7f5; --surface:#ffffff; --surface2:#f7f7f5;
  --ink:#141518; --ink2:#4c4f55; --ink3:#76797f;
  --line:#e4e4e0; --line2:#d5d5cf;
  --accent:#141518; --accent-ink:#ffffff;
  --ok:#256b3a; --ok-soft:#eef5f0;
  --err:#a52a21; --err-soft:#faf0ef;
  --warn:#6d5a14; --warn-soft:#f8f4e3;
  --shadow:0 1px 2px rgba(20,21,24,.05);
  --shadow-lg:0 1px 2px rgba(20,21,24,.05),0 14px 34px -22px rgba(20,21,24,.25);
  --r:10px; --r-lg:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
a:hover{text-decoration-color:var(--ink)}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
:focus-visible{outline:3px solid rgba(20,21,24,.4);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.01em;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:32px;height:32px;flex:none;border-radius:7px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.brand small{font-weight:600;font-size:10.5px;color:var(--ink3);display:block;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
nav.main{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.main button,nav.main a{background:none;border:0;color:var(--ink2);font-weight:600;font-size:14.5px;padding:9px 12px;border-radius:8px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
nav.main button:hover,nav.main a:hover{background:var(--surface2);color:var(--ink);text-decoration:none}
/* Hero */
.hero{padding:52px 0 0}
.hero h1{font-weight:800;font-size:clamp(32px,5.4vw,48px);line-height:1.12;letter-spacing:-.025em;margin:0 0 14px;max-width:18em}
.hero h1 em{font-style:normal}
.hero p.lede{font-size:17.5px;color:var(--ink3);max-width:44em;margin:0 0 24px;line-height:1.6}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;color:var(--ink2);font-size:14.5px;font-weight:600}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points svg{flex:none;color:var(--ink)}
/* Category sections */
.cat-head{display:flex;align-items:baseline;gap:14px;margin:44px 0 6px;flex-wrap:wrap}
#homeCats .cat-section:first-child .cat-head{margin-top:24px}
.cat-head h2{font-size:21px;margin:0;letter-spacing:-.015em;font-weight:800}
.cat-head p{margin:0;color:var(--ink3);font-size:14.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;margin-top:16px}
.tool-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:left;color:var(--ink);text-decoration:none;transition:border-color .15s ease;min-height:44px}
.tool-card:hover{border-color:var(--ink);text-decoration:none}
.tool-card .ic{width:42px;height:42px;border-radius:7px;background:var(--surface2);color:var(--ink);display:flex;align-items:center;justify-content:center}
.tool-card h3,.tool-card .card-name{margin:0;font-size:16.5px;letter-spacing:-.01em;font-weight:700}
.tool-card p{margin:0;color:var(--ink3);font-size:14px;line-height:1.5;flex:1}
.tool-card .go{font-weight:700;font-size:13.5px;color:var(--ink)}
/* Trust strip */
.trust{margin:52px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.trust h3{margin:0 0 6px;font-size:15.5px;font-weight:700}
.trust p{margin:0;color:var(--ink3);font-size:14px;line-height:1.55}
/* Views */
.view{display:none}
.view.active{display:block}
.tool-head{padding:34px 0 0}
.backbtn{background:var(--surface);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:9px 16px;font-weight:700;font-size:14px;min-height:44px}
.backbtn:hover{border-color:var(--ink)}
.tool-title{display:flex;gap:16px;align-items:flex-start;margin:20px 0 8px}
.tool-title .ic{width:52px;height:52px;border-radius:8px;background:var(--surface2);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.tool-title h1{margin:0;font-size:clamp(26px,4.5vw,34px);letter-spacing:-.02em;line-height:1.15;font-weight:800}
.tool-title p{margin:6px 0 0;color:var(--ink3);max-width:46em;line-height:1.6}
/* Workspace */
.workspace{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;margin:22px 0 8px}
.dropzone{border:1.5px dashed var(--line2);border-radius:var(--r);background:var(--surface2);padding:30px 18px;text-align:center;position:relative;transition:border-color .15s,background .15s;color:var(--ink2)}
.dropzone.drag{border-color:var(--ink);background:#fff}
.dropzone strong{display:block;font-size:17px;margin:8px 0 4px;color:var(--ink)}
.dropzone p{margin:0;color:var(--ink3);font-size:14px}
.dropzone .pick{display:inline-block;margin-top:14px;background:var(--ink);color:#fff;font-weight:700;padding:12px 22px;border-radius:8px;border:0;min-height:48px;font-size:15px}
.dropzone .pick:hover{background:#2b2d31}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filelist{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.filelist li{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px}
.filelist .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.filelist .fsize{color:var(--ink3);font-size:12.5px;flex:none}
.filelist .rm{background:#fff;border:1px solid var(--line2);border-radius:7px;color:var(--ink2);padding:6px 10px;font-size:12.5px;font-weight:700;min-height:36px}
.filelist .rm:hover{border-color:var(--ink);color:var(--ink)}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px}
.field .hint{font-weight:400;color:var(--ink3);font-size:12.5px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);min-height:48px;font-size:15.5px}
.field textarea{min-height:84px;resize:vertical}
.field input[type=range]{width:100%;min-height:44px;accent-color:var(--ink)}
.field input[type=color]{width:64px;height:48px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);padding:4px}
.seg{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{flex:1;background:var(--surface);border:0;padding:11px 8px;font-weight:600;font-size:14px;color:var(--ink2);min-height:48px}
.seg button.on{background:var(--ink);color:#fff}
/* Modern popup-free controls — sliding black highlight, big readout, sample stage */
.field.wide{grid-column:1/-1}
.mctl-readout{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.mctl-readout.stack{flex-direction:column;align-items:flex-start;gap:3px}
.mctl-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mctl-big{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.05;display:inline-block}
.mctl-big.pop{animation:mctlPop .45s cubic-bezier(.22,.9,.28,1)}
@keyframes mctlPop{0%{transform:translateY(8px) scale(.94);opacity:.25}100%{transform:translateY(0) scale(1);opacity:1}}
.mctl-cap{font-size:15px;color:var(--ink3);font-weight:600}
.mctl-readout.stack .mctl-cap{font-size:14px;font-weight:500;line-height:1.5}
.mctl-desc{margin:0 0 14px;color:var(--ink3);font-size:14.5px}
.mctl{position:relative;display:flex;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:6px}
.mctl.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-radius:20px}
.mctl.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:16px;padding:8px}
.mctl-thumb{position:absolute;top:0;left:0;width:0;height:0;background:var(--ink);border-radius:999px;box-shadow:0 5px 14px rgba(20,21,24,.22);transition:transform .5s cubic-bezier(.22,.9,.28,1),width .5s cubic-bezier(.22,.9,.28,1),height .5s cubic-bezier(.22,.9,.28,1);z-index:0}
.mctl.grid3 .mctl-thumb{border-radius:15px}
.mctl.grid2 .mctl-thumb{border-radius:11px}
.mctl-btn{position:relative;z-index:1;flex:1 1 0;background:transparent;border:0;color:var(--ink);border-radius:999px;min-height:64px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:color .35s;-webkit-tap-highlight-color:transparent}
.mctl.grid3 .mctl-btn{border-radius:15px;min-height:108px;justify-content:flex-start;padding:14px 6px 12px;gap:8px}
.mctl.grid2 .mctl-btn{border-radius:11px;min-height:86px;align-items:flex-start;text-align:left;padding:13px 14px;justify-content:space-between;gap:10px}
.mctl-btn .mb-deg{font-size:17px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.mctl-btn .mb-name{font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.mctl-btn .mb-sub{font-size:11px;font-weight:600;color:var(--ink3);line-height:1.25;text-align:center;transition:color .35s}
.mctl-btn .mb-sub.block{display:block;text-align:left;margin-top:2px}
.mctl-btn.on{color:#fff}
.mctl-btn.on .mb-sub{color:#c9c9c9}
.mctl-btn:disabled{cursor:not-allowed}
.mctl-line{margin:14px 0 0;text-align:center;font-size:15px;color:var(--ink2)}
.mctl-line strong{color:var(--ink)}
.mctl-wrap.is-disabled{opacity:.45}
.mini-page{display:flex;align-items:flex-end;justify-content:center;height:38px}
.mini-page i{display:block;border:2px solid currentColor;border-radius:2.5px;opacity:.9}
.mini-page .mp-a4{width:25px;height:36px}
.mini-page .mp-letter{width:30px;height:35px}
.mini-page .mp-fit{width:38px;height:28px}
.mini-frame{width:42px;height:56px;background:#fff;border:1.5px solid var(--line2);border-radius:3px;flex:none}
.mini-frame i{display:block;width:100%;height:100%;background:linear-gradient(160deg,#bcd7f0 0%,#a9cdee 45%,#5b7d5a 45.2%,#48603f 100%)}
.mini-frame.mf-0{padding:0}.mini-frame.mf-1{padding:5px}.mini-frame.mf-2{padding:10px}
.mctl-btn.on .mini-frame{border-color:rgba(255,255,255,.4)}
.mini-pos{width:34px;height:26px;border:1.5px solid currentColor;border-radius:4px;position:relative;opacity:.85;flex:none;display:block}
.mini-pos i{position:absolute;width:7px;height:7px;border-radius:2px;background:currentColor;display:block}
.mini-pos .p-br{right:3px;bottom:3px}
.mini-pos .p-bl{left:3px;bottom:3px}
.mini-pos .p-bc{left:50%;transform:translateX(-50%);bottom:3px}
.mini-pos .p-tr{right:3px;top:3px}
.mctl-stage{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(circle,#dcdcd6 1px,transparent 1.2px) 0 0/20px 20px,var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 0 16px;padding:18px 12px}
.stage-orient{position:absolute;top:10px;right:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;min-width:52px;text-align:center;z-index:2}
.db-kick{width:34px;height:5px;border-radius:3px;background:var(--ink);margin-bottom:9px}
.db-title{width:82%;height:10px;border-radius:3px;background:#2b2d31;margin-bottom:6px}
.db-title2{width:56%;height:10px;border-radius:3px;background:#2b2d31;margin-bottom:13px}
.db-img{height:50px;border-radius:5px;margin-bottom:13px;background:linear-gradient(135deg,#ececea,#d8d8d2);display:flex;align-items:flex-end;padding:6px}
.db-line{height:6px;border-radius:3px;background:#dcdcd6;margin-bottom:7px;width:100%}
.db-line.w96{width:96%}.db-line.w92{width:92%}.db-line.w90{width:90%}.db-line.w84{width:84%}.db-line.w80{width:80%}.db-line.w76{width:76%}.db-line.w70{width:70%}.db-line.w68{width:68%}
.db-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.db-foot .db-line{width:36px;margin:0}
.db-num{font-size:10px;font-weight:700;color:#9a9da3}
.rot-stage{min-height:248px}
.rot-page{width:116px;height:164px;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 16px 32px rgba(20,21,24,.16);padding:13px 12px;display:flex;flex-direction:column;transition:transform .65s cubic-bezier(.22,.9,.28,1)}
.size-stage{min-height:248px}
.sample-sheet{background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 16px 32px rgba(20,21,24,.16);padding:10px 10px 8px;display:flex;flex-direction:column;gap:7px;transition:width .55s cubic-bezier(.22,.9,.28,1)}
.sample-sheet.s-a4{width:138px;aspect-ratio:210/297}
.sample-sheet.s-letter{width:150px;aspect-ratio:17/22}
.sample-sheet.s-fit{width:198px;aspect-ratio:10/8}
.sample-img{flex:1;min-height:0;overflow:hidden;border-radius:3px}
.sample-img svg{display:block;width:100%;height:100%}
.sample-cap{font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--ink3);text-align:center}
.margin-stage{min-height:248px}
.sample-page{width:172px;aspect-ratio:210/297;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 16px 32px rgba(20,21,24,.14);padding:0;transition:padding .5s cubic-bezier(.22,.9,.28,1)}
.sample-page .sample-img{width:100%;height:100%;flex:none;border-radius:2px}
.spec-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.spec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface2);min-width:0}
.spec .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.spec .v{font-size:14px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sign-stage{padding:22px 14px}
.sign-page{position:relative;width:min(288px,100%);aspect-ratio:1/1.32;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 14px 30px rgba(20,21,24,.10);padding:24px 22px;overflow:hidden}
.sp-title{height:11px;width:38%;background:#2b2d31;border-radius:3px}
.sp-sub{height:6px;width:34%;background:#cfcfc9;border-radius:3px;margin-top:8px}
.sp-rule{height:1px;background:var(--line);margin:15px 0 13px}
.sig-mark{position:absolute;left:72%;top:87%;transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.22,.9,.28,1),top .6s cubic-bezier(.22,.9,.28,1);text-align:center;width:128px;pointer-events:none}
.sm-text{font-style:italic;font-weight:700;font-size:18px;color:var(--ink);line-height:1.1;white-space:nowrap}
.sm-line{border-top:1.5px solid #9a9da3;margin-top:3px}
.sm-cap{font-size:7.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;margin-top:3px;font-weight:700}
/* Contact topic cards */
.topic-grid{display:flex;flex-direction:column;gap:10px}
.topic-card{appearance:none;width:100%;text-align:left;cursor:pointer;display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;transition:background .22s,border-color .22s,color .22s,transform .15s;-webkit-tap-highlight-color:transparent}
.topic-card:hover{border-color:var(--ink3)}
.topic-card:active{transform:scale(.99)}
.topic-icon{width:42px;height:42px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
.topic-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topic-text{flex:1;min-width:0}
.topic-title{font-size:15.5px;font-weight:700;line-height:1.3}
.topic-check{width:24px;height:24px;border-radius:999px;border:1.5px solid var(--line2);display:grid;place-items:center;flex:0 0 auto;background:#fff}
.topic-check svg{width:13px;height:13px;stroke:#fff;opacity:0;transform:scale(.6);transition:.18s;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.topic-card.is-selected{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(20,21,24,.18)}
.topic-card.is-selected .topic-icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.topic-card.is-selected .topic-check{background:#fff;border-color:#fff}
.topic-card.is-selected .topic-check svg{stroke:var(--ink);opacity:1;transform:scale(1)}
.topic-line{margin:12px 0 0;font-size:14.5px;color:var(--ink2);background:var(--surface2);border:1px dashed var(--line2);border-radius:10px;padding:11px 13px}
.topic-line strong{color:var(--ink)}
@media (min-width:640px){.topic-grid{display:grid;grid-template-columns:1fr 1fr}.topic-card:last-child{grid-column:1/-1}}
@media (max-width:480px){.mctl-big{font-size:36px}.spec .v{font-size:12.5px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}}
@media (prefers-reduced-motion: reduce){.mctl-thumb,.mctl-btn,.rot-page,.sig-mark,.sample-sheet,.sample-page,.topic-card,.topic-check svg{transition:none}.mctl-big.pop{animation:none}}
.action-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;align-items:center}
.btn-primary{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:14px 28px;font-weight:700;font-size:16px;min-height:52px}
.btn-primary:hover{background:#2b2d31}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:var(--surface);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:13px 20px;font-weight:700;min-height:52px}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed}
.status{display:none;margin-top:16px;border-radius:8px;padding:14px 16px;font-size:14.5px;font-weight:600;border:1px solid var(--line)}
.status.show{display:block}
.status.working{background:var(--warn-soft);color:var(--warn);border-color:#e7dfc0}
.status.ok{background:var(--ok-soft);color:var(--ok);border-color:#cfe3d4}
.status.err{background:var(--err-soft);color:var(--err);border-color:#ecc9c5}
.results{margin-top:16px;display:none;flex-direction:column;gap:10px}
.results.show{display:flex}
.result-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.result-item .rname{font-weight:700;flex:1;min-width:180px;word-break:break-all}
.result-item .rmeta{color:var(--ink3);font-size:13px;width:100%}
.dl{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:11px 18px;font-weight:700;min-height:46px;font-size:14.5px}
.dl:hover{background:#2b2d31}
.lib-alert{display:none;margin:22px 0 0;background:var(--err-soft);color:var(--err);border:1px solid #ecc9c5;border-radius:var(--r);padding:16px 18px;font-weight:600}
.lib-alert.show{display:block}
.lib-alert button{margin-left:10px;background:var(--ink);color:#fff;border:0;border-radius:7px;padding:8px 14px;font-weight:700;min-height:40px}
/* Signature pad */
.sig-wrap{margin-top:18px}
#sigCanvas{width:100%;height:190px;border:1px solid var(--line2);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair}
.sig-tools{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
/* Sign — simple 3-step layout */
.sign-flow{display:flex;flex-direction:column;gap:18px}
.sign-step-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.sign-step-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.sign-step-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.sign-step-head h2{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.01em;font-weight:800}
.sign-step-head p{margin:3px 0 0;color:var(--ink3);font-size:14px;line-height:1.5}
.sign-layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.sign-summary-line{margin:0 0 14px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45}
.sign-summary-line span{color:var(--ink3);font-weight:600}
.sign-adv-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:13px 16px;font-weight:700;min-height:52px;text-align:left}
.sign-adv-toggle:hover{border-color:var(--ink)}
.sign-adv-toggle .chev{font-size:18px;line-height:1;color:var(--ink3);flex:none}
.sign-advanced{margin-top:16px;display:flex;flex-direction:column;gap:18px}
.sign-advanced[hidden]{display:none}
.sign-advanced .controls{display:flex;flex-direction:column;gap:18px;margin-top:0}
.sign-go{width:100%;min-height:56px;font-size:16.5px;padding:15px 24px}
.sign-sticky-action{margin-top:16px}
.sign-pad-tools{display:flex;gap:10px;margin-top:10px}
.sign-pad-tools .btn-ghost{flex:1;min-height:48px}
@media (min-width:920px){
  .sign-layout{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}
  .sign-sign-card{position:sticky;top:84px}
}
@media (max-width:919px){
  .sign-sticky-action{position:sticky;bottom:10px;z-index:6;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 10px 28px rgba(20,21,24,.14)}
  .sign-sticky-action .sign-go{margin:0}
  .sign-step-card{padding:18px}
}
/* Reorder */
.page-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.page-thumb{width:112px;background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:8px;text-align:center;cursor:grab}
.page-thumb.dragging{opacity:.45}
.page-thumb img{width:100%;height:132px;object-fit:contain;background:#fff;border-radius:6px;border:1px solid var(--line)}
.page-thumb .pnum{font-weight:700;font-size:13px;margin:6px 0}
.page-thumb .mv{display:flex;gap:6px;justify-content:center}
.page-thumb .mv button{border:1px solid var(--line2);background:var(--surface);border-radius:6px;padding:5px 9px;font-size:12px;font-weight:700;min-height:34px}
/* Content sections under tool */
.doc{max-width:820px;margin:0 auto}
.doc section{margin:40px 0}
.doc h2{font-size:22px;letter-spacing:-.015em;margin:0 0 14px;font-weight:800}
.doc h3{font-size:17px;margin:22px 0 8px}
.doc p{color:var(--ink2);margin:0 0 12px}
.doc ol.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.doc ol.steps li{counter-increment:step;display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.doc ol.steps li::before{content:counter(step);flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14.5px}
.doc ol.steps li div{color:var(--ink2)}
.doc ol.steps li strong{color:var(--ink);display:block;margin-bottom:2px}
.example{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.example p{margin:0;color:var(--ink2)}
.example strong{color:var(--ink)}
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;padding:16px 18px;list-style:none;display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:22px;color:var(--ink3);flex:none;line-height:1}
details.faq[open ] summary::after{content:"–"}
details.faq .a{padding:0 18px 16px;color:var(--ink2)}
.other-tools{margin:44px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips button{background:var(--surface);border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font-weight:600;font-size:13.5px;color:var(--ink);min-height:44px}
.chips button:hover{border-color:var(--ink)}
/* Static pages */
.page-body{max-width:780px;margin:0 auto;padding:38px 0 10px}
.page-body h1{font-weight:800;font-size:clamp(30px,5vw,42px);margin:0 0 10px;letter-spacing:-.025em;line-height:1.15}
.page-body h2{font-size:20px;margin:30px 0 10px;font-weight:800;letter-spacing:-.01em}
.page-body p,.page-body li{color:var(--ink2);line-height:1.65}
.page-body ul{padding-left:22px}
.page-body .updated{color:var(--ink3);font-size:13.5px;font-weight:600}
.contact-form{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);margin-top:20px}
/* Footer */
footer.site{margin-top:64px;border-top:1px solid var(--line);background:var(--bg2)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding:38px 0 10px}
footer.site h4{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
footer.site p{color:var(--ink3);font-size:14px;margin:0;max-width:34em;line-height:1.6}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
footer.site ul button,footer.site ul a{background:none;border:0;color:var(--ink2);font-size:14.5px;font-weight:600;padding:7px 0;text-align:left;min-height:40px;display:inline-flex;align-items:center;text-decoration:none}
footer.site ul button:hover,footer.site ul a:hover{color:var(--ink);text-decoration:none}
.footer-base{border-top:1px solid var(--line);padding:16px 0 26px;color:var(--ink3);font-size:13px;display:flex;gap:8px 22px;flex-wrap:wrap}
@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr}
  .hero{padding-top:36px}
  nav.main button,nav.main a{padding:9px 8px;font-size:13.5px}
  .brand small{display:none}
  .workspace{padding:18px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .tool-card{padding:16px}
  .tool-card p{font-size:13px}
}
@media (max-width:430px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tool-card{transition:none}
}

/* Guides */
.g-card{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:left;color:var(--ink);text-decoration:none;transition:border-color .15s ease;min-height:44px}
.g-card:hover{border-color:var(--ink);text-decoration:none}
.g-card .kw{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0}
.g-card h3{margin:0;font-size:16.5px;letter-spacing:-.01em;font-weight:700;line-height:1.35}
.g-card p{margin:0;color:var(--ink3);font-size:14px;line-height:1.5;flex:1}
.g-card p.kw{flex:none}
.g-card .meta{display:flex;gap:14px;color:var(--ink3);font-size:13px;font-weight:600;flex-wrap:wrap}
.g-card .go{font-weight:700;font-size:13.5px;color:var(--ink)}
.guide-wrap{max-width:820px;margin:0 auto}
.crumbs{padding:26px 0 0;font-size:13.5px;color:var(--ink3);font-weight:600;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink2)}
.art-head{padding:14px 0 0}
.art-head .kw{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.art-head h1{margin:0 0 12px;font-size:clamp(27px,4.6vw,38px);letter-spacing:-.022em;line-height:1.18;font-weight:800}
.art-head .standfirst{font-size:17.5px;color:var(--ink2);line-height:1.6;margin:0 0 16px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink3);font-size:13.5px;font-weight:600;padding-bottom:20px;border-bottom:1px solid var(--line)}
.quick{margin:24px 0 0;background:var(--ok-soft);border:1px solid #d7e8dc;border-radius:var(--r-lg);padding:20px 22px}
.quick h2{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ok)}
.quick p{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
.gprose h2{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:36px 0 10px}
.gprose p{margin:0 0 14px;color:var(--ink2);line-height:1.7}
.gprose p strong,.gprose li strong{color:var(--ink)}
.gprose ul{margin:0 0 14px;padding-left:22px;color:var(--ink2);line-height:1.7}
.gprose li{margin-bottom:6px}
ol.gsteps{list-style:none;margin:6px 0 4px;padding:0;counter-reset:gstep}
ol.gsteps li{counter-increment:gstep;position:relative;padding:0 0 20px 52px}
ol.gsteps li::before{content:counter(gstep);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
ol.gsteps li::after{content:"";position:absolute;left:17px;top:42px;bottom:2px;width:2px;background:var(--line)}
ol.gsteps li:last-child::after{display:none}
ol.gsteps h3{margin:2px 0 5px;font-size:16.5px;font-weight:800}
ol.gsteps p{margin:0;color:var(--ink2);line-height:1.65}
.guide-art .example h3{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.tool-cta{margin:30px 0 0;background:var(--surface2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-lg);padding:24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tool-cta .t{flex:1;min-width:220px}
.tool-cta h3{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.tool-cta p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55}
.tool-cta a.btn{background:#16181b;color:#fff;font-weight:800;font-size:15px;padding:13px 22px;border-radius:9px;text-decoration:none;min-height:48px;display:inline-flex;align-items:center}
.tool-cta a.btn:hover{background:#2b2e33;text-decoration:none}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.backrow{padding:30px 0 0}
@media (max-width:640px){.tool-cta{padding:20px}ol.gsteps li{padding-left:46px}}
@media (prefers-reduced-motion: reduce){.g-card{transition:none}}


/* --- 18-tool refresh: steps on top, tool in middle, result below --- */
.tool-steps-bar{margin:18px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.tool-steps-bar h2{margin:0 0 12px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.tool-steps-bar ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:tstep}
.tool-steps-bar li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.5}
.tool-steps-bar li::before{counter-increment:tstep;content:counter(tstep);flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--accent-ink);font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center}
html[data-theme="dark"] .tool-steps-bar li::before{background:#f4f4f1;color:#141518}
.tool-steps-bar li strong{display:block;color:var(--ink);font-size:14.5px}
@media(max-width:720px){.tool-steps-bar ol{grid-template-columns:1fr}}
.note-box{margin-top:16px;border:1px solid #e7dfc0;background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:14px 16px;font-size:14.5px;line-height:1.6}
.note-box strong{color:var(--ink)}
html[data-theme="dark"] .note-box{border-color:#5c542e}
.results{border-top:1px dashed var(--line2);padding-top:16px}
.results::before{content:"Your result";font-weight:800;font-size:15px;color:var(--ink)}
.home-stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
.home-stats span{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.cat-count{font-size:12.5px;font-weight:800;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.field textarea{min-height:96px}

/* Theme toggle */
.theme-toggle{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{display:block}
.theme-toggle .th-sun{display:none}
html[data-theme="dark"] .theme-toggle .th-sun{display:block}
html[data-theme="dark"] .theme-toggle .th-moon{display:none}
@media (max-width:720px){.header-in{gap:10px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}.theme-toggle{width:40px;height:40px}}

/* Dark theme — light stays the default above; dark only via data-theme="dark" (saved choice, never system) */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{
  --bg:#131416; --bg2:#17181a; --surface:#1c1d1f; --surface2:#242527;
  --ink:#F4F4F1; --ink2:#D9D9D5; --ink3:#A6A8AB;
  --line:#2f3033; --line2:#484a4e;
  --accent:#f4f4f1; --accent-ink:#141518;
  --ok:#93d3a4; --ok-soft:#1d2c21;
  --err:#f3a79f; --err-soft:#34211e;
  --warn:#eed384; --warn-soft:#2f2a18;
  --shadow:0 1px 2px rgba(0,0,0,.45);
  --shadow-lg:0 1px 2px rgba(0,0,0,.45),0 14px 34px -22px rgba(0,0,0,.75);
}
html[data-theme="dark"] header.site{background:rgba(19,20,22,.94)}
html[data-theme="dark"] :focus-visible{outline-color:rgba(255,255,255,.55)}
html[data-theme="dark"] .brand-mark{background:#f4f4f1}
html[data-theme="dark"] .brand-mark svg{stroke:#141518}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .dl,html[data-theme="dark"] .dropzone .pick,html[data-theme="dark"] .lib-alert button{background:#f4f4f1;color:#141518}
html[data-theme="dark"] .btn-primary:hover,html[data-theme="dark"] .dl:hover,html[data-theme="dark"] .dropzone .pick:hover{background:#dbdbd6}
html[data-theme="dark"] .seg button.on{background:#f4f4f1;color:#141518}
html[data-theme="dark"] .stage-orient{background:#f4f4f1;color:#141518}
html[data-theme="dark"] .sign-step-num{background:#f4f4f1;color:#141518}
html[data-theme="dark"] .doc ol.steps li::before{background:#f4f4f1;color:#141518}
html[data-theme="dark"] ol.gsteps li::before{background:#f4f4f1;color:#141518}
html[data-theme="dark"] .mctl-thumb{background:#f4f4f1;box-shadow:0 5px 14px rgba(0,0,0,.5)}
html[data-theme="dark"] .mctl-btn.on{color:#141518}
html[data-theme="dark"] .mctl-btn.on .mb-sub{color:#56585e}
html[data-theme="dark"] .mctl-btn.on .mini-frame{border-color:rgba(20,21,24,.35)}
html[data-theme="dark"] .dropzone.drag{background:var(--surface)}
html[data-theme="dark"] .filelist .rm{background:var(--surface)}
html[data-theme="dark"] .topic-card{background:var(--surface)}
html[data-theme="dark"] .topic-check{background:var(--surface)}
html[data-theme="dark"] .topic-card.is-selected{background:#f4f4f1;border-color:#f4f4f1;color:#141518;box-shadow:0 10px 24px rgba(0,0,0,.45)}
html[data-theme="dark"] .topic-card.is-selected .topic-icon{background:rgba(20,21,24,.08);border-color:rgba(20,21,24,.16);color:#141518}
html[data-theme="dark"] .topic-card.is-selected .topic-check{background:#141518;border-color:#141518}
html[data-theme="dark"] .tool-cta{background:var(--surface2);border:1px solid var(--line);color:var(--ink)}
html[data-theme="dark"] .tool-cta p{color:var(--ink3)}
html[data-theme="dark"] .tool-cta a.btn{background:#f4f4f1;color:#141518}
html[data-theme="dark"] .tool-cta a.btn:hover{background:#dbdbd6}
html[data-theme="dark"] .status.working{border-color:#5c542e}
html[data-theme="dark"] .status.ok{border-color:#386045}
html[data-theme="dark"] .status.err{border-color:#6b3a34}
html[data-theme="dark"] .lib-alert{border-color:#6b3a34}
html[data-theme="dark"] .quick{border-color:#386045}
html[data-theme="dark"] .mctl-stage{background:radial-gradient(circle,#3b3c42 1px,transparent 1.2px) 0 0/20px 20px,var(--surface2)}
/* Paper previews stay white paper with dark content in both themes */
html[data-theme="dark"] .rot-page,html[data-theme="dark"] .sample-sheet,html[data-theme="dark"] .sample-page,html[data-theme="dark"] .sign-page{background:#fff;color:#141518;border-color:#48494f}
html[data-theme="dark"] .sign-page .sm-text{color:#141518}
html[data-theme="dark"] .sign-page .sm-cap{color:#76797f}
html[data-theme="dark"] .sign-page .sp-rule{background:#e4e4e0}
html[data-theme="dark"] .sample-cap{color:#6d7076}
html[data-theme="dark"] #sigCanvas{background:#fff}
@media (max-width:919px){html[data-theme="dark"] .sign-sticky-action{background:rgba(23,24,28,.97)}}

/* ============ PREMIUM REDESIGN ============ */
:root{
  --bg:#ffffff; --bg2:#f6f7f5; --surface:#ffffff; --surface2:#f6f7f5;
  --ink:#16181b; --ink2:#45484e; --ink3:#73767d;
  --line:#e5e6e2; --line2:#c9cbc4;
  --accent:#16181b; --accent-ink:#ffffff;
  --navy:#16181b; --navy2:#2b2e33; --teal:#3a3e44; --gold:#6f7278; --gold-soft:#eeeeec;
  --tone-red:#232529; --tone-red-soft:#ececea;
  --tone-teal:#3d4348; --tone-teal-soft:#e9edec;
  --tone-amber:#5c5a52; --tone-amber-soft:#f0eee6;
  --shadow:0 1px 2px rgba(22,24,27,.05),0 4px 14px -8px rgba(22,24,27,.12);
  --shadow-lg:0 2px 4px rgba(22,24,27,.05),0 24px 44px -24px rgba(22,24,27,.30);
  --r:14px; --r-lg:20px;
}
body{background:var(--bg)}
h1,h2,h3,.brand,.tool-card .card-name,.g-card h3{font-family:"Sora","Manrope",system-ui,sans-serif}
::selection{background:var(--gold-soft)}
/* Header — premium bar */
header.site{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);box-shadow:0 6px 24px -18px rgba(22,24,27,.25)}
.header-in{min-height:68px}
.brand{font-size:20px;color:var(--navy)}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#101112 0%,#26282c 100%);box-shadow:0 6px 14px -6px rgba(22,24,27,.45);position:relative}
nav.main button,nav.main a{border-radius:999px;padding:9px 14px}
nav.main button:hover,nav.main a:hover{background:var(--surface2);color:var(--ink)}
nav.main button:active,nav.main a:active,nav.main button.is-active,nav.main a.is-active{background:#111214;color:#fff}
html[data-theme="dark"] nav.main button:active,html[data-theme="dark"] nav.main a:active,html[data-theme="dark"] nav.main button.is-active,html[data-theme="dark"] nav.main a.is-active{background:#f4f4f1;color:#111214}
.theme-toggle{border-color:var(--line2);box-shadow:var(--shadow)}
/* Hero — dark premium panel */
.hero{margin-top:22px;padding:46px 46px 0;background:linear-gradient(150deg,#0a0b0c 0%,#17181a 52%,#26282c 100%);border-radius:26px;color:#F7F7F4;overflow:hidden;box-shadow:0 30px 60px -30px rgba(10,11,12,.55)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.hero-eyebrow{display:inline-block;margin:0 0 16px;padding:7px 13px;border:1px solid rgba(255,255,255,.30);border-radius:999px;color:#E9E9E6;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero h1{color:#fff;font-size:clamp(32px,4.6vw,50px);line-height:1.1;letter-spacing:-.02em;max-width:13em;margin:0 0 16px}
.hero h1 em{font:inherit;font-style:normal;color:inherit;letter-spacing:inherit}
.hero p.lede{color:#D4D5D3;font-size:17px;max-width:36em;margin:0 0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 26px}
.btn-hero{display:inline-flex;align-items:center;min-height:52px;padding:13px 26px;border-radius:12px;background:#ffffff;color:#111214;font-weight:800;font-size:15.5px;text-decoration:none;border:0}
.btn-hero:hover{background:#E8E8E5;text-decoration:none}
.btn-hero-ghost{display:inline-flex;align-items:center;min-height:52px;padding:13px 22px;border-radius:12px;background:transparent;color:#fff;font-weight:700;font-size:15.5px;border:1.5px solid rgba(255,255,255,.4)}
.btn-hero-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-points{gap:8px}
.hero-points li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 13px;color:#F7F7F4;font-size:13px}
.hero-points svg{color:#ffffff}
.home-stats{margin:38px -46px 0;padding:18px 46px;border-top:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);display:flex;gap:10px 34px;flex-wrap:wrap}
.home-stats span{border:0;background:none;border-radius:0;padding:0;color:#CFD0D2;font-size:14px;font-weight:600}
.home-stats strong{font-family:"Sora",sans-serif;font-size:21px;color:#fff;margin-right:6px}
/* Hero document visual — original CSS artwork */
.hero-visual{position:relative;height:350px}
.hv-doc{position:absolute;background:#fff;border-radius:10px;box-shadow:0 24px 44px -18px rgba(0,0,0,.5)}
.hv-doc-back{width:230px;height:300px;right:118px;top:26px;transform:rotate(7deg);background:#D8D8D3}
.hv-doc-main{width:248px;height:322px;right:26px;top:6px;transform:rotate(-2.5deg);padding:20px;color:#16181b}
.hv-head{display:flex;gap:10px;align-items:center}
.hv-badge{background:var(--tone-red);color:#fff;font-weight:800;font-size:11px;letter-spacing:.08em;padding:4px 8px;border-radius:5px}
.hv-lines{display:flex;flex-direction:column;gap:5px;flex:1}
.hv-lines i{display:block;height:7px;border-radius:3px;background:#34363a}
.hv-lines i:last-child{width:55%;background:#B9BAB4}
.hv-rule{height:1px;background:#E5E6E2;margin:14px 0}
.hv-img{height:86px;border-radius:6px;background:linear-gradient(160deg,#BCD7F0 0%,#A9CDEE 45%,#5B7D5A 45.2%,#48603F 100%)}
.hv-text{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.hv-text i{display:block;height:6px;border-radius:3px;background:#E7E7E2}
.hv-text i.w60{width:60%}
.hv-foot{position:absolute;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;align-items:center}
.hv-num{font-size:11px;font-weight:700;color:#68788D}
.hv-sig{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-size:15px;color:var(--teal)}
.hv-chip{position:absolute;background:#fff;color:var(--navy);font-weight:800;font-size:13px;padding:10px 14px;border-radius:999px;box-shadow:0 14px 28px -12px rgba(0,0,0,.45)}
.hv-chip-a{left:0;top:52px;transform:rotate(-4deg)}
.hv-chip-b{left:8px;bottom:34px;transform:rotate(2.5deg);color:var(--teal)}
@media (max-width:900px){.hero-visual{display:none}.hero-grid{grid-template-columns:1fr}}
@media (max-width:720px){.hero{padding:32px 22px 0;border-radius:20px}.home-stats{margin:30px -22px 0;padding:16px 22px;gap:8px 22px}}
/* Category sections + premium tool cards */
.cat-head{align-items:center;margin:52px 0 4px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.cat-head h2{font-size:24px;color:var(--ink)}
.cat-count{background:var(--gold-soft);color:#34363a;border-color:#DDDDDA;font-size:12px;padding:4px 11px}
.grid{gap:18px;margin-top:20px}
.tool-card{position:relative;border-radius:18px;padding:24px 22px 20px;box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tool-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--line2)}
.tool-card.red::before{background:var(--tone-red)}
.tool-card.teal::before{background:var(--tone-teal)}
.tool-card.amber::before{background:var(--gold)}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.tool-card .ic{width:52px;height:52px;border-radius:14px}
.tool-card.red .ic{background:var(--tone-red-soft);color:var(--tone-red)}
.tool-card.teal .ic{background:var(--tone-teal-soft);color:var(--tone-teal)}
.tool-card.amber .ic{background:var(--tone-amber-soft);color:var(--tone-amber)}
.tool-card .card-name{font-size:17.5px;color:var(--ink)}
.tool-card p{font-size:14px}
.tool-card .go{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;color:var(--navy)}
.tool-card:hover .go{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Privacy panel */
.privacy-panel{margin:56px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:34px;color:var(--ink);box-shadow:var(--shadow)}
.pp-head{display:flex;gap:18px;align-items:flex-start}
.pp-shield{flex:none;width:56px;height:56px;border-radius:16px;background:#16181b;border:1px solid #16181b;color:#ffffff;display:flex;align-items:center;justify-content:center}
.pp-head h2{margin:0 0 8px;color:var(--ink);font-size:clamp(21px,3vw,27px);letter-spacing:-.015em}
.pp-head p{margin:0;color:var(--ink2);line-height:1.65;max-width:56em}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
.pp-grid>div{background:var(--surface2);border:1px solid var(--line);border-radius:16px;padding:20px}
.pp-grid h3{margin:0 0 7px;color:var(--ink);font-size:16px}
.pp-grid p{margin:0;color:var(--ink3);font-size:14px;line-height:1.6}
/* Why choose */
.why{margin:56px 0 0}
.section-head{margin:0 0 20px}
.section-head h2{margin:0 0 6px;font-size:26px;color:var(--ink);letter-spacing:-.015em}
.section-head p{margin:0;color:var(--ink3);font-size:15px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.why-ic{display:flex;width:46px;height:46px;border-radius:13px;background:var(--tone-teal-soft);color:var(--tone-teal);align-items:center;justify-content:center;margin-bottom:13px}
.why-card:nth-child(2) .why-ic{background:var(--tone-red-soft);color:var(--tone-red)}
.why-card:nth-child(3) .why-ic{background:var(--tone-amber-soft);color:var(--tone-amber)}
.why-card h3{margin:0 0 7px;font-size:16.5px;color:var(--ink)}
.why-card p{margin:0;color:var(--ink3);font-size:14px;line-height:1.6}
/* Trust strip as cards */
.trust{background:none;border:0;padding:0;gap:16px}
.trust>div{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.trust h3{color:var(--ink)}
/* Home FAQ */
.home-faq{margin:56px 0 0;max-width:860px}
details.faq{border-radius:14px;box-shadow:var(--shadow)}
details.faq summary{font-family:"Sora",sans-serif;font-size:15.5px}
/* Tool pages — premium consistency */
.backbtn{border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}
.tool-title .ic{width:60px;height:60px;border-radius:16px}
.tool-title.red .ic{background:var(--tone-red-soft);color:var(--tone-red)}
.tool-title.teal .ic{background:var(--tone-teal-soft);color:var(--tone-teal)}
.tool-title.amber .ic{background:var(--tone-amber-soft);color:var(--tone-amber)}
.tool-title h1{font-family:"Sora",sans-serif;color:var(--ink)}
.tool-steps-bar{border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);border-top:4px solid var(--navy)}
.tool-steps-bar li::before{background:var(--navy)}
.workspace{border-radius:22px;padding:28px;border-color:var(--line2)}
.dropzone{border-radius:16px;border-color:var(--line2);background:linear-gradient(180deg,var(--surface),var(--surface2))}
.dropzone .pick,.btn-primary,.dl{background:var(--navy);border-radius:11px}
.dropzone .pick:hover,.btn-primary:hover,.dl:hover{background:var(--teal)}
.btn-ghost{border-radius:11px}
.result-item{border-radius:14px;border-left:4px solid var(--teal)}
.chips button{box-shadow:var(--shadow)}
.chips button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.g-card{border-radius:18px;box-shadow:var(--shadow);padding:22px}
.g-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.g-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.sign-step-num{background:var(--navy)}
.doc ol.steps li::before{background:var(--navy)}
ol.gsteps li::before{background:var(--navy)}
.seg button.on{background:var(--navy)}
.field input[type=range]{accent-color:var(--navy)}
/* Footer — dark premium */
footer.site{background:var(--bg2);border-top:1px solid var(--line);color:var(--ink2)}
footer.site h4{color:var(--ink3)}
footer.site p{color:var(--ink3)}
footer.site ul button,footer.site ul a{color:var(--ink2)}
footer.site ul button:hover,footer.site ul a:hover{color:var(--ink)}
footer.site nav{border-top-color:var(--line)!important}
.footer-base{border-top-color:var(--line);color:var(--ink3)}
/* Dark theme adjustments for the premium layer */
html[data-theme="dark"] body{--navy:#F4F4F1;--tone-red-soft:#262728;--tone-teal-soft:#27292b;--tone-amber-soft:#2c2b26;--gold-soft:#2b2b29}
html[data-theme="dark"] .cat-head h2,html[data-theme="dark"] .tool-card .card-name,html[data-theme="dark"] .section-head h2,html[data-theme="dark"] .why-card h3,html[data-theme="dark"] .trust h3,html[data-theme="dark"] .tool-title h1{color:var(--ink)}
html[data-theme="dark"] header.site{background:rgba(19,20,22,.94)}
html[data-theme="dark"] .brand-mark{background:linear-gradient(135deg,#F4F4F1,#C9CDD4)}
html[data-theme="dark"] .brand-mark svg{stroke:#141518}
html[data-theme="dark"] nav.main button:hover,html[data-theme="dark"] nav.main a:hover{background:var(--surface2);color:var(--ink)}
html[data-theme="dark"] .tool-card .go{color:var(--ink)}
html[data-theme="dark"] .tool-card:hover .go,html[data-theme="dark"] .chips button:hover{background:#F4F4F1;color:#141518;border-color:#F4F4F1}
html[data-theme="dark"] .cat-count{color:#F4F4F1}
html[data-theme="dark"] footer.site{background:var(--bg2)}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .dl,html[data-theme="dark"] .dropzone .pick{background:#F4F4F1;color:#141518}
html[data-theme="dark"] .btn-primary:hover,html[data-theme="dark"] .dl:hover,html[data-theme="dark"] .dropzone .pick:hover{background:#DBDBD6}
html[data-theme="dark"] .privacy-panel{border:1px solid var(--line)}
html[data-theme="dark"] .pp-shield{background:#f4f4f1;border-color:#f4f4f1;color:#111214}
html[data-theme="dark"] .tool-cta a.btn{background:#f4f4f1;color:#111214}
/* Dark fix: category tone colours are near-black in light mode, so on the dark
   tiles they vanished. Give every toned icon, card accent bar and light-surface
   label a light, readable dark-mode value (light mode rules stay untouched). */
html[data-theme="dark"] .tool-card.red .ic,html[data-theme="dark"] .tool-title.red .ic,html[data-theme="dark"] .why-card:nth-child(2) .why-ic{color:#E6E7EA}
html[data-theme="dark"] .tool-card.teal .ic,html[data-theme="dark"] .tool-title.teal .ic,html[data-theme="dark"] .why-ic{color:#D5D9DE}
html[data-theme="dark"] .tool-card.amber .ic,html[data-theme="dark"] .tool-title.amber .ic,html[data-theme="dark"] .why-card:nth-child(3) .why-ic{color:#E0DCCE}
html[data-theme="dark"] .tool-card.red::before{background:#AEB2B8}
html[data-theme="dark"] .tool-card.teal::before{background:#878D94}
html[data-theme="dark"] .tool-card.amber::before{background:#B7B2A2}
html[data-theme="dark"] .hv-chip{color:#16181b}
html[data-theme="dark"] .result-item{border-left-color:#AEB2B8}
html[data-theme="dark"] .db-kick{background:#141518}
@media (max-width:720px){.privacy-panel{padding:24px 20px}.pp-head{flex-direction:column;gap:12px}.workspace{padding:20px}}
@media (prefers-reduced-motion: reduce){.tool-card,.g-card{transition:none}.tool-card:hover,.g-card:hover{transform:none}}
#view-guides .hero{padding-bottom:44px}
#view-guides .hero h1{max-width:16em}
/* Clean header + home hero */
header.site{box-shadow:none}
.header-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav toggle";column-gap:20px;align-items:center}
.brand{grid-area:brand}
nav.main{grid-area:nav;justify-self:end;margin-left:0;flex-wrap:nowrap}
.theme-toggle{grid-area:toggle}
#view-home .hero{padding:38px 40px 36px;background:linear-gradient(150deg,#0a0b0c 0%,#17181a 52%,#26282c 100%);border-radius:22px;box-shadow:0 18px 38px -28px rgba(10,11,12,.5)}
#view-home .hero-grid{gap:28px}
#view-home .hero-eyebrow{margin-bottom:13px;padding:6px 10px;border:0;background:rgba(255,255,255,.10);color:#F0F0ED;font-size:11px;letter-spacing:.11em;white-space:nowrap}
#view-home .hero h1{font-size:clamp(31px,4.2vw,46px);line-height:1.13;max-width:12.5em;margin-bottom:12px}
#view-home .hero h1 em{font:inherit;font-style:normal;color:inherit;letter-spacing:inherit}
#view-home .hero p.lede{font-size:16.5px;line-height:1.6;margin-bottom:20px}
#view-home .hero-cta{gap:10px;margin-bottom:20px}
#view-home .btn-hero,#view-home .btn-hero-ghost{min-height:48px;padding:11px 20px;border-radius:10px;font-size:15px}
#view-home .btn-hero-ghost{border-width:1px;border-color:rgba(255,255,255,.35)}
#view-home .hero-points{gap:6px 18px}
#view-home .hero-points li{background:transparent;border:0;border-radius:0;padding:2px 0;color:#F2F2EF;font-size:13px}
#view-home .home-stats{margin:30px -40px 0;padding:15px 40px;background:rgba(255,255,255,.03)}
@media (max-width:720px){
  .header-in{min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand toggle" "nav nav";row-gap:2px;column-gap:12px;padding-top:10px;padding-bottom:8px}
  .brand{font-size:19px}
  .brand-mark{width:34px;height:34px}
  nav.main{width:100%;justify-self:stretch;justify-content:space-between;gap:0}
  nav.main button,nav.main a{min-height:40px;padding:7px 6px;border-radius:7px;font-size:13.5px}
  .theme-toggle{width:40px;height:40px;box-shadow:none}
  #view-home .hero{margin-top:14px;padding:28px 20px 28px;border-radius:18px}
  #view-home .hero-eyebrow{margin-bottom:12px;padding:6px 9px;font-size:10px;letter-spacing:.08em}
  #view-home .hero h1{font-size:31px;line-height:1.14;margin-bottom:10px}
  #view-home .hero p.lede{font-size:15.5px;line-height:1.58;margin-bottom:18px}
  #view-home .hero-cta{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:18px}
  #view-home .btn-hero,#view-home .btn-hero-ghost{justify-content:center;width:100%}
  #view-home .hero-points{gap:5px 14px}
  #view-home .hero-points li{font-size:12.5px}
  #view-home .home-stats{margin:24px -20px 0;padding:14px 20px;gap:7px 18px}
}
@media (max-width:380px){nav.main button,nav.main a{padding-left:4px;padding-right:4px;font-size:12.5px}#view-home .hero-eyebrow{padding-left:8px;padding-right:8px;font-size:9px;letter-spacing:.04em}}
/* Dark header nav — white pill on click/active. This block is last on purpose:
   the dark :hover rule above has the same specificity as the earlier dark
   :active/.is-active rule and wins on source order, so a clicked (still
   hovered/touched) button lost its white background to the dark hover grey.
   These rules re-assert the white pill for the pressed state, the current
   page state, and their hover combinations, at every width. Light mode is
   not touched: its black pill rules above stay exactly as they were. */
html[data-theme="dark"] nav.main button:active,
html[data-theme="dark"] nav.main a:active,
html[data-theme="dark"] nav.main button.is-active,
html[data-theme="dark"] nav.main a.is-active,
html[data-theme="dark"] nav.main button.is-active:hover,
html[data-theme="dark"] nav.main a.is-active:hover,
html[data-theme="dark"] nav.main button.is-active:active,
html[data-theme="dark"] nav.main a.is-active:active,
html[data-theme="dark"] nav.main button[aria-current="page"],
html[data-theme="dark"] nav.main a[aria-current="page"],
html[data-theme="dark"] nav.main button[aria-current="page"]:hover,
html[data-theme="dark"] nav.main a[aria-current="page"]:hover{
  background:#ffffff !important;
  color:#111214 !important;
  border-radius:999px;
}
/* No-blue click fix — last block on purpose. The blue flash on tap/click was
   never a site colour: it is the browser default tap highlight plus default
   focus/active styling, which only a couple of controls had switched off.
   These rules switch the tap highlight off on EVERY element and pin every
   click, tap, focus and active state to the theme: black on light surfaces
   in light mode, white on dark surfaces in dark mode. No blue anywhere. */
*{-webkit-tap-highlight-color:transparent !important}
html{accent-color:#16181b}
html[data-theme="dark"]{accent-color:#f4f4f1}
:focus:not(:focus-visible){outline:none}
a:active{color:var(--ink);text-decoration-color:var(--ink)}
button:active{outline:none}
/* Light mode — pressed states stay black/neutral, matching each control's own theme colours */
.btn-primary:active,.dl:active,.dropzone .pick:active,.lib-alert button:active{background:#111214;color:#fff}
.btn-hero:active{background:#e8e8e5;color:#111214}
.btn-hero-ghost:active{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.btn-ghost:active,.backbtn:active,.sign-adv-toggle:active,.filelist .rm:active,.page-thumb .mv button:active{border-color:#111214;color:#111214;background:var(--surface2)}
.theme-toggle:active{border-color:#111214;background:var(--surface2);color:#111214}
.chips button:active{background:#111214;color:#fff;border-color:#111214}
.tool-card:active,.g-card:active{border-color:#111214}
.seg button:active{background:var(--surface2);color:var(--ink)}
.tool-cta a.btn:active{background:#111214;color:#fff}
details.faq summary:active{background:var(--surface2)}
footer.site ul button:active,footer.site ul a:active{color:#111214}
/* Dark mode — the same pressed states flip to the site's white, never blue */
html[data-theme="dark"] .btn-primary:active,html[data-theme="dark"] .dl:active,html[data-theme="dark"] .dropzone .pick:active,html[data-theme="dark"] .lib-alert button:active{background:#ffffff;color:#111214}
html[data-theme="dark"] .btn-ghost:active,html[data-theme="dark"] .backbtn:active,html[data-theme="dark"] .sign-adv-toggle:active,html[data-theme="dark"] .filelist .rm:active,html[data-theme="dark"] .page-thumb .mv button:active{border-color:#f4f4f1;color:#f4f4f1;background:var(--surface2)}
html[data-theme="dark"] .theme-toggle:active{border-color:#f4f4f1;background:var(--surface2);color:#f4f4f1}
html[data-theme="dark"] .chips button:active{background:#f4f4f1;color:#141518;border-color:#f4f4f1}
html[data-theme="dark"] .tool-card:active,html[data-theme="dark"] .g-card:active{border-color:#f4f4f1}
html[data-theme="dark"] .seg button:active{background:var(--surface2);color:var(--ink)}
html[data-theme="dark"] .tool-cta a.btn:active{background:#ffffff;color:#111214}
html[data-theme="dark"] footer.site ul button:active,html[data-theme="dark"] footer.site ul a:active{color:#f4f4f1}
/* Header + upper spacing — tighter, even rhythm (final). Spacing only:
   no colours, backgrounds or states are changed here, so the black pill
   in light mode, the white pill in dark mode and the no-blue click fix
   above stay exactly as they were. The home hero copy becomes a single
   flex column with one gap value, so the eyebrow, headline, paragraph,
   both CTA buttons and the trust points share the same even spacing
   instead of five different bottom margins adding up unevenly. */
.header-in{min-height:60px;column-gap:16px}
.hero{margin-top:14px}
#view-home .hero{margin-top:14px;padding:32px 36px 30px}
#view-home .hero-grid{gap:24px}
#view-home .hero-copy{display:flex;flex-direction:column;gap:12px}
#view-home .hero-copy>*{margin-top:0;margin-bottom:0}
#view-home .hero-eyebrow{align-self:flex-start;margin:0}
#view-home .hero h1{margin:0}
#view-home .hero p.lede{margin:0}
#view-home .hero-cta{margin:0;gap:10px}
#view-home .hero-points{margin:0;gap:6px 16px}
#view-home .hero-points li{padding:1px 0}
@media (max-width:900px){
  #view-home .hero-grid{gap:0}
}
@media (max-width:720px){
  .header-in{min-height:0;padding-top:6px;padding-bottom:6px;row-gap:0;column-gap:10px}
  .brand-mark{width:32px;height:32px;border-radius:8px}
  .theme-toggle{width:38px;height:38px}
  nav.main button,nav.main a{min-height:36px;padding:5px 6px}
  .hero{margin-top:10px}
  #view-home .hero{margin-top:10px;padding:22px 18px 22px}
  #view-home .hero-copy{gap:10px}
  #view-home .hero-cta{gap:8px}
  #view-home .hero-points{gap:6px 12px}
  #view-home .hero-points li{padding:0}
}
/* Logo row to nav row gap (final). The earlier almost-zero header-to-hero
   overrides are removed, so the header-to-hero gap is back to what it was
   before that edit (hero margin 14px desktop / 10px mobile, hero top
   padding 32px desktop / 22px mobile, from the spacing block above).
   This block changes ONLY the vertical gap inside the header between the
   PDFSetu logo row and the navigation row below it (All tools, Guides,
   About, Contact, Privacy): the stacked header grid previously had
   row-gap:0, so the nav row sat flush under the logo row. It now gets a
   clear, even 14px row gap wherever the header stacks into two rows.
   Spacing only — no colours, backgrounds or states change, so the black
   pill in light mode, the white pill in dark mode and the no-blue click
   fix above stay exactly as they were, in both light and dark mode. */
.header-in{row-gap:14px}
@media (max-width:720px){
  .header-in{row-gap:14px}
}
/* Header nav highlight shape — RECTANGULAR in both modes (final). The dark
   white-highlight block above set border-radius:999px, which outranked the
   mobile 7px rule and made the dark active item an oval pill, while light
   mode stayed rectangular. This block pins ONE shape for the header nav in
   both modes and every state (base, hover, click/:active, current page):
   the same 8px rectangular radius and the same padding in light and dark.
   Only the colours differ — light: black background, white text; dark:
   white background, dark text. No pill/oval radius remains on header nav. */
nav.main button,nav.main a,
nav.main button:hover,nav.main a:hover,
nav.main button:active,nav.main a:active,
nav.main button.is-active,nav.main a.is-active,
nav.main button.is-active:hover,nav.main a.is-active:hover,
nav.main button[aria-current="page"],nav.main a[aria-current="page"],
html[data-theme="dark"] nav.main button,html[data-theme="dark"] nav.main a,
html[data-theme="dark"] nav.main button:hover,html[data-theme="dark"] nav.main a:hover,
html[data-theme="dark"] nav.main button:active,html[data-theme="dark"] nav.main a:active,
html[data-theme="dark"] nav.main button.is-active,html[data-theme="dark"] nav.main a.is-active,
html[data-theme="dark"] nav.main button.is-active:hover,html[data-theme="dark"] nav.main a.is-active:hover,
html[data-theme="dark"] nav.main button.is-active:active,html[data-theme="dark"] nav.main a.is-active:active,
html[data-theme="dark"] nav.main button[aria-current="page"],html[data-theme="dark"] nav.main a[aria-current="page"],
html[data-theme="dark"] nav.main button[aria-current="page"]:hover,html[data-theme="dark"] nav.main a[aria-current="page"]:hover{
  border-radius:8px !important;
}
nav.main button,nav.main a,
html[data-theme="dark"] nav.main button,html[data-theme="dark"] nav.main a{
  padding:9px 14px;
}
nav.main button:active,nav.main a:active,
nav.main button.is-active,nav.main a.is-active,
nav.main button.is-active:hover,nav.main a.is-active:hover{
  background:#111214;color:#fff;
}
html[data-theme="dark"] nav.main button:active,html[data-theme="dark"] nav.main a:active,
html[data-theme="dark"] nav.main button.is-active,html[data-theme="dark"] nav.main a.is-active,
html[data-theme="dark"] nav.main button.is-active:hover,html[data-theme="dark"] nav.main a.is-active:hover{
  background:#ffffff !important;color:#111214 !important;
}
@media (max-width:720px){
  nav.main button,nav.main a,
  html[data-theme="dark"] nav.main button,html[data-theme="dark"] nav.main a{
    padding:5px 6px;
  }
}
/* Accessibility contrast fix (deep-test finding). The effective light
   --ink3 (#73767d from the premium redesign) measured 4.55:1 on white but
   only 4.23:1 on the light surface colour (#f6f7f5) used behind small
   muted text (category counts, captions, meta lines) — below the 4.5:1
   AA minimum for normal text. The same failing grey (#76797f, 4.36:1 on
   white) was hard-coded for the Sign summary caption, and the hero-visual
   page label #68788D measured 4.19:1 on the surface colour. All three are
   darkened to values that pass on both white and the surface colour
   (#62656a = 5.85:1 / 5.44:1; #5b6572 = 5.92:1 / 5.51:1). Dark mode is
   untouched: its --ink3 #A6A8AB already measures 7.73:1 on the dark
   background, and it is re-pinned here so this :root change can never
   leak into dark mode. No layout, spacing or other colours change. */
:root{--ink3:#62656a}
html[data-theme="dark"]{--ink3:#A6A8AB}
html[data-theme="dark"] .sign-page .sm-cap{color:#62656a}
.hv-num{color:#5b6572}