/* Product routes extend the existing GoScript palette, type and controls. */
.product-shell { max-inline-size: 64rem; }
.product-hero { padding-block: clamp(3rem, 7vw, 6rem) 4rem; max-inline-size: 58rem; }
.product-hero h1 { max-inline-size: none; font-size: clamp(2.6rem, 5.5vw, 4.8rem); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; margin: 0 0 1.5rem; }
.product-hero .lead { max-inline-size: 62ch; }
.product-boundary { max-inline-size: 70ch; color: var(--ink); margin-block: 1.5rem 2rem; }
.product-workflow, .product-faq { border-block-start: 1px solid var(--border); padding-block: 3rem; }
.product-shell h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 2rem; }
.product-workflow ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding-inline-start: 1.4rem; margin-block-end: 2rem; }
.product-workflow li::marker { color: var(--teal-soft); font-weight: 750; }
.product-shell h3 { font-size: 1.15rem; margin: 0 0 .55rem; line-height: 1.4; }
.product-workflow p, .product-faq p { color: var(--muted); margin: 0; max-inline-size: 70ch; }
.product-faq article + article { margin-block-start: 2rem; }
.product-end { padding-block: 0 4rem; }
.product-shell a:not(.button) { text-underline-offset: .25em; }
.product-shell ::selection { color: var(--bg); background: var(--teal-soft); }
@media (max-width: 640px) {
  .product-workflow ol { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-hero { padding-block: 2.5rem 3rem; }
  .product-hero h1 { max-inline-size: none; font-size: clamp(2.25rem, 9vw, 3.5rem); }
}

@media (max-width: 52rem) {
  .product-header .nav { flex-wrap: wrap; padding-block: .75rem; }
  .product-header .brand span { display: inline; }
  .product-header .nav-links { inline-size: 100%; justify-content: flex-start; gap: .5rem 1rem; }
  .product-header .nav-links > a:not(.button) { display: inline; }
}