/* ══════════════════════════════════════════════════════════════════════════
   /tools + /tools/{slug} — free merchant tools (2026-11-06). Loaded after
   home.css + about.css + feature.css; uses their hm-* tokens (light/dark).
   Scoped to .tl. Logical properties, reduced-motion safe. Behaviour: tools.js.
   ══════════════════════════════════════════════════════════════════════════ */
.tl-hero{ padding-block-end:clamp(8px,1.5vw,20px); }
.tl-h1{ max-width:22ch; }
.tl-answer{ max-width:46rem; }
.tl-sec{ padding-block:clamp(12px,2vw,28px) clamp(32px,4vw,56px); }

/* the tool card: form | result */
.tl-app{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0; border-radius:var(--hm-r); background:var(--hm-card); border:1px solid var(--hm-line); overflow:hidden; }
@media (max-width:900px){ .tl-app{ grid-template-columns:minmax(0,1fr); } }
.tl-form{ display:grid; gap:16px; align-content:start; padding:clamp(18px,2.4vw,30px); border-inline-end:1px solid var(--hm-line); }
@media (max-width:900px){ .tl-form{ border-inline-end:0; border-block-end:1px solid var(--hm-line); } }
.tl-out{ position:relative; padding:clamp(18px,2.4vw,30px); background:var(--hm-card-2); min-height:320px; }

.tl-field{ display:grid; gap:7px; margin:0; padding:0; border:0; min-width:0; }
.tl-label{ font-size:14px; font-weight:800; color:var(--em-text); padding:0; }
.tl-hint{ font-size:12.5px; color:var(--em-muted); line-height:1.6; }
.tl-input{ width:100%; box-sizing:border-box; min-height:46px; padding:10px 14px; border-radius:14px; border:1px solid var(--hm-line); background:var(--hm-card);
  color:var(--em-text); font:inherit; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.tl-input:focus{ outline:none; border-color:var(--hm-gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--hm-gold) 22%,transparent); }
.tl-area{ min-height:92px; resize:vertical; line-height:1.7; }
.tl-ltr{ direction:ltr; text-align:left; }
.tl-num{ display:flex; align-items:stretch; }
.tl-num .tl-input{ border-start-end-radius:0; border-end-end-radius:0; direction:ltr; text-align:left; }
.tl-unit{ display:grid; place-items:center; min-width:52px; padding-inline:10px; border:1px solid var(--hm-line); border-inline-start:0; border-start-end-radius:14px; border-end-end-radius:14px;
  background:var(--hm-card-2); font-size:13px; font-weight:800; color:var(--em-muted); }
.tl-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
@media (max-width:560px){ .tl-grid2{ grid-template-columns:minmax(0,1fr); } }

/* pills, segments, checks */
.tl-pills, .tl-checks{ display:flex; flex-wrap:wrap; gap:8px; }
.tl-pill, .tl-check, .tl-seg__opt{ position:relative; cursor:pointer; }
.tl-pill input, .tl-seg__opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.tl-pill span{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border-radius:99px; border:1px solid var(--hm-line); background:var(--hm-card);
  font-size:14px; font-weight:700; transition:background-color .2s, border-color .2s, color .2s; }
.tl-pill input:checked + span{ color:var(--em-gold-ink); background:var(--hm-gold); border-color:var(--hm-gold); }
.tl-pill input:focus-visible + span, .tl-seg__opt input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in srgb,var(--hm-gold) 30%,transparent); }
.tl-check{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 12px; border-radius:12px; border:1px solid var(--hm-line); background:var(--hm-card); font-size:14px; font-weight:600; }
.tl-check input{ width:18px; height:18px; accent-color:var(--hm-gold); margin:0; }
.tl-seg{ display:flex; padding:4px; gap:4px; border-radius:16px; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.tl-seg__opt{ flex:1; }
.tl-seg__opt span{ display:grid; place-items:center; min-height:40px; padding:0 10px; border-radius:12px; font-size:14px; font-weight:800; color:var(--em-muted); text-align:center; transition:background-color .2s, color .2s; }
.tl-seg__opt input:checked + span{ color:var(--em-gold-ink); background:var(--hm-gold); }

.tl-hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.tl-go{ justify-self:start; gap:10px; }
.tl-go svg{ width:18px; height:18px; }
.tl-go[disabled]{ opacity:.6; pointer-events:none; }
.tl-note{ margin:0; font-size:12.5px; color:var(--em-muted); line-height:1.7; }
.tl-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* result states */
.tl-empty{ display:grid; place-items:center; align-content:center; gap:8px; min-height:280px; text-align:center; color:var(--em-muted); }
.tl-empty__ico{ width:64px; height:64px; display:grid; place-items:center; border-radius:20px; color:var(--hm-gold); background:color-mix(in srgb,var(--hm-gold) 12%,transparent); }
.tl-empty__ico svg{ width:28px; height:28px; }
.tl-empty b{ font-size:16px; color:var(--em-text); }
.tl-busy{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:280px; font-weight:700; color:var(--em-muted); }
.tl-busy[hidden], .tl-err[hidden], [data-tl-result][hidden], .tl-empty[hidden], .tl-warn[hidden]{ display:none; }
.tl-dots{ display:inline-flex; gap:5px; }
.tl-dots i{ width:9px; height:9px; border-radius:50%; background:var(--hm-gold); animation:tl-dot 1s infinite ease-in-out; }
.tl-dots i:nth-child(2){ animation-delay:.15s; } .tl-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes tl-dot{ 0%,80%,100%{ transform:scale(.5); opacity:.4; } 40%{ transform:none; opacity:1; } }
.tl-err, .tl-warn{ margin:0 0 12px; padding:12px 14px; border-radius:14px; font-size:14px; font-weight:600; line-height:1.7;
  color:var(--em-danger,#b42318); background:color-mix(in srgb,var(--em-danger,#b42318) 9%,transparent); border:1px solid color-mix(in srgb,var(--em-danger,#b42318) 25%,transparent); }

/* names */
.tl-names{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:560px){ .tl-names{ grid-template-columns:minmax(0,1fr); } }
.tl-name{ display:grid; gap:4px; padding:14px; border-radius:16px; background:var(--hm-card); border:1px solid var(--hm-line); animation:tl-in .45s cubic-bezier(.2,.8,.2,1) both; }
.tl-name__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tl-name b{ font-size:18px; font-weight:800; line-height:1.4; }
.tl-name__latin{ font-size:13px; color:var(--em-muted); direction:ltr; text-align:start; }
.tl-name__why{ font-size:13.5px; line-height:1.7; color:var(--em-text); }
.tl-link{ display:inline-flex; align-items:center; gap:6px; justify-self:start; margin-top:4px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; line-height:1.6; flex-wrap:wrap; }
.tl-link bdi{ direction:ltr; unicode-bidi:isolate; word-break:break-all; }
.tl-link--ok{ color:var(--hm-good); background:color-mix(in srgb,var(--hm-good) 12%,transparent); }
.tl-link--no{ color:var(--em-muted); background:color-mix(in srgb,var(--em-muted) 12%,transparent); }
@keyframes tl-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.tl-mini{ flex:none; min-height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--hm-line); background:var(--hm-card-2); color:var(--em-text); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; }
.tl-mini:hover{ border-color:var(--hm-gold); color:var(--hm-gold); }

/* description blocks */
.tl-blocks{ display:grid; gap:12px; }
.tl-block{ padding:14px 16px; border-radius:16px; background:var(--hm-card); border:1px solid var(--hm-line); animation:tl-in .45s cubic-bezier(.2,.8,.2,1) both; }
.tl-block__h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:12.5px; font-weight:800; color:var(--em-muted); }
.tl-block__h small{ font-weight:600; }
.tl-block p{ margin:0; font-size:15px; line-height:1.9; white-space:pre-line; }
.tl-block ul{ margin:0; padding-inline-start:20px; display:grid; gap:4px; font-size:15px; line-height:1.8; }
.tl-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:14px 16px; border-radius:16px;
  border:1px solid color-mix(in srgb,var(--hm-gold) 40%,var(--hm-line)); background:color-mix(in srgb,var(--hm-gold) 8%,var(--hm-card)); font-size:14px; font-weight:700; line-height:1.7; }

/* calculator */
.tl-big{ display:grid; gap:4px; padding:18px 20px; border-radius:18px; background:var(--hm-card); border:1px solid color-mix(in srgb,var(--hm-gold) 40%,var(--hm-line)); }
.tl-big small{ font-size:13px; font-weight:700; color:var(--em-muted); }
.tl-big b{ font-size:clamp(30px,3.6vw,44px); font-weight:800; line-height:1.15; color:var(--hm-gold); }
.tl-big__sub{ font-size:13.5px; color:var(--em-muted); }
.tl-kv{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0 0; }
.tl-kv div{ padding:12px 14px; border-radius:14px; background:var(--hm-card); border:1px solid var(--hm-line); }
.tl-kv dt{ font-size:12.5px; font-weight:700; color:var(--em-muted); }
.tl-kv dd{ margin:4px 0 0; font-size:17px; font-weight:800; }
.tl-kv dd.is-neg{ color:var(--em-danger,#b42318); }
.tl-split{ margin-top:16px; }
.tl-split__h{ display:block; margin-bottom:8px; font-size:13.5px; }
.tl-bar{ display:flex; height:16px; border-radius:99px; overflow:hidden; background:var(--hm-line); }
.tl-bar i{ display:block; height:100%; width:var(--w,0%); background:var(--c); transition:width .35s cubic-bezier(.2,.8,.2,1); }
.tl-legend{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--em-muted); }
.tl-legend li{ display:inline-flex; align-items:center; gap:6px; }
.tl-legend i{ width:10px; height:10px; border-radius:3px; background:var(--c); }
.tl-legend b{ color:var(--em-text); }
.tl-warn{ margin-top:14px; margin-bottom:0; }

/* policy document */
.tl-doc__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.tl-doc__acts{ display:flex; gap:8px; }
.tl-doc{ max-height:640px; overflow:auto; padding:20px 22px; border-radius:16px; background:var(--hm-card); border:1px solid var(--hm-line); font-size:14.5px; line-height:1.95; }
.tl-doc h3{ margin:0 0 4px; font-size:18px; font-weight:800; }
.tl-doc h4{ margin:16px 0 4px; font-size:15px; font-weight:800; }
.tl-doc p{ margin:0 0 6px; }
.tl-doc ul{ margin:0 0 6px; padding-inline-start:20px; }
.tl-doc .tl-doc__date{ color:var(--em-muted); font-size:13px; }

/* barcode */
.tl-bc{ display:grid; place-items:center; min-height:260px; padding:20px; border-radius:16px; background:#fff; border:1px solid var(--hm-line); }
.tl-bc img{ display:block; max-width:100%; height:auto; max-height:300px; }
.tl-out--bc .tl-err{ margin-top:12px; }

/* hub */
.tl-hub{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:1000px){ .tl-hub{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .tl-hub{ grid-template-columns:minmax(0,1fr); } }
.tl-card{ display:grid; gap:10px; align-content:start; padding:22px; border-radius:var(--hm-r); text-decoration:none; color:var(--em-text); background:var(--hm-card); border:1px solid var(--hm-line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s; }
.tl-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--hm-gold) 50%,var(--hm-line)); }
.tl-card__ico{ width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:var(--em-gold-ink); background:var(--hm-gold); }
.tl-card__ico svg{ width:24px; height:24px; }
.tl-card b{ font-size:18px; font-weight:800; }
.tl-card p{ margin:0; font-size:14px; line-height:1.85; color:var(--em-muted); }
.tl-card__go{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:var(--hm-gold); }
.tl-card__go svg{ width:16px; height:16px; }
[dir=rtl] .tl-card__go svg{ transform:scaleX(-1); }

/* how to */
.tl-steps{ list-style:none; margin:0 0 clamp(10px,2vw,24px); padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media (max-width:900px){ .tl-steps{ grid-template-columns:minmax(0,1fr); } }
.tl-steps li{ display:flex; align-items:flex-start; gap:12px; padding:18px; border-radius:var(--hm-r); background:var(--hm-card); border:1px solid var(--hm-line); font-size:14.5px; font-weight:600; line-height:1.75; }
.tl-steps__no{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px; font-weight:800; color:var(--em-gold-ink); background:var(--hm-gold); }
.tl-know{ grid-template-columns:minmax(0,1fr); }
.tl-know .ftx-sec__txt{ max-width:52rem; }

@media (prefers-reduced-motion: reduce){
  .tl *, .tl *::before, .tl *::after{ animation:none !important; transition:none !important; }
}
.tl-doc ul, .tl-block ul{ list-style:disc; }
.tl-doc li, .tl-block li{ display:list-item; }