/* Tool pages (add-bridges-to-svg.html and the other drop-a-file pages): a help-style page
   whose first screen is a place to drop a file. Built on legal.css; the drop zone hands
   the file to the editor through svg-handoff.js. */
.hero .eyebrow{display:inline-block;margin:0 0 14px;color:var(--red);font-size:14px;font-weight:600}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  max-width:720px;min-height:200px;margin-top:28px;padding:28px 24px;border:2px dashed rgba(46,74,56,.45);
  border-radius:12px;background:var(--paper);text-align:center;cursor:pointer;
  transition:background .15s,border-color .15s}
.drop:hover,.drop.over,.drop:focus-within{border-color:var(--pine);background:#E2E7DB}
.drop-main{font-size:22px;font-weight:700;line-height:1.3;color:var(--ink)}
.drop-sub{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.drop-note{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}
.drop-msg{min-height:1.4em;color:var(--red);font-size:13px;font-weight:600;line-height:1.4}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.doc ol.steps{padding-left:22px}
.doc ol.steps li{margin:10px 0}
.doc .also{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px}
@media(max-width:620px){.drop{min-height:170px;padding:24px 18px}
.drop-main{font-size:19px}}
/* Paper lace generator (paper-lace-generator.html): the first screen is a button into the
   work area and a finished sample, not a drop zone. */
.lace-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 48px;align-items:center}
.lace-hero-img{display:block;width:100%;max-width:440px;height:auto;justify-self:center;border-radius:6px}
.lace-cta{display:inline-block;margin-top:22px;padding:13px 26px;border-radius:999px;background:var(--pine);color:#fff;
  font-weight:600;font-size:16px;text-decoration:none}
.lace-cta:hover{background:var(--ink)}
.lace-cta:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.doc .lace-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.doc .lace-gallery figure{margin:0}
.doc .lace-gallery img{border-radius:6px}
@media(max-width:820px){.lace-hero{grid-template-columns:minmax(0,1fr)}.lace-hero-img{max-width:360px}}
@media(max-width:620px){.doc .lace-gallery{grid-template-columns:minmax(0,1fr)}}
/* All tools (tools.html, 10-28): two groups of cards, each card a picture of the tool at work,
   its name, one line and a Free to try tag. Pictures are 800x600 and keep that box. */
.tools-hub{padding:20px clamp(20px,6vw,88px) 90px}
.tools-hub h2{font-size:24px;margin:40px 0 6px}
.tools-hub h2::after{content:'';display:block;width:34px;height:3px;background:var(--red);margin-top:8px}
.tools-lead{margin:10px 0 0;color:var(--muted)}
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1280px;margin-top:22px}
.tcard{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.tcard:hover{border-color:rgba(46,74,56,.45);box-shadow:0 8px 24px rgba(27,42,33,.10)}
.tcard:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.tcard img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper);border-bottom:1px solid var(--line)}
.tcard-body{display:flex;flex-direction:column;flex:1;gap:6px;padding:16px 18px 18px}
.tcard-name{font-size:17px;font-weight:700;line-height:1.3}
.tcard-text{flex:1;color:#35483C;font-size:14px;line-height:1.55}
.tcard-tag{align-self:flex-start;margin-top:8px;padding:3px 9px;border-radius:999px;background:#D9DED2;color:var(--pine);
  font-size:12px;font-weight:600;line-height:1.4}
.tools-pay{max-width:720px;margin:46px 0 0;color:var(--muted);font-size:14px}
@media(max-width:1000px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tcards{grid-template-columns:minmax(0,1fr)}}