/* MAI Mirroring — styles scoped to this technology page. */
.mirroring-page main { color: #d9e8f2; background: #071b2b; }
.mirroring-page main h1,
.mirroring-page main h2,
.mirroring-page main h3 { color: #f4f9fd; }
.mirroring-page main .eyebrow,
.mirroring-page main .text-link { color: #75d3ec; }
.mm-hero { padding: 90px 0 74px; background: radial-gradient(ellipse at 85% 40%, #123c50, #071b2b 65%); }
.mm-hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 50px; align-items: center; }
.mm-hero h1 { font-size: clamp(38px, 4.1vw, 60px); line-height: 1.08; letter-spacing: -0.035em; margin: 20px 0 24px; }
.mm-lead { font-size: 18px; line-height: 1.7; max-width: 600px; }
.mm-platform { color: #a0e8f4; font-size: 19px; font-weight: 600; margin: 25px 0; }
.mm-tags { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0 0 30px; list-style: none; }
.mm-tags li { padding: 7px 11px; border: 1px solid #366073; border-radius: 5px; font-size: 12px; }
.mm-visual { margin: 0; }
.mm-devices { display: flex; gap: 14px; align-items: center; padding: 24px 0 48px; }
.mm-phone, .mm-display { position: relative; background: #09131b; border: 3px solid #638395; padding: 8px; box-shadow: 0 20px 45px #0006; }
.mm-phone { width: 125px; height: 230px; border-radius: 24px; flex-shrink: 0; }
.mm-display { width: 285px; height: 177px; border-radius: 16px; }
.mm-map { position: relative; height: 100%; overflow: hidden; border-radius: 12px; background: repeating-linear-gradient(25deg, transparent 0 38px, #456273 39px 43px, transparent 44px 75px), repeating-linear-gradient(115deg, #17303f 0 50px, #4c6674 51px 55px, #17303f 56px 94px); }
.mm-route { position: absolute; width: 65%; height: 55%; border-bottom: 7px solid #63e1ef; border-right: 7px solid #63e1ef; top: 9%; left: 2%; border-radius: 0 0 22px 0; transform: rotate(-12deg); }
.mm-map b, .mm-map small { position: absolute; bottom: 27px; left: 6px; right: 6px; padding: 8px; background: #092838; color: white; font-size: 16px; }
.mm-map small { bottom: 5px; font-size: 10px; padding: 5px 8px; }
.mm-device-label { position: absolute; top: calc(100% + 15px); left: 0; width: 100%; font-size: 10px; letter-spacing: 0.07em; text-align: center; color: #a3c1d1; }
.mm-connection { color: #6cdeee; font-size: 32px; }
.mm-visual figcaption { font-size: 28px; line-height: 1.3; text-align: center; color: #b4cbd9; margin-top: 20px; }
.mm-visual figcaption strong { color: #7fe2ee; }
.mm-section { padding: 65px 0; }
.mm-section h2, .mm-cta h2 { font-size: clamp(29px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.025em; margin: 15px 0 25px; }
.mm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 35px; }
.mm-cards article { padding: 28px; border: 1px solid #284658; border-radius: 12px; background: #0c2435; }
.mm-number { color: #65cada; font-size: 13px; letter-spacing: 0.12em; }
.mm-cards h3 { font-size: 22px; line-height: 1.3; margin: 18px 0 14px; }
.mm-cards p, .mm-application p, .mm-intro, .mm-cta p { line-height: 1.7; color: #b6cad7; }
.mm-layer-section { background: #0b2232; }
.mm-intro { max-width: 780px; }
.mm-diagram { margin: 32px 0 0; }
.mm-layer { display: grid; grid-template-columns: 240px 1fr; padding: 27px; border: 1px solid #386171; border-radius: 12px; gap: 30px; align-items: center; }
.mm-sdk-layer { background: #123847; border-color: #5abccb; }
.mm-codec-layer { margin-top: 14px; background: #102a3c; }
.mm-layer-title strong { display: block; color: #eaf9ff; font-size: 15px; letter-spacing: 0.08em; }
.mm-layer span { display: block; color: #b6d1de; font-size: 14px; margin-top: 7px; }
.mm-flow { display: grid; grid-template-columns: 1fr 45px 1fr; align-items: center; text-align: center; }
.mm-flow > div { padding: 17px 10px; border-radius: 7px; background: #061c2b7a; }
.mm-flow strong { color: #eef8fd; font-size: 18px; }
.mm-flow .mm-arrow { color: #78d8e8; font-size: 29px; margin: 0; }
.mm-diagram figcaption { font-size: 13px; line-height: 1.6; margin-top: 15px; color: #a3bac9; }
.mm-application { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.mm-application img { width: 100%; border-radius: 14px; }
.mm-application .mm-caption { color: #9ee5ee; margin: 24px 0; }
.mm-cta { padding: 55px 0 70px; background: #103246; }
.mm-cta p { max-width: 700px; margin-bottom: 25px; }
@media (max-width: 1000px) {
  .mm-hero-grid { grid-template-columns: 1fr; }
  .mm-hero { padding-top: 55px; }
  .mm-devices { justify-content: center; }
  .mm-cards { gap: 14px; }
  .mm-cards article { padding: 22px; }
  .mm-layer { grid-template-columns: 190px 1fr; gap: 20px; }
}
@media (max-width: 650px) {
  .mm-cards, .mm-application { grid-template-columns: 1fr; }
  .mm-section { padding: 45px 0; }
  .mm-layer { grid-template-columns: 1fr; padding: 20px 14px; }
  .mm-flow strong { font-size: 15px; }
  .mm-flow { grid-template-columns: 1fr 30px 1fr; }
  .mm-phone { width: 95px; height: 188px; }
  .mm-display { width: 210px; height: 145px; }
  .mm-devices { gap: 8px; }
  .mm-connection { font-size: 22px; }
  .mm-device-label { font-size: 8px; }
  .mm-visual figcaption { font-size: 25px; }
}