/* =========================================================
   AutoTrim — clean UI
   ========================================================= */
@font-face{font-family:"Rubik";font-weight:400;src:url(/fonts/rubik-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:400;src:url(/fonts/rubik-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:500;src:url(/fonts/rubik-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:500;src:url(/fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:700;src:url(/fonts/rubik-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:700;src:url(/fonts/rubik-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}

:root{
  --bg:#f7f7f5; --surface:#ffffff; --surface-2:#f3f3f0; --surface-3:#ebebe7;
  --line:#e6e5e1; --line-2:#d6d5d0;
  --text:#0d0d0d; --muted:#6c6b67; --faint:#9b9a95;
  --accent:#ed2024; --accent-soft:#fdeceb; --accent-text:#c2141a;
  --ink:#0d0d0d; --on-ink:#fff;
  --ok-bg:#e8f6ec; --ok-tx:#1d6b35; --warn-bg:#fff6e5; --warn-line:#f2dcae; --warn-tx:#7a4d00;
  --checker-a:#f1f1ee; --checker-b:#ffffff;
  --shadow-1:0 1px 2px rgba(16,16,16,.04);
  --shadow-2:0 1px 2px rgba(16,16,16,.04),0 12px 32px -16px rgba(16,16,16,.14);
  --shadow-3:0 2px 4px rgba(16,16,16,.04),0 24px 48px -20px rgba(16,16,16,.22);
  --r-xl:24px; --r-l:18px; --r-m:12px; --r-s:9px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0b0c; --surface:#141416; --surface-2:#1b1b1e; --surface-3:#232327;
    --line:#26262a; --line-2:#34343a;
    --text:#f3f3f2; --muted:#a2a1a6; --faint:#6d6c72;
    --accent:#ff3b3f; --accent-soft:#2a1213; --accent-text:#ff6b6e;
    --ink:#f3f3f2; --on-ink:#0b0b0c;
    --ok-bg:#12261a; --ok-tx:#7fd69a; --warn-bg:#2a2010; --warn-line:#4a3a1a; --warn-tx:#f2c46d;
    --checker-a:#1c1c1f; --checker-b:#151517;
    --shadow-1:none; --shadow-2:0 0 0 1px rgba(255,255,255,.02); --shadow-3:0 24px 48px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0b0b0c; --surface:#141416; --surface-2:#1b1b1e; --surface-3:#232327;
    --line:#26262a; --line-2:#34343a;
    --text:#f3f3f2; --muted:#a2a1a6; --faint:#6d6c72;
    --accent:#ff3b3f; --accent-soft:#2a1213; --accent-text:#ff6b6e;
    --ink:#f3f3f2; --on-ink:#0b0b0c;
    --ok-bg:#12261a; --ok-tx:#7fd69a; --warn-bg:#2a2010; --warn-line:#4a3a1a; --warn-tx:#f2c46d;
    --checker-a:#1c1c1f; --checker-b:#151517;
    --shadow-1:none; --shadow-2:0 0 0 1px rgba(255,255,255,.02); --shadow-3:0 24px 48px -20px rgba(0,0,0,.7);
    color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;overflow-x:clip;display:flex;flex-direction:column;align-items:center;padding:0 16px;
  font-family:var(--font);font-size:15.5px;line-height:1.55;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% -180px,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 0) 0 0/24px 24px;
  mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 85%)}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- header ---------------- */
.top{width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 4px 8px;flex-wrap:wrap}
.brand{display:block;text-decoration:none;color:var(--text)}
.logo{display:block;width:196px;height:auto;overflow:visible;cursor:pointer}
/* --- logo: intro — the red nib appears, turns white as the "o" grows around it, then the letters bounce in */
.logo .lt{transform-box:fill-box;transform-origin:50% 100%}
.logo .logo-nib,.logo .logo-o{transform-box:fill-box;transform-origin:center}
.logo.intro .logo-nib{animation:nibIntro 1.05s cubic-bezier(.34,1.56,.64,1) both}
.logo.intro .logo-o{animation:oIntro .55s cubic-bezier(.34,1.56,.64,1) .5s both}
.logo.intro .lt:not(.logo-o){animation:letterPop .62s cubic-bezier(.34,1.7,.64,1) calc(1s + var(--d, 1) * 85ms) both}
@keyframes nibIntro{
  0%{opacity:0;transform:scale(.15) rotate(-30deg);fill:#ed2024}
  38%{opacity:1;transform:scale(1.45) rotate(8deg);fill:#ed2024}
  58%{transform:scale(1) rotate(0);fill:#ed2024}
  72%{fill:#ed2024}
  100%{opacity:1;transform:none;fill:#fff}}
@keyframes oIntro{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes letterPop{0%{opacity:0;transform:translateY(35%) scale(.35)}100%{opacity:1;transform:none}}
/* --- logo: hover — the nib grows, shrinks and wobbles; the letters come alive */
.logo.wave .logo-nib{animation:nibHover .95s ease both}
.logo.wave .lt:not(.logo-o){animation:ltWave .6s var(--ease) calc(var(--d, 1) * 55ms) both}
.logo.wave .logo-o{animation:oSquish .6s var(--ease) both}
@keyframes nibHover{0%,100%{transform:none}18%{transform:scale(1.38) rotate(-14deg)}38%{transform:scale(1.3) rotate(13deg)}56%{transform:scale(1.15) rotate(-9deg)}74%{transform:scale(1.06) rotate(5deg)}88%{transform:rotate(-2deg)}}
@keyframes ltWave{0%,100%{transform:none}40%{transform:translateY(-12%) scaleY(1.04)}70%{transform:translateY(3%)}}
@keyframes oSquish{0%,100%{transform:none}35%{transform:scale(1.1,.9)}70%{transform:scale(.96,1.04)}}
.tagline{margin:0;color:var(--muted);font-size:14.5px}

/* ---------------- stepper ---------------- */
.ruler{--p:0;position:relative;width:100%;max-width:1120px;margin:26px 0 8px;padding:0 4px}
.ruler ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.ruler li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--faint);
  transition:color .4s var(--ease);white-space:nowrap}
.ruler li b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;font-weight:700;
  background:var(--surface);border:1.5px solid var(--line-2);color:var(--faint);transition:all .45s var(--ease)}
.ruler li.now{color:var(--text)}
.ruler li.now b{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.ruler li.done{color:var(--muted);cursor:pointer}
.ruler li.done b{background:var(--ink);border-color:var(--ink);color:transparent;position:relative}
.ruler li.done b::after{content:"";position:absolute;width:10px;height:5px;border:solid var(--on-ink);border-width:0 0 2px 2px;
  transform:translateY(-1px) rotate(-45deg)}
.ruler li.done:hover{color:var(--text)}
.ruler-track{position:absolute;top:15px;right:12.5%;left:12.5%;height:1.5px;background:var(--line-2);margin:0 4px}
.ruler-track i{position:absolute;inset:0 0 0 auto;width:calc(var(--p) * 100%);background:var(--ink);transition:width .6s var(--ease)}

/* ---------------- windows ---------------- */
main{width:100%;max-width:1120px;flex:1;padding:18px 0 40px}
.win{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  padding:clamp(22px,4vw,44px)}
.win.enter{animation:winIn .55s var(--ease) both}
.win.leave{animation:winOut .22s ease both}
@keyframes winIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes winOut{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
.win-title{margin:0;font-size:clamp(24px,3.2vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.win-sub{margin:8px 0 30px;color:var(--muted);font-size:15.5px}

/* ---------------- step 1: tools ---------------- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:right;gap:6px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:12px 12px 18px;
  box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
  animation:rise .6s var(--ease) both}
.tool:nth-child(2){animation-delay:.06s}.tool:nth-child(3){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tool:hover,.tool:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--line-2);outline:none}
.tool:active{transform:translateY(-1px) scale(.99)}
.tool.picked{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tool .tag{position:absolute;top:22px;left:22px;z-index:1;font-size:11.5px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.ill{display:block;width:100%;height:auto;background:var(--surface-2);border-radius:12px;margin-bottom:12px}
.tool-name{font-size:19px;font-weight:700;letter-spacing:-.01em;padding:0 8px}
.tool-desc{color:var(--muted);font-size:14.5px;padding:0 8px;min-height:3.2em}
.tool .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0 8px;font-weight:500;font-size:14.5px;color:var(--text)}
.tool .go svg{transition:transform .35s var(--ease)}
.tool:hover .go svg{transform:translateX(-4px)}
/* illustrations — thin, quiet */
.ill-cut .blob{fill:var(--surface-3);stroke:none}
.ill-cut .cut{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 4;animation:march 1.6s linear infinite paused}
.tool:hover .ill-cut .cut{animation-play-state:running}
.ill-cut .scissors{fill:none;stroke:var(--text);stroke-width:2;transition:transform .8s var(--ease)}
.tool:hover .ill-cut .scissors{transform:translate(150px,36px) rotate(-30deg)}
@keyframes march{to{stroke-dashoffset:-18}}
.ill-marks .art,.ill-bleed .art{fill:var(--surface);stroke:var(--line-2);stroke-width:1.2}
.art-in{fill:var(--surface-3);stroke:none}
.ill-marks .rm{color:var(--text);transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ease) var(--d),color .3s}
.tool:hover .ill-marks .rm{transform:rotate(90deg);color:var(--accent)}
.ill-bleed .bleedzone{opacity:.35;transform-box:fill-box;transform-origin:center;transform:scale(.88);transition:transform .7s var(--ease),opacity .4s}
.tool:hover .ill-bleed .bleedzone{transform:none;opacity:.55}
.ill-bleed .trim{fill:none;stroke:var(--text);stroke-width:1.2;stroke-dasharray:4 3}
.ill-label{font-size:12px;font-weight:500;fill:var(--accent)}
.ill use{stroke-width:inherit}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--surface);font-weight:500;font-size:15px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.btn:hover{background:var(--surface-2);border-color:var(--faint)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink);padding:0 26px}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg));box-shadow:var(--shadow-2)}
.btn.big{height:52px;font-size:16px;padding:0 34px}
.btn.small{height:36px;font-size:14px;padding:0 14px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.dl{width:100%;height:auto;justify-content:flex-start;gap:14px;padding:14px 18px;margin-bottom:10px;text-decoration:none;
  background:var(--ink);color:var(--on-ink);border-color:var(--ink);text-align:right;animation:rise .5s var(--ease) both}
.btn.dl:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.btn.dl>span:last-child{display:flex;flex-direction:column;min-width:0;font-weight:700;font-size:15.5px}
.btn.dl small{font-weight:400;font-size:12.5px;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.btn.dl .ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:var(--accent);color:#fff}
.btn.dl.alt{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn.dl.alt .ico{background:var(--surface-3);color:var(--text)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.actions .btn.primary{margin-inline-start:auto}

/* ---------------- step 2: upload ---------------- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:260px;padding:28px;
  border:1.5px dashed var(--line-2);border-radius:var(--r-l);background:var(--surface-2);cursor:pointer;text-align:center;
  transition:background .25s,border-color .25s,transform .35s var(--ease)}
.drop:hover{border-color:var(--faint)}
.drop.hot{border-color:var(--accent);border-style:solid;background:var(--accent-soft);transform:scale(1.005)}
.drop-ill{width:84px;height:64px;margin-bottom:10px}
.drop-ill .sheet{fill:var(--surface);stroke:var(--line-2);stroke-width:2}
.drop-ill .fold{fill:none;stroke:var(--line-2);stroke-width:2}
.drop-ill .dash{display:none}
.drop-ill .arrow{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.2s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.drop-big{font-size:18px;font-weight:700}
.drop-small{color:var(--muted);font-size:14px}
.drop-small u{text-decoration-color:var(--line-2);text-underline-offset:3px}
.drop-hot{display:none;font-size:18px;font-weight:700;color:var(--accent-text)}
.drop.hot .drop-big,.drop.hot .drop-small,.drop.hot .drop-ill{display:none}
.drop.hot .drop-hot{display:block}
.upbar{position:relative;height:52px;border-radius:var(--r-m);background:var(--surface-2);overflow:hidden;margin-top:16px;border:1px solid var(--line)}
.upbar i{position:absolute;inset:0 0 0 auto;width:0;background:var(--accent-soft);transition:width .25s var(--ease)}
.upbar i::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent)}
.upbar span{position:relative;display:grid;place-items:center;height:100%;font-weight:500;font-size:14px}
.filecard{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:28px;align-items:start;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);animation:rise .45s var(--ease)}
.thumb{border-radius:12px;overflow:hidden;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line)}
.thumb img{max-width:100%;max-height:100%;display:block}
.checker{background-color:var(--checker-b);background-image:
  linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.fileinfo{padding-top:4px;min-width:0}
.fileinfo h3{margin:0 0 12px;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chip{border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:13px;font-weight:500;background:var(--surface-2);color:var(--muted)}
.chip.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-tx)}
.chip.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn-tx)}
.chip.red{background:var(--accent-soft);border-color:transparent;color:var(--accent-text);font-weight:700}
.notes{margin:4px 0 14px;padding:0 18px 0 0;color:var(--muted);font-size:13.5px}

/* ---------------- step 3: settings ---------------- */
.params{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.params{grid-template-columns:1fr}}
.group{margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 4px;background:var(--surface)}
.group legend{float:right;width:100%;padding:0;margin-bottom:14px;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.group legend+*{clear:both}
.group.adv{grid-column:1/-1;background:var(--surface-2);border-color:transparent;padding:4px 18px}
.group.adv>summary{cursor:pointer;list-style:none;padding:12px 0;font-weight:500;display:flex;align-items:center;gap:8px;color:var(--muted)}
.group.adv>summary::-webkit-details-marker{display:none}
.group.adv>summary::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(135deg);transition:transform .3s var(--ease)}
.group.adv[open]>summary::before{transform:rotate(45deg)}
.group.adv[open]>summary{color:var(--text)}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 24px;padding:8px 0 4px}
.field{margin-bottom:18px}
.field>label:not(.tog),.field>.lbl{display:block;font-weight:500;font-size:14px;margin-bottom:7px}
.field .hint{display:block;color:var(--faint);font-size:12.5px;margin-top:6px;line-height:1.45}
.num{display:flex;align-items:center;height:42px;max-width:240px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);
  transition:border-color .2s,box-shadow .2s}
.num:focus-within{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 8%,transparent)}
.num input{flex:1;min-width:0;height:100%;border:0;background:transparent;text-align:center;direction:ltr;font-weight:500;font-size:15.5px;outline:none;
  -moz-appearance:textfield}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num button{width:36px;height:34px;margin:0 3px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;transition:background .15s,color .15s}
.num button:hover{background:var(--surface-2);color:var(--text)}
.num .unit{order:-1;padding:0 12px 0 4px;color:var(--faint);font-size:13px;direction:ltr;white-space:nowrap}
.num .unit{order:99;padding:0 4px 0 12px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);
  transition:background .25s var(--ease),color .2s,box-shadow .25s}
.seg label:hover span{color:var(--text)}
.seg input:checked+span{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.seg svg{width:16px;height:16px}
.txt{height:42px;width:100%;max-width:240px;border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 12px;background:var(--surface);
  direction:ltr;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s}
.txt:focus{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 8%,transparent)}
select{height:42px;max-width:100%;border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 12px;background:var(--surface);font-weight:500}
#pageRange{display:block;margin-top:8px;height:42px;width:100%;max-width:260px;border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 12px;background:var(--surface);font-weight:500}
#pageRange[hidden],#pageHint[hidden]{display:none}
.tog{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500;font-size:14px}
.tog input{position:absolute;opacity:0}
.tog i{position:relative;flex:none;width:40px;height:24px;border-radius:99px;background:var(--line-2);transition:background .3s var(--ease)}
.tog i::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.tog input:checked+i{background:var(--accent)}
.tog input:checked+i::after{transform:translateX(-16px)}
.tog input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- step 4: working ---------------- */
.working{padding:56px 0 30px;text-align:center;max-width:560px;margin:0 auto}
.blade-track{position:relative;height:6px;border-radius:99px;background:var(--surface-3)}
.blade-fill{position:absolute;top:0;bottom:0;right:0;width:0;border-radius:99px;background:var(--accent);transition:width .45s var(--ease);overflow:hidden}
@keyframes shine{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.blade{position:absolute;top:50%;right:0;width:26px;height:26px;margin:-13px -13px 0 0;padding:3px;border-radius:50%;
  background:var(--surface);color:var(--accent);box-shadow:var(--shadow-2),0 0 0 1px var(--line);
  transition:right .45s var(--ease);animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage{margin:30px 0 0;font-size:19px;font-weight:500;min-height:1.4em}
.pct{margin:4px 0 0;color:var(--faint);font-size:14px}

/* ---------------- result ---------------- */
.result{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;margin-top:22px;animation:rise .5s var(--ease)}
.preview-wrap{min-width:0}
.preview-tools{display:flex;gap:6px;margin-bottom:10px}
.chip-btn{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s}
.chip-btn:hover{color:var(--text);border-color:var(--line-2)}
.chip-btn.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.preview{border:1px solid var(--line);border-radius:var(--r-l);overflow:auto;max-height:72vh;display:grid;place-items:center;padding:18px}
.preview-inner{position:relative;width:100%;transition:width .4s var(--ease)}
.preview-inner img{display:block;width:100%;height:auto;outline:1px solid var(--line-2)}
.overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .3s}
.overlay.off{opacity:0}
.overlay .ov-cut{fill:none;stroke:var(--accent);stroke-width:1.8px;vector-effect:non-scaling-stroke}
.overlay .ov-glow{fill:none;stroke:#fff;stroke-width:4.5px;vector-effect:non-scaling-stroke;opacity:.9}
.overlay .ov-mark{transform-box:fill-box;transform-origin:center;animation:markIn .6s var(--ease) both}
.overlay .ov-mark *{fill:none;stroke:var(--accent);stroke-width:1.6px;vector-effect:non-scaling-stroke}
.overlay .ov-mark .solid{fill:var(--accent)}
.overlay .ov-ref,.overlay .ov-trim{fill:none;stroke:var(--text);stroke-width:1px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;opacity:.7}
.overlay .ov-bleed{fill:url(#ovHatch);opacity:.35}
@keyframes markIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.side{min-width:0}
.warnings{list-style:none;padding:0;margin:0 0 10px}
.warnings li{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-tx);border-radius:var(--r-m);padding:9px 12px;margin-bottom:8px;font-size:13.5px}
.report{border:1px solid var(--line);border-radius:var(--r-l);padding:4px 16px 8px;background:var(--surface)}
.report summary{cursor:pointer;list-style:none;padding:12px 0 6px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
.report summary::-webkit-details-marker{display:none}
.report summary::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-tx)}
.report table{width:100%;border-collapse:collapse;font-size:13px}
.report td{padding:8px 0;border-top:1px solid var(--line);vertical-align:top}
.report td:first-child{color:var(--muted);padding-left:12px;width:44%}
.report td:last-child{font-weight:500;text-align:right;unicode-bidi:plaintext}
.again{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.again .btn{background:transparent;border-color:transparent;color:var(--muted)}
.again .btn:hover{background:var(--surface-2);color:var(--text)}
.error{margin-top:24px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--text);
  border-radius:var(--r-l);padding:18px 20px;font-size:15px;animation:rise .4s var(--ease)}
.error b{color:var(--accent-text);display:block;margin-bottom:4px}
.error .actions{border:0;padding-top:0;margin-top:14px}

/* ---------------- footer ---------------- */
.foot{width:100%;max-width:1120px;text-align:center;padding:10px 0 36px;font-size:13.5px;color:var(--muted)}
.foot a{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .2s}
.foot a:hover{text-decoration-color:var(--accent)}

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .tools{grid-template-columns:1fr}
  .tool-desc{min-height:0}
  .result{grid-template-columns:1fr}
  .filecard{grid-template-columns:1fr}
  .ruler li span{display:none}
  .ruler li.now span{display:inline}
  .top{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------------- trim-mark illustration ---------------- */
.ill-marks .cm{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:square;transition:transform .6s var(--ease) var(--d),stroke .3s}
.ill-marks .cm path{fill:none}
.tool:hover .ill-marks .cm{stroke:var(--accent)}
.tool:hover .ill-marks .cm:nth-of-type(1){transform:translate(-4px,-4px)}
.tool:hover .ill-marks .cm:nth-of-type(2){transform:translate(4px,-4px)}
.tool:hover .ill-marks .cm:nth-of-type(3){transform:translate(-4px,4px)}
.tool:hover .ill-marks .cm:nth-of-type(4){transform:translate(4px,4px)}
.dl-title{margin:0 0 8px;font-weight:700;font-size:14px;color:var(--muted)}

/* ---------------- feedback ---------------- */
.feedback{width:100%;max-width:1120px;margin:0 0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3.4vw,36px);box-shadow:var(--shadow-1)}
.fb-head h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.fb-head p{margin:8px 0 0;color:var(--muted)}
.fb-form{display:grid;gap:14px;min-width:0}
.stars{border:0;margin:0;padding:0;min-width:0}
.star-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.stars legend{font-weight:500;font-size:14px;margin-bottom:6px;padding:0}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{font-size:32px;line-height:1;color:var(--line-2);cursor:pointer;transition:color .15s,transform .25s var(--ease);padding:0 2px}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:#f5b400}
.stars label:hover{transform:scale(1.18)}
.stars input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.stars input:checked+label{animation:starPop .4s var(--ease)}
@keyframes starPop{50%{transform:scale(1.35)}}
.fb-field{display:grid;gap:6px;font-weight:500;font-size:14px;min-width:0}
.fb-field small{color:var(--faint);font-weight:400}
.fb-field input,.fb-field textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px 12px;background:var(--surface);font:inherit;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 8%,transparent)}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fb-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fb-status{margin:0;font-size:14px;color:var(--muted)}
.fb-status.ok{color:var(--ok-tx);font-weight:500}
.fb-status.err{color:var(--accent-text)}
.feedback.sent .fb-form{opacity:.6;pointer-events:none}
@media (max-width:880px){.feedback{grid-template-columns:1fr}.fb-row{grid-template-columns:1fr}}

.hp{position:absolute!important;width:1px;height:1px;margin:0;padding:0;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}

/* ---------------- about / SEO content ---------------- */
.tagline{font-weight:400}
h1.tagline{font-size:14.5px;margin:0}
.about{width:100%;max-width:1120px;margin:0 0 20px;padding:clamp(20px,3.4vw,36px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl)}
.about h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.about-lead{margin:10px 0 24px;color:var(--muted);max-width:70ch}
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.about-grid article{background:var(--surface-2);border-radius:var(--r-l);padding:18px}
.about-grid h3{margin:0 0 8px;font-size:16.5px;font-weight:700}
.about-grid p{margin:0;color:var(--muted);font-size:14.5px}
.faq-title{margin-top:32px!important}
.faq{margin-top:12px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:500;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-weight:700;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 16px;color:var(--muted);max-width:75ch}
@media (max-width:880px){.about-grid{grid-template-columns:1fr}}

/* ---------------- theme toggle ---------------- */
.top-end{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.theme-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text);cursor:pointer;
  transition:background .2s,transform .35s var(--ease)}
.theme-btn:hover{background:var(--surface-2);transform:rotate(-18deg)}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .i-sun{display:block}:root:not([data-theme="light"]) .theme-btn .i-moon{display:none}}

/* =========================================================
   v13 additions
   ========================================================= */
.theme-vt::view-transition-old(root),.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------------- tool cards: the nib from the logo ---------------- */
.ill .nib-ink{fill:currentColor}
/* 1 · cut contour: the red nib turns black and the knife cuts around it */
.ill-nc .nc-nib{fill:#ed2024;animation:ncInk 5.2s var(--ease) infinite}
.ill-nc .nc-cut{fill:none;stroke:#ed2024;stroke-width:1.05;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:ncCut 5.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ncInk{0%,14%{fill:#ed2024}26%,84%{fill:#111}96%,100%{fill:#ed2024}}
@keyframes ncCut{0%,22%{stroke-dashoffset:100;opacity:1}58%,84%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
/* 2 · bleed + marks: the red square grows past the cut, then the marks come in */
.ill-nb .nb-sq{fill:#ed2024}
.ill-nb .nb-nib{fill:#fff}
.ill-nb .nb-bleed{fill:#ed2024;opacity:.42;transform-box:fill-box;transform-origin:center;animation:nbBleed 5.2s var(--ease) infinite}
.ill-nb .nb-trim{fill:none;stroke:#111;stroke-width:1.2;stroke-dasharray:4 3;opacity:0;animation:nbTrim 5.2s var(--ease) infinite}
.ill-nb .nb-cm path{fill:none;stroke:#111;stroke-width:1.8;opacity:0;animation:nbMark 5.2s var(--ease) infinite;animation-delay:calc(var(--i) * 90ms)}
@keyframes nbBleed{0%,10%{transform:scale(1)}34%,86%{transform:scale(1.238)}100%{transform:scale(1)}}
@keyframes nbTrim{0%,24%{opacity:0}36%,86%{opacity:.85}96%,100%{opacity:0}}
@keyframes nbMark{0%,40%{opacity:0;transform:scale(.6)}52%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.ill-nb .nb-cm path{transform-box:fill-box;transform-origin:center}
/* 3 · varnish: a black varnish plate of the nib lands on the red nib */
.ill-nv .nv-red{fill:#ed2024}
.ill-nv .nv-plate{fill:#111;opacity:0;animation:nvPlate 5.2s var(--ease) infinite}
.ill-nv .nv-shadow{fill:#000;opacity:0;animation:nvShadow 5.2s var(--ease) infinite}
@keyframes nvPlate{0%,10%{opacity:0;transform:translate(-9px,-15px)}28%{opacity:.92;transform:translate(-9px,-15px)}50%,80%{opacity:.92;transform:translate(0,0)}92%{opacity:.92;transform:translate(-9px,-15px)}100%{opacity:0;transform:translate(-9px,-15px)}}
@keyframes nvShadow{0%,10%{opacity:0}28%{opacity:.22}50%,80%{opacity:0}92%{opacity:.22}100%{opacity:0}}
.tool:hover .ill-nc .nc-nib,.tool:hover .ill-nc .nc-cut,.tool:hover .ill-nb *,.tool:hover .ill-nv *{animation-duration:3.6s}
.tools .tool:nth-child(2) .ill *{animation-delay:-1.7s}
.tools .tool:nth-child(2) .ill .nb-cm path{animation-delay:calc(-1.7s + var(--i) * 90ms)}
.tools .tool:nth-child(3) .ill *{animation-delay:-3.4s}

/* ---------------- segmented control: the pill slides ---------------- */
.seg{position:relative}
.seg-ind{position:absolute;top:0;left:0;border-radius:9px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line);pointer-events:none;
  transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.seg-ind.instant{transition:none}
.seg label{z-index:1}
.seg.has-ind input:checked+span{background:transparent;box-shadow:none}
.seg input:disabled+span{opacity:.4;cursor:not-allowed}
.field.is-shown{animation:fieldIn .45s var(--ease) both}
@keyframes fieldIn{from{opacity:0;transform:translateY(-6px)}}

/* ---------------- settings + live preview ---------------- */
.params-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:22px;align-items:start}
.params-layout .params{grid-template-columns:1fr}
.live{position:sticky;top:14px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);padding:14px}
.live-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-weight:500;font-size:14px}
.live-state{font-size:12.5px;color:var(--muted);font-weight:400}
.live-box{position:relative;display:grid;place-items:center;min-height:220px;border-radius:var(--r-m);padding:12px;overflow:hidden}
.live-box canvas{display:block;max-width:100%;height:auto;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.live-box canvas.swap{animation:liveIn .45s var(--ease)}
@keyframes liveIn{from{opacity:.55}}
.live-box::after{content:"";position:absolute;top:12px;left:12px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);
  opacity:0;transition:opacity .2s;animation:spin .8s linear infinite}
.live-box.busy::after{opacity:1}
.live-note{margin:10px 0 0;font-size:12.5px;color:var(--faint);line-height:1.45}
.live-note.err{color:var(--warn-tx)}
@media (max-width:980px){.params-layout{grid-template-columns:1fr}.live{position:static;order:-1}}

/* ---------------- varnish fields ---------------- */
.picker{position:relative;max-width:100%;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);cursor:crosshair;line-height:0;touch-action:manipulation}
.picker canvas{width:100%;height:auto;display:block}
.loupe{position:absolute;left:0;top:0;width:88px;height:88px;border-radius:50%;pointer-events:none;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,-120%) scale(.6);
  transition:opacity .2s,transform .4s var(--ease);background-repeat:no-repeat;image-rendering:pixelated}
.picker.over .loupe{opacity:1;transform:translate(-50%,-120%) scale(1)}
.loupe::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;border:1px solid #fff;box-shadow:0 0 0 1px #000}
.swatches{display:flex;flex-wrap:wrap;gap:8px;min-height:32px;align-items:center;margin-top:10px}
.swatch{display:inline-flex;align-items:center;gap:8px;padding:3px 4px 3px 10px;border:1px solid var(--line-2);border-radius:99px;font-size:12.5px;background:var(--surface);animation:swIn .45s var(--ease) both}
@keyframes swIn{from{opacity:0;transform:scale(.6)}}
.swatch i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.swatch button{width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--muted);line-height:1;padding:0;font-size:16px;cursor:pointer}
.swatch button:hover{color:var(--text);background:var(--surface-2)}
.swatch-empty{font-size:13px;color:var(--faint)}
.checks{display:flex;flex-direction:column;max-height:264px;overflow:auto;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface)}
.checks label{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line)}
.checks label:last-child{border-bottom:0}
.checks label:hover{background:var(--surface-2)}
.checks input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.checks small{color:var(--faint);margin-inline-start:auto}
.filepick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filepick .fname{font-size:13px;color:var(--muted);word-break:break-all}
.field select,.field .txt{height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--text);font:inherit;max-width:320px;width:100%}

/* ---------------- result: the file itself ---------------- */
.preview-tools{flex-wrap:wrap;align-items:center}
.file-tabs{display:flex;gap:6px;flex-wrap:wrap}
.page-nav{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.preview-tools #zoomBtn{margin-inline-start:auto}
.preview-inner{display:grid;place-items:center}
#viewCanvas{display:block;max-width:none;box-shadow:0 1px 3px rgba(0,0,0,.14)}
#viewCanvas.reveal{animation:viewIn .7s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:scale(.985)}}
.view-busy{position:absolute;inset:0;display:grid;place-items:center}
.view-busy::after{content:"";width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.view-note{margin:10px 2px 0;font-size:12.5px;color:var(--faint)}

/* ---------------- toast ---------------- */
.toast{position:fixed;bottom:22px;left:50%;z-index:70;max-width:min(90vw,520px);padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--on-ink);
  font-size:14.5px;transform:translateX(-50%);animation:toastIn .45s var(--ease) both;transition:opacity .35s,transform .35s}
.toast.out{opacity:0;transform:translate(-50%,10px)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}}

/* ---------------- share ---------------- */
.share-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
.share-row .btn{gap:8px}
.share-row .btn.done{border-color:var(--ok-tx);color:var(--ok-tx)}

/* ---------------- hello popup ---------------- */
.popup{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,0);backdrop-filter:blur(0);transition:background .35s var(--ease),backdrop-filter .35s}
.popup.open{background:rgba(10,10,10,.42);backdrop-filter:blur(3px)}
.popup-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 26px 20px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-3);text-align:center;
  opacity:0;transform:translateY(18px) scale(.97);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.popup.open .popup-card{opacity:1;transform:none}
.popup.closing .popup-card{opacity:0;transform:translateY(10px) scale(.98)}
.popup-x{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.popup-x:hover{color:var(--text)}
.popup-logo{display:flex;justify-content:center;margin-bottom:14px}
.popup-logo .logo{width:150px;height:auto;color:var(--text)}
.popup-card h2{margin:0 0 10px;font-size:23px;font-weight:700;letter-spacing:-.01em}
.popup-card p{margin:0 0 10px;color:var(--muted);line-height:1.6}
.popup-small{font-size:12.5px;color:var(--faint)!important}
.popup-sign{color:var(--text)!important;font-weight:500;margin-top:14px!important}
.popup-sign small{font-size:12.5px;color:var(--faint);font-weight:400}
.popup-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 14px}
.popup-by{font-size:12.5px;color:var(--faint)!important;margin:0!important}
.popup-by a{color:var(--muted)}

/* ---------------- content pages ---------------- */
.about-sec{margin:0 0 26px}
.about-sec h2{font-size:20px!important;margin:22px 0 10px!important}
.about-sec h3{font-size:16px;margin:16px 0 6px}
.about-sec p,.about-sec li{color:var(--muted);line-height:1.75;max-width:75ch}
.about-sec b{color:var(--text);font-weight:500}
.about-sec ul,.about-sec ol{padding-inline-start:20px}
.about-sec .feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.about-sec .feat>div{background:var(--surface-2);border-radius:var(--r-l);padding:16px}
.about-sec .feat p{margin:6px 0 0;font-size:14.5px}
.about-sec .cards4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.about-sec .card-link{display:block;padding:16px;border-radius:var(--r-l);background:var(--surface-2);text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
.about-sec .card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.about-sec .card-link h3{margin:0 0 6px}
.about-sec .card-link p{margin:0 0 8px;font-size:14px}
.about-sec .card-link span{color:var(--accent-text);font-weight:500;font-size:14px}
.about-sec .ticks,.about-sec .check{list-style:none;padding:0}
.about-sec .ticks li,.about-sec .check li{position:relative;padding-inline-start:24px;margin-bottom:6px}
.about-sec .ticks li::before,.about-sec .check li::before{content:"";position:absolute;right:2px;top:.62em;width:10px;height:5px;border:solid var(--accent);border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)}
.more{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.more a{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.more a:hover{text-decoration-color:var(--accent)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:10px}
.foot-nav a{font-weight:400!important;text-decoration:none!important;color:var(--muted)!important}
.foot-nav a:hover,.foot-nav a[aria-current]{color:var(--text)!important}
@media (max-width:880px){.about-sec .feat,.about-sec .cards4{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ill-nc .nc-nib{fill:#111}
  .ill-nc .nc-cut{stroke-dashoffset:0}
}

/* the card pictures are printed matter: paper-light in both themes, so black stays black */
:root[data-theme="dark"] .ill-nc,:root[data-theme="dark"] .ill-nb,:root[data-theme="dark"] .ill-nv{background:#ecebe7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ill-nc,:root:not([data-theme="light"]) .ill-nb,:root:not([data-theme="light"]) .ill-nv{background:#ecebe7}}

/* ---------------- cards rise in 3D from below ---------------- */
.tool{animation:none}
.js-3d .r3d{transform-origin:50% 100%;transition:opacity .75s var(--ease) var(--rd,0s),transform 1.05s cubic-bezier(.16,1,.3,1) var(--rd,0s)}
.js-3d .r3d:not(.in){opacity:0;transform:perspective(1100px) rotateX(26deg) translateY(54px) scale(.965)}

/* ---------------- the boxes lower on the page: tilt toward the pointer, crop marks close in ---------------- */
.tilt{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s var(--ease)}
.tilt.tilting{transition:transform .12s linear,box-shadow .4s var(--ease)}
.tilt::before{content:"";position:absolute;inset:-4px;pointer-events:none;opacity:0;transition:inset .55s cubic-bezier(.16,1,.3,1),opacity .3s;
  --c:var(--text);
  background:
    linear-gradient(var(--c),var(--c)) top left/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 12px no-repeat}
.tilt:hover::before,.tilt:focus-visible::before{inset:-11px;opacity:1}
.tool.tilt::before{--c:var(--accent)}
.tilt:hover{box-shadow:var(--shadow-3)}
.about-sec .feat>div.tilt b,.about-sec .card-link.tilt h3,.about-grid article.tilt h3{display:inline-block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tilt:hover b,.about-sec .card-link.tilt:hover h3,.about-grid article.tilt:hover h3{transform:translateZ(18px)}
@media (prefers-reduced-motion:reduce){.js-3d .r3d:not(.in){opacity:1;transform:none}.tilt::before{display:none}}
@media (hover:none){.tilt::before{display:none}}

/* ---------------- v16: the name line — "הכנה לדפוס בקליק", rising in after the logo, then one click */
.tag-anim{font-size:15.5px;font-weight:500;color:var(--text);letter-spacing:-.005em;white-space:nowrap}
.tag-anim .tg-w{display:inline-block}
.tag-anim .tg-k{position:relative;color:var(--accent-text);font-weight:700}
.tg-click{position:absolute;inset-inline-end:-12px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  border:1.5px solid var(--accent);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .tag-anim .tg-w{animation:tgRise .62s cubic-bezier(.2,.75,.15,1) calc(1.15s + var(--d) * 120ms) both}
  .tag-anim .tg-k{animation:tgRise .62s cubic-bezier(.2,.75,.15,1) 1.39s both,tgPress .42s var(--ease) 2.25s}
  .tg-click{animation:tgRing .9s cubic-bezier(.2,.7,.2,1) 2.3s}
}
@keyframes tgRise{from{opacity:0;transform:translateY(.55em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -10% -20% -10%)}}
@keyframes tgPress{0%,100%{transform:none}35%{transform:scale(.9)}}
@keyframes tgRing{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.9)}}
.about>h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
@media (max-width:640px){.tag-anim{font-size:15px}}
.foot-privacy{margin:10px 0 0;font-size:12px;color:var(--faint)}