/* Product links, supplied value artwork and owner-requested equal DCC panels.
   The canonical Combat PRO layout stylesheet is byte-for-byte unchanged. */
.feature-card[href], .generator-card[href], .fact-card[href], .stat-panel[href] { color: inherit; text-decoration: none; }
.feature-card[href]:hover h3, .generator-card[href]:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.value-banner { margin: 0 0 30px; padding: 10px; border-radius: 30px; }
.value-banner img { width: 100%; height: auto; border-radius: 21px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1041px) {
  #dcc .dcc-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The image defines the row height: never stretch its box around taller copy. */
#dcc .dcc-image { min-height: 0; padding: 0; display: block; aspect-ratio: auto; }
#dcc .dcc-image img { width: 100%; height: auto; aspect-ratio: auto; }
#dcc .dcc-copy { min-height: 0; padding: 24px; }
#dcc .dcc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 14px 0 18px; }
#dcc .dcc-steps span { min-height: 34px; padding: 6px 8px; font-size: .875rem; }
.hero-image { padding: 0; display: block; min-height: 0; align-self: start; aspect-ratio: auto; }
.hero-image img { width: 100%; height: auto; aspect-ratio: auto; }
.hero-copy { padding: 24px; min-height: 0; }
.hero-copy h1 { font-size: clamp(2rem, 2.8vw, 2.7rem); }
.hero-copy .hero-lede { font-size: 1.05rem; }
.hero-copy .action-row { margin-top: 18px; }
.story-visual img[src^="assets/screens/"] { aspect-ratio: auto; }
@media (min-width: 1041px) and (max-width: 1220px) {
  .main-nav a { padding-inline: 6px; }
  #dcc .dcc-copy { padding: 16px; }
  #dcc .dcc-copy .eyebrow { margin-bottom: 6px; }
  #dcc .dcc-copy h2 { margin-bottom: 10px; }
  #dcc .dcc-steps { margin: 10px 0 12px; }
}

/* Owner standard applies to every full visible bitmap. */
.story-visual img, .generator-card img { aspect-ratio: auto; }

/* Owner-requested marketing depth: retain the canonical glass cards and bands. */
.guided-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.guided-card { border-radius: 24px; padding: 20px 24px; }
.guided-card summary { cursor: pointer; color: var(--ink); font-weight: 800; font-size: 18px; }
.guided-card summary .card-kicker { display: inline; margin-right: 10px; }
.guided-card p { margin: 16px 0 0; color: var(--ink-soft); }
.example-grid, .animation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 28px; }
.example-card { margin: 0; border-radius: 24px; min-width: 0; }
.example-card img, .animation-card video { display: block; width: 100%; height: auto; object-fit: contain; }
.example-card figcaption, .media-copy { padding: 20px 24px; }
.example-card h3, .media-copy h3 { margin: 0 0 8px; }
.example-card p, .media-copy p { margin: 0; color: var(--ink-soft); }
.animation-card { border-radius: 24px; min-width: 0; }
.section-note { color: var(--ink-soft); text-align: center; font-size: 14px; margin: 26px auto 0; max-width: 980px; }
.family-subheading { margin-top: 40px; }
.generator-card h3 { flex: 0; padding-bottom: 10px; }
.product-description { padding: 0 22px 22px; margin: 0; color: var(--ink-soft); }
#dcc .dcc-copy h2 { font-size: clamp(23px, 2.2vw, 30px); margin-bottom: 10px; }
#dcc .dcc-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.55; }
@media (max-width: 800px) {
  .guided-grid, .example-grid, .animation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .fact-card strong { font-size: 34px; min-width: 74px; }
  .fact-card span { font-size: 16px; }
  .guided-card { padding: 18px; }
}
