/* The free tools (/tools/). Uses the site's tokens from site.css. */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13.5px; color: var(--text-3); }
.crumb a { color: var(--text-2); text-decoration: none; }
.crumb a:hover { color: var(--text); }

.tool { margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3.5vw, 32px); border-radius: var(--radius); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.tool-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 5vw, 48px) 20px; border-radius: 14px; border: 1.5px dashed var(--line-2); text-align: center; transition: border-color 0.2s, background 0.2s; }
.tool-drop.over { border-color: var(--aqua); background: var(--aqua-dim); }
.tool-drop-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.tool-choose { cursor: pointer; }
.tool-file { font-weight: 500; overflow-wrap: anywhere; }
.tool-opts { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.tool-opts:empty { display: none; }
.opt { display: grid; gap: 6px; font-size: 13px; color: var(--text-3); }
.opt select, .opt input { height: 38px; min-width: 130px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg-3); color: var(--text); font: 400 14.5px var(--sans); box-shadow: inset 0 0 0 1px var(--line); }
.tool-work .cta { margin-top: 4px; }
.tool-progress { margin-top: 18px; }
.tool-bar { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.tool-bar span { display: block; height: 100%; width: 0; background: var(--aqua); transition: width 0.2s; }
.tool-progress .fine { margin-top: 8px; }
.tool-error { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 92, 79, 0.1); color: #ff8a80; font-size: 14.5px; }
.tool-out { margin-top: 22px; }
.tool-out video, .tool-out img { max-height: 420px; border-radius: 12px; background: #000; }
.tool-out audio { width: 100%; }
.tool-out .cta { margin-top: 14px; }
.tool-privacy { margin-top: 18px; }

.tool-doc { margin-top: clamp(40px, 6vw, 64px); }
.tool-doc h2 { margin-top: 0; }
.tool-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.app-box { margin-top: clamp(40px, 6vw, 64px); }
.app-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.app-box p + p { color: var(--text-2); }
.app-box .cta { margin-top: 18px; }
.tool-cards { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border-radius: 14px; text-decoration: none; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s, transform 0.2s; }
.tool-cards a:hover { box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.tool-cards b { color: var(--text); font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; }
.tool-cards span { font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 860px) { .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tool-cards { grid-template-columns: minmax(0, 1fr); } }