/* Slide 1 headline serif — production loads no webfonts at all, so the previous Georgia-first stack silently fell back to whatever generic serif a given OS/browser ships (Liberation Serif on most Linux/Chromium, a noticeably heavier and less refined face than the approved reference's editorial serif). Loading PT Serif explicitly guarantees the same letterforms everywhere instead of an inconsistent per-platform fallback. Scoped to this file only; slides 2-4 don't reference the serif variable. */ @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* * Guided Slides — premium full-screen native result experience. * Shares the MaditSpirit Funnel Quiz visual language (colors, radii, * button system) instead of inventing a new one; --msai-gs-* tokens below * mirror the --msai-fq-* values in funnel-quiz.css so this shell looks * native even when it renders standalone (Smart Diagnostic Link reopen) * outside the live quiz wrapper. * * WEIGHT LOSS 3 template rebuild: the 4 canonical native templates below * (Personal Diagnosis / Solution Blueprint / AI-Built System / Path & * Proof) replace the prior 10 generic template compositions. Each keeps * its own restrained accent tint (--msai-gs-t1..t4) so the 4-slide * sequence reads as controlled progression rather than 4 identical shells * with different text, while staying inside one MaditSpirit color system. */ .msai-gs { /* position:fixed + inset:0, not an in-flow height:100dvh block: the real customer page embeds this result inside the live quiz's existing DOM (funnel-quiz.js drops the result HTML into the quiz's own stage, below the quiz's own persistent title/progress chrome - real QA measured that chrome at ~220px tall). An in-flow 100dvh box starting 220px down the page is 220px TALLER than the space actually left below it, which silently pushed the real CTA/Back footer off the bottom of the viewport - the exact "cropped/embedded, not full-page" bug this was meant to fix. Fixed positioning makes this a true full-viewport overlay regardless of whatever chrome happens to sit above it in the DOM. Also doubles as the fix for the pre-existing cookie-consent-banner z-index issue below, for the same underlying reason: it must sit on the ROOT, since .msai-gs__slide.is-active uses `transform`, which creates its own stacking context that no descendant z-index can ever out-rank a sibling fixed element (like the cookie banner) outside it. */ position: fixed; inset: 0; z-index: 2147483000; --msai-gs-text: #0b1220; --msai-gs-muted: #536071; --msai-gs-border: #dbe4f0; --msai-gs-accent: #123d9d; --msai-gs-accent-hover: #0f2f76; --msai-gs-soft: #eff4fb; --msai-gs-danger: #b42318; --msai-gs-success: #0f8b4c; --msai-gs-bg: #f4f7fb; --msai-gs-card-bg: #ffffff; --msai-gs-vh: 100dvh; /* Per-slide restrained tint (section 74 — controlled progression, one system) */ --msai-gs-t1: #123d9d; --msai-gs-t1-soft: #eef2fc; --msai-gs-t2: #0e5a8a; --msai-gs-t2-soft: #eaf3f8; --msai-gs-t3: #0f766e; --msai-gs-t3-soft: #eaf6f4; --msai-gs-t4: #123d9d; --msai-gs-t4-soft: #eff4fb; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: var(--msai-gs-bg); background-image: radial-gradient(circle at top left, rgba(18, 61, 157, 0.14), transparent 36%), radial-gradient(circle at bottom right, rgba(14, 116, 144, 0.12), transparent 32%); font-family: "Space Grotesk", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--msai-gs-text); box-sizing: border-box; } .msai-gs.is-preview { /* The admin builder embeds this AS a bounded card inside wp-admin, on purpose - fixed/full-viewport positioning would break out of that embed entirely, so preview alone reverts to a normal in-flow block. */ position: relative; inset: auto; z-index: auto; height: min(760px, var(--msai-gs-vh)); min-height: 560px; max-height: min(760px, var(--msai-gs-vh)); border-radius: 24px; border: 1px solid var(--msai-gs-border); box-shadow: 0 24px 60px rgba(11, 18, 32, 0.14); } .msai-gs *, .msai-gs *::before, .msai-gs *::after { box-sizing: border-box; } /* Progress */ .msai-gs__progress { flex: 0 0 auto; padding: max(14px, env(safe-area-inset-top)) 20px 10px; display: flex; align-items: center; gap: 8px; } .msai-gs__progress-track { flex: 1; height: 4px; border-radius: 999px; background: var(--msai-gs-border); overflow: hidden; } .msai-gs__progress-fill { height: 100%; background: linear-gradient(90deg, var(--msai-gs-accent), #1c66c9); border-radius: 999px; transition: width .45s cubic-bezier(.4, 0, .2, 1); } .msai-gs__progress-dots { display: flex; gap: 6px; } .msai-gs__progress-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--msai-gs-border); transition: background-color .3s ease, transform .3s ease; } .msai-gs__progress-dot.is-done { background: var(--msai-gs-accent); } .msai-gs__progress-dot.is-active { background: var(--msai-gs-accent); transform: scale(1.35); } .msai-gs__progress.style-hidden { visibility: hidden; height: 0; padding: 0; } /* Stage / slides */ .msai-gs__stage { position: relative; flex: 1 1 auto; min-height: 0; } .msai-gs__slide { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6px 22px max(16px, env(safe-area-inset-bottom)); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .32s ease, transform .32s ease; overflow: hidden; } .msai-gs__slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* The owner's Elementor page must read as the real page, not a shell with a decorative wash behind it - .msai-gs's root radial-gradient background (section above) is meant for the 4 native template slides only. An opaque background here fully occludes that gradient wherever this slide is active, instead of trying to unset a parent's background-image from a child (not possible in CSS). */ /* display:block (not the base .msai-gs__slide flex-column it would otherwise inherit) is required here, not cosmetic: as a flex column item, .msai-gs__elementor-embed's real Elementor content (thousands of px tall on a full sales page) was flex-shrunk down to this slide's ~viewport-height box instead of growing to contain it - the box stayed short (via CSS flex sizing) while the content still rendered past its bottom edge (a plain block box's height simply is its content, so this can't happen at all with display:block). Nothing after the embed in normal flow (e.g. .msai-gs__result-chat below) was pushed down past the real content - it started right after the shrunk box and sat visually underneath/behind the still-rendered overflow, silently eating its clicks. Confirmed by isolating the fix live (toggling this one property) before writing it here. */ .msai-gs__slide--elementor { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; background: var(--msai-gs-card-bg); } /* Shared native-slide shell: template content + CTA/nav live together as ONE flex item so `margin:auto` can center the whole group as a unit in whatever space is left below the progress header - short templates (e.g. Scratch) read as one balanced composition instead of content pinned to the top with the CTA stranded at the absolute bottom. This is a no-op (auto margins resolve to 0) once natural content height already fills the available space, so dense templates keep their existing top-anchored, non-clipped behavior. Elementor slides never get this wrapper - they render straight into .msai-gs__slide and keep scrolling naturally. */ .msai-gs__content { display: flex; flex-direction: column; width: 100%; min-height: 0; margin: auto 0; } .msai-gs__eyebrow { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--msai-gs-slide-accent, var(--msai-gs-accent)); margin: 4px 0 6px; } .msai-gs__headline { flex: 0 0 auto; font-size: clamp(23px, 3.6vw, 38px); line-height: 1.14; font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; color: var(--msai-gs-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .msai-gs__text { font-size: clamp(14px, 1.4vw, 16.5px); line-height: 1.55; color: var(--msai-gs-muted); margin: 0; } .msai-gs__footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; } .msai-gs__nav-row { display: flex; align-items: center; gap: 10px; } /* Back / CTA — reuse the shared button classes so these are visually identical to the rest of the funnel (msai-fq-btn is defined in funnel-quiz.css). */ .msai-gs__back { flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; /* !important on color/background/border only, same reasoning as .msai-gs__cta below: this page can render standalone (Smart Diagnostic Link) where a generic theme `button{}` rule of unknown specificity can otherwise leak through uncontested - real QA found the Back arrow inheriting the theme's red button color instead of MaditSpirit's own neutral/dark-blue language. */ background: #fff !important; border: 1px solid var(--msai-gs-border) !important; color: var(--msai-gs-text) !important; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .msai-gs__back:hover { background: var(--msai-gs-soft) !important; border-color: var(--msai-gs-accent) !important; } .msai-gs__back:active { transform: scale(.96); } .msai-gs__back[hidden] { display: none; } /* !important on color/background only: this page can be reached standalone (Smart Diagnostic Link) where a generic theme `button{}` rule of unknown specificity/load-order may otherwise leak through (observed in real QA - a theme default rendered this CTA pink instead of the real --msai-fq-accent blue used everywhere else in the Funnel Quiz app). Every other property stays a normal cascade so admin/theme layout overrides still work. */ .msai-gs__cta.msai-fq-btn, .msai-gs__cta { flex: 1 1 auto; min-width: 0; min-height: 50px; border-radius: 14px; font-size: 16px; font-weight: 600; background: var(--msai-gs-accent) !important; color: #fff !important; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .18s ease, transform .1s ease; } .msai-gs__cta:hover { background: var(--msai-gs-accent-hover) !important; } .msai-gs__cta:active { transform: scale(.98); } .msai-gs__cta:focus-visible, .msai-gs__back:focus-visible { outline: 2px solid var(--msai-gs-accent); outline-offset: 2px; } @media (min-width: 640px) { /* Section 73 — CTA should feel intentional, not full-browser-width on desktop. */ .msai-gs__nav-row { justify-content: flex-start; } .msai-gs__cta.msai-fq-btn, .msai-gs__cta { flex: 0 1 auto; min-width: 280px; padding: 0 34px; } } /* Shared micro-components reused across templates */ .msai-gs__eyebrow-row { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 4px 0 6px; } .msai-gs__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--msai-gs-success); flex: 0 0 auto; } .msai-gs__eyebrow-dot.is-static { background: var(--msai-gs-slide-accent, var(--msai-gs-accent)); } /* ================================================================== Slide 1 — Personal Diagnosis ================================================================== */ .msai-gs__slide--personal_diagnosis { --msai-gs-slide-accent: var(--msai-gs-t1); --msai-gs-pd-serif: "PT Serif", Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", ui-serif, serif; --msai-gs-pd-warn: #c2410c; --msai-gs-pd-warn-soft: #fdece3; padding-top: 40px; /* Real AI-authored content (esp. now that evidence is rendered) can run taller than the viewport at ANY width, not just mobile — the shared .msai-gs__slide's overflow:hidden would silently swallow whatever doesn't fit, including the CTA, with no way to reach it. Scrolling only ever activates when content genuinely exceeds the box (the common case still just centers via .msai-gs__content's margin:auto, no visible scrollbar). */ overflow-y: auto; } /* Macro-geometry override, scoped to this template only (never touches the shared .msai-gs__slide max-width used by Slides 2-4): pixel-measured against the approved reference (docs/template), whose content spans ~94% of a 1536px canvas (66px/21px margins) - the shared 1180px cap left this slide visibly narrower/more inset than the reference at desktop widths. !important matches this file's existing precedent for "must win regardless of cascade order" overrides (see .msai-gs__cta). */ @media (min-width: 1200px) { .msai-gs__slide--personal_diagnosis.msai-gs__slide { max-width: 1560px !important; } } /* This template's content (headline + explanation + graph card) can be taller than the viewport once the graph card has 3-4 zones — without flex-shrink:0 the ancestor chain's min-height:0 flex containers squeeze .msai-gs__content below its natural size, and the card then overflows ITS OWN shrunk parent instead of the slide scrolling, producing a visual collision with the CTA footer. Pinning to natural height here and letting the slide scroll (mobile media query below) fixes that; margin:auto still centers it on the common case where it fits. */ .msai-gs__slide--personal_diagnosis .msai-gs__content { flex-shrink: 0; } /* Brand lockup — scoped entirely to this template's own content (position: absolute against .msai-gs__slide, which is already the positioned ancestor) so it can never appear on/affect Slide 2-4, which are out of scope this mission. */ .msai-gs__pd-brand { position: absolute; top: 18px; right: 26px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; } .msai-gs__pd-slide-count { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--msai-gs-muted); } .msai-gs__pd-brand-row { display: flex; align-items: baseline; gap: 7px; } .msai-gs__pd-brand-mark { width: 19px; height: 19px; color: var(--msai-gs-accent); flex: 0 0 auto; } .msai-gs__pd-brand-word { font-family: var(--msai-gs-pd-serif); font-size: 26px; font-weight: 700; color: var(--msai-gs-text); letter-spacing: -.01em; } .msai-gs__pd-brand-sub { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--msai-gs-accent); } .msai-gs__pd-layout2 { display: flex; flex-direction: column; gap: 22px; min-height: 0; } .msai-gs__pd-left { display: flex; flex-direction: column; min-width: 0; } /* Every size below is pixel-measured off the approved reference image (docs/template) at its native 1536px canvas width, not chosen by eye - see the root-cause audit: the previous pass under-sized nearly every text element 30-70% by inheriting this file's pre-existing compact dashboard scale instead of the reference's generous editorial one. Doubled selector beats the shared .msai-gs__headline (single-class, equal-specificity) rules elsewhere in this file, including the max-width:400px one that re-clamps to 3 lines. */ .msai-gs__pd-headline.msai-gs__pd-headline { font-family: var(--msai-gs-pd-serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(26px, 3.9vw, 60px); line-height: 1.11; -webkit-line-clamp: 6; } .msai-gs__pd-emphasis { color: var(--msai-gs-accent); font-style: italic; } .msai-gs__pd-explanation { font-size: clamp(15px, 1.3vw, 20px); line-height: 1.5; color: var(--msai-gs-muted); margin: 18px 0 0; max-width: 34ch; } .msai-gs__pd-highlight { color: var(--msai-gs-accent); font-style: normal; font-weight: 600; } .msai-gs__pd-divider { height: 1px; background: var(--msai-gs-border); width: 84px; margin: 26px 0 20px; flex: 0 0 auto; } .msai-gs__pd-summary { display: flex; align-items: flex-start; gap: 11px; } .msai-gs__pd-summary-icon { width: 17px; height: 17px; color: var(--msai-gs-accent); flex: 0 0 auto; margin-top: 3px; } .msai-gs__pd-summary-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--msai-gs-accent); margin-bottom: 5px; } .msai-gs__pd-summary p { margin: 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; color: var(--msai-gs-text); font-weight: 600; max-width: 32ch; } .msai-gs__pd-summary-tagline { margin-top: 6px !important; font-size: 14px !important; font-weight: 400 !important; font-style: italic; color: var(--msai-gs-muted) !important; } /* ---- Evidence row (fills the lower area below the two-column layout, left blank in the approved reference) — editorial columns separated by a thin left border, matching the same restrained language as the rest of the slide: no cards, no fills, just type + a hairline divider. */ .msai-gs__pd-evidence-wrap { margin-top: 34px; } .msai-gs__pd-evidence-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--msai-gs-muted); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--msai-gs-border); } .msai-gs__pd-evidence { display: grid; grid-template-columns: repeat(min(var(--msai-gs-pd-evidence-count, 3), 3), 1fr); gap: 28px; } .msai-gs__pd-evidence-item { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--msai-gs-border); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; } .msai-gs__slide.is-active .msai-gs__pd-evidence-item { opacity: 1; transform: translateY(0); } .msai-gs__pd-evidence-item-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-accent); } .msai-gs__pd-evidence-item p { margin: 0; } .msai-gs__pd-evidence-item-signal { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--msai-gs-text); } .msai-gs__pd-evidence-item-meaning, .msai-gs__pd-evidence-item-support { font-size: 13.5px; line-height: 1.45; color: var(--msai-gs-muted); } /* ---- Graph area (right column) — borderless, matching the approved reference exactly: the chart, x-axis labels, state row and duration brackets all sit directly on the shared page background. The insight row is the ONE bordered element, because it is the one bordered element in the reference too. */ .msai-gs__pd-right { min-width: 0; } .msai-gs__pd-card { display: flex; flex-direction: column; gap: 18px; } .msai-gs__pd-graph-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; } .msai-gs__pd-graph-title { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-accent); } .msai-gs__pd-graph-sep { width: 1px; height: 13px; background: var(--msai-gs-border); } .msai-gs__pd-graph-subtitle { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--msai-gs-muted); } /* Comparison-only legend — never appears for a single-series chart. Reuses the header row's own flex-wrap rather than a new layout region, so it never adds visual weight to timeline/bar charts. */ .msai-gs__pd-graph-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .msai-gs__pd-graph-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--msai-gs-muted); } .msai-gs__pd-graph-legend-swatch { width: 14px; height: 2.5px; border-radius: 2px; flex: 0 0 auto; } .msai-gs__pd-graph-legend-swatch--primary { background: var(--msai-gs-accent); } .msai-gs__pd-graph-legend-swatch--secondary { background: #0e5a8a; background-image: linear-gradient(90deg, #0e5a8a 60%, transparent 60%); background-size: 6px 100%; } .msai-gs__pd-graph-wrap { width: 100%; margin-top: -4px; } .msai-gs__pd-graph { width: 100%; height: auto; display: block; overflow: visible; } .msai-gs__pd-graph-x-label { font-size: 15px; fill: var(--msai-gs-muted); font-family: inherit; font-weight: 600; } .msai-gs__pd-graph-x-label--highlight { font-size: 17px; font-weight: 700; fill: var(--msai-gs-pd-warn); } .msai-gs__pd-graph-divider { stroke: var(--msai-gs-border); stroke-width: 1; } .msai-gs__pd-graph-threshold-line { stroke: var(--msai-gs-muted); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s ease .6s; } .msai-gs__slide.is-active .msai-gs__pd-graph-threshold-line { opacity: .6; } .msai-gs__pd-graph-threshold-label { font-size: 13px; font-weight: 700; fill: var(--msai-gs-muted); font-family: inherit; opacity: 0; transition: opacity .4s ease .6s; } .msai-gs__slide.is-active .msai-gs__pd-graph-threshold-label { opacity: 1; } .msai-gs__pd-graph-area { fill: url(#msai-gs-pd-area-fade); opacity: 0; transition: opacity .6s ease .35s; } .msai-gs__slide.is-active .msai-gs__pd-graph-area { opacity: .55; } .msai-gs__pd-graph-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 2px 3px rgba(18, 61, 157, .18)); } .msai-gs__pd-graph-line--primary { stroke: var(--msai-gs-accent); } /* Both variants below are dashed reference/overlay strokes, not the main trend — dashoffset-wipe (the base rule's draw-in technique) and a repeating dash PATTERN both use stroke-dasharray, so they can't share the same reveal mechanism. These fade in on opacity instead, which also reads correctly as a secondary/overlay signal instead of competing with the primary line's own draw-in. */ .msai-gs__pd-graph-line--secondary { stroke: #0e5a8a; stroke-dasharray: 5 5; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease .3s; } .msai-gs__slide.is-active .msai-gs__pd-graph-line--secondary { opacity: 1; } /* Risk overlay redraws just the dip in warm/dashed on top of the primary line (never replaces it) — matches the approved reference, where the breakpoint reads through line color/style change, not a shaded band. */ .msai-gs__pd-graph-line--risk { stroke: var(--msai-gs-pd-warn); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease .5s; } .msai-gs__slide.is-active .msai-gs__pd-graph-line--risk { opacity: 1; } .msai-gs__pd-graph-highlight-guide { stroke: var(--msai-gs-pd-warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .3s ease .8s; } .msai-gs__slide.is-active .msai-gs__pd-graph-highlight-guide { opacity: .55; } .msai-gs__slide.is-active .msai-gs__pd-graph-line { stroke-dashoffset: 0; } .msai-gs__pd-graph-point { opacity: 0; transition: opacity .3s ease; outline: none; } .msai-gs__slide.is-active .msai-gs__pd-graph-point { opacity: 1; } .msai-gs__pd-graph-hit { fill: transparent; cursor: pointer; } /* Resting state stays a single clean stroke (matches the approved reference's restraint) - dots only resolve on hover/focus, echoing the one moment (breakpoint highlight) that should carry emphasis at rest. */ .msai-gs__pd-graph-dot { fill: #fff; stroke-width: 2.3; r: 4; opacity: 0; transition: r .15s ease, opacity .15s ease; pointer-events: none; } .msai-gs__pd-graph-point:hover .msai-gs__pd-graph-dot, .msai-gs__pd-graph-point:focus-visible .msai-gs__pd-graph-dot { opacity: 1; } .msai-gs__pd-graph-dot--primary { stroke: var(--msai-gs-accent); } .msai-gs__pd-graph-dot--secondary { stroke: #0e5a8a; } .msai-gs__pd-graph-point-label { font-size: 13px; font-weight: 700; fill: var(--msai-gs-text); font-family: inherit; opacity: 0; transition: opacity .15s ease; } .msai-gs__pd-graph-point:hover .msai-gs__pd-graph-dot, .msai-gs__pd-graph-point:focus-visible .msai-gs__pd-graph-dot { r: 5.5; } .msai-gs__pd-graph-point:hover .msai-gs__pd-graph-point-label, .msai-gs__pd-graph-point:focus-visible .msai-gs__pd-graph-point-label { opacity: 1; } .msai-gs__pd-graph-point:focus-visible .msai-gs__pd-graph-dot { outline: 2px solid var(--msai-gs-accent); outline-offset: 2px; } .msai-gs__pd-graph-bar { fill: var(--msai-gs-accent); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .65s cubic-bezier(.4,0,.2,1); outline: none; filter: drop-shadow(0 2px 3px rgba(18, 61, 157, .16)); } .msai-gs__pd-graph-bar.is-risk { fill: var(--msai-gs-pd-warn); filter: drop-shadow(0 2px 3px rgba(194, 65, 12, .18)); } .msai-gs__slide.is-active .msai-gs__pd-graph-bar { transform: scaleY(1); } .msai-gs__pd-graph-bar:hover, .msai-gs__pd-graph-bar:focus-visible { opacity: .85; outline: 2px solid var(--msai-gs-accent); outline-offset: 2px; } .msai-gs__pd-graph-highlight { opacity: 0; transition: opacity .35s ease .9s; } .msai-gs__slide.is-active .msai-gs__pd-graph-highlight { opacity: 1; } .msai-gs__pd-graph-highlight-glow { fill: var(--msai-gs-pd-warn); opacity: .18; } .msai-gs__pd-graph-highlight-ring { fill: none; stroke: var(--msai-gs-pd-warn); stroke-width: 1.25; opacity: .35; } .msai-gs__pd-graph-highlight-dot { fill: var(--msai-gs-pd-warn); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(194, 65, 12, .35)); } @media (prefers-reduced-motion: no-preference) { /* Bounded — 2 pulses to draw the eye to the breakpoint on arrival, then settles (keyframes start/end on the same values, so no visible jump when it stops). An infinite loop reads as a gimmick the longer the user stays on the slide, not emphasis. */ .msai-gs__slide.is-active .msai-gs__pd-graph-highlight-glow { animation: msai-gs-pd-pulse 2.4s ease-in-out .9s 2; } .msai-gs__slide.is-active .msai-gs__pd-graph-highlight-ring { animation: msai-gs-pd-ring 2.4s ease-in-out .9s 2; } } @keyframes msai-gs-pd-pulse { 0%, 100% { r: 22; opacity: .18; } 50% { r: 26; opacity: .3; } } @keyframes msai-gs-pd-ring { 0% { r: 9; opacity: .35; } 100% { r: 17; opacity: 0; } } .msai-gs__pd-zones { display: grid; grid-template-columns: repeat(min(var(--msai-gs-pd-zone-count, 2), 2), 1fr); gap: 20px; } .msai-gs__pd-zone { display: flex; flex-direction: column; gap: 5px; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; } .msai-gs__slide.is-active .msai-gs__pd-zone { opacity: 1; transform: translateY(0); } .msai-gs__pd-zone-icon { width: 19px; height: 19px; color: var(--msai-gs-accent); } .msai-gs__pd-zone--risk .msai-gs__pd-zone-icon { color: var(--msai-gs-pd-warn); } .msai-gs__pd-zone-label { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--msai-gs-text); margin-top: 2px; } .msai-gs__pd-zone--risk .msai-gs__pd-zone-label { color: var(--msai-gs-pd-warn); } .msai-gs__pd-zone-desc { font-size: 14.5px; line-height: 1.4; color: var(--msai-gs-muted); } /* Mobile-only inline duration (shown instead of the desktop bracket row — see the max-width:859px block below). */ .msai-gs__pd-zone-duration { display: none; } /* Duration bracket layer — independent of the zone grid above it but sharing its column template, so a bracket can span N merged zones (see the grid-column: span logic in funnel-quiz-guided-slides.js). */ .msai-gs__pd-brackets { display: grid; grid-template-columns: repeat(min(var(--msai-gs-pd-zone-count, 2), 2), 1fr); gap: 20px; margin-top: 4px; } .msai-gs__pd-bracket { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .35s ease; } .msai-gs__slide.is-active .msai-gs__pd-bracket { opacity: 1; } .msai-gs__pd-bracket-line { display: block; width: 100%; height: 6px; border-left: 1px solid var(--msai-gs-border); border-right: 1px solid var(--msai-gs-border); border-top: 1px solid var(--msai-gs-border); } .msai-gs__pd-bracket--risk .msai-gs__pd-bracket-line { border-color: var(--msai-gs-pd-warn); } .msai-gs__pd-bracket-label { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--msai-gs-accent); text-transform: uppercase; } .msai-gs__pd-bracket--risk .msai-gs__pd-bracket-label { color: var(--msai-gs-pd-warn); } .msai-gs__pd-insight { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--msai-gs-soft); border: 1px solid var(--msai-gs-border); opacity: 0; transition: opacity .35s ease .5s; } .msai-gs__slide.is-active .msai-gs__pd-insight { opacity: 1; } .msai-gs__pd-insight-icon { width: 17px; height: 17px; color: var(--msai-gs-accent); flex: 0 0 auto; margin-top: 1px; } .msai-gs__pd-insight p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--msai-gs-text); } .msai-gs__pd-insight-highlight { color: var(--msai-gs-pd-warn); font-style: normal; font-weight: 700; } @media (max-width: 859px) { .msai-gs__pd-brand { position: static; justify-content: flex-end; margin-bottom: 10px; } .msai-gs__slide--personal_diagnosis { padding-top: 6px; } /* No horizontal scroll anywhere on mobile (mandatory) — a 2-column x 2-row grid keeps all 4 states visible/readable without swiping. Each zone shows its own duration inline (see .msai-gs__pd-zone-duration below) instead of a separate spanning bracket row, since a merged desktop bracket (grid-column: span N) has no clean equivalent once the grid is only 2 columns wide. */ .msai-gs__pd-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } .msai-gs__pd-zone { min-width: 0; } .msai-gs__pd-zone-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .msai-gs__pd-zone-duration { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--msai-gs-accent); } .msai-gs__pd-zone--risk .msai-gs__pd-zone-duration { color: var(--msai-gs-pd-warn); } .msai-gs__pd-brackets { display: none; } .msai-gs__pd-evidence-wrap { margin-top: 26px; } .msai-gs__pd-evidence { display: flex; flex-direction: column; gap: 16px; } /* SVG text scales with the chart's own viewBox, not the viewport — at mobile widths the rendered SVG is ~40% of its 900-unit viewBox, so a 15-unit label collapses to ~6px on screen (measured). Bumping the in-SVG font-size compensates so the ACTUAL rendered pixels stay legible; this is a fixed compensation tuned for the 360-430px range this mission's QA targets, not a universal scale-independent fix. */ .msai-gs__pd-graph-x-label { font-size: 28px; } .msai-gs__pd-graph-x-label--highlight { font-size: 32px; } .msai-gs__pd-graph-point-label { font-size: 24px; } .msai-gs__pd-graph-threshold-label { font-size: 26px; } /* When the JS staggers the x-axis labels onto two rows (4+ labels on mobile), keep the highlighted one the same width as its neighbours so a single wide label can't reach across the row gap into the next one, and trim a touch of tracking to buy horizontal room. */ .msai-gs__pd-graph-x-label.is-staggered { font-size: 26px; letter-spacing: -0.01em; } .msai-gs__pd-graph-x-label--highlight.is-staggered { font-size: 26px; } } @media (min-width: 860px) { .msai-gs__pd-layout2 { flex-direction: row; align-items: flex-start; gap: 64px; } .msai-gs__pd-left { flex: 0 0 38%; padding-top: 4px; } /* Reference sits the graph header roughly level with the headline, not the eyebrow — the brand/slide-count cluster occupies the same top band the left column's eyebrow does, so the right column needs its own clearance to sit below it instead of colliding with it. */ .msai-gs__pd-right { flex: 1 1 0; padding-top: 68px; } .msai-gs__pd-zones { grid-template-columns: repeat(min(var(--msai-gs-pd-zone-count, 4), 4), 1fr); } .msai-gs__pd-brackets { grid-template-columns: repeat(min(var(--msai-gs-pd-zone-count, 4), 4), 1fr); } } /* ================================================================== Slide 2 — Solution Blueprint Pixel-measured against docs/template's approved Slide 2 image, same method as Slide 1: editorial serif headline, borderless composition, the pillar "stack" is a stylized CSS approximation of the reference's 3D glass-disc render (a literal photoreal 3D asset isn't a fit for a lightweight, responsive, AI-size-flexible 2-4 item component) that keeps the same layered/coordinated read - numbered items with a dotted connector, warm emphasis tone on at most one pillar, and the same bottom evidence + editorial quote language as Slide 1. ================================================================== */ .msai-gs__slide--solution_blueprint { --msai-gs-slide-accent: var(--msai-gs-t2); --msai-gs-sb-serif: "PT Serif", Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", ui-serif, serif; --msai-gs-sb-warn: #c2410c; padding-top: 40px; overflow-y: auto; } @media (min-width: 1200px) { .msai-gs__slide--solution_blueprint.msai-gs__slide { max-width: 1560px !important; } } .msai-gs__slide--solution_blueprint .msai-gs__content { flex-shrink: 0; } .msai-gs__sb-layout { display: flex; flex-direction: column; gap: 26px; min-height: 0; } .msai-gs__sb-left { display: flex; flex-direction: column; min-width: 0; } .msai-gs__sb-headline.msai-gs__sb-headline { font-family: var(--msai-gs-sb-serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(26px, 3.9vw, 56px); line-height: 1.12; -webkit-line-clamp: 6; } .msai-gs__sb-emphasis { color: var(--msai-gs-accent); font-style: italic; } .msai-gs__sb-divider { height: 1px; background: var(--msai-gs-border); width: 84px; margin: 22px 0; flex: 0 0 auto; } .msai-gs__sb-intro { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--msai-gs-muted); margin: 0; max-width: 36ch; } .msai-gs__sb-tagline { font-size: 14px; line-height: 1.5; color: var(--msai-gs-text); font-weight: 600; margin: 16px 0 0; } .msai-gs__sb-right { min-width: 0; } .msai-gs__sb-diagram { display: flex; flex-direction: column; gap: 18px; } .msai-gs__sb-stack-row { display: flex; align-items: center; gap: 30px; } .msai-gs__sb-coordinated { flex: 0 0 auto; writing-mode: horizontal-tb; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 74px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--msai-gs-accent); opacity: 0; transition: opacity .4s ease .1s; } .msai-gs__slide.is-active .msai-gs__sb-coordinated { opacity: 1; } .msai-gs__sb-coordinated-icon { width: 16px; height: 16px; } .msai-gs__sb-stack { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; } .msai-gs__sb-disc { width: 116px; height: 116px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 28%, #eef2fc 0%, #c3d1f0 75%); box-shadow: 0 14px 26px rgba(18, 61, 157, .16), inset 0 2px 6px rgba(255, 255, 255, .7), inset 0 -6px 10px rgba(18, 61, 157, .1); border: 1px solid rgba(18, 61, 157, .12); opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .5s ease, transform .5s ease; } .msai-gs__sb-disc:not(:first-child) { margin-top: -26px; } .msai-gs__slide.is-active .msai-gs__sb-disc { opacity: 1; transform: translateY(0) scale(1); } .msai-gs__sb-disc--emphasis { background: radial-gradient(circle at 35% 28%, #fdece3 0%, #f0a877 75%); box-shadow: 0 14px 26px rgba(194, 65, 12, .2), inset 0 2px 6px rgba(255, 255, 255, .55), inset 0 -6px 10px rgba(194, 65, 12, .14); border-color: rgba(194, 65, 12, .16); } .msai-gs__sb-disc-icon { width: 34px; height: 34px; color: var(--msai-gs-accent); } .msai-gs__sb-disc--emphasis .msai-gs__sb-disc-icon { color: var(--msai-gs-sb-warn); } .msai-gs__sb-items { flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .msai-gs__sb-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; } .msai-gs__slide.is-active .msai-gs__sb-item { opacity: 1; transform: translateY(0); } .msai-gs__sb-item-connector { flex: 0 0 auto; width: 22px; height: 0; margin-top: 12px; border-top: 1.5px dotted var(--msai-gs-border); } .msai-gs__sb-item-badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--msai-gs-accent); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .msai-gs__sb-item--emphasis .msai-gs__sb-item-badge { background: var(--msai-gs-sb-warn); } .msai-gs__sb-item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .msai-gs__sb-item-title { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--msai-gs-accent); } .msai-gs__sb-item--emphasis .msai-gs__sb-item-title { color: var(--msai-gs-sb-warn); } .msai-gs__sb-item-short { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--msai-gs-text); line-height: 1.4; } .msai-gs__sb-item-long { margin: 0; font-size: 13.5px; color: var(--msai-gs-muted); line-height: 1.4; } /* ---- Bottom evidence + quote — same restrained, borderless language as Slide 1: hairline rule instead of a card, no side-tab accent border. */ .msai-gs__sb-evidence-wrap { margin-top: 34px; } .msai-gs__sb-evidence-header { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; } .msai-gs__sb-evidence-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--msai-gs-accent); white-space: nowrap; } .msai-gs__sb-evidence-rule { flex: 1 1 auto; height: 1px; background: var(--msai-gs-border); } .msai-gs__sb-evidence-row { display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-start; } .msai-gs__sb-stats { flex: 1 1 320px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; min-width: 0; } .msai-gs__sb-stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; } .msai-gs__slide.is-active .msai-gs__sb-stat { opacity: 1; transform: translateY(0); } .msai-gs__sb-stat-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--msai-gs-border); color: var(--msai-gs-accent); display: flex; align-items: center; justify-content: center; padding: 8px; flex: 0 0 auto; } .msai-gs__sb-stat-text { display: flex; flex-direction: column; gap: 2px; } .msai-gs__sb-stat-value { font-family: var(--msai-gs-sb-serif); font-size: 26px; font-weight: 700; color: var(--msai-gs-text); line-height: 1.1; } .msai-gs__sb-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--msai-gs-text); margin-top: 2px; } .msai-gs__sb-stat-desc { font-size: 12.5px; line-height: 1.4; color: var(--msai-gs-muted); } .msai-gs__sb-quote { flex: 1 1 280px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--msai-gs-border); opacity: 0; transition: opacity .4s ease .2s; } .msai-gs__slide.is-active .msai-gs__sb-quote { opacity: 1; } .msai-gs__sb-quote-mark { display: block; font-family: var(--msai-gs-sb-serif); font-size: 34px; font-weight: 700; color: var(--msai-gs-sb-warn); line-height: 1; margin-bottom: 4px; } .msai-gs__sb-quote-text { font-family: var(--msai-gs-sb-serif); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; color: var(--msai-gs-text); margin: 0 0 10px; } .msai-gs__sb-quote-tagline { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-sb-warn); margin: 0; } @media (max-width: 859px) { .msai-gs__slide--solution_blueprint { padding-top: 6px; } .msai-gs__sb-stack-row { align-items: flex-start; gap: 16px; } .msai-gs__sb-coordinated { display: none; } .msai-gs__sb-disc { width: 74px; height: 74px; } .msai-gs__sb-disc:not(:first-child) { margin-top: -16px; } .msai-gs__sb-disc-icon { width: 22px; height: 22px; } .msai-gs__sb-items { gap: 26px; } .msai-gs__sb-item-connector { display: none; } .msai-gs__sb-evidence-row { flex-direction: column; gap: 24px; } .msai-gs__sb-stats { grid-template-columns: 1fr; gap: 18px; width: 100%; } .msai-gs__sb-quote { border-left: none; padding-left: 0; border-top: 1px solid var(--msai-gs-border); padding-top: 18px; width: 100%; } } @media (min-width: 860px) { .msai-gs__sb-layout { flex-direction: row; align-items: flex-start; gap: 56px; } .msai-gs__sb-left { flex: 0 0 36%; padding-top: 4px; } .msai-gs__sb-right { flex: 1 1 0; padding-top: 68px; } } /* ================================================================== Slide 3 — AI-Built System ================================================================== */ .msai-gs__slide--ai_built_system { --msai-gs-slide-accent: var(--msai-gs-t3); } .msai-gs__ai-intro { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.5; color: var(--msai-gs-muted); margin: 0 0 16px; } .msai-gs__ai-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } .msai-gs__ai-duration { display: flex; align-items: baseline; gap: 8px; } .msai-gs__ai-duration .num { font-size: clamp(30px, 6vw, 46px); font-weight: 700; color: var(--msai-gs-slide-accent, var(--msai-gs-accent)); line-height: 1; } .msai-gs__ai-duration .unit { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--msai-gs-text); } .msai-gs__ai-duration-label { font-size: 12px; color: var(--msai-gs-muted); margin-top: 2px; } .msai-gs__ai-manifest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--msai-gs-border); } .msai-gs__ai-manifest-item { padding: 10px 12px; border-bottom: 1px solid var(--msai-gs-border); border-right: 1px solid var(--msai-gs-border); } .msai-gs__ai-manifest-item:nth-child(2n) { border-right: none; } .msai-gs__ai-manifest-item .num { font-size: clamp(19px, 4vw, 24px); font-weight: 700; color: var(--msai-gs-text); display: block; } .msai-gs__ai-manifest-item .lbl { font-size: 12px; color: var(--msai-gs-text); font-weight: 600; letter-spacing: .01em; display: block; } .msai-gs__ai-manifest-item .micro { display: block; margin-top: 2px; font-size: 11px; color: var(--msai-gs-muted); } .msai-gs__ai-manifest-item .num.is-counted { opacity: 0; } .msai-gs__ai-manifest-item .num.is-counted.is-shown { opacity: 1; transition: opacity .2s ease; } /* Duration-style card: no number to count, its label carries the real value ("6-month plan fully built") so it reads as the headline instead. */ .msai-gs__ai-manifest-item.is-headline .lbl { font-size: clamp(15px, 3.4vw, 18px); font-weight: 700; line-height: 1.25; } .msai-gs__ai-roadmap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .msai-gs__ai-roadmap-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-muted); margin-bottom: 8px; } .msai-gs__ai-roadmap-track { display: flex; flex-direction: column; gap: 10px; } .msai-gs__ai-phase { display: flex; align-items: flex-start; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; } .msai-gs__slide.is-active .msai-gs__ai-phase { opacity: 1; transform: translateY(0); } .msai-gs__ai-phase:nth-child(1) { transition-delay: .05s; } .msai-gs__ai-phase:nth-child(2) { transition-delay: .12s; } .msai-gs__ai-phase:nth-child(3) { transition-delay: .19s; } .msai-gs__ai-phase:nth-child(4) { transition-delay: .26s; } .msai-gs__ai-phase-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--msai-gs-slide-accent, var(--msai-gs-accent)); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .msai-gs__ai-phase-body { flex: 1; min-width: 0; } .msai-gs__ai-phase-name { font-size: 13.5px; font-weight: 700; color: var(--msai-gs-text); } .msai-gs__ai-phase-duration { font-size: 11px; color: var(--msai-gs-muted); margin-left: 6px; font-weight: 400; } .msai-gs__ai-phase-framing { font-size: 12px; color: var(--msai-gs-muted); line-height: 1.4; margin-top: 1px; } .msai-gs__ai-lower { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } .msai-gs__ai-week-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-muted); margin-bottom: 8px; } .msai-gs__ai-week { display: flex; gap: 8px; } .msai-gs__ai-day { flex: 1; background: #fff; border: 1px solid var(--msai-gs-border); border-radius: 12px; padding: 9px 8px; min-width: 0; } .msai-gs__ai-day-label { font-size: 10.5px; font-weight: 700; color: var(--msai-gs-slide-accent, var(--msai-gs-accent)); text-transform: uppercase; } .msai-gs__ai-day-theme { font-size: 10.5px; color: var(--msai-gs-muted); margin: 2px 0; } .msai-gs__ai-day-task { font-size: 11.5px; color: var(--msai-gs-text); line-height: 1.3; } .msai-gs__ai-adaptive { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--msai-gs-t3-soft); font-size: 12px; color: var(--msai-gs-text); line-height: 1.4; } .msai-gs__ai-adaptive .icon { flex: 0 0 auto; font-size: 15px; } .msai-gs__ai-rationale { font-size: 12.5px; color: var(--msai-gs-muted); line-height: 1.5; font-style: italic; margin-top: 4px; } @media (min-width: 860px) { .msai-gs__ai-top { flex-direction: row; align-items: center; gap: 30px; } .msai-gs__ai-duration-block { flex: 0 0 auto; min-width: 190px; } .msai-gs__ai-manifest { flex: 1; grid-template-columns: repeat(4, 1fr); border-top: none; border-left: 1px solid var(--msai-gs-border); } .msai-gs__ai-manifest-item { border-bottom: none; text-align: center; } .msai-gs__ai-manifest-item:nth-child(2n) { border-right: 1px solid var(--msai-gs-border); } .msai-gs__ai-manifest-item:last-child { border-right: none; } .msai-gs__ai-roadmap-track { flex-direction: row; } .msai-gs__ai-phase { flex-direction: column; flex: 1; text-align: center; align-items: center; } .msai-gs__ai-phase-duration { display: block; margin-left: 0; } .msai-gs__ai-lower { flex-direction: row; align-items: flex-start; } .msai-gs__ai-lower-week { flex: 1.3; } .msai-gs__ai-lower-adaptive { flex: 1; } .msai-gs__ai-adaptive { height: 100%; align-items: flex-start; } } /* ================================================================== Slide 4 — Path & Proof ================================================================== */ .msai-gs__slide--path_proof { --msai-gs-slide-accent: var(--msai-gs-t4); } .msai-gs__pp-intro { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.5; color: var(--msai-gs-muted); margin: 0 0 14px; } .msai-gs__pp-graph-wrap { margin-bottom: 4px; } .msai-gs__pp-graph { width: 100%; height: auto; display: block; } .msai-gs__pp-graph-grid line { stroke: var(--msai-gs-border); stroke-width: 1; opacity: .6; } .msai-gs__pp-graph-axis-label { font-size: 10px; fill: var(--msai-gs-muted); font-family: inherit; } .msai-gs__pp-graph-phase-rect { fill: var(--msai-gs-slide-accent, var(--msai-gs-accent)); opacity: .045; } .msai-gs__pp-graph-phase-label { font-size: 9.5px; fill: var(--msai-gs-muted); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-family: inherit; } .msai-gs__pp-graph-band { fill: var(--msai-gs-slide-accent, var(--msai-gs-accent)); opacity: .1; } .msai-gs__pp-graph-line { fill: none; stroke: var(--msai-gs-slide-accent, var(--msai-gs-accent)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); } .msai-gs__slide.is-active .msai-gs__pp-graph-line { stroke-dashoffset: 0; } .msai-gs__pp-graph-dot { fill: #fff; stroke: var(--msai-gs-slide-accent, var(--msai-gs-accent)); stroke-width: 2.5; opacity: 0; transition: opacity .3s ease; } .msai-gs__slide.is-active .msai-gs__pp-graph-dot { opacity: 1; transition-delay: .7s; } .msai-gs__pp-graph-dot.is-target { stroke: var(--msai-gs-success); } .msai-gs__pp-graph-value-label { font-size: 10px; fill: var(--msai-gs-text); font-weight: 700; font-family: inherit; } .msai-gs__pp-milestones { display: flex; gap: 10px; margin: 10px 0 14px; } .msai-gs__pp-milestone { flex: 1; min-width: 0; border-left: 2px solid var(--msai-gs-border); padding-left: 8px; } .msai-gs__pp-milestone-period { font-size: 10px; font-weight: 700; color: var(--msai-gs-slide-accent, var(--msai-gs-accent)); text-transform: uppercase; letter-spacing: .04em; } .msai-gs__pp-milestone-label { font-size: 12px; font-weight: 700; color: var(--msai-gs-text); margin-top: 1px; } .msai-gs__pp-milestone-meaning { font-size: 11px; color: var(--msai-gs-muted); line-height: 1.35; margin-top: 2px; } .msai-gs__pp-disclaimer { font-size: 10.5px; color: var(--msai-gs-muted); line-height: 1.4; margin-bottom: 14px; opacity: .85; } .msai-gs__pp-proof-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .msai-gs__pp-proof-card { background: var(--msai-gs-card-bg); border: 1px solid var(--msai-gs-border); border-radius: 14px; padding: 13px 14px; flex: 1; } .msai-gs__pp-proof-card .kicker { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-muted); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; } .msai-gs__pp-proof-card .stars { color: #f2a900; font-size: 11px; letter-spacing: 1px; } .msai-gs__pp-proof-quote { font-size: 13px; font-style: italic; color: var(--msai-gs-text); margin: 0 0 5px; line-height: 1.4; } .msai-gs__pp-proof-author { font-size: 11px; color: var(--msai-gs-muted); } .msai-gs__pp-proof-stat .num { font-size: clamp(24px, 6vw, 30px); font-weight: 700; color: var(--msai-gs-slide-accent, var(--msai-gs-accent)); display: block; } .msai-gs__pp-proof-stat .lbl { font-size: 11.5px; color: var(--msai-gs-text); font-weight: 600; } .msai-gs__pp-proof-stat .src { font-size: 10.5px; color: var(--msai-gs-muted); margin-top: 3px; } .msai-gs__pp-proof-bridge { font-size: 11.5px; color: var(--msai-gs-muted); font-style: italic; margin-top: 6px; } .msai-gs__pp-ai { margin-bottom: 14px; } .msai-gs__pp-ai-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--msai-gs-muted); margin: 0 0 8px; } .msai-gs__pp-ai-pillars { display: flex; flex-direction: column; gap: 8px; } .msai-gs__pp-ai-pillar { display: flex; gap: 8px; align-items: baseline; } .msai-gs__pp-ai-pillar .name { font-size: 11px; font-weight: 700; color: var(--msai-gs-slide-accent, var(--msai-gs-accent)); text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto; min-width: 92px; } .msai-gs__pp-ai-pillar .text { font-size: 12px; color: var(--msai-gs-text); line-height: 1.4; } .msai-gs__pp-handoff { padding: 13px 16px; border-radius: 16px; background: var(--msai-gs-t4-soft); border-left: 3px solid var(--msai-gs-slide-accent, var(--msai-gs-accent)); } .msai-gs__pp-handoff-headline { font-size: 14px; font-weight: 700; color: var(--msai-gs-text); margin: 0 0 3px; } .msai-gs__pp-handoff-body { font-size: 12.5px; color: var(--msai-gs-muted); margin: 0; } @media (min-width: 900px) { .msai-gs__pp-body-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 28px; align-items: start; } .msai-gs__pp-graph-col { min-width: 0; } .msai-gs__pp-side-col { min-width: 0; display: flex; flex-direction: column; } .msai-gs__pp-proof-row { flex-direction: row; } .msai-gs__pp-side-col .msai-gs__pp-proof-row { flex-direction: column; } } /* ================================================================== Scratch / Reveal — accepted, unmodified this mission ================================================================== */ .msai-gs__slide--scratch_reveal { --msai-gs-slide-accent: #3157d5; background: radial-gradient(circle at 80% 28%, rgba(49,87,213,.1), transparent 30%), radial-gradient(circle at 14% 76%, rgba(14,116,144,.08), transparent 27%); } .msai-gs__slide--scratch_reveal .msai-gs__content { max-width: 1160px; margin: auto; } .msai-gs__scratch-layout { display: grid; grid-template-columns: minmax(250px,.78fr) minmax(360px,1.22fr); align-items: center; gap: clamp(36px,6vw,88px); width: 100%; padding: clamp(12px,2vh,24px) clamp(2px,2vw,22px) 8px; } .msai-gs__scratch-story { max-width: 440px; } .msai-gs__scratch-eyebrow { margin: 0 0 14px; color: var(--msai-gs-slide-accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .msai-gs__scratch-headline { margin: 0; max-width: 12ch; color: var(--msai-gs-text); font-family: var(--msai-gs-pd-serif,Georgia,serif); font-size: clamp(40px,4.5vw,68px); font-weight: 700; letter-spacing: -.045em; line-height: .98; } .msai-gs__scratch-copy { margin: 22px 0 0; max-width: 42ch; color: var(--msai-gs-muted); font-size: clamp(15px,1.35vw,18px); line-height: 1.65; } .msai-gs__scratch-instruction { display: inline-flex; align-items: center; gap: 9px; margin: 26px 0 0; color: var(--msai-gs-text); font-size: 13px; font-weight: 750; } .msai-gs__scratch-instruction::before { width: 9px; height: 9px; border: 2px solid var(--msai-gs-slide-accent); border-radius: 50%; box-shadow: 0 0 0 5px rgba(49,87,213,.1); content: ""; } .msai-gs__scratch-visual { display: grid; min-width: 0; place-items: center; } .msai-gs__scratch-area { position: relative; width: min(100%,620px,calc(53vh * var(--msai-gs-scratch-ratio,1.7778))); max-height: 53vh; overflow: hidden; border: 1px solid rgba(117,135,170,.28); border-radius: clamp(20px,2.2vw,30px); background: #fff; box-shadow: 0 28px 70px rgba(22,39,74,.17),0 6px 18px rgba(22,39,74,.08); isolation: isolate; touch-action: none; user-select: none; } .msai-gs__scratch-area::after { position: absolute; inset: 0; z-index: 4; border: 1px solid rgba(255,255,255,.4); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(8,26,62,.05); content: ""; pointer-events: none; } .msai-gs__scratch-reward { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; overflow: hidden; background: linear-gradient(145deg,#f7f9ff,#edf3ff); color: var(--msai-gs-text); text-align: center; } .msai-gs__scratch-image { width: 100%; height: 100%; object-fit: contain; display: block; } .msai-gs__scratch-reward-copy { position: absolute; left: 50%; bottom: clamp(14px,5%,30px); display: flex; flex-direction: column; gap: 3px; max-width: calc(100% - 32px); padding: 10px 16px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: rgba(8,24,57,.72); box-shadow: 0 10px 24px rgba(8,24,57,.18); color: #fff; backdrop-filter: blur(12px); } .msai-gs__scratch-reward-copy .code { font-size: clamp(17px,2vw,24px); font-weight: 800; letter-spacing: .06em; } .msai-gs__scratch-reward-copy span:last-child:not(.code) { font-size: 11px; opacity: .82; } .msai-gs__scratch-reveal-text { max-width: 24ch; padding: 24px; font-size: clamp(18px,2vw,26px); font-weight: 750; line-height: 1.25; } .msai-gs__scratch-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; cursor: grab; transition: opacity .55s cubic-bezier(.22,1,.36,1); } .msai-gs__scratch-canvas:active { cursor: grabbing; } .msai-gs__scratch-canvas:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 8px rgba(10,31,78,.3); } .msai-gs__scratch-surface-copy { position: absolute; top: 50%; left: 50%; z-index: 3; max-width: calc(100% - 40px); padding: 11px 17px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(8,25,62,.2); box-shadow: 0 8px 22px rgba(5,18,50,.12); color: #fff; font-size: clamp(12px,1.25vw,15px); font-weight: 750; line-height: 1.3; text-align: center; text-shadow: 0 1px 8px rgba(4,18,50,.3); pointer-events: none; transition: opacity .25s ease,transform .25s ease; } .msai-gs__scratch-area.is-started .msai-gs__scratch-surface-copy { opacity: 0; transform: translate(-50%,-45%); } .msai-gs__scratch-area.is-revealed .msai-gs__scratch-canvas { opacity: 0; pointer-events: none; } @media (max-width: 899px) { .msai-gs__slide--scratch_reveal { overflow-y: auto; -webkit-overflow-scrolling: touch; } .msai-gs__slide--scratch_reveal .msai-gs__content { margin: auto; } .msai-gs__scratch-layout { grid-template-columns: 1fr; gap: 26px; padding: 8px 0 4px; } .msai-gs__scratch-story { max-width: 660px; text-align: center; justify-self: center; } .msai-gs__scratch-headline { max-width: 15ch; margin-inline: auto; font-size: clamp(36px,7vw,54px); } .msai-gs__scratch-copy { margin: 15px auto 0; } .msai-gs__scratch-instruction { margin-top: 16px; } .msai-gs__scratch-area { width: min(100%,590px,calc(45vh * var(--msai-gs-scratch-ratio,1.7778))); max-height: 45vh; } } @media (max-width: 600px) { .msai-gs__slide--scratch_reveal { padding-inline: 18px; } .msai-gs__slide--scratch_reveal .msai-gs__pd-brand { margin-bottom: 4px; } .msai-gs__scratch-layout { gap: 20px; } .msai-gs__scratch-headline { font-size: clamp(32px,10vw,43px); line-height: 1.02; } .msai-gs__scratch-copy { font-size: 14px; line-height: 1.5; } .msai-gs__scratch-instruction { font-size: 12px; } .msai-gs__scratch-area { width: min(100%,calc(39vh * var(--msai-gs-scratch-ratio,1.7778))); max-height: 39vh; border-radius: 20px; } } /* Elementor slide — the one exception to zero-scroll; owner content can scroll naturally. */ .msai-gs__elementor-embed { width: 100%; min-height: 100%; } /* Embedded continuation chat — follows the Elementor offer content in normal document flow (never an overlay over it), compact/self-contained so it never competes visually with the owner's page. */ .msai-gs__result-chat { width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 22px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--msai-gs-border); background: var(--msai-gs-card-bg); box-sizing: border-box; } .msai-gs__result-chat-head { margin-bottom: 14px; } .msai-gs__result-chat-head strong { display: block; font-size: 16px; color: var(--msai-gs-text); } .msai-gs__result-chat-head span { display: block; margin-top: 2px; font-size: 13px; color: var(--msai-gs-muted); } /* Message feed + bubbles below reproduce assets/css/frontend-app.css's real Chat Room rules (.msai-chat-feed / .msai-message / .msai-message__* / .msai-thinking-dots / .msai-streaming-caret / markdown typography) verbatim, only re-scoped from "#msai-app " to ".msai-gs__result-chat " and re-mapped onto this shell's own --msai-gs-* tokens instead of frontend-app.css's --msai-* ones, since that stylesheet isn't loaded on this page. Keep in sync with frontend-app.css if that pattern changes. */ .msai-gs__result-chat .msai-chat-feed { display: flex; flex-direction: column; gap: 16px; max-height: 420px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; } .msai-gs__result-chat .msai-chat-feed:empty { display: none; } .msai-gs__result-chat .msai-message { width: fit-content; max-width: min(640px, 92%); padding: 14px 16px; border-radius: 20px; box-shadow: 0 10px 24px rgba(11, 18, 32, 0.06); } .msai-gs__result-chat .msai-message--assistant { width: min(680px, 100%); max-width: min(680px, 100%); background: var(--msai-gs-card-bg); border: 1px solid var(--msai-gs-border); } .msai-gs__result-chat .msai-message--user { margin-left: auto; max-width: min(480px, 82%); background: var(--msai-gs-accent); color: #fff; } .msai-gs__result-chat .msai-message__meta { margin-bottom: 6px; font-size: 0.72rem; font-weight: 700; opacity: 0.7; } .msai-gs__result-chat .msai-message__body { line-height: 1.6; white-space: pre-wrap; font-size: 14px; } .msai-gs__result-chat .msai-message__body--thinking { display: inline-flex; align-items: center; gap: 10px; white-space: normal; } .msai-gs__result-chat .msai-message__body--markdown { white-space: normal; } .msai-gs__result-chat .msai-message__markdown { display: grid; gap: 12px; font-size: 14px; line-height: 1.66; color: inherit; width: 100%; } .msai-gs__result-chat .msai-message__markdown > :first-child { margin-top: 0; } .msai-gs__result-chat .msai-message__markdown > :last-child { margin-bottom: 0; } .msai-gs__result-chat .msai-message__markdown h1, .msai-gs__result-chat .msai-message__markdown h2, .msai-gs__result-chat .msai-message__markdown h3 { margin: 0; color: var(--msai-gs-text); line-height: 1.25; } .msai-gs__result-chat .msai-message__markdown h1 { font-size: 1.1rem; font-weight: 800; } .msai-gs__result-chat .msai-message__markdown h2 { font-size: 1.03rem; font-weight: 780; } .msai-gs__result-chat .msai-message__markdown h3 { font-size: 0.97rem; font-weight: 760; } .msai-gs__result-chat .msai-message__markdown p, .msai-gs__result-chat .msai-message__markdown ul, .msai-gs__result-chat .msai-message__markdown ol, .msai-gs__result-chat .msai-message__markdown blockquote, .msai-gs__result-chat .msai-message__markdown pre { margin: 0; } .msai-gs__result-chat .msai-message__markdown ul, .msai-gs__result-chat .msai-message__markdown ol { padding-left: 1.15rem; display: grid; gap: 0.35rem; } .msai-gs__result-chat .msai-message__markdown ol { list-style: decimal outside; } .msai-gs__result-chat .msai-message__markdown ul { list-style: disc outside; } .msai-gs__result-chat .msai-message__markdown li { display: list-item; padding-left: 0.1rem; } .msai-gs__result-chat .msai-message__markdown strong { font-weight: 750; color: var(--msai-gs-text); } .msai-gs__result-chat .msai-message__markdown em { font-style: italic; } .msai-gs__result-chat .msai-message__markdown a { color: var(--msai-gs-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.14em; word-break: break-word; } .msai-gs__result-chat .msai-message__markdown a:hover, .msai-gs__result-chat .msai-message__markdown a:focus-visible { color: var(--msai-gs-accent-hover); } .msai-gs__result-chat .msai-message__markdown .msai-color-blue { color: var(--msai-gs-accent); font-weight: 650; } .msai-gs__result-chat .msai-message__markdown .msai-color-green { color: var(--msai-gs-success); font-weight: 650; } .msai-gs__result-chat .msai-message__markdown .msai-color-yellow { color: #8b6619; font-weight: 650; } .msai-gs__result-chat .msai-message__markdown .msai-color-orange { color: #b5530a; font-weight: 650; } .msai-gs__result-chat .msai-message__markdown .msai-color-red { color: var(--msai-gs-danger); font-weight: 700; } .msai-gs__result-chat .msai-message__markdown blockquote { padding: 0.8rem 1rem; border-left: 3px solid rgba(18, 61, 157, 0.4); border-radius: 0 14px 14px 0; background: var(--msai-gs-soft); color: var(--msai-gs-muted); } .msai-gs__result-chat .msai-message__markdown hr { border: 0; border-top: 1px solid var(--msai-gs-border); margin: 0; } .msai-gs__result-chat .msai-message__markdown code { padding: 0.14rem 0.4rem; border-radius: 8px; background: rgba(18, 61, 157, 0.08); color: var(--msai-gs-accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.9em; word-break: break-word; } .msai-gs__result-chat .msai-message__markdown pre { max-width: 100%; padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, rgba(11, 29, 54, 0.97) 0%, rgba(16, 42, 67, 0.98) 100%); overflow-x: auto; -webkit-overflow-scrolling: touch; } .msai-gs__result-chat .msai-message__markdown pre code { display: block; padding: 0; background: transparent; color: #eaf3ff; font-size: 0.88rem; line-height: 1.6; white-space: pre; word-break: normal; } .msai-gs__result-chat .msai-message__markdown .msai-markdown-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .msai-gs__result-chat .msai-message__markdown .msai-markdown-table { width: 100%; min-width: max(100%, calc(var(--msai-table-columns, 1) * 12rem)); border-collapse: separate; border-spacing: 0; border: 1px solid var(--msai-gs-border); border-radius: 14px; overflow: hidden; background: var(--msai-gs-card-bg); } .msai-gs__result-chat .msai-message__markdown .msai-markdown-table th, .msai-gs__result-chat .msai-message__markdown .msai-markdown-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--msai-gs-border); border-right: 1px solid var(--msai-gs-border); text-align: left; vertical-align: top; } .msai-gs__result-chat .msai-message__markdown .msai-markdown-table th { background: var(--msai-gs-soft); color: var(--msai-gs-text); font-size: 0.82rem; font-weight: 750; } .msai-gs__result-chat .msai-message__markdown .msai-markdown-table tr:last-child td { border-bottom: 0; } .msai-gs__result-chat .msai-message__markdown .msai-markdown-table th:last-child, .msai-gs__result-chat .msai-message__markdown .msai-markdown-table td:last-child { border-right: 0; } .msai-gs__result-chat .msai-thinking-dots { display: inline-flex; align-items: center; gap: 5px; } .msai-gs__result-chat .msai-thinking-dots span { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.32; animation: msai-gs-thinking-dot 1.1s ease-in-out infinite; } .msai-gs__result-chat .msai-thinking-dots span:nth-child(2) { animation-delay: 0.16s; } .msai-gs__result-chat .msai-thinking-dots span:nth-child(3) { animation-delay: 0.32s; } @keyframes msai-gs-thinking-dot { 0%, 80%, 100% { opacity: 0.24; transform: translateY(0); } 40% { opacity: 0.92; transform: translateY(-2px); } } .msai-gs__result-chat .msai-streaming-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; opacity: 0.75; animation: msai-gs-caret-blink 0.9s steps(1) infinite; } @keyframes msai-gs-caret-blink { 0%, 49% { opacity: 0.75; } 50%, 100% { opacity: 0; } } .msai-gs__result-chat-error { margin: 0 0 10px; font-size: 13px; color: var(--msai-gs-danger); } .msai-gs__result-chat-composer { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--msai-gs-border); border-radius: 16px; padding: 8px 8px 8px 14px; background: var(--msai-gs-bg); } .msai-gs__result-chat-input { flex: 1; resize: none; border: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--msai-gs-text); max-height: 140px; padding: 6px 0; } .msai-gs__result-chat-input:focus { outline: none; } .msai-gs__result-chat-send { flex: 0 0 auto; border: none; border-radius: 12px; padding: 10px 18px; background: var(--msai-gs-accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } .msai-gs__result-chat-send:disabled { opacity: .55; cursor: default; } .msai-gs__result-chat-send:hover:not(:disabled) { background: var(--msai-gs-accent-hover); } @media (max-width: 600px) { .msai-gs__result-chat { padding: 18px 16px max(18px, env(safe-area-inset-bottom)); } .msai-gs__result-chat-messages { max-height: 260px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .msai-gs__slide, .msai-gs__progress-fill, .msai-gs__progress-dot, .msai-gs__pd-loop-track, .msai-gs__pd-loop-node, .msai-gs__ai-phase, .msai-gs__pp-graph-line, .msai-gs__pp-graph-dot, .msai-gs__pd-graph-line, .msai-gs__pd-graph-area, .msai-gs__pd-graph-point, .msai-gs__pd-graph-bar, .msai-gs__pd-graph-highlight, .msai-gs__pd-zone, .msai-gs__pd-graph-highlight-guide, .msai-gs__pd-graph-threshold-line, .msai-gs__pd-graph-threshold-label, .msai-gs__pd-insight, .msai-gs__pd-evidence-item, .msai-gs__pd-bracket { transition: none !important; } .msai-gs__pd-loop-track { transform: scaleY(1) !important; } .msai-gs__pd-loop-node { opacity: 1 !important; transform: none !important; } .msai-gs__ai-phase { opacity: 1 !important; transform: none !important; } .msai-gs__pp-graph-line { stroke-dashoffset: 0 !important; } .msai-gs__pp-graph-dot { opacity: 1 !important; } .msai-gs__pd-graph-line { stroke-dashoffset: 0 !important; } .msai-gs__pd-graph-line--secondary, .msai-gs__pd-graph-line--risk { opacity: 1 !important; } .msai-gs__pd-graph-area { opacity: .55 !important; } .msai-gs__pd-graph-point, .msai-gs__pd-graph-highlight, .msai-gs__pd-zone, .msai-gs__pd-insight, .msai-gs__pd-evidence-item, .msai-gs__pd-bracket { opacity: 1 !important; transform: none !important; } .msai-gs__pd-graph-bar { transform: scaleY(1) !important; } .msai-gs__pd-graph-highlight-glow { animation: none !important; } .msai-gs__pd-graph-highlight-ring { animation: none !important; opacity: 0 !important; } .msai-gs__pd-graph-highlight-guide { opacity: .55 !important; } .msai-gs__pd-graph-threshold-line { opacity: .6 !important; } .msai-gs__pd-graph-threshold-label { opacity: 1 !important; } .msai-gs__sb-disc, .msai-gs__sb-item, .msai-gs__sb-coordinated, .msai-gs__sb-stat, .msai-gs__sb-quote { transition: none !important; opacity: 1 !important; transform: none !important; } } /* Responsive density tightening at small heights/widths so nothing needs to scroll */ @media (max-width: 400px) { .msai-gs__slide { padding-left: 16px; padding-right: 16px; } .msai-gs__headline { -webkit-line-clamp: 3; } .msai-gs__pd-signals { gap: 8px; } .msai-gs__ai-week { gap: 6px; } } @media (max-height: 700px) { .msai-gs__headline { font-size: clamp(19px, 6vw, 26px); margin-bottom: 6px; } .msai-gs__pd-explanation, .msai-gs__sb-intro, .msai-gs__ai-intro, .msai-gs__pp-intro { font-size: 13px; margin-bottom: 10px; } } @media (min-width: 768px) { .msai-gs__slide { padding-top: 18px; } .msai-gs__slide:not(.msai-gs__slide--elementor) { max-width: 720px; margin: 0 auto; } } @media (min-width: 1200px) { /* Section 90/91 — the accepted full-viewport shell should be used intelligently on wide desktops: the 4 new templates use real asymmetric multi-column composition (causal visual, system blueprint, roadmap, dominant graph), which a 640-720px single column cannot hold without cramping - so native slides get a much wider stage here. Elementor is untouched (own max-width:none rule below still wins) and short slides still center vertically via .msai-gs__content's margin:auto, they simply have more horizontal room instead of a narrow stretched column. */ .msai-gs__slide:not(.msai-gs__slide--elementor) { max-width: 1180px; } } .msai-gs__slide--elementor { max-width: none !important; margin: 0 !important; } /* Admin builder preview frame sizing helpers */ .msai-gsb-preview-frame--mobile .msai-gs { width: 375px; margin: 0 auto; } .msai-gsb-preview-frame--desktop .msai-gs { width: 100%; } /* 2026 approved-reference rebuild: Slides 2–4 only. */ .msai-gs__slide--solution_blueprint, .msai-gs__slide--ai_built_system, .msai-gs__slide--path_proof { --msai-gs-editorial: "PT Serif", Georgia, serif; overflow-y:auto; background:linear-gradient(125deg,#fff 0%,#fbfcff 58%,#f3f6fb 100%); } .msai-gs__slide--ai_built_system { --msai-gs-slide-accent:#3157d5; } .msai-gs__slide--path_proof { --msai-gs-slide-accent:#3157d5; } /* Slide 2 — a coordinated architecture, never three interchangeable cards. */ @media (min-width:900px){ .msai-gs__sb-layout{display:grid;grid-template-columns:minmax(290px,.78fr) minmax(650px,1.5fr);gap:clamp(44px,6vw,96px);align-items:center;min-height:470px} .msai-gs__sb-stack-row{display:grid;grid-template-columns:96px 320px minmax(330px,1fr);gap:28px;align-items:center} .msai-gs__sb-stack{filter:drop-shadow(0 30px 30px rgba(27,52,119,.14));perspective:900px} .msai-gs__sb-disc{width:260px;height:132px;border-radius:50%;transform:translateY(18px) rotateX(58deg) scale(.92);background:radial-gradient(ellipse at 42% 28%,rgba(255,255,255,.98),rgba(167,187,235,.64) 56%,rgba(63,95,182,.35));box-shadow:inset 0 9px 18px rgba(255,255,255,.82),inset 0 -13px 22px rgba(47,78,163,.18),0 18px 30px rgba(31,60,139,.12)} .msai-gs__slide.is-active .msai-gs__sb-disc{transform:translateY(0) rotateX(58deg) scale(1)} .msai-gs__sb-disc:not(:first-child){margin-top:-44px} .msai-gs__sb-disc-icon{width:48px;height:48px;transform:rotateX(-58deg);color:#3457b6} .msai-gs__sb-disc--emphasis{background:radial-gradient(ellipse at 42% 28%,#fff7ed,#ffd2a8 58%,#e57b30 100%)} .msai-gs__sb-items{gap:28px}.msai-gs__sb-item{min-height:104px;padding:8px 0 8px 32px;border-left:1px dashed #b9c7dc} .msai-gs__sb-item-connector{left:-28px;width:28px}.msai-gs__sb-item-badge{width:38px;height:38px;margin-left:0} .msai-gs__sb-evidence-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:52px;align-items:center} } .msai-gs__sb-coordinated{position:relative;width:96px;color:#3157d5}.msai-gs__sb-coordinated:after{content:"";width:38px;height:250px;border:1px solid #a6b8d8;border-right:0;border-radius:26px 0 0 26px;opacity:.75} .msai-gs__sb-headline.msai-gs__sb-headline{font-family:var(--msai-gs-editorial);font-size:clamp(34px,4vw,66px);line-height:1.06}.msai-gs__sb-divider{height:3px;width:52px;background:#3157d5}.msai-gs__sb-evidence-wrap{border-top:1px solid #dce4ef;padding-top:20px}.msai-gs__sb-quote{border-left:2px solid #ea7a34;padding-left:24px} /* Slide 3 — editorial story + one complete generated operating system. */ .msai-gs__ai-layout2{display:grid;grid-template-columns:minmax(230px,.62fr) minmax(620px,1.45fr) minmax(190px,.43fr);gap:clamp(26px,3.5vw,58px);align-items:center} .msai-gs__ai-story{min-width:0}.msai-gs__ai-headline,.msai-gs__pp-headline{font:400 clamp(34px,4vw,64px)/1.06 var(--msai-gs-editorial);letter-spacing:-.025em;margin:10px 0 22px;color:#111a2d}.msai-gs__ai-intro,.msai-gs__pp-intro{font-size:15px;line-height:1.65;color:#627086;margin:0}.msai-gs__ai-rationale{margin:28px 0 0;padding:20px 0 0;border-top:2px solid #3157d5;font:italic 15px/1.55 var(--msai-gs-editorial);color:#20304f} .msai-gs__ai-board{min-width:0;border:1px solid #dce4f0;border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 26px 65px rgba(32,58,119,.12);overflow:hidden}.msai-gs__ai-board-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #e3e9f2;color:#20304f;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.msai-gs__ai-ready{display:flex;align-items:center;gap:7px;color:#1f7a54}.msai-gs__ai-ready i{width:7px;height:7px;border-radius:50%;background:#2ac67d;box-shadow:0 0 0 4px #e8f9f0} .msai-gs__ai-roadmap2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:18px 18px 22px;background:linear-gradient(180deg,#f8faff,#fff);border-bottom:1px solid #e3e9f2}.msai-gs__ai-phase2{position:relative;display:flex;gap:10px;min-width:0;padding-right:12px;opacity:0;transform:translateY(10px);transition:.5s cubic-bezier(.22,1,.36,1) var(--delay)}.msai-gs__slide.is-active .msai-gs__ai-phase2{opacity:1;transform:none}.msai-gs__ai-phase2:not(:last-child):after{content:"";position:absolute;left:29px;right:-2px;top:12px;height:1px;background:#b6c7ee}.msai-gs__ai-phase-index{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#3157d5;color:#fff;font-size:10px;font-weight:800}.msai-gs__ai-phase-kicker{display:block;color:#8793a7;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}.msai-gs__ai-phase2 strong{display:block;font-size:13px;color:#15213a}.msai-gs__ai-phase2 p{font-size:9px;line-height:1.42;color:#718096;margin:4px 0 0} .msai-gs__ai-section-label{margin:15px 20px 9px;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#52617a}.msai-gs__ai-modules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 18px 16px}.msai-gs__ai-module{min-width:0;padding:11px;border:1px solid #e1e8f3;border-radius:12px;background:#fff}.msai-gs__ai-module-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#eef2ff;color:#3157d5;margin-bottom:8px}.msai-gs__ai-module-icon svg{width:14px}.msai-gs__ai-module-label{display:block;font-size:8px;color:#8a96a8;text-transform:uppercase;letter-spacing:.08em}.msai-gs__ai-module strong{display:block;margin-top:3px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msai-gs__ai-module p{margin:4px 0 0;font-size:8px;line-height:1.35;color:#718096;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .msai-gs__ai-manifest{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e3e9f2;border-bottom:1px solid #e3e9f2}.msai-gs__ai-manifest-item{padding:12px 16px;text-align:center}.msai-gs__ai-manifest-item:not(:last-child){border-right:1px solid #e3e9f2}.msai-gs__ai-manifest-item .num{display:block;font:700 24px/1 var(--msai-gs-editorial);color:#3157d5}.msai-gs__ai-manifest-item .lbl{display:block;margin-top:4px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#6e7b8e} .msai-gs__ai-loop{display:grid;grid-template-columns:repeat(4,1fr);padding:13px 18px;background:#0d1832;color:#fff}.msai-gs__ai-loop-step{position:relative;text-align:center}.msai-gs__ai-loop-step span{display:block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.msai-gs__ai-loop-step small{display:block;margin-top:3px;color:#aebbd1;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msai-gs__ai-loop-step i{position:absolute;right:-4px;top:6px;color:#6887e8;font-style:normal}.msai-gs__ai-rail{display:grid;gap:12px}.msai-gs__ai-callout{padding:18px;border:1px solid #dce4f0;border-radius:14px;background:rgba(255,255,255,.68)}.msai-gs__ai-callout.is-accent{border-color:#f0b17d;background:#fffaf5}.msai-gs__ai-callout-icon{display:block;color:#3157d5;width:22px;height:22px;margin-bottom:12px}.msai-gs__ai-callout-icon svg{width:100%}.msai-gs__ai-callout strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.msai-gs__ai-callout p{font-size:10px;line-height:1.45;color:#728096;margin:7px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} /* Slide 4 — graph is the hero, with explicit illustrative framing. */ .msai-gs__pp-layout2{display:grid;grid-template-columns:minmax(270px,.55fr) minmax(680px,1.45fr);gap:clamp(36px,5vw,80px);align-items:center}.msai-gs__pp-story{min-width:0}.msai-gs__pp-chart{position:relative;min-width:0;padding:20px 22px 10px;border:1px solid #dce4ef;border-radius:18px;background:#fff;box-shadow:0 25px 60px rgba(26,52,112,.11)}.msai-gs__pp-chart-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:8px}.msai-gs__pp-chart-head>div>span{display:block;color:#3157d5;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.msai-gs__pp-chart-head strong{display:block;margin:4px 0 2px;font-size:16px;color:#15213a}.msai-gs__pp-chart-head small{display:block;max-width:70ch;color:#7d899a;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msai-gs__pp-chart-badge{padding:6px 9px;border-radius:999px;background:#fff4e8;color:#b75818;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.msai-gs__pp-graph{display:block;width:100%;height:auto;overflow:visible}.msai-gs__pp-graph-gridline{stroke:#e5eaf2;stroke-width:1}.msai-gs__pp-graph-ylabel,.msai-gs__pp-graph-axis-label{fill:#8793a4;font-size:10px}.msai-gs__pp-phase-zone{fill:#eef3ff;opacity:.55}.msai-gs__pp-phase-zone.is-1{fill:#f8fafc}.msai-gs__pp-phase-label{fill:#64738a;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.msai-gs__pp-graph-area{fill:url(#msai-gs-pp-area);opacity:0;transition:opacity .7s ease .18s}.msai-gs__slide.is-active .msai-gs__pp-graph-area{opacity:1}.msai-gs__pp-graph-line{fill:none;stroke:#3157d5;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.25s cubic-bezier(.22,1,.36,1)}.msai-gs__slide.is-active .msai-gs__pp-graph-line{stroke-dashoffset:0}.msai-gs__pp-target-line{stroke:#ef7e35;stroke-width:1.5;stroke-dasharray:6 5}.msai-gs__pp-target-label{fill:#c45c19;font-size:10px;font-weight:800}.msai-gs__pp-graph-dot{fill:#fff;stroke:#3157d5;stroke-width:3;opacity:0;transition:opacity .35s ease .55s}.msai-gs__slide.is-active .msai-gs__pp-graph-dot{opacity:1}.msai-gs__pp-graph-dot.is-target{fill:#ef7e35;stroke:#fff}.msai-gs__pp-graph-hit{fill:transparent;cursor:crosshair;outline:none}.msai-gs__pp-graph-hit:focus{stroke:#3157d5;stroke-width:2}.msai-gs__pp-tooltip{position:absolute;z-index:3;transform:translate(-50%,-125%);padding:7px 10px;border-radius:9px;background:#0e1830;color:#fff;font-size:10px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .16s ease}.msai-gs__pp-tooltip.is-visible{opacity:1} .msai-gs__pp-confidence-band{fill:#86a5f3;opacity:.12}.msai-gs__pp-annotation-line{stroke:#ee7b32;stroke-width:1.5;stroke-dasharray:5 5;opacity:0;transition:opacity .4s ease .75s}.msai-gs__pp-annotation-dot{fill:#ee7b32;stroke:#fff;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .35s ease .8s,transform .5s cubic-bezier(.22,1,.36,1) .8s}.msai-gs__pp-annotation-label{fill:#b75418;font-size:10px;font-weight:800;opacity:0;transition:opacity .4s ease .95s}.msai-gs__slide.is-active .msai-gs__pp-annotation-line,.msai-gs__slide.is-active .msai-gs__pp-annotation-label{opacity:1}.msai-gs__slide.is-active .msai-gs__pp-annotation-dot{opacity:1;transform:scale(1)} .msai-gs__pp-lower2{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr);gap:42px;margin-top:22px;padding-top:20px;border-top:1px solid #dce4ef}.msai-gs__pp-proof2{min-width:0}.msai-gs__pp-proof2 .msai-gs__pp-proof-card{border:0;padding:0;background:transparent;box-shadow:none}.msai-gs__pp-proof2 .msai-gs__pp-proof-quote{font:italic 15px/1.5 var(--msai-gs-editorial)}.msai-gs__pp-benefits{display:grid;grid-template-columns:repeat(3,1fr)}.msai-gs__pp-benefit{padding:2px 24px}.msai-gs__pp-benefit:not(:first-child){border-left:1px solid #dce4ef}.msai-gs__pp-benefit>span{display:block;width:24px;height:24px;color:#3157d5}.msai-gs__pp-benefit svg{width:100%}.msai-gs__pp-benefit strong{display:block;margin-top:10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.msai-gs__pp-benefit p{margin:5px 0 0;color:#718096;font-size:10px;line-height:1.45}.msai-gs__slide--path_proof>.msai-gs__content>.msai-gs__pp-disclaimer{margin:10px 0 0;text-align:right;font-size:9px;color:#8b96a6} @media (min-width:1200px){.msai-gs__slide--solution_blueprint.msai-gs__slide,.msai-gs__slide--ai_built_system.msai-gs__slide,.msai-gs__slide--path_proof.msai-gs__slide{max-width:1540px!important;padding-left:46px;padding-right:46px}} @media (min-width:900px){.msai-gs__slide--path_proof .msai-gs__pp-layout2{padding-top:52px}} @media (max-width:1100px){ .msai-gs__ai-layout2{grid-template-columns:minmax(220px,.7fr) minmax(480px,1.3fr)}.msai-gs__ai-rail{grid-column:1/-1;grid-template-columns:repeat(3,1fr)} .msai-gs__pp-layout2{grid-template-columns:260px minmax(0,1fr)} } @media (max-width:899px){ .msai-gs__sb-stack-row{flex-direction:column;align-items:stretch}.msai-gs__sb-coordinated{width:auto;flex-direction:row;text-align:left}.msai-gs__sb-coordinated:after{width:80px;height:1px;border:0;border-top:1px solid #a6b8d8}.msai-gs__sb-stack{flex-direction:row;justify-content:center}.msai-gs__sb-disc:not(:first-child){margin-top:0;margin-left:-22px}.msai-gs__sb-items{gap:10px}.msai-gs__sb-item{padding:14px;border:1px solid #e0e7f1;border-radius:12px}.msai-gs__sb-item-connector{display:none} .msai-gs__ai-layout2,.msai-gs__pp-layout2{grid-template-columns:1fr;gap:28px}.msai-gs__ai-rail{grid-column:auto;grid-template-columns:repeat(3,1fr)}.msai-gs__pp-lower2{grid-template-columns:1fr;gap:24px}.msai-gs__pp-benefit{padding-left:16px;padding-right:16px} } /* Focused Slide 4 correction: transformation story + product-owned proof. */ .msai-gs__slide--path_proof .msai-gs__pp-chart{background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);border-color:#d4dfef;box-shadow:0 28px 70px rgba(23,48,105,.13)} .msai-gs__pp-journey{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:18px;margin:14px 0 2px;padding:12px 14px;border:1px solid #e2e8f2;border-radius:14px;background:#f8faff} .msai-gs__pp-journey-point{display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:baseline}.msai-gs__pp-journey-point>span{grid-column:1/-1;color:#7c899d;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.msai-gs__pp-journey-point strong{font:700 20px/1.1 var(--msai-gs-editorial);color:#14213a}.msai-gs__pp-journey-point small{font-size:9px;color:#7d899b}.msai-gs__pp-journey-point.is-target{text-align:right}.msai-gs__pp-journey-point.is-target strong{color:#d65f1d} .msai-gs__pp-journey-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;color:#3157d5;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center}.msai-gs__pp-journey-route i{display:block;height:1px;background:linear-gradient(90deg,transparent,#6f8fe5)}.msai-gs__pp-journey-route i:last-child{background:linear-gradient(90deg,#6f8fe5,#ef8a48)} .msai-gs__slide--path_proof .msai-gs__pp-graph-line{stroke-width:5;filter:drop-shadow(0 5px 7px rgba(49,87,213,.14))}.msai-gs__slide--path_proof .msai-gs__pp-graph-area{opacity:0}.msai-gs__slide--path_proof.is-active .msai-gs__pp-graph-area{opacity:.82}.msai-gs__slide--path_proof .msai-gs__pp-graph-dot.is-supporting{opacity:0;stroke-width:0}.msai-gs__slide--path_proof.is-active .msai-gs__pp-graph-dot.is-supporting{opacity:.22}.msai-gs__slide--path_proof .msai-gs__pp-graph-dot.is-start{fill:#132a61;stroke:#fff;stroke-width:3}.msai-gs__slide--path_proof .msai-gs__pp-graph-dot.is-target{fill:#ef7e35;stroke:#fff;stroke-width:4;filter:drop-shadow(0 0 7px rgba(239,126,53,.45))}.msai-gs__slide--path_proof .msai-gs__pp-target-line{stroke-width:2;stroke-dasharray:8 6;opacity:.75}.msai-gs__slide--path_proof .msai-gs__pp-target-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase} .msai-gs__slide--path_proof .msai-gs__pp-lower2{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:stretch;margin-top:18px;padding-top:18px}.msai-gs__pp-proof-system-head{display:flex;flex-direction:column;justify-content:center;padding-right:20px}.msai-gs__pp-proof-system-head span{font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#3157d5}.msai-gs__pp-proof-system-head strong{margin-top:7px;font:400 19px/1.25 var(--msai-gs-editorial);color:#17233a}.msai-gs__slide--path_proof .msai-gs__pp-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.msai-gs__slide--path_proof .msai-gs__pp-benefit{padding:16px 17px;border:1px solid #dde5f1!important;border-radius:14px;background:rgba(255,255,255,.78)}.msai-gs__slide--path_proof .msai-gs__pp-benefit:nth-child(2){background:#f7f9ff}.msai-gs__slide--path_proof .msai-gs__pp-benefit>span{width:22px;height:22px}.msai-gs__slide--path_proof .msai-gs__pp-benefit strong{margin-top:9px}.msai-gs__slide--path_proof .msai-gs__pp-benefit p{font-size:9.5px;line-height:1.5} @media (max-width:899px){.msai-gs__slide--path_proof .msai-gs__pp-lower2{grid-template-columns:1fr}.msai-gs__pp-proof-system-head{padding-right:0}.msai-gs__slide--path_proof .msai-gs__pp-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:767px){.msai-gs__pp-journey{grid-template-columns:1fr auto 1fr;gap:8px;padding:10px}.msai-gs__pp-journey-route span{display:none}.msai-gs__pp-journey-route{grid-template-columns:1fr 1fr}.msai-gs__pp-journey-point strong{font-size:17px}.msai-gs__slide--path_proof .msai-gs__pp-benefits{grid-template-columns:1fr}.msai-gs__slide--path_proof .msai-gs__pp-benefit{padding:15px}.msai-gs__slide--path_proof .msai-gs__pp-chart{padding-top:14px}.msai-gs__slide--path_proof .msai-gs__pp-graph-ylabel,.msai-gs__slide--path_proof .msai-gs__pp-graph-axis-label{font-size:16px}.msai-gs__slide--path_proof .msai-gs__pp-phase-label{font-size:14px}.msai-gs__slide--path_proof .msai-gs__pp-target-label,.msai-gs__slide--path_proof .msai-gs__pp-annotation-label{font-size:14px}} @media (max-width:767px){ .msai-gs__slide--solution_blueprint,.msai-gs__slide--ai_built_system,.msai-gs__slide--path_proof{padding:12px 18px 20px}.msai-gs__slide--solution_blueprint .msai-gs__content,.msai-gs__slide--ai_built_system .msai-gs__content,.msai-gs__slide--path_proof .msai-gs__content{margin:0} .msai-gs__slide--solution_blueprint .msai-gs__cta,.msai-gs__slide--ai_built_system .msai-gs__cta,.msai-gs__slide--path_proof .msai-gs__cta{padding-left:16px;padding-right:16px;white-space:normal;text-align:center;line-height:1.2;overflow-wrap:anywhere} .msai-gs__slide--solution_blueprint .msai-gs__pd-brand-word,.msai-gs__slide--ai_built_system .msai-gs__pd-brand-word,.msai-gs__slide--path_proof .msai-gs__pd-brand-word{font-size:23px}.msai-gs__slide--solution_blueprint .msai-gs__pd-brand-row,.msai-gs__slide--ai_built_system .msai-gs__pd-brand-row,.msai-gs__slide--path_proof .msai-gs__pd-brand-row{gap:5px} .msai-gs__sb-stack-row{flex-direction:column;align-items:stretch}.msai-gs__sb-coordinated{width:auto;flex-direction:row;text-align:left}.msai-gs__sb-coordinated:after{width:80px;height:1px;border:0;border-top:1px solid #a6b8d8}.msai-gs__sb-stack{flex-direction:row;justify-content:center}.msai-gs__sb-disc{width:92px;height:92px}.msai-gs__sb-disc:not(:first-child){margin-top:0;margin-left:-22px}.msai-gs__sb-items{gap:10px}.msai-gs__sb-item{padding:12px;border:1px solid #e0e7f1;border-radius:12px}.msai-gs__sb-item-connector{display:none}.msai-gs__sb-evidence-row{gap:20px}.msai-gs__sb-stats{grid-template-columns:1fr}.msai-gs__sb-headline.msai-gs__sb-headline{font-size:38px} .msai-gs__ai-layout2,.msai-gs__pp-layout2{grid-template-columns:1fr;gap:24px}.msai-gs__ai-headline,.msai-gs__pp-headline{font-size:40px;margin-bottom:14px}.msai-gs__ai-rationale{margin-top:18px}.msai-gs__ai-board{border-radius:14px}.msai-gs__ai-roadmap2{grid-template-columns:1fr;padding:16px}.msai-gs__ai-phase2{padding:0 0 14px}.msai-gs__ai-phase2:not(:last-child):after{left:11px;right:auto;top:22px;bottom:-2px;width:1px;height:auto}.msai-gs__ai-modules{grid-template-columns:1fr 1fr}.msai-gs__ai-manifest{grid-template-columns:1fr 1fr}.msai-gs__ai-manifest-item:nth-child(2){border-right:0}.msai-gs__ai-loop{grid-template-columns:1fr 1fr;gap:14px}.msai-gs__ai-loop-step i{display:none}.msai-gs__ai-rail{grid-column:auto;grid-template-columns:1fr}.msai-gs__ai-callout p{-webkit-line-clamp:unset} .msai-gs__pp-chart{padding:16px 10px 8px}.msai-gs__pp-chart-head{padding:0 6px}.msai-gs__pp-chart-head small{white-space:normal}.msai-gs__pp-graph{min-height:0}.msai-gs__pp-graph-ylabel,.msai-gs__pp-graph-axis-label{font-size:14px}.msai-gs__pp-phase-label{font-size:12px}.msai-gs__pp-lower2{grid-template-columns:1fr;gap:24px}.msai-gs__pp-benefits{grid-template-columns:1fr}.msai-gs__pp-benefit{padding:16px 0}.msai-gs__pp-benefit:not(:first-child){border-left:0;border-top:1px solid #dce4ef} } @media (prefers-reduced-motion:reduce){.msai-gs__ai-phase2,.msai-gs__pp-graph-area,.msai-gs__pp-graph-line,.msai-gs__pp-graph-dot,.msai-gs__pp-annotation-line,.msai-gs__pp-annotation-dot,.msai-gs__pp-annotation-label{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}} /* Focused Slide 2 correction: transparent shared canvas + refined planes. */ .msai-gs__slide--solution_blueprint{background:transparent!important} .msai-gs__slide--ai_built_system{background:transparent!important} @media (min-width:900px){ .msai-gs__slide--solution_blueprint .msai-gs__sb-layout{grid-template-columns:minmax(300px,.72fr) minmax(690px,1.48fr);gap:clamp(48px,5vw,82px);min-height:450px} .msai-gs__slide--solution_blueprint .msai-gs__sb-right{padding-top:18px} .msai-gs__slide--solution_blueprint .msai-gs__sb-stack-row{grid-template-columns:94px 250px minmax(350px,1fr);gap:34px} .msai-gs__slide--solution_blueprint .msai-gs__sb-stack{position:relative;width:250px;min-height:300px;justify-content:center;filter:drop-shadow(0 22px 28px rgba(35,59,113,.09));perspective:none} .msai-gs__slide--solution_blueprint .msai-gs__sb-stack:before{content:"";position:absolute;left:50%;top:24px;bottom:24px;width:1px;background:linear-gradient(180deg,transparent,#b8c8e5 18%,#b8c8e5 82%,transparent);z-index:-1} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc{position:relative;width:226px;height:78px;border-radius:16px;justify-content:flex-start;padding:0 20px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(240,244,252,.9));border:1px solid rgba(93,119,177,.22);box-shadow:0 12px 28px rgba(39,61,111,.08),inset 0 1px 0 rgba(255,255,255,.9);transform:translateY(10px) scale(.97)} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc:not(:first-child){margin-top:-10px} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc:nth-child(1){margin-left:-20px}.msai-gs__slide--solution_blueprint .msai-gs__sb-disc:nth-child(2){margin-left:0}.msai-gs__slide--solution_blueprint .msai-gs__sb-disc:nth-child(3){margin-left:20px}.msai-gs__slide--solution_blueprint .msai-gs__sb-disc:nth-child(4){margin-left:36px} .msai-gs__slide--solution_blueprint.is-active .msai-gs__sb-disc{transform:none} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc:after{content:"";position:absolute;left:58px;right:18px;top:50%;height:1px;background:linear-gradient(90deg,rgba(49,87,213,.28),transparent)} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#edf2ff;color:#3157d5;transform:none} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc-icon svg{width:18px;height:18px} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc--emphasis{background:linear-gradient(135deg,#fffaf5,#fff3e8);border-color:rgba(222,116,48,.32)} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc--emphasis .msai-gs__sb-disc-icon{background:#fff0e3;color:#c65316} .msai-gs__slide--solution_blueprint .msai-gs__sb-items{gap:18px}.msai-gs__slide--solution_blueprint .msai-gs__sb-item{min-height:86px;padding:8px 0 8px 26px} .msai-gs__slide--solution_blueprint .msai-gs__sb-coordinated:after{height:214px} .msai-gs__slide--solution_blueprint .msai-gs__sb-evidence-wrap{margin-top:22px} } @media (max-width:899px){ .msai-gs__slide--solution_blueprint .msai-gs__sb-stack{gap:8px;align-items:stretch} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc{width:auto;height:64px;flex:1 1 0;border-radius:14px;background:linear-gradient(135deg,#fff,#eef3fb);border:1px solid #d7e1ef;box-shadow:0 10px 22px rgba(35,58,107,.07);margin:0!important} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc--emphasis{background:linear-gradient(135deg,#fffaf5,#fff1e4);border-color:#efc49f} .msai-gs__slide--solution_blueprint .msai-gs__sb-disc-icon{width:28px;height:28px}.msai-gs__slide--solution_blueprint .msai-gs__sb-disc-icon svg{width:16px;height:16px} }