/* Shared tool pages — mobile (≤767px) */

.tool-page {
  padding: 12px 0 28px;
}

.tool-breadcrumb {
  margin-bottom: 10px;
  font-size: 0.72rem;
  gap: 6px;
}

.tool-hero,
.cp-hero {
  margin-bottom: 16px;
}

.tool-hero__eyebrow,
.cp-hero-eyebrow {
  font-size: 0.65rem;
  margin-bottom: 6px;
}

.tool-hero__title,
.cp-hero h1 {
  font-size: clamp(1.25rem, 5.5vw, 1.5rem);
  margin-bottom: 8px;
  line-height: 1.2;
}

.tool-hero__lead,
.cp-hero p {
  font-size: 0.84rem;
  line-height: 1.55;
}

.tool-board,
.yt-board,
.hs-board,
.ym-board,
.ocr-board,
.dropper-board {
  padding: 12px 10px;
  margin-bottom: 16px;
  border-radius: 10px;
}

.info-block {
  padding: 20px 0;
}

.info-block__head {
  gap: 4px;
  margin-bottom: 10px;
}

.info-block__label {
  font-size: 0.68rem;
}

.info-block__head h2 {
  font-size: 1.1rem;
}

.info-block__intro {
  font-size: 0.84rem;
  margin-bottom: 14px;
}

.info-step {
  padding: 12px;
  gap: 8px;
  border-radius: 10px;
}

.info-step__num {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  border-radius: 8px;
}

.info-step h3 {
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.info-step p {
  font-size: 0.82rem;
  line-height: 1.5;
}

.info-tile {
  padding: 12px;
  border-radius: 10px;
}

.info-tile h3 {
  font-size: 0.92rem;
  margin-bottom: 6px;
}

.info-tile p {
  font-size: 0.82rem;
}

.info-tip {
  padding: 10px 12px;
  font-size: 0.84rem;
}

.info-faq__item summary {
  padding: 12px 0;
  font-size: 0.86rem;
}

.info-faq__item p {
  font-size: 0.82rem;
  margin-bottom: 12px;
}

/* Reusable compact button grids (optional class on tool markup) */
.tool-action-grid {
  display: grid;
  gap: 6px;
  width: 100%;
}

.tool-action-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-action-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-action-grid__full {
  grid-column: 1 / -1;
}

.tool-action-grid .btn,
.tool-action-grid .cp-btn,
.tool-action-grid .cp-btn-outline {
  width: 100%;
  min-height: 38px;
  padding: 0 8px;
  font-size: 0.74rem;
}

.tool-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tool-stack .btn,
.tool-stack .cp-btn,
.tool-stack .cp-btn-outline {
  width: 100%;
  min-height: 40px;
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
textarea,
select {
  font-size: 16px; /* prevent iOS zoom on focus */
}

@media (max-width: 380px) {
  .tool-action-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-action-grid--3 > *:nth-child(3) {
    grid-column: 1 / -1;
  }
}