/* ═══════════════════════════════════════════════════════════
   cloudgrow.tech Marketing Homepage v2 (2026 refresh)
   Port of design prototype "Marketing Site Refresh v3"
   Tokens: consume brand canon via brand-styles.css / tokens.css —
   never hardcode brand hex (rgba() derivatives of brand colours only).
   ═══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

.mkt2-page { background: var(--grey-50); color: var(--grey-900); font-family: var(--font-body); margin: 0; }
.mkt2-container { max-width: var(--max-width-marketing); margin: 0 auto; padding: 0 48px; }

/* ── Shared type ── */
.mkt2-overline { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-grape); margin: 0 0 16px; }
.mkt2-overline--light { color: var(--color-periwinkle); }
.mkt2-overline--purplue { color: var(--color-purplue); }
.mkt2-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); margin: 0 0 20px; }
.mkt2-body { font-size: var(--text-body); font-weight: 300; line-height: var(--leading-body); color: var(--grey-600); margin: 0 0 16px; }
.mkt2-lede { font-size: var(--text-body-lg); font-weight: 300; line-height: var(--leading-body); color: var(--grey-900); border-left: 3px solid var(--color-coral); padding-left: 20px; margin: 0 0 20px; }
.mkt2-lede--green { border-left-color: var(--color-signal-positive); }
/* Green popped-out callout — a distinct emphasis from the coral highlights (CG-11152). Works both themes:
   subtle signal-positive tint + border; the inner .mkt2-body inherits the theme's readable body colour. */
.mkt2-callout-green { border-left: 3px solid var(--color-signal-positive); background: rgba(39,195,154,0.08); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 14px 18px; margin: 4px 0 16px; }
.mkt2-callout-green > .mkt2-body { margin: 0; }

/* ── Highlight underline (JS fills background-size on viewport entry) ── */
.mkt2-hl { background-image: linear-gradient(rgba(248,147,137,0.5), rgba(248,147,137,0.5)); background-size: 0% 0.3em; background-position: 0 96%; background-repeat: no-repeat; transition: background-size 620ms var(--ease-standard); padding: 0 2px; }
.mkt2-hl.is-filled { background-size: 100% 0.3em; }
@media (prefers-reduced-motion: reduce) { .mkt2-hl { transition: none; background-size: 100% 0.3em; } }

/* ── Reveal (JS adds .is-hidden on attach, removes on entry) ── */
.mkt2-rv.is-hidden { opacity: 0; transform: translateY(22px); }
.mkt2-rv { transition: opacity 520ms var(--ease-decelerate), transform 520ms var(--ease-decelerate); }
@media (prefers-reduced-motion: reduce) { .mkt2-rv, .mkt2-rv.is-hidden { opacity: 1; transform: none; transition: none; } }

/* ── Header ── */
.mkt2-header { position: sticky; top: 0; z-index: 50; background: rgba(250,249,252,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--grey-200); }
.mkt2-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 48px; max-width: var(--max-width-marketing); margin: 0 auto; }
.mkt2-header__logo { height: 30px; display: block; }
.mkt2-header__nav { display: flex; align-items: center; gap: 28px; }
.mkt2-header__link { font-size: var(--text-sm); color: var(--grey-700); text-decoration: none; }
.mkt2-header__link:hover { color: var(--color-grape); }
.mkt2-header__login { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-500); text-decoration: none; }
.mkt2-header__login:hover { color: var(--color-grape); }
.mkt2-header__toggle { display: none; background: none; border: none; color: var(--grey-800); cursor: pointer; padding: 6px; line-height: 0; }

/* ── Buttons ── */
.mkt2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 500; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); border: none; }
.mkt2-btn--accent { background: var(--color-coral); color: var(--color-russian-violet); }
.mkt2-btn--accent:hover { background: var(--color-signal-attention); color: #fff; }
.mkt2-btn--outline { background: transparent; color: var(--color-grape); border: 1.5px solid var(--color-grape); }
.mkt2-btn--outline:hover { background: var(--color-lavender); }
.mkt2-btn--sm { height: 32px; padding: 0 16px; font-size: 13px; border-radius: 6px; }
.mkt2-btn--md { height: 40px; padding: 0 20px; font-size: 14px; }
.mkt2-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; }

/* ── Hero ── */
.mkt2-hero { background: var(--color-russian-violet) url('/static/img/marketing/hero-bg.webp') center / cover no-repeat; position: relative; overflow: hidden; }
.mkt2-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,17,26,0.55) 0%, rgba(20,17,26,0.15) 60%, rgba(20,17,26,0) 100%); pointer-events: none; }
.mkt2-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; padding: 88px 48px 72px; position: relative; max-width: var(--max-width-marketing); margin: 0 auto; }
.mkt2-hero__cycle-word { color: #fff; display: inline-block; }
.mkt2-hero__cycle-word.is-entering { animation: mkt2-word-in 260ms var(--ease-decelerate); }
@keyframes mkt2-word-in { from { transform: translateY(0.55em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mkt2-hero__title { font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: #fff; margin: 0 0 20px; }
.mkt2-hero__title em { font-style: normal; color: var(--color-coral); }
.mkt2-hero__sub { font-size: var(--text-body-lg); font-weight: 300; line-height: var(--leading-body); color: var(--grey-300); margin: 0 0 32px; max-width: 480px; }
.mkt2-hero__sub strong { font-weight: 500; color: var(--grey-100); }
.mkt2-hero__ctas { display: flex; align-items: center; gap: 20px; margin-bottom: 48px; }
.mkt2-hero__login { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-periwinkle); text-decoration: none; }
.mkt2-hero__login:hover { color: #fff; }
.mkt2-hero__stats { display: flex; gap: 48px; border-top: 1px solid var(--grey-800); padding-top: 28px; }
.mkt2-hero__stat-value { font-family: var(--font-mono); font-size: var(--text-h3); font-weight: 500; color: var(--color-signal-positive); }
.mkt2-hero__stat-value sup { font-size: 14px; }
.mkt2-hero__stat-label { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--grey-400); margin-top: 6px; }
.mkt2-hero__note { font-size: var(--text-fine); letter-spacing: var(--tracking-fine); font-weight: 300; color: var(--grey-500); margin: 14px 0 0; }
.mkt2-hero__media { position: relative; }
.mkt2-hero__media img { width: 100%; height: 560px; object-fit: cover; border-radius: var(--radius-xl); display: block; }
.mkt2-hero__chip { position: absolute; left: 24px; bottom: 24px; background: rgba(20,17,26,0.85); backdrop-filter: blur(8px); border: 1px solid var(--grey-800); border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.mkt2-hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal-positive); }
.mkt2-hero__chip-text { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--grey-200); }
.mkt2-hero__pop { position: absolute; left: 0; bottom: calc(100% + 10px); width: 300px; background: rgba(20,17,26,0.92); backdrop-filter: blur(10px); border: 1px solid var(--grey-800); border-radius: var(--radius-md); padding: 14px; display: none; }
.mkt2-hero__chip.is-open .mkt2-hero__pop { display: block; }
.mkt2-hero__pop-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-fine); text-transform: uppercase; color: var(--color-periwinkle); margin: 0 0 8px; }

/* ── Telemetry marquee ── */
.mkt2-marquee { background: var(--grey-950); border-top: 1px solid var(--grey-800); overflow: hidden; padding: 13px 0; }
.mkt2-marquee__track { display: flex; width: max-content; animation: mkt2-marquee 55s linear infinite; }
.mkt2-marquee__text { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-periwinkle); white-space: nowrap; padding-right: 48px; }
@keyframes mkt2-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mkt2-marquee__track { animation: none; } }

/* ── Section grounds ── */
.mkt2-section { padding: var(--space-4xl) 0; }
.mkt2-section--subtle { background: var(--grey-100); border-bottom: 1px solid var(--grey-200); }
.mkt2-section--lavender { background: var(--color-lavender); }
.mkt2-section--breeze { background: var(--color-breeze); position: relative; overflow: hidden; }
.mkt2-section--violet { background: var(--color-russian-violet); position: relative; overflow: hidden; }
.mkt2-section--dark { background: var(--grey-950); position: relative; overflow: hidden; }
.mkt2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mkt2-split img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.mkt2-pattern { position: absolute; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; }

/* ── Quotes (lavender band) ── */
.mkt2-quotes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.mkt2-quote-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; }
.mkt2-quote-card--lead { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.mkt2-quote-card--lead blockquote { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); margin: 0; }
.mkt2-quote__cite { font-size: var(--text-sm); font-weight: 500; }
.mkt2-quote__award { font-family: var(--font-mono); font-size: var(--text-fine); letter-spacing: var(--tracking-fine); text-transform: uppercase; color: var(--color-signal-positive-deep); margin-top: 6px; }

/* ── Cards (benefits / applications / proof) ── */
.mkt2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mkt2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mkt2-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); }
.mkt2-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.mkt2-card__img { width: 100%; height: 170px; object-fit: cover; display: block; }
.mkt2-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mkt2-card__title { font-family: var(--font-display); font-size: var(--text-h5); font-weight: 600; letter-spacing: var(--tracking-heading); margin: 0; }
.mkt2-card__text { font-size: var(--text-sm); font-weight: 300; line-height: var(--leading-body); color: var(--grey-600); margin: 0; flex: 1; }
.mkt2-nimbus-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--color-grape); text-decoration: none; margin-top: 4px; }
.mkt2-nimbus-link:hover { color: var(--color-purplue); }
.mkt2-app-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 28px 24px; }
.mkt2-app-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-lavender); color: var(--color-purplue); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mkt2-app-card h3 { font-family: var(--font-display); font-size: var(--text-body); font-weight: 600; letter-spacing: var(--tracking-heading); margin: 0 0 10px; }

/* ── Product suite (violet ground) ── */
.mkt2-suite-item { border-left: 2px solid var(--color-coral); padding-left: 16px; }
.mkt2-suite-item__name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: #fff; }
.mkt2-suite-item__role { font-size: var(--text-sm); font-weight: 300; line-height: var(--leading-tight); color: var(--grey-400); margin-top: 4px; }
.mkt2-feature { display: flex; gap: 14px; align-items: flex-start; }
.mkt2-feature__icon { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid rgba(248,147,137,0.35); color: var(--color-coral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mkt2-scaling { border-left: 2px solid var(--color-signal-positive); padding: 16px 20px; background: rgba(39,195,154,0.08); border-radius: 0 var(--radius-md) var(--radius-md) 0; max-width: 720px; }
.mkt2-spec-pill { font-family: var(--font-mono); font-size: var(--text-fine); letter-spacing: var(--tracking-fine); color: var(--color-lavender); border: 1px solid rgba(184,191,255,0.3); border-radius: var(--radius-full); padding: 6px 14px; }

/* ── How it works ── */
.mkt2-step { display: flex; gap: 14px; align-items: flex-start; width: 100%; background: transparent; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 18px 20px; cursor: pointer; font-family: var(--font-body); text-align: left; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.mkt2-step.is-active { background: #fff; border-color: var(--color-grape); box-shadow: var(--focus-ring); }
.mkt2-step__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-grape); border: 1px solid var(--color-grape); border-radius: var(--radius-full); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mkt2-step.is-active .mkt2-step__num { background: var(--color-grape); color: #fff; }
.mkt2-panel { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 32px; }
.mkt2-hiw-card { margin-top: 40px; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; }
/* CG-11170: 1-2-3 steps on the LEFT of the flow, diagram on the right */
.mkt2-hiw-card .mkt2-diagram { order: 1; }
.mkt2-diagram { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.mkt2-tier { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 26px 24px; cursor: pointer; font-family: var(--font-body); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.mkt2-tier.is-active { background: var(--color-lavender); border: 1.5px solid var(--color-grape); }
.mkt2-tier.is-alert { border: 1.5px solid var(--color-coral); background: rgba(248,147,137,0.08); }
.mkt2-tier__name { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-purplue); }
.mkt2-tier__desc { font-size: 13px; font-weight: 300; color: var(--grey-600); margin-top: 4px; }
.mkt2-sensor-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-fine); text-transform: uppercase; color: var(--grey-500); border: 1px dashed var(--grey-300); border-radius: var(--radius-sm); padding: 5px 8px; text-align: center; }
.mkt2-connector { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.mkt2-connector__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-fine); color: var(--grey-500); }
.mkt2-connector__line { position: relative; width: 1.5px; background: var(--grey-300); display: inline-block; }
.mkt2-connector__pulse { position: absolute; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-signal-positive); top: 100%; animation: mkt2-flow-up 1.8s linear infinite; }
@keyframes mkt2-flow-up { 0% { top: 100%; opacity: 0; } 25% { opacity: 1; } 85% { opacity: 1; } 100% { top: -6px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mkt2-connector__pulse { animation: none; display: none; } }
.mkt2-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; background: var(--grey-950); border-radius: var(--radius-md); padding: 10px 14px; }
.mkt2-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal-positive); animation: mkt2-blink 2s infinite; }
@keyframes mkt2-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mkt2-live__text { font-family: var(--font-mono); font-size: 12px; color: var(--grey-200); }
.mkt2-chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-fine); text-transform: uppercase; padding: 8px 14px; border-radius: var(--radius-full); cursor: pointer; background: transparent; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); animation: mkt2-chip-in 420ms var(--ease-decelerate) both; }
.mkt2-chip:not(.is-active) { color: var(--chip-c); }
@keyframes mkt2-chip-in { from { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } }
.mkt2-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; background: var(--grey-50); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.mkt2-node.is-active { background: var(--color-lavender); border: 1.5px solid var(--color-grape); }
.mkt2-scenario-stage { min-height: 370px; }
.mkt2-scenario-stage svg { width: 100%; display: block; }
/* CG-11162 restructure — 1-2-3 steps beside the diagram, full-width power strip, opt-in scenario section */
.mkt2-steps-col { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.mkt2-power-strip { margin-top: 32px; padding: 24px 28px; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); background: var(--grey-50); }
.mkt2-scenario-details { margin-top: 24px; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.mkt2-scenario-summary { cursor: pointer; padding: 22px 28px; display: flex; flex-direction: column; gap: 4px; list-style: none; position: relative; }
.mkt2-scenario-summary::-webkit-details-marker { display: none; }
.mkt2-scenario-summary::after { content: '▾'; position: absolute; right: 28px; top: 24px; font-size: 15px; color: var(--color-grape); transition: transform var(--duration-fast) var(--ease-standard); }
.mkt2-scenario-details[open] .mkt2-scenario-summary::after { transform: rotate(180deg); }
.mkt2-scenario-hint { font-size: 14px; font-weight: 300; color: var(--grey-600); max-width: 62ch; }
.mkt2-scenario-body { padding: 0 28px 28px; }
.mkt2-chart-legend { display: flex; gap: 20px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.mkt2-chart-legend span { font-family: var(--font-mono); font-size: 11px; }
.mkt2-alert-card { border: 1.5px solid var(--color-coral); background: rgba(248,147,137,0.08); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px; }

/* ── Story callout / proof / contact / footer: see template inline notes ── */
.mkt2-story__stat { font-family: var(--font-mono); font-size: var(--text-display); font-weight: 500; line-height: 1; color: var(--color-coral); }
.mkt2-proof-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px; }
.mkt2-proof-card__stat { font-family: var(--font-mono); font-size: var(--text-h3); font-weight: 500; color: var(--color-signal-positive-deep); margin-bottom: 8px; }
.mkt2-contact-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.mkt2-input { height: 40px; padding: 0 12px; border-radius: var(--radius-md); border: 1.5px solid var(--grey-300); font-family: var(--font-body); font-weight: 300; font-size: 14px; color: var(--grey-900); outline: none; width: 100%; box-sizing: border-box; }
.mkt2-input:focus, .mkt2-textarea:focus { border-color: var(--color-grape); box-shadow: var(--focus-ring); }
.mkt2-textarea { min-height: 120px; padding: 12px; border-radius: var(--radius-md); border: 1.5px solid var(--grey-300); font-family: var(--font-body); font-weight: 300; font-size: 14px; resize: vertical; outline: none; width: 100%; box-sizing: border-box; }
.mkt2-label { font-weight: 500; font-size: 13px; color: var(--grey-800); margin-bottom: 6px; display: block; }
.mkt2-footer { background: var(--grey-950); border-top: 1px solid var(--grey-800); }

/* Nimbus peek (shared component, base.html): its russian-violet gradient blends into this page's
   violet sections and reads as "transparent". Give it a defined edge + darker shadow so it stands
   out on any ground. Scoped — marketing-v2.css only loads on index-v2, so the old site is untouched. CG-11142. */
.mkt-nimbus-peek { border: 1px solid rgba(184, 191, 255, 0.65) !important; box-shadow: 0 18px 48px rgba(6, 4, 14, 0.6) !important; width: min(268px, calc(100vw - 48px)) !important; padding: 13px 15px 11px !important; }
.mkt-nimbus-peek .mkt-nimbus-peek__seed { font-size: 13px !important; }

/* ── Theme toggle control (header) — CG-11149 ── */
.mkt2-theme-toggle { background: transparent; border: 1px solid var(--grey-300); border-radius: var(--radius-full); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--grey-700); font-size: 14px; line-height: 1; padding: 0; font-family: var(--font-mono); }
.mkt2-theme-toggle:hover { border-color: var(--color-grape); color: var(--color-grape); }

/* ── Dark mode (auto + toggle) — CG-11149 ─────────────────────────
   data-theme is set on <html> by the pre-paint snippet in index-v2.html's <head>
   and kept live by the toggle in marketing-v2.js, so only [data-theme="dark"]
   selectors are needed (no @media duplication). The fixed-dark brand grounds
   (hero, marquee, product suite, story, contact band, footer) are deliberately
   UNAFFECTED — they are brand grounds, not surfaces. Dark values stay in the
   violet-tinted grey family: grey-token values use var(--grey-*) (brand canon,
   passes brand_drift_check); only true dark-mode-specific shades with no token
   (#2E2939/#1A1622/#1D1729/#16222B/#2A2536/#453F52) and the brightened
   brand-adjacent accents (#9B87F5 grape / #C9BFFF periwinkle, for legibility on
   dark) are literals — never neutral black. */
html[data-theme="dark"] .mkt2-page { background: var(--grey-950); color: var(--grey-100); }
html[data-theme="dark"] .mkt2-header { background: rgba(20,17,26,0.88); border-color: #2E2939; }
html[data-theme="dark"] .mkt2-header__link { color: var(--grey-300); }
html[data-theme="dark"] .mkt2-header__login { color: var(--grey-500); }
html[data-theme="dark"] .mkt2-header__logo { content: url('/brand-asset/logos/CG-Logo-Horizontal-A-Periwinkle-LW.svg'); }
html[data-theme="dark"] .mkt2-header__toggle { color: var(--grey-300); }
html[data-theme="dark"] .mkt2-theme-toggle { color: var(--grey-300); border-color: #453F52; }
html[data-theme="dark"] .mkt2-section--subtle { background: #1A1622; border-color: #2E2939; }
html[data-theme="dark"] .mkt2-section--lavender { background: #1D1729; }
html[data-theme="dark"] .mkt2-section--breeze { background: #16222B; }
html[data-theme="dark"] .mkt2-card,
html[data-theme="dark"] .mkt2-quote-card,
html[data-theme="dark"] .mkt2-app-card,
html[data-theme="dark"] .mkt2-panel,
html[data-theme="dark"] .mkt2-proof-card { background: var(--grey-900); border-color: #2E2939; }
html[data-theme="dark"] .mkt2-h2,
html[data-theme="dark"] .mkt2-lede,
html[data-theme="dark"] .mkt2-quote-card--lead blockquote,
html[data-theme="dark"] .mkt2-quote__cite,
html[data-theme="dark"] .mkt2-card__title,
html[data-theme="dark"] .mkt2-app-card h3,
html[data-theme="dark"] .mkt2-step strong { color: var(--grey-100); }
html[data-theme="dark"] .mkt2-body,
html[data-theme="dark"] .mkt2-card__text { color: var(--grey-400); }
html[data-theme="dark"] .mkt2-overline,
html[data-theme="dark"] .mkt2-nimbus-link,
html[data-theme="dark"] .mkt2-btn--outline { color: #9B87F5; border-color: #9B87F5; }
html[data-theme="dark"] .mkt2-overline--purplue { color: #C9BFFF; }
html[data-theme="dark"] .mkt2-quote__award { color: var(--color-signal-positive); }
html[data-theme="dark"] .mkt2-step { border-color: #2E2939; }
html[data-theme="dark"] .mkt2-step.is-active { background: var(--grey-900); border-color: #9B87F5; }
html[data-theme="dark"] .mkt2-tier { background: #2A2536; border-color: #2E2939; }
html[data-theme="dark"] .mkt2-tier.is-active { background: rgba(119,95,236,0.22); border-color: #9B87F5; }
html[data-theme="dark"] .mkt2-tier__name { color: #C9BFFF; }
/* NimbusNode boxes (diagram partial) use .mkt2-node, not .mkt2-tier — invert them to match. CG-11149 */
html[data-theme="dark"] .mkt2-node { background: #2A2536; border-color: #2E2939; }
html[data-theme="dark"] .mkt2-node.is-active { background: rgba(119,95,236,0.22); border-color: #9B87F5; }
/* Scenario/power chips: JS clears idle inline colour so these rules apply; keep idle labels legible on dark (CG-11162, item 9a). */
html[data-theme="dark"] .mkt2-chip:not(.is-active) { color: var(--grey-100); }
/* Proof stat: signal-positive-deep is a dark green that low-contrasts on the dark card — brighten it. */
html[data-theme="dark"] .mkt2-proof-card__stat { color: var(--color-signal-positive); }
html[data-theme="dark"] .mkt2-tier__desc,
html[data-theme="dark"] .mkt2-sensor-tag,
html[data-theme="dark"] .mkt2-connector__label { color: var(--grey-500); border-color: #453F52; }
html[data-theme="dark"] .mkt2-hl { background-image: linear-gradient(rgba(248,147,137,0.4), rgba(248,147,137,0.4)); }
/* Highlights with an INLINE dark colour (the Applications 59%/82% stats use color:var(--grey-900))
   are black-on-black in dark mode — force them light. Plain .mkt2-hl inherit the light body colour. CG-11152 */
html[data-theme="dark"] .mkt2-hl[style*="color"] { color: var(--grey-100) !important; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .mkt2-contact-card { background: var(--grey-900); border: 1px solid var(--grey-800); }
html[data-theme="dark"] .mkt2-input, html[data-theme="dark"] .mkt2-textarea { background: #1A1622; border-color: #453F52; color: var(--grey-100); }
html[data-theme="dark"] .mkt2-label { color: var(--grey-200); }
/* White-background diagram image (system-flow) softened as a deliberate light plate */
html[data-theme="dark"] .mkt2-panel > img { filter: brightness(0.85) saturate(0.95); border: 1px solid #2E2939; background: #fff; }
html[data-theme="dark"] .mkt2-power-strip, html[data-theme="dark"] .mkt2-scenario-details { background: var(--grey-900); border-color: #2E2939; }
html[data-theme="dark"] .mkt2-scenario-hint { color: var(--grey-400); }

/* ── Responsive (mobile pass) ── */
@media (max-width: 960px) {
  .mkt2-container, .mkt2-header__inner { padding-left: 20px; padding-right: 20px; }
  .mkt2-hero__inner { grid-template-columns: 1fr; padding: 64px 20px 48px; }
  .mkt2-split, .mkt2-quotes, .mkt2-grid-3, .mkt2-grid-4, .mkt2-hiw-card { grid-template-columns: 1fr; }
  /* The ported design sections use INLINE grid-template-columns (can't be media-queried by class).
     Collapse every inline grid to a single column on narrow screens. CG-11142. */
  .mkt2-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Wrap flow rows that don't fit narrow. */
  .mkt2-hero__stats { flex-wrap: wrap; gap: 24px; }
  .mkt2-header__toggle { display: inline-flex; align-items: center; }
  .mkt2-header__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: rgba(250,249,252,0.98); backdrop-filter: blur(12px); border-bottom: 1px solid var(--grey-200); padding: 8px 20px 18px; box-shadow: var(--shadow-lg); }
  .mkt2-header__nav.is-open { display: flex; }
  .mkt2-header__link, .mkt2-header__login { padding: 11px 0; font-size: var(--text-body); }
  .mkt2-header__nav .mkt2-btn--accent { align-self: flex-start; margin-top: 8px; }
  .mkt2-footer > div { flex-wrap: wrap; gap: 16px; }
  .mkt2-chip-row { flex-wrap: wrap; }
  /* Hide the Nimbus peek nudge on mobile — it overlaps content; the FAB remains. CG-11142. */
  .mkt-nimbus-peek { display: none !important; }
  /* Trim the design's 48px section gutters to 20px on mobile so nothing sits under the fold edge. */
  .mkt2-page > section > div, .mkt2-page > footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  /* Dark-mode: the mobile dropdown-nav ground must invert too (CG-11149). */
  html[data-theme="dark"] .mkt2-header__nav { background: rgba(20,17,26,0.98); border-color: #2E2939; }
}

/* ── Mobile polish pass — CG-11151 ── */
@media (max-width: 960px) {
  /* Alternating split rows (Challenge/Platform): keep text ABOVE its image so two green-wall
     images never stack back-to-back — the platform copy sits in the whitespace between them.
     order works because .mkt2-split collapses to a single-column grid at this width. */
  .mkt2-split > img { order: 2; }
  /* Desktop fixed image heights are far too tall on a phone. max-height caps them — and clamps
     the inline height:460/480px images WITHOUT !important; object-fit:cover crops cleanly. */
  .mkt2-hero__media img { max-height: 320px; }
  .mkt2-split img { max-height: 240px; }
  #product img[style*="height"] { max-height: 300px; }
  /* Diagram: the 3 NimbusNode tiles are tight/clipping at 375 — relieve padding + label size. */
  .mkt2-node { padding: 12px 6px; }
  .mkt2-node .mkt2-tier__name { font-size: 10px; }
  .mkt2-sensor-tag { padding: 5px 4px; }
}