/* AiMega-R: the third product card and its detail chapter.
   Loaded after gradient-flow.css so it can widen the product grid to three columns.
   The chapter runs blue → mint → blue: it opens on the colour AiMega-C ends on and
   closes on the colour the footer opens on, so neither join shows a seam. */
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-r { background: #fff; border-color: #d4ece8; }
.product-r .product-subtitle { color: var(--blue); }

.card-r-visual { gap: 12px; }
.mini-qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--navy-800); border: 1px solid #285782; border-radius: var(--inner-radius); box-shadow: 0 12px 26px rgba(16,42,77,.16); }
.mini-qr svg { display: block; width: 64px; height: 64px; padding: 3px; background: #fff; border-radius: 2px; }
.mini-qr b { font-weight: 400; font-size: 11px; letter-spacing: .06em; color: var(--green-light); }
.mini-steps { flex: none; display: flex; flex-direction: column; gap: 6px; width: 100px; }
.mini-steps span { display: flex; justify-content: space-between; align-items: center; padding: 6px 9px; font-size: 10.5px; letter-spacing: .08em; color: #256d78; background: var(--green-pale); border: 1px solid #bde6df; border-radius: var(--inner-radius); }
.mini-steps span::after { content: "✓"; color: var(--green); }

main > section.r-detail {
  --flow-from: var(--flow-blue);
  --flow-middle: var(--flow-mint);
  --flow-to: var(--flow-blue);
  background: linear-gradient(180deg, var(--flow-from) 0%, var(--flow-middle) 51%, var(--flow-to) 100%);
  border-block: 0;
}
.r-detail { position: relative; padding-top: 76px; padding-bottom: 90px; }
.r-detail .eyebrow { color: var(--blue); }
.r-detail .detail-copy h2 { color: var(--navy-800); }
.r-detail .detail-copy h2 em { color: var(--blue); }
.r-detail .detail-copy > p:not(.eyebrow) { color: #526879; }
.r-visual { margin: 0; width: 100%; max-width: 640px; justify-self: center; }
.r-visual img { display: block; width: 100%; height: auto; }
.r-visual figcaption { margin-top: 2px; text-align: right; font-size: 11px; color: #7d8f9c; }

@media (max-width: 1099px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-r { grid-column: 1 / -1; }
  .card-r-visual { max-width: 440px; }
  .r-detail { padding-top: 64px; padding-bottom: 72px; }
  .r-visual { max-width: 680px; }
}
@media (max-width: 700px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-r { grid-column: auto; }
}
@media (max-width: 620px) {
  .r-detail { padding-top: 60px; padding-bottom: 66px; }
}