/* ===== DDP custom page — scoped under .ddp. Colors from brand tokens; font = theme (Ubuntu). ===== */
.ddp{
  --ink:#141414;--g6:#626262;--g5:#939393;--border:#E8E8E8;--blue:#002AEA;--blue-h:#1F44F0;
  --navy1:#2B406B;--navy2:#486CB5;--lime:#C8F40F;--lime-h:#DAF85E;--wash:#F5F6FE;
  --peri100:#F0F5FF;--peri200:#D0DFFF;--peri500:#6698FF;--peri700:#486CB5;--success:#16A34A;
  --ui:var(--font-family,'Ubuntu',sans-serif);
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color:var(--ink);font-family:var(--ui);
}
.ddp *{box-sizing:border-box}
.ddp img{display:block;max-width:100%}
.ddp .mw{width:min(100% - 40px,92.5rem);margin-inline:auto}
.ddp h1,.ddp h2,.ddp h3,.ddp h4{font-family:var(--ui);margin:0;letter-spacing:-.02em}
.ddp p{margin:0}
/* buttons */
.ddp .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:8px;
  cursor:pointer;font-family:var(--ui);font-weight:700;font-size:18px;line-height:24px;padding:16px 32px;color:var(--ink);
  transition:background-color .15s ease;text-decoration:none}
.ddp .btn svg{width:20px;height:20px}
.ddp .btn.primary{background:var(--lime)}.ddp .btn.primary:hover{background:var(--lime-h);color:var(--ink)}
.ddp .btn.secondary{background:var(--blue);color:#fff}.ddp .btn.secondary:hover{background:#0020b8;color:#fff}
.ddp .eyebrow{font-weight:700;font-size:14px;line-height:20px;letter-spacing:.02em;color:var(--blue);text-transform:uppercase}
.ddp .h-sec{font-weight:700;font-size:clamp(30px,4vw,48px);line-height:1.2}
.ddp .h-mid{font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.25}
.ddp .sub{font-weight:400;font-size:18px;line-height:28px;color:var(--g5)}
/* hero */
.ddp-hero{max-width:900px;margin:0 auto;padding:64px 20px 40px;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.ddp-hero .pill{display:inline-flex;align-items:center;gap:10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--border);padding:4px 14px 4px 4px;font-weight:700;font-size:14px}
.ddp-hero .pill .ic{width:24px;height:24px;border-radius:4px;background:var(--navy1);display:flex;align-items:center;justify-content:center;color:#fff}
.ddp-hero .pill .ic svg{width:15px;height:15px}
.ddp-hero h1{font-weight:700;font-size:clamp(34px,5.5vw,60px);line-height:1.12}
.ddp-hero p{font-size:18px;line-height:28px;color:var(--g5);max-width:70ch}
.ddp-hero .cta{margin-top:12px}
/* hero shot */
.ddp-shot{margin-top:8px}
.ddp-shotpic{position:relative;border-radius:16px;overflow:hidden;background:var(--navy1);aspect-ratio:1483/726}
.ddp-shotpic::before,.ddp-shotpic::after{content:"";position:absolute;top:-40%;height:180%;transform:rotate(30deg);transform-origin:top left;z-index:0;pointer-events:none}
.ddp-shotpic::before{right:12%;width:36%;background:#38548C}
.ddp-shotpic::after{right:-6%;width:24%;background:linear-gradient(180deg,var(--navy1),var(--navy2))}
.ddp-glass{position:absolute;z-index:1;left:15.6%;top:14.2%;width:68.8%;aspect-ratio:1021/697;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.1);padding:12px;box-shadow:0 30px 70px rgba(8,14,32,.4)}
.ddp-glass img{width:100%;height:100%;object-fit:cover;object-position:60% 36%;border-radius:16px}
.ddp-chip{position:absolute;z-index:2;left:56%;top:47%;display:inline-flex;align-items:center;gap:10px;
  background:#fff;border-radius:999px;padding:12px 20px;font-weight:700;font-size:15px;box-shadow:0 16px 34px rgba(8,14,32,.22)}
.ddp-chip .dot{width:20px;height:20px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;color:var(--navy1);flex:none}
.ddp-chip .dot svg{width:12px;height:12px}
/* intro + statcard */
.ddp-intro{padding-top:96px;display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap}
.ddp-intro .txt{flex:1 1 520px;display:flex;flex-direction:column;gap:20px}
.ddp-intro .hd{display:flex;flex-direction:column;gap:14px}
.ddp-intro .body p{font-size:18px;line-height:28px;color:var(--g5)}
.ddp-intro .body p+p{margin-top:16px}
.ddp-intro .quote{border-left:3px solid var(--lime);padding:4px 0 4px 20px;font-size:18px;line-height:28px;color:var(--g6)}
.ddp-intro .quote b{color:var(--ink)}
.ddp-statcard{flex:0 0 320px;border:1px solid var(--border);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:24px}
.ddp-statcard .ic{width:32px;height:32px;color:var(--blue)}
.ddp-statcard .n{font-weight:700;font-size:32px;line-height:1.2}
.ddp-statcard .l{font-size:18px;line-height:28px;color:var(--g6)}
/* how it works */
.ddp-plate{margin-top:96px;border-radius:24px;background:var(--wash);padding:clamp(40px,5vw,72px) clamp(20px,4vw,60px);display:flex;flex-direction:column;gap:48px;align-items:center}
.ddp-plate .phead{max-width:820px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.ddp-steps{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:32px 24px}
.ddp-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.ddp-step .no{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--peri200);
  display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--ui);color:var(--peri700)}
/* connector line between step circles (design "rail") */
.ddp-step:not(:last-child)::after{content:"";position:absolute;top:23px;left:calc(50% + 30px);width:calc(100% - 36px);height:2px;background:var(--peri200);z-index:0}
.ddp-step h3{font-weight:700;font-size:18px;line-height:1.35}
.ddp-step p{font-size:15px;line-height:1.5;color:var(--g6)}
/* split features */
.ddp-feat{padding-top:96px;display:flex;flex-direction:column;gap:clamp(56px,6vw,96px)}
.ddp-feat .fhead{max-width:900px;display:flex;flex-direction:column;gap:16px}
.ddp-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.ddp-split .pic{border-radius:16px;overflow:hidden;background:var(--peri100);min-height:340px}
.ddp-split .pic img{width:100%;height:100%;object-fit:cover}
.ddp-split .txt{padding:clamp(24px,3vw,56px);display:flex;flex-direction:column;gap:28px;justify-content:center}
.ddp-split .txt h3{font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.25}
.ddp-split .txt .lead{font-size:20px;line-height:30px;color:var(--g6)}
.ddp-checks{display:flex;flex-direction:column;gap:14px}
.ddp-checks div{display:flex;gap:12px;align-items:flex-start;font-size:18px;line-height:28px}
.ddp-checks svg{width:22px;height:22px;color:var(--success);flex:none;margin-top:3px}
.ddp-note{border:1px solid var(--border);padding:20px 24px;font-size:16px;line-height:24px;color:var(--g5);border-radius:8px}
/* dark plug&play */
.ddp-dark{margin-top:96px;border-radius:24px;background:var(--ink);padding:clamp(16px,2vw,24px);display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;overflow:hidden}
.ddp-browser{border-radius:12px;overflow:hidden;background:#0F1524;box-shadow:0 40px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);min-width:0}
.ddp-browser .bar{height:34px;background:#1A2133;display:flex;align-items:center;gap:7px;padding:0 14px;overflow:hidden;white-space:nowrap}
.ddp-browser .bar i{width:9px;height:9px;border-radius:50%;background:#3A465F}
.ddp-browser .bar span{margin-left:12px;font:500 11px/1 var(--mono);color:#8A93A6;overflow:hidden;text-overflow:ellipsis}
.ddp-code{padding:22px 24px;font:400 13px/22px var(--mono);color:#C9D2E4;overflow-x:auto;white-space:pre}
.ddp-code .cm{color:#6B7794}.ddp-code .k{color:#8FB4FF}.ddp-code .s{color:var(--lime)}.ddp-code .n{color:#FFD479}
.ddp-dark .txt{padding:clamp(24px,3vw,56px);display:flex;flex-direction:column;gap:28px}
.ddp-dark .txt .eyebrow{color:var(--lime)}
.ddp-dark .txt h3{font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.25;color:#fff}
.ddp-dark .txt p{font-size:20px;line-height:30px;color:#B6B6B6}
/* certs */
.ddp-sec{padding:96px 0;display:flex;flex-direction:column;gap:48px}
.ddp-sec .shead{max-width:900px;display:flex;flex-direction:column;gap:16px}
.ddp-certs{border-radius:24px;box-shadow:inset 0 0 0 1px var(--border);display:grid;grid-template-columns:repeat(3,1fr)}
.ddp-cert{padding:40px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--border)}
.ddp-cert:last-child{border-right:none}
.ddp-cert img{height:80px;width:auto;object-fit:contain;align-self:flex-start}
.ddp-cert h4{font-weight:700;font-size:20px;line-height:1.4}
.ddp-cert p{font-size:16px;line-height:24px;color:var(--g6)}
/* feature set */
.ddp-fset{padding-bottom:96px;display:flex;flex-direction:column;gap:40px}
.ddp-fset .fhead{max-width:900px;display:flex;flex-direction:column;gap:16px}
.ddp-fsrow{display:grid;grid-template-columns:240px 1fr;gap:24px;border-top:1px solid var(--border);padding:36px 0}
.ddp-fsrow .seg{font-weight:700;font-size:24px;line-height:1.3}
.ddp-fsrow .items{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px}
.ddp-it{display:flex;gap:14px;align-items:flex-start}
.ddp-it .ic{width:24px;height:24px;color:var(--blue);flex:none;margin-top:2px}
.ddp-it b{display:block;font-weight:700;font-size:18px;line-height:1.5}
.ddp-it span{font-size:16px;line-height:24px;color:var(--g6)}
/* blue band */
.ddp-band{border-radius:24px;background:var(--peri500);padding:clamp(32px,4vw,60px);display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.ddp-band .art{width:120px;height:150px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ddp-band .art svg{width:56px;height:56px}
.ddp-band .txt{flex:1 1 400px;display:flex;flex-direction:column;gap:24px}
.ddp-band h3{font-weight:700;font-size:clamp(24px,3vw,30px);line-height:1.25;color:#fff}
.ddp-band p{font-size:18px;line-height:28px;color:#fff}
/* responsive */
@media (max-width:1000px){
  .ddp-steps{grid-template-columns:repeat(3,1fr)}
  .ddp-step::after{display:none}
  .ddp-split,.ddp-dark{grid-template-columns:1fr}
  .ddp-split .txt.right{order:-1}
  .ddp-certs{grid-template-columns:1fr}
  .ddp-cert{border-right:none;border-bottom:1px solid var(--border)}
  .ddp-cert:last-child{border-bottom:none}
  .ddp-fsrow{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ddp-steps{grid-template-columns:repeat(2,1fr)}
  .ddp-fsrow .items{grid-template-columns:1fr}
}