/* Mobile-only homepage corrections. Keep desktop behavior unchanged. */
@media (max-width: 640px) {
  /* Keep the hero eyebrow on one line on common mobile widths. */
  .se-eyebrow {
    gap: 4px;
    padding: 5px 8px;
    font-size: 9px;
    letter-spacing: 0.055em;
    white-space: nowrap;
  }

  .se-eyebrow .material-symbols-outlined {
    font-size: 13px;
  }

  /* Slightly reduce the mobile hero title only. */
  .se-hero-copy h1 {
    font-size: clamp(20px, 5.6vw, 23px);
    line-height: 1.08;
  }

  /* Center the mobile workflow kicker while leaving the workflow rows unchanged. */
  .se-mobile-workflow-kicker {
    text-align: center;
  }

  /* Keep all three trust signals on one compact row. */
  .se-trust-signals {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px 7px;
    font-size: 8.5px;
    line-height: 1.2;
  }

  .se-trust-signals span {
    gap: 2px;
    white-space: nowrap;
  }

  .se-trust-signals .material-symbols-outlined {
    font-size: 11px;
  }

  /* Repair the mobile tools grid: the legacy rule accidentally constrained the grid
     and every tool card to 32x32px. Only the icon itself should be 32x32px. */
  .se-tool-grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .se-tool-card {
    width: auto;
    height: auto;
    min-height: 132px;
    padding: 12px 10px;
    border-radius: 13px;
  }

  .se-tool-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  /* Undo the malformed legacy selector that was applying trust-section spacing
     to tool-card links on mobile. */
  .se-tool-card .se-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-top: auto;
    padding: 8px 0 0;
    border-radius: 0;
    font-size: 10.5px;
  }
}

@media (max-width: 345px) {
  .se-eyebrow {
    font-size: 8.3px;
    padding-inline: 6px;
  }

  .se-hero-copy h1 {
    font-size: clamp(19px, 5.8vw, 21px);
  }

  .se-trust-signals {
    font-size: 7.8px;
    gap: 3px 5px;
  }

  .se-trust-signals .material-symbols-outlined {
    font-size: 10px;
  }
}