/* type.css — typography/layout tuning (Claude Opus 5 spec) + soft-3D icon tiles & hover (Claude Fable 5.1 spec). Loaded last. */
/* ==========================================================================
   FileKB type & layout tuning layer — load LAST.
   Changes: size, weight, tracking, leading, spacing, alignment. Nothing else.
   ========================================================================== */
/* --- 1. scale + 4/8-pt spacing tokens ------------------------------------ */
:root{
  --step-0:.97rem;    /* 15.5px  body            */
  --step-1:1.05rem;   /* 16.8px  lede, h3, card  */
  --step-2:1.25rem;   /* 20px    group heading   */
  --step-3:1.5rem;    /* 24px    h2              */
  --cap:.8rem;        /* 12.8px  captions        */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;
  --s-8:32px;--s-10:40px;--s-16:64px;
}
/* --- 2. base type -------------------------------------------------------- */
html{font-size:16px}
body{font-size:var(--step-0);line-height:1.6}
p{margin:0 0 var(--s-4)}
h1,h2,h3,h4{font-weight:600;word-spacing:normal;text-wrap:balance}
h1{font-size:clamp(1.75rem,1.1rem + 2.1vw,2.6rem);line-height:1.1;
   letter-spacing:-.02em;max-width:26ch;margin:0 0 var(--s-3)}
h2{font-size:clamp(1.25rem,1.05rem + .6vw,var(--step-3));line-height:1.22;
   letter-spacing:-.015em;max-width:32ch;margin:0 0 var(--s-3)}
h3{font-size:var(--step-1);line-height:1.35;letter-spacing:-.008em;margin:0 0 var(--s-2)}
h4{font-size:var(--step-0);line-height:1.4;letter-spacing:-.005em}
b,strong{font-weight:600}
h1.center,h2.center,h3.center,p.center{margin-left:auto;margin-right:auto}
p.center.muted{max-width:56ch}
.small{font-size:.85rem}
.hint,.spec .src,.crumb{font-size:var(--cap);line-height:1.5}
.lede{font-size:var(--step-1)!important;line-height:1.6;max-width:56ch;
      margin:0 0 var(--s-6);text-wrap:pretty}   /* !important defeats the inline
                                                   font-size in tool.html */
/* --- 3. one left edge on every page -------------------------------------- */
main.wrap>.sec>:not(.wrap){max-width:none;margin-left:0;margin-right:0;
  padding-left:0;padding-right:0}
.crumb{padding:var(--s-4) 1.15rem var(--s-2)}
/* --- 4. section rhythm --------------------------------------------------- */
.sec{margin:var(--s-10) 0}
.read p{max-width:70ch;line-height:1.68}
.read h2{margin-top:var(--s-8);margin-bottom:var(--s-3)}
.ghead{font-size:var(--step-2);line-height:1.3;letter-spacing:-.012em;
  margin:var(--s-10) 0 var(--s-4)}
.ghead:first-of-type{margin-top:var(--s-6)}
/* --- 5. hero: measure, CTA row, trust block ------------------------------ */
.hero{padding:var(--s-8) 0 var(--s-10)}
.hero h1{max-width:17ch}
.hero .lede{font-size:var(--step-1);line-height:1.6;max-width:46ch;margin-bottom:var(--s-6)}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.08em;
  padding:.3rem .7rem;margin-bottom:var(--s-4)}
.hero .btn.lg{min-height:44px;padding:.7rem 1.25rem;font-size:.95rem}
.hero .btn.lg + .btn.lg{margin-left:var(--s-2)}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-2) var(--s-6);max-width:470px;list-style:none;padding:0;
  margin:var(--s-6) 0 0;font-size:.85rem;line-height:1.4}
.trust li{display:inline-flex;align-items:center;gap:var(--s-2);margin:0}
.trust svg{width:14px;height:14px}
/* --- 6. header: one 36px control height, one baseline -------------------- */
.hdr .in{height:64px;gap:var(--s-2)}
.brand{font-size:1.05rem;font-weight:600;letter-spacing:-.015em;line-height:1}
.brand .m{width:28px;height:28px;border-radius:9px}
.brand .m svg{width:16px;height:16px}
nav.main{gap:2px}
nav.main a{padding:.45rem .7rem;font-size:.9rem;font-weight:500;line-height:1.2}
nav.main a.on{font-weight:600}
.icon-btn{width:36px;height:36px}
.icon-btn svg{width:18px;height:18px}
.lang-btn{height:36px;min-width:40px;font-size:.8rem;font-weight:600;letter-spacing:.02em}
.ncaret{width:24px;height:24px}
.megamenu{padding:var(--s-2);gap:2px var(--s-2)}
.mitem b{font-size:.9rem;font-weight:600;letter-spacing:-.005em}
.mitem small{font-size:.76rem;line-height:1.4}
.mall{font-size:.8rem;font-weight:600}
/* --- 7. controls: buttons, chips, filters, search ------------------------ */
.btn{min-height:40px;padding:.6rem 1.05rem;font-size:.92rem;font-weight:600;letter-spacing:.005em}
.btn.lg{min-height:44px;padding:.7rem 1.25rem;font-size:.95rem}
.btn.sm{min-height:32px;padding:.36rem .75rem;font-size:.83rem}
.chip{padding:.34rem .75rem;font-size:.85rem;font-weight:500}
.tfilters button{min-height:34px;font-size:.83rem;font-weight:500}
.tfilters button[aria-pressed="true"]{font-weight:600}
.tsearch input[type=search]{min-height:46px;padding:.6rem 1rem;font-size:16px}
.tcount{font-size:var(--cap)}
.tsr .tn{font-size:.9rem;font-weight:600}
.tsr .ts{font-size:var(--cap)}
/* --- 8. tool cards: 64px tile, proportioned box -------------------------- */
.grid.tgrid-compact{gap:var(--s-4);max-width:1040px}
.tgrid-compact .tcard,.tgrid .tcard{padding:var(--s-5) var(--s-5) var(--s-4);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh)}
.tgrid-compact .tcard .ico.tico,.tgrid .tcard .ico.tico{width:64px;height:64px;
  border-radius:16px;margin-bottom:var(--s-3)}
.tgrid-compact .tcard .ico.tico img,.tgrid .tcard .ico.tico img{width:56px;height:56px}
.tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:1rem;font-weight:600;
  line-height:1.3;letter-spacing:-.01em;margin:0 0 6px}
.tgrid-compact .tcard p,.tgrid .tcard p{font-size:.875rem;line-height:1.5;
  margin:0 0 var(--s-3)}
.tgrid-compact .tcard p{-webkit-line-clamp:2}
.tgrid .tcard p{-webkit-line-clamp:3}
.tgrid-compact .tcard .go,.tgrid .tcard .go{margin-top:auto;font-size:.8125rem;
  font-weight:600;letter-spacing:.005em}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.card{padding:var(--s-5);border-radius:14px}
.card h3{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.card p{font-size:.9rem;line-height:1.6;margin:0}
/* --- 9. tool page: panel, dropzone, result ------------------------------- */
.wb-panel{padding:var(--s-4);border-radius:14px}
.pt{font-size:.69rem;letter-spacing:.1em;font-weight:600;margin:0 0 var(--s-3)}
.wb-panel .field{margin-bottom:var(--s-3)}
.wb-panel .field>label{font-size:.8rem;font-weight:600;line-height:1.3;
  letter-spacing:.005em;margin-bottom:6px}
.field .opt{font-size:.72rem;font-weight:400}
.wb-panel input[type=text],.wb-panel input[type=number],.wb-panel input[type=date],
.wb-panel select,.wb-panel .dimf input[type=number],.wb-panel .szf input[type=number],
.wb-panel .szf select,.wb-panel .duo.compact input,.wb-panel .duo.compact select{
  min-height:36px;font-size:.9rem;border-radius:9px}
.wb-panel .hint{font-size:.75rem;line-height:1.45}
.wb-panel hr{margin:var(--s-4) 0}
.adv>summary{padding:var(--s-2) 0;font-size:.83rem;font-weight:600}
.wb-panel .btn.block.lg{min-height:48px;margin-top:var(--s-4);font-size:.95rem;font-weight:600}
.tool-note{margin-top:var(--s-3);font-size:.78rem;line-height:1.5}
.drop{padding:var(--s-8) var(--s-5)}
.drop b{font-size:1rem;font-weight:600;line-height:1.3}
.drop .sub{font-size:.85rem;line-height:1.45}
.pnote{font-size:.8rem;line-height:1.5}
.result .big,.stage .result .big{font-weight:600;letter-spacing:-.02em}
.stage .result .meta{font-size:.75rem}
/* --- 10. long-form furniture -------------------------------------------- */
.faq summary{padding:var(--s-4) var(--s-8) var(--s-4) 0;font-size:var(--step-0);font-weight:600}
.faq .a{padding-bottom:var(--s-4);font-size:.92rem;line-height:1.6}
.steps li{padding-bottom:var(--s-4)}
table.tbl th{font-size:.72rem;letter-spacing:.06em;font-weight:600}
table.tbl td{font-size:.9rem}
footer.ft{margin-top:var(--s-16);font-size:.875rem}
footer.ft h4{font-size:.72rem;letter-spacing:.08em;font-weight:600}
footer.ft .base{font-size:var(--cap)}
/* --- 11. phone ----------------------------------------------------------- */
@media (max-width:600px){
  :root{--s-10:32px;--s-16:40px}
  body{font-size:.95rem;line-height:1.58}
  .sec{margin:var(--s-8) 0}
  .hdr .in{height:56px}
  .brand{font-size:1rem}
  .hero{padding:var(--s-6) 0 var(--s-8)}
  .hero h1{font-size:1.75rem;line-height:1.14;letter-spacing:-.018em;max-width:none;
    margin-bottom:var(--s-3)}
  .hero .lede{font-size:1rem;line-height:1.58;max-width:none;margin-bottom:var(--s-5)}
  .trust{gap:6px var(--s-3);max-width:none;font-size:.8rem}
  h2{font-size:1.25rem;max-width:none}
  .ghead{font-size:1.15rem;margin:var(--s-8) 0 var(--s-3)}
  .read p{font-size:.95rem;line-height:1.65;max-width:none}
  .grid.tgrid-compact{gap:var(--s-3)}
  .tgrid-compact .tcard{padding:var(--s-3)}
  .tgrid-compact .tcard .ico.tico{width:56px;height:56px;border-radius:14px;
    margin-bottom:var(--s-2)}
  .tgrid-compact .tcard .ico.tico img{width:48px;height:48px}
  .tgrid-compact .tcard h3{font-size:.9375rem}
  .tgrid-compact .tcard p{font-size:.8125rem;line-height:1.45}
  .tgrid .tcard{padding:var(--s-4)}
  .wb-panel{padding:var(--s-3)}
}
/* --- 12. desktop --------------------------------------------------------- */
@media (min-width:1024px){
  .sec{margin:var(--s-16) 0}
  .hero{padding:var(--s-16) 0 var(--s-10)}
  .hero h1{font-size:2.6rem}
  .hero .lede{max-width:44ch}
  .read p{font-size:1rem;line-height:1.7;max-width:68ch}
  .read h2{margin-top:var(--s-10)}
  .ghead{margin:var(--s-10) 0 var(--s-4)}
  .grid.tgrid-compact{gap:var(--s-5)}
  .wb{gap:var(--s-5)}
  .wb-panel{padding:18px}
}

/* ---- illustration cards (soft pastel 3D art on a tinted panel, text below) ---- */
.tcard .tart{display:grid;place-items:center;width:100%;aspect-ratio:4/3;border-radius:14px;margin:0 0 .75rem;overflow:hidden;
  background:linear-gradient(165deg,#f3f6fd 0%,#ece9fa 55%,#f7f1f6 100%);box-shadow:inset 0 0 0 1px rgba(60,70,120,.06)}
.tcard[data-group=photo] .tart{background:linear-gradient(165deg,#eef4fd,#ebe7fa 60%,#f8eff5)}
.tcard[data-group=sign] .tart{background:linear-gradient(165deg,#f6f3ec,#e9eefb 60%,#eef6fb)}
.tcard[data-group=pdf] .tart{background:linear-gradient(165deg,#eef6f4,#eaf0fb 60%,#f7f0f4)}
.tcard .tart img{width:84%;height:84%;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(40,50,90,.10))}
html[data-theme=dim] .tcard .tart{background:linear-gradient(165deg,#2a2f3d,#2b2740 60%,#332b38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
html[data-theme=dim] .tcard .tart img{filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.tcard{padding:.7rem .7rem .85rem;border-radius:18px}
.tcard h3{font-size:1.02rem;line-height:1.3;margin:0 .15rem .3rem}
.tcard p{font-size:.86rem;line-height:1.45;color:var(--muted);margin:0 .15rem .55rem}
.tcard .go{margin:auto .15rem 0}
.tgrid-compact .tcard h3{font-size:1rem}.tgrid-compact .tcard p{font-size:.82rem;-webkit-line-clamp:2}
.grid.tgrid-compact{gap:.9rem;max-width:1060px}
@media (max-width:600px){.grid.tgrid-compact{gap:.6rem}.tcard{padding:.55rem .55rem .7rem;border-radius:16px}.tcard .tart{border-radius:12px;margin-bottom:.55rem}
  .tgrid-compact .tcard h3{font-size:.92rem}.tgrid-compact .tcard p{font-size:.76rem}.tcard .go{font-size:.78rem}}
.megamenu .mitem img{width:40px;height:40px;flex:0 0 40px;border-radius:10px;padding:1px;background:linear-gradient(165deg,#f3f6fd,#ece9fa);object-fit:contain}
html[data-theme=dim] .megamenu .mitem img{background:linear-gradient(165deg,#2a2f3d,#2b2740)}
/* ---- micro-animation (Fable spec, adapted to the art panel) ---- */
.tcard{transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease)}
.tcard:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:0 2px 6px rgba(35,32,28,.06),0 14px 30px rgba(35,32,28,.10)}
html[data-theme=dim] .tcard:hover{box-shadow:0 14px 30px rgba(0,0,0,.42)}
.tcard .tart img{transition:transform 260ms var(--ease) 30ms,filter 260ms var(--ease) 30ms}
.tcard:hover .tart img{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 12px 14px rgba(40,50,90,.16))}
@media (prefers-reduced-motion:reduce){.tcard,.tcard .tart img{transition:none}.tcard:hover{transform:none}.tcard:hover .tart img{transform:none}}
/* hero: ground contact shadow phased with the float */
.hero-art{position:relative}
.hero-art::after{content:"";position:absolute;left:19%;right:19%;bottom:-12px;height:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(35,32,28,.22),transparent 70%);animation:art-shadow 7s ease-in-out 2s infinite alternate;pointer-events:none}
html[data-theme=dim] .hero-art::after{background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%)}
@keyframes art-shadow{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.86);opacity:.55}}
@media (prefers-reduced-motion:reduce){.hero-art::after{animation:none}}
/* v2 */
/* ==========================================================================
   type-v2.css — FileKB type scale v2 + premium text colours.
   LOAD LAST (after base.css, components.css, extra.css, motion.css, type.css).
   Only selectors that already exist in the markup. Brand teal is untouched.
   Not touched: .wb-panel inputs/selects, .useg pills, .ad + .ad-slot, .megamenu.
   --------------------------------------------------------------------------
   1. PREMIUM TEXT COLOURS (token overrides) — WCAG 2.1 normal-text ratios
      LIGHT  page bg #fbfaf8 · card #ffffff
        body     --text    #1f2320  15.26:1 on bg   15.91:1 on #fff
        heading  --heading #171a18  16.81:1 on bg   17.54:1 on #fff
        muted    --muted   #5d6663   5.68:1 on bg    5.92:1 on #fff
        caption  --faint   #6c7572   4.55:1 on bg    4.75:1 on #fff
        link     --accent  #2f6f62   5.64:1 on bg  (brand teal — UNCHANGED)
      DIM    page bg #22201e · card #2a2825
        body     #ece9e2 13.39:1 · heading #f6f3ec 14.65:1
        muted    #a9b3ae  7.54:1 · caption #95a09b  6.01:1
        link     #5fb3a1  6.53:1 (brand teal — UNCHANGED)
   ========================================================================== */
:root{--text:#1f2320;--muted:#5d6663;--faint:#6c7572;--heading:#171a18}
html[data-theme=dim]{--text:#ece9e2;--muted:#a9b3ae;--faint:#95a09b;--heading:#f6f3ec}
body{color:var(--text)}
h1,h2,h3,h4{color:var(--heading)}
a,.go,.olink{color:var(--accent)}
.muted,.crumb,.crumb a,.faq .a,.notice,.card p,.tcard p{color:var(--muted)}
.hint,.spec .src,.tcount,.tsr .ts,footer.ft .base{color:var(--faint)}
/* --- 2. weight ceiling: 600 --------------------------------------------- */
h1,h2,h3,h4,b,strong,.brand,.btn,.chip,.eyebrow,.go,.faq summary,
table.tbl th,table.tbl td:first-child,footer.ft h4,.steps li::before,.tsr .tn,
nav.main a.on,.tfilters button[aria-pressed="true"]{font-weight:600}
.lede,.tcard p,.card p,.faq .a,table.tbl td{font-weight:400}
/* --- 3. article / SEO copy: 15px · 1.62 · 64ch measure ------------------ */
html{font-size:16px}
body{font-size:15px;line-height:1.62}
p{margin:0 0 .8rem}
.sec p,.sec li,.read p,.read li,.steps li,.notice,.hero-copy p{font-size:15px;line-height:1.62}
/* 64ch ≈ 500px at 15px (62–66ch band). Specificity beats type.css §3. */
main.wrap>.sec>p:not(.wrap),main.wrap>.sec>ul:not(.wrap),main.wrap>.sec>ol:not(.wrap),
.read p,.read li,.faq .a,.notice{max-width:64ch}
h2,.sec h2,.read h2{font-size:20.5px;line-height:1.28;letter-spacing:-.01em;
  max-width:34ch;margin:0 0 10px}
.read h2,main.wrap>.sec>h2{margin-top:26px}
h1.center,h2.center,h3.center,p.center{margin-left:auto;margin-right:auto}
h3,.sec h3,.read h3{font-size:17px;line-height:1.35;letter-spacing:-.008em;margin:18px 0 6px}
h4{font-size:15px;line-height:1.4}
.ghead{font-size:17px;line-height:1.3;margin:22px 0 10px}
h1{font-size:clamp(26px,3.4vw,34px);line-height:1.16;letter-spacing:-.015em;
  max-width:24ch;margin:0 0 10px}
.hero h1{font-size:clamp(26px,4.6vw,38px);max-width:19ch}   /* 38px cap desktop */
.lede{font-size:16px!important;line-height:1.58;max-width:62ch;margin:0 0 18px}
.small{font-size:13.5px}
/* captions 12.5px */
.hint,.spec .src,.crumb,.tcount,.tsr .ts,footer.ft .base,.tool-note,.pnote{font-size:12.5px;line-height:1.5}
/* FAQ */
.faq summary{font-size:15px;line-height:1.4;padding:12px 28px 12px 0}
.faq .a{font-size:14.5px;line-height:1.6;padding:0 1rem 14px 0}
/* spec tables 14px */
table.tbl{font-size:14px}
table.tbl td{font-size:14px;line-height:1.55}
table.tbl th{font-size:11.5px;letter-spacing:.05em;line-height:1.35}
table.tbl th,table.tbl td{padding:.5rem .72rem}
.spec{margin:14px 0}
.steps li{padding-bottom:14px}.sec{margin:34px 0}
footer.ft{font-size:13.5px;margin-top:48px}footer.ft h4{font-size:11.5px}
/* --- 4. home: hero, trust, "why in the browser" cards ------------------- */
.hero{padding:34px 0 26px}
.hero .lede{font-size:16px!important;line-height:1.58;max-width:46ch;margin-bottom:18px}
.eyebrow{font-size:11.5px;letter-spacing:.07em;margin-bottom:14px}
.trust{margin-top:14px;font-size:13px;line-height:1.45}
.trust li{margin:0}
.trust svg{width:14px;height:14px}
.card{padding:14px}
.card h3{font-size:15px;line-height:1.3;margin:0 0 6px}
.card p{font-size:14.5px;line-height:1.62;max-width:60ch}
/* --- 5. compact tool tiles ---------------------------------------------
   DESKTOP  home: 7 × 149.6px in a 1100px row  (7×149.6 + 6×8.7 = 1100)
            tile box = 2 border + 16 pad + 112 art + 6 + 34 title(2 ln)
                     + 3 + 16 desc(1 ln) = 189px
            art 112 / 189 = 59.3% of tile height  (≤60%, square)
   HUB      4 × 169.5px in a 720px row (720−3×14)/4;  same internals
   PHONE    3 × 112.3px  ((390 − 2×18.4 padding − 2×8 gap)/3)
            tile box = 2 + 12 + 76 art + 5 + 33 title(2 ln) = 128px
            art 76 / 128 = 59.4%;  desc hidden
   ---------------------------------------------------------------------- */
.grid.tgrid-compact{grid-template-columns:repeat(7,minmax(0,1fr));gap:8.7px;
  max-width:1100px;margin:0 auto}
.grid.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:720px;margin:0}
.tgrid-compact .tcard,.tgrid .tcard{padding:8px;border-radius:14px;min-height:189px;
  justify-content:flex-start}
.tgrid-compact .tcard .tart,.tgrid .tcard .tart{aspect-ratio:1;width:112px;height:auto;
  max-width:100%;margin:0 auto 6px;border-radius:11px}
.tgrid-compact .tcard .tart img,.tgrid .tcard .tart img{width:88%;height:88%}
/* home markup ships the illustration without its .tart wrapper — size it too */
.tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:13.5px;font-weight:600;line-height:1.26;
  letter-spacing:-.005em;margin:0 0 3px;min-height:34px}
.tgrid-compact .tcard p,.tgrid .tcard p{font-size:12px;line-height:1.35;margin:0;flex:0 0 auto;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tgrid-compact .tcard .go,.tgrid .tcard .go{display:none}   /* whole card is the link */
.newb{top:6px;right:6px;font-size:9.5px;padding:.14rem .4rem}
/* 700–1023px (and the 601–699 band): 4 columns on both grids */
@media (min-width:601px) and (max-width:1023px){
  .grid.tgrid-compact,.grid.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
    max-width:none}
}
/* --- 6. phone: smaller type + tighter rhythm (7 tools ≈ one screen) ----
   under the search box: 44 input + 8 + 32 filters + 10 = 94px,
   grid = 3 rows × 128 + 2 × 8 = 400px → 494px total, fits one 640px screen.
   ---------------------------------------------------------------------- */
@media (max-width:600px){
  body{font-size:14.5px;line-height:1.62}
  .sec{margin:20px 0}
  .sec p,.sec li,.read p,.read li,.steps li,.notice,.hero-copy p{font-size:14.5px;line-height:1.62}
  .sec p,.sec li,.read p,.read li{max-width:none}
  h2,.sec h2,.read h2{font-size:19px;margin-bottom:8px;max-width:none}
  .read h2,main.wrap>.sec>h2{margin-top:22px}
  h3,.sec h3,.read h3{font-size:16px;margin:14px 0 5px}
  .hero{padding:10px 0 18px}
  .hero h1{font-size:26px;line-height:1.18;margin-bottom:8px;max-width:none}
  h1{font-size:26px}
  .lede,.hero .lede{font-size:15px!important;line-height:1.55;margin-bottom:14px;max-width:none}
  .trust{gap:4px 12px;margin-top:12px;font-size:12.5px}
  .faq summary{font-size:14.5px;padding:10px 26px 10px 0}
  .faq .a{font-size:14px;padding-bottom:12px}
  .steps li{padding-bottom:12px}
  table.tbl th,table.tbl td{padding:.42rem .55rem}
  table.tbl td{font-size:13.5px}
  .tsearch{margin:0 auto 10px;gap:8px}
  .tfilters{gap:6px}
  .m-tools{width:64px;margin-bottom:-4px}
  .card{padding:12px}
  .card p{font-size:14px}
  footer.ft{margin-top:32px;font-size:13px}
  .grid.tgrid-compact,.grid.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    max-width:none;margin:0}
  .tgrid-compact .tcard,.tgrid .tcard{padding:6px;border-radius:12px;min-height:128px}
  .tgrid-compact .tcard .tart,.tgrid .tcard .tart{width:76px;margin:0 auto 5px;border-radius:10px}
  .tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:12.5px;line-height:1.3;min-height:33px;margin:0}
  .tgrid-compact .tcard p,.tgrid .tcard p{display:none}
}
/* tiles: centred content, tighter panel */
.tgrid-compact .tcard,.tgrid .tcard{text-align:center;align-items:center}
.tgrid-compact .tcard h3,.tgrid .tcard h3{text-align:center}
.tgrid-compact .tcard .tart,.tgrid .tcard .tart{aspect-ratio:1}
.tcard .tart .spk{width:22px;height:22px;top:5px;right:5px}

/* ==========================================================================
   theme.css — FileKB "Clean Studio" theme (loads last, after type.css).
   Direction: iLovePDF-style structure — white cards on a cool off-white page,
   one strong accent, flat two-tone tool icons — with tighter type, calmer
   greys and self-hosted Switzer for a more premium finish.
   ========================================================================== */
:root{
  --bg:#f5f5fa;--surface:#ffffff;--surface-2:#f0f0f5;--surface-3:#e6e6ee;
  --border:#d6d6df;--border-strong:#b9b9c6;
  --text:#47474f;--heading:#1f1f26;--muted:#707078;--faint:#8a8a94;
  --accent:#e5322d;--accent-hover:#c9261f;--accent-soft:#fdeceb;--accent-ring:rgba(229,50,45,.26);
  --pop:#e5322d;--pop-soft:#fdeceb;
  --r:8px;--r-lg:16px;
  --sh:0 1px 2px rgba(22,22,30,.04),0 2px 8px rgba(22,22,30,.04);
  --sh-lg:0 2px 6px rgba(22,22,30,.05),0 16px 36px rgba(22,22,30,.10);
  --font:'Switzer',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font);
  --hdr-h:60px;
}
html[data-theme=dim]{
  --bg:#15151a;--surface:#1e1e25;--surface-2:#25252d;--surface-3:#2e2e37;
  --border:#2f2f39;--border-strong:#4a4a56;
  --text:#d8d8e0;--heading:#ffffff;--muted:#a0a0ac;--faint:#7e7e8a;
  --accent:#f0554f;--accent-hover:#ff6d67;--accent-soft:#3a1d1c;--accent-ring:rgba(240,85,79,.32);
  --pop:#f0554f;--pop-soft:#3a1d1c;
  --sh:0 1px 2px rgba(0,0,0,.35);--sh-lg:0 16px 36px rgba(0,0,0,.5);
}
body{font-family:var(--font);color:var(--text);background:var(--bg);padding-top:var(--hdr-h)}
h1,h2,h3,h4,.brand,.btn,.chip{font-family:var(--font)}
h1,h2,h3,h4{color:var(--heading);letter-spacing:-.012em}
a:hover{text-decoration:none}

/* ---- header: fixed, white, hides on scroll-down, returns on scroll-up ---- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--surface);backdrop-filter:none;
  border-bottom:1px solid var(--border);transform:translateY(0);
  transition:transform .34s var(--ease),box-shadow .2s var(--ease)}
.hdr.hdr-hide{transform:translateY(-100%)}
.hdr.stuck{box-shadow:0 2px 14px rgba(22,22,30,.06)}
.hdr .in{height:var(--hdr-h);padding:0 1.25rem}
.brand{font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--heading)}
.brand .m{width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff}
nav.main a{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--text);padding:.45rem .62rem;border-radius:6px}
nav.main a:hover,nav.main a.on{color:var(--heading);background:var(--surface-2)}
nav.main a.on{color:var(--accent)}
.lang-btn{border-radius:6px;font-weight:600}

/* ---- home hero: centred headline, no artwork ---- */
.hero{padding:40px 0 6px;text-align:center}
.hero .wrap.hgrid,.hgrid{display:block!important;grid-template-columns:none}
.hero .hero-copy{max-width:800px;margin:0 auto;text-align:center}
.hero-art,.hero .eyebrow,.hero-copy>p.rise:has(.btn),.hero .hero-art::after{display:none}
.hero h1{font-size:clamp(28px,4.2vw,44px)!important;line-height:1.12;font-weight:600;max-width:22ch;margin:0 auto 14px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero .lede{font-size:clamp(16px,1.55vw,21px)!important;line-height:1.5;color:var(--text);max-width:64ch;margin:0 auto 18px}
.hero .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;width:auto;max-width:none;font-size:13px;color:var(--muted);margin:0 auto}
.hero .trust svg{color:var(--accent)}
.sec:has(#toolgrid){margin-top:18px}
.m-tools{display:none}
.sec:has(#toolgrid) h2.center{text-align:center;max-width:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 6px}
.sec:has(#toolgrid) p.center.muted{display:none}
.tsearch{max-width:560px;margin:10px auto 18px}
.tsearch input{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);height:44px;font-size:15px}
.tsearch input:focus{border-color:var(--heading);box-shadow:none}
.tfilters{justify-content:center;gap:8px}
.tfilters button{background:var(--surface);border:1px solid var(--border);color:var(--heading);font-weight:500;font-size:14px;padding:.42rem 1rem;border-radius:999px}
.tfilters button:hover{border-color:var(--heading)}
.tfilters button[aria-pressed="true"]{background:var(--heading);border-color:var(--heading);color:#fff}
html[data-theme=dim] .tfilters button[aria-pressed="true"]{color:var(--bg)}

/* ---- tool cards: iLovePDF arrangement, own icons ---- */
.grid.tgrid-compact,.grid.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:none;margin:0}
.tgrid-compact .tcard,.tgrid .tcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 24px 24px;
  text-align:left;align-items:flex-start;justify-content:flex-start;min-height:0;box-shadow:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.tgrid-compact .tcard:hover,.tgrid .tcard:hover{border-color:var(--heading);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.tgrid-compact .tcard .tart,.tgrid .tcard .tart,.tcard[data-group] .tart,html[data-theme=dim] .tcard .tart{width:48px;height:48px;aspect-ratio:auto;margin:0 0 16px;border-radius:0;background:none;box-shadow:none;display:block;overflow:visible;filter:none}
.tgrid-compact .tcard .tart img,.tgrid .tcard .tart img,.tcard .tart .spk,.tcard .tart::before,.tcard .tart::after{display:none}
.tcard .tart .tki{width:48px;height:48px;transition:transform .3s var(--ease)}
.tcard:hover .tart .tki{transform:scale(1.08)}
.tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--heading);margin:0 0 6px;min-height:0;text-align:left}
.tgrid-compact .tcard p,.tgrid .tcard p{font-size:13px;line-height:18px;letter-spacing:.2px;color:var(--muted);display:block;-webkit-line-clamp:unset;overflow:visible;font-weight:400;margin:0}
.tcard:hover p{color:var(--text)}
.tcard .go,.newb{display:none}
.ghead{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:26px 0 12px}
@media (min-width:601px) and (max-width:1023px){.grid.tgrid-compact,.grid.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tgrid-compact .tcard,.tgrid .tcard{padding:20px 18px 18px}}
@media (max-width:600px){
  .hero{padding:22px 0 4px}
  .hero h1{font-size:26px!important;max-width:none}
  .hero .lede{font-size:15px!important;margin-bottom:12px}
  .hero .trust{font-size:12px;gap:4px 12px}
  .tsearch{margin:8px auto 12px}
  .grid.tgrid-compact,.grid.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
  .tgrid-compact .tcard,.tgrid .tcard{padding:14px 14px 13px;border-radius:14px;min-height:0}
  .tgrid-compact .tcard .tart,.tgrid .tcard .tart,.tcard[data-group] .tart{width:36px;height:36px;margin:0 0 10px}
  .tcard .tart .tki{width:36px;height:36px}
  .tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:15px;min-height:0;margin:0 0 4px}
  .tgrid-compact .tcard p,.tgrid .tcard p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:16px}
}

/* ---- icon colours (flat two-tone) ---- */
.tki-resize-to-kb{color:#ee6c4d}.tki-compress-image{color:#2fb56b}.tki-crop-rotate{color:#3b82f6}
.tki-signature-maker{color:#8b5cf6}.tki-photo-name-dob{color:#f59e0b}.tki-compress-pdf{color:#e5322d}.tki-photo-to-pdf{color:#14b8a6}

/* ---- tools mega-menu + drawer: same icons ---- */
.megamenu .mitem img{display:none}
.megamenu .mitem .tki{width:36px;height:36px;flex:0 0 auto}
.megamenu{border-radius:12px;border:1px solid var(--border);box-shadow:var(--sh-lg)}

/* ---- buttons, chips, panels ---- */
.btn{border-radius:8px;font-weight:600}
.btn.ghost{background:var(--surface);border-color:var(--border);color:var(--heading)}
.btn.ghost:hover{border-color:var(--heading)}
.chip{border-radius:8px}
.card,.wb-panel,.stage,.result,.faq details,.tsr{border-color:var(--border)}
.sec.read,.faq .a{color:var(--text)}
footer.ft{border-top:1px solid var(--border);background:var(--surface)}
.page-nav{top:calc(var(--hdr-h) + 8px)}
#tool,#guide,#sizes,#steps,#faq{scroll-margin-top:calc(var(--hdr-h) + 64px)}
.hero-art::after{display:none}
/* ---- flat theme: retire the 3D illustration set (kept in /assets/img for rollback) ---- */
.mascot,.why-grid .art,.cta-duo img,.hero-art{display:none!important}
.why-grid{grid-template-columns:1fr}
.cta-duo{justify-content:center}
.wb-note .mascot+*,.pnote{margin-left:0}
.megamenu .mitem,.megamenu .mall{text-transform:none;letter-spacing:0;font-size:14px}
.megamenu .mitem b{font-weight:600;color:var(--heading)}
.megamenu .mitem small{color:var(--muted);font-size:12px;text-transform:none;letter-spacing:0}
.megamenu .mitem:hover{background:var(--surface-2)}

/* ===== header tools panel — full-width, columns of icon + name (no descriptions) ===== */
.nitem.has-menu{position:static}
.nitem.has-menu>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.nitem.has-menu.open>a{color:var(--accent);background:none}
.nitem.has-menu.open>a::after{transform:translateY(1px) rotate(-135deg)}
@media (min-width:861px){
  .megamenu,.nitem.has-menu:hover .megamenu,.nitem.has-menu:focus-within .megamenu{display:none}
  .megamenu{position:fixed;left:0;right:0;top:var(--hdr-h);min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;padding:6px 6px 0;z-index:70}
  .megamenu::before{display:none}
  .nitem.has-menu.open .megamenu{display:block}
  .mm-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 32px;padding:30px 32px 34px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(22,22,30,.14)}
  .mcol{display:flex;flex-direction:column;gap:2px}
  .mtitle{text-transform:uppercase;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;padding:0 8px}
  .megamenu .mitem{display:flex;align-items:center;gap:10px;padding:8px;height:36px;border-radius:6px;font-size:13px;font-weight:500;color:var(--heading);text-transform:none;letter-spacing:0}
  .megamenu .mitem .tki{width:20px;height:20px;flex:0 0 20px}
  .megamenu .mitem.plain{padding-left:8px}
  .megamenu .mitem:hover{background:var(--surface-2);color:var(--accent)}
  .megamenu .mall{color:var(--accent);margin-top:8px;font-weight:600}
}
@media (max-width:860px){
  .megamenu{border-left:0;padding:0;margin:0}
  .mm-in{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:4px 0 6px 8px}
  .mcol{display:contents}
  .mtitle{grid-column:1/-1;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted);margin:8px 0 2px;padding:0 8px}
  .megamenu .mitem{display:flex;align-items:center;gap:8px;padding:7px 8px;font-size:14px;font-weight:500;color:var(--heading);text-transform:none;letter-spacing:0}
  .megamenu .mitem .tki{width:20px;height:20px;flex:0 0 20px}
  .megamenu .mall{color:var(--accent)}
}
nav.main a{font-size:14px}

/* ===== cards: iLovePDF geometry ===== */
.tgrid-compact .tcard,.tgrid .tcard{padding:32px;border-radius:16px}
.tgrid-compact .tcard:hover,.tgrid .tcard:hover{border-color:#292931;transform:none;box-shadow:none}
html[data-theme=dim] .tgrid-compact .tcard:hover,html[data-theme=dim] .tgrid .tcard:hover{border-color:#8a8a94}
.tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:20px;font-weight:500;line-height:28px;letter-spacing:0;margin:0 0 8px}
.tgrid-compact .tcard p,.tgrid .tcard p{font-size:13px;line-height:18px;letter-spacing:.3px}
.tcard:hover .tart .tki{transform:scale(1.1)}
.tcard:hover h3{color:#161616}
html[data-theme=dim] .tcard:hover h3{color:#fff}
@media (min-width:601px) and (max-width:1023px){.tgrid-compact .tcard,.tgrid .tcard{padding:22px 20px}}
@media (max-width:600px){.tgrid-compact .tcard,.tgrid .tcard{padding:16px 14px 14px}.tgrid-compact .tcard h3,.tgrid .tcard h3{font-size:16px;line-height:22px}}
@media (max-width:860px){.nitem.has-menu>a::after{display:none}.nitem.has-menu>a:focus{outline:none}}

/* ===== result view: only the finished file; tap it to see the original ===== */
.stage.fixh.done>.holder{display:none}
.stage.fixh.done{justify-content:center}
.stage .result .ohold{position:relative}
/* ===== premium primary buttons (build + download): gradient, soft glow, light sweep ===== */
.btn:not(.ghost):not(.sm),#go,#dl{position:relative;overflow:hidden;border-radius:8px;
  background:linear-gradient(180deg,#f2504a 0%,#e5322d 55%,#d52a25 100%);color:#fff;border:0;
  box-shadow:0 1px 2px rgba(201,38,31,.28),0 8px 18px -8px rgba(229,50,45,.65),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease)}
.btn:not(.ghost):not(.sm):hover,#go:hover,#dl:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 2px 4px rgba(201,38,31,.25),0 12px 22px -8px rgba(229,50,45,.7),inset 0 1px 0 rgba(255,255,255,.2);color:#fff}
.btn:not(.ghost):not(.sm):active,#go:active,#dl:active{transform:translateY(0);filter:brightness(.98)}
.btn:not(.ghost):not(.sm)::after,#go::after,#dl::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.0) 30%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.0) 70%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);opacity:0}
.btn:not(.ghost):not(.sm):hover::after,#go:hover::after,#dl:hover::after,.btn.sweep::after{animation:sweep 900ms var(--ease-io) 1}
#dl::after{animation:sweep 1100ms var(--ease-io) 320ms 1}
@keyframes sweep{0%{opacity:0;transform:translateX(-160%) skewX(-18deg)}15%{opacity:1}100%{opacity:0;transform:translateX(520%) skewX(-18deg)}}
#go[disabled],#go[aria-disabled="true"]{background:linear-gradient(180deg,#f2a3a0,#eb9a97);box-shadow:none;filter:none;transform:none}
#go[disabled]::after{display:none}
html[data-theme=dim] .btn:not(.ghost):not(.sm),html[data-theme=dim] #go,html[data-theme=dim] #dl{box-shadow:0 8px 18px -8px rgba(240,85,79,.6)}
@media (prefers-reduced-motion:reduce){.btn::after,#go::after,#dl::after{animation:none!important}}

/* ===== picture actions: icon-only, light blue, no box; hidden while cropping / resizing ===== */
.imgacts{top:6px;right:6px;gap:4px}
.imgacts.out{right:-46px;top:8px}
.imgacts button{min-width:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:#4fb3f6;box-shadow:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(255,255,255,.6));transition:transform .15s var(--ease),background .15s}
.imgacts button svg{width:22px;height:22px;stroke-width:2.2}
.imgacts button span{display:none}
.imgacts button:hover{transform:scale(1.1);background:rgba(79,179,246,.14)}
.imgacts button.on{background:none;color:#4fb3f6}
.imgacts.out button{filter:none;color:#2f97e0}
.holder.cropping .imgacts,.holder.rz-open .imgacts{display:none}
/* rotate: plain small dark icon centred under the canvas, only while cropping */
.rotbtn.crop{background:none;border:0;box-shadow:none;color:var(--heading);width:28px;height:28px;padding:0;border-radius:6px;opacity:.85}
.rotbtn.crop:hover{opacity:1;background:var(--surface-2)}
.rotbtn.crop svg{width:18px;height:18px}
html[data-theme=dim] .rotbtn.crop{color:#fff}
.fsbtn{transition:none}
.uhint[hidden]{display:none}
.uhint{margin:4px 0 0}
.stage.fixh.done .result{width:100%;flex:1 1 100%}
.stage .result .ohold img{margin:0 auto}
/* header links: plain text, no box behind active/hover/open state */
nav.main a,nav.main a:hover,nav.main a.on,.nitem.has-menu.open>a,.nitem.has-menu>a:focus{background:none!important;box-shadow:none;outline:none}
nav.main a:hover{color:var(--accent)}
nav.main a.on,.nitem.has-menu.open>a{color:var(--accent)}
.nitem.has-menu>a:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
@media (max-width:860px){
  .megamenu,.mm-in{background:none;border:0;box-shadow:none;border-radius:0}
  .mm-in{padding:2px 0 8px 6px}
  .nitem.has-menu>a:focus,.nitem.has-menu>a:focus-visible,.ncaret:focus{outline:none;box-shadow:none}
}

/* ===== search dropdown: floats over the grid, animated open/close ===== */
.tsearch{position:relative}
.tsr{position:absolute;left:0;right:0;top:50px;z-index:45;margin:0;max-width:none;width:100%;padding:8px 8px 6px;border-radius:12px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 18px 44px -12px rgba(22,22,30,.28),0 2px 8px rgba(22,22,30,.06);transform-origin:top center;opacity:0;transform:translateY(-8px) scale(.985);
  transition:opacity .2s var(--ease),transform .24s var(--ease);pointer-events:none}
.tsr.in{opacity:1;transform:none;pointer-events:auto}
.tsr[hidden]{display:none}
.tsr-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:2px 8px 6px}
.tsr li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--heading);font-size:14px;font-weight:500;min-height:40px;text-decoration:none}
.tsr li a:hover,.tsr li a:focus-visible{background:var(--surface-2);color:var(--accent);outline:none}
.tsr li a svg{width:22px;height:22px;flex:0 0 22px}
.tsr li a .tn{flex:0 0 auto}
.tsr li a .ts{flex:1 1 auto;min-width:0;font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsr .tg{flex:0 0 auto;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.tsr li{animation:tsrRow .26s var(--ease) both}
.tsr li:nth-child(2){animation-delay:30ms}.tsr li:nth-child(3){animation-delay:60ms}.tsr li:nth-child(4){animation-delay:90ms}.tsr li:nth-child(n+5){animation-delay:120ms}
@keyframes tsrRow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:600px){.tsr{top:48px}.tsr li a .ts{display:none}}
@media (prefers-reduced-motion:reduce){.tsr,.tsr li{transition:none;animation:none}}
.tsearch input:focus,.tsearch input:focus-visible{outline:none;border-color:var(--heading);box-shadow:0 0 0 3px rgba(31,31,38,.08)}