html { outline: 3px solid magenta !important; }
.qm-wrap { background:#252525 !important; }
/* =========================
1 Mouse Marketing — Dark UI (Bootstrap-safe)
========================= */
:root{
--surface: #252525;
--surface-2: #2e2e2e;
--border: #3a3a3a;
--text: #e0e0e0;
--muted: #b8b8b8;
--muted-2: #8a8a8a;
--heading: #ffffff;
--accent: #7fe0e3; /* cyan accent per brand */
--link: #7fe0e3;
--link-hover: #aaf4f2;
--shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* Base */
html, body { background: var(--surface); color: var(--text); }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* Blockquote (fixed margins; no centering) */
blockquote {
color: var(--muted);
border-left: 3px solid var(--accent);
padding: .75rem 1rem;
margin: 1rem 0; /* <- FIX: avoid auto-centering that breaks in sidebars */
background: transparent;
}
/* Sections */
.section { padding: 4rem 1rem; }
.section--surface { background: var(--surface); color: var(--text); }
.section--contrast { background: var(--surface-2); color: var(--text); }
.section--center { text-align: center; }
.section--narrow { max-width: 900px; margin: 0 auto; }
.section--shadow { box-shadow: var(--shadow); }
/* Typography */
h1, h2, h3 { color: var(--heading); line-height: 1.2; margin: 0 0 .75rem; }
p.lead { font-size: 1.25rem; color: var(--muted); }
p.subtle { font-size: 1rem; color: var(--muted-2); }
.small { font-size: .9rem; color: var(--muted-2); }
/* ---- IMPORTANT ----
Custom grid is SCOPED to avoid Bootstrap collisions.
Use .omm-row / .omm-col* inside your components.
--------------------- */
.omm-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
/* Flexible column that can shrink/grow; base min width for cards */
.omm-col { flex: 1 1 260px; min-width: 0; }
/* Fixed-width helper (optional) */
.omm-col-fixed-300 { flex: 0 0 300px; max-width: 300px; }
.omm-col-fixed-360 { flex: 0 0 360px; max-width: 360px; }
/* Card-style column variant */
.omm-col--card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
}
/* Buttons (these intentionally style .btn to match brand) */
.btn {
display: inline-block;
font-weight: 600;
padding: .75rem 1.1rem;
border-radius: 10px;
border: 1px solid transparent;
transition: transform .08s ease, opacity .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #3b82f6; color: #fff; }
.btn-primary:hover { opacity: .95; }
.btn-success { background: #22c55e; color: #fff; }
.btn-success:hover { opacity: .95; }
.btn-light { background: #ffffff; color: #111; }
.btn-light:hover { opacity: .9; }
.btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.08); }
.btn-accent { background: var(--accent); color: #111; }
.btn-accent:hover { filter: brightness(1.05); }
/* Accents */
.accent { color: var(--accent); }
hr.divider { border: 0; height: 1px; background: var(--border); margin: 2rem auto; max-width: 900px; }
/* Spacing utils */
.mt-0{margin-top:0!important;} .mt-1{margin-top:.5rem!important;} .mt-2{margin-top:1rem!important;} .mt-3{margin-top:1.5rem!important;} .mt-4{margin-top:2rem!important;}
.mb-0{margin-bottom:0!important;} .mb-1{margin-bottom:.5rem!important;} .mb-2{margin-bottom:1rem!important;} .mb-3{margin-bottom:1.5rem!important;} .mb-4{margin-bottom:2rem!important;}
.pt-0{padding-top:0!important;} .pt-2{padding-top:1rem!important;} .pt-4{padding-top:2rem!important;}
.pb-0{padding-bottom:0!important;} .pb-2{padding-bottom:1rem!important;} .pb-4{padding-bottom:2rem!important;}
/* Accessibility & motion */
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
* { animation: none !important; transition: none !important; }
}
/* Responsive tweaks */
@media (min-width: 992px){
.section { padding: 4.5rem 2rem; }
.hero h1 { font-size: 3rem; }
}
/* ---- Bootstrap harmony helpers (optional) ----
If you want card styling on Bootstrap columns without touching .col:
------------------------------------------------*/
.bt-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
}
/* 1 Mouse Marketing — Quiet System base */
:root{
--bg:#252525; --text:#e0e0e0; --muted:#b8b8b8; --subtle:#8a8a8a; --accent:#7fe0e3; --card:#2d2d2d;
--btn-dark:#1f1f1f; --btn-light:#ffffff; --btn-dark-text:#ffffff; --btn-light-text:#111111; --maxw:1100px;
}
.qm-wrap{background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;}
.qm-container{max-width:var(--maxw); margin:0 auto; padding:clamp(1.25rem,2vw,2rem) clamp(1rem,3vw,2rem);}
.qm-center{text-align:center;}
.qm-hero h1{font-size:clamp(2rem,4.5vw,3rem); line-height:1.1; margin:0 0 .75rem;}
.qm-hero p.lead{font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--muted); margin:.25rem 0;}
.qm-hero p.sub{font-size:.95rem; color:var(--subtle); margin:.25rem 0 1.25rem;}
.qm-btns{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin:1rem 0;}
.qm-btn{display:inline-block; padding:.85rem 1.1rem; border-radius:.6rem; text-decoration:none; font-weight:600; border:1px solid transparent; transition:transform .12s ease, opacity .12s ease;}
.qm-btn.primary{background:#3b82f6; color:#fff;}
.qm-btn.success{background:#10b981; color:#fff;}
.qm-btn.light{background:var(--btn-light); color:#111;}
.qm-btn.outline{background:transparent; color:#fff; border-color:#555;}
.qm-btn:hover{transform:translateY(-1px); opacity:.96;}
.qm-kicker{font-size:.9rem; color:#9a9a9a; margin-top:.75rem;}
.qm-steps h2{font-size:clamp(1.5rem,3.2vw,2rem); text-align:center; margin:0 0 1rem;}
.qm-grid{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.25rem;}
.qm-card{background:var(--card); border:1px solid #2a2a2a; border-radius:.9rem; padding:1rem;}
.qm-card h3{color:var(--accent); margin:.25rem 0 .5rem; font-size:1.05rem;}
.qm-card p{margin:0; color:#d5d5d5;}
@media (min-width:700px){ .qm-grid{grid-template-columns:repeat(3,1fr);} .qm-card{padding:1.25rem;} }
.qm-quote blockquote{max-width:720px; margin:0 auto; font-style:italic; color:#a9a9a9;}
.qm-cta h2{font-size:clamp(1.4rem,3vw,1.9rem); margin:.25rem 0 .5rem;}
.qm-cta p{color:#cfcfcf; margin:0 0 1rem;}
.qm-faq h2{font-size:clamp(1.4rem,3vw,1.9rem); text-align:center; margin:0 0 1rem;}
.qm-faq .faq{max-width:900px; margin:1.25rem auto 0;}
.qm-faq h3{color:var(--accent); margin:1rem 0 .25rem; font-size:1.05rem;}
.qm-faq p{margin:.25rem 0; color:#dcdcdc;}
@media (prefers-reduced-motion:reduce){ .qm-btn{transition:none} }