/* "works from your phone" (22.9.2026): the phone frames and the install steps, shared by the two
   homepages, the feature pages and /clinic-management-app.html. Real screenshots of the demo at 390x844,
   served 780px wide (2x). Colours come from the page's own tokens, with fallbacks. */
.mob-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.mob-head { text-align: center; max-width: 46em; margin: 0 auto 8px; }
.mob-head .mob-eyebrow { display: block; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--acc-ink, #2E63D6); margin: 0 0 12px; line-height: 1.6; }
.mob-head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.22; letter-spacing: -.01em; }
.mob-head p { font-size: 17px; line-height: 1.7; color: var(--ink2, #3D4668); margin: 14px auto 0; }
.mob-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; margin: 34px auto 0; max-width: 1040px; }
.mob-grid.n2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
.mob-grid.n3 { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; }
.mob-grid figure { margin: 0; text-align: center; }
.mob-frame { position: relative; aspect-ratio: 390 / 844; background: var(--ink, #141A33); border-radius: 30px; padding: 9px; box-shadow: 0 28px 50px -30px rgba(20, 26, 51, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mob-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 22px; background: #F4F6FE; }
.mob-grid figcaption { font-size: 15px; font-weight: 700; color: var(--ink, #141A33); margin-top: 12px; }
.mob-grid figcaption small { display: block; font-weight: 400; font-size: 13px; color: var(--mut, #69708D); margin-top: 3px; line-height: 1.5; }
.mob-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px auto 0; max-width: 1040px; }
.mob-points div { background: var(--card, #fff); border: 1px solid var(--line, #E7EAF6); border-radius: 18px; padding: 18px 20px; }
.mob-points b { display: block; font-size: 16px; margin-bottom: 6px; color: var(--ink, #141A33); }
.mob-points p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink2, #3D4668); }
.mob-cta { text-align: center; margin: 26px 0 0; font-size: 15px; }
.mob-cta a { color: var(--accdeep, #2E63D6); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* install steps (the landing page) */
.mob-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; }
.mob-steps div { background: var(--card, #fff); border: 1px solid var(--line, #E7EAF6); border-radius: 18px; padding: 18px 20px; }
.mob-steps h3 { margin: 0 0 8px; font-size: 17px; }
.mob-steps ol { margin: 0; padding-inline-start: 1.2em; font-size: 15px; line-height: 1.75; color: var(--ink2, #3D4668); }
/* a phone as the hero image on the landing page */
.hero .shot img[src*="/img/mobile/"] { max-width: 300px; margin-inline: auto; border-radius: 26px; border: 9px solid var(--ink, #141A33); }
@media (max-width: 900px) { .mob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mob-grid.n3 { grid-template-columns: repeat(2, minmax(0, 280px)); } .mob-points { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mob-grid, .mob-grid.n2, .mob-grid.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .mob-frame { border-radius: 22px; padding: 6px; } .mob-frame img { border-radius: 16px; } .mob-grid figcaption { font-size: 13.5px; } .mob-steps { grid-template-columns: 1fr; } }