/* Mindsutra Product Quick Overview — refined conversion prototype
   Scoped component; uses the current Mindsutra purple / warm-gold / green theme.
*/
:root{
  --mst-qo-purple:#4b2d67;
  --mst-qo-purple-2:#71457f;
  --mst-qo-gold:#b97825;
  --mst-qo-gold-dark:#743410;
  --mst-qo-green:#176b58;
  --mst-qo-ink:#241a29;
  --mst-qo-muted:#696159;
  --mst-qo-line:rgba(75,45,103,.14);
  --mst-qo-warm:#fff8ed;
}

/* ---------- Card action rows ---------- */
.mst-qo-trigger{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:44px;
  line-height:1.2;
  font-weight:900;
  transition:filter .15s ease,transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.mst-qo-trigger:hover{transform:translateY(-1px)}
.mst-qo-trigger:focus-visible{outline:3px solid rgba(193,138,46,.25);outline-offset:2px}

/* Homepage: Quick Overview deliberately uses the SAME visual language as the
   existing purple "View Product Details" primary action. */
.mst-home .mst-qo-trigger{
  min-height:42px;
  padding:8px 10px;
  border:1px solid rgba(75,45,103,.24);
  border-radius:10px;
  background:#f4edf7;
  color:#4b2d67;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  font-size:.76rem;
}
.mst-home .mst-qo-trigger:hover,.mst-home .mst-qo-trigger:focus-visible{
  background:#eadff0;
  border-color:rgba(75,45,103,.38);
  color:#352047;
  filter:none;
}
.mst-home .mst-discovery-actions.mst-qo-actions-enhanced,
.mst-home .mst-android-app-actions.mst-qo-actions-enhanced{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:7px!important;
  align-items:stretch!important;
}
.mst-home .mst-discovery-actions.mst-qo-actions-enhanced>*,
.mst-home .mst-android-app-actions.mst-qo-actions-enhanced>*{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  min-height:44px!important;
}
.mst-home .mst-qo-actions-enhanced .mst-qo-explore{grid-column:1/-1!important}

/* Windows catalogue: match the current Details button rather than inventing
   a new colour treatment. */
.mst-catalogue-page--windows .actions.mst-qo-actions-enhanced{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:9px!important;
}
.mst-catalogue-page--windows .actions.mst-qo-actions-enhanced .mst-qo-explore{grid-column:1/-1!important}
.mst-catalogue-page--windows .actions .mst-qo-trigger{
  min-height:46px;
  padding:9px 12px;
  border:1px solid #c1681e!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fffefa 0%,#fff8ed 100%)!important;
  color:#743410!important;
  box-shadow:0 7px 17px rgba(151,83,24,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
  font-size:.82rem;
}
.mst-catalogue-page--windows .actions .mst-qo-trigger:is(:hover,:focus-visible){
  border-color:#9f470c!important;
  background:linear-gradient(180deg,#fff8ec 0%,#f8e4c7 100%)!important;
  color:#622b0d!important;
  box-shadow:0 11px 21px rgba(151,83,24,.15)!important;
  filter:none!important;
}

/* Android catalogue: match the existing non-primary Details treatment. */
#mst-android-catalog .aa-actions.mst-qo-actions-enhanced{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  justify-content:stretch!important;
  width:100%;
  gap:8px;
}
#mst-android-catalog .aa-actions.mst-qo-actions-enhanced>*{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  margin:0!important;
}
#mst-android-catalog .aa-actions.mst-qo-actions-enhanced .mst-qo-explore{grid-column:1/-1!important}
#mst-android-catalog .aa-actions .mst-qo-trigger{
  padding:8px 13px;
  border:1px solid var(--aa-p3-line,rgba(113,69,127,.22));
  border-radius:11px;
  background:#fff;
  color:var(--aa-p3-plum-dark,#4b2d67);
  font-size:.82rem;
}

/* ---------- Modal ---------- */
.mst-qo-open{overflow:hidden}
.mst-qo-modal[hidden]{display:none!important}
.mst-qo-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:14px;
}
.mst-qo-backdrop{
  position:absolute;
  inset:0;
  background:rgba(25,15,30,.72);
  backdrop-filter:blur(4px);
}
.mst-qo-dialog{
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  max-height:calc(100vh - 28px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 80px rgba(20,10,25,.32);
  color:var(--mst-qo-ink);
}
.mst-qo-dialog:focus{outline:none}
.mst-qo-close{
  position:sticky;
  float:right;
  top:10px;
  right:10px;
  z-index:5;
  width:46px;
  height:46px;
  margin:10px 10px -56px 0;
  border:1px solid rgba(75,45,103,.18);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  color:#4b2d67;
  font:900 30px/1 system-ui;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(30,18,35,.12);
}
.mst-qo-close:hover{background:#4b2d67;color:#fff}
.mst-qo-close:focus-visible{outline:3px solid rgba(185,120,37,.4);outline-offset:2px}
.mst-qo-content{min-width:0}

/* Header + facts */
.mst-qo-head{
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:15px;
  align-items:start;
  padding:23px 70px 18px 23px;
  background:#fff;
  border-bottom:1px solid var(--mst-qo-line);
}
.mst-qo-title-icon{
  width:62px;height:62px;
  display:grid;place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,#4b2d67,#805998);
  color:#fff;
  box-shadow:0 10px 22px rgba(75,45,103,.20);
}
.mst-qo-title-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mst-qo-eyebrow{
  display:block;
  margin:0 0 4px;
  color:#86582a;
  font-size:.7rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.065em;
}
.mst-qo-head h2{
  margin:0 0 6px;
  color:#241a29;
  font-size:clamp(1.4rem,2.3vw,2rem);
  line-height:1.12;
}
.mst-qo-head p{
  max-width:880px;
  margin:0;
  color:#5f565f;
  font-size:.9rem;
  line-height:1.52;
}
.mst-qo-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.mst-qo-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:6px 9px;
  border:1px solid rgba(75,45,103,.12);
  border-radius:999px;
  background:rgba(255,255,255,.78);
}
.mst-qo-meta-pill span{
  color:#7a6d77;
  font-size:.61rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.mst-qo-meta-pill strong{
  color:#3c2d42;
  font-size:.72rem;
  line-height:1.25;
}

/* Reusable section headings */
.mst-qo-section{padding:15px 20px;border-bottom:1px solid var(--mst-qo-line)}
.mst-qo-section-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:10px;
}
.mst-qo-section-head span{
  flex:0 0 auto;
  color:#86582a;
  font-size:.68rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.mst-qo-section-head strong{
  color:#312535;
  font-size:.91rem;
  line-height:1.3;
}

/* Why this software? */
.mst-qo-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.mst-qo-benefit{
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:10px;
  border:1px solid rgba(75,45,103,.12);
  border-radius:13px;
  background:#fff;
}
.mst-qo-benefit-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:10px;
  color:#fff;
}
.mst-qo-benefit-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mst-qo-benefit b{display:block;margin:0 0 3px;color:#322538;font-size:.79rem;line-height:1.28}
.mst-qo-benefit p{margin:0;color:#665d64;font-size:.73rem;line-height:1.42}

/* Five colourful, meaningful capability icons */
.mst-qo-caps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.mst-qo-cap{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid var(--mst-qo-line);
  border-radius:12px;
  background:#fff;
}
.mst-qo-cap-icon{
  flex:0 0 auto;
  width:35px;height:35px;
  display:grid;place-items:center;
  border-radius:10px;
  color:#fff;
}
.mst-qo-cap-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mst-qo-cap b{font-size:.7rem;line-height:1.24;color:#3b3040}

/* Shared controlled colour palette */
.mst-qo-tone-1 .mst-qo-cap-icon,.mst-qo-tone-1 .mst-qo-benefit-icon{background:#71457f}
.mst-qo-tone-2 .mst-qo-cap-icon,.mst-qo-tone-2 .mst-qo-benefit-icon{background:#b97825}
.mst-qo-tone-3 .mst-qo-cap-icon,.mst-qo-tone-3 .mst-qo-benefit-icon{background:#176b58}
.mst-qo-tone-4 .mst-qo-cap-icon,.mst-qo-tone-4 .mst-qo-benefit-icon{background:#a34747}
.mst-qo-tone-5 .mst-qo-cap-icon,.mst-qo-tone-5 .mst-qo-benefit-icon{background:#346a9b}
.mst-qo-tone-6 .mst-qo-cap-icon,.mst-qo-tone-6 .mst-qo-benefit-icon{background:#6a5c24}

/* Detailed content summaries + one compact proof screenshot */
.mst-qo-depth-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 235px;
  gap:14px;
  align-items:start;
}
.mst-qo-highlight-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.mst-qo-highlight{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:9px;
  border:1px solid rgba(75,45,103,.11);
  border-radius:12px;
  background:#fff;
}
.mst-qo-highlight-icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#f4edf8;
  color:#5b356e;
}
.mst-qo-highlight-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.mst-qo-highlight-tone-1 .mst-qo-highlight-icon{background:#f4edf8;color:#71457f}
.mst-qo-highlight-tone-2 .mst-qo-highlight-icon{background:#fff1dc;color:#9b5e16}
.mst-qo-highlight-tone-3 .mst-qo-highlight-icon{background:#eaf7f3;color:#176b58}
.mst-qo-highlight-tone-4 .mst-qo-highlight-icon{background:#fbecec;color:#9d4040}
.mst-qo-highlight-tone-5 .mst-qo-highlight-icon{background:#eaf2fa;color:#346a9b}
.mst-qo-highlight-tone-6 .mst-qo-highlight-icon{background:#f5f1df;color:#6a5c24}
.mst-qo-highlight b{
  display:block;
  margin:0 0 3px;
  color:#302337;
  font-size:.76rem;
  line-height:1.28;
}
.mst-qo-highlight p{
  margin:0;
  color:#655d65;
  font-size:.71rem;
  line-height:1.42;
}
.mst-qo-proof{
  overflow:hidden;
  border:1px solid var(--mst-qo-line);
  border-radius:14px;
  background:#faf8fb;
}
.mst-qo-screen{
  height:145px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  background:linear-gradient(145deg,#f4f0f5,#fff);
}
.mst-qo-screen img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}
.mst-qo-proof-copy{padding:9px 10px}
.mst-qo-proof-copy b{display:block;margin-bottom:3px;color:#33263a;font-size:.76rem;line-height:1.3}
.mst-qo-proof-copy span{display:block;color:#6d6471;font-size:.68rem;line-height:1.4}

/* Popup bottom actions intentionally reproduce the existing homepage button
   language: Buy = warm secondary; Details = purple primary. */
.mst-qo-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:9px;
  padding:14px 20px 9px;
}
.mst-qo-actions a{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border-radius:10px;
  font-size:.8rem;
  font-weight:900;
  line-height:1.2;
  text-align:center;
  text-decoration:none!important;
}
/* Reuse the homepage product-action class names directly.
   index-home-new.min.css already supplies these on the homepage.
   Catalogue pages do not load that large homepage stylesheet, so these two
   tiny scoped fallbacks keep the popup visually identical without adding
   another stylesheet request or importing homepage-only CSS. */
.mst-qo-actions .mst-discovery-secondary{
  background:#fff;
  color:#71471f!important;
  border:1px solid rgba(113,71,31,.34);
}
.mst-qo-actions .mst-discovery-primary{
  background:#4b2d67;
  color:#fff!important;
  border:1px solid #4b2d67;
}
.mst-qo-actions a:hover{filter:brightness(1.07);transform:translateY(-1px)}
.mst-qo-actions a:focus-visible{outline:3px solid rgba(193,138,46,.25);outline-offset:2px}
.mst-qo-note{
  margin:0;
  padding:0 20px 16px;
  color:#756b76;
  font-size:.68rem;
  line-height:1.45;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .mst-qo-modal{padding:8px}
  .mst-qo-dialog{max-height:calc(100vh - 16px);border-radius:18px}
  .mst-qo-head{grid-template-columns:54px 1fr;padding:19px 60px 15px 15px}
  .mst-qo-title-icon{width:52px;height:52px;border-radius:15px}
  .mst-qo-title-icon svg{width:27px;height:27px}
  .mst-qo-benefits{grid-template-columns:1fr}
  .mst-qo-benefit{grid-template-columns:36px 1fr}
  .mst-qo-caps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mst-qo-cap:last-child:nth-child(odd){grid-column:1/-1}
  .mst-qo-depth-grid{grid-template-columns:1fr}
  .mst-qo-proof{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center}
  .mst-qo-screen{height:118px}
}
@media(max-width:600px){
  .mst-qo-modal{padding:0}
  .mst-qo-dialog{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}
  .mst-qo-close{top:8px;right:8px;width:44px;height:44px;margin:8px 8px -52px 0}
  .mst-qo-head{grid-template-columns:44px 1fr;gap:10px;padding:16px 54px 13px 12px}
  .mst-qo-title-icon{width:44px;height:44px;border-radius:12px}
  .mst-qo-title-icon svg{width:23px;height:23px}
  .mst-qo-head h2{font-size:1.25rem}
  .mst-qo-head p{font-size:.82rem;line-height:1.48}
  .mst-qo-eyebrow{font-size:.6rem}
  .mst-qo-meta{gap:5px;margin-top:9px}
  .mst-qo-meta-pill{min-height:29px;padding:5px 8px}
  .mst-qo-meta-pill span{font-size:.56rem}.mst-qo-meta-pill strong{font-size:.67rem}
  .mst-qo-section{padding:12px}
  .mst-qo-section-head{display:block;margin-bottom:8px}
  .mst-qo-section-head span{display:block;margin-bottom:2px;font-size:.62rem}
  .mst-qo-section-head strong{font-size:.84rem}
  .mst-qo-benefit{padding:9px}
  .mst-qo-benefit b{font-size:.78rem}
  .mst-qo-benefit p{font-size:.74rem}
  .mst-qo-caps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mst-qo-cap{padding:7px}
  .mst-qo-cap-icon{width:32px;height:32px}
  .mst-qo-cap b{font-size:.68rem}
  .mst-qo-highlight-list{grid-template-columns:1fr;gap:6px}
  .mst-qo-highlight{padding:8px}
  .mst-qo-highlight b{font-size:.77rem}
  .mst-qo-highlight p{font-size:.73rem}
  .mst-qo-proof{grid-template-columns:120px minmax(0,1fr)}
  .mst-qo-screen{height:92px;padding:6px}
  .mst-qo-proof-copy{padding:8px}
  .mst-qo-proof-copy b{font-size:.73rem}.mst-qo-proof-copy span{font-size:.67rem}
  .mst-qo-actions{grid-template-columns:1fr 1fr;padding:12px 12px 8px}
  .mst-qo-actions a{min-height:46px;font-size:.75rem}
  .mst-qo-note{padding:0 12px 14px;font-size:.67rem}
  .mst-home .mst-qo-trigger{font-size:.72rem;border-radius:10px}
}
@media(max-width:380px){
  .mst-qo-caps{grid-template-columns:1fr}
  .mst-qo-cap:last-child:nth-child(odd){grid-column:auto}
  .mst-qo-proof{grid-template-columns:1fr}
  .mst-qo-screen{height:105px}
  .mst-qo-actions{grid-template-columns:1fr}
  .mst-home .mst-discovery-actions.mst-qo-actions-enhanced,
  .mst-home .mst-android-app-actions.mst-qo-actions-enhanced,
  #mst-android-catalog .aa-actions.mst-qo-actions-enhanced,
  .mst-catalogue-page--windows .actions.mst-qo-actions-enhanced{
    grid-template-columns:1fr!important;
  }
  .mst-home .mst-qo-actions-enhanced .mst-qo-explore,
  #mst-android-catalog .mst-qo-actions-enhanced .mst-qo-explore,
  .mst-catalogue-page--windows .mst-qo-actions-enhanced .mst-qo-explore{
    grid-column:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .mst-qo-trigger,.mst-qo-actions a{transition:none!important}
}