/* The pages for the Specimen tools that are still being built (SEO Specimen, Ads
   Specimen). They use the home page's type and sections (home.css) and add a shorter
   hero, a grid of feature groups and a status note. */
.hero--product { padding-bottom: 8px; }
.hero--product h1 { max-width: 15em; font-size: clamp(42px, 6.2vw, 84px); line-height: 1.02; }
.hero--product .lede { margin-top: 28px; max-width: 46em; }
.pill--soon svg { background: var(--rs); color: var(--t2); }
.hero__links { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.plan { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.plan > li { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; padding: 24px; }
.plan h3 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.plan .checks { margin-top: 16px; }
.plan .checks li { color: var(--t2); font-weight: 400; font-size: 16px; }
@media (max-width: 960px) { .plan { grid-template-columns: minmax(0, 1fr); } }

.note { margin-top: 32px; padding: 20px 24px; border: 1px solid var(--bd); border-radius: 16px; background: var(--acs); max-width: 60em; }
.note p { margin: 0; color: var(--tx); }
.note p + p { margin-top: 8px; color: var(--t2); }
.product-end { padding-bottom: 128px; }