/* === PRODUCT PAGES (scua / grixel) === */
/* Layered on top of inner.css — only the bits the product pages add. */

/* Hero lockup: the product's own mark sits above the eyebrow.
   .inner-hero is a column flexbox, so the marks need align-self — otherwise
   they stretch to the full slab width (and both SVGs carry
   preserveAspectRatio="none", so they'd distort rather than letterbox). */
.inner-hero .product-mark,
.inner-hero .product-wordmark {
    display: block;
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    margin-bottom: 4px;
}

.inner-hero .product-mark { height: 88px; }
.inner-hero .product-wordmark { height: 46px; }

/* Long unbroken tokens (final_v3_FINAL_actually) mustn't widen a card
   past the viewport on small phones. */
.service-card h3 { overflow-wrap: break-word; }

/* Feature chips reuse the games-platforms pills, just tightened up. */
.inner-hero .product-chips {
    margin-top: 4px;
}

/* The CTA block carries several outbound links rather than one button.
   (.hero-ctas is scoped to .inner-hero, so product pages need their own.) */
.cta-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .inner-hero .product-mark { height: 68px; }
    .inner-hero .product-wordmark { height: 40px; }
    .cta-links { gap: 10px; }
}