/* Apexure design system, direction D. Landing page example additions on top of d.css and d-templates.css. */
.csband.noimg{grid-template-columns:1fr}
.res .w b{color:var(--ink);font-weight:600}
.tear-body>.prose>*:first-child,.tear-body>h2:first-child{margin-top:0}
.prose .lpe2-commentary p,.prose .lpe2-insight p,.prose .lpe2-tip p,.prose .lpe2-decision p{max-width:none}
.pageframe .view img{height:auto}
/* Screenshots are not photographs: object-fit:cover cuts whichever axis overflows,
   and on a page capture a horizontal cut slices the logo, the headline and the form
   edge. Every box below is therefore never narrower than the capture it holds, so
   any cropping is vertical and top-anchored -- where a page naturally continues. */
/* Example captures are whole pages (768x3867), so nothing here is cropped sideways at
   any ratio and the box is a free choice. 4/3 rather than the 16/10 used for case
   studies: it shows more of the page, and it keeps the hero tall enough that the
   trace column beside it -- ending with the .cap footnote -- stays inside the purple
   instead of dropping into the 64px straddle strip and going unreadable. */
.stage .frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top}
@media(max-width:960px){.tear-side{margin-bottom:28px}}
/* mobile screenshots (375px wide originals) sit in the frame at their own width instead of being stretched */
.stage .frame.mobile{background:var(--bg-2)}
.stage .frame.mobile img{width:min(100%,390px);aspect-ratio:auto;height:520px;object-fit:cover;object-position:top;margin:0 auto;display:block;border-radius:0 0 12px 12px}
@media(max-width:640px){.stage .frame.mobile img{height:380px}}
/* text chips stack on phones so a long button label does not squeeze the caption */
@media(max-width:520px){.lpe-hero .chip.txt{grid-template-columns:1fr;grid-template-areas:"k" "b" "d";gap:3px}.lpe-hero .chip.txt b{text-align:left;font-size:19px}}
/* the analysis column must never be sized by its widest word, image or table */
.tear-body{min-width:0;overflow-wrap:break-word}
.tear-body img,.tear-body svg,.tear-body iframe,.tear-body video{max-width:100%;height:auto}
.tear-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tear-body pre{max-width:100%;overflow-x:auto}
@media(max-width:960px){.tear{grid-template-columns:minmax(0,1fr)}}