.tiles-page { background: #f7f8f2; color: #2c453a; }
.tiles-page a { color: #356b4e; }
.tiles-page a:hover { color: #234e41; }
.tiles-page .hero { margin-bottom: 28px; }
.tiles-page .eyebrow, .tiles-page .feature-icon { color: #356b4e; }
.tiles-banner { display: block; width: 100%; height: auto; border-radius: 24px; }
.tiles-page .availability { color: #526447; margin-top: 14px; }
.tiles-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.tiles-preview { margin: 0; text-align: center; }
.tiles-preview img { display: block; width: 100%; max-width: 320px; height: auto; margin: auto; border: 1px solid #dfe5d5; border-radius: 20px; }
.tiles-preview figcaption { color: #526447; font-size: .9rem; margin-top: 12px; }
.tiles-steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 20px; }
.tiles-steps li { display: flex; align-items: center; gap: 16px; }
.tiles-steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 76px; height: 64px; border-radius: 16px; background: #edf1e3; color: #356b4e; font-size: 1.3rem; }
.tiles-steps h3 { margin-bottom: 2px; }
.tiles-steps p { color: #4c5b6c; margin: 0; }
.tiles-page .features li { background: #fffef9; border-color: #dfe5d5; border-radius: 20px; }
.tiles-page .support { background: #edf1e3; border-radius: 20px; }
@media (max-width: 600px) { .tiles-showcase { grid-template-columns: 1fr; gap: 28px; } .tiles-showcase > div { order: -1; } .tiles-banner { border-radius: 16px; } }