.ma-page { overflow: hidden; background: #fff; }
.ma-page .ma-eyebrow { color: #a792ff; font: 700 .73rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em !important; }
.ma-page h1, .ma-page h2 { max-width: none; }
.ma-hero { position: relative; min-height: 760px; isolation: isolate; color: #fff; background: radial-gradient(ellipse at 72% 46%, #282459 0, #151328 42%, #0b0c14 78%); }
.ma-hero::before { position: absolute; inset: 0; z-index: -1; content: ""; opacity: .19; background-image: linear-gradient(#9c8efd 1px, transparent 1px), linear-gradient(90deg, #9c8efd 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent 18%, #000 100%); }
.ma-hero-glow { position: absolute; width: 750px; height: 750px; right: -100px; top: -60px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(105,87,238,.3), transparent 65%); filter: blur(20px); }
.ma-hero-inner { width: min(100% - 72px, 1320px); min-height: 706px; margin: auto; display: grid; grid-template-columns: minmax(410px,.87fr) minmax(580px,1.13fr); align-items: center; gap: 1.2rem; }
.ma-hero-copy { position: relative; z-index: 4; padding: 6rem 0 5rem; }
.ma-hero h1 { margin: 1.2rem 0 1.4rem; color: #fff; font-size: clamp(3.7rem, 5.35vw, 6.5rem); line-height: .97; letter-spacing: -.065em !important; font-weight: 760; }
.ma-hero h1 em { color: #a996ff; font-style: normal; }
.ma-hero-lead { max-width: 540px; color: #c7c4d8; font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.65; }
.ma-hero-actions { display: flex; align-items: center; gap: 1.7rem; flex-wrap: wrap; margin-top: 2rem; }
.ma-hero .button.primary { gap: 1.5rem; padding: 1rem 1.4rem; background: #9b78ff; color: #0e0b1a; border-radius: 7px; box-shadow: 0 13px 34px rgba(91,62,197,.32); }
.ma-hero .button.primary:hover { background: #b39aff; }
.ma-text-cta { display: inline-flex; gap: .7rem; align-items: center; color: #fff; font-weight: 600; font-size: .92rem; }
.ma-text-cta:hover { color: #c8b9ff; }
.ma-platforms { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 3.4rem; }
.ma-platforms span { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; color: #bdb9cf; background: rgba(255,255,255,.035); font-size: .73rem; font-weight: 600; }
.ma-hero-bottom { max-width: 1320px; width: min(100% - 72px, 1320px); margin: 0 auto; padding: 0 0 1.75rem; display: flex; align-items: center; gap: 1rem; color: #aaa6c2; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em !important; }
.ma-bottom-line { width: 44px; height: 1px; background: #6b648c; }
.ma-hero-art { position: relative; height: 630px; align-self: end; }
.ma-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(188,172,255,.14); }
.ma-orbit--one { width: 640px; height: 640px; top: 12px; right: -100px; }
.ma-orbit--two { width: 470px; height: 470px; top: 100px; right: 20px; }
.ma-art-label { position: absolute; z-index: 5; right: 0; bottom: 44px; display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; color: #d4cee9; background: rgba(14,13,28,.7); backdrop-filter: blur(12px); font-size: .67rem; white-space: nowrap; }
.ma-art-label i { width: 6px; height: 6px; border-radius: 50%; background: #79e6c9; box-shadow: 0 0 8px #79e6c9; }

/* Device shells and reconstructed example screens. No source screenshot is published. */
.ma-device { position: relative; flex: none; filter: drop-shadow(0 30px 38px rgba(3,5,18,.38)); }
.ma-device-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111218; border: 2px solid #595b65; box-shadow: inset 0 0 0 1px #b4b4bd, 0 0 0 1px rgba(0,0,0,.8); }
.ma-device--iphone, .ma-device--android { width: 230px; height: 476px; }
.ma-device--iphone .ma-device-shell { padding: 9px 7px; border-radius: 36px; }
.ma-device--android .ma-device-shell { padding: 7px 6px; border-radius: 29px; border-color: #484a54; }
.ma-device--tablet { width: 590px; height: 406px; }
.ma-device--tablet .ma-device-shell { padding: 13px; border-radius: 26px; border-color: #74757e; }
.ma-device--android-tablet .ma-device-shell { border-color: #4a4a54; border-radius: 19px; padding: 11px; }
.ma-dynamic-island { position: absolute; top: 14px; left: 50%; width: 63px; height: 16px; z-index: 4; transform: translateX(-50%); background: #111218; border-radius: 20px; }
.ma-punch-hole { position: absolute; top: 15px; left: 50%; width: 8px; height: 8px; z-index: 4; transform: translateX(-50%); border-radius: 50%; background: #111218; }
.ma-tablet-camera { position: absolute; top: 6px; left: 50%; width: 4px; height: 4px; z-index: 4; transform: translateX(-50%); border-radius: 50%; background: #20222c; }
.ma-home-indicator { position: absolute; bottom: 5px; left: 50%; width: 73px; height: 3px; z-index: 4; transform: translateX(-50%); border-radius: 3px; background: #222; opacity: .75; }
.ma-screen { overflow: hidden; background: #f8f9fc; color: #24273a; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.ma-screen--phone { position: relative; height: 100%; border-radius: 27px; font-size: 8px; }
.ma-device--android .ma-screen--phone { border-radius: 23px; }
.ma-status { height: 23px; display: flex; justify-content: space-between; align-items: center; padding: 0 13px; color: #22273b; font-size: 8px; font-weight: 800; }
.ma-status-icons { font-size: 6px; letter-spacing: 1px !important; }
.ma-appbar { height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; background: #fff; border-bottom: 1px solid #e9eaf0; }
.ma-menu-icon { font-size: 13px; color: #52556b; }
.ma-app-logo { color: #24243c; font-size: 17px; line-height: 1; letter-spacing: -.08em !important; font-weight: 900; }
.ma-app-logo span { color: #8160df; }
.ma-appbar-right { color: #777b8a; font-size: 13px; }
.ma-screen-body { height: calc(100% - 80px); padding: 9px; overflow: hidden; }
.ma-screen-filter { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border: 1px solid #e7e8ef; border-radius: 8px; background: #fff; color: #62677a; font-size: 7px; font-weight: 650; }
.ma-screen-kicker { margin-top: 13px; color: #8765df; font-size: 6.5px; letter-spacing: .12em !important; font-weight: 800; }
.ma-screen-heading { margin-top: 3px; font-size: 15px; font-weight: 800; letter-spacing: -.04em !important; }
.ma-screen-sub { margin-top: 2px; color: #8f93a2; font-size: 7px; }
.ma-phone-hero-kpi { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px; color: #fff; border-radius: 10px; background: linear-gradient(130deg,#6a49cb,#9b6cf0); box-shadow: 0 7px 15px rgba(105,73,203,.22); }
.ma-phone-hero-kpi > span:first-child { display: flex; justify-content: space-between; font-size: 7px; font-weight: 700; letter-spacing: .08em !important; opacity: .85; }
.ma-phone-hero-kpi i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #80f2c8; }
.ma-phone-hero-kpi strong { font-size: 35px; line-height: 1; letter-spacing: -.055em !important; }
.ma-phone-hero-kpi strong small { font-size: 15px; }
.ma-phone-hero-kpi > span:last-child { font-size: 6.6px; opacity: .85; }
.ma-micro-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.ma-micro-metrics div { display: flex; flex-direction: column; padding: 9px; border: 1px solid #e7e8ef; border-radius: 9px; background: #fff; }
.ma-micro-metrics span, .ma-micro-metrics small { color: #8f93a2; font-size: 6.5px; }
.ma-micro-metrics strong { margin: 3px 0 0; font-size: 17px; letter-spacing: -.05em !important; }
.ma-screen-card { margin-top: 7px; padding: 9px; border: 1px solid #e7e8ef; border-radius: 9px; background: #fff; }
.ma-card-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 8px; font-weight: 800; }
.ma-card-title span { color: #9b9eaa; font-size: 6px; font-weight: 500; }
.ma-line-row { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 6.5px; }
.ma-line-row span { display: flex; align-items: center; gap: 4px; }
.ma-line-row b { font-size: 7px; }
.ma-dot { display: inline-block; width: 5px; height: 5px; flex: none; border-radius: 50%; }
.ma-dot--green { background: #19cc85; }.ma-dot--amber { background: #f7ae44; }.ma-dot--red { background: #f36568; }.ma-dot--gray { background: #a2a5b0; }
.ma-progress { height: 3px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: #e8eceb; }.ma-progress i { display: block; height: 100%; border-radius: inherit; background: #27d79b; }.ma-progress--amber i { background: #f1b858; }
.ma-product-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 4px; }.ma-product-card .ma-card-title { grid-column: 1/-1; margin-bottom: 3px; }.ma-product-card > span,.ma-product-card > b { font-size: 6.5px; }.ma-product-card > b { text-align: right; }
.ma-app-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; display: flex; justify-content: space-around; background: rgba(255,255,255,.96); border-top: 1px solid #e7e8ef; }.ma-app-tabbar > span { display: flex; flex-direction: column; align-items: center; color: #8678ad; font-size: 9px; line-height: 12px; }.ma-app-tabbar small { color: #868b9b; font-size: 5px; }
.ma-issue-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; margin-top: 7px; padding: 8px; border: 1px solid #e8e9f0; border-radius: 8px; background: #fff; }.ma-issue-row:first-of-type { margin-top: 13px; }.ma-issue-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }.ma-issue-row b { font-size: 7px; }.ma-issue-row small { color: #858a9b; font-size: 6px; }.ma-issue-row strong { color: #a2a5b0; font-size: 7px; }.ma-issue-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 10px; font-weight: 800; }.ma-issue-icon--amber { color: #bb7614; background: #fff2db; }.ma-issue-icon--red { color: #d24e65; background: #ffe6eb; }.ma-issue-icon--blue { color: #259d7f; background: #ddf8ed; }
.ma-screen-card--chart { margin-top: 9px; }.ma-loss-chart { height: 108px; display: flex; justify-content: space-around; align-items: end; gap: 8px; padding: 10px 10px 0; background: repeating-linear-gradient(to top, #edf0f5 0 1px, transparent 1px 26px); }.ma-loss-chart i { width: 22%; height: var(--bar); background: var(--shade); border-radius: 3px 3px 0 0; }.ma-chart-labels { display: flex; justify-content: space-around; color: #8b8e9c; font-size: 5px; margin-top: 6px; }
.ma-screen--tablet { height: 100%; display: flex; border-radius: 13px; background: #f7f8fb; font-size: 8px; }
.ma-tablet-sidebar { width: 37px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 14px 0 9px; color: #9b9dae; border-right: 1px solid #e6e8ef; background: #fff; font-size: 12px; }.ma-tablet-sidebar .ma-app-logo { font-size: 15px; margin-bottom: 10px; }.ma-sidebar-bottom { margin-top: auto; }
.ma-tablet-main { flex: 1; min-width: 0; padding: 0 13px; overflow: hidden; }.ma-tablet-top { height: 37px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebecf1; color: #9296a4; font-size: 7px; }.ma-tablet-top b { color: #383c4e; font-weight: 600; }.ma-tablet-title { display: flex; align-items: end; justify-content: space-between; margin-top: 17px; }.ma-tablet-title div { display: flex; flex-direction: column; gap: 5px; }.ma-tablet-title small { color: #8263cf; font-size: 6px; font-weight: 800; letter-spacing: .12em !important; }.ma-tablet-title strong { font-size: 19px; letter-spacing: -.04em !important; }.ma-tablet-title > span { padding: 6px 9px; border: 1px solid #e5e6ee; border-radius: 6px; background: #fff; color: #7c8091; font-size: 7px; }
.ma-tablet-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 15px; }.ma-tablet-kpis div { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 11px; border: 1px solid #e8e8ef; border-radius: 8px; background: #fff; }.ma-tablet-kpis small { color: #8e93a2; font-size: 6px; }.ma-tablet-kpis strong { font-size: 18px; line-height: 1.1; letter-spacing: -.045em !important; }.ma-tablet-kpis em { color: #1aab7d; font-size: 5.5px; font-style: normal; }.ma-tablet-kpis div:nth-child(3) em { color: #bc8b2f; }
.ma-tablet-grid { display: grid; grid-template-columns: 1.22fr 1fr; gap: 7px; margin-top: 7px; }.ma-tablet-panel { min-height: 173px; padding: 11px; border: 1px solid #e8e8ef; border-radius: 8px; background: #fff; }.ma-tablet-panel .ma-card-title { font-size: 8px; }.ma-tablet-bars { height: 119px; display: flex; align-items: end; justify-content: space-around; gap: 14px; padding: 11px 10px 0; background: repeating-linear-gradient(to top, #edf0f5 0 1px, transparent 1px 25px); }.ma-tablet-bars div { height: 100%; width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: end; }.ma-tablet-bars i { width: 24px; height: var(--bar); background: linear-gradient(#84c4ff,#557be0); border-radius: 3px 3px 0 0; }.ma-tablet-bars small { margin-top: 5px; color: #898d9e; font-size: 5.5px; white-space: nowrap; }.ma-tablet-state { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #eff0f3; color: #5e6373; font-size: 6.5px; }.ma-tablet-state:last-child { border: 0; }.ma-tablet-state span { display: flex; align-items: center; gap: 5px; }.ma-tablet-state b { font-size: 6px; font-weight: 600; white-space: nowrap; }.ma-tablet-bottom { display: flex; justify-content: space-between; margin-top: 9px; color: #979cab; font-size: 5.5px; }.ma-tablet-bottom span:first-child { color: #3e9a78; }.ma-tablet-bottom .ma-dot { margin-right: 4px; }
.ma-screen--tablet-dark { color: #f0f0f6; background: #1d1d24; }.ma-screen--tablet-dark .ma-tablet-sidebar, .ma-screen--tablet-dark .ma-tablet-title > span, .ma-screen--tablet-dark .ma-tablet-kpis div, .ma-screen--tablet-dark .ma-tablet-panel { background: #26262f; border-color: #393942; }.ma-screen--tablet-dark .ma-tablet-top, .ma-screen--tablet-dark .ma-tablet-state { border-color: #393942; }.ma-screen--tablet-dark .ma-tablet-top b, .ma-screen--tablet-dark .ma-tablet-sidebar .ma-app-logo, .ma-screen--tablet-dark .ma-tablet-state { color: #e5e6ed; }.ma-screen--tablet-dark .ma-tablet-bars { background: repeating-linear-gradient(to top, #383942 0 1px, transparent 1px 25px); }
.ma-device--hero-tablet { position: absolute; right: -95px; top: 105px; transform: rotate(6deg); }.ma-device--hero-phone { position: absolute; left: 15px; top: 86px; z-index: 2; transform: rotate(-8deg); }

.ma-questions { max-width: 1320px; width: min(100% - 72px, 1320px); margin: auto; padding: 112px 0 118px; }.ma-section-heading { max-width: 720px; margin-bottom: 42px; }.ma-section-heading h2, .ma-showcase h2 { margin: 14px 0 16px; color: #191923; font-size: clamp(2.25rem,3.2vw,3.5rem); line-height: 1.1; letter-spacing: -.045em !important; font-weight: 720; }.ma-section-heading > p:not(.ma-eyebrow), .ma-showcase-copy > p:not(.ma-eyebrow) { color: #6c6d79; font-size: 1.05rem; line-height: 1.7; }
.ma-questions .ma-eyebrow, .ma-showcase .ma-eyebrow { color: #7656bd; }
.ma-question-demo-note { display: inline-flex; margin-top: 17px; padding: 6px 10px; border: 1px solid #e7e2f0; border-radius: 20px; color: #847990; background: #f9f7fc; font-size: .7rem; font-weight: 600; }
.ma-question-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ma-question-card { min-width: 0; min-height: 355px; display: flex; flex-direction: column; gap: 18px; padding: 23px; overflow: hidden; border: 1px solid #e8e7ed; border-radius: 19px; background: #fff; box-shadow: 0 8px 25px rgba(30,27,57,.035); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ma-question-card:hover { transform: translateY(-3px); border-color: #d4cde8; box-shadow: 0 20px 40px rgba(30,27,57,.09); }
.ma-question-top { display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.ma-question-number { color: #9d9ba8; font: 700 .69rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em !important; }
.ma-question-glyph { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #7656bd; background: #f1ecfc; font-size: 1rem; font-weight: 700; }
.ma-question-copy { margin-top: auto; }
.ma-question-card h3 { max-width: 320px; font-size: 1.2rem; line-height: 1.26; letter-spacing: -.025em !important; }
.ma-question-card p { max-width: 480px; margin-top: 8px; color: #737481; font-size: .88rem; line-height: 1.55; }
.ma-question-visual { height: 160px; flex: none; overflow: hidden; border: 1px solid #f0eef5; border-radius: 12px; background: #faf9fc; }
.ma-question-card--featured { grid-column: span 2; color: #fff; background: linear-gradient(128deg,#3b2a83,#6f4cc4 72%,#8566d9); border-color: #5b45a0; }
.ma-question-card--featured .ma-question-number, .ma-question-card--featured h3 { color: #fff; }
.ma-question-card--featured p { color: #e1d9ff; }
.ma-visual-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; color: #e6ddff; font: 700 .62rem/1 ui-monospace,monospace; letter-spacing: .1em !important; }
.ma-visual-live i { width: 6px; height: 6px; border-radius: 50%; background: #83ebc2; box-shadow: 0 0 9px #83ebc2; }
.ma-visual-production { display: grid; grid-template-columns: minmax(145px,.8fr) minmax(220px,1.2fr); grid-template-rows: 1fr auto; gap: 0 18px; padding: 17px 20px 14px; border-color: rgba(255,255,255,.17); background: rgba(10,7,38,.24); }
.ma-production-total { display: flex; flex-direction: column; align-items: start; justify-content: center; grid-row: 1/3; }
.ma-production-total small { color: #c9bdf9; font-size: .61rem; font-weight: 700; letter-spacing: .1em !important; }
.ma-production-total strong { margin: 8px 0 2px; font-size: clamp(2rem,3.4vw,3.15rem); line-height: 1; letter-spacing: -.06em !important; white-space: nowrap; }
.ma-production-total strong span { font-size: .78rem; font-weight: 500; }
.ma-production-total em { color: #a6f0d1; font-size: .78rem; font-style: normal; font-weight: 700; }
.ma-production-chart { height: 98px; display: flex; align-items: end; gap: 5px; padding: 0 0 2px; border-bottom: 1px solid rgba(255,255,255,.3); background: repeating-linear-gradient(to top,rgba(255,255,255,.08) 0 1px,transparent 1px 33px); }
.ma-production-chart i { display: block; flex: 1; height: var(--h); min-width: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(#c3acff,#9077ec); }
.ma-production-chart i:last-child { background: #9af0c8; }
.ma-production-foot { display: flex; justify-content: space-between; padding-top: 6px; color: #c3b8ea; font-size: .57rem; }
.ma-visual-oee { display: flex; align-items: center; justify-content: center; gap: 20px; }
.ma-oee-ring { width: 127px; height: 127px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#8060d7 0 84.6%,#e9e3f5 84.6% 100%); }
.ma-oee-ring > div { width: 99px; height: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #faf9fc; }
.ma-oee-ring strong { font-size: 1.46rem; line-height: 1; letter-spacing: -.06em !important; }
.ma-oee-ring small { margin-top: 4px; color: #8b8697; font-size: .6rem; letter-spacing: .09em !important; }
.ma-oee-legend { display: flex; flex-direction: column; gap: 9px; min-width: 90px; }
.ma-oee-legend span { display: flex; align-items: center; gap: 6px; color: #7a7687; font-size: .69rem; }
.ma-oee-legend i { width: 6px; height: 6px; border-radius: 50%; background: #977de0; }
.ma-oee-legend span:nth-child(2) i { background: #67a9e7; }.ma-oee-legend span:nth-child(3) i { background: #4cce9d; }
.ma-oee-legend b { margin-left: auto; color: #373144; }
.ma-visual-products { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 17px; }
.ma-visual-products > div { display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: center; }
.ma-visual-products span { display: flex; align-items: center; gap: 6px; color: #4b4755; font-size: .68rem; font-weight: 600; }
.ma-visual-products span i { width: 7px; height: 7px; border-radius: 2px; background: #7959ce; }
.ma-visual-products > div:nth-child(2) span i { background: #9b84df; }.ma-visual-products > div:nth-child(3) span i { background: #c5b4ed; }
.ma-visual-products b { color: #403950; font-size: .68rem; }
.ma-visual-products em { grid-column: 1/-1; width: var(--w); height: 6px; border-radius: 6px; background: linear-gradient(90deg,#7050c3,#a38be0); }
.ma-visual-products > div:nth-child(2) em { background: linear-gradient(90deg,#8a70d0,#b4a1ea); }.ma-visual-products > div:nth-child(3) em { background: #c6b7ed; }
.ma-visual-trend { position: relative; padding: 16px 16px 0; background: #f5fbf8; border-color: #e6f3ec; }
.ma-trend-head { display: flex; justify-content: space-between; color: #198563; }
.ma-trend-head strong { font-size: 1.75rem; line-height: 1; letter-spacing: -.06em !important; }.ma-trend-head span { font-size: 1.5rem; line-height: 1; }
.ma-visual-trend svg { width: 100%; height: 100px; margin-top: 5px; }
.ma-visual-deviation { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 17px; background: #fff9f7; border-color: #f7eae5; }
.ma-visual-deviation > div { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; }
.ma-visual-deviation span { color: #a38c87; font-size: .59rem; font-weight: 700; }
.ma-visual-deviation i { width: var(--w); height: 8px; border-radius: 8px; background: #dcd6d8; }.ma-visual-deviation > div:nth-child(2) i { background: #ed937e; }
.ma-visual-deviation b { color: #635857; font-size: .64rem; }
.ma-visual-deviation > strong { align-self: end; color: #c96755; font-size: 1.55rem; line-height: 1; letter-spacing: -.055em !important; }.ma-visual-deviation > strong small { font-size: .65rem; }
.ma-question-card--issues { grid-column: 1/-1; min-height: 235px; display: grid; grid-template-columns: minmax(230px,.8fr) minmax(380px,1.2fr); grid-template-rows: 30px 1fr; column-gap: 35px; }
.ma-question-card--issues .ma-question-top { grid-column: 1; grid-row: 1; }.ma-question-card--issues .ma-question-copy { grid-column: 1; grid-row: 2; align-self: end; }.ma-question-card--issues .ma-question-copy h3 { max-width: 300px; }
.ma-visual-issues { grid-column: 2; grid-row: 1/3; height: auto; display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 17px 20px; background: #faf8fd; }
.ma-visual-issues > div { display: grid; grid-template-columns: 22px 100px 1fr 48px; gap: 12px; align-items: center; }
.ma-visual-issues span { color: #a391be; font: 700 .65rem/1 ui-monospace,monospace; }.ma-visual-issues b { color: #4a405a; font-size: .7rem; }.ma-visual-issues i { width: var(--w); height: 8px; border-radius: 8px; background: #7657cc; }.ma-visual-issues > div:nth-child(2) i { background: #a18bdc; }.ma-visual-issues > div:nth-child(3) i { background: #c2b4e8; }.ma-visual-issues strong { color: #61586d; text-align: right; font-size: .68rem; }
@media (max-width: 820px) { .ma-question-card--featured, .ma-question-card--issues { grid-column: span 2; } }
@media (max-width: 600px) { .ma-question-card { min-height: 335px; padding: 19px; }.ma-question-card--featured, .ma-question-card--issues { grid-column: 1; }.ma-question-card--featured { min-height: 365px; }.ma-visual-production { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 6px; height: 170px; }.ma-production-total { grid-row: auto; }.ma-production-total strong { font-size: 2rem; }.ma-production-chart { height: 56px; }.ma-production-foot { display: none; }.ma-question-card--issues { display: flex; min-height: 355px; }.ma-visual-issues { height: 160px; }.ma-visual-issues > div { grid-template-columns: 17px 86px 1fr 40px; gap: 6px; }.ma-visual-issues b, .ma-visual-issues strong { font-size: .6rem; } }
.ma-showcase { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(550px,1.15fr); gap: 50px; align-items: center; min-height: 710px; padding: 100px max(36px, calc((100vw - 1320px)/2)); }.ma-showcase--phone { background: #f5f3fa; }.ma-showcase--tablet { min-height: 690px; background: #fff; }.ma-showcase-copy { max-width: 490px; }.ma-showcase h2 { margin-top: 15px; }.ma-feature-list { list-style: none; padding: 22px 0 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }.ma-feature-list li { position: relative; padding-left: 24px; color: #3b3b48; font-size: .98rem; font-weight: 580; }.ma-feature-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #7454c7; font-weight: 800; }.ma-showcase-devices { display: inline-block; margin-top: 34px; padding: 9px 13px; border: 1px solid #d9d3ee; border-radius: 30px; color: #634ab0; font-size: .78rem; font-weight: 700; }.ma-showcase-devices i { margin: 0 7px; color: #b7aacb; font-style: normal; }
.ma-phone-stage { position: relative; height: 540px; }.ma-stage-halo { position: absolute; width: 510px; height: 430px; top: 35px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle,#e0d9f3,transparent 70%); }.ma-device--showcase-iphone { position: absolute; z-index: 2; top: 17px; left: calc(50% - 200px); transform: rotate(-8deg) scale(1.08); }.ma-device--showcase-android { position: absolute; top: 38px; left: calc(50% + 23px); transform: rotate(8deg) scale(1.02); }.ma-stage-caption { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #8c879a; font-size: .72rem; white-space: nowrap; }
.ma-tablet-stage { position: relative; min-height: 460px; }.ma-device--ipad { position: absolute; z-index: 2; top: 115px; left: 0; transform: rotate(-5deg) scale(.9); transform-origin: left top; }.ma-device--android-tablet { position: absolute; top: 0; left: 100px; transform: rotate(6deg) scale(.9); transform-origin: left top; }.ma-tablet-stage .ma-stage-caption { bottom: 0; }
@media (max-width: 1120px) { .ma-hero-inner { grid-template-columns: minmax(350px,.9fr) minmax(450px,1.1fr); }.ma-hero h1 { font-size: clamp(3.5rem,5.2vw,5.4rem); }.ma-hero-art { transform: scale(.82); transform-origin: left bottom; width: 640px; }.ma-showcase { grid-template-columns: minmax(280px,.9fr) minmax(440px,1.1fr); gap: 20px; }.ma-tablet-stage { transform: scale(.78); transform-origin: left center; width: 680px; } }
@media (max-width: 820px) { .ma-hero-inner { display: block; width: min(100% - 40px, 700px); min-height: 0; }.ma-hero-copy { padding: 70px 0 20px; }.ma-hero h1 { font-size: clamp(3.5rem,9vw,5.5rem); }.ma-hero-art { height: 530px; transform: scale(.8); transform-origin: left top; }.ma-hero-bottom { width: min(100% - 40px, 700px); }.ma-questions { width: min(100% - 40px,700px); padding: 80px 0; }.ma-question-grid { grid-template-columns: repeat(2,1fr); }.ma-showcase { display: flex; flex-direction: column; align-items: stretch; gap: 30px; padding: 80px 20px; }.ma-showcase-copy { max-width: 700px; width: 100%; margin: auto; }.ma-phone-stage, .ma-tablet-stage { width: min(100%,700px); margin: auto; }.ma-tablet-stage { transform: scale(.9); transform-origin: left top; margin-bottom: -40px; } }
@media (max-width: 600px) { .ma-hero h1 { font-size: clamp(3rem,13vw,4.5rem); }.ma-hero-lead { font-size: 1rem; }.ma-hero-actions { gap: 1rem; }.ma-platforms { margin-top: 2rem; }.ma-hero-art { width: 620px; height: 420px; transform: scale(.53); }.ma-device--hero-tablet { right: 0; top: 92px; }.ma-device--hero-phone { left: 0; top: 70px; }.ma-art-label { right: 50px; bottom: 60px; }.ma-hero-bottom { flex-wrap: wrap; font-size: .62rem; }.ma-question-grid { grid-template-columns: 1fr; }.ma-showcase h2,.ma-section-heading h2 { font-size: clamp(2rem,9vw,2.8rem); }.ma-phone-stage { height: 430px; transform: scale(.64); transform-origin: left top; width: 510px; margin-bottom: -155px; }.ma-device--showcase-iphone { left: 25px; }.ma-device--showcase-android { left: 240px; }.ma-tablet-stage { height: 470px; min-height: 470px; width: 610px; transform: scale(.5); margin-bottom: -235px; }.ma-device--ipad { top: 105px; left: 0; }.ma-device--android-tablet { left: 95px; } }
@media (max-width: 390px) { .ma-hero-art { transform: scale(.48); height: 365px; }.ma-phone-stage { transform: scale(.59); margin-bottom: -180px; }.ma-tablet-stage { transform: scale(.46); margin-bottom: -254px; } }
@media (max-width: 600px) { .ma-showcase--phone, .ma-showcase--tablet { padding-bottom: 130px; } }
@media (prefers-reduced-motion: reduce) { .ma-question-card { transition: none; }.ma-question-card:hover { transform: none; } }