/* Shared responsive presentation. Keep this after page-specific stylesheets.
   Image/text sections use heading → media → copy in both DOM and mobile order. */
:root{--section:clamp(3.5rem,6vw,5.5rem);--hero-title:clamp(2.5rem,4.2vw,3.8rem)}
main :is(.page-hero,.product-hero){padding-block:clamp(3rem,6vw,5rem)}
main :is(.page-hero,.product-hero,.blog-article .hero) h1{font-size:var(--hero-title);line-height:1.08;overflow-wrap:break-word}
main .section-head h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.12}
main :is(.page-hero,.product-hero) .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:65ch}
main :is(.cards,.model-grid,.split-products,.product-family,.media-copy,.problem-grid,.challenge-grid,.form-layout,.audience-grid,.hero-grid,.product-hero-grid)>*{min-width:0}
main :is(h1,h2,h3,.text-link,.btn,.chip){overflow-wrap:break-word}
.actions>.btn{max-width:100%;white-space:normal;text-align:center}
.center>.actions,.center>.lead{justify-content:center;margin-inline:auto}
.table-wrap{max-width:100%}
.dark .btn-secondary,.cta-band .btn-secondary{color:#fff;border-color:#69879f}

/* Preserve the existing left/right image arrangement on desktop. */
.responsive-story{grid-template-areas:"heading media" "copy media";row-gap:0}
.responsive-story.responsive-story-left{grid-template-areas:"media heading" "media copy"}
.responsive-story>.responsive-story-heading{grid-area:heading;align-self:end;min-width:0}
.responsive-story>.responsive-story-copy{grid-area:copy;align-self:start;min-width:0}
.responsive-story>.responsive-story-media{grid-area:media;min-width:0;max-width:100%;justify-self:center;align-self:center}
.responsive-story>img.responsive-story-media{width:100%;height:auto;object-fit:contain}
.responsive-story>figure.responsive-story-media{margin:0}
.responsive-story>.responsive-story-media img{max-width:100%;height:auto;object-fit:contain}
.responsive-story.product-family{grid-template-columns:repeat(2,minmax(0,1fr))}
.responsive-story.product-family>img{max-height:340px}
.blog-article .responsive-article-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.blog-article .responsive-article-hero>.responsive-story-heading{padding:clamp(1.5rem,4vw,3.5rem);padding-bottom:0}
.blog-article .responsive-article-hero>.responsive-story-copy{padding:clamp(1.5rem,4vw,3.5rem);padding-top:0}
.blog-article .responsive-article-hero>.hero-media{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.5rem}
.blog-article .responsive-article-hero .caption{position:static;margin:0;inset:auto;width:100%}

@media(max-width:1024px){
  /* Same tablet breakpoint for every image-led hero and editorial section. */
  :is(.product-hero-ordered,.cobra-hero-grid){grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "media" "copy";gap:1.5rem}
  :is(.product-hero-heading,.cobra-hero-heading) h1{margin-bottom:0}
  .product-hero-grid>.product-hero-image{width:min(100%,440px);height:auto;max-height:440px;object-fit:contain;justify-self:center}
  .product-hero-grid>.mx100-hero-image{width:min(85%,400px);max-height:400px}
  .product-hero-grid>.handheld-hero-image{aspect-ratio:auto;max-height:440px;object-fit:contain}
  .product-hero-grid>.cobra-hero-media{width:min(100%,600px);justify-self:center}
  .cobra-hero-media>img{width:100%;height:auto;max-height:440px;object-fit:contain}
  :is(.media-copy,.problem-grid,.challenge-grid,.form-layout){grid-template-columns:minmax(0,1fr)}
  .responsive-story,.responsive-story.responsive-story-left,.responsive-story.product-family,.blog-article .responsive-story{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "media" "copy";row-gap:1.5rem}
  .responsive-story>.responsive-story-heading :is(h1,h2,h3){margin-bottom:0}
  .responsive-story>.responsive-story-media{width:min(100%,600px);justify-self:center}
  .responsive-story>img.responsive-story-media{height:auto;max-height:440px;object-fit:contain}
  .responsive-story.product-family>.responsive-story-media{max-height:300px}
  .blog-article .responsive-article-hero>.responsive-story-heading{padding:1.5rem 1.5rem 0}
  .blog-article .responsive-article-hero>.responsive-story-copy{padding:0 1.5rem 1.5rem}
  .blog-article .responsive-article-hero>.hero-media{width:calc(100% - 3rem);max-width:600px;border-radius:12px;padding:1rem}
  .blog-article .responsive-article-hero>.hero-media img{max-height:400px}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .primary-nav{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:760px){
  :root{--hero-title:clamp(2rem,8vw,3.25rem)}
  main :is(.page-hero,.product-hero){padding-block:2.5rem}
  main :is(.page-hero,.product-hero,.blog-article .hero) h1{font-size:var(--hero-title);max-width:100%}
  main :is(.page-hero,.product-hero,.blog-article .hero) .eyebrow{font-size:.7rem;letter-spacing:.1em}
  main :is(.page-hero,.product-hero,.blog-article .hero,.cta-band) .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
  .cards-3{grid-template-columns:minmax(0,1fr)}
  .responsive-story .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
  .product-hero-grid>.product-hero-image{max-height:360px}
  .product-hero-grid>.mx100-hero-image{max-height:340px}
  .product-hero-grid>.handheld-hero-image{max-height:380px}
  .cobra-hero-media>img{max-height:380px}
  .primary-nav{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid label,.form-grid input,.form-grid select,.form-grid textarea{min-width:0;max-width:100%}
  .spec-table th,.spec-table td{padding:.75rem;overflow-wrap:anywhere}
}

/* Evaluation pages: clear card hierarchy and a proportional scan preview. */
.technology-overview .technology-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.technology-overview .technology-card h2{font-size:clamp(1.4rem,2.3vw,1.85rem);line-height:1.15}
.technology-overview .technology-card>span:last-child{margin-top:auto}
.technology-overview .technology-card:last-child{grid-column:1/-1}
.sample-data-preview{margin:1.5rem 0;max-width:720px}
.sample-data-preview img{width:100%;height:auto;border-radius:12px;background:var(--navy)}
.sample-data-preview figcaption{font-size:.85rem;line-height:1.5;color:var(--muted-foreground);margin-top:.75rem}

/* Five distinct steps shared by Pentra, Radix, and Staris. */
.cards.product-workflow{grid-template-columns:repeat(5,minmax(0,1fr))}
.product-workflow .card{min-width:0}
@media(max-width:1100px){.cards.product-workflow{grid-template-columns:repeat(2,minmax(0,1fr))}.product-workflow .card:last-child{grid-column:1/-1}}
@media(max-width:600px){.cards.product-workflow{grid-template-columns:1fr}}

/* MX-100: Cobra-style page navigation and downloads, with the blue hero retained. */
.product-section-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding-block:1rem;border-block:1px solid var(--border);font-size:.9rem;font-weight:750;color:var(--primary)}
.product-section-nav a{padding-block:.35rem}
.mx100-page [id],#mx100-sample{scroll-margin-top:130px}
.mx100-downloads .download-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mx100-downloads .btn{width:100%;white-space:normal;text-align:center}
.mx100-downloads h3{font-size:1.35rem}
.mx100-workflow h3{font-size:1.35rem}
@media(max-width:1024px){.mx100-page [id],#mx100-sample{scroll-margin-top:100px}}
@media(max-width:760px){.product-section-nav{gap:.35rem 1rem}.mx100-page .output-grid{grid-template-columns:minmax(0,1fr)}}

/* Technology explanations: readable flows, evidence captions and evaluation lists. */
.tech-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0 0 1.5rem}
.tech-flow>li{min-width:0;padding:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.technology-detail .tech-flow h3{font-size:1.3rem;margin-top:.6rem}
.technology-detail .tech-flow p{margin-bottom:0}
.technology-detail .responsive-story-media img{width:100%;max-height:480px;object-fit:contain;border-radius:var(--radius)}
.technology-detail figcaption{font-size:.85rem;line-height:1.5;margin-top:.75rem;color:var(--muted-foreground)}
.tech-checklist{padding-left:1.3rem;max-width:85ch;margin-bottom:0;color:var(--muted-foreground)}
.tech-checklist li{padding-left:.4rem;margin-bottom:1rem}
.tech-checklist strong{color:var(--foreground)}
.tech-output-table caption{text-align:left;font-weight:700;padding:0 0 1rem}
.tech-output-table th,.tech-output-table td{vertical-align:top}
@media(max-width:1024px){.tech-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.tech-flow{grid-template-columns:minmax(0,1fr)}.tech-output-table{min-width:600px}}

/* Application-specific solution pages. */
.solution-workflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.solution-workflow>li{min-width:0;padding:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.solution-detail .solution-workflow h3{font-size:1.25rem;margin-top:.6rem}
.solution-detail .solution-workflow p{margin-bottom:0}
.solution-detail .responsive-story-media img{width:100%;height:auto;max-height:480px;object-fit:contain;border-radius:var(--radius)}
.solution-detail figcaption{font-size:.85rem;line-height:1.5;margin-top:.75rem;color:var(--muted-foreground)}
.solution-detail .card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.solution-detail .card>.text-link:last-child{margin-top:auto}
.solution-detail .card h3{font-size:1.35rem}
.solution-product-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.solution-product-cards.single-product{grid-template-columns:minmax(0,1fr);max-width:800px}
.solution-checklist{padding-left:1.3rem;max-width:85ch;margin-bottom:0;color:var(--muted-foreground)}
.solution-checklist li{padding-left:.4rem;margin-bottom:1rem}
.solution-checklist strong{color:var(--foreground)}
@media(max-width:1024px){.solution-workflow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.solution-product-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.solution-workflow{grid-template-columns:minmax(0,1fr)}}

/* Solutions overview: grouped directory and documented field examples. */
.solutions-overview :is(.solution-overview-group,#solutions-by-workflow,#solutions-case-studies){scroll-margin-top:130px}
.solution-group-nav{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 2.5rem}
.solution-group-nav a{display:inline-flex;padding:.7rem 1rem;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--primary);font-weight:700;max-width:100%}
.solution-group-nav a:hover{border-color:var(--primary)}
.solution-overview-group+.solution-overview-group{margin-top:3.5rem}
.solution-overview-group>.section-head h3{font-size:clamp(1.55rem,2.6vw,2rem);line-height:1.2}
.solutions-overview .solution-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.solutions-overview .solution-card h4{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.2;margin:.65rem 0 .8rem;overflow-wrap:break-word}
.solutions-overview .solution-card>span:last-child{margin-top:auto}
.solutions-overview .solution-card:hover{border-color:var(--primary)}
.solution-example-grid .card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.solution-example-grid img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;border-radius:12px;background:var(--muted);margin-bottom:1.25rem}
.solution-example-grid h3{font-size:1.35rem;line-height:1.25}
.solution-example-grid .text-link{margin-top:auto}
.solutions-overview .cta-band .lead{margin-inline:auto}
@media(max-width:1024px){.solutions-overview :is(.solution-overview-group,#solutions-by-workflow,#solutions-case-studies){scroll-margin-top:100px}}
@media(max-width:760px){.solution-group-nav{display:grid;grid-template-columns:minmax(0,1fr)}.solution-group-nav a{border-radius:12px}.solution-overview-group+.solution-overview-group{margin-top:2.5rem}}

/* Preserve the requested applications collage beneath the closing CTA heading. */
.solutions-overview .cta-band .solutions-gallery-image{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;margin:1.5rem auto 2rem;border-radius:var(--radius)}
@media(max-width:760px){.solutions-overview .cta-band .solutions-gallery-image{margin-block:1.25rem 1.5rem;border-radius:12px}}

/* Scoped to small text measured below WCAG AA on its existing background. */
:root{--text-blue-aa:#0666b5;--text-cyan-aa:#007d94}
html body .contrast-blue-text.contrast-blue-text{color:var(--text-blue-aa)}
html body .contrast-cyan-text.contrast-cyan-text{color:var(--text-cyan-aa)}