/* ========================================================================== MergerDomo — Valuation Tool (marketing / build page) Palette and type match the live mergerdomo.com v4 design system exactly (navy #0d1b4c / blue #2d6cdf / yellow #ffc107, Roboto, cool gray-scale neutrals, soft rounded cards) so this page reads as part of the current public site rather than a one-off brochure. DM Mono is kept only for financial figures (revenue, EV, multiples) — a data-dashboard convention the live marketing site doesn't need an opinion on. No valuation figure is ever computed from user input on this page — the "journey" only collects and visualises the seven raw inputs; the report preview's numbers are a static, clearly-labelled example. ========================================================================== */ :root{ --navy:#0D1B4C;--navy2:#152A63;--navy3:#0A1440; --blue:#2D6CDF;--blue-lt:#EEF4FF;--blue-brd:#B8D0F8;--blue-dk:#1A4FAD; --cream:#F8FAFC;--paper:#fff;--white:#fff; --ink:#111827;--ink-soft:#6B7280;--muted:#94A3B8; --rule:#E2E8F0;--rule-soft:#F1F5F9; --on-navy:#fff;--on-navy-soft:rgba(255,255,255,.68);--on-navy-muted:rgba(255,255,255,.42); --on-navy-rule:rgba(255,255,255,.14);--on-navy-rule-soft:rgba(255,255,255,.08); --gold:#FFC107;--gold-deep:#E6AC00;--gold-line:#E6AC00;--gold-soft:rgba(255,193,7,.16); --green:#3FBF8F;--green-deep:#0F6E56;--green-lt:#E1F5EE; --red:#E27272; --font:'Roboto',sans-serif;--mono:'DM Mono',monospace; --container:1180px; --r:8px;--rl:16px; --ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box} /* Scoped: this reset used to be global and stripped the margins and padding off the site header and footer, which are the application's own includes on this page and style themselves. */ .vt-landing *{margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--on-navy-soft);background:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:var(--container);margin:0 auto;padding:0 28px} a{color:inherit} :focus-visible{outline:2px solid var(--gold);outline-offset:2px} .skip-link{position:fixed;left:12px;top:-48px;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:6px;font-size:13px;font-weight:700;z-index:1300;transition:top .15s} .skip-link:focus{top:12px} /* ── REVEAL-ON-SCROLL ──────────────────────────────────────────────────── */ @keyframes fadeSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .reveal{opacity:0} .reveal.in-view{animation:fadeSlideUp .6s var(--ease) both} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;animation:none}} /* ============================================================ BUTTONS — rounded to match the live tool's .btn/.btn-g language ============================================================ */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:13.5px;font-weight:600;padding:12px 22px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,opacity .15s,transform .15s;white-space:nowrap} .btn i{font-size:15px} .btn-g{background:var(--gold);color:var(--navy)} .btn-g:hover{background:var(--gold-line)} .btn-o{background:transparent;color:var(--on-navy);border-color:var(--on-navy-rule)} .btn-o:hover{border-color:var(--gold);color:var(--gold)} .btn-o-dark{background:transparent;color:var(--ink);border-color:var(--rule)} .btn-o-dark:hover{border-color:var(--navy);color:var(--navy)} .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue-dk)} .btn-text{background:none;color:var(--on-navy);border:none;padding:12px 4px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--on-navy-rule)} .btn-text:hover{text-decoration-color:var(--gold)} .btn-lg{padding:15px 28px;font-size:14.5px} .btn-block{width:100%;justify-content:center} .btn:disabled{opacity:.35;cursor:not-allowed} /* ============================================================ SITE CHROME DEPENDENCIES — navigation.css and footer.css (verbatim copies of Seller/navigation.css and Seller/footer.css) reference a shared --md-* token set and a handful of Bootstrap utility classes that the Seller page pulls in via a full Bootstrap import. This page doesn't load Bootstrap (importing it wholesale risks bleeding its global resets into every other section here), so the small set of utility classes actually used by the announcement bar/nav markup is reproduced below instead — same visual result, no framework import. ============================================================ */ :root{ --md-blue:#2d6cdf;--md-blue-dark:#1a4fad;--md-blue-light:#eef4ff;--md-blue-mid:#b8d0f8; --md-navy:#0d1b4c;--md-yellow:#ffc107;--md-yellow-dark:#e6ac00; --md-gray-50:#f8fafc;--md-gray-100:#f1f5f9;--md-gray-200:#e2e8f0;--md-gray-400:#94a3b8;--md-gray-600:#6b7280;--md-gray-800:#1e293b; --md-text:#111827; --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px; --shadow-sm:0 1px 4px rgba(0,0,0,.06);--shadow-card:0 2px 12px rgba(0,0,0,.07);--shadow-card-lg:0 8px 28px rgba(0,0,0,.09);--shadow-blue:0 4px 20px rgba(45,108,223,.18); --transition:0.18s ease; } .header-height{height:calc(var(--ann-h) + var(--nav-h))} .body-margin{margin-top:calc(var(--ann-h) + var(--nav-h))} .fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030} .z-3{z-index:3} .d-flex{display:flex} .justify-content-center{justify-content:center} .align-items-center{align-items:center} .text-center{text-align:center} .mb-0{margin-bottom:0} /* .container-lg removed: it styled the mockup's own announcement bar and footer, which this page does not use. Left in place it re-sized the application footer's Bootstrap container and misaligned it. */ /* ============================================================ HERO — editorial copy beside a live-styled preview of the actual MergerDomo report tool, framed like a browser window. ============================================================ */ .hero{position:relative;min-height:92vh;display:flex;align-items:center;background:var(--navy);padding:150px 0 80px;overflow:hidden} .hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--on-navy-rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--on-navy-rule-soft) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 65% 40%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 65% 40%,#000 0%,transparent 72%);pointer-events:none} .hero-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 28px;width:100%;display:grid;grid-template-columns:minmax(0,460px) minmax(0,560px);gap:60px;align-items:center} .hero-copy>*{max-width:520px} .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:22px} .hero h1{font-size:clamp(30px,3.8vw,48px);font-weight:700;color:#fff;line-height:1.16;letter-spacing:-.5px;margin-bottom:22px} .hero h1 .hero-accent{color:var(--gold)} .hero .lede{font-size:16.5px;color:var(--on-navy-soft);line-height:1.7;max-width:470px;margin-bottom:36px} .hero-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap} /* ── HERO VISUAL — a floating "pro features" showcase: three layered cards pulled from the tool's PRO-only intelligence panel (deal readiness, AI insights, peer benchmarking), each drifting independently for a live, 3D feel. Deliberately different content from the report-preview mockup below, so the hero doesn't just repeat that section. Each card is split into an outer `.pf-card` (absolute position + the slow drifting float animation + its base resting rotation) and an inner `.pf-card-face` (the actual visible card: background/border/shadow/ content). The split exists so the cursor-tracking hover tilt — driven by JS setting `.pf-card-face`'s inline `transform` — has a property to animate that isn't already being driven by the `pfFloat*` keyframes; a CSS animation always wins the cascade over an inline style on the same property, so tilting the same element as the one being floated would have no visible effect. `.pf-card` carries `transform-style:preserve-3d` so `.pro-stack`'s `perspective` reaches through to the inner face. ──── */ .hero-visual{position:relative;display:flex;align-items:center;justify-content:center} .hero-glow{position:absolute;inset:-15% -8%;background:radial-gradient(circle at 55% 35%,rgba(255,193,7,.26),transparent 62%);filter:blur(50px);pointer-events:none;z-index:0} .pro-stack{position:relative;z-index:1;width:100%;max-width:520px;height:460px;perspective:1400px} .pf-card{position:absolute;transform-style:preserve-3d} .pf-card-face{position:relative;width:100%;height:100%;border-radius:14px;padding:18px 20px;box-shadow:0 30px 60px -25px rgba(0,0,0,.55);transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform} .pf-card-face::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 55%);opacity:0;transition:opacity .25s ease;pointer-events:none} .pf-card.is-tilting .pf-card-face::after{opacity:1} .pf-card-hdr{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:15px} .pf-pro-tag{margin-left:auto;font-size:9px;font-weight:700;background:var(--gold-soft);color:var(--gold);border:1px solid rgba(255,193,7,.35);border-radius:4px;padding:2px 7px;text-transform:uppercase} .pf-card--football{top:6px;left:0;width:224px;transform:rotate(-6deg);animation:pfFloat1 7s ease-in-out infinite} .pf-card--football .pf-card-face{background:var(--navy2);border:1px solid rgba(255,255,255,.12);color:#fff} .pf-card-hdr{color:var(--on-navy-muted)} .pf-card--football .pf-card-hdr i{color:var(--gold-deep);font-size:13px} .pf-ff-rows{position:relative;display:flex;flex-direction:column;gap:12px} .pf-ff-row{display:flex;align-items:center;gap:8px} .pf-ff-lbl{font-size:10.5px;color:var(--on-navy-soft);width:82px;flex-shrink:0} .pf-ff-track{position:relative;flex:1;height:7px;background:rgba(255,255,255,.12);border-radius:4px} .pf-ff-bar{position:absolute;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--gold))} .pf-ff-median{position:absolute;top:-4px;bottom:-4px;left:44%;border-left:2px dashed var(--gold);pointer-events:none} .pf-card--sensitivity{top:82px;right:0;width:268px;z-index:2;transform:rotate(3deg);animation:pfFloat2 8s ease-in-out infinite} .pf-card--sensitivity .pf-card-face{background:#fff;color:var(--ink)} .pf-card--sensitivity .pf-card-hdr{color:var(--muted)} .pf-card--sensitivity .pf-card-hdr i{color:var(--gold-deep);font-size:14px} .pf-sens-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .pf-sens-grid span{display:flex;align-items:center;justify-content:center;height:34px;border-radius:5px;background:var(--rule-soft);font-family:var(--mono);font-size:12px;color:var(--ink-soft);font-weight:500} .pf-sens-grid span.hot{background:var(--gold-soft);color:var(--gold-deep);font-weight:700} .pf-sens-grid span.active{background:var(--navy);color:#fff;font-weight:700;box-shadow:0 0 0 2px var(--gold)} .pf-card--median{bottom:0;left:16px;width:288px;z-index:3;transform:rotate(-2deg);animation:pfFloat3 6.5s ease-in-out infinite} .pf-card--median .pf-card-face{background:linear-gradient(135deg,var(--gold-soft),rgba(255,193,7,.04));border:1px solid rgba(255,193,7,.35);color:#fff} .pf-med-chart{position:relative;display:flex;align-items:flex-end;gap:9px;height:86px;margin:2px 0 14px} .pf-med-bar{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--blue),rgba(45,108,223,.35))} .pf-med-bar.active{background:linear-gradient(180deg,var(--gold),rgba(255,193,7,.4))} .pf-med-line{position:absolute;left:-4px;right:-4px;top:20px;height:0;border-top:2px dashed var(--gold-deep);pointer-events:none} .pf-bench-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--gold)} @keyframes pfFloat1{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-14px)}} @keyframes pfFloat2{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-18px)}} @keyframes pfFloat3{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-10px)}} @media(prefers-reduced-motion:reduce){.pf-card{animation:none !important}.pf-card-face{transition:none !important}} .tool-frame{background:var(--navy3);border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 64px -30px rgba(13,27,76,.35);overflow:hidden} .tf-chrome{display:flex;align-items:center;gap:7px;padding:10px 16px;background:#0A1238;border-bottom:1px solid rgba(255,255,255,.08)} .tf-chrome-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15)} /* The actual report, embedded live — the real valuation-tool-result-p.html, contained within this page's normal max-width column (not full-bleed), sized to its own content height (no inner scrollbar) so scrolling the OUTER page scrolls through the whole report. Height is set from JS once the iframe's content is measured. */ .tf-iframe{display:block;width:100%;border:0;background:#fff} /* Holds the scaled-down preview on narrow screens. The report inside is a fixed desktop layout, so instead of squeezing it - which left a tall white block on a phone - it is rendered at its own width and scaled to fit, with this element clipped to the scaled height. See measure() in valuation-tool.js. */ .tf-viewport{position:relative;width:100%;overflow:hidden} /* ════════════════════════════════════════════════════════════ REPORT PREVIEW MOCKUP (.rpm) — a visually exact port of the upper portion of valuation-tool-result-free.html/.css (topbar through the hero card, stopping before the "1-Year Forward" block) plus the right panel's "You vs peer benchmarks" widget only. No left sidebar, no other right-panel sections, per the brief. Every class here is prefixed rpm- and only ever written as a `.rpm-x` selector (never bare) because this page already defines its own unrelated `.hero` and `.btn` — porting the source file's original class names unprefixed would silently collide with those. Colors/fonts are the *source* file's own tokens, scoped as CSS custom properties on `.rpm` itself (not this page's --navy/--gold/ --font), so this reads as a faithful screenshot of the real tool rather than a reskinned approximation. Static/illustrative only — the few interactive-looking controls (toggle, method select, edit buttons) are visual only, matching the "sample values only" framing already on the `.report-note` banner above this frame; only the method pills stay wired, reusing the existing reportPreview() JS. ════════════════════════════════════════════════════════════ */ .rpm{ --rpm-navy:#0C2345;--rpm-navy2:#122D55; --rpm-blue:#185FA5;--rpm-blue-lt:#E6F1FB;--rpm-blue-brd:#B5D4F4;--rpm-blue-dk:#0C447C; --rpm-gold:#EBC21E;--rpm-gold-lt:#FDF6D0;--rpm-gold-brd:#F0D060;--rpm-gold-dk:#7A5500; --rpm-white:#fff;--rpm-bg:#0A1D3A;--rpm-bg-card:#F0F6FC;--rpm-brd:#D0DFF0; --rpm-tp:#0C2345;--rpm-ts:#2A4A72;--rpm-tm:#6080A0; --rpm-bm-green:#34D399;--rpm-bm-red:#FF6B6B;--rpm-bm-blue:#7DB8FF; --rpm-font:'DM Sans',sans-serif;--rpm-mono:'DM Mono',monospace;--rpm-r:8px;--rpm-rl:12px; font-family:var(--rpm-font);color:var(--rpm-tp);background:var(--rpm-bg); } .rpm *{box-sizing:border-box} /* ── Topbar ── */ .rpm-tb{background:var(--rpm-navy);display:flex;align-items:center;justify-content:space-between;padding:11px 20px;border-bottom:2px solid var(--rpm-gold)} .rpm-logo{display:flex;align-items:center} .rpm-logo-mark{border-radius:6px;padding:6px 14px;display:flex;align-items:center;height:24px;box-shadow:0 1px 3px rgba(0,0,0,.18)} .rpm-logo-mark img{height:20px;width:auto;display:block} .rpm-tbr{display:flex;align-items:center;gap:12px} .rpm-ntag{font-size:11.5px;background:var(--rpm-blue-lt);border:.5px solid var(--rpm-blue-brd);color:var(--rpm-blue-dk);border-radius:4px;padding:4px 9px;font-weight:600} .rpm-credits-tag{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px;background:linear-gradient(135deg,rgba(235,194,30,.22),rgba(235,194,30,.06));border:1px solid rgba(235,194,30,.4)} .rpm-av{width:28px;height:28px;border-radius:50%;background:var(--rpm-gold);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--rpm-navy);flex-shrink:0} .rpm-un{font-size:14px;color:rgba(255,255,255,.5)} /* ── App grid — no sidebar column (dropped per the brief) ── */ .rpm-app{display:grid;grid-template-columns:1fr 300px} .rpm-main{overflow:visible;padding:16px;background:var(--rpm-bg);display:flex;flex-direction:column;gap:11px} /* ── Page header ── */ .rpm-pg-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .rpm-pg-crumb{font-size:14px;color:var(--rpm-gold);font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap} .rpm-pg-crumb-sep{font-size:10px;color:var(--rpm-gold);opacity:.55} .rpm-pg-title{font-size:21.5px;font-weight:600;color:var(--rpm-gold);letter-spacing:-.3px} .rpm-pg-sub{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:5px} .rpm-hdr-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0} .rpm-hdr-btns{display:flex;gap:8px;flex-shrink:0} /* ── Buttons (visual only in this mockup) ── */ .rpm-btn{display:inline-flex;align-items:center;gap:7px;background:var(--rpm-white);color:var(--rpm-ts);font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:6px;border:.5px solid var(--rpm-brd);cursor:default;font-family:var(--rpm-font);white-space:nowrap} .rpm-btn-g{background:var(--rpm-gold);color:var(--rpm-navy);border-color:var(--rpm-gold)} .rpm-compare-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;background:linear-gradient(135deg,var(--rpm-gold),#F5D55A);color:var(--rpm-navy);font-size:12.5px;font-weight:800;padding:9px 14px;border-radius:8px;font-family:var(--rpm-font);white-space:nowrap;letter-spacing:.01em;box-shadow:0 3px 10px rgba(235,194,30,.45)} .rpm-compare-btn i{font-size:15.5px} /* ── Hero card (up to, not including, the 1-Year Forward block) ── */ .rpm-hero{background:var(--rpm-white);border:.5px solid var(--rpm-brd);border-top:3px solid var(--rpm-gold);border-radius:var(--rpm-rl);padding:16px 18px} .rpm-hero-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;margin-bottom:16px} .rpm-ev-label{font-size:11.5px;font-weight:700;color:var(--rpm-tm);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px} .rpm-ev-val{font-size:35px;font-weight:700;color:var(--rpm-gold-dk);line-height:1;font-variant-numeric:tabular-nums;font-family:var(--rpm-font)} .rpm-ev-val small{font-size:18px;font-weight:600;color:var(--rpm-tm)} .rpm-ev-range{font-size:12.5px;color:var(--rpm-ts);margin-top:7px} .rpm-ev-range b{font-weight:700} .rpm-mp-pills{display:flex;flex-direction:column;gap:6px} .rpm-mp{display:flex;align-items:center;gap:10px;background:#F0F6FC;border:.5px solid var(--rpm-brd);border-radius:7px;padding:8px 13px;font-size:12px;min-width:184px;cursor:pointer;transition:border-color .12s,background .12s} .rpm-mp.active{border-color:var(--rpm-gold-brd);background:var(--rpm-gold-lt)} .rpm-mp-lbl{color:var(--rpm-tm);flex:1} .rpm-mp-val{font-family:var(--rpm-mono);font-weight:600;color:var(--rpm-tp)} .rpm-hero-ctrl{display:flex;align-items:center;gap:16px;padding-top:14px;border-top:.5px solid var(--rpm-brd);flex-wrap:wrap;row-gap:10px} .rpm-tgl-wrap{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--rpm-ts)} .rpm-tgl{position:relative;width:30px;height:16px;flex-shrink:0} .rpm-tgl input{opacity:0;width:0;height:0} .rpm-tsl{position:absolute;inset:0;background:var(--rpm-brd);border-radius:8px} .rpm-tsl::before{content:'';position:absolute;width:12px;height:12px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.15)} .rpm-tgl input:checked+.rpm-tsl{background:var(--rpm-gold)} .rpm-tgl input:checked+.rpm-tsl::before{transform:translateX(14px)} .rpm-ctrl-sep{width:.5px;height:18px;background:var(--rpm-brd);flex-shrink:0} .rpm-ctrl-sel{font-size:12.5px;border:1.5px solid var(--rpm-gold);border-radius:5px;padding:5px 9px;color:var(--rpm-gold-dk);background:var(--rpm-gold-lt);font-weight:700;font-family:var(--rpm-font);min-width:150px} /* ── Tooltip (pure-CSS hover, ported as-is) ── */ .rpm-tt-wrap{position:relative;display:inline-flex;align-items:center;gap:6px} .rpm-tt-ic{font-size:13px;color:var(--rpm-tm);cursor:help;flex-shrink:0} .rpm-tt-wrap .rpm-tt-bubble{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--rpm-navy);color:#fff;font-size:11.5px;font-weight:500;line-height:1.4;padding:8px 12px;border-radius:6px;white-space:normal;width:max-content;max-width:min(80vw,240px);box-shadow:0 4px 12px rgba(12,35,69,.25);opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .15s,transform .15s;z-index:30;pointer-events:none} .rpm-tt-wrap:hover .rpm-tt-bubble,.rpm-tt-wrap:focus-within .rpm-tt-bubble{opacity:1;visibility:visible;transform:translateY(0)} /* ── Right panel — peer benchmarks only ── */ .rpm-rp{border-left:.5px solid rgba(255,255,255,.08);background:#0C1E3A;overflow-y:auto;padding:16px} .rpm-rp-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--rpm-gold);margin-bottom:10px} .rpm-bm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;margin-bottom:7px;border-radius:6px;border:.5px solid rgba(255,255,255,.1);border-left:3px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);font-size:12px} .rpm-bm-row:last-child{margin-bottom:0} .rpm-bm-row.up{border-left-color:var(--rpm-bm-green);background:rgba(52,211,153,.09)} .rpm-bm-row.dn{border-left-color:var(--rpm-bm-red);background:rgba(255,107,107,.09)} .rpm-bm-row.neu{border-left-color:var(--rpm-bm-blue);background:rgba(125,184,255,.08)} .rpm-bm-l{color:rgba(255,255,255,.55)} .rpm-bm-v{font-family:var(--rpm-mono);font-weight:700;color:rgba(255,255,255,.9)} .rpm-bm-v.up{color:var(--rpm-bm-green)} .rpm-bm-v.dn{color:var(--rpm-bm-red)} .rpm-bm-v.neu{color:var(--rpm-bm-blue)} @media(max-width:900px){ .rpm-app{grid-template-columns:1fr} .rpm-rp{border-left:none;border-top:.5px solid rgba(255,255,255,.08)} } @media(max-width:560px){ .rpm-hero-top{grid-template-columns:1fr} .rpm-mp-pills{flex-direction:row;flex-wrap:wrap} .rpm-mp{min-width:0;flex:1 1 45%} .rpm-pg-hdr{flex-direction:column} .rpm-hdr-r{width:100%;align-items:stretch} .rpm-hdr-btns{width:100%} .rpm-hdr-btns .rpm-btn{flex:1;justify-content:center} } /* ============================================================ SECTION HEADER ============================================================ */ .section{padding:100px 0} .sec-hdr{display:flex;align-items:center;gap:16px;max-width:var(--container);margin:0 auto;padding:0 28px 40px} .sec-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap} .sec-line{flex:1;height:1px;background:var(--on-navy-rule)} .sec-head{max-width:var(--container);margin:0 auto;padding:0 28px;margin-bottom:48px} .sec-head h2{font-size:clamp(24px,3vw,34px);font-weight:700;color:#fff;letter-spacing:-.3px;line-height:1.24;max-width:640px} /* ============================================================ WHO IT'S FOR — three audience cards, on navy. Each states the persona's distinct job-to-be-done, backs it with three concrete benefits, and links out to that persona's page on the main site. ============================================================ */ .audience-grid{max-width:var(--container);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .audience-card{display:flex;flex-direction:column;background:var(--navy2);border:1px solid var(--on-navy-rule);border-radius:var(--rl);padding:32px 28px;transition:border-color .25s var(--ease),transform .25s var(--ease)} .audience-card:hover{border-color:var(--gold-line);transform:translateY(-3px)} .audience-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold);font-size:20px;margin-bottom:18px;flex-shrink:0} .audience-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:12px} .audience-card h3{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1.32;margin-bottom:18px} .audience-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:24px;flex:1} .audience-list li{display:flex;align-items:flex-start;gap:10px} .audience-list li i{flex-shrink:0;width:18px;height:18px;margin-top:2px;border-radius:50%;background:rgba(63,191,143,.16);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:11px} .audience-list li span{font-size:13.5px;line-height:1.6;color:var(--on-navy-soft)} .audience-link.btn-text{padding:0;align-self:flex-start;margin-top:auto} /* ============================================================ JOURNEY — the input experience. A scroll-driven milestone path: a vertical rail on the left (mirrors the live tool's sidebar nav), a stack of question cards that unlock one at a time in the centre, and a sticky dark info panel on the right that crossfades to explain how each figure is used in a MergerDomo report as soon as it's answered. ============================================================ */ .journey-section{background:var(--navy3)} .journey-wrap{max-width:var(--container);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,360px);gap:32px;align-items:start} /* rail */ .journey-rail{position:sticky;top:130px;display:flex;flex-direction:column;align-items:center} .rail-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:30px;cursor:pointer} .rail-node:hover .rail-dot{border-color:var(--gold)} .rail-node:last-child{padding-bottom:0} .rail-node::after{content:'';position:absolute;top:26px;bottom:0;left:50%;width:2px;background:var(--on-navy-rule);transform:translateX(-50%)} .rail-node:last-child::after{display:none} .rail-dot{width:26px;height:26px;border-radius:50%;background:var(--navy2);border:2px solid var(--on-navy-rule);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--on-navy-muted);flex-shrink:0;transition:all .3s var(--ease);position:relative;z-index:1} .rail-tag{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--on-navy-muted);text-align:center;line-height:1.2;max-width:56px;transition:color .3s;position:relative;z-index:1;background:var(--navy3);padding:2px 4px;border-radius:3px} /* The label sits in front of the progress line, on the section's own colour, rather than the line running through it. */ .rail-node.done .rail-dot{background:var(--gold);border-color:var(--gold);color:var(--navy)} .rail-node.done::after{background:var(--gold)} .rail-node.done .rail-tag{color:var(--gold)} .rail-node.current .rail-dot{border-color:var(--gold);color:#fff;background:var(--navy2);box-shadow:0 0 0 5px rgba(255,193,7,.16)} .rail-node.current .rail-tag{color:#fff} /* form journey — every question sits open in one continuous, freely scrollable list. Nothing locks or collapses; a thin gold rule marks whichever card the scroll-spy currently has "active", and a badge fades in once a field is answered — live, on every keystroke. */ .journey-main{display:flex;flex-direction:column;gap:26px} .j-step{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);box-shadow:0 1px 2px rgba(13,27,76,.03);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)} .j-step.active{border-color:var(--gold-line);box-shadow:0 0 0 1px var(--gold-line),0 12px 28px -18px rgba(13,27,76,.35)} /* Not-yet-reached steps are fully hidden — not just dimmed — so the list only ever shows what's been earned by answering the one before it. A step is unhidden the moment its predecessor gets a value, then plays the same fadeSlideUp entrance used for reveal-on-scroll elsewhere. */ .j-step.pending{display:none} .j-step.revealing{animation:fadeSlideUp .6s var(--ease) both} .j-step-inner{padding:30px 32px 32px} .j-step-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .j-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gold-deep)} .j-done-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--green-deep);background:var(--green-lt);border:1px solid rgba(15,110,86,.22);padding:3px 10px;border-radius:20px;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)} .j-step.answered .j-done-badge{opacity:1;transform:translateY(0)} .j-q{font-size:22px;font-weight:600;color:var(--navy);margin-bottom:6px;letter-spacing:-.3px} .j-hint{font-size:12.5px;color:var(--muted);margin-bottom:24px;line-height:1.55} .field-shell{display:flex;align-items:baseline;gap:8px;border-bottom:1.5px solid var(--rule);padding:10px 0;transition:border-color .15s} .field-shell:focus-within{border-color:var(--navy)} .field-shell.field-err{border-color:var(--red)} .field-err-msg{font-size:11.5px;color:var(--red);margin-top:8px;line-height:1.5;display:none;align-items:center;gap:5px} .field-err-msg.show{display:flex} .field-prefix{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--muted);flex-shrink:0} .field-shell input{border:none;outline:none;font-family:var(--mono);font-size:26px;font-weight:500;color:var(--navy);width:100%;background:transparent} .field-shell input::placeholder{color:var(--rule)} .field-unit{font-family:var(--mono);font-size:13px;color:var(--muted);flex-shrink:0} .field-suffix{font-size:11.5px;color:var(--muted);margin-top:11px} .field-skip-btn{display:inline-flex;align-items:center;gap:5px;margin-top:14px;background:none;border:none;padding:0;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule);transition:color .15s,text-decoration-color .15s} .field-skip-btn i{font-size:11px} .field-skip-btn:hover{color:var(--navy);text-decoration-color:var(--gold-deep)} .select-shell select{width:100%;border:none;border-bottom:1.5px solid var(--rule);padding:12px 0;font-family:var(--font);font-size:16px;font-weight:600;color:var(--navy);background:var(--white);cursor:pointer;outline:none;transition:border-color .15s} .select-shell select:focus{border-color:var(--navy)} .j-hint--sub{margin:16px 0 10px} /* ── Sub-industry multiselect — a checkbox dropdown capped at 5 picks, same interaction pattern as the Industry/Sub-industry picker in valuation-tool-result-p.html (button + floating panel + a live "N of 5 selected" cap line), re-themed to this page's light card. ──── */ .msel-wrap{position:relative;min-width:0} .msel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:none;border-bottom:1.5px solid var(--rule);padding:12px 0;font-family:var(--font);font-size:15px;font-weight:600;color:var(--navy);background:var(--white);cursor:pointer;outline:none;transition:border-color .15s;text-align:left} .msel-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msel-btn:focus,.msel-btn.open{border-color:var(--navy)} .msel-btn i{flex-shrink:0;font-size:12px;color:var(--muted);transition:transform .15s} .msel-btn.open i{transform:rotate(180deg)} .msel-btn:disabled{cursor:not-allowed;color:var(--muted)} .msel-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:var(--white);border:1px solid var(--rule);border-radius:10px;box-shadow:0 16px 40px -16px rgba(13,27,76,.28);max-height:240px;overflow-y:auto;display:none;padding:6px} .msel-panel.open{display:block} .msel-cap{font-size:11px;color:var(--muted);padding:4px 8px 8px;border-bottom:1px solid var(--rule-soft);margin-bottom:4px} .msel-cap.at-max{color:var(--gold-deep);font-weight:700} .msel-opt{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink)} .msel-opt:hover{background:var(--rule-soft)} .msel-opt.disabled{cursor:not-allowed;color:var(--muted);opacity:.55} .msel-opt input{cursor:pointer;flex-shrink:0} .msel-empty{padding:10px 8px;font-size:12.5px;color:var(--muted)} /* completion milestone card — always visible, fills in live */ .j-complete{border-top:3px solid var(--gold)} .j-complete-inner{padding:34px 36px} .j-complete-flag{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);align-items:center;justify-content:center;font-size:19px;margin-bottom:14px} .j-complete-kicker{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:10px} .complete-checklist{list-style:none;margin:18px 0 22px} .complete-checklist li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--rule-soft);font-size:13.5px;font-weight:600;color:var(--navy);transition:color .3s} .complete-checklist li:first-child{border-top:none} .complete-checklist li i{width:18px;height:18px;border-radius:50%;background:var(--green-lt);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:background-color .3s,color .3s} .complete-checklist li b{margin-left:auto;font-family:var(--mono);color:var(--navy)} .complete-checklist li.pending{color:var(--muted);font-weight:500} .complete-checklist li.pending i{background:var(--rule-soft);color:var(--muted);font-size:8px} .complete-checklist li.pending b{color:var(--rule)} /* sticky info panel */ .journey-info{position:sticky;top:130px} .ji-shell{background:var(--navy2);border:1px solid var(--on-navy-rule);border-radius:16px;padding:30px 28px;min-height:300px;position:relative;overflow:hidden} .ji-panel{display:none;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .ji-panel.active{display:block} .ji-panel.in{opacity:1;transform:translateY(0)} .ji-eyebrow{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin-bottom:10px} .ji-title{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.3px;margin-bottom:10px;line-height:1.28} .ji-body{font-size:13px;color:var(--on-navy-soft);line-height:1.65;margin-bottom:22px} .ji-module{border-top:1px solid var(--on-navy-rule-soft);padding-top:20px} .ji-module:empty{display:none;border-top:none;padding-top:0} /* module internals rendered inside .ji-module — one independent visualization per variable, reused as the journey progresses */ .cw-mod-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;flex-wrap:wrap;gap:4px} .cw-mod-label{font-size:12.5px;font-weight:700;color:#fff} .cw-mod-tag{font-size:10px;font-weight:600;color:var(--on-navy-muted);text-transform:uppercase;letter-spacing:.05em} .cw-bar-track{height:6px;background:var(--on-navy-rule);margin-bottom:10px;border-radius:3px;overflow:hidden} .cw-bar-fill{display:block;height:100%;width:0%;background:var(--gold);transition:width .9s var(--ease)} .cw-bar-fill--debt{background:var(--on-navy-soft)} .cw-bar-fill--cash{background:var(--green)} .cw-mod-value{font-family:var(--mono);font-size:20px;font-weight:500;color:#fff} .cw-mod-value small{font-size:11px;color:var(--on-navy-muted);font-weight:500} .cw-gauge-row{display:flex;align-items:center;gap:16px} .cw-gauge{position:relative;width:56px;height:56px;flex-shrink:0} .cw-gauge svg{width:100%;height:100%;transform:rotate(-90deg)} .cw-gauge circle{fill:none;stroke-width:4} .cw-gauge .cw-gauge-track{stroke:var(--on-navy-rule)} .cw-gauge .cw-gauge-fill{stroke:var(--gold);stroke-dasharray:150.8;stroke-dashoffset:150.8;transition:stroke-dashoffset 1s var(--ease);stroke-linecap:round} .cw-gauge-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:#fff} .cw-compare-row{display:grid;grid-template-columns:60px 1fr 64px;align-items:center;gap:10px;margin-bottom:9px} .cw-compare-row:last-of-type{margin-bottom:0} .cw-compare-label{font-size:11px;font-weight:700;color:var(--on-navy-soft)} .cw-compare-track{height:8px;background:var(--on-navy-rule);border-radius:4px;overflow:hidden} .cw-compare-fill{display:block;height:100%;width:0%;transition:width .9s var(--ease)} .cw-compare-fill[data-k="revenue"]{background:var(--gold)} .cw-compare-fill[data-k="ebitda"]{background:rgba(255,255,255,.7)} .cw-compare-fill[data-k="pat"]{background:var(--green)} .cw-compare-val{font-family:var(--mono);font-size:11.5px;color:#fff;text-align:right} .cw-mod-foot{font-size:11.5px;color:var(--on-navy-soft);margin-top:8px} .cw-mod-foot b{font-family:var(--mono);color:var(--gold);font-weight:500} .cw-inline{display:flex;align-items:center;justify-content:space-between;gap:12px} .cw-inline-dot{width:6px;height:6px;border-radius:50%;background:var(--on-navy-soft);flex-shrink:0} .cw-sector-tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--navy);background:var(--gold);padding:6px 12px;border-radius:6px;margin-bottom:8px} .cw-mod-caption{font-size:11.5px;color:var(--on-navy-muted);margin-bottom:8px} .cw-subind-chips{display:flex;flex-wrap:wrap;gap:6px} .cw-subind-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--on-navy-soft);background:rgba(255,255,255,.05);border:1px solid var(--on-navy-rule);padding:5px 10px;border-radius:6px} .cw-subind-chip--empty{color:var(--on-navy-muted);font-style:italic;font-weight:500} .cw-mod-error{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--red);line-height:1.55;background:rgba(226,114,114,.1);border:1px solid rgba(226,114,114,.3);border-radius:8px;padding:12px 14px} .cw-mod-error i{font-size:15px;flex-shrink:0;margin-top:1px} .cw-mod-na{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--on-navy-muted);background:rgba(255,255,255,.04);border:1px solid var(--on-navy-rule);border-radius:8px;padding:12px 14px} .cw-mod-na i{font-size:13px;flex-shrink:0} .cw-mod-value--na{color:var(--on-navy-muted);font-weight:600} .ji-chip-row{display:flex;flex-wrap:wrap;gap:6px} .ji-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--on-navy-soft);background:rgba(255,255,255,.05);border:1px solid var(--on-navy-rule);padding:5px 10px;border-radius:6px} .ji-chip i{font-size:11px;color:var(--gold)} .ji-chip b{font-family:var(--mono);color:#fff;margin-left:1px;font-weight:700} /* ============================================================ REPORT PREVIEW — cream section framing the actual tool's UI (topbar, sidebar, EV hero card, metric strip, benchmark chart, a locked premium teaser) inside a static browser-style card, so this reads as a real preview of the product rather than a simplified mockup. ============================================================ */ .report-section{background:var(--cream);color:var(--ink-soft)} .report-section .sec-eyebrow{color:var(--gold-deep)} .report-section .sec-line{background:var(--rule)} .report-section .sec-head h2{color:var(--navy)} .report-note-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px} .report-note{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-deep);background:var(--white);border:1px solid var(--rule);padding:6px 12px;border-radius:20px} .report-tour-btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-brd);padding:7px 14px;border-radius:20px;cursor:pointer;font-family:var(--font);transition:background .15s ease,border-color .15s ease} .report-tour-btn:hover{background:#e3edfd;border-color:var(--blue)} .report-tour-btn i{font-size:12px} .report-stage{max-width:var(--container);margin:0 auto;padding:0 28px} .report-foot{display:flex;gap:0;flex-wrap:wrap;background:var(--white);border:1px solid var(--rule);border-top:none;border-radius:0 0 var(--rl) var(--rl)} .report-foot-item{flex:1;min-width:180px;padding:20px 26px} .report-foot-item+.report-foot-item{border-left:1px solid var(--rule)} .report-foot-item h3{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:6px} .report-foot-item p{font-size:12px;color:var(--muted);line-height:1.6} .legal-disclaimer{margin-top:16px;padding:16px 20px;background:var(--white);border:1px solid var(--rule);border-radius:var(--rl)} .legal-disclaimer p{font-size:12px;line-height:1.65;color:var(--muted)} .legal-disclaimer b{color:var(--navy)} .field-tt-wrap{position:relative;display:inline-flex;align-items:center;vertical-align:middle} .field-tt-ic{font-size:15px;color:var(--muted);cursor:help;flex-shrink:0} .field-tt-wrap:hover .field-tt-ic,.field-tt-wrap:focus-within .field-tt-ic{color:var(--gold-deep)} .field-tt-bubble{position:absolute;bottom:calc(100% + 10px);left:0;background:var(--navy);color:#fff;font-size:12.5px;font-weight:500;line-height:1.5;padding:9px 13px;border-radius:8px;white-space:normal;width:max-content;max-width:min(80vw,260px);box-shadow:0 8px 24px rgba(13,27,76,.28);opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .15s,transform .15s;z-index:30;pointer-events:none} .field-tt-wrap:hover .field-tt-bubble,.field-tt-wrap:focus-within .field-tt-bubble{opacity:1;visibility:visible;transform:translateY(0)} /* ════════════════════════════════════════════════════════════ REPORT-PREVIEW GUIDED TOUR — walks a first-time visitor through 8 parts of the embedded report, one at a time. Built from 4 blurred "strip" divs that together frame a rectangular hole around whichever element is being explained (top/bottom/left/right of its bounding box), rather than a single overlay + clip-path/mask — four plain rectangles are trivial to size in JS and render identically in every browser, where clip-path/mask compositing is more inconsistent for this exact "frame with a hole" shape. A gold ring sits directly on the spotlighted element's edge, and the tooltip card is positioned next to it every step. All 5 pieces are created once by JS and just repositioned/resized between steps — see startTour() in valuation-tool.js. ════════════════════════════════════════════════════════════ */ .tour-strip{position:fixed;z-index:9998;background:rgba(8,18,42,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s ease,top .3s var(--ease),left .3s var(--ease),right .3s var(--ease),bottom .3s var(--ease),width .3s var(--ease),height .3s var(--ease)} .tour-active .tour-strip{opacity:1} .tour-ring{position:fixed;z-index:9999;border:2px solid var(--gold);border-radius:10px;box-shadow:0 0 0 4px rgba(255,193,7,.22),0 8px 28px rgba(0,0,0,.35);pointer-events:none;opacity:0;transition:opacity .2s ease,top .3s var(--ease),left .3s var(--ease),width .3s var(--ease),height .3s var(--ease)} .tour-active .tour-ring{opacity:1} /* pointer-events stays none until .tour-active explicitly re-enables it — at opacity:0 alone the tip is still a 300px-tall hit target sitting at z-index:10000, positioned wherever the tour's last step happened to leave it, which otherwise keeps intercepting real clicks/drags on whatever's underneath (the report's own controls, the 3D chart drag handle, even the "Show me how this works" button itself) until a full page reload rebuilds the DOM without it. Same fix applies to .tour-strip above. */ .tour-tip{position:fixed;z-index:10000;width:300px;max-width:calc(100vw - 32px);background:#fff;border-radius:14px;box-shadow:0 24px 60px -20px rgba(2,10,30,.5);padding:20px 22px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,top .3s var(--ease),left .3s var(--ease)} .tour-active .tour-tip{opacity:1;pointer-events:auto;transform:translateY(0)} .tour-tip-eyebrow{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-deep);margin-bottom:10px} .tour-tip-close{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;line-height:1;padding:2px} .tour-tip-close:hover{color:var(--ink)} .tour-tip h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.3} .tour-tip p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:16px} .tour-tip-foot{display:flex;align-items:center;justify-content:space-between;gap:12px} .tour-tip-skip{background:none;border:none;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font);padding:4px 0} .tour-tip-skip:hover{color:var(--ink-soft);text-decoration:underline} .tour-tip-next{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--navy);font-size:13px;font-weight:700;padding:9px 16px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font);transition:background .15s ease,transform .15s ease} .tour-tip-next:hover{background:var(--gold-line);transform:translateY(-1px)} @media(prefers-reduced-motion:reduce){ .tour-strip,.tour-ring,.tour-tip{transition:opacity .15s ease !important} } @media(max-width:600px){ .tour-tip{width:260px;padding:16px 18px} } /* ============================================================ FEATURES — pain-strip pattern, mirrors mergerdomo.com/seller. A light section (deliberately breaks from the surrounding navy) with a pill eyebrow, big navy title, and individually-bordered cards that lift on hover, each with its own icon tile — not a single bordered grid. ============================================================ */ .pain-strip-section{background:var(--white);padding:88px 0} .pain-strip-header{max-width:760px;margin-bottom:34px} .pain-strip-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);padding:6px 12px;border-radius:999px;margin-bottom:18px} .pain-strip-title{font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1.2;color:var(--navy);letter-spacing:-.03em;margin-bottom:14px;max-width:760px} .pain-strip-sub{font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:620px} .pain-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pain-cols.pain-cols-5{grid-template-columns:repeat(5,1fr)} .pain-col{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);padding:28px 24px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .pain-col:hover{transform:translateY(-4px);border-color:rgba(45,108,223,.25);box-shadow:0 8px 28px rgba(0,0,0,.09)} .pain-col-icon{width:52px;height:52px;border-radius:14px;background:var(--blue-lt);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px} .pain-col-body h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px;line-height:1.3} .pain-col-body p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin:0} /* ============================================================ FINAL CTA + FAQ — cta-faq-band pattern, mirrors mergerdomo.com/seller. A blue-dark band (the one deliberately blue moment on an otherwise navy/gold page) pairing a numbered mini-steps CTA with a white FAQ card — plus/minus icon accordion, not a chevron. ============================================================ */ .cta-faq-band{background:var(--blue-dk);padding:70px 0} .cfa-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .cfa-cta-block{color:#fff} .cta-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--gold);background:rgba(255,193,7,.14);border:1px solid rgba(255,193,7,.3);padding:4px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.06em;text-transform:uppercase} .cta-h2{font-size:clamp(22px,2.8vw,34px);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.02em;line-height:1.2} .cta-sub{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.65;margin-bottom:24px;max-width:440px} .nextsteps-mini{margin-bottom:28px} .ns-mini-step{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(255,255,255,.9);font-weight:500;padding:2px 0} .ns-mini-num{width:26px;height:26px;background:var(--gold);color:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;border:1.5px solid rgba(255,255,255,.25)} .ns-mini-arrow{font-size:13px;color:rgba(255,255,255,.35);padding:2px 0 2px 12px} .cfa-btns{display:flex;flex-direction:column;gap:10px;max-width:320px} .cfa-btns .btn{width:100%;justify-content:center} .cfa-faq-block{background:var(--white);border-radius:var(--rl);padding:28px 26px} .faq-block-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:16px} .faq-item{border-bottom:1px solid var(--rule)} .faq-item:first-of-type{border-top:1px solid var(--rule)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--navy);background:none;border:none;cursor:pointer;text-align:left;transition:color .18s} .faq-q:hover{color:var(--blue)} .faq-icon{width:26px;height:26px;flex-shrink:0;background:var(--rule-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:300;color:var(--ink-soft);transition:transform .18s ease,background .18s ease,color .18s ease} .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--blue-dk);color:#fff} .faq-item.open .faq-q{color:var(--blue-dk)} .faq-a{max-height:0;overflow:hidden;font-size:13px;color:var(--ink-soft);line-height:1.7;transition:max-height .35s ease,padding .25s ease;padding:0} .faq-item.open .faq-a{max-height:220px;padding-bottom:14px} .faq-a p{margin:0} .faq-advisor-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)} .faq-advisor-cta span{font-size:13px;color:var(--ink-soft)} /* ============================================================ RESPONSIVE — mobile-first fixes across every section, from the 1180px container down to ~320px handsets. ============================================================ */ @media(max-width:1080px){ .pain-cols{grid-template-columns:repeat(2,1fr)} .pain-cols.pain-cols-5{grid-template-columns:repeat(2,1fr)} .audience-grid{grid-template-columns:1fr 1fr} } @media(max-width:980px){ .hero-inner{grid-template-columns:1fr;gap:48px} .pro-stack{max-width:500px;height:420px} .journey-wrap{grid-template-columns:1fr} .journey-rail{display:none} .journey-info{position:static} .report-foot{flex-direction:column} .report-foot-item+.report-foot-item{border-left:none;border-top:1px solid var(--rule)} .cfa-grid{grid-template-columns:1fr;gap:32px} .cta-sub{max-width:none} } @media(max-width:760px){ .hero{padding:56px 0 60px;min-height:auto} /* 120px here put the hero a further 120px below the .body-margin the fixed header already adds, which on a phone pushed the heading most of a screen down. The desktop 150px is breathing room around a tall two-column hero; stacked to one column it is just a gap. */ .section,.pain-strip-section,.cta-faq-band{padding:64px 0} .pro-stack{height:380px} .j-step-inner{padding:26px 22px 28px} .j-step-hdr{flex-wrap:wrap;row-gap:6px} .msel-panel{max-height:45vh} .ji-shell{padding:24px 22px} .audience-grid{grid-template-columns:1fr} .pain-cols{grid-template-columns:1fr} .pain-cols.pain-cols-5{grid-template-columns:1fr} } @media(max-width:480px){ .wrap,.sec-hdr,.sec-head,.journey-wrap,.audience-grid,.hero-inner,.report-stage{padding-left:18px;padding-right:18px} .hero{padding:40px 0 48px} .hero-cta{flex-direction:column;align-items:flex-start;gap:14px} .faq-advisor-cta{flex-direction:column;align-items:flex-start;gap:10px} .faq-advisor-cta .btn{width:100%;justify-content:center} } @media(max-width:420px){ /* The floating pro-stack collage depends on room around fixed-width cards — below this it becomes a plain stacked list so nothing can ever overflow the viewport, whatever the device width. */ .pro-stack{position:static;height:auto;display:flex;flex-direction:column;gap:12px;max-width:100%} .pf-card{position:static;width:100% !important;transform:none !important;animation:none !important} .pf-card-face{transform:none !important} .pf-card-face::after{display:none} } /* ============================================================ VIEW REPORT MODAL — lead capture (name, email, mobile) gating the two "View Report" CTAs. Same light-card language as the journey cards above, over a navy scrim. ============================================================ */ .vr-modal-bg{position:fixed;inset:0;background:rgba(10,20,64,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1400;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s var(--ease)} .vr-modal-bg.open{opacity:1;visibility:visible} .vr-modal{background:var(--white);border-radius:var(--rl);max-width:440px;width:100%;box-shadow:0 30px 60px -20px rgba(13,27,76,.45);transform:translateY(12px);transition:transform .2s var(--ease);max-height:90vh;overflow-y:auto} .vr-modal-bg.open .vr-modal{transform:translateY(0)} .vr-modal-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:26px 26px 0} .vr-modal-title{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.2px} .vr-modal-sub{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.55} .vr-modal-close{flex-shrink:0;background:none;border:none;font-size:16px;color:var(--muted);cursor:pointer;line-height:1;padding:6px} .vr-modal-close:hover{color:var(--navy)} .vr-modal-body{padding:22px 26px 4px} .vr-field{margin-bottom:16px} .vr-field:last-child{margin-bottom:0} .vr-field label{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em} .vr-field input{width:100%;border:1.5px solid var(--rule);border-radius:8px;padding:11px 12px;font-family:var(--font);font-size:14px;color:var(--ink);outline:none;transition:border-color .15s;background:var(--white)} /* The register modal's Role field is a