/, so each rule
* targets both the bare element (HTML widgets) and the Elementor inner node.
*
* The topbar nav and site footer from the package are intentionally absent —
* Blocksy's header/footer stay in charge.
*/
/* ================= tokens (old-home palette, forced light) ================= */
.dhp-page{
--dhp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--dhp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--dhp-ink:#0f172a; --dhp-muted:#475569; --dhp-line:#e2e8f0;
--dhp-bg:#ffffff; --dhp-card:#ffffff; --dhp-tint:#f8fafc;
--dhp-blue:#3b82f6; --dhp-violet:#8b5cf6; --dhp-cyan:#06b6d4; --dhp-green:#10b981;
/* the always-dark bands (hero, proof, final CTA) — matches old --da-dark/--da-navy */
--dhp-band:#060d1a; --dhp-band-2:#0a1628; --dhp-band-3:#0d1f3c;
--dhp-shadow:0 1px 2px rgba(15,23,42,.08);
--dhp-shadow-lift:0 10px 30px rgba(15,23,42,.10);
}
/* ================= page scaffolding (was body{} in the package) ================= */
.dhp-page{
background:var(--dhp-bg);
color:var(--dhp-ink);
font-family:var(--dhp-font);
line-height:1.6;
overflow-x:hidden;
}
.dhp-page a{color:inherit}
/* Neutralise Elementor container chrome so the package's own margins are the
single source of spacing. Elementor flex containers set
`gap: var(--row-gap) var(--column-gap)` (its kit default is 20px) — NOT --gap —
so every band and every heading/lede/grid inside a section was silently getting
an extra 20px. Zeroing --row-gap/--column-gap makes sections sit flush and
restores the package's exact vertical rhythm. Inner grids/rows set their own
gap explicitly below, which still wins. */
.dhp-page.e-con,
.dhp-page .e-con,
.dhp-page .e-con-inner{
--padding-block-start:0; --padding-block-end:0;
--padding-inline-start:0; --padding-inline-end:0;
--margin-block-start:0; --margin-block-end:0;
--margin-inline-start:0; --margin-inline-end:0;
--gap:0px; --row-gap:0px; --column-gap:0px;
}
.dhp-page .elementor-widget-container{margin:0}
.dhp-page .elementor-widget:not(:last-child){margin-block-end:0}
.dhp-page .elementor-widget-text-editor p:last-child{margin-bottom:0}
/* ================= section scaffolding ================= */
/* Section rhythm: the package's 78px on desktop (now that sections sit flush),
scaling down gracefully on small screens. */
.dhp-page .dhp-sec{padding:clamp(56px,6vw,78px) 0;display:block;width:100%}
.dhp-page .dhp-sec.dhp-alt{background:var(--dhp-tint)}
.dhp-page .dhp-wrap{max-width:1080px;margin:0 auto;padding:0 22px;width:100%;display:block}
.dhp-page .dhp-narrow{max-width:760px;margin:0 auto}
.dhp-page .dhp-kicker,
.dhp-page .dhp-kicker .elementor-heading-title{
display:flex;align-items:center;justify-content:center;gap:10px;
font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--dhp-muted);margin:0 0 12px;
}
.dhp-page .dhp-kicker .elementor-heading-title::before,
.dhp-page .dhp-kicker .elementor-heading-title::after{
content:"";width:22px;height:2px;border-radius:2px;
background:linear-gradient(90deg,#3B82F6,#8B5CF6);
}
.dhp-page .dhp-h2,
.dhp-page .dhp-h2 .elementor-heading-title{
font-size:clamp(25px,3.6vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.2;
text-align:center;margin:0 0 10px;color:var(--dhp-ink);
}
.dhp-page .dhp-lede,
.dhp-page .dhp-lede p{
text-align:center;color:var(--dhp-muted);font-size:16px;max-width:640px;margin:0 auto 40px;
}
.dhp-page .dhp-seclink,
.dhp-page .dhp-seclink p{text-align:center;margin:34px 0 0;font-size:14.5px}
.dhp-page .dhp-seclink a{font-weight:700;color:var(--dhp-blue);text-decoration:none}
.dhp-page .dhp-seclink a:hover{text-decoration:underline}
.dhp-page .dhp-seclink .note{color:var(--dhp-muted);font-weight:400}
/* ================= brand lockup ================= */
.dhp-page .dhp-lockup{
display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;
text-decoration:none;background:linear-gradient(90deg,#3B82F6,#8B5CF6,#06B6D4);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.dhp-page .dhp-lockup svg{display:block;flex-shrink:0}
/* ================= (1) hero — always dark ================= */
.dhp-page .dhp-hero{
position:relative;color:#ecebf3;overflow:hidden;
/* old home's navy hero gradient (--da-dark -> --da-navy tints) */
background:linear-gradient(160deg,var(--dhp-band) 0%,var(--dhp-band-2) 45%,var(--dhp-band-3) 100%);
padding:64px 0;isolation:isolate;display:block;width:100%;
}
.dhp-page .dhp-hero::before,
.dhp-page .dhp-hero::after{
content:"";position:absolute;border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none;
}
.dhp-page .dhp-hero::before{
width:560px;height:560px;left:-140px;top:-180px;
background:radial-gradient(circle,rgba(59,130,246,.34),transparent 70%);
}
.dhp-page .dhp-hero::after{
width:640px;height:640px;right:-180px;top:220px;
background:radial-gradient(circle,rgba(139,92,246,.26),transparent 70%);
}
.dhp-page .dhp-hero-copy{text-align:center;max-width:820px;margin:0 auto;display:block}
.dhp-page .dhp-eyebrow .elementor-heading-title{
display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:rgba(236,235,243,.75);
border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
border-radius:999px;padding:7px 16px;
}
/* the package's becomes a pseudo-element so the heading text stays plain-editable */
.dhp-page .dhp-eyebrow .elementor-heading-title::before{
content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#3B82F6,#06B6D4);
}
.dhp-page .dhp-eyebrow{text-align:center;margin:0 0 22px}
.dhp-page .dhp-h1 .elementor-heading-title{
font-size:clamp(34px,6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.08;
margin:0;color:#ecebf3;
}
.dhp-page .dhp-h1{margin:0 0 20px}
.dhp-page .dhp-h1 .line{display:block}
.dhp-page .dhp-grad{
background:linear-gradient(90deg,#3B82F6,#8B5CF6,#06B6D4);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.dhp-page .dhp-sub p{
font-size:clamp(15.5px,2vw,18px);line-height:1.65;color:rgba(236,235,243,.78);
max-width:660px;margin:0 auto 30px;
}
.dhp-page .dhp-sub b{color:#fff;font-weight:650}
.dhp-page .dhp-ctas{
display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;
}
/* Elementor Button: class lands on the wrapper, so reach the inner .
Design matched to the old-home / screenshot buttons: 10px rounded-rectangle
(0.625rem) instead of a pill, blue->indigo gradient primary, purple-outlined
ghost. */
.dhp-page .dhp-btn .elementor-button,
.dhp-page a.dhp-btn{
display:inline-flex;align-items:center;gap:.5rem;border-radius:.625rem;
text-decoration:none;font-weight:700;font-size:16.5px;padding:15px 30px;
line-height:1.6;border:0;transition:transform .15s,filter .15s,background .15s,box-shadow .15s;
}
.dhp-page .dhp-btn .elementor-button-content-wrapper{display:block}
.dhp-page .dhp-btn-primary .elementor-button,
.dhp-page a.dhp-btn-primary{
color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1);
box-shadow:0 4px 24px rgba(59,130,246,.4);
}
.dhp-page .dhp-btn-primary .elementor-button:hover,
.dhp-page a.dhp-btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);
box-shadow:0 6px 28px rgba(59,130,246,.5);color:#fff}
.dhp-page .dhp-btn-ghost .elementor-button,
.dhp-page a.dhp-btn-ghost{
color:#c4b5fd;font-weight:600;border:1px solid rgba(139,92,246,.45);
background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(59,130,246,.1));
}
.dhp-page .dhp-btn-ghost .elementor-button:hover,
.dhp-page a.dhp-btn-ghost:hover{
background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(59,130,246,.18));
border-color:rgba(139,92,246,.65);transform:translateY(-1px);color:#ddd6fe}
.dhp-page .dhp-micro p{font-size:13px;color:rgba(236,235,243,.62);margin:0 0 46px}
.dhp-page .dhp-micro b{color:rgba(236,235,243,.9);font-weight:650}
/* staggered blur-rise reveal — static state is fully visible; motion only adds the entrance */
@media (prefers-reduced-motion: no-preference){
@keyframes dhpRise{
from{opacity:0;filter:blur(10px);transform:translateY(18px)}
to{opacity:1;filter:blur(0);transform:none}
}
.dhp-page .dhp-rise{animation:dhpRise .9s cubic-bezier(.2,.7,.3,1) both}
.dhp-page .dhp-rise.d1{animation-delay:.08s}
.dhp-page .dhp-rise.d2{animation-delay:.2s}
.dhp-page .dhp-rise.d3{animation-delay:.34s}
.dhp-page .dhp-rise.d4{animation-delay:.46s}
.dhp-page .dhp-rise.d5{animation-delay:.56s}
.dhp-page{scroll-behavior:smooth}
}
/* ---------- hero chat demo (lives inside an HTML widget — raw selectors are fine) ---------- */
.dhp-chat{max-width:680px;margin:0 auto !important;padding:0}
.dhp-chat svg{display:block;width:100%;height:auto}
.dhp-chat-cap{text-align:center;font-size:13px;color:rgba(236,235,243,.6);margin:14px auto 0;max-width:520px}
.dhp-chat-cap b{color:rgba(236,235,243,.88);font-weight:600}
.dhp-c-win{fill:#14131f;stroke:#2e2d40;stroke-width:1.25;filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))}
.dhp-c-chrome{fill:#34324a}
.dhp-c-title{font-size:11px;font-weight:600;fill:#8e8ca0}
.dhp-c-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:#8e8ca0}
.dhp-c-msg{font-size:12.5px;font-weight:500;fill:#ecebf3}
.dhp-c-brand{font-size:12px;font-weight:800;letter-spacing:-.02em}
.dhp-c-chipt{font-size:10.5px;font-weight:500;fill:#9a98ac}
.dhp-c-cust{font-size:12px;font-weight:600;fill:#ecebf3}
.dhp-c-city{font-size:12px;font-weight:400;fill:#9a98ab}
.dhp-c-rev{font-size:12px;font-weight:700;fill:#5cd0a4}
.dhp-c-foot{font-size:10.5px;font-weight:400;fill:#9a98ac}
.dhp-c-div{stroke:#2e2d40;stroke-width:1}
.dhp-c-cover,.dhp-c-caret,.dhp-c-shim,.dhp-c-pop{opacity:0}
.dhp-c-pop{fill:none;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
@keyframes dhpCFade{0%,94%{opacity:1}100%{opacity:0}}
@keyframes dhpCUser{0%{opacity:0;transform:translateY(6px)}4%,100%{opacity:1;transform:translateY(0)}}
@keyframes dhpCType{0%,6%{transform:translateX(0)}22%,100%{transform:translateX(322px)}}
@keyframes dhpCCaret{0%,5%{opacity:0}7%,21%{opacity:1}25%,100%{opacity:0}}
@keyframes dhpCChip{0%,24%{opacity:0;transform:translateY(5px)}29%,100%{opacity:1;transform:translateY(0)}}
@keyframes dhpCShim{0%,28%{transform:translateX(0);opacity:0}30%{opacity:.9}40%{transform:translateX(310px);opacity:.9}42%,100%{transform:translateX(310px);opacity:0}}
@keyframes dhpCPop{0%,40%{opacity:0;transform:scale(.9)}44%{opacity:.55;transform:scale(1.05)}52%,100%{opacity:0;transform:scale(1.6)}}
@keyframes dhpCAsst{0%,40%{opacity:0;transform:translateX(-12px)}46%,100%{opacity:1;transform:translateX(0)}}
@keyframes dhpCHead{0%,46%{opacity:0}50%,100%{opacity:1}}
@keyframes dhpCRow1{0%,52%{opacity:0;transform:translateY(4px)}56%,100%{opacity:1;transform:translateY(0)}}
@keyframes dhpCRow2{0%,58%{opacity:0;transform:translateY(4px)}62%,100%{opacity:1;transform:translateY(0)}}
@keyframes dhpCRow3{0%,64%{opacity:0;transform:translateY(4px)}68%,100%{opacity:1;transform:translateY(0)}}
@keyframes dhpCFoot{0%,76%{opacity:0}84%,100%{opacity:1}}
.dhp-c-scene{animation:dhpCFade 7s ease-in-out infinite}
.dhp-c-user{animation:dhpCUser 7s ease-in-out infinite;transform-box:fill-box}
.dhp-c-cover{opacity:1;animation:dhpCType 7s ease-in-out infinite}
.dhp-c-caret{animation:dhpCCaret 7s ease-in-out infinite}
.dhp-c-chipg{animation:dhpCChip 7s ease-in-out infinite;transform-box:fill-box}
.dhp-c-shim{animation:dhpCShim 7s ease-in-out infinite}
.dhp-c-pop{animation:dhpCPop 7s ease-in-out infinite}
.dhp-c-asst{animation:dhpCAsst 7s ease-in-out infinite;transform-box:fill-box}
.dhp-c-head{animation:dhpCHead 7s ease-in-out infinite}
.dhp-c-row1{animation:dhpCRow1 7s ease-in-out infinite;transform-box:fill-box}
.dhp-c-row2{animation:dhpCRow2 7s ease-in-out infinite;transform-box:fill-box}
.dhp-c-row3{animation:dhpCRow3 7s ease-in-out infinite;transform-box:fill-box}
.dhp-c-footg{animation:dhpCFoot 7s ease-in-out infinite}
}
/* ================= (2) works-with strip ================= */
.dhp-works{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:40px}
.dhp-works .lbl{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,235,243,.5)}
.dhp-wpill{
display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
color:rgba(236,235,243,.88);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
border-radius:999px;padding:8px 17px;
}
.dhp-wpill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#3B82F6,#06B6D4)}
/* ================= (3) three steps ================= */
.dhp-page .dhp-steps{
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;width:100%;
}
.dhp-page .dhp-step{
background:var(--dhp-card);border:1px solid var(--dhp-line);border-radius:16px;
box-shadow:var(--dhp-shadow);padding:26px 26px 24px;transition:transform .18s,box-shadow .18s;
display:block;
}
.dhp-page .dhp-step:hover{transform:translateY(-3px);box-shadow:var(--dhp-shadow-lift)}
.dhp-page .dhp-step.n1{--nc1:#3B82F6;--nc2:#2563EB}
.dhp-page .dhp-step.n2{--nc1:#8B5CF6;--nc2:#6366F1}
.dhp-page .dhp-step.n3{--nc1:#10B981;--nc2:#06B6D4}
.dhp-page .dhp-step .num .elementor-heading-title{
width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--nc1),var(--nc2));
}
.dhp-page .dhp-step .num{margin-bottom:14px}
.dhp-page .dhp-step .dhp-step-h .elementor-heading-title{
font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px;color:var(--dhp-ink);
}
.dhp-page .dhp-step .dhp-step-p p{font-size:14px;color:var(--dhp-muted);margin:0}
.dhp-page .dhp-step .dhp-step-p b{color:var(--dhp-ink);font-weight:650}
.dhp-page .dhp-url code,
.dhp-page code.dhp-url{
display:block;font-family:var(--dhp-mono);font-size:12.5px;color:var(--dhp-blue);
background:var(--dhp-tint);border:1px solid var(--dhp-line);border-radius:8px;
padding:8px 12px;margin-top:12px;word-break:break-all;
}
/* ================= (4) three ways in ================= */
.dhp-page .dhp-ways{
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;width:100%;
}
.dhp-page .dhp-way{
position:relative;background:var(--dhp-card);border:1px solid var(--dhp-line);border-radius:16px;
box-shadow:var(--dhp-shadow);padding:28px 26px 26px;transition:transform .18s,box-shadow .18s;display:block;
}
.dhp-page .dhp-way:hover{transform:translateY(-3px);box-shadow:var(--dhp-shadow-lift)}
.dhp-way .wn{
position:absolute;top:26px;right:22px;font-size:11px;font-weight:800;letter-spacing:.08em;
color:var(--dhp-muted);border:1px solid var(--dhp-line);border-radius:999px;padding:3px 10px;
}
.dhp-way .ico{
width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
justify-content:center;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);margin-bottom:16px;
}
.dhp-way .ico svg{stroke:var(--dhp-blue)}
.dhp-page .dhp-way.w2 .ico{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.28)}
.dhp-page .dhp-way.w2 .ico svg{stroke:var(--dhp-cyan)}
.dhp-page .dhp-way.w3 .ico{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.28)}
.dhp-page .dhp-way.w3 .ico svg{stroke:var(--dhp-violet)}
.dhp-page .dhp-way .dhp-way-h .elementor-heading-title{
font-size:17.5px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px;color:var(--dhp-ink);
}
.dhp-page .dhp-way .dhp-way-p p{font-size:14px;color:var(--dhp-muted);margin:0}
.dhp-page .dhp-way .dhp-way-p b{color:var(--dhp-ink);font-weight:650}
/* Single green pill on the inner ONLY. Styling both the widget wrapper
(div.dhp-promise) AND its produced a pill-inside-a-pill (double outline).
The wrapper now just provides the top spacing and centres the pill. */
.dhp-page .dhp-promise{margin-top:14px;background:none;border:0;padding:0}
.dhp-page .dhp-promise p{
display:inline-block;margin:0;font-size:12px;font-weight:650;color:var(--dhp-green);
background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);border-radius:999px;padding:6px 14px;
}
/* shared micro-figure (HTML widget) */
/* Elementor resets figure margins to 0 with a high-specificity rule
(.elementor .elementor-widget:not(...):not(...) figure, specificity 0,4,1),
which kills the auto side-margins these centered figures rely on. !important is
the clean way to win against a third-party framework reset here. */
.dhp-converge{max-width:760px;margin:36px auto 0 !important;padding:0}
.dhp-converge svg{display:block;width:100%;height:auto}
.dhp-converge figcaption{text-align:center;font-size:13px;color:var(--dhp-muted);margin:14px auto 0;max-width:560px}
.dhp-converge figcaption b{color:var(--dhp-ink);font-weight:650}
.dhp-cv-chip{fill:var(--dhp-card);stroke:var(--dhp-line);stroke-width:1.25}
.dhp-cv-base{fill:none;stroke:var(--dhp-line);stroke-width:1.75}
.dhp-cv-lbl{font-size:11px;font-weight:600;fill:var(--dhp-ink)}
.dhp-cv-sub{font-size:10px;fill:var(--dhp-muted)}
.dhp-cv-bold{font-size:11.5px;font-weight:800;letter-spacing:-.01em;fill:var(--dhp-ink)}
.dhp-cv-glyph{fill:none;stroke:var(--dhp-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dhp-cv-pulse{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:16 999;stroke-dashoffset:1015;opacity:0}
.dhp-cv-ring{fill:none;stroke:var(--dhp-violet);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
@keyframes dhpCvDash{
0%{stroke-dashoffset:1015;opacity:0}
4%{opacity:.9}
36%{stroke-dashoffset:829;opacity:.9}
40%,100%{stroke-dashoffset:829;opacity:0}
}
@keyframes dhpCvRing{
0%,34%{opacity:0;transform:scale(.9)}
40%{opacity:.5;transform:scale(1.06)}
52%,100%{opacity:0;transform:scale(1.45)}
}
.dhp-cv-pulse{animation:dhpCvDash 4.5s linear infinite}
.dhp-cv-p2{animation-delay:.35s}
.dhp-cv-p3{animation-delay:.7s}
.dhp-cv-out{animation-delay:2.1s}
.dhp-cv-ring{animation:dhpCvRing 4.5s ease-in-out infinite;animation-delay:.45s}
}
.dhp-page .dhp-btn-see .elementor-button,
.dhp-page a.dhp-btn-see{
display:inline-block;font-weight:700;font-size:15px;color:var(--dhp-blue);
border:1.5px solid rgba(59,130,246,.45);background:rgba(59,130,246,.06);border-radius:999px;
padding:12px 26px;text-decoration:none;transition:background .15s,transform .15s;
}
.dhp-page .dhp-btn-see .elementor-button:hover,
.dhp-page a.dhp-btn-see:hover{background:rgba(59,130,246,.12);transform:translateY(-1px);text-decoration:none}
.dhp-page .dhp-see-wrap{text-align:center;margin-top:34px;display:block}
/* ================= (5) what teams ask ================= */
/* Flexbox (not grid) so a wrapped orphan row is centred: 3 cards per row on
laptop, and a lone 4th card sits centred under them instead of stuck to the
left. max-width caps each card so the orphan can't stretch full-width; the
flex-basis/wrap reflow gives 3-up (desktop) -> 2-up (tablet) -> 1-up (mobile). */
.dhp-page .dhp-personas{
/* flex-direction:row is required — Elementor containers default to column
(`.e-con-full.e-flex{flex-direction:var(--flex-direction)}`, which ties this
rule's specificity but loads later, so it needs !important to lose). Column
would stack the cards vertically and make justify-content centre them on the
wrong axis. */
display:flex;flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:18px;width:100%;
}
.dhp-page .dhp-persona{
/* Elementor drives child-container sizing through `flex: var(--flex-grow)
var(--flex-shrink) var(--flex-basis)` and resets those vars per-element, so
neither a plain `flex:` shorthand nor overriding the vars sticks. !important
longhands are the reliable way to win. basis 300 => 3 per row on laptop;
grow fills the row; max-width caps a lone orphan so justify-content:center
centres it instead of it stretching full-width. */
flex-grow:1 !important;flex-shrink:1 !important;flex-basis:300px !important;
max-width:360px;
background:var(--dhp-card);border:1px solid var(--dhp-line);border-radius:16px;
box-shadow:var(--dhp-shadow);padding:24px;transition:transform .18s,box-shadow .18s;display:block;
}
.dhp-page .dhp-persona:hover{transform:translateY(-3px);box-shadow:var(--dhp-shadow-lift)}
.dhp-page .dhp-persona .head{
display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-direction:row;flex-wrap:nowrap;
}
.dhp-persona .ico{
width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;
align-items:center;justify-content:center;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);
}
.dhp-persona .ico svg{stroke:var(--dhp-blue)}
.dhp-page .dhp-persona .head-txt{display:block;width:auto;flex:1}
.dhp-page .dhp-persona .dhp-persona-h .elementor-heading-title{
font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--dhp-ink);
}
.dhp-page .dhp-persona .sub p{font-size:12.5px;color:var(--dhp-muted);margin:2px 0 0}
.dhp-page .dhp-chips{display:flex;flex-direction:column;gap:8px;margin:0;width:100%}
.dhp-page .dhp-chip p,
.dhp-page span.dhp-chip{
border:1px solid rgba(59,130,246,.28);background:rgba(59,130,246,.06);border-radius:11px;
padding:8px 14px;font-size:13.5px;font-style:italic;color:var(--dhp-ink);margin:0;
}
/* ================= (6) trust strip ================= */
.dhp-page .dhp-trust{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;width:100%;
}
.dhp-page .dhp-tcard{
background:var(--dhp-card);border:1px solid var(--dhp-line);border-radius:14px;
box-shadow:var(--dhp-shadow);padding:22px;transition:transform .18s,box-shadow .18s;display:block;
}
.dhp-page .dhp-tcard:hover{transform:translateY(-3px);box-shadow:var(--dhp-shadow-lift)}
.dhp-tcard .ico{
width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
justify-content:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28);margin-bottom:12px;
}
.dhp-tcard .ico svg{stroke:var(--dhp-green)}
.dhp-page .dhp-tcard .dhp-tcard-h .elementor-heading-title{
font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;color:var(--dhp-ink);
}
.dhp-page .dhp-tcard .dhp-tcard-p p{font-size:13.5px;color:var(--dhp-muted);margin:0}
/* ================= (8) honest proof bar — always dark ================= */
.dhp-page .dhp-proof{
position:relative;background:var(--dhp-band);color:#ecebf3;padding:64px 0;overflow:hidden;
isolation:isolate;display:block;width:100%;
}
.dhp-page .dhp-proof::before{
content:"";position:absolute;width:520px;height:520px;left:50%;top:-260px;
transform:translateX(-50%);border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none;
background:radial-gradient(circle,rgba(6,182,212,.2),transparent 70%);
}
.dhp-page .dhp-proof .dhp-kicker .elementor-heading-title{color:rgba(236,235,243,.6)}
.dhp-page .dhp-stats{
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
max-width:900px;margin:26px auto 0;width:100%;
}
.dhp-page .dhp-stat{
text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
border-radius:14px;padding:22px 14px;display:block;
}
.dhp-page .dhp-stat .v .elementor-heading-title{
font-size:30px;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0;
}
.dhp-page .dhp-stat .v.sm .elementor-heading-title{font-size:19px;line-height:1.3;padding:6px 0 3px}
.dhp-page .dhp-stat .l p{font-size:12.5px;color:rgba(236,235,243,.62);margin-top:4px;margin-bottom:0}
.dhp-page .dhp-proof-note p{
text-align:center;font-size:14px;color:rgba(236,235,243,.68);max-width:620px;margin:28px auto 0;
}
.dhp-page .dhp-proof-note b{color:#fff;font-weight:650}
/* ================= (9) FAQ (native