/* styles/sections/cli-hero.css
 * /return-on-tokens/ hero: copy beside the agent session (agent-session.css) from 1024px, the
 * accent line under the h1, the lede, and the "Install the CLI" action stack with its setup
 * note. `.rot-cta--center` centres the same stack under the comparison. Measures are the
 * pre-swap pixel widths (h1 22ch at 40px, lede 52ch at 18px). The 1024px and 620px queries
 * are the page's own pre-swap switches. */
@layer sections {
  .rot-hero {
    padding-block: var(--space-64);
  }

  .rot-hero-grid {
    display: grid;
    gap: var(--space-48);
    align-items: center;
  }

  .rot-hero h1 {
    max-width: 533px;
  }

  .rot-h1-accent {
    display: block;
    color: var(--success);
  }

  .rot-lede {
    max-width: 556px;
    margin-top: var(--space-24);
    color: var(--ink-muted);
  }

  .rot-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    margin-top: var(--space-32);
  }

  .rot-cta-note {
    margin: 0;
    color: var(--ink-55);
    font-weight: 400;
  }

  .rot-cta--center {
    align-items: center;
    margin-top: var(--space-48);
    text-align: center;
  }

  @media (width >= 1024px) {
    .rot-hero {
      padding-top: var(--space-96);
    }

    .rot-hero-grid {
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }
  }

  @media (width <= 620px) {
    .rot-hero {
      padding-top: var(--space-48);
    }

    .rot-cta {
      align-items: stretch;
    }

    .rot-cta .btn {
      width: 100%;
    }

    .rot-cta-note {
      text-align: center;
    }
  }
}