/* Shared by the section blocks: bands, eyebrow, titles and reveal on scroll (from the .dps base of the v2
   snippets). Tokens and .btn come from the theme (main.css). Each block's own style.css adds its part. */

.dp-sec{position:relative;padding:80px 0}
:where(.dp-sec,.dp-final) :where(ul,ol){margin:0;padding:0;list-style:none}
.dp-sec--band,.dp-sec--grey{background-color:var(--band)}
/* faint blueprint grid on the grey bands */
.dp-sec--band,.dp-bp{background-image:linear-gradient(rgba(0,0,130,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,130,.05) 1px,transparent 1px);background-size:40px 40px;background-position:center -1px}
.dp-sec--dark{isolation:isolate;background:var(--navy);color:var(--on-d)}
.dp-sec--dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.13) 1px,transparent 1.6px) 0 0/24px 24px;-webkit-mask:radial-gradient(90% 70% at 50% 40%,#000,transparent);mask:radial-gradient(90% 70% at 50% 40%,#000,transparent)}
.dp-dark h2,.dp-dark h3{color:#fff}
.dp-dark :focus-visible{outline-color:var(--lime)}
.dp-sec .wrap>:first-child{margin-top:0}

.dp-led{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(107,163,0,.18)}
.dp-dark .dp-led{background:var(--lime);box-shadow:0 0 0 3px rgba(155,226,0,.22)}
.dp-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;font:500 13.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.dp-dark .dp-eyebrow{color:var(--lime)}
/* numbered badge in place of the dot (docpath_blocks_eyebrow with a number) */
.dp-eyebrow__n{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:6px;background:var(--navy);color:var(--lime);font-weight:600;letter-spacing:0}
.dp-dark .dp-eyebrow__n{background:var(--lime);color:var(--navy)}
.dp-h2{font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word}
.dp-sub{max-width:640px;font-size:17px}
.dp-head .dp-sub{margin-top:14px}
/* bold navy line under a title (.lead of the v2 snippets) */
.dp-lead{margin-top:14px;font-size:19px;font-weight:600;line-height:1.4;color:var(--navy)}
.dp-dark .dp-lead{color:var(--lime)}
.dp-center{text-align:center}
.dp-center .dp-eyebrow{justify-content:center}
.dp-center .dp-h2,.dp-center .dp-sub,.dp-center .dp-lead{margin-left:auto;margin-right:auto}
.dp-center .dp-h2{max-width:18em}
.dp-paras>*+*{margin-top:16px}
/* outlined button (.btn-line of Migrations), from docpath/buttons */
.btn.btn--line{color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.btn--line:hover{color:var(--navy);background:var(--lav)}
/* a figure under the heading (.stat of Integrations) */
.dp-stat{display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding:14px 22px 14px 18px;border-radius:14px;background:var(--navy);color:var(--on-d)}
.dp-stat b{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--lime)}
.dp-stat span{font:500 13.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* a photo in a rounded frame (.pic of Integrations and Migrations: docpath/feature-row, docpath/aibox) */
.dp-pic{position:relative;overflow:hidden;width:100%;max-width:520px;margin:0 auto;border-radius:28px;background:var(--lav);box-shadow:0 30px 50px -34px rgba(0,0,130,.55)}
.dp-pic img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dp-pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,130,.1);pointer-events:none}
.dp-dark .dp-pic{box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.dp-dark .dp-pic::after{box-shadow:none}
/* "intro" layout: title on one side, paragraphs on the other */
.dp-intro{display:grid;gap:22px}
/* "split" layout: title and paragraphs on one side, a photo on the other */
.dp-split{display:grid;gap:48px;align-items:center}
.dp-split .dp-paras{margin-top:20px}

/* paragraph styles (Estilos in the sidebar of a paragraph, registered in inc/common.php) */
.dp-sec p.is-style-tagline{max-width:30em;margin:40px auto 0;text-align:center;font-size:clamp(20px,2.4vw,26px);font-weight:600;line-height:1.3;color:var(--navy);text-wrap:balance}
.dp-dark p.is-style-tagline{color:#fff}
.dp-sec p.is-style-closing{max-width:620px;margin:40px auto 0;text-align:center}
.dp-sec p.is-style-conclusion{max-width:680px;margin:40px auto 0;text-align:center;font-size:18px;font-weight:500;color:var(--ink)}
.dp-dark p.is-style-conclusion{color:#fff}
.dp-sec p.is-style-note{max-width:760px;margin:28px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.dp-dark p.is-style-note{color:var(--dim)}
:where(.dp-sec,.dp-aibox) p.is-style-lead{font-size:19px;font-weight:600;line-height:1.4;color:var(--navy)}
.dp-dark p.is-style-lead{color:#fff}

.dp-ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--lav);color:var(--navy)}
.dp-ico .i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dp-idx{font:500 13px/1 var(--mono);color:var(--muted)}

@media (min-width:600px){.dp-sec .wrap{padding:0 28px}}
@media (min-width:1000px){
	.dp-sec{padding:112px 0}
	.dp-intro{grid-template-columns:1fr 1fr;gap:72px}
	.dp-intro>.dp-paras{padding-top:42px}
	/* paragraphs at the middle height of the heading (the intro of Migrations) */
	.dp-sec--middle .dp-intro{align-items:center}
	.dp-sec--middle .dp-intro>.dp-paras{padding-top:0}
	.dp-split{grid-template-columns:1.05fr .95fr;gap:72px}
}
@media (max-width:599.98px){.dp-eyebrow{font-size:13px}}

/* motion: the dot blinks; blocks and titles appear as they scroll in (browsers without scroll timelines,
   e.g. Firefox today, simply show everything in its final state) */
@keyframes dp-blink{50%{opacity:.35}}
@keyframes dp-rv{from{opacity:0;transform:translateY(24px)}}
@keyframes dp-wipe{from{clip-path:inset(0 100% 0 0)}}
@media (prefers-reduced-motion:no-preference){
	.dp-sec .dp-led{animation:dp-blink 1.6s ease-in-out infinite}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
	.dp-rv{animation:dp-rv linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
	.dp-stg>.dp-rv:nth-child(2){animation-range:entry 8% entry 78%}
	.dp-stg>.dp-rv:nth-child(3){animation-range:entry 16% entry 86%}
	.dp-stg>.dp-rv:nth-child(4){animation-range:entry 24% entry 94%}
	.dp-stg>.dp-rv:nth-child(5){animation-range:entry 32% entry 100%}
	.dp-stg>.dp-rv:nth-child(n+6){animation-range:entry 40% entry 100%}
	.dp-eyebrow .dp-sx{animation:dp-wipe steps(18,end) both;animation-timeline:view();animation-range:entry 40% cover 30%}
}}
@media (prefers-reduced-motion:reduce){.dp-sec *,.dp-sec *::before,.dp-sec *::after{transition:none!important}}

/* docpath/buttons */
.dp-buttons{margin-top:32px}
.dp-center .dp-buttons,.dp-sec--center .wrap>.dp-buttons{justify-content:center}
@media (max-width:599.98px){.dp-intro .btn{flex:1 1 auto}}

/* off screen (view.js): decorative loops stop */
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* a highlighted phrase inside a paragraph (<span class="key">, .key of the WelcomePath snippet) */
.key{font-weight:600;color:var(--ink);background:linear-gradient(var(--lime),var(--lime)) 0 94%/100% .28em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* "split" with a list of problems on the right instead of a photo (#kyc of WelcomePath) */
.dp-split:has(>.dp-pains){gap:36px}
.dp-split:has(>.dp-pains) .dp-paras{margin-top:16px}
@media (min-width:1000px){.dp-split:has(>.dp-pains){grid-template-columns:1.1fr 1fr;gap:64px}}