/*
 * Demo page styles. Loaded on the demo page only (see roar_enqueue_demo_assets in functions.php),
 * after home.css, which styles the sections the demo page shares with the homepage.
 *
 * Ported from the demo page rules in Nate's built prototype (decision 023). The rules keep the
 * prototype's order, because later rules override earlier ones. They apply to the #dm-* sections
 * and .dm-* classes in patterns/demo-*.php. The form has its own stylesheet, demo-form.css.
 * Left out until the enterprise page is built: its checklist band, its second form and the
 * rules that switch between the two variants.
 */
.rv-eyebrow{display:flex;align-items:center;gap:12px;font-family:"Albert Sans",sans-serif !important;font-size:14px !important;font-weight:400 !important;line-height:15.75px !important;letter-spacing:.08em !important;text-transform:uppercase;color:#581CB6 !important;margin:0 0 16px !important}
.rv-eyebrow::before{content:"";width:16px;height:1px;background:currentColor}
.rv-eyebrow{margin:0 0 var(--sp-24) !important}
.dm-sec{position:relative;padding:144px 0}
.dm-wrap{max-width:1280px;margin:0 auto;padding:0 80px;box-sizing:content-box}
.dm-sec h2{font-family:Greed,sans-serif;font-weight:400;font-size:40px;line-height:46px;letter-spacing:-.01em;color:#1C1917;margin:0 0 48px}
.dm-sec h3{font-family:Greed,sans-serif;font-weight:400;font-size:24px;line-height:28px;letter-spacing:-.01em;color:#1C1917;margin:0 0 8px}
.dm-sec p{font-family:"Albert Sans",sans-serif}
#dm-hero{background:#F7F4FD;padding:96px 0 112px}
.dm-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:64px;align-items:center}
#dm-hero .dm-hero-grid{align-items:start !important}
#dm-hero .rv-checks{max-width:none !important}
#dm-hero .dm-hero-copy{padding-top:24px}
.dm-note{font-size:14px !important;line-height:21px !important;color:#57534E;margin:20px 0 0 !important}
.dm-trig .dm-stat h3{margin:0 0 8px}
.dm-trig .dm-stat p{font-weight:400 !important;color:#57534E !important}
.dm-route{font-size:16px !important;line-height:24px !important;color:#1C1917;margin:32px 0 0 !important}
.dm-route a{color:#581CB6 !important;font-weight:600;text-decoration:none !important}
.dm-route a span{text-decoration:underline;text-underline-offset:3px}
.dm-route a::after{content:' \2192';display:inline-block;margin-left:5px;text-decoration:none}
.dm-reply{font-size:14px !important;line-height:21px !important;color:#57534E;margin:24px 0 0 !important}
#dm-hero h1{font-family:Greed,sans-serif !important;font-weight:400 !important;font-size:52px !important;line-height:56px !important;letter-spacing:-.015em !important;color:#1C1917 !important;margin:0 0 32px !important}
#dm-hero .rv-eyebrow{margin:0 0 24px !important}
.dm-lede{font-size:20px !important;line-height:27px !important;color:#44403C;margin:0 0 24px !important;max-width:520px}
#dm-hero .rv-checks{margin:0;max-width:520px}
#dm-hero .rv-checks li{font-size:20px !important;line-height:27px !important}
#dm-hero .rv-checks{gap:14px !important}
.dm-hero-img{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:3/2}
.dm-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
#dm-expect{background:#fff}
.dm-steps{display:grid;grid-template-columns:repeat(4,1fr)}
.dm-step{border-left:2px solid #D9C8F5;padding:8px 32px 8px 20px}
.dm-num{font-family:Greed,sans-serif !important;font-weight:700;font-size:54px !important;line-height:55px !important;letter-spacing:-.004em;color:#581CB6;margin:0 0 16px !important}
.dm-step p:not(.dm-num){font-size:16px;line-height:24px;color:#57534E;margin:0}
.dm-cta{margin-top:64px}
.dm-btn{display:inline-block;background:#581CB6;color:#fff !important;text-decoration:none !important;font-family:"Albert Sans",sans-serif;font-size:16px;font-weight:500;line-height:24px;padding:12px 28px;border-radius:999px;transition:background .2s}
.dm-btn:hover{background:#34116B}
#dm-stats{background:#F7F4FD}
#dm-stats h2{text-align:center}
.dm-stat-row{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto}
.dm-stat{border-left:2px solid #D9C8F5;padding:16px 24px 16px 20px}
.dm-stat-n{font-family:Greed,sans-serif !important;font-weight:700;font-size:54px !important;line-height:55px !important;letter-spacing:-.004em;color:#581CB6;margin:0 0 16px !important}
.dm-stat p:not(.dm-stat-n){font-size:16px;line-height:24px;color:#1C1917;font-weight:600;margin:0}
#dm-faq{background:#fff}
.dm-faq-wrap{max-width:880px}
#dm-faq h2{margin-bottom:16px}
.dm-faq-sub{font-size:18px;line-height:25.92px;color:#57534E;margin:0 0 48px}
.dm-faq details{border-top:1px solid #E7E5E4}
.dm-faq details:last-child{border-bottom:1px solid #E7E5E4}
.dm-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:"Albert Sans",sans-serif;font-size:20px;line-height:27px;font-weight:600;color:#1C1917}
.dm-faq summary::-webkit-details-marker{display:none}
.dm-faq summary::after{content:"";flex:0 0 14px;height:14px;background:linear-gradient(#581CB6,#581CB6) center/14px 2px no-repeat,linear-gradient(#581CB6,#581CB6) center/2px 14px no-repeat;transition:transform .2s}
.dm-faq details[open] summary::after{transform:rotate(45deg)}
.dm-faq details p{margin:0 0 24px;font-size:16px;line-height:24px;color:#57534E;max-width:680px}
.dm-faq summary:focus-visible{outline:2px solid #581CB6;outline-offset:4px}
.dm-route-m{display:none}
.dm-route a{white-space:nowrap}
#dm-sticky{display:none}
@media (max-width:1199px) {
	.dm-wrap{padding:0 40px}
	#dm-hero .dm-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px) !important;gap:40px}
	#dm-hero h1{font-size:44px !important;line-height:48px !important}
	#dm-hero .rv-checks li{font-size:18px !important;line-height:25px !important}
}
@media (max-width:999px) {
	#dm-hero .dm-hero-grid{grid-template-columns:1fr !important;gap:32px}
	#dm-hero .dm-hero-copy{padding-top:0}
	.dm-hero-copy .dm-route{display:none}
	.dm-route-m{display:block;max-width:640px;margin-top:24px}
	.dm-steps,.dm-stat-row{grid-template-columns:1fr 1fr !important;gap:40px 0}
	.dm-sec{padding:96px 0}
	#dm-hero{padding:56px 0 72px}
}
@media (max-width:700px) {
	.dm-wrap{padding:0 20px}
	.dm-sec{padding:64px 0}
	.dm-sec h2{font-size:28px !important;line-height:34px !important;margin-bottom:32px}
	.dm-sec h3{font-size:20px !important;line-height:24px !important}
	#dm-hero{padding:28px 0 48px}
	#dm-hero h1{font-size:34px !important;line-height:38px !important;margin:0 0 20px !important}
	#dm-hero .rv-checks{gap:10px !important}
	#dm-hero .rv-checks li{font-size:16px !important;line-height:22px !important}
	#dm-hero .dm-hero-grid{gap:24px}
	.dm-steps{grid-template-columns:1fr !important;gap:28px}
	.dm-step{display:grid;grid-template-columns:52px 1fr;column-gap:8px;border-left:0;padding:0}
	.dm-step .dm-num{grid-row:1 / span 2;font-size:32px !important;line-height:34px !important;margin:0 !important}
	.dm-step h3{margin:2px 0 4px}
	.dm-stat-row{grid-template-columns:1fr 1fr !important;gap:28px 0}
	.dm-stat{padding:4px 12px 4px 16px}
	.dm-stat-n{font-size:36px !important;line-height:40px !important;margin-bottom:8px !important}
	.dm-stat-row.dm-trig{grid-template-columns:1fr !important;gap:24px}
	#dm-stats h2{text-align:left}
	.dm-faq summary{font-size:17px;line-height:24px;padding:18px 0}
	.dm-faq-sub{font-size:16px;line-height:24px;margin-bottom:32px}
	#dm-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -8px 24px -12px rgba(16,5,32,.35);transform:translateY(110%);transition:transform .25s ease}
	#dm-sticky.on{transform:none}
	#dm-sticky .dm-btn{display:block;text-align:center;padding:14px 20px}
}

/* bottom call to action (enterprise page). Nate's prototype repeats the whole form here;
   ours sends the visitor back up to the one form instead (decision 029). */
#dm-end{background:#F7F4FD}
#dm-end .dm-end-wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
#dm-end .dm-end-copy h2{margin:0 0 16px}
#dm-end .dm-end-copy p{font-size:20px;line-height:27px;color:#44403C;margin:0;max-width:460px}
#dm-end .dm-btn{flex:none}
@media (max-width:999px){
	#dm-end .dm-end-wrap{flex-direction:column;align-items:flex-start;gap:24px}
	#dm-end .dm-end-copy p{font-size:17px;line-height:24px}
}

/* Align desktop marketing copy with the form banner. */
@media (min-width:1000px){#dm-hero .dm-hero-copy{padding-top:0}}

/* Selected light customer-proof band above deep-purple outcomes (decision 130). */
#home-logos.dm-logo-band{padding:40px !important;margin:0 !important;background:#fff !important;color:#200e3c}
#home-logos.dm-logo-band .dm-logo-inner{max-width:1240px;margin:0 auto}
#home-logos.dm-logo-band .dm-proof-trust{margin:0 auto 24px !important;text-align:center;font:400 16px/24px "Albert Sans",sans-serif;color:#625b6c}
#home-logos.dm-logo-band .dm-logo-row{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1000px;margin:0 auto}
#home-logos.dm-logo-band .rv-logo{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:auto;height:64px;margin:0 !important}
#home-logos.dm-logo-band .rv-logo img{display:block;width:var(--dm-logo-width) !important;height:auto !important;max-width:100% !important;max-height:56px;object-fit:contain;filter:grayscale(1) !important;mix-blend-mode:multiply !important;opacity:1}
#home-logos.dm-logo-band .dm-logo-acadia{--dm-logo-width:152px}
#home-logos.dm-logo-band .dm-logo-marriott{--dm-logo-width:62px}
#home-logos.dm-logo-band .dm-logo-hilton{--dm-logo-width:132px}
#home-logos.dm-logo-band .dm-logo-westin{--dm-logo-width:152px}
#home-logos.dm-logo-band .dm-logo-mount-sinai{--dm-logo-width:188px}
#home-logos.dm-logo-band .dm-logo-marriott img,#home-logos.dm-logo-band .dm-logo-hilton img{opacity:.8}
#home-logos.dm-logo-band .dm-proof-reach{margin:28px 0 0 !important;text-align:center;font:400 16px/24px "Albert Sans",sans-serif;color:#625b6c}
#home-logos.dm-logo-band .dm-proof-reach strong{font:inherit;font-weight:600;color:inherit}
#home-logos.dm-logo-band :is(.dm-logo-acadia,.dm-logo-mount-sinai) img{filter:brightness(0) invert(.38) !important}
#home-logos.dm-logo-band .dm-logo-hilton img{opacity:.75}
#home-logos.dm-logo-band .dm-proof-reach strong{color:#200e3c}
.roar-demo #dm-expect{background:#200e3c;color:#fff}
.roar-demo #dm-expect :is(h2,h3){color:#fff}
.roar-demo #dm-expect .dm-num{color:#a8e8c8}
.roar-demo #dm-expect .dm-step{border-color:#705888}
.roar-demo #dm-expect .dm-step p:not(.dm-num){color:#e6deed}
@media(min-width:701px) and (max-width:1100px){
 #home-logos.dm-logo-band .dm-logo-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 32px;justify-items:center;max-width:650px}
 #home-logos.dm-logo-band .rv-logo{grid-column:span 2;width:100%}
 #home-logos.dm-logo-band .rv-logo:nth-child(4){grid-column:2/span 2}
 #home-logos.dm-logo-band .rv-logo:nth-child(5){grid-column:4/span 2}
}
@media(max-width:700px){
 #home-logos.dm-logo-band{padding:34px 24px !important}
 #home-logos.dm-logo-band .dm-logo-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;justify-items:center}
 #home-logos.dm-logo-band .rv-logo{width:100%;height:56px}
 #home-logos.dm-logo-band .rv-logo:last-child{grid-column:1/-1}
 #home-logos.dm-logo-band :is(.dm-proof-trust,.dm-proof-reach){font-size:15px;line-height:23px}
}

/* One continuous field behind the hero and customer proof, fading into outcomes. */
.roar-demo .dm-proof-flow{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:0;margin:0 !important}
.dm-proof-flow>:is(#dm-hero,#home-logos,#dm-expect){grid-column:1;min-width:0;margin:0 !important}
.dm-proof-flow>#dm-hero{grid-row:1}
.dm-proof-flow>#home-logos{grid-row:2}
.dm-proof-flow>#dm-expect{grid-row:3}
.dm-proof-flow>.dm-proof-dots{position:absolute !important;grid-column:1;grid-row:1/3;inset:0 0 -180px;z-index:1;margin:0 !important;max-width:none !important;background:url(../images/texture-node-hero-lavender-full.svg) right -180px top 72px/1900px auto repeat-y;opacity:.60;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 72%),linear-gradient(180deg,transparent,#000 140px,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(90deg,transparent 4%,#000 72%),linear-gradient(180deg,transparent,#000 140px,#000 calc(100% - 160px),transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.dm-proof-flow #dm-hero>.dm-wrap,.dm-proof-flow #home-logos>.dm-logo-inner,.dm-proof-flow #dm-expect>.dm-wrap{position:relative;z-index:2}
@media(max-width:700px){.dm-proof-flow>.dm-proof-dots{bottom:-140px;background-size:1550px auto;background-position:right -280px top 40px;opacity:.45}}