/* Flagship research console and restored creative studio (Ali 2026-11-12). Prefix mx-. */

/* ===== Research & analytics ===== */
.mx-rc-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:end; }
.mx-rc-head .mx-h2 { margin-bottom:0; }
.mx-rc-body { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(28px,4vw,56px); align-items:center; }
.mx-rc-list { list-style:none; margin:0; padding:0; }
.mx-rc-cap { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; width:100%; padding:15px 0 0; border:0; border-top:1px solid var(--x-line); background:none; color:var(--x-ink); font:inherit; text-align:start; cursor:pointer; }
.mx-rc-n { font-size:13px; font-weight:800; color:var(--x-muted); padding-top:4px; transition:color .3s ease; }
.mx-rc-cap[aria-pressed="true"] .mx-rc-n { color:var(--x-gold); }
.mx-rc-txt { display:grid; gap:4px; }
.mx-rc-txt strong { font-size:clamp(17px,1.4vw,20px); color:var(--x-muted); transition:color .3s ease; }
.mx-rc-cap[aria-pressed="true"] .mx-rc-txt strong, .mx-rc-cap:hover .mx-rc-txt strong { color:var(--x-ink); }
.mx-rc-txt span { display:none; font-size:14.5px; line-height:1.7; color:var(--x-muted); }
.mx-rc-cap[aria-pressed="true"] .mx-rc-txt span { display:block; }
.mx-rc-cap .mx-bar { grid-column:1/-1; margin-top:14px; background:transparent; }
.mx-rc-console { border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:linear-gradient(160deg, rgba(22,30,46,.96), rgba(10,14,22,.98)); box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(60,120,255,.12); }
.mx-rc-bar { display:flex; align-items:center; gap:8px; height:46px; padding:0 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.mx-rc-bar i { width:10px; height:10px; border-radius:50%; background:#ff5f57; }
.mx-rc-bar i:nth-child(2) { background:#febc2e; } .mx-rc-bar i:nth-child(3) { background:#28c840; }
.mx-rc-bar b { margin-inline-start:10px; font-size:13px; color:var(--x-ink); }
.mx-rc-demo { margin-inline-start:auto; padding:3px 10px; border-radius:999px; border:1px solid rgba(242,181,107,.45); color:var(--x-gold); font-size:11.5px; font-weight:700; }
.mx-rc-views { position:relative; display:grid; min-height:390px; }
.mx-rc-view { grid-area:1/1; position:relative; padding:28px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.mx-rc-view.is-on { opacity:1; visibility:visible; transform:none; transition:opacity .5s ease, transform .5s ease; }
.mx-rc-shot { position:absolute; z-index:2; inset-block-start:18px; inset-inline-end:18px; width:92px; height:92px; border-radius:50%; overflow:hidden; border:2px solid var(--x-gold); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.mx-rc-shot img, .mx-rc-avatar img { width:100%; height:100%; object-fit:cover; }
/* 1 · competitor map */
.mx-rc-map { position:relative; height:340px; margin-inline-end:110px; border-inline-start:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18);
  background:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 25% 100%; }
.mx-rc-ax { position:absolute; font-size:12px; color:var(--x-muted); }
.mx-rc-ax.x { bottom:-24px; inset-inline-end:0; }
.mx-rc-ax.y { top:-22px; inset-inline-start:6px; }
.mx-rc-dot { position:absolute; left:var(--x); top:var(--y); width:max(var(--s), 64px); height:max(var(--s), 64px); white-space:nowrap; display:grid; place-items:center; border-radius:50%; background:rgba(110,150,220,.22); border:1px solid rgba(160,190,240,.5); color:#d5e0f0; font-size:11px; font-weight:700; transform:translate(-50%,-50%) scale(0); transition:transform .6s cubic-bezier(.2,.75,.1,1) calc(var(--d) * .12s); }
.mx-rc-view.is-on .mx-rc-dot { transform:translate(-50%,-50%) scale(1); }
.mx-rc-dot.you { background:linear-gradient(135deg,#f6c27e,#ef8a45); border-color:transparent; color:#1a0f08; font-size:14px; font-weight:800; box-shadow:0 0 0 10px rgba(239,138,69,.14), 0 0 40px rgba(239,138,69,.45); }
.mx-rc-gap { position:absolute; left:calc(var(--x) + 11%); top:calc(var(--y) - 3%); padding:4px 10px; border-radius:999px; border:1px dashed var(--x-gold); color:var(--x-gold); font-size:12px; font-weight:700; white-space:nowrap; opacity:0; transition:opacity .5s ease .8s; }
.mx-rc-view.is-on .mx-rc-gap { opacity:1; }
/* 2 · persona */
.mx-rc-persona { display:flex; gap:18px; align-items:center; padding:18px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.mx-rc-avatar { flex:none; width:104px; height:104px; border-radius:50%; overflow:hidden; border:2px solid var(--x-gold); }
.mx-rc-persona b { font-size:18px; color:var(--x-ink); }
.mx-rc-persona p { margin:6px 0 10px; font-size:14px; color:var(--x-muted); }
.mx-rc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.mx-rc-tags span { padding:4px 10px; border-radius:999px; border:1px solid rgba(242,181,107,.45); color:var(--x-gold); font-size:12px; font-weight:700; }
.mx-rc-bars { display:grid; gap:14px; margin-top:30px; }
.mx-rc-hbar { display:grid; grid-template-columns:96px minmax(0,1fr) 46px; align-items:center; gap:12px; font-size:13.5px; color:var(--x-ink); }
.mx-rc-hbar i { position:relative; height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.mx-rc-hbar i::after { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:0; border-radius:inherit; background:linear-gradient(90deg,#f6c27e,#ef8a45); transition:width 1s ease calc(.2s + var(--d) * .15s); }
.mx-rc-view.is-on .mx-rc-hbar i::after { width:var(--v); }
.mx-rc-hbar b { color:var(--x-gold); }
/* 3 · social listening */
.mx-rc-sent { display:flex; height:48px; margin-inline-end:110px; border-radius:12px; overflow:hidden; }
.mx-rc-sent span { flex:0 0 var(--v); display:flex; align-items:center; gap:4px; padding:0 12px; color:#fff; font-size:12.5px; white-space:nowrap; overflow:hidden; }
.mx-rc-sent .s0 { background:#1f9e72; } .mx-rc-sent .s1 { background:#5d6a80; } .mx-rc-sent .s2 { background:#c9483f; }
.mx-rc-words { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:28px 0; }
.mx-rc-words span { padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--x-ink); font-size:calc(var(--w) * 15px); font-weight:700; transform:scale(.8); opacity:0; transition:all .45s ease calc(var(--d) * .1s); }
.mx-rc-words span:first-child { color:var(--x-gold); }
.mx-rc-view.is-on .mx-rc-words span { transform:none; opacity:1; }
.mx-rc-comments { display:grid; gap:10px; }
.mx-rc-comments p { justify-self:start; margin:0; padding:10px 14px; border-radius:14px; border-start-start-radius:4px; background:rgba(31,158,114,.16); color:var(--x-ink); font-size:14px; }
.mx-rc-comments p.neg { background:rgba(201,72,63,.16); }
/* 4 · data trends */
.mx-rc-chart { display:block; width:calc(100% - 110px); height:190px; overflow:visible; }
.mx-rc-chart path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.mx-rc-chart .grid { stroke:rgba(255,255,255,.08); stroke-width:1; }
.mx-rc-chart .l1, .mx-rc-chart .l2 { stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s ease; }
.mx-rc-chart .l1 { stroke:#f2b56b; stroke-width:3; }
.mx-rc-chart .l2 { stroke:#5aa8ff; stroke-width:2.5; transition-delay:.2s; }
.mx-rc-view.is-on .mx-rc-chart .l1, .mx-rc-view.is-on .mx-rc-chart .l2 { stroke-dashoffset:0; }
.mx-rc-legend { display:flex; gap:16px; margin:12px 0 0; font-size:12.5px; color:var(--x-muted); }
.mx-rc-legend span::before { content:""; display:inline-block; width:14px; height:3px; margin-inline-end:6px; vertical-align:middle; border-radius:3px; }
.mx-rc-legend .a::before { background:#f2b56b; } .mx-rc-legend .b::before { background:#5aa8ff; }
.mx-rc-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; }
.mx-rc-kpis div { padding:14px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); opacity:0; transform:translateY(8px); transition:all .5s ease calc(.6s + var(--d) * .12s); }
.mx-rc-view.is-on .mx-rc-kpis div { opacity:1; transform:none; }
.mx-rc-kpis small { display:block; font-size:12px; color:var(--x-muted); }
.mx-rc-kpis b { font-size:clamp(20px,2vw,26px); color:var(--x-ink); }
/* 5 · message test */
.mx-rc-ab { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-inline-end:110px; margin-top:10px; }
.mx-rc-ad { position:relative; display:grid; gap:8px; padding:18px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.mx-rc-ad small { font-size:12px; font-weight:800; color:var(--x-gold); }
.mx-rc-ad p { margin:0; font-size:16px; font-weight:700; color:var(--x-ink); line-height:1.4; }
.mx-rc-ctr { font-size:12.5px; color:var(--x-muted); }
.mx-rc-ctr b { color:var(--x-ink); }
.mx-rc-ad i { position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.mx-rc-ad i::after { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:0; background:#7b879b; border-radius:inherit; transition:width 1s ease calc(.3s + var(--d) * .2s); }
.mx-rc-ad.win i::after { background:linear-gradient(90deg,#f6c27e,#ef8a45); }
.mx-rc-view.is-on .mx-rc-ad i::after { width:var(--v); }
.mx-rc-ad.win { border-color:rgba(242,181,107,.6); box-shadow:0 0 30px rgba(242,181,107,.14); }
.mx-rc-ad em { position:absolute; inset-block-start:-11px; inset-inline-end:12px; padding:3px 10px; border-radius:999px; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-style:normal; font-size:11.5px; font-weight:800; }
/* 6 · funnel dashboard */
.mx-rc-v5 { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:center; padding-inline-end:130px; }
.mx-rc-funnel { display:grid; gap:10px; }
.mx-rc-funnel div { display:flex; justify-content:space-between; align-items:center; width:var(--v); margin-inline:auto; padding:11px 14px; border-radius:10px; background:linear-gradient(90deg, rgba(246,194,126,calc(1 - var(--d) * .18)), rgba(239,138,69,calc(1 - var(--d) * .18))); color:#1a0f08; font-size:13px; font-weight:800; transform:scaleX(.2); opacity:0; transition:all .6s cubic-bezier(.2,.75,.1,1) calc(var(--d) * .14s); }
.mx-rc-view.is-on .mx-rc-funnel div { transform:none; opacity:1; }
.mx-rc-donut { display:grid; justify-items:center; gap:8px; }
.mx-rc-donut svg { width:130px; height:130px; transform:rotate(-90deg); }
.mx-rc-donut circle { fill:none; stroke-width:6; }
.mx-rc-donut .r0 { stroke:#f2b56b; stroke-dasharray:52 48; }
.mx-rc-donut .r1 { stroke:#5aa8ff; stroke-dasharray:30 70; stroke-dashoffset:-52; }
.mx-rc-donut .r2 { stroke:#1f9e72; stroke-dasharray:18 82; stroke-dashoffset:-82; }
.mx-rc-donut small { font-size:12.5px; color:var(--x-muted); }

/* ===== Creative studio (purple) ===== */
.mh-v2.mx-s-creative-studio { --x-bg:#140e25; --x-bg2:#1b1330; --x-ink:#faf7ff; --x-muted:#c9bfe0; --x-gold:#f2b56b; --x-gold2:#f2b56b; --x-line:#352a52; --x-card:#1d1535; --x-shadow:0 30px 70px rgba(5,0,20,.55);
  background:radial-gradient(ellipse at 80% 15%, #482575 0, transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(200,70,160,.18), transparent 55%), #140e25; }
.mx-cs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,90px); align-items:center; }
.mh-section.mh-v2 .mx-cs-title { font-size:clamp(38px,4.6vw,72px); }
.mx-cs-list { list-style:none; margin:28px 0 22px; padding:0; }
.mx-cs-cap { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:center; width:100%; padding:13px 0 0; border:0; border-top:1px solid var(--x-line); background:none; color:var(--x-ink); font:inherit; text-align:start; cursor:pointer; }
.mx-cs-ico { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06); color:#d9b8ff; transition:background .3s ease, color .3s ease; }
.mx-cs-ico svg { width:20px; height:20px; }
.mx-cs-cap[aria-pressed="true"] .mx-cs-ico { background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; }
.mx-cs-txt { display:grid; gap:2px; }
.mx-cs-txt strong { font-size:18px; color:var(--x-muted); transition:color .3s ease; }
.mx-cs-cap[aria-pressed="true"] .mx-cs-txt strong, .mx-cs-cap:hover .mx-cs-txt strong { color:var(--x-ink); }
.mx-cs-txt span { display:none; font-size:14px; line-height:1.6; color:var(--x-muted); }
.mx-cs-cap[aria-pressed="true"] .mx-cs-txt span { display:block; }
.mx-cs-cap .mx-bar { grid-column:1/-1; margin-top:13px; background:transparent; }
.mx-cs-more { margin:0 0 22px; font-size:14px; color:var(--x-muted); }
.mx-cs-more a { color:var(--x-gold); font-weight:700; text-underline-offset:4px; }
.mx-cs .mx-btn { color:var(--x-ink); }
.mx-cs .mx-btn:hover { color:#1a0f08; }
.mx-cs-stage { position:relative; display:grid; place-items:center; min-height:clamp(480px,46vw,640px); }
.mx-cs-glow { position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(170,90,255,.35), rgba(255,120,180,.12) 45%, transparent 70%); filter:blur(20px); }
.mx-cs-finder { position:relative; width:min(420px, 100%); aspect-ratio:4/5; border-radius:26px; overflow:hidden; background:#000; box-shadow:0 50px 100px rgba(5,0,20,.7), 0 0 0 1px rgba(255,255,255,.14); }
.mx-cs-shot { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.mx-cs-shot.is-on { opacity:1; }
.mx-cs-shot img, .mx-cs-shot video { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform 3.5s ease; }
.mx-cs-shot.is-on img, .mx-cs-shot.is-on video { transform:scale(1); }
.mx-cs-label { position:absolute; z-index:2; bottom:18px; inset-inline-start:18px; display:grid; gap:2px; padding:8px 12px; border-radius:12px; background:rgba(10,4,24,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.mx-cs-label b { font-size:12px; letter-spacing:.14em; color:var(--x-gold); direction:ltr; }
.mx-cs-label small { font-size:12px; color:#fff; }
.mx-cs-corner { position:absolute; z-index:2; width:28px; height:28px; border:2px solid rgba(255,255,255,.85); }
.mx-cs-corner.tl { top:14px; left:14px; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.mx-cs-corner.tr { top:14px; right:14px; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.mx-cs-corner.bl { bottom:14px; left:14px; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.mx-cs-corner.br { bottom:14px; right:14px; border-left:0; border-top:0; border-radius:0 0 8px 0; }
.mx-cs-rec { position:absolute; z-index:2; top:22px; right:52px; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#fff; letter-spacing:.08em; direction:ltr; }
.mx-cs-rec i { width:9px; height:9px; border-radius:50%; background:#ff3b3b; animation:mx-blink 1.2s steps(2) infinite; }
.mx-cs-tc { position:absolute; z-index:2; top:22px; left:52px; font-size:12px; font-family:ui-monospace, Consolas, monospace; color:rgba(255,255,255,.85); }

@media (max-width:1023px) {
  .mx-rc-head, .mx-rc-body, .mx-cs { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:719px) {
  .mx-rc-view { padding:20px 16px; }
  .mx-rc-shot { width:64px; height:64px; inset-block-start:12px; inset-inline-end:12px; }
  .mx-rc-map, .mx-rc-sent, .mx-rc-ab { margin-inline-end:0; }
  .mx-rc-map { height:280px; margin-top:64px; }
  .mx-rc-sent { margin-top:70px; }
  .mx-rc-sent span { font-size:11px; padding:0 6px; }
  .mx-rc-chart { width:100%; margin-top:64px; }
  .mx-rc-ab { grid-template-columns:minmax(0,1fr); margin-top:70px; }
  .mx-rc-v5 { grid-template-columns:minmax(0,1fr); padding-inline-end:16px; padding-top:84px; }
  .mx-rc-kpis b { font-size:18px; }
  .mx-rc-avatar { width:76px; height:76px; }
  .mx-cs-stage { min-height:0; padding-block:10px; }
  .mx-cs-finder { width:min(320px, 100%); }
}
@media (prefers-reduced-motion:reduce) {
  .mx-rc-dot, .mx-rc-words span, .mx-rc-kpis div, .mx-rc-funnel div { transform:none !important; opacity:1 !important; }
  .mx-rc-chart .l1, .mx-rc-chart .l2 { stroke-dashoffset:0; }
  .mx-rc-hbar i::after { width:var(--v); }
  .mx-rc-ad i::after { width:var(--v); }
}
.mx-rc-view:not(.mx-rc-v5) { display:flex; flex-direction:column; justify-content:center; } .mx-rc-v5 { align-content:center; }
@media (max-width:719px) {
  .mx-rc-view:not(.mx-rc-v5) { justify-content:flex-start; }
  .mx-rc-views { min-height:0; }
  .mx-rc-bar i { display:none; }
  .mx-rc-bar b { margin-inline-start:0; white-space:nowrap; font-size:12px; }
  .mx-rc-demo { white-space:nowrap; font-size:11px; }
  .mx-rc-dot { width:max(calc(var(--s) * .72), 46px); height:max(calc(var(--s) * .72), 46px); font-size:9.5px; }
  .mx-rc-dot.you { font-size:12px; }
  .mx-rc-gap { font-size:10.5px; left:calc(var(--x) + 15%); top:calc(var(--y) - 6%); }
  .mx-rc-map { height:250px; }
}
@media (max-width:719px) { .mx-rc-funnel div { width:calc(52% + var(--v) * .48); white-space:nowrap; } .mx-rc-donut { display:none; } .mx-rc-persona { flex-direction:column; text-align:center; } .mx-rc-tags { justify-content:center; } }
/* Ali 2026-11-12: a large photo beside each board instead of a small circle; no empty space; funnel text on one line */
.mx-rc-views { min-height:0; }
.mx-rc-view, .mx-rc-view:not(.mx-rc-v5), .mx-rc-v5 { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-auto-rows:auto; gap:16px 24px; align-content:center; align-items:center; padding:22px; padding-inline-end:22px; }
.mx-rc-view > :not(.mx-rc-shot) { grid-column:2; }
.mx-rc-shot { position:relative; inset:auto; grid-column:1; grid-row:1 / span 6; align-self:stretch; width:auto; height:auto; min-height:360px; border-radius:18px; border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.mx-rc-shot::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(to top, rgba(8,12,20,.55), transparent 45%); }
.mx-rc-map, .mx-rc-sent, .mx-rc-ab { margin-inline-end:0; }
.mx-rc-map { height:300px; }
.mx-rc-chart { width:100%; }
.mx-rc-ab { grid-template-columns:minmax(0,1fr); margin-top:0; }
.mx-rc-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mx-rc-kpis div { padding:10px; }
.mx-rc-funnel div { width:calc(44% + var(--v) * .56); white-space:nowrap; }
.mx-rc-donut { justify-self:center; }
.mx-rc-donut svg { width:96px; height:96px; }
.mx-rc-persona { padding:16px; }
.mx-rc-hbar { grid-template-columns:80px minmax(0,1fr) 40px; }
@media (max-width:719px) {
  .mx-rc-view, .mx-rc-view:not(.mx-rc-v5), .mx-rc-v5 { grid-template-columns:minmax(0,1fr); padding:16px; }
  .mx-rc-view > :not(.mx-rc-shot) { grid-column:1; }
  .mx-rc-shot { grid-row:auto; min-height:170px; height:170px; }
  .mx-rc-map, .mx-rc-sent, .mx-rc-chart, .mx-rc-ab { margin-top:0; }
  .mx-rc-map { height:230px; }
  .mx-rc-v5 { padding-top:16px; }
}
@media (max-width:719px) {
  .mx-rc-view, .mx-rc-view:not(.mx-rc-v5), .mx-rc-v5 { align-content:start; }
  .mx-rc-funnel div { width:calc(66% + var(--v) * .34); gap:10px; }
}
@media (max-width:719px) { .mx-rc-donut { display:grid; margin-top:6px; } .mx-rc-donut svg { width:110px; height:110px; } }
/* Final check 2026-11-12, tablet (720-1023px) */
@media (min-width:720px) and (max-width:1023px) {
  /* Journey: portrait photos stay beside the text instead of a thin cropped strip */
  .mx-jr-card { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .mx-jr-photo { min-height:340px; }
  .mx-jr-photo img { object-position:50% 25%; }
  /* How we work: taller steps so every title and line fits, no broken words */
  .mx-hw-stage { height:auto; min-height:0; }
  .mx-hw-step { height:calc(230px + var(--k) * 34px); padding:16px 12px 14px; }
  .mx-hw-step strong { font-size:14.5px; line-height:1.4; overflow-wrap:normal; word-break:normal; hyphens:none; }
  .mx-hw-body { font-size:12.5px; line-height:1.7; }
  .mx-hw-big { font-size:44px; }
}
/* Final check: the first step's text (longer in English) needs more height on desktop */
@media (min-width:1024px) { .mx-hw-step { height:calc(212px + var(--k) * 48px); } }
/* Final check: the typed question wraps on phones instead of being cut with "…" */
@media (max-width:719px) {
  .mx-ri-q { white-space:normal; text-overflow:clip; overflow:visible; font-size:15.5px; line-height:1.45; }
  .mx-ri-search { border-radius:26px; align-items:center; }
}
/* In-page video player for the creative studio (Ali 2026-11-12) */
.mx-cs-finder[data-mx-watch-area] { cursor:pointer; }
.mx-cs-watch { position:absolute; z-index:5; inset-block-end:clamp(18px,4%,34px); inset-inline-start:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(20,10,40,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font:inherit; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.35); transition:background .2s, transform .2s; }
[dir=rtl] .mx-cs-watch { transform:translateX(50%); }
.mx-cs-watch span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f2b56b; color:#1a0f08; font-size:12px; }
.mx-cs-watch:hover { background:rgba(60,30,110,.8); }
.mx-cs-watch:focus-visible { outline:3px solid #f2b56b; outline-offset:4px; }
.mx-cs-watch[hidden] { display:none; }
.mx-player { padding:0; border:0; background:transparent; max-width:min(92vw,460px); width:100%; overflow:visible; }
.mx-player::backdrop { background:rgba(6,4,14,.82); backdrop-filter:blur(6px); }
.mx-player-box { position:relative; border-radius:20px; overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.mx-player video { display:block; width:100%; max-height:80vh; aspect-ratio:9/16; background:#000; }
.mx-player-t { margin:0; padding:12px 16px; background:#140b26; color:#efe9ff; font-size:14px; line-height:1.6; }
.mx-player-x { position:absolute; z-index:2; inset-block-start:10px; inset-inline-end:10px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.mx-player-x:focus-visible { outline:3px solid #f2b56b; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .mx-cs-watch { transition:none; } }
.mx-player { max-width:min(92vw,460px,calc(78vh * 9 / 16)); } .mx-player video { max-height:78vh; }
/* Work gallery -> case-study pages (2026-11-13) */
.mx-wk-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(18px, 2.4vw, 28px); }
.mx-wk-cases-l { font-weight: 700; color: var(--x-gold); margin-inline-end: 4px; }
.mx-wk-cases a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--x-line); background: var(--x-card); color: var(--x-ink); font-weight: 700; text-decoration: none; transition: border-color .2s, transform .2s; }
.mx-wk-cases a:hover { border-color: var(--x-gold); transform: translateY(-2px); }
.mx-wk-cases a:focus-visible { outline: 3px solid var(--x-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mx-wk-cases a { transition: none; } .mx-wk-cases a:hover { transform: none; } }

/* ---------- sectors as two moving photo bands (2026-11-13, About v2 patterns) ---------- */
.mx-sb-head { text-align: center; display: grid; justify-items: center; }
.mx-sb-head .mx-body { margin-inline: auto; }
.mx-sb { display: grid; gap: 26px; margin-top: clamp(26px, 4vw, 50px); }
.mx-sb-band { display: flex; overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mx-sb-track { flex: none; display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-inline-end: clamp(28px, 4vw, 56px); margin: 0; padding-block: 6px; list-style: none; animation: mx-sb-marq 50s linear infinite; }
.mx-sb-band--rev .mx-sb-track { animation-direction: reverse; }
.mx-sb-band:hover .mx-sb-track, [data-paused="true"] .mx-sb-track { animation-play-state: paused; }
@keyframes mx-sb-marq { to { transform: translateX(-100%); } }
.mx-sb-item { display: flex; align-items: center; gap: 18px; }
[dir="rtl"] .mx-sb-item { direction: rtl; }
.mx-sb-ph { flex: none; display: block; overflow: hidden; width: 140px; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 22px 44px -24px rgba(12,30,54,.6); }
.mx-sb-item--1 .mx-sb-ph { width: 122px; aspect-ratio: 4 / 5; border-radius: 999px 999px 22px 22px; }
.mx-sb-item--2 .mx-sb-ph { border-radius: 62% 10% 62% 10%; }
.mx-sb-ph img { width: 100%; height: 100%; object-fit: cover; }
.mx-sb-cap { display: grid; gap: 2px; max-width: 240px; }
.mx-sb-cap b { font-size: 19px; font-weight: 800; line-height: 1.3; }
.mx-sb-cap small { font-size: 15px; line-height: 1.5; opacity: .78; }
.mx-sb-cap em { font-style: normal; font-size: 13px; font-weight: 700; color: #b4530a; }
:root[data-site-theme="dark"] .mx-sb-cap em { color: #ffb35c; }
.mx-sb-ctl { display: flex; justify-content: flex-end; }
@media (max-width: 600px) { .mx-sb-ph { width: 104px; } .mx-sb-item--1 .mx-sb-ph { width: 92px; } .mx-sb-cap { max-width: 180px; } }
@media (prefers-reduced-motion: reduce) {
  .mx-sb-band { -webkit-mask-image: none; mask-image: none; }
  .mx-sb-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .mx-sb-track[aria-hidden="true"], .mx-sb-ctl { display: none; }
}