/* Free tool pages: logo clear space and team email signature. Sits on top of site.css. Manrope and Geist only. */
.ftcrumb{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;font-size:14px;line-height:1.4;color:var(--soft);margin-bottom:14px}
.ftcrumb a{text-decoration:underline;text-underline-offset:3px}
.ftcrumb span[aria-hidden]{opacity:.6}
.fthero .h1{font-size:clamp(40px,min(6vw,12svh),84px);line-height:1.08}
.ftool [hidden]{display:none!important}
.ftool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:14px;align-items:start;text-align:left}
.ftp,.fts,.ftview,.ftacts{min-width:0}
.ftp{background:var(--wall);border-radius:var(--r3);padding:clamp(18px,2.4vw,30px);display:grid;gap:18px}
.fts{background:var(--wall);border-radius:var(--r3);padding:clamp(14px,2vw,26px);display:grid;gap:16px;position:sticky;top:78px}
.fg{display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0}
.fg>label,.fg>.lbl,.fg>legend{font-size:15px;font-weight:600;line-height:1.35;color:var(--chalk);padding:0}
.ftnote{font-size:14px;line-height:1.45;color:#D4D9CF;margin:0}
.ftgroup{display:grid;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.ftgroup>h3{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0;padding:0}
.ftwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ftool input[type=text],.ftool input[type=url],.ftool input[type=email],.ftool input[type=tel],.ftool textarea,.ftool select{width:100%;min-height:48px;font:inherit;font-size:16px;line-height:1.4;color:var(--chalk);background:var(--ink);border:1px solid var(--line2);border-radius:var(--r1);padding:10px 14px}
.ftool textarea{min-height:150px;resize:vertical;font-family:Manrope,system-ui,sans-serif;font-size:15px}
.ftool select{appearance:auto}
.ftool ::placeholder{color:#9EA39A;opacity:1}
.ftool input:focus,.ftool textarea:focus,.ftool select:focus{outline:2px solid var(--chalk);outline-offset:1px;border-color:var(--chalk)}
.ftool input[type=range]{width:100%;accent-color:var(--chalk);min-height:28px}
.ftool input[type=color]{width:64px;height:44px;padding:2px;background:var(--ink);border:1px solid var(--line2);border-radius:var(--r1);cursor:pointer}
.ftool .chips{display:flex;flex-wrap:wrap;gap:7px}
.ftool .chip:focus-visible,.ftool .btn:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.ftool .chip{min-height:24px}
.ftrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ftcheck{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.ftcheck input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--chalk)}
.ftnum{font-family:Geist,Manrope,sans-serif;font-weight:600}
.ftview{position:relative;border-radius:var(--r2);overflow:hidden;display:grid;place-items:center;min-height:220px;background-color:#2A2D2A;background-image:linear-gradient(45deg,#3A3E3A 25%,transparent 25%,transparent 75%,#3A3E3A 75%),linear-gradient(45deg,#3A3E3A 25%,transparent 25%,transparent 75%,#3A3E3A 75%);background-size:20px 20px;background-position:0 0,10px 10px;transition:box-shadow .2s}
.ftview.drag{box-shadow:inset 0 0 0 2px var(--chalk)}
.ftview img{margin:0;width:100%;height:auto;max-height:min(68svh,620px);object-fit:contain;display:block}
.ftview img.pick{cursor:crosshair}
.ftout{font-size:16px;line-height:1.45;margin:0}
.ftstat{min-height:1.45em;font-size:14px;line-height:1.45;color:#D4D9CF;margin:0}
.ftstat.bad{color:#FFC9B8}
.ftacts{display:grid;gap:12px}
.ftacts .btn{white-space:normal;text-align:center}
.ftacts .rowb{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.ftsig{width:100%;background:#fff;border-radius:var(--r2);overflow:hidden}
.ftsig iframe{display:block;width:100%;height:190px;border:0;background:#fff;pointer-events:none}
.ftsample{font-size:14px;line-height:1.45;margin:0;color:#D4D9CF}
.ftnav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.ftcta{margin-top:14px;padding:clamp(28px,3.6vw,48px)}
.ftcta .h2{font-size:clamp(28px,3.4vw,44px)}
/* how-to under the tool */
.ftprose{width:min(760px,100%);margin-inline:auto;text-align:left;display:grid;gap:16px;font-size:18px;line-height:1.55;color:#E2E6DD}
.ftprose h2{font-size:clamp(28px,3.4vw,42px);line-height:1.14;letter-spacing:-.03em;color:#fff;margin:22px 0 0;padding-bottom:.08em}
.ftprose h2:first-child{margin-top:0}
.ftprose h3{font-size:clamp(20px,2vw,24px);line-height:1.25;letter-spacing:-.02em;color:#fff;margin:10px 0 0;padding-bottom:.06em}
.ftprose p,.ftprose ol,.ftprose ul{margin:0}
.ftprose ol,.ftprose ul{padding-left:1.3em;display:grid;gap:8px}
.ftprose a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftprose strong{color:#fff;font-weight:600}
.ftprose .fttest{background:var(--wall);border-radius:var(--r2);padding:clamp(16px,2vw,24px);display:grid;gap:10px;box-shadow:inset 0 0 0 1px var(--line)}
.fttablew{overflow-x:auto}
.ftprose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.ftprose th,.ftprose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.ftprose th{color:#fff;font-weight:600}
@media (max-width:900px){
  .ftool{grid-template-columns:minmax(0,1fr)}
  .ftool.logo .fts{display:contents}
  .ftool.logo .ftview{order:1;position:sticky;top:64px;z-index:5;min-height:0;box-shadow:0 12px 30px -14px #000}
  .ftool.logo .ftview img{max-height:34svh}
  .ftool.logo .ftp{order:2}
  .ftool.logo .ftacts{order:3;background:var(--wall);border-radius:var(--r3);padding:16px}
  .ftool.sig .fts{position:static}
}
@media (max-width:480px){
  .ftwo{grid-template-columns:1fr}
  .ftacts .btn{width:100%}
  .ftprose{font-size:17px}
}