/* ===== eCQM -> dQM transition guide (page 6175): page-specific design system =====
 *
 * Enqueued from functions.php on `enqueue_block_assets`, which fires on the front
 * end AND inside the block editor iframe. That is deliberate: this CSS used to sit
 * in a <style> tag inside a wp:html block on the page, and Gutenberg never loads
 * those into the editor canvas, so the page rendered unstyled while editing.
 * Everything here is scoped to .dqm* / .page-id-6175, so it is inert elsewhere.
 *
 * Markup note: the page is built entirely from core blocks (group / columns /
 * heading / paragraph). If you restructure a section in the editor, keep the
 * dqm-* classes on the blocks — they are what this file hooks onto.
 */

.dqm{--navy:#15054A;--ink:#1b2231;--mute:#5d6577;--line:#e3e8ef;--teal:#0FA0A8;--teal-2:#50C9CE;--wash:#f7f9fc;--blue:#2872FA;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.dqm-page{overflow-x:clip}

/* kill the theme's top container padding + first-block spacing so the hero
   sits flush under the header (same pattern used on the other hero pages) */
.page-id-6175 [data-vertical-spacing*=top]{padding-top:0}
.page-id-6175 .entry-content>p:empty{display:none;margin:0}
.page-id-6175 .entry-content>.dqm-hero{margin-block-start:0}

/* ---------- hero ----------
 * The hero group is a plain flow container with an inner .dqm-wrap that does the
 * centering, NOT a constrained group. A constrained group applies
 * `margin-left/right:auto !important` to every child, which centers any child that
 * has its own max-width — that pushed the deck paragraph into the middle while the
 * full-width h1 stayed flush left. Flow + one wrapper keeps everything on one
 * left edge and still lets each element keep its own reading measure. */
.dqm-hero{background:#15054A;background-image:radial-gradient(120% 140% at 88% 0%,#2a1170 0%,#15054A 55%);color:#fff;padding:80px 24px 0}
.dqm-hero .dqm-wrap{max-width:1040px;margin:0 auto}
.dqm-hero .dqm-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2);margin:0 0 20px}
.dqm-hero h1{color:#fff;font-size:clamp(32px,4.6vw,50px);line-height:1.1;font-weight:700;margin:0 0 20px;max-width:none}
.dqm-hero .dqm-deck{font-size:18px;line-height:1.6;color:#cfd4e6;max-width:70ch;margin:0 0 48px}
/* milestone rail */
.dqm-hero .dqm-rail{gap:0;border-top:1px solid rgba(255,255,255,.16);padding:0 0 8px;margin:0}
.dqm-hero .dqm-rail-item{position:relative;padding:26px 20px 30px 0;margin:0}
.dqm-hero .dqm-rail-item::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 0 4px rgba(80,201,206,.18)}
.dqm-hero .dqm-rail-item:nth-child(2)::before{background:#6d7ba6;box-shadow:0 0 0 4px rgba(109,123,166,.16)}
.dqm-hero .dqm-rail-item:nth-child(3)::before{background:transparent;border:2px solid #6d7ba6;box-shadow:none}
.dqm-hero .dqm-yr{display:block;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;color:#fff;margin:0 0 6px}
.dqm-hero .dqm-what{display:block;font-size:14px;line-height:1.5;color:#a9b0cc;max-width:30ch;margin:0}
@media(max-width:781px){.dqm-hero{padding-top:52px}
 .dqm-hero .dqm-rail{border-top:0}
 .dqm-hero .dqm-rail-item{padding:16px 0 16px 22px;border-left:1px solid rgba(255,255,255,.16)}
 .dqm-hero .dqm-rail-item::before{top:20px;left:-6px}.dqm-hero .dqm-what{max-width:none}}

/* ---------- body rhythm ---------- */
.dqm-sec{padding:64px 0 0}
.dqm-sec > h2{color:var(--navy);font-size:clamp(24px,3vw,31px);line-height:1.22;font-weight:700;margin:0 0 6px}
.dqm-sec p,.dqm-sec li{color:var(--ink);font-size:17px;line-height:1.68}
.dqm-sec p{margin:18px 0}
.dqm-lede{font-size:19px !important;color:var(--mute) !important}
.dqm-note{font-size:14px !important;color:var(--mute) !important;border-left:2px solid var(--line);padding-left:14px}
.dqm-sec ul li,.dqm-sec ol li{margin-bottom:10px}
.dqm-sec strong{color:var(--navy)}
code.dqm-t,.dqm-t{font-family:var(--mono);font-size:.88em;background:var(--wash);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--navy);white-space:nowrap}

/* ---------- timeline ---------- */
.dqm-tl{margin:34px 0 0;padding:0}
.dqm-tl .dqm-tl-item{position:relative;padding:0 0 30px 34px;border-left:2px solid var(--line);margin:0}
.dqm-tl .dqm-tl-item:last-child{border-left-color:transparent;padding-bottom:6px}
.dqm-tl .dqm-tl-item::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--teal)}
.dqm-tl .dqm-tl-item.is-future::before{border-color:#c3cbd8}
.dqm-tl .dqm-yr{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.dqm-tl .is-future .dqm-yr{color:var(--mute)}
.dqm-tl .dqm-tl-item h3{font-size:19px;font-weight:700;color:var(--navy);margin:0 0 8px;line-height:1.3}
.dqm-tl .dqm-tl-item p{margin:0;font-size:16px;line-height:1.62;color:var(--ink)}

/* ---------- standards shift diagram ---------- */
.dqm-shift{margin:32px 0 8px}
.dqm-shift .dqm-row{border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px;margin:0 0 16px}
.dqm-shift .dqm-row-title{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-family:var(--mono)}
.dqm-shift .dqm-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:0}
.dqm-shift .dqm-side{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--wash);margin:0}
.dqm-shift .dqm-side.is-next{background:#f1fbfb;border-color:#c6e8ea}
.dqm-shift .dqm-side-label{margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.dqm-shift .dqm-side.is-next .dqm-side-label{color:var(--teal)}
.dqm-shift .dqm-chips{display:flex;flex-direction:column;gap:9px;margin:0}
.dqm-shift .dqm-chip{margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
.dqm-shift .dqm-chip-t{font-family:var(--mono);font-size:14px;font-weight:700;line-height:1.3;color:var(--navy);margin:0}
.dqm-shift .dqm-chip-s{margin:4px 0 0;font-family:system-ui,sans-serif;font-size:11.5px;font-weight:400;line-height:1.35;color:var(--mute)}
.dqm-shift .dqm-chip.is-kept{border-color:var(--teal);background:#f1fbfb;box-shadow:inset 3px 0 0 var(--teal)}
.dqm-shift .dqm-chip.is-kept .dqm-chip-s{color:var(--teal);font-weight:700}
.dqm-shift .dqm-arrow{align-self:center;text-align:center;color:var(--blue);font-size:24px;line-height:1;font-weight:700;margin:0}
.dqm-shift .dqm-source{margin:12px 0 0;font-size:13.5px;color:var(--mute)}
@media(max-width:781px){.dqm-shift .dqm-grid{grid-template-columns:1fr;gap:10px}
 .dqm-shift .dqm-arrow{transform:rotate(90deg)}}

/* ---------- tools ---------- */
.dqm-tools{counter-reset:tool;margin-top:34px}
.dqm-tools .dqm-tool{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;padding:26px 26px 24px 74px;margin:0 0 16px}
.dqm-tools .dqm-tool::before{counter-increment:tool;content:counter(tool,decimal-leading-zero);position:absolute;left:26px;top:26px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--teal);letter-spacing:.02em}
.dqm-tools .dqm-tool > h3{margin:0 0 4px;font-size:21px;font-weight:700;color:var(--navy)}
.dqm-tools .dqm-kicker{margin:0 0 12px !important;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute) !important}
.dqm-tools .dqm-tool p{font-size:16px;line-height:1.65;margin:0 0 12px}
.dqm-tools .dqm-more{margin:0 !important;font-size:14.5px;font-weight:700}
.dqm-tools .dqm-more a{text-decoration:none;border-bottom:2px solid rgba(40,114,250,.25);padding-bottom:1px}
.dqm-tools .dqm-more a:hover{border-bottom-color:var(--blue)}
@media(max-width:600px){.dqm-tools .dqm-tool{padding:52px 20px 22px}.dqm-tools .dqm-tool::before{left:20px;top:22px}}

/* placeholder (delete before production) */
.dqm-ph{border:1px dashed #E5B84B !important;background:#FFFBF0 !important;border-radius:10px !important;padding:18px 20px !important;margin:18px 0 !important}
.dqm-ph .dqm-ph-tag{margin:0 0 8px !important;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A6100 !important}
.dqm-ph p{font-size:14px !important;color:var(--mute) !important}
.dqm-ph table{font-size:14px}
.dqm-ph th{background:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}

/* ---------- inline whitepaper prompt ---------- */
.dqm-prompt{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:12px;background:var(--wash);padding:24px 26px;margin:38px 0 0}
.dqm-prompt h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--navy)}
.dqm-prompt p{margin:0 0 16px !important;font-size:15px !important;color:var(--mute) !important}
.dqm-prompt .wp-block-buttons{margin:0}

/* ---------- FAQ ---------- */
.dqm-faq{padding:64px 0 0}
.dqm-faq > h2{color:var(--navy);font-size:clamp(24px,3vw,31px);font-weight:700;margin:0 0 8px}
.dqm-faq .wp-block-details{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0;margin:0}
.dqm-faq .wp-block-details summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:17px;font-weight:700;color:var(--navy);line-height:1.45}
.dqm-faq .wp-block-details summary::-webkit-details-marker{display:none}
.dqm-faq .wp-block-details summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:22px;font-weight:400;color:var(--teal);line-height:1}
.dqm-faq .wp-block-details[open] summary::after{content:"\2212"}
.dqm-faq .wp-block-details p{margin:0 0 22px;font-size:16px;line-height:1.68;color:var(--ink);max-width:74ch}

/* ---------- closing CTA (full width) ---------- */
.dqm-end{margin:80px 0 0;background:#15054A;background-image:radial-gradient(120% 140% at 88% 0%,#2a1170 0%,#15054A 55%);padding:64px 24px;text-align:center}
.dqm-end h2{color:#fff;font-size:clamp(24px,2.8vw,30px);font-weight:700;margin:0 0 12px}
.dqm-end p{color:#c9cfe4 !important;font-size:16px !important;line-height:1.6;max-width:52ch;margin:0 auto 26px !important}
.dqm-end .wp-block-buttons{justify-content:center;margin:0}
@media(max-width:781px){.dqm-end{padding:48px 22px;margin-top:56px}}

/* ---------- block editor only ----------
 * The editor canvas has no theme header/footer and no body page-id class, so the
 * full-bleed groups have nothing to bleed against. Give them the same edge-to-edge
 * feel inside the editor so what you see there matches the front end. */
.editor-styles-wrapper .dqm-hero,
.editor-styles-wrapper .dqm-end{border-radius:0}
.editor-styles-wrapper .dqm-hero h1{color:#fff}

/* ---------- readiness stat row (added 2026-07-28) ---------- */
.dqm-stats{gap:16px !important;margin:30px 0 6px}
.dqm-stats .dqm-stat{border:1px solid var(--line);border-radius:12px;background:var(--wash);padding:20px 18px}
.dqm-stats .dqm-stat-n{margin:0 0 6px !important;font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;color:var(--teal)}
.dqm-stats .dqm-stat-l{margin:0 !important;font-size:13.5px !important;line-height:1.45;color:var(--mute) !important}
@media(max-width:781px){.dqm-stats{gap:12px !important}}