/* R218: always-visible bounded samples, public product pages only. */
body[data-product-page="r04"] #guia-real,body[data-product-page="r04"] #app-real{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:clamp(24px,4vw,48px);align-items:center;scroll-margin-top:12rem;}
body[data-product-page="r04"] #guia-real > *,body[data-product-page="r04"] #app-real > *{min-width:0;}
body[data-product-page="r04"] .sample-key{font-size:15px;line-height:1.5;max-width:75ch;margin:0 0 24px;}
body[data-product-page="r04"] .real-preview.sample-visible{margin:0;max-width:400px;width:100%;justify-self:center;}
body[data-product-page="r04"] .sample-visible > img{display:block;max-width:100%;width:auto;height:auto;margin:auto;border:1px solid #D8D6CF;border-radius:12px;background:#fff;}
body[data-product-page="r04"] .sample-visible figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;line-height:1.45;margin-top:8px;}
body[data-product-page="r04"] .sample-visible figcaption a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;white-space:nowrap;color:var(--product-dark,#193A8A);}
body[data-product-page="r04"] .sample-visible figcaption a:focus-visible{outline:3px solid #193A8A;outline-offset:3px;}
body[data-product-page="r04"] .previous-demonstration{grid-column:1 / -1;}
@media(max-width:800px){body[data-product-page="r04"] #guia-real,body[data-product-page="r04"] #app-real{grid-template-columns:minmax(0,1fr);gap:24px;}body[data-product-page="r04"] .sample-visible figcaption{flex-wrap:wrap;}}

/* Pair guide and app as two visible editorial cards; no empty copy column. */
body[data-product-page="r04"] .sample-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin-bottom:32px;}
body[data-product-page="r04"] .sample-pair #guia-real,body[data-product-page="r04"] .sample-pair #app-real{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:clamp(20px,3vw,40px);margin:0;}
body[data-product-page="r04"] .sample-pair .real-preview.sample-visible{align-self:center;}
@media(max-width:800px){body[data-product-page="r04"] .sample-pair{grid-template-columns:minmax(0,1fr);}}