/* Tool landing pages (/compress-pdf/, /heic-to-jpg/, …): the how-to, notes, privacy box, FAQ and
   related tools under the tool itself. Tokens and the tool UI come from /style.css. */

.guide {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  max-width: 68rem;
  margin: 0 auto;
  padding-top: var(--space-section);
}
.guide h2 { margin: 0 0 1rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; }
.guide p, .guide li { max-width: 68ch; color: var(--ink-2); }
.guide p { margin: 0 0 0.75rem; }
.guide b, .guide strong { color: var(--ink); }
.guide a { color: var(--accent); text-underline-offset: 3px; }

.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.guide-steps li {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  counter-increment: step;
}
.guide-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  color: var(--accent);
  font: 600 0.8rem var(--font-mono);
}

.guide-notes { display: grid; gap: 0.6rem; margin: 0; padding-left: 1.2rem; }
.guide-notes li::marker { color: var(--accent); }

.guide-private {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 6%, var(--card));
}
.guide-private h2 { display: flex; align-items: center; gap: 0.6rem; }
.guide-private h2 .icon { color: var(--ok); }
.guide-private a { color: var(--ok); }

.faq { display: grid; gap: 0.6rem; }
.faq h2 { margin-bottom: 0.4rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color var(--duration-fast);
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: var(--ink);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--accent); font: 600 1.1rem/1.2 var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 1.25rem 1.1rem; }

.related ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.related a {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.related a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }