*,*::before,*::after{box-sizing:border-box}
/* ==========================================================================
   Dashboard Builder theme — v2 "soft canvas"
   Pastel heroes, product-first visuals, pill buttons, big rounded surfaces.
   Class names match the existing article and banner markup, so deleting an
   article's own <style> block is all it takes for a page to pick up this look.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted) ---------- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

/* ---------- 2. Tokens ---------- */
:root{
  --db-ink:#0B2E5C;            /* logo navy: headings */
  --db-text:#3D4F66;
  --db-muted:#66768A;
  --db-teal:#14A39A;           /* logo teal */
  --db-teal-ink:#0B7C75;       /* buttons + links on light (AA) */
  --db-teal-ink-2:#096A64;
  --db-teal-bright:#2CC4B6;    /* teal on dark */
  --db-night:#081B36;          /* dark bands */
  --db-night-2:#0F2A52;
  /* fixed pastels (banner modifiers use these by name) */
  --db-mint:#D5F2ED; --db-sky:#DCE8F8; --db-lilac:#E5E3FB; --db-peach:#FCE8DD;
  --db-line:#E4EAF1;
  --db-white:#fff;
  --db-amber:#F2A93B;
  /* legacy names from the handover */
  --db-heading:var(--db-ink); --db-accent:var(--db-accent-ink); --db-link:var(--db-accent-ink);
  --db-grey:var(--db-soft); --db-tint:var(--db-soft-2); --db-dark:var(--db-night); --db-star:var(--db-amber);
  /* shape */
  --db-r-xl:32px; --db-r-lg:24px; --db-r:18px; --db-r-sm:12px;
  --db-measure:880px; --db-wide:1200px; --db-header-h:72px;
  --db-shadow-soft:0 1px 2px rgba(11,46,92,.04),0 12px 32px -16px rgba(11,46,92,.18);
  --db-shadow-float:0 40px 80px -30px rgba(11,46,92,.35),0 8px 20px -10px rgba(11,46,92,.12);
  --db-font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --db-mono:"JetBrains Mono",Consolas,Menlo,"Courier New",monospace;
  --db-ease:cubic-bezier(.2,.7,.2,1);
}


/* ---------- 2b. Colour palettes (Appearance › Customize › Colour palette) ----------
   The theme prints one class on <body>: palette-sky (default), palette-mint, palette-lilac or palette-peach.
   Every component reads these roles, so a palette swap recolours the whole site. */
:root, .palette-sky{
  --db-chart-accent:#2F6FD6;
  --db-hero:#DCE8F8; --db-soft:#F3F7FD; --db-soft-2:#EEF3FB; --db-soft-3:#F4F3FD;
  --db-p1:#DCE8F8; --db-p2:#E5E3FB; --db-p3:#FCE8DD; --db-p4:#E8EEF4;
  --db-btn:#0B2E5C; --db-btn-hover:#071F40; --db-btn-text:#fff; --db-btn-shadow:rgba(11,46,92,.55);
  --db-btn-dark:#fff; --db-btn-dark-text:#0B2E5C;
  --db-accent-ink:#1D5BA8; --db-accent-ink-2:#164A8A; --db-on-dark-accent:#8FB8F2;
  --db-wallpaper:radial-gradient(110% 90% at 0% 0%,#7FB2F0 0%,rgba(127,178,240,0) 55%),radial-gradient(90% 80% at 100% 100%,#14A39A 0%,rgba(20,163,154,0) 45%),linear-gradient(135deg,#4F86D9 0%,#1D4F95 50%,#0B2E5C 100%);
  --db-glow-a:#2F6FD6; --db-glow-b:#6A8FE8; --db-glow-c:rgba(20,163,154,.7); --db-glow-a-soft:rgba(47,111,214,.32); --db-glow-b-soft:rgba(106,143,232,.28);
}
.palette-mint{
  --db-chart-accent:#14A39A;
  --db-hero:#D5F2ED; --db-soft:#EEF9F7; --db-soft-2:#F2F6FC; --db-soft-3:#F4F3FD;
  --db-p1:#D5F2ED; --db-p2:#DCE8F8; --db-p3:#E5E3FB; --db-p4:#FCE8DD;
  --db-btn:#0B7C75; --db-btn-hover:#096A64; --db-btn-text:#fff; --db-btn-shadow:rgba(11,124,117,.7);
  --db-btn-dark:#2CC4B6; --db-btn-dark-text:#081B36;
  --db-accent-ink:#0B7C75; --db-accent-ink-2:#096A64; --db-on-dark-accent:#2CC4B6;
  --db-wallpaper:radial-gradient(120% 90% at 0% 0%,#2CC4B6 0%,rgba(44,196,182,0) 55%),radial-gradient(90% 80% at 100% 100%,#3B6FD8 0%,rgba(59,111,216,0) 60%),linear-gradient(135deg,#14A39A 0%,#0F4C8A 55%,#0B2E5C 100%);
  --db-glow-a:#14A39A; --db-glow-b:#2F5FD0; --db-glow-c:rgba(242,169,59,.8); --db-glow-a-soft:rgba(44,196,182,.28); --db-glow-b-soft:rgba(59,111,216,.32);
}
.palette-lilac{
  --db-chart-accent:#6E5BE8;
  --db-hero:#E5E3FB; --db-soft:#F6F5FE; --db-soft-2:#F2F6FC; --db-soft-3:#FDF3EE;
  --db-p1:#E5E3FB; --db-p2:#DCE8F8; --db-p3:#FCE8DD; --db-p4:#EFE9FB;
  --db-btn:#4338A8; --db-btn-hover:#352B8C; --db-btn-text:#fff; --db-btn-shadow:rgba(67,56,168,.6);
  --db-btn-dark:#fff; --db-btn-dark-text:#2A2370;
  --db-accent-ink:#4A3FB5; --db-accent-ink-2:#3A3093; --db-on-dark-accent:#B9B2FF;
  --db-wallpaper:radial-gradient(110% 90% at 0% 0%,#F06BA8 0%,rgba(240,107,168,0) 50%),radial-gradient(90% 80% at 100% 100%,#6E7BF2 0%,rgba(110,123,242,0) 60%),linear-gradient(135deg,#A855D8 0%,#5B3FC4 55%,#2A2370 100%);
  --db-glow-a:#7B5CF0; --db-glow-b:#E0559A; --db-glow-c:rgba(110,123,242,.8); --db-glow-a-soft:rgba(123,92,240,.32); --db-glow-b-soft:rgba(224,85,154,.25);
}
.palette-peach{
  --db-chart-accent:#E8693F;
  --db-hero:#FCE8DD; --db-soft:#FEF7F2; --db-soft-2:#F2F6FC; --db-soft-3:#F4F3FD;
  --db-p1:#FCE8DD; --db-p2:#DCE8F8; --db-p3:#FBEFD9; --db-p4:#E5E3FB;
  --db-btn:#B2452C; --db-btn-hover:#963820; --db-btn-text:#fff; --db-btn-shadow:rgba(178,69,44,.55);
  --db-btn-dark:#fff; --db-btn-dark-text:#7A2E1B;
  --db-accent-ink:#B2452C; --db-accent-ink-2:#963820; --db-on-dark-accent:#FFB59C;
  --db-wallpaper:radial-gradient(110% 90% at 0% 0%,#FFB37A 0%,rgba(255,179,122,0) 55%),radial-gradient(90% 80% at 100% 100%,#E65A4F 0%,rgba(230,90,79,0) 55%),linear-gradient(135deg,#F08A5D 0%,#B2452C 50%,#0B2E5C 100%);
  --db-glow-a:#E8693F; --db-glow-b:#2F6FD6; --db-glow-c:rgba(242,169,59,.85); --db-glow-a-soft:rgba(232,105,63,.3); --db-glow-b-soft:rgba(47,111,214,.28);
}

/* ---------- 3. Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--db-header-h) + 16px)}
body{margin:0;font-family:var(--db-font);font-size:17px;line-height:1.7;color:var(--db-text);background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--db-font);color:var(--db-ink);font-weight:700;letter-spacing:-.025em;line-height:1.15}
a{color:var(--db-accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--db-accent-ink-2)}
img{max-width:100%;height:auto}
code,kbd,pre,samp{font-variant-ligatures:none}
code{color:var(--db-ink)}
:focus-visible{outline:3px solid var(--db-on-dark-accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--db-hero);color:var(--db-ink)}
.db-container{width:100%;max-width:var(--db-wide);margin:0 auto;padding:0 24px;box-sizing:border-box}
.db-skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--db-ink);color:#fff;padding:10px 16px;border-radius:999px}
.db-skip:focus{left:16px}

/* ---------- 4. Header ---------- */
.db-header{position:sticky;top:0;z-index:100;height:var(--db-header-h);background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.8) blur(16px);-webkit-backdrop-filter:saturate(1.8) blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
.db-header.is-scrolled{border-bottom-color:var(--db-line)}
.db-header__inner{height:100%;display:flex;align-items:center;gap:28px}
.db-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.db-logo svg{width:34px;height:34px;display:block}
.db-logo__word{font-weight:700;font-size:16px;line-height:1.02;letter-spacing:-.02em;color:var(--db-ink)}
.db-nav{flex:1 1 auto;display:flex;justify-content:flex-end}
.db-header__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.db-header__actions .moduletable, .db-header__actions p{margin:0}
.db-header__signin{font-size:14.5px;font-weight:600;color:var(--db-ink);text-decoration:none;padding:8px 10px}
.db-burger{display:none;width:44px;height:44px;border:0;background:var(--db-soft);border-radius:999px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.db-burger span{display:block;width:18px;height:2px;background:var(--db-ink);border-radius:2px;position:relative}
.db-burger span::before,.db-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--db-ink);border-radius:2px;transition:transform .2s}
.db-burger span::before{top:-6px}.db-burger span::after{top:6px}
.db-offcanvas{position:fixed;inset:var(--db-header-h) 0 0 0;z-index:99;background:#fff;padding:12px 24px 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--db-ease),visibility .25s}
.db-offcanvas ul, .db-offcanvas ul.nav{display:block;list-style:none;margin:0;padding:0}
.db-offcanvas li a, .db-offcanvas li span{display:block;padding:15px 4px;border-bottom:1px solid var(--db-line);font-size:19px;font-weight:700;color:var(--db-ink);text-decoration:none;letter-spacing:-.01em}
.db-offcanvas li ul a{font-size:16px;font-weight:500;padding-left:16px;color:var(--db-text)}
body.db-menu-open{overflow:hidden}
body.db-menu-open .db-offcanvas{opacity:1;transform:none;visibility:visible}
body.db-menu-open .db-burger span{background:transparent}
body.db-menu-open .db-burger span::before{transform:translateY(6px) rotate(45deg)}
body.db-menu-open .db-burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- 5. Buttons: pills everywhere ---------- */
.btn, a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;font-family:var(--db-font);font-size:15px;font-weight:700;
  line-height:1.2;letter-spacing:-.005em;border-radius:999px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary, a.btn-primary{background:var(--db-btn);color:var(--db-btn-text);box-shadow:0 10px 24px -12px var(--db-btn-shadow)}
.btn-primary:hover, .btn-primary:focus{background:var(--db-btn-hover);color:var(--db-btn-text)}
.btn-secondary, a.btn-secondary{background:#fff;color:var(--db-ink);box-shadow:inset 0 0 0 1.5px var(--db-line)}
.btn-secondary:hover{background:#fff;color:var(--db-ink);box-shadow:inset 0 0 0 1.5px #B9C6D6}
.btn-accent, a.btn-accent, .btn-outline{background:transparent;color:var(--db-ink);box-shadow:none;padding-left:14px;padding-right:14px}
.btn-accent::after, .btn-outline::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform .18s}
.btn-accent:hover, .btn-outline:hover{color:var(--db-accent-ink);background:transparent}
.btn-accent:hover::after, .btn-outline:hover::after{transform:translateX(3px) rotate(45deg)}
.btn-soft{background:var(--db-p1);color:var(--db-ink)}
.btn-soft:hover{background:var(--db-p1);filter:brightness(.96);color:var(--db-ink)}
.btn-lg{padding:17px 32px;font-size:16px}
.btn-sm, .btn-xs{padding:10px 18px;font-size:14px}
/* on dark surfaces */
.db-section--dark .btn-primary, .db-glow .btn-primary, .ct-cta-box .btn-primary{background:var(--db-btn-dark);color:var(--db-btn-dark-text);box-shadow:0 0 0 6px rgba(255,255,255,.08),0 14px 30px -10px rgba(0,0,0,.5)}
.db-section--dark .btn-primary:hover, .db-glow .btn-primary:hover{background:var(--db-btn-dark);filter:brightness(1.08);color:var(--db-btn-dark-text)}
.db-section--dark .btn-secondary, .db-glow .btn-secondary, .ct-cta-box .btn-secondary{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.db-section--dark .btn-accent, .db-glow .btn-accent{color:#fff}

/* ---------- 6. Banner module (position: title) — pastel hero ---------- */
.banner-container{position:relative;overflow:hidden;width:100%;box-sizing:border-box;background:var(--db-hero);color:var(--db-text);padding:80px 0 96px;margin:0}
.banner-container--lavender{background:var(--db-lilac)}
.banner-container--terracotta{background:var(--db-peach)}
.banner-container--sky{background:var(--db-sky)}
.banner-container--mint{background:var(--db-mint)}
.banner-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:56px;max-width:var(--db-wide);margin:0 auto;padding:0 24px;box-sizing:border-box}
.banner-text{max-width:560px}
.banner-title{font-size:clamp(38px,4.8vw,64px);font-weight:700;line-height:1.02;letter-spacing:-.045em;color:var(--db-ink);margin:0 0 22px;text-wrap:balance}
.banner-description{font-size:20px;line-height:1.55;color:var(--db-text);margin:0 0 34px;max-width:46ch}
.banner-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px}
.banner-actions .btn{padding:17px 30px;font-size:16px}
.banner-actions .btn-accent{padding-left:12px;padding-right:12px}
.db-hero-subtext{font-size:14px;font-weight:500;color:var(--db-muted);margin:0}
/* product shot: sits on the gradient "wallpaper" inside a rounded window with a live bar */
.banner-image-wrapper{position:relative;border-radius:var(--db-r-xl);background:var(--db-wallpaper);padding:64px 40px 44px;box-shadow:var(--db-shadow-float);
  display:flex;justify-content:center;align-items:center;min-height:300px;animation:db-rise .9s var(--db-ease) .1s both}
.banner-image-wrapper::before{content:"Live data";position:absolute;left:0;right:0;top:0;height:40px;border-radius:var(--db-r-xl) var(--db-r-xl) 0 0;
  background:rgba(8,27,54,.38);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;
  padding-left:0;letter-spacing:.01em}
.banner-image-wrapper::after{content:"";position:absolute;top:15px;left:calc(50% - 50px);width:10px;height:10px;border-radius:50%;background:var(--db-on-dark-accent);
  box-shadow:0 0 0 0 rgba(44,196,182,.7);animation:db-pulse 2.4s ease-out infinite}
.banner-image{display:block;max-width:100%;height:auto;border-radius:14px;filter:drop-shadow(0 24px 40px rgba(8,27,54,.35))}
@keyframes db-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes db-pulse{0%{box-shadow:0 0 0 0 rgba(44,196,182,.7)}70%{box-shadow:0 0 0 10px rgba(44,196,182,0)}100%{box-shadow:0 0 0 0 rgba(44,196,182,0)}}
.banner-text > *{animation:db-fade .7s var(--db-ease) both}
.banner-text > :nth-child(2){animation-delay:.07s}.banner-text > :nth-child(3){animation-delay:.14s}.banner-text > :nth-child(4){animation-delay:.21s}
@keyframes db-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the drag cursor that glides onto the canvas once (add <span class="db-cursor"></span> inside the wrapper, optional) */
.db-cursor{position:absolute;width:30px;height:30px;left:38%;bottom:22%;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.9L4 20z' fill='%23081B36' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:db-drag 1.6s var(--db-ease) .7s both}
@keyframes db-drag{from{opacity:0;transform:translate(90px,70px)}to{opacity:1;transform:none}}

/* ---------- 7. Main content ---------- */
.db-main{padding:8px 0 96px}
.db-main h1.banner-title{font-size:clamp(36px,4.6vw,58px);max-width:var(--db-measure);margin:64px auto 18px;padding:0 20px;box-sizing:border-box;animation:none}
.db-main p.banner-description{color:var(--db-muted);font-size:20px;max-width:var(--db-measure);margin:0 auto 8px;padding:0 20px;box-sizing:border-box}
#system-message-container{max-width:var(--db-measure);margin:24px auto 0}

/* breadcrumb */
ol.breadcrumb, ol.breadcrumb-flat{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;max-width:var(--db-measure);margin:32px auto 8px;padding:0 20px;
  box-sizing:border-box;background:none;border:0;font-size:14px;font-weight:600;line-height:1.4}
ol.breadcrumb li{display:inline-flex;align-items:center;color:var(--db-muted)}
ol.breadcrumb li + li::before{content:none}
ol.breadcrumb li a{color:var(--db-muted);text-decoration:none;padding:5px 10px;border-radius:999px}
ol.breadcrumb li a:hover{background:var(--db-soft);color:var(--db-ink)}
ol.breadcrumb li:first-child a{padding-left:0}
ol.breadcrumb .icon-home{display:none}
ol.breadcrumb li.divider{color:#B2BECC}
ol.breadcrumb li.active a{color:var(--db-ink);background:var(--db-soft);padding-left:10px}

/* ---------- 8. Article (.db-page) ---------- */
.db-page{max-width:var(--db-measure);margin:0 auto;padding:0 20px;box-sizing:border-box;color:var(--db-text);font-size:17px;line-height:1.75}
.db-page p{margin:0 0 20px}
.db-page p:last-child{margin-bottom:0}
.db-page h1{font-size:clamp(30px,4vw,44px);margin:0 0 24px}
.db-page h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.035em;margin:0 0 18px;scroll-margin-top:calc(var(--db-header-h) + 20px);text-wrap:balance}
.db-page h3{font-size:20px;margin:28px 0 10px;letter-spacing:-.015em;color:var(--db-ink) !important}
.db-page h2 + h3, .db-col > h3:first-child{margin-top:0}
.db-page ul, .db-page ol{padding-left:22px;margin:0 0 20px}
.db-page li{margin-bottom:6px}
.db-page ul li::marker{color:var(--db-accent-ink)}
.db-page ol li::marker{color:var(--db-accent-ink);font-weight:700}
.db-page code{font-family:var(--db-mono);font-size:.85em;background:var(--db-soft);padding:2px 7px;border-radius:7px;color:var(--db-ink);word-break:break-word}
.db-page strong{color:var(--db-ink);font-weight:700}

/* sections: soft rounded canvases, no borders */
.db-section{border-radius:var(--db-r-xl);padding:52px 56px;margin:32px 0;position:relative}
.db-hero, .db-page .db-hero.thumbnail{padding:0;margin:28px 0 36px;border:0;box-shadow:none;background:none;border-radius:0}
.db-hero > p:first-child{font-size:21px;line-height:1.6;color:var(--db-ink);font-weight:500;margin:0 !important;letter-spacing:-.01em}
.db-section--white{background:transparent;padding-left:0;padding-right:0}
.db-section--grey{background:var(--db-soft)}
.db-section--tint{background:var(--db-soft-2)}
.db-section--dark{background:var(--db-night);color:#C9D6E6;padding:60px 56px;overflow:hidden;isolation:isolate}
.db-section--dark::before{content:"";position:absolute;z-index:-1;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(40% 50% at 30% 30%,var(--db-glow-a-soft),transparent 70%),radial-gradient(40% 50% at 75% 60%,var(--db-glow-b-soft),transparent 70%)}
.db-section--dark h2, .db-section--dark h3{color:#fff !important}
.db-section--dark a{color:var(--db-on-dark-accent)}
.db-section--dark strong{color:#fff}
.db-section--dark section{margin:0}
.db-section--dark p[style*="text-align:center"]{margin-top:36px !important}

/* columns */
.db-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.db-cols--reverse{direction:rtl}.db-cols--reverse > *{direction:ltr}
.db-cols--three{grid-template-columns:repeat(3,1fr);gap:16px}
.db-cols--three .db-col{background:var(--db-soft);border-radius:var(--db-r-lg);padding:28px 26px}
.db-cols--three .db-col:nth-child(2){background:var(--db-soft-2)}
.db-cols--three .db-col:nth-child(3){background:var(--db-soft-3)}
.db-cols--three .db-col h3{font-size:18px;margin:0 0 8px}
.db-cols--three .db-col p{font-size:15.5px;margin:0}
.db-section--grey .db-cols--three .db-col, .db-section--tint .db-cols--three .db-col{background:#fff}
.db-col--media{display:flex;flex-direction:column;gap:16px;align-items:center}

/* feature tiles: pastel set */
.db-cols--feature-grid, .db-cols.db-cols--feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:28px;padding:0}
.feature-card{background:var(--db-p1);color:var(--db-text);border-radius:var(--db-r-lg);padding:28px 26px;font-size:16px;line-height:1.6;border:0;box-shadow:none;transition:transform .25s var(--db-ease)}
.feature-card:nth-child(4n+2){background:var(--db-p2)}
.feature-card:nth-child(4n+3){background:var(--db-p3)}
.feature-card:nth-child(4n+4){background:var(--db-p4)}
.feature-card:hover{transform:translateY(-4px)}
.feature-card strong{display:block;color:var(--db-ink);font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:-.015em}

/* table of contents */
.toc-box p{margin:0 0 16px !important;font-weight:700;font-size:16px;color:var(--db-ink);text-transform:none;letter-spacing:-.01em}
.toc-box ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2;column-gap:28px}
.toc-box li{counter-increment:toc;break-inside:avoid;margin:0 0 6px;font-size:15.5px}
.toc-box a{display:flex;gap:12px;align-items:flex-start;padding:8px 12px 8px 8px;color:var(--db-ink);text-decoration:none;border-radius:14px;font-weight:600;line-height:1.4;transition:background .15s}
.toc-box a::before{content:counter(toc);flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--db-accent-ink);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:-1px}
.toc-box a:hover{background:#fff}
.toc-box a strong{font-weight:600;color:inherit}

/* steps */
.step-list{display:flex;flex-direction:column;gap:12px;margin:32px 0;position:relative}
.step-card{display:flex;gap:20px;background:#fff;border:0;border-radius:var(--db-r-lg);padding:26px 28px;position:relative;box-shadow:var(--db-shadow-soft)}
.step-num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--db-p1);color:var(--db-accent-ink);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.step-card:last-child .step-num{background:var(--db-accent-ink);color:#fff}
.step-body{flex:1 1 auto;min-width:0;margin-top:5px}
.step-body img{margin-top:16px;border-radius:14px}
.step-body p{margin:0 0 8px}
.step-body p:last-child{margin-bottom:0}

/* images */
.thumbnail, .db-page .thumbnail{border-radius:var(--db-r);border:0;box-shadow:var(--db-shadow-soft);padding:0;background:#fff;overflow:hidden}
.db-page img.banner-image{display:block;margin:32px auto;border-radius:var(--db-r-lg);box-shadow:var(--db-shadow-float);filter:none}

/* code */
.db-page pre.db-code, pre.db-code{display:block !important;background:var(--db-night) !important;color:#DCE7F5 !important;font-family:var(--db-mono) !important;font-size:14px !important;
  line-height:1.75 !important;letter-spacing:0 !important;word-spacing:0 !important;padding:22px 26px !important;margin:20px 0 !important;border:0 !important;border-radius:20px !important;
  white-space:pre !important;overflow-x:auto !important;height:auto !important;max-height:none !important;tab-size:4;font-variant-ligatures:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 20px 40px -24px rgba(8,27,54,.6)}
.db-page pre.db-code span, pre.db-code span{display:block !important;white-space:pre !important;line-height:1.75 !important;font-size:14px !important;margin:0 !important;padding:0 !important}

.db-inline-cta{margin:24px 0 0;font-weight:600;padding:18px 24px;border-radius:999px;background:#fff;box-shadow:var(--db-shadow-soft)}
.db-note{background:#FFF6E6;border-radius:var(--db-r);padding:18px 22px;margin:20px 0}
.mode-pill{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--db-p1);color:var(--db-accent-ink);font-size:13px;font-weight:700;margin-right:6px;vertical-align:middle}

/* article buttons */
.db-page .btn{margin:6px 4px}
.db-page center{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;color:var(--db-muted);font-weight:600}
.db-page center .btn{margin:0}
.db-page center .btn-primary ~ .btn-primary, .banner-actions .btn-primary ~ .btn-primary{background:#fff;color:var(--db-ink);box-shadow:inset 0 0 0 1.5px var(--db-line)}
.db-section--grey:last-child{text-align:center;background:none;padding:16px 0}

/* FAQ */
.faq-container{margin:0 auto;color:var(--db-muted)}
.faq-container h2{margin-bottom:24px;text-align:center}
.faq-item{border-bottom:1px solid var(--db-line);position:relative}
.faq-item input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.faq-question{display:block;font-weight:700;font-size:18px;line-height:1.45;cursor:pointer;position:relative;padding:22px 52px 22px 0;color:var(--db-ink);margin:0;letter-spacing:-.01em}
.faq-question::after{content:"";position:absolute;right:0;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  background:var(--db-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%231D5BA8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .3s var(--db-ease)}
.faq-item input[type="checkbox"]:checked + .faq-question::after{transform:rotate(135deg)}
.faq-item input[type="checkbox"]:focus-visible + .faq-question{outline:3px solid var(--db-on-dark-accent);outline-offset:2px;border-radius:8px}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--db-ease),padding .3s;font-size:16px;line-height:1.7}
.faq-item input[type="checkbox"]:checked ~ .faq-answer{max-height:900px;padding:0 0 24px}
.db-section--dark .faq-container{color:#C9D6E6}
.db-section--dark .faq-item{border-bottom-color:rgba(255,255,255,.1)}
.db-section--dark .faq-question{color:#fff}
.db-section--dark .faq-question::after{background-color:rgba(255,255,255,.08);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%23A9C8F5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.db-section--dark .faq-answer{color:#B9C8DA}

/* tables, ratings, facts, author */
.db-compare-wrap{overflow-x:auto;margin:24px 0;border-radius:var(--db-r);background:#fff;box-shadow:var(--db-shadow-soft)}
table.db-compare-table{width:100%;border-collapse:collapse;font-size:15px;min-width:600px}
.db-compare-table th, .db-compare-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--db-line);vertical-align:top}
.db-compare-table thead th{background:var(--db-soft-2);color:var(--db-ink);font-weight:700;font-size:14px}
.db-compare-table tr:last-child td{border-bottom:0}
.db-compare-table td:last-child, .db-compare-table th:last-child, .db-compare-highlight{background:var(--db-soft);color:var(--db-ink);font-weight:600}
.db-compare-table thead th:last-child{background:var(--db-p1);color:var(--db-ink)}
.db-rating{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:600;color:var(--db-ink)}
.db-stars, .review-stars{color:var(--db-amber);letter-spacing:2px;font-size:18px}
.db-facts, .tldr-box{background:var(--db-soft);border-radius:var(--db-r);padding:24px 26px;margin:22px 0}
.db-facts code, .tldr-box code{word-break:break-all;background:#fff}
.author-box{display:flex;gap:18px;align-items:center;margin:40px 0 0;padding:24px 26px;border-radius:var(--db-r-lg);background:var(--db-soft)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-box strong, .author-box h3, .author-box h4{display:block;margin:0;font-size:17px;color:var(--db-ink)}
.author-role{color:var(--db-accent-ink);font-weight:600;font-size:14px}
.author-meta{color:var(--db-muted);font-size:14px;margin-top:2px}

/* conversion blocks (chart-tool + global) */
.ct-problem, .db-problem{background:var(--db-peach);border-radius:var(--db-r);padding:20px 24px;margin:14px 0}
.ct-fix, .db-fix{background:var(--db-p1);border-radius:var(--db-r);padding:20px 24px;margin:14px 0}
.ct-cta-box, .db-cta-box{background:var(--db-night);color:#C9D6E6;border-radius:var(--db-r-xl);padding:48px;text-align:center;margin:32px 0}
.ct-cta-box h2, .ct-cta-box h3, .db-cta-box h2, .db-cta-box h3{color:#fff !important}
.ct-plans, .db-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:28px 0}
.ct-plan, .db-plan{background:#fff;border-radius:var(--db-r-lg);padding:28px 24px;position:relative;display:flex;flex-direction:column;gap:8px;box-shadow:var(--db-shadow-soft)}
.ct-plan--best, .db-plan--best{background:var(--db-p1);box-shadow:none}
.ct-plan-tag, .db-plan-tag{position:absolute;top:-12px;left:24px;background:var(--db-accent-ink);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.ct-plan-name, .db-plan-name{font-weight:700;color:var(--db-ink);font-size:18px}
.ct-plan-price, .db-plan-price{font-size:36px;font-weight:700;color:var(--db-ink);letter-spacing:-.04em;line-height:1.1}
.ct-plan-for, .db-plan-for{color:var(--db-muted);font-size:14px}
.ct-plans-note{font-size:14px;color:var(--db-muted);text-align:center}
.ct-final{text-align:center}

/* ---------- 9. Content blocks (home + landing pages) ---------- */
.db-block{position:relative;padding:112px 0}
.db-block--tight{padding:64px 0}
.db-block--mint{background:var(--db-soft)}
.db-block--sky{background:var(--db-soft-2)}
.db-block--center{text-align:center}
.db-block__title{font-size:clamp(32px,4.2vw,54px);font-weight:700;letter-spacing:-.045em;line-height:1.05;margin:0 auto 18px;max-width:20ch;text-wrap:balance}
.db-lead{font-size:20px;line-height:1.55;color:var(--db-muted);max-width:52ch;margin:0 auto 64px}
.db-block--center .db-block__title, .db-block--center .db-lead{text-align:center}
.db-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--db-accent-ink);background:#fff;padding:6px 14px 6px 8px;border-radius:999px;box-shadow:var(--db-shadow-soft);margin-bottom:22px}
.db-eyebrow i{width:18px;height:18px;border-radius:50%;background:var(--db-p1);display:inline-block}

/* data-source strip (in place of customer logos) */
.db-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 56px;list-style:none;padding:0;margin:44px auto 0;max-width:1000px}
.db-logos li{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#8C9AAD;filter:grayscale(1);transition:color .2s}
.db-logos li:nth-child(3n+2){font-weight:600;letter-spacing:.02em}
.db-logos li:nth-child(4n+3){font-style:italic;font-weight:700}
.db-logos li:hover{color:var(--db-ink)}

/* zig-zag "how it works" */
.db-zig{display:flex;flex-direction:column;gap:0}
.db-zig__row{display:grid;grid-template-columns:1.15fr 1fr;gap:88px;align-items:center}
.db-zig__row + .db-zig__row{margin-top:-28px}
.db-zig__row:nth-child(even) .db-zig__visual{order:2}
.db-zig__row:nth-child(even) .db-zig__text{justify-self:end}
.db-zig__visual{border-radius:var(--db-r-xl);min-height:360px;position:relative;overflow:hidden;box-shadow:var(--db-shadow-float)}
.db-zig__visual--navy{background:linear-gradient(160deg,#0F2A52,#081B36)}
.db-zig__visual--wall{background:var(--db-wallpaper)}
.db-zig__visual--pastel{background:linear-gradient(140deg,#D5F2ED,#E2EBF8 55%,#E5E3FB)}
.db-zig__text{max-width:380px}
.db-zig__icon{width:40px;height:40px;border-radius:50%;background:var(--db-p1);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.db-zig__icon svg{width:20px;height:20px;stroke:var(--db-accent-ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.db-zig__text h3{font-size:28px;letter-spacing:-.03em;margin:0 0 12px}
.db-zig__text p{color:var(--db-muted);margin:0;font-size:17px}

/* glowing dark feature band */
.db-glow{position:relative;isolation:isolate;overflow:hidden;background:var(--db-night);border-radius:40px;padding:84px 48px 0;text-align:center;color:#B9C8DA}
.db-glow::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-25%;width:120%;height:95%;transform:translateX(-50%);
  background:radial-gradient(30% 45% at 28% 55%,var(--db-glow-a),transparent 72%),radial-gradient(30% 45% at 72% 55%,var(--db-glow-b),transparent 72%),radial-gradient(22% 30% at 50% 45%,var(--db-glow-c),transparent 70%);filter:blur(36px);opacity:.95}
.db-glow h2{color:#fff;font-size:clamp(32px,4vw,50px);letter-spacing:-.045em;margin:0 0 12px}
.db-glow p{font-size:19px;margin:0 auto 30px;max-width:50ch}
.db-glow__stage{perspective:1400px;margin-top:40px;height:300px;position:relative}
.db-glow__stage > *{position:absolute;left:50%;bottom:-150px;transform-origin:bottom center;border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}

/* testimonials carousel */
.db-quotes{position:relative;display:grid;grid-template-columns:1fr minmax(0,780px) 1fr;gap:24px;align-items:stretch;overflow:hidden;padding:8px 0 40px}
.db-quote{background:var(--db-soft);border-radius:var(--db-r-xl);padding:64px 80px;text-align:center;position:relative}
.db-quote--peek{opacity:.55;padding:64px 40px;overflow:hidden;background:linear-gradient(90deg,#fff,var(--db-soft-2))}
.db-quote--peek:last-child{background:linear-gradient(270deg,#fff,var(--db-soft-2))}
.db-quote blockquote{margin:0 0 28px;font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.35;letter-spacing:-.025em;color:var(--db-ink)}
.db-quote cite{font-style:normal;font-weight:700;color:var(--db-ink);display:block}
.db-quote small{color:var(--db-muted);font-size:14px}
.db-quote .db-stars{display:block;margin-bottom:22px}
.db-quote__nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#fff;border:0;box-shadow:var(--db-shadow-soft);cursor:pointer;display:flex;align-items:center;justify-content:center}
.db-quote__nav::before{content:"";width:9px;height:9px;border-left:2px solid var(--db-ink);border-bottom:2px solid var(--db-ink);transform:rotate(45deg);margin-left:4px}
.db-quote__nav--next{right:24px}.db-quote__nav--next::before{transform:rotate(-135deg);margin:0 4px 0 0}
.db-quote__nav--prev{left:24px}

/* editions row */
.db-editions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.db-edition{border-radius:var(--db-r-xl);padding:36px 32px 32px;display:flex;flex-direction:column;gap:10px;min-height:280px}
.db-edition:nth-child(1){background:var(--db-p1)}.db-edition:nth-child(2){background:var(--db-p2)}.db-edition:nth-child(3){background:var(--db-p3)}
.db-edition h3{font-size:26px;letter-spacing:-.035em;margin:0}
.db-edition p{margin:0;color:var(--db-text);font-size:16px}
.db-edition .btn{margin-top:auto;align-self:flex-start}

/* floating call to action that overlaps the footer */
.db-float-cta{position:relative;z-index:2;max-width:1040px;margin:0 auto -88px;background:#fff;border-radius:40px;box-shadow:0 0 0 1px rgba(11,46,92,.05),0 -14px 40px -18px rgba(11,46,92,.28),0 40px 80px -30px rgba(11,46,92,.35),0 8px 20px -10px rgba(11,46,92,.12);
  padding:56px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.db-float-cta h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.045em;margin:0;max-width:16ch}
.db-float-cta__act{text-align:center}
.db-float-cta__act small{display:block;margin-top:10px;color:var(--db-muted);font-size:13px}

/* scroll reveal */
.db-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--db-ease),transform .8s var(--db-ease)}
.db-reveal.is-in{opacity:1;transform:none}

/* ---------- 10. Footer ---------- */
.db-footer{background:var(--db-soft);color:var(--db-muted);padding:0 0 28px;font-size:14.5px}
.db-footer.has-float{padding-top:150px}
.db-footer a{color:var(--db-text);text-decoration:none}
.db-footer a:hover{color:var(--db-accent-ink)}
.db-footer__cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding:72px 0 48px}
.db-footer__brand p{margin:16px 0 0;max-width:30ch}
.footer-widget h4, .db-footer h4{color:var(--db-ink);font-size:14px;font-weight:700;margin:0 0 16px;letter-spacing:0}
.db-footer ul{list-style:none;margin:0;padding:0}
.db-footer li{margin:0 0 11px}
.db-newsletter{display:flex;gap:8px;margin-top:22px;max-width:360px;background:#fff;border-radius:999px;padding:6px;box-shadow:var(--db-shadow-soft)}
.db-newsletter input{flex:1;min-width:0;border:0;background:transparent;padding:0 14px;font:inherit;font-size:14.5px;color:var(--db-ink);outline:none}
.db-newsletter button{border:0;border-radius:999px;background:var(--db-btn);color:var(--db-btn-text);font:inherit;font-weight:700;font-size:14px;padding:11px 18px;cursor:pointer}
.db-footer .icon-circle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;margin:0 6px 0 0 !important;box-shadow:var(--db-shadow-soft);font-size:12px;font-weight:800;color:var(--db-ink)}
.db-footer .icon-circle i{font-style:normal;color:var(--db-accent-ink) !important}
.db-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--db-line);font-size:13.5px}
.copyright-text p{margin:0}

/* ---------- 11. Joomla/WP core bits ---------- */
.pagination{margin:40px 0 0;text-align:center}
.pagination ul{display:inline-flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.pagination ul > li::before, .pagination ul > li::after{content:none !important}
.pagination li a, .pagination li span{display:inline-flex;min-width:44px;height:44px;padding:0 14px;align-items:center;justify-content:center;border-radius:999px;font-weight:700;color:var(--db-ink);text-decoration:none;background:var(--db-soft)}
.pagination li.active span, .pagination li a.active{background:var(--db-ink);color:#fff}
.chronoforms6_credits{display:none}
body[dir="RTL"] .db-page, body[dir="rtl"] .db-page{text-align:right}

/* ---------- 12. Responsive ---------- */
@media (max-width:1080px){
  .db-nav, .db-header__actions .db-hide-md{display:none}
  .db-burger{display:inline-flex}
  .db-header__inner{justify-content:space-between}
}
@media (max-width:991px){
  .banner-container{padding:48px 0 64px}
  .banner-content{grid-template-columns:1fr;gap:44px}
  .banner-image-wrapper{padding:56px 20px 28px}
  .db-zig__row{grid-template-columns:1fr;gap:28px}
  .db-zig__row + .db-zig__row{margin-top:56px}
  .db-zig__row:nth-child(even) .db-zig__visual{order:0}
  .db-zig__row:nth-child(even) .db-zig__text{justify-self:start}
  .db-zig__visual{min-height:280px}
  .db-quotes{grid-template-columns:1fr}
  .db-quote--peek{display:none}
  .db-quote{padding:48px 32px 80px}
  .db-quote__nav{top:auto;bottom:20px;margin:0}
  .db-quote__nav--prev{left:calc(50% - 56px)}.db-quote__nav--next{right:calc(50% - 56px)}
  .db-editions{grid-template-columns:1fr}
  .db-edition{min-height:0}
  .db-float-cta{flex-direction:column;align-items:flex-start;padding:40px 32px;margin:0 16px -64px}
  .db-footer__cols{grid-template-columns:1fr 1fr}
  .db-footer__brand{grid-column:span 2}
  .db-glow{padding:64px 24px 0;border-radius:28px}
  .db-glow__stage{height:260px;transform:scale(.62);transform-origin:bottom center}
}
@media (max-width:760px){
  .db-block{padding:72px 0}
  .db-cols, .db-cols--three{grid-template-columns:1fr;gap:12px}
  .db-cols--reverse{direction:ltr}
  .db-section{padding:32px 22px;margin:20px 0;border-radius:var(--db-r-lg)}
  .db-section--white{padding-left:0;padding-right:0}
  .db-section--dark{padding:40px 22px}
  .toc-box ol{columns:1}
  .db-page{font-size:16px;padding:0 18px}
  .step-card{padding:20px 18px;gap:14px}
  .db-page pre.db-code, .db-page pre.db-code span{font-size:12.5px !important}
  .db-lead{margin-bottom:44px;font-size:18px}
  .db-logos{gap:12px 28px}.db-logos li{font-size:18px}
}
@media (max-width:576px){
  :root{--db-header-h:64px}
  .db-logo svg{width:30px;height:30px}.db-logo__word{font-size:14.5px}
  .banner-description{font-size:18px}
  .banner-actions{flex-direction:column;align-items:stretch}
  .banner-actions .btn{width:100%}
  .db-header__actions .btn{padding:10px 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .db-reveal{opacity:1;transform:none}
}