/* Free tool pages (/photoshop-arabic, /arabic-numbers, /fix-keyboard). Tokens come from site.css. */
.tool-page { padding-block: 2.5rem 4rem; display: grid; gap: 3rem; }
.tool-head { display: grid; gap: .8rem; max-width: 44rem; }
.tool-head h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
.tool-head p { color: var(--muted); font-size: 1.1rem; }
.eyebrow { font: 600 .82rem/1 var(--font-body); color: var(--accent); letter-spacing: .03em; }
.keys { display: inline-flex; gap: .15rem; direction: ltr; unicode-bidi: isolate; vertical-align: baseline; }

.tool { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.tool-io { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.tool-io label { display: grid; gap: .45rem; font-weight: 600; font-size: .95rem; }
.tool textarea { min-height: 9rem; font: 600 1.25rem/1.7 var(--font-body); resize: vertical; unicode-bidi: plaintext; }
.tool textarea[readonly] { background: var(--raised); }
.tool textarea.ltr-out { direction: ltr; text-align: left; }
.tool .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tool .hint { color: var(--muted); font-size: .9rem; }

.upsell { display: grid; gap: 1rem; padding: clamp(1.2rem, 3.5vw, 2rem); border-radius: 20px; border: 2px solid var(--accent); background: var(--accent-soft); }
.upsell h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
.upsell p { color: var(--ink); }
.upsell .row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.upsell .note { color: var(--muted); font-size: .92rem; }

.steps { display: grid; gap: .8rem; counter-reset: step; padding: 0; margin: 0; list-style: none; max-width: 46rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--raised); color: var(--accent); font: 700 .95rem/1 var(--font-display); }
.tool-section { display: grid; gap: 1rem; }
.tool-section h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.tool-section > p { color: var(--muted); max-width: 46rem; }

.faq { border-top: 1px solid var(--line); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 1.1rem; }
.faq summary { cursor: pointer; font: 600 1.05rem/1.6 var(--font-body); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: .7rem; color: var(--muted); }

.other-tools { display: flex; flex-wrap: wrap; gap: .6rem; }
.other-tools a { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-size: .95rem; }
.other-tools a:hover { border-color: var(--accent); }
.latin-gib { font-family: var(--font-mono); color: var(--accent); unicode-bidi: isolate; white-space: nowrap; }