/* ModoQ REV20 — unified official logo and matte-black visual identity.
   Keeps gold for buttons/micro-accents but never as a large surface or background haze. */
*,*::before,*::after{box-sizing:border-box}
:root{--mq-graphite:#07090a;--mq-panel:#101214;--mq-border:#383d42;--mq-silver:#e7ebee;--mq-muted:#a9b0b7;}
html{background-color:#060708}
body{background-color:#060708!important;background-image:none!important;color:#e9edf0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Same approved two-tone full logo, not a text recreation. */
.mq-brand-unified{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;text-decoration:none!important;background:transparent!important;min-width:0!important}
.mq-brand-logo{display:block!important;width:97px!important;height:77px!important;object-fit:contain!important;object-position:center!important;max-width:none!important;background:transparent!important;border:0!important;border-radius:0!important;filter:none!important;mix-blend-mode:normal!important;flex:none!important}
.mq-site-header .mq-site-brand{display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;}
.mq-site-header .mq-brand-logo{width:97px!important;height:77px!important}
.mq-site-footer .mq-brand-logo,.features-shell .footer .mq-brand-logo{width:79px!important;height:63px!important}
.mq-subpage header .brand{display:inline-flex!important;align-items:center!important;gap:0!important;}
.mq-subpage header .mq-brand-logo{width:98px!important;height:78px!important}
.features-shell header .brand{display:inline-flex!important;align-items:center!important;min-width:unset!important;gap:0!important}
.features-shell header .brand .mq-brand-logo{width:97px!important;height:77px!important}
.scene .site-nav>a:first-child{display:inline-flex!important;align-items:center!important;gap:0!important}
.scene .site-nav .mq-brand-logo{width:98px!important;height:78px!important}
.mq-business-footer .mq-brand-logo{width:69px!important;height:55px!important}
.mq-thanks-brand{width:120px!important;height:96px!important;margin:0 auto 16px!important}
.mq-subpage .wrap>.brand .mq-brand-logo{width:102px!important;height:81px!important}
.mq-subpage .card>.mq-thanks-brand{width:120px!important;height:96px!important}
/* Main public surfaces — clean matte black, silver/gray edges. */
.mq-landing,.mq-landing .mq-page-wrap,.mq-site-main,.mq-hero-section,.mq-preview-section,.mq-audience-section,.mq-waitlist-strip,.mq-audience-card,.mq-feature-teaser,.mq-final-cta,.mq-live-preview-frame,.mq-hero-monogram,.mq-business-body,.mq-business-main,.mq-profile-wrap,.mq-business-stage,.mq-profile-side{background-image:none!important}
.mq-landing{background:#060708!important}
.mq-waitlist-strip,.mq-audience-card,.mq-feature-teaser.mq-benefits-section,.mq-final-cta{background-color:#101214!important;border-color:#363b40!important;box-shadow:none!important}
.mq-hero-monogram{background-color:#0d0f11!important;border-color:#3c4248!important;box-shadow:none!important}
.mq-feature-teaser::before,.mq-final-cta::before,.mq-final-cta::after{background:none!important;box-shadow:none!important}
.mq-live-preview-frame{background-color:#08090a!important;border-color:#3a3f45!important}
.mq-site-header,.mq-site-footer{border-color:#333940!important}
.mq-site-footer a:not(.mq-footer-brand){color:#c4c9cf!important}
/* Contacts, demo, privacy, thank-you and dedicated features pages. */
body.mq-subpage,.features-shell,.features-shell main,.scene{background:#060708!important;background-image:none!important}
.mq-subpage .card,.mq-subpage .request,.mq-request-area,.mq-subpage .note,
.features-shell .feature,.features-shell .note,.features-shell .last,.features-shell .pict,.features-shell .topactions .demo,
.mq-subpage .video,.scene .login-card,.mq-business-body .mq-business-card{background:#101214!important;background-image:none!important;border-color:#3a3e43!important;box-shadow:none!important}
.mq-subpage .icon,.mq-request-topics,.mq-topic-grid label,.mq-subpage .notice{background:#131619!important;background-image:none!important;border-color:#3d4247!important;color:#d4d9de!important}
.mq-subpage :is(.label,.detail,.note,.intro p){color:#a6adb5!important}
.mq-subpage :is(.value,.brand),.features-shell :is(.feature h3,.note h2){color:#e7eaed!important}
.mq-subpage .kicker,.features-shell .eyebrow,.features-shell .small-kicker{color:#bfc6cb!important}
.mq-subpage header,.features-shell .topbar,.features-shell .footer,.mq-subpage footer{border-color:#353a40!important}
.features-shell .feature:hover{border-color:#9299a2!important}
.features-shell .note-icon{background:#111315!important;border-color:#7d858e!important;color:#d5dbe0!important}
.features-shell .intro h1 em{background-image:linear-gradient(90deg,#c9d1d8,#eef0f2,#b8c0c8)!important}
.features-shell .last{background:#101214!important}
.features-shell .footer a:not(.foot-brand){color:#c7cdd3!important}
.mq-subpage .notice{color:#d4d9de!important}
.mq-subpage .notice strong,.mq-subpage h2{color:#e5e9ed!important}
.mq-subpage a.home{border-color:#666d75!important;color:#eceff2!important;background:#151719!important}
.mq-request-topics legend{color:#d8dee2!important}
.mq-topic-grid label:has(input:checked){background:#202327!important;border-color:#b3bdc6!important;color:#f4f7f9!important}
.mq-request-field :is(input,select,textarea){border-color:#454b51!important;color:#f1f4f5!important;background:#090b0c!important}
.mq-request-area{background:#101214!important}
.mq-subpage .note strong{color:#e4e8eb!important}
.mq-subpage .card .action,.mq-subpage footer a{color:#cbd2d8!important}
.features-shell .pict{color:#d0d7dd!important}
/* Workspace: remove all gold pools, gradient overlays and textured panels. */
body.mq-premium-admin{background:#060708!important;background-image:none!important}
.mq-premium-admin .topbar,.mq-premium-admin .app-shell,.mq-premium-admin .features-section,.mq-premium-admin .mq-welcome-banner,
.mq-premium-admin :is(.stat-card,.panel,.mini-card,.feature-card,.request-card,.employee-card,.profile-card,.qr-panel,.modal,.import-preview,.import-intro,.import-metric),
.mq-premium-admin :is(.feature-status-current,.feature-status-simulated,.feature-status-roadmap),
.mq-premium-admin .features-overview-tag{background-image:none!important;box-shadow:none!important}
.mq-premium-admin .topbar{background:#090b0d!important;border-color:#34383d!important}
.mq-premium-admin .mq-welcome-banner{background-color:#101214!important;border:1px solid #3a3e43!important;box-shadow:none!important}
.mq-premium-admin .features-section{background-color:#0e1012!important;border-color:#393e43!important;box-shadow:none!important}
.mq-premium-admin .features-section::before{background:#454b51!important}
.mq-premium-admin :is(.stat-card,.panel,.mini-card,.feature-card,.request-card,.employee-card,.profile-card,.qr-panel,.modal,.import-preview,.import-intro,.import-metric){background-color:#111416!important;border-color:#363c42!important;box-shadow:none!important}
.mq-premium-admin .features-section .feature-card{background:#121518!important;border-color:#393e43!important}
.mq-premium-admin .features-section .feature-card:hover{background:#171b1e!important;border-color:#6b737b!important}
.mq-premium-admin .features-section .feature-icon,.mq-premium-admin .stat-icon,.mq-premium-admin .employee-avatar,.mq-premium-admin .contact-icon,.mq-premium-admin .company-symbol{background:#1e2226!important;color:#ced5dc!important;border-color:#454c53!important}
.mq-premium-admin .stat-card::before{background:#58616a!important}
.mq-premium-admin .mq-welcome-kicker,.mq-premium-admin .page-head .eyebrow,.mq-premium-admin .features-section .features-heading-copy .eyebrow,.mq-premium-admin .features-group-kicker{color:#bdc5cd!important}
.mq-premium-admin .nav-tab.active{background:#24282d!important;background-image:none!important;color:#f1f4f6!important;border-color:#828b95!important;box-shadow:none!important}
.mq-premium-admin .nav-tab.active .tab-count,.mq-premium-admin .tab-count,.mq-premium-admin .features-overview-tag{background:#272c31!important;color:#e4e8eb!important;border-color:#505862!important}
.mq-premium-admin .nav-tabs{border-color:#444c54!important}
.mq-premium-admin .footer{border-top-color:#373d43!important;color:#a6afb7!important;background:#060708!important}
.mq-premium-admin .footer .footer-brandline{color:#e5e9eb!important}
.mq-premium-admin .footer .footer-mark{width:92px!important;height:74px!important;object-fit:contain!important;filter:none!important;mix-blend-mode:normal!important}
.mq-premium-admin .mq-brand-logo{width:97px!important;height:77px!important}
/* Retain silver outlined secondary buttons and warm gold actions already approved. */
.mq-premium-admin :is(.button-secondary,.button-quiet,.button-outline,.mq-language-button){background:#1c2023!important;color:#e7ebef!important;border-color:#5c646b!important}
.mq-premium-admin .mq-language-button.active{background:#2c3035!important;border-color:#a8b0b9!important}
.mq-premium-admin .features-section .feature-status-simulated{background:#24272a!important;color:#dce0e4!important;border-color:#4d545b!important}
.mq-premium-admin .features-section .feature-status-roadmap{background:#23272b!important;color:#c9d1d9!important;border-color:#4e5660!important}
.mq-premium-admin .features-section .features-divider{border-color:#373d43!important}
body.mq-premium-admin .mq-welcome-banner .mq-welcome-kicker{color:#bfc7ce!important}
body.mq-premium-admin .features-section .features-heading-copy .eyebrow{color:#bdc5cd!important}
body.mq-premium-admin .features-overview-dot{background:#98a2ab!important;box-shadow:none!important}
@media(max-width:650px){
.mq-site-header .mq-brand-logo{width:77px!important;height:61px!important}
.mq-subpage header .mq-brand-logo,.features-shell header .brand .mq-brand-logo,.scene .site-nav .mq-brand-logo{width:75px!important;height:60px!important}
.mq-premium-admin .mq-brand-logo{width:75px!important;height:60px!important}
.mq-premium-admin .footer .footer-mark{width:75px!important;height:60px!important}
.features-shell .topbar{gap:6px!important}
}

/* REV21: two scoped visual adjustments only. The hero logo is fully transparent. */
.mq-landing .mq-hero-monogram{background:transparent!important;background-color:transparent!important;border:0!important;box-shadow:none!important}
.mq-landing .mq-card-qr-mini > img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}

/* REV22: Alessia homepage card, primary QR instead of redundant top mark. */
.mq-landing .mq-showcase-card .profile-card-back .profile-back-top.mq-qr-main-top{
  justify-content:center!important;align-items:center!important;margin:0 0 2px!important;
}
.mq-landing .mq-showcase-card .profile-card-back .mq-card-qr-mini{
  display:block!important;flex:0 0 auto!important;width:140px!important;height:140px!important;
  min-width:140px!important;margin:0 auto!important;padding:6px!important;
  background:#ffffff!important;border:1px solid #d1d5db!important;border-radius:9px!important;
  box-shadow:none!important;box-sizing:border-box!important;
}
.mq-landing .mq-showcase-card .profile-card-back .mq-card-qr-mini img{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  image-rendering:auto!important;
}
/* Header logo: keep full official mark centered INSIDE its bar (no overlap). */
body.mq-premium-admin .topbar .mq-topbar-left{align-items:center!important;min-height:0!important;}
body.mq-premium-admin .topbar .mq-topbar-left > a.brand{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  align-self:center!important;flex:0 0 auto!important;width:81px!important;height:60px!important;
  min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;
  line-height:0!important;overflow:hidden!important;
}
body.mq-premium-admin .topbar .mq-topbar-left > a.brand > img.mq-brand-logo{
  display:block!important;width:76px!important;height:59px!important;max-width:100%!important;
  max-height:100%!important;object-fit:contain!important;object-position:center center!important;
  margin:0!important;padding:0!important;vertical-align:middle!important;
}
@media(max-width:650px){
  .mq-landing .mq-showcase-card .profile-card-back .mq-card-qr-mini{
    width:122px!important;height:122px!important;min-width:122px!important;padding:5px!important;
  }
  body.mq-premium-admin .topbar .mq-topbar-left > a.brand{width:68px!important;height:52px!important;}
  body.mq-premium-admin .topbar .mq-topbar-left > a.brand > img.mq-brand-logo{width:65px!important;height:50px!important;}
}

/* REV23: both demo cards — clean personal-details face, larger QR on former logo face.
   Do not modify dashboard QR, real profile links, or any other component. */
.mq-landing .mq-showcase-card .profile-card-front,
.mq-business-body .mq-business-card .mq-business-front {
  align-items:center!important;justify-content:center!important;
  padding:18px!important;
  background:#08090a!important;
}
.mq-demo-qr-face {
  position:relative;display:flex;align-items:center;justify-content:center;
  width:clamp(166px,40%,244px);aspect-ratio:1;
  flex:0 0 auto;padding:10px;background:#fff;border-radius:12px;
  border:1px solid #dfe1e5;box-shadow:none!important;
  text-decoration:none;overflow:hidden;isolation:isolate;
}
.mq-demo-qr-face > img:not(.mq-qr-center-mark),
.mq-demo-qr-face .mq-qr-brand-encoded,
.mq-demo-qr-face .mq-qr-brand-encoded svg {
  display:block;width:100%;height:100%;object-fit:contain;
}
.mq-demo-qr-face .mq-qr-brand-encoded svg {shape-rendering:crispEdges;}
.mq-demo-qr-face .mq-qr-center-mark {
  display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16%;height:16%;object-fit:contain;z-index:1;
  background:#fff;padding:2px;border-radius:4px;pointer-events:none;
}
.mq-demo-qr-face:hover {border-color:#fff;}
.mq-demo-qr-face:focus-visible {outline:3px solid #d4b678;outline-offset:5px;}
/* The public 3D card is landscape; size its QR for that card's actual height. */
.mq-business-body .mq-demo-qr-profile{width:clamp(130px,32%,232px);}
@media(max-width:520px){
  .mq-landing .mq-demo-qr-home {width:182px;max-width:66%;padding:7px;}
  .mq-business-body .mq-demo-qr-profile {width:clamp(118px,44%,166px);padding:6px;border-radius:8px;}
  .mq-demo-qr-face .mq-qr-center-mark {border-radius:3px;padding:1px;}
}
@media(max-width:360px){
  .mq-business-body .mq-demo-qr-profile {width:125px;max-width:54%;padding:5px;}
}