/* The existing RMS case layout, scoped to Merchant Account; no global portfolio changes. */
.ma-page { --bg:#181818; --text:#f6f6f2; --muted:#a6a6a1; --line:rgba(255,255,255,.13); --accent:var(--color-interactive-on-dark); margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font-family-base); letter-spacing:var(--type-body-spacing); }
.ma-page *, .ma-placeholder, .ma-placeholder * { box-sizing:border-box; }
.ma-page a { color:inherit; text-decoration:none; }
.ma-page .profile { display:grid; align-items:center; }
.ma-page .profile-photo-frame { display:block; border-radius:50%; overflow:hidden; }
.ma-page .profile-photo { width:100%; height:100%; object-fit:cover; object-position:47% 38%; display:block; transform:scale(1.1); }
.ma-page .profile-name { margin:0; }
.ma-page .hero { width:min(1540px,calc(100% - 64px)); margin:0 auto; padding:64px 0 40px; display:grid; gap:64px; }
.ma-page .intro { display:block; }
.ma-page h1 { margin:0; max-width:1480px; font-size:var(--type-h1-size); line-height:var(--type-h1-line); font-weight:var(--type-h1-weight); letter-spacing:var(--type-h1-spacing); }
.ma-page .summary { margin:40px 0 0; max-width:900px; color:var(--muted); font-size:var(--type-body-size); line-height:var(--type-body-line); font-weight:var(--type-body-weight); letter-spacing:var(--type-body-spacing); }
.ma-page .ma-summary-intro { color:var(--text); }
.ma-page .visual { position:relative; aspect-ratio:5184/3123; margin:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#f4f4f3; }
.ma-page .visual > img { display:block; width:100%; height:auto; object-fit:contain; object-position:left top; }
.ma-page .visual:after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.ma-page .rms-case { width:min(1540px,calc(100% - 64px)); margin:0 auto; }
.ma-page .rms-section { padding-bottom:40px; }
.ma-page .rms-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.ma-page .rms-figure { min-width:0; margin:0; }
.ma-page .rms-frame { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#f4f4f3; }
.ma-page .rms-media-grid .rms-frame { aspect-ratio:1; }
.ma-page .rms-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; }
.ma-page .rms-caption { margin:12px 0 8px; color:var(--muted); font-size:var(--type-body-size); line-height:var(--type-body-line); font-weight:var(--type-body-weight); letter-spacing:var(--type-body-spacing); }
.ma-page .rms-caption a { color:var(--accent); text-decoration:none; }
.ma-page .rms-context-media { display:grid; gap:24px; }
.ma-page .rms-conclusion { padding-top:48px; }
.ma-page .rms-contact { padding-top:48px; border-top:1px solid var(--line); }

/* Survey uses the saved component, centered inside the existing wide media frame. */
.ma-page .ma-survey { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#DAD9FF; }
.ma-page .ma-survey > .survey-demo { width:84%; flex:none; letter-spacing:normal; }

/* Temporary production slots. Replace the complete placeholder with final media. */
.ma-placeholder { width:100%; height:100%; min-width:0; padding:48px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; background:var(--color-evidence); color:var(--color-ink); overflow-wrap:anywhere; }
.ma-placeholder-label { color:var(--color-accent-strong); font-size:var(--type-label-size); line-height:var(--type-label-line); font-weight:var(--type-label-weight); letter-spacing:var(--type-label-spacing); text-transform:uppercase; }
.ma-placeholder-copy { display:grid; gap:12px; max-width:760px; }
.ma-placeholder-copy strong { font-size:var(--type-h5-size); line-height:var(--type-h5-line); font-weight:var(--type-h5-weight); letter-spacing:var(--type-h5-spacing); }
.ma-placeholder-copy p { margin:0; color:color-mix(in srgb,var(--color-ink) 70%,transparent); font-size:var(--type-body-small-size); line-height:var(--type-body-small-line); font-weight:var(--type-body-small-weight); letter-spacing:var(--type-body-small-spacing); }

@media (max-width: 1199px) {
  .ma-page .hero { width:min(100% - 36px,980px); padding-top:40px; gap:40px; }
  .ma-page .summary { max-width:none; margin-top:32px; }
  .ma-page .rms-case { width:min(100% - 36px,980px); }
  .ma-page .rms-media-grid, .ma-page .rms-context-media { gap:16px; }
  .ma-page .rms-conclusion, .ma-page .rms-contact { padding-top:40px; }
  .ma-placeholder { padding:40px; }
}
@media (max-width: 767px) {
  .ma-page .hero { width:calc(100% - 28px); padding-top:32px; padding-bottom:24px; gap:32px; }
  .ma-page .summary { margin-top:24px; }
  .ma-page .visual { width:calc(100% + 28px); height:calc(113vw - 31px); margin-right:-14px; margin-left:-14px; padding:0 14px; border:0; border-radius:0; aspect-ratio:auto; overflow-x:auto; overflow-y:hidden; background:transparent; scroll-padding-inline:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ma-page .visual:after, .ma-page .visual::-webkit-scrollbar { display:none; }
  .ma-page .visual > img { width:auto; max-width:none; height:100%; border:1px solid var(--line); border-radius:20px; object-fit:contain; }
  /* Mobile Survey: square crop focused on the lower-right invitation, per supplied reference. */
  .ma-page .ma-survey-visual { width:100%; height:auto; aspect-ratio:1; margin:0; padding:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#DAD9FF; }
  .ma-page .ma-survey { position:absolute; inset:0; display:block; overflow:hidden; }
  .ma-page .ma-survey > .survey-demo { position:absolute; width:235.62%; right:23.5%; bottom:18.5%; }
  .ma-page .ma-survey .survey-demo__screen { transform:translateY(-18px); }
  .ma-page .visual .ma-placeholder { border:1px solid var(--line); border-radius:20px; }
  .ma-page .rms-case { width:calc(100% - 28px); }
  .ma-page .rms-media-grid { grid-template-columns:1fr; gap:40px; }
  .ma-page .rms-context-media { gap:40px; }
  .ma-page .rms-conclusion, .ma-page .rms-contact { padding-top:28px; }
  .ma-placeholder { padding:24px; gap:28px; }
}