.feature-guide { padding: clamp(30px, 5vw, 55px) 20px; background: #f7faff; }
.feature-guide-inner { max-width: 1040px; margin: auto; }
.feature-guide-heading { margin-bottom: 15px; }
.feature-guide-heading h2 { color: #142b4a; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.3; }
.feature-guide-heading p { color: #405672; font-size: .95rem; margin: 4px 0 0; }
.feature-guide-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; }
.feature-guide-tab { border: 1px solid #cbd9eb; border-radius: 10px; background: #fff; color: #23466b; min-height: 48px; padding: 7px; font-size: .9rem; font-weight: 800; cursor: pointer; word-break: keep-all; }
.feature-guide-tab[aria-selected="true"] { background: #0b59a1; color: #fff; border-color: #0b59a1; }
.feature-guide-tab[aria-selected="false"]:hover { background: #e9f2ff; }
.feature-guide :focus-visible { outline: 2px solid #0b59a1; outline-offset: 3px; }
.feature-guide-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(15px, 4vw, 38px); align-items: start; padding: clamp(15px, 3vw, 28px); border: 1px solid #d8e4f1; border-radius: 16px; background: #fff; }
.feature-guide-panel[hidden] { display: none; }
.feature-guide-panel h3 { color: #14365c; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.35; margin-bottom: 8px; word-break: keep-all; }
.feature-guide-panel p { margin: 0; color: #405672; font-size: .93rem; line-height: 1.6; word-break: keep-all; }
.feature-guide-panel p + p { margin-top: 10px; }
.feature-guide-panel .feature-guide-note { font-size: .83rem; }
.feature-guide-example { padding: 12px 14px; border: 1px solid #dae6f4; border-radius: 12px; background: #eef5ff; color: #1c3859; font-size: .93rem; word-break: keep-all; }
.feature-guide-example + .feature-guide-example { margin-top: 8px; }
.feature-guide-example strong { display: block; margin-bottom: 4px; color: #0b59a1; font-size: .82rem; }
.feature-guide-panel blockquote { margin: 12px 0; }
.feature-guide-media { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.feature-guide-media figure { min-width: 0; margin: 0; width: min(100%, 300px); }
.feature-guide-media img { display: block; width: 100%; height: auto; max-height: 390px; object-fit: contain; border: 1px solid #dce6f2; border-radius: 10px; background: #edf4fb; }
.feature-guide-media figcaption { margin-top: 4px; color: #405672; font-size: .82rem; text-align: center; }
.feature-guide-panel.reports { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); }
.feature-guide-media.reports { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 700px) {
    .feature-guide-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-guide-panel, .feature-guide-panel.reports { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
    .feature-guide-media.reports { grid-template-columns: minmax(0, 1fr); }
}
.preview-gallery { padding: clamp(32px, 6vw, 64px) 22px; background: #eef4fb; }
.preview-gallery-layout { max-width: 1080px; margin: auto; }
.preview-gallery-copy { margin-bottom: clamp(16px, 3vw, 26px); }
.preview-gallery-label { margin: 0 0 6px; color: #0b59a1; font-size: .8rem; font-weight: 800; }
.preview-gallery-copy h2 { color: #142b4a; line-height: 1.24; font-size: clamp(1.65rem, 3vw, 2.55rem); word-break: keep-all; margin-bottom: 12px; }
.preview-gallery-copy > p:last-child { margin: 0; color: #405672; font-size: .96rem; word-break: keep-all; }
.preview-gallery-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 19px); }
.preview-screen { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 10px; padding: clamp(12px, 2vw, 22px); border: 1px solid #d8e4f1; border-radius: 17px; background: #fff; box-shadow: 0 8px 25px #193a6010; }
.preview-screen-name { margin: 0; color: #142b4a; text-align: center; font-size: clamp(.95rem, 2vw, 1.13rem); line-height: 1.4; word-break: keep-all; }
.preview-screen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; width: 100%; gap: clamp(8px, 2vw, 18px); }
.preview-screen-shot { min-width: 0; width: min(100%, 205px); margin: 0 auto; }
.preview-screen-frame { padding: 5px; border-radius: 16px; background: #172a46; }
.preview-screen-image { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; border-radius: 12px; background: #e6eef8; object-fit: contain; }
.preview-screen-kiosk .preview-screen-image { background: #111b2c; }
.preview-screen-shot figcaption { margin-top: 7px; color: #405672; text-align: center; font-size: .82rem; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.preview-store-link { display: inline-flex; width: min(100%, 160px); min-height: 62px; align-items: center; justify-content: center; }
.preview-store-link:focus-visible { outline: 2px solid #0b59a1; outline-offset: 3px; border-radius: 8px; }
.preview-store-link:hover { filter: brightness(1.14); }
.preview-store-onestore { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border: 1px solid #616161; border-radius: 8px; background: #101010; color: white; font-size: .78rem; word-break: keep-all; }
.preview-store-onestore img { width: 24px; height: 24px; flex: none; }
.preview-store-play { display: block; width: 100%; height: auto; }

@media (max-width: 620px) {
    .preview-gallery-tiles { grid-template-columns: minmax(0, 1fr); }
}