/* /free-tools/ | page styles, prefixed .tools-* | logical properties only | no text under 13px */
.tools-promise{box-shadow:var(--shadow-3)}
.tools-ticks{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.tools-ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.tools-ticks .icon{flex:none;color:var(--ok);margin-block-start:3px}
.tools-tabs{margin-block-end:var(--s-6);max-inline-size:100%;flex-wrap:wrap;border-radius:var(--r-lg)}
.tools-tabs button{min-block-size:44px}
.tools-panel[hidden]{display:none}
.tools-split{align-items:start}
.tools-checks{display:flex;flex-direction:column;gap:10px}
.tools-checks .check{align-items:flex-start}
.tools-error{margin:var(--s-3) 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-ink);font-size:var(--fs-14)}
.tools-error[hidden]{display:none}
.tools-fake-btn{align-self:flex-start;cursor:default;pointer-events:none}
.tools-sum{margin:0;font-weight:var(--fw-semibold);color:var(--ink)}
#pv-device .device-screen{min-block-size:280px}
#pv-device[dir="rtl"] .device-screen{text-align:start}
.tools-cta{max-inline-size:640px}
.tools-cta p{max-inline-size:56ch}
.tools-btn-light{background:var(--white);color:var(--primary-ink);border-color:var(--white)}
.tools-btn-light:hover{background:var(--sky);color:var(--primary-ink)}
.feature .badge-row{margin-block-start:2px}
.feature .link-btn{margin-block-start:auto}
@media (max-width:520px){.tools-tabs{display:flex;flex-direction:column;inline-size:100%;border-radius:var(--r-md)}.tools-tabs button{inline-size:100%}}
/* closed details (what "free" means) and the three short groups of other tools */
.fold{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden;margin-block-start:var(--s-4)}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:14px 18px;font-weight:var(--fw-semibold);font-size:var(--fs-16);color:var(--ink);min-block-size:52px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";inline-size:10px;block-size:10px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);transform:rotate(45deg);flex:none;margin-inline-end:4px;transition:transform var(--dur-fast) var(--ease)}
.fold[open]>summary::after{transform:rotate(225deg)}
.fold>summary:hover{background:var(--card-2)}
.fold>summary:focus-visible{box-shadow:inset var(--shadow-focus)}
.fold>.fold-in{padding:0 18px 16px;color:var(--ink-2)}
.tools-free-fold{max-inline-size:560px}
.tools-free-fold .tools-ticks{margin-block-start:0}
.tools-group{margin:var(--s-6) 0 var(--s-3)}
.tools-group:first-of-type{margin-block-start:0}
/* "Keep your result": the optional lead card (public/assets/site/lead-card.js, POST /api/leads). Hidden in the HTML until a tool has shown a result (the script un-hides it). */
.lead-card{max-inline-size:640px;margin-block-start:var(--s-6)}
.lead-card[hidden],.lead-ok[hidden]{display:none}
.lead-card .check{align-items:flex-start;min-block-size:44px;padding-block:6px}
.lead-card .check input{margin-block-start:2px;flex:none}
.lead-card .btn{min-block-size:44px}
.lead-hp{position:absolute;inset-inline-start:-10000px;inline-size:1px;block-size:1px;overflow:hidden}
.lead-ok{max-inline-size:640px;margin-block-start:var(--s-6)}
/* flagged blocks stay hidden until site-flags.js un-hides them, even where a class sets display */
[data-flag][hidden],[data-flag-off][hidden]{display:none!important}

/* result loops (2026-10-08): each of the first five tool tiles plays a 3-second loop of its own result before anything is pressed (free-tools-play.js, loaded lazily).
   It plays once when the tile is seen and again on hover, focus or the Replay button. Under reduced motion every loop is its final picture. Transform and opacity only. Tokens only. */
.tl-loop{position:relative;block-size:104px;overflow:hidden;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--border);color:var(--ink);font-size:13px;line-height:1.35}
.tl-has-loop .tl-loop{grid-column:1 / -1;grid-row:1;margin-block-end:var(--s-2)}
.tl-has-loop .tl-ic{grid-row:2 / span 2}
@media (min-width:1000px){.tl-has-loop .tl-loop,.tl-has-loop .tl-ic{grid-row:auto}}
.tl-replay{margin-block-start:var(--s-3);min-block-size:44px}
.fl{position:absolute;inset:0;display:grid;align-content:center;gap:6px;padding:10px 12px}
.fl-tag{position:absolute;inset-block-start:6px;inset-inline-end:8px;padding:0 8px;border-radius:var(--r-pill);background:var(--gold-soft,var(--primary-soft));color:var(--ink);font-weight:var(--fw-semibold);font-size:13px}
/* site preview assembling */
.fl-bar{position:absolute;inset-block-start:0;inset-inline:0;display:flex;gap:4px;align-items:center;block-size:18px;padding-inline:8px;background:var(--border)}
.fl-bar i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--muted)}
.fl-pv{padding-block-start:26px}
.fl-h{font:700 15px/1.2 var(--font-serif)}
.fl-l{display:block;block-size:6px;border-radius:3px;background:var(--border-strong);transform-origin:0 50%}
:root[dir="rtl"] .fl-l,:root[dir="rtl"] .fl-line{transform-origin:100% 50%}
.fl-l1{inline-size:80%}
.fl-l2{inline-size:55%}
.fl-btn{justify-self:start;padding:1px 10px;border-radius:var(--r-pill);background:var(--ok);color:var(--on-primary);font-weight:var(--fw-semibold)}
.is-on .fl-h{animation:flPop .4s ease .2s backwards}
.is-on .fl-l1{animation:flGrow .5s ease .7s backwards}
.is-on .fl-l2{animation:flGrow .5s ease 1.1s backwards}
.is-on .fl-btn{animation:flPop .4s ease 1.7s backwards}
/* a resume line turning from weak to strong */
.fl-rs{gap:8px}
.fl-row{display:flex;gap:8px;align-items:center;margin:0}
.fl-row em{flex:none;min-inline-size:3.2em;font-style:normal;font-weight:var(--fw-semibold);color:var(--muted)}
.fl-weak span{position:relative;color:var(--muted)}
.fl-weak span::after{content:"";position:absolute;inset-inline:0;inset-block-start:52%;block-size:2px;background:var(--danger-ink);transform-origin:0 50%}
:root[dir="rtl"] .fl-weak span::after{transform-origin:100% 50%}
.fl-strong{padding:3px 8px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok-ink);font-weight:var(--fw-semibold)}
.fl-strong em{color:var(--ok-ink)}
.is-on .fl-weak span::after{animation:flGrow .5s ease .6s backwards}
.is-on .fl-strong{animation:flPop .5s ease 1.4s backwards}
/* the verdict card with a scan line */
.fl-ev{gap:5px}
.fl-evh{font-size:13px;color:var(--warn-ink)}
.fl-w{display:block;padding:2px 8px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn-ink)}
.fl-scan{position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;background:var(--primary);box-shadow:0 0 12px 3px var(--primary-soft);opacity:0}
.is-on .fl-scan{animation:flScan 1.6s ease-in-out .1s both}
.is-on .fl-w1{animation:flPop .4s ease .7s backwards}
.is-on .fl-w2{animation:flPop .4s ease 1.2s backwards}
/* route pins lighting */
.fl-rt{grid-auto-flow:column;align-items:center;justify-content:space-around;padding-block-start:18px}
.fl-line{position:absolute;inset-inline:18%;inset-block-start:44%;block-size:3px;border-radius:2px;background:var(--primary);transform-origin:0 50%}
.fl-pin{position:relative;display:grid;justify-items:center;gap:4px}
.fl-dot{inline-size:20px;block-size:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--primary);border:2px solid var(--card)}
.fl-pin em{font-style:normal;font-weight:var(--fw-semibold)}
.is-on .fl-line{animation:flGrow 1.6s ease .2s backwards}
.is-on .fl-pin{animation:flPop .45s ease var(--d,0s) backwards}
.is-on .fl-dot{animation:flLight .5s ease var(--d,0s) backwards}
/* a sponsor lookup chip turning into "on a register" */
.fl-sp{justify-items:start;align-content:center;gap:8px}
.fl-sp b{font-size:14px}
.fl-chip{display:grid}
.fl-chip span{grid-area:1 / 1;padding:2px 12px;border-radius:var(--r-pill);font-weight:var(--fw-semibold)}
.fl-c1{background:var(--border);color:var(--ink-2);opacity:0}
.fl-c2{background:var(--ok-bg);color:var(--ok-ink)}
.fl-c2::before{content:"\2713";margin-inline-end:.4em}
.is-on .fl-c1{animation:flOut 1.4s ease both}
.is-on .fl-c2{animation:flPop .5s ease 1.4s backwards}
@keyframes flPop{from{opacity:0;transform:translateY(6px) scale(.96)}}
@keyframes flGrow{from{transform:scaleX(0)}}
@keyframes flScan{0%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(98px)}100%{opacity:0;transform:translateY(98px)}}
@keyframes flLight{from{opacity:.3}}
@keyframes flOut{0%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tl-loop *{animation:none!important;transition:none!important}}