/* mint · /kdp/ — additions on top of /assets/brand.css + /assets/site.css (docs/brand-spec.md §12). Tokens only. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* hero: text + the proof sheet (the 120 % detail: a printer's sheet with crop marks around the real cover) */
.kh{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.kh{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.kh>*{min-width:0}
.kh__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.kh__cta small{font-size:.72rem;font-weight:500;color:var(--ink-meta);margin-left:6px}
.proof{margin:0}
.proof__sheet{--m:22px;padding:var(--m);background-color:var(--paper-2);border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--rule),0 1px 0 var(--hi),0 18px 40px -28px rgba(16,19,17,.35);
  background-image:
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:1px 12px,12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px,12px 1px;
  background-position:var(--m) 4px,4px var(--m),calc(100% - var(--m)) 4px,calc(100% - 4px) var(--m),
    var(--m) calc(100% - 4px),4px calc(100% - var(--m)),calc(100% - var(--m)) calc(100% - 4px),calc(100% - 4px) calc(100% - var(--m));
  background-repeat:no-repeat}
.proof__sheet img{display:block;width:100%;height:auto}
.proof figcaption{margin-top:10px;font-size:.72rem;letter-spacing:.04em;color:var(--ink-meta)}
@media(max-width:600px){.proof__sheet{--m:12px}}
@media(max-width:959px){.proof{order:-1}}       /* stacked: the fixed-size image first, so a web-font swap re-wraps text below it instead of moving it (CLS) */

/* sections */
.kd-sec{margin-top:clamp(56px,8vw,104px)}
.kd-head{margin-bottom:22px}
.kd-head .kicker{margin-bottom:10px}
.kd-h2{margin:0;font:500 clamp(1.6rem,3vw,2.35rem)/1.1 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty;max-width:30ch}
.kd-h3{margin:0 0 14px;font:500 1.3rem/1.2 var(--font-display);color:var(--ink)}

/* what you download */
.inside{display:grid;gap:36px;border-top:1px solid var(--ink);padding-top:20px}
@media(min-width:960px){.inside{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.inside>*{min-width:0}
.files{list-style:none;margin:0;padding:0}
.files li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.92rem;line-height:1.55}
.files li:first-child{padding-top:0}
.files .mono{font-size:.8rem;font-weight:500;color:var(--ink);padding-top:.15em}
@media(max-width:480px){.files li{grid-template-columns:1fr;gap:2px}}
.shelf{display:grid;gap:22px}
.book{margin:0}
.book__pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.book__pages img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 0 0 1px var(--rule),0 1px 0 var(--hi)}
.book figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin-top:8px;font-size:.875rem;color:var(--ink)}
.book figcaption .mono{font-size:.72rem;color:var(--ink-meta)}

/* book maker */
.row2{display:grid;gap:0 16px}
@media(min-width:520px){.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.f--chk{display:flex;flex-direction:column;justify-content:center;padding-top:22px}
@media(max-width:519px){.f--chk{padding-top:0}}
.themes{border:0;padding:0;margin:0 0 16px}
.themes legend{padding:0;margin:0 0 8px;font:500 .8125rem/1.3 var(--font-body);color:var(--ink)}
.themes__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;max-height:228px;overflow:auto;padding:10px 12px;background:var(--paper-2);border:1px solid var(--ink-mute);border-radius:6px}
.themes__list .chk{font-weight:400;font-size:.8125rem}
.keybox{margin-top:18px;padding:14px;background:var(--paper-2);border-radius:8px;box-shadow:inset 0 0 0 1px var(--rule)}
.keybox .colh{margin-bottom:10px}
.keybox input{flex:1 1 220px;width:auto}
.keybox .hint b{font-weight:600;color:var(--ink)}
.bk-files{list-style:none;margin:12px 0 0;padding:0;font-size:.875rem}
.bk-files li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule)}
.bk-files .mono{font-size:.78rem;color:var(--ink)}
.bk-next{margin:14px 0 0;padding-left:1.2em;font-size:.875rem;line-height:1.6}

/* free tools */
.tools{display:grid;gap:28px;border-top:1px solid var(--ink);padding-top:20px}
@media(min-width:960px){.tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}
.tools>*{min-width:0}
.tool{padding:20px;background:var(--paper-2);border-radius:10px;box-shadow:inset 0 0 0 1px var(--rule),0 1px 0 var(--hi)}
.tool .drop{background:var(--paper)}
.ghost--ink{border-color:var(--ink);color:var(--ink);height:44px;padding:0 20px;font-size:.875rem}
.ghost--ink:hover{background:var(--pop-wash)}
.tool__out:not(:empty){margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:0;font-size:.9rem}
.facts dt{font:500 .75rem/1.9 var(--font-mono);color:var(--ink-meta)}
.facts dd{margin:0;color:var(--ink)}
.facts dd b{font:500 1.25rem/1.3 var(--font-display)}
.checks{list-style:none;margin:10px 0 0;padding:0}
.checks li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:.875rem;line-height:1.45}
.checks .st{font:600 .72rem/1.9 var(--font-mono);letter-spacing:.06em}
.st--pass{color:var(--pop-ink)}.st--warn{color:var(--warn-ink)}.st--fail{color:var(--bad)}
.checks small{display:block;color:var(--ink-meta);font-size:.8125rem}
.rc__stamp .bad{color:var(--bad);font-weight:600}
.verdict{margin:0 0 4px;font:500 1.5rem/1.2 var(--font-display);color:var(--ink)}

/* header: whole labels only, never a word split across lines */
.nav a{white-space:nowrap}
@media(max-width:420px){.nav a{margin-left:14px}}

/* packs, guarantee, comparison */
.packs--books{margin:0 0 22px}
.packs--books .pack{padding:16px 18px}
.packs--books .pack b{font-size:1.9rem}
.guarantee{max-width:68ch;padding:16px 0 4px;border-top:1px solid var(--rule)}
.guarantee .kicker{margin-bottom:8px}
.guarantee p:last-child{margin:0;font-size:.95rem;line-height:1.65}
.cmp-wrap{margin-top:30px;overflow-x:auto}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem;line-height:1.5}
.cmp caption{text-align:left;margin-bottom:10px;font:500 1.1rem var(--font-display);color:var(--ink)}
.cmp th,.cmp td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.cmp thead th{font:500 .74rem var(--font-mono);letter-spacing:.12em;color:var(--ink-meta);border-bottom:1px solid var(--ink)}
.cmp tbody th{font-weight:500;color:var(--ink);width:22%}
.cmp td:nth-child(2){color:var(--ink)}
@media(max-width:600px){                 /* phone: one block per row, both sides visible, no sideways scroll */
  .cmp-wrap{overflow:visible}.cmp{min-width:0}.cmp thead{display:none}
  .cmp tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
  .cmp tbody th,.cmp td{display:block;width:auto;padding:2px 0;border:0}
  .cmp tbody th{margin-bottom:4px}
  .cmp td::before{content:attr(data-l);display:block;font:500 .7rem var(--font-mono);letter-spacing:.1em;color:var(--ink-meta)}
  .cmp td+td{margin-top:6px}
}

/* verify page */
.vf>*{max-width:760px}
.vf__out:empty{display:none}
.vf .grp{margin:22px 0 4px}
.vf__how{margin-top:clamp(40px,6vw,64px)}
.vf__how p{font-size:.95rem;line-height:1.65;max-width:68ch}
.vf form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.vf form .f{flex:1 1 260px;margin:0}
.vf__out:not(:empty){margin-top:24px}
.vf .card{min-height:0}
.hash{display:block;font:400 .72rem var(--font-mono);color:var(--ink-meta);overflow-wrap:anywhere}
.pf-grp{margin:16px 0 0;font:500 .74rem var(--font-mono);letter-spacing:.12em;color:var(--ink-meta)}

@media(prefers-reduced-motion:no-preference){
  .kh__text,.proof{animation:kd-rise .24s var(--ease) both}
  .proof{animation-delay:.06s}
}
@keyframes kd-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}