/* ConvoDock design B: the inner pages (Features, How it works, Pricing,
   Security). Sections are core blocks with cdb-* classes built in
   inc/pages.php; the shared pieces (buttons, rows, chips, the video, the CTA
   band, the plan cards) come from home.css. Loaded on those four pages only.
   Every animation here is CSS, loops quietly, and stops for reduced motion.
   Icons are inline SVG data URIs, stroked in the brand green. */

/* ================= header over the light page hero ================= */
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) { position: absolute; inset: 0 0 auto; background: transparent; }
.admin-bar .cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) { top: 32px; }
@media (max-width: 782px) { .admin-bar .cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) { top: 46px; } }
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-header__brand { box-shadow: 0 0 0 1px #DFE7E4, 0 12px 28px -16px rgba(1,60,40,.35); }
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-dock { box-shadow: 0 20px 40px -18px rgba(1,60,40,.45); }
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-header__login,
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-header__login:hover { color: var(--cdb-ink); }
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-pill--white,
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-pill--white:hover { background: var(--cdb-ink); color: #fff; }
.cd-header:has(~ .cd-main > .cd-entry > .cdb-phero:first-child) .cd-menu summary { color: var(--cdb-ink); }

/* ================= shared pieces ================= */
.cdb-ico::before { content: ""; display: block; width: 46px; height: 46px; flex: none; margin-bottom: 10px; border-radius: 14px; background: #E6F8EE var(--ico, none) center / 22px no-repeat; }
.cdb-ico--numbers::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M9 10v10'/%3E%3C/svg%3E"); }
.cdb-ico--people::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c2.3.3 3.9 2 4.5 4.5'/%3E%3C/svg%3E"); }
.cdb-ico--file::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); }
.cdb-ico--clock::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.cdb-ico--lock::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E"); }
.cdb-ico--tag::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
.cdb-ico--note::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v12H9l-4 4z'/%3E%3Cpath d='M9 9h6M9 12h4'/%3E%3C/svg%3E"); }
.cdb-ico--phone::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }
.cdb-ico--browser::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.cdb-ico--mail::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.cdb-ico--refresh::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0114-5.3M20 12a8 8 0 01-14 5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E"); }
.cdb-ico--shield::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3C/svg%3E"); }
.cdb-ico--log::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 11h7M9 15h7'/%3E%3C/svg%3E"); }
.cdb-ico--columns::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='8' height='16' rx='2'/%3E%3Crect x='13' y='4' width='8' height='16' rx='2'/%3E%3C/svg%3E"); }
.cdb-ico--key::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E"); }
.cdb-ico--eyeoff::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10 10 0 0122 12c-.6 1.3-1.4 2.5-2.4 3.5M6.6 6.6A10 10 0 002 12c1.8 4 5.6 7 10 7 1.8 0 3.5-.5 5-1.4'/%3E%3C/svg%3E"); }
.cdb-ico--db::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E"); }
.cdb-ico--trash::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }
.cdb-ico--server::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); }
.cdb-ico--window::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.cdb-ico--globe::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/%3E%3C/svg%3E"); }
.cdb-ico--search::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); }
.cdb-ico--user::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='9' cy='11' r='2.5'/%3E%3Cpath d='M5.5 16.5c.6-1.6 1.9-2.5 3.5-2.5s2.9.9 3.5 2.5M15 10h3.5M15 13.5h3.5'/%3E%3C/svg%3E"); }
.cdb-ico--history::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 102.5-6'/%3E%3Cpath d='M3 4v4h4'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.cdb-ico--live::before { background: #fff radial-gradient(circle, var(--cdb-bright) 0 5px, transparent 5.5px); animation: cdb-livebox 2s infinite; }
@keyframes cdb-livebox { 0% { box-shadow: 0 0 0 0 rgba(3,178,87,.35); } 100% { box-shadow: 0 0 0 12px rgba(3,178,87,0); } }

.cdb-tile { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid #DFE7E4; color: var(--cdb-ink); overflow: hidden; box-sizing: border-box; }
.cdb-tile__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cdb-tile h3 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--cdb-ink); }
.cdb-tile p { margin: 0; font-size: 16px; line-height: 1.55; color: #334155; }
.cdb-tile--mint { background: #E6F8EE; border-color: #CFF1DC; }
.cdb-tile--row { padding: 28px 32px; }
.cdb-tile--row .cdb-tile__text { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; align-items: start; }
.cdb-tile--row .cdb-ico::before { grid-row: 1 / span 2; margin: 0; }
.cdb-tile--row .cdb-tile__text > * { grid-column: 2; }
.cdb-tile--row > :not(.cdb-tile__text) { margin-left: 66px; }

/* floating labels pinned to a product shot */
.cdb-callout {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #DFE7E4; color: var(--cdb-ink); font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgba(1,60,40,.35); animation: cdb-bob 5s ease-in-out infinite;
}
.cdb-callout::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cdb-bright); }
.cdb-callout--ok::before { width: auto; height: auto; border-radius: 0; background: none; content: "✓"; color: var(--cdb-green); font-weight: 700; }
.cdb-callout--wait { background: var(--cdb-ink); border-color: #1F2D42; color: #fff; }
.cdb-callout--wait::before { background: #F6B26B; animation: cdb-amber 2s infinite; }
@keyframes cdb-amber { 0% { box-shadow: 0 0 0 0 rgba(246,178,107,.55); } 100% { box-shadow: 0 0 0 9px rgba(246,178,107,0); } }
.cdb-callout--clock::before { width: 16px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* two states in one place, taking turns */
.cdb-swap { list-style: none; margin: 0; padding: 0; display: inline-grid; justify-self: start; align-self: flex-start; }
.cdb-swap li { grid-area: 1 / 1; justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: #FEF3E2; color: #B45309; animation: cdb-swap-a 5s infinite; }
.cdb-swap li:nth-child(2) { background: #E6F8EE; color: var(--cdb-green); animation-name: cdb-swap-b; }
@keyframes cdb-swap-a { 0%, 50% { opacity: 1; } 56%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cdb-swap-b { 0%, 50% { opacity: 0; } 56%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* children arrive one after another, hold, and leave together */
.cdb-cascade > * { animation: cdb-arrive 7s cubic-bezier(.2,.7,.2,1) infinite both; }
.cdb-cascade > :nth-child(2) { animation-delay: .6s; }
.cdb-cascade > :nth-child(3) { animation-delay: 1.2s; }
.cdb-cascade > :nth-child(4) { animation-delay: 1.8s; }
@keyframes cdb-arrive { 0% { opacity: 0; transform: translateY(12px); } 9%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

/* dark bands, like the product video */
.cd-entry > .cdb-acct, .cd-entry > .cdb-nosell { max-width: calc(var(--cdb-max) - 48px); margin-inline: auto; background: var(--cdb-ink); color: #F1F5F9; border-radius: 48px; }
@media (max-width: 1488px) { .cd-entry > .cdb-acct, .cd-entry > .cdb-nosell { margin-inline: 24px; } }
.cdb-acct h2, .cdb-nosell h2 { color: #F1F5F9; }
.cdb-acct .cdb-eyebrow { color: var(--cdb-light); }

/* boxed sections inside the column (a card the width of the content) */
.cd-entry > .cdb-days, .cd-entry > .cdb-sfacts, .cd-entry > .cdb-talk { max-width: 1280px; width: calc(100% - 2 * var(--cdb-pad)); }

/* ================= page hero (light) ================= */
.cd-entry > .cdb-phero {
  max-width: none; position: relative; overflow: hidden; color: var(--cdb-ink);
  background-color: #F4FBF8;
  background-image: radial-gradient(60% 80% at 85% 20%, rgba(207,241,220,.9) 0%, rgba(207,241,220,0) 70%), radial-gradient(circle, #D5E6DE 1.2px, transparent 1.6px);
  background-size: auto, 24px 24px;
  border-bottom: 1px solid #DFE7E4;
  padding-top: 176px; padding-bottom: 104px;
  padding-inline: max(var(--cdb-pad), calc((100% - 1280px) / 2));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; align-items: center;
}
.cdb-phero__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cdb-phero__eyebrow { align-self: flex-start; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: #E6F8EE; border: 1px solid #CFF1DC; color: var(--cdb-green); font-size: 14px; font-weight: 600; }
/* The same label when it is the page's H1: no heading margins or spacing. */
h1.cdb-phero__eyebrow { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0; line-height: 1.2; letter-spacing: 0; }
.cdb-phero__title { margin: 0; font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.05em; color: var(--cdb-ink); }
.cdb-phero__lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: #334155; max-width: 580px; }
.cdb-phero .wp-block-buttons { margin-top: 4px; }
.cdb-phero .is-style-outline .wp-block-button__link { background: #fff; border-color: #DFE7E4; color: var(--cdb-ink); }
.cdb-phero .is-style-outline .wp-block-button__link:hover { background: #EDF4F1; }
.cdb-phero__visual { position: relative; min-width: 0; }

.cdb-jump { list-style: none; counter-reset: cdbj; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cdb-jump li { counter-increment: cdbj; }
.cdb-jump a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid #DFE7E4; color: #334155; font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.cdb-jump a::before { content: "0" counter(cdbj); color: var(--cdb-green); font-size: 13px; font-variant-numeric: tabular-nums; }
.cdb-jump a:hover { border-color: var(--cdb-green); color: var(--cdb-green); }

/* Features: the real app looping, with three labels */
.cd-entry > .cdb-phero--media { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
.cdb-phero--media .cdb-phero__title { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
.cdb-phero__frame { margin: 0; padding: 10px; border-radius: 22px; background: #fff; border: 1px solid #DFE7E4; box-shadow: 0 40px 80px -30px rgba(1,60,40,.35); }
.cdb-phero__frame video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: var(--cdb-ink); }
.cdb-phero__note { margin: 14px 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 14px; color: #64748B; }
.cdb-phero__note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cdb-bright); animation: cdb-live 2s infinite; }
.cdb-phero--media .cdb-callout--owner { left: -48px; top: 44px; }
.cdb-phero--media .cdb-callout--wait { right: -20px; top: 40%; animation-delay: -1.6s; }
.cdb-phero--media .cdb-callout--clock { left: 32px; bottom: 64px; animation-delay: -3.2s; }

/* How it works: the setup checklist ticks itself off */
.cdb-setup { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 14px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid #DFE7E4; box-shadow: 0 30px 60px -20px rgba(1,60,40,.35); transform: rotate(2deg); color: var(--cdb-ink); }
.cdb-setup h3 { margin: 0; font-size: 20px; font-weight: 700; }
.cdb-setup__status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; background: #E6F8EE; color: var(--cdb-green); font-size: 13px; font-weight: 600; }
.cdb-setup__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cdb-bright); animation: cdb-live 2s infinite; }
.cdb-setup__list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.cdb-setup__list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #EDF4F1; font-size: 17px; }
.cdb-setup__list li::before { content: "✓"; display: grid; place-items: center; width: 26px; height: 26px; flex: none; box-sizing: border-box; border-radius: 50%; font-size: 13px; font-weight: 700; background: #fff; border: 2px solid #B6C8C0; color: transparent; animation: cdb-tick1 10s infinite; }
.cdb-setup__list li:nth-child(2)::before { animation-name: cdb-tick2; }
.cdb-setup__list li:nth-child(3)::before { animation-name: cdb-tick3; }
.cdb-setup__list li:nth-child(4)::before { animation-name: cdb-tick4; }
.cdb-setup__list li:nth-child(5)::before { animation-name: cdb-tick5; }
.cdb-setup__list::after { content: ""; display: block; height: 8px; margin-top: 10px; border-radius: 999px; background: linear-gradient(var(--cdb-green), var(--cdb-green)) left / 0 100% no-repeat, #EDF4F1; animation: cdb-setupbar 10s infinite; }
@keyframes cdb-tick1 { 0%, 6% { background: #fff; border-color: #B6C8C0; color: transparent; } 9%, 92% { background: #017F4F; border-color: #017F4F; color: #fff; } 96%, 100% { background: #fff; border-color: #B6C8C0; color: transparent; } }
@keyframes cdb-tick2 { 0%, 20% { background: #fff; border-color: #B6C8C0; color: transparent; } 23%, 92% { background: #017F4F; border-color: #017F4F; color: #fff; } 96%, 100% { background: #fff; border-color: #B6C8C0; color: transparent; } }
@keyframes cdb-tick3 { 0%, 34% { background: #fff; border-color: #B6C8C0; color: transparent; } 37%, 92% { background: #017F4F; border-color: #017F4F; color: #fff; } 96%, 100% { background: #fff; border-color: #B6C8C0; color: transparent; } }
@keyframes cdb-tick4 { 0%, 48% { background: #fff; border-color: #B6C8C0; color: transparent; } 51%, 92% { background: #017F4F; border-color: #017F4F; color: #fff; } 96%, 100% { background: #fff; border-color: #B6C8C0; color: transparent; } }
@keyframes cdb-tick5 { 0%, 62% { background: #fff; border-color: #B6C8C0; color: transparent; } 65%, 92% { background: #017F4F; border-color: #017F4F; color: #fff; } 96%, 100% { background: #fff; border-color: #B6C8C0; color: transparent; } }
@keyframes cdb-setupbar { 0%, 6% { background-size: 0 100%, auto; } 9%, 20% { background-size: 20% 100%, auto; } 23%, 34% { background-size: 40% 100%, auto; } 37%, 48% { background-size: 60% 100%, auto; } 51%, 62% { background-size: 80% 100%, auto; } 65%, 92% { background-size: 100% 100%, auto; } 96%, 100% { background-size: 0 100%, auto; } }
.cdb-phero--setup .cdb-callout { left: -36px; bottom: -26px; }

/* Pricing: centred, with the plans rising out of it */
.cd-entry > .cdb-phero--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-bottom: 260px; }
.cdb-phero--center .cdb-phero__text { align-items: center; max-width: 920px; }
.cdb-phero--center .cdb-phero__eyebrow { align-self: center; }
.cdb-hchips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cdb-hchips li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid #DFE7E4; color: #334155; font-size: 15px; font-weight: 500; }
.cdb-hchips li::before { content: "✓"; color: var(--cdb-green); font-weight: 700; }

/* Security: the protection layers on a dark panel, glowing in turn */
.cdb-phero--layers .cdb-phero__visual { padding: 28px 28px 28px 20px; border-radius: 32px; background: var(--cdb-ink); box-shadow: 0 40px 80px -30px rgba(1,60,40,.5); }
.cd-entry > .cdb-phero--layers { padding-bottom: 176px; }
.cdb-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cdb-layers li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: #13213A; border: 1px solid #1F2D42; font-size: 15px; color: #9FB0C4; animation: cdb-glow 7.5s infinite; }
.cdb-layers li::before { content: ""; width: 34px; height: 34px; flex: none; border-radius: 10px; background: #014D30 var(--ico) center / 18px no-repeat; }
.cdb-layers strong { width: 140px; flex: none; font-size: 17px; font-weight: 600; color: #fff; }
.cdb-layers li:nth-child(2) { margin-left: 15px; animation-delay: 1.5s; }
.cdb-layers li:nth-child(3) { margin-left: 30px; animation-delay: 3s; }
.cdb-layers li:nth-child(4) { margin-left: 45px; animation-delay: 4.5s; border-color: var(--cdb-green); background: #0F2A28; }
.cdb-layers li:nth-child(5) { margin-left: 60px; animation-delay: 6s; }
.cdb-layers li:nth-child(1)::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BF5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.cdb-layers li:nth-child(2)::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BF5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E"); }
.cdb-layers li:nth-child(3)::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BF5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E"); }
.cdb-layers li:nth-child(4)::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BF5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3C/svg%3E"); }
.cdb-layers li:nth-child(5)::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BF5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E"); }
.cdb-layers li:nth-child(4)::before { background-color: var(--cdb-green); }
@keyframes cdb-glow { 0%, 20%, 100% { box-shadow: 0 0 0 0 rgba(34,221,106,0); } 8% { box-shadow: 0 0 0 1px rgba(34,221,106,.7), 0 12px 30px -10px rgba(34,221,106,.45); } }

/* ================= Features ================= */
.cd-entry > .cdb-inbox { padding-top: 120px; padding-bottom: 110px; }
.cdb-bento { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cdb-tile--wide { grid-column: span 2; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; padding: 40px; align-items: center; }
.cdb-tile--wide h3 { font-size: 28px; }
.cdb-tile > .cdb-cascade, .cdb-tile > .cdb-upload, .cdb-tile > .cdb-sched { margin-top: auto; }

/* messages run along the wires from each number into the inbox */
.cdb-wires { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 56px; align-items: center; min-width: 0; }
.cdb-wires__in { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cdb-wires__in li { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; box-sizing: border-box; border: 1px solid #DFE7E4; border-radius: 14px; background: #fff; font-size: 15px; font-weight: 600; }
.cdb-wires__in li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cdb-bright); animation: cdb-live 2s infinite; }
.cdb-wires__in li::after {
  content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 44px; height: 14px; margin-top: -7px;
  background: radial-gradient(circle, var(--cdb-bright) 0 4px, rgba(3,178,87,.18) 4.5px 7px, transparent 7.5px) 0 50% / 14px 14px no-repeat, linear-gradient(#DFE7E4, #DFE7E4) center / 100% 2px no-repeat;
  animation: cdb-wire 2.4s cubic-bezier(.45,0,.25,1) infinite;
}
.cdb-wires__in li:nth-child(2)::after { animation-delay: .8s; }
.cdb-wires__in li:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes cdb-wire { 0% { background-position: 0% 50%, center; } 100% { background-position: 100% 50%, center; } }
.cdb-wires__inbox { min-width: 0; padding: 12px; border-radius: 18px; background: #F4FBF8; border: 1px solid #DFE7E4; display: flex; flex-direction: column; gap: 8px; }
.cdb-wires__head { padding: 2px 4px 4px; font-size: 13px; font-weight: 600; color: #64748B; }
.cdb-wires__inbox .cdb-rows { gap: 8px; }
.cdb-wires__inbox .cdb-rows li { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #EDF4F1; font-size: 14px; }
.cdb-wires__inbox .cdb-av, .cdb-five__panel .cdb-av { display: grid; width: 30px; height: 30px; background: var(--cdb-ink); color: #fff; font-size: 11px; }
.cdb-wires__inbox .cdb-row__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdb-wires__inbox .cdb-chip { background: #EDF4F1; color: #334155; }

.cdb-bubbles { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cdb-bubbles li { align-self: flex-start; max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #EDF4F1; font-size: 14px; line-height: 1.4; }
.cdb-bubbles li:nth-child(even) { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--cdb-green); color: #fff; }

.cdb-upload { padding: 14px; border-radius: 14px; background: #F4FBF8; border: 1px solid #EDF4F1; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cdb-upload::before { content: "PDF"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #FDECEA; color: #B42318; font-size: 10px; font-weight: 700; }
.cdb-upload__name { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdb-upload .cdb-swap li:first-child { background: #EDF4F1; color: #334155; }
.cdb-upload::after { content: ""; grid-column: 1 / -1; height: 6px; border-radius: 999px; background: linear-gradient(var(--cdb-green), var(--cdb-green)) left / 0 100% no-repeat, #EDF4F1; animation: cdb-fill 5s ease-in-out infinite; }
@keyframes cdb-fill { 0% { background-size: 0 100%, auto; } 50%, 100% { background-size: 100% 100%, auto; } }

.cdb-sched { position: relative; display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.cdb-sched::before { content: ""; width: 48px; height: 48px; flex: none; box-sizing: border-box; border-radius: 50%; background: #E6F8EE radial-gradient(circle, var(--cdb-ink) 0 2.5px, transparent 3px); border: 2px solid var(--cdb-green); }
.cdb-sched::after { content: ""; position: absolute; left: 23px; top: 20px; width: 2px; height: 14px; border-radius: 2px; background: var(--cdb-green); transform-origin: 50% 100%; animation: cdb-spin 6s linear infinite; }
@keyframes cdb-spin { to { transform: rotate(360deg); } }
.cdb-sched__time { padding: 4px 11px; border-radius: 999px; background: #E6F8EE; color: var(--cdb-green); font-size: 13px; font-weight: 600; }

/* Accountability */
.cd-entry > .cdb-acct { padding-top: 110px; padding-bottom: 120px; }
.cdb-acct__body { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start; }
/* The list is taller than the screenshot, so the screenshot stays in view beside it. */
.cdb-acct__shot { position: sticky; top: 40px; min-width: 0; }
.cdb-acct .cdb-frame { background: #16233A; border-color: #1F2D42; padding: 12px; }
.cdb-acct__shot .cdb-callout:nth-of-type(1) { left: -24px; top: 40px; }
.cdb-acct__shot .cdb-callout:nth-of-type(2) { right: -16px; top: 46%; animation-delay: -1.6s; }
.cdb-acct__shot .cdb-callout:nth-of-type(3) { left: 40px; bottom: -20px; animation-delay: -3.2s; }
.cdb-acct__item { padding: 22px 0; border-bottom: 1px solid #1F2D42; }
.cdb-acct__item:last-child { border-bottom: 0; }
.cdb-acct__item h3 { margin: 0; font-size: 21px; font-weight: 700; color: #F1F5F9; animation: cdb-turn1 15s infinite; }
.cdb-acct__item p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: #CBD5E1; }
.cdb-acct__item::after { content: ""; display: block; height: 2px; margin-top: 16px; border-radius: 2px; background: linear-gradient(#22DD6A, #22DD6A) left / 0 100% no-repeat, #1F2D42; animation: cdb-story1 15s linear infinite; }
.cdb-acct__item:nth-child(2) h3 { animation-name: cdb-turn2; } .cdb-acct__item:nth-child(2)::after { animation-name: cdb-story2; }
.cdb-acct__item:nth-child(3) h3 { animation-name: cdb-turn3; } .cdb-acct__item:nth-child(3)::after { animation-name: cdb-story3; }
.cdb-acct__item:nth-child(4) h3 { animation-name: cdb-turn4; } .cdb-acct__item:nth-child(4)::after { animation-name: cdb-story4; }
.cdb-acct__item:nth-child(5) h3 { animation-name: cdb-turn5; } .cdb-acct__item:nth-child(5)::after { animation-name: cdb-story5; }
/* Five items, 3 s each: the bar fills under one item while its title is green. */
@keyframes cdb-story1 { 0% { background-size: 0 100%, auto; } 20% { background-size: 100% 100%, auto; } 20.1%, 100% { background-size: 0 100%, auto; } }
@keyframes cdb-story2 { 0%, 20% { background-size: 0 100%, auto; } 40% { background-size: 100% 100%, auto; } 40.1%, 100% { background-size: 0 100%, auto; } }
@keyframes cdb-story3 { 0%, 40% { background-size: 0 100%, auto; } 60% { background-size: 100% 100%, auto; } 60.1%, 100% { background-size: 0 100%, auto; } }
@keyframes cdb-story4 { 0%, 60% { background-size: 0 100%, auto; } 80% { background-size: 100% 100%, auto; } 80.1%, 100% { background-size: 0 100%, auto; } }
@keyframes cdb-story5 { 0%, 80% { background-size: 0 100%, auto; } 99.9% { background-size: 100% 100%, auto; } 100% { background-size: 0 100%, auto; } }
@keyframes cdb-turn1 { 0%, 19% { color: #22DD6A; } 21%, 100% { color: #F1F5F9; } }
@keyframes cdb-turn2 { 0%, 19% { color: #F1F5F9; } 21%, 39% { color: #22DD6A; } 41%, 100% { color: #F1F5F9; } }
@keyframes cdb-turn3 { 0%, 39% { color: #F1F5F9; } 41%, 59% { color: #22DD6A; } 61%, 100% { color: #F1F5F9; } }
@keyframes cdb-turn4 { 0%, 59% { color: #F1F5F9; } 61%, 79% { color: #22DD6A; } 81%, 100% { color: #F1F5F9; } }
@keyframes cdb-turn5 { 0%, 79% { color: #F1F5F9; } 81%, 98% { color: #22DD6A; } 100% { color: #F1F5F9; } }

/* Team and access: a highlight steps down the roles */
.cd-entry > .cdb-team { padding-top: 120px; padding-bottom: 110px; }
.cdb-team__body { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.cdb-roles { display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: center; row-gap: 20px; padding: 40px; border-radius: 24px; background: #fff; border: 1px solid #DFE7E4; color: var(--cdb-ink); }
.cdb-roles h3 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cdb-roles__tag { padding: 6px 12px; border-radius: 999px; background: #E6F8EE; color: var(--cdb-green); font-size: 13px; font-weight: 600; }
.cdb-roles__list { grid-column: 1 / -1; position: relative; list-style: none; margin: 0; padding: 0; }
.cdb-roles__list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58px; border-radius: 14px; background: #E6F8EE; animation: cdb-scan 10s cubic-bezier(.7,0,.2,1) infinite; }
.cdb-roles__list li { position: relative; display: flex; align-items: center; gap: 18px; min-height: 58px; padding: 0 16px; box-sizing: border-box; font-size: 16px; color: #334155; }
.cdb-roles__list strong { width: 110px; flex: none; font-size: 17px; color: var(--cdb-ink); }
@keyframes cdb-scan { 0%, 16% { top: 0; } 20%, 36% { top: 58px; } 40%, 56% { top: 116px; } 60%, 76% { top: 174px; } 80%, 96% { top: 232px; } 100% { top: 0; } }
.cdb-team__tiles { display: flex; flex-direction: column; gap: 20px; }
/* Search and filters: a search field and the inbox's quick views. */
.cdb-find { margin-top: auto; display: grid; gap: 10px; }
.cdb-find__q { margin: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: #F4FBF8; border: 1px solid #DFE7E4; font-size: 14px; color: var(--cdb-ink); }
.cdb-find__q::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.cdb-find__views { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cdb-find__views li { padding: 5px 12px; border-radius: 999px; background: #EDF4F1; color: #334155; font-size: 13px; font-weight: 600; }
.cdb-find__views li:first-child { background: var(--cdb-ink); color: #fff; }
/* Names, not numbers: a number replaced by the name the team knows. */
.cdb-rename { margin-top: auto; display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #F4FBF8; border: 1px solid #EDF4F1; }
.cdb-rename p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; font-size: 14px; }
.cdb-rename__from { color: #64748B; text-decoration: line-through; text-decoration-color: #94A3B8; }
.cdb-rename__to { font-weight: 600; color: var(--cdb-ink); }
.cdb-rename__to::after { content: "Renamed"; flex: none; padding: 3px 9px; border-radius: 999px; background: #E6F8EE; color: var(--cdb-green); font-size: 12px; font-weight: 600; }
.cdb-tagdemo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cdb-tagdemo li { padding: 4px 11px; border-radius: 999px; background: #E6F8EE; color: var(--cdb-green); font-size: 13px; font-weight: 600; }
.cdb-tagdemo li:nth-child(2) { background: #EDF4F1; color: #334155; }
.cdb-tagdemo li:nth-child(3) { background: #FDECEA; color: #B42318; }

/* ================= How it works ================= */
.cd-entry > .cdb-need { padding-top: 120px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
.cdb-need__aside { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 440px; }
.cdb-cards3 { grid-column: 1 / -1; margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* five steps: a packet runs down the rail, each step's number pulses */
.cd-entry > .cdb-five { padding-top: 40px; padding-bottom: 20px; }
.cdb-five__list { margin-top: 64px; counter-reset: cdb5; }
.cdb-five__step { counter-increment: cdb5; position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; padding-bottom: 80px; }
.cdb-five__step:last-child { padding-bottom: 0; }
.cdb-five__step::before { content: counter(cdb5); grid-column: 1; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cdb-green); color: #fff; font-size: 18px; font-weight: 700; animation: cdb-ring 3s infinite; }
.cdb-five__step:nth-child(2)::before { animation-delay: .6s; }
.cdb-five__step:nth-child(3)::before { animation-delay: 1.2s; }
.cdb-five__step:nth-child(4)::before { animation-delay: 1.8s; }
.cdb-five__step:nth-child(5)::before { animation-delay: 2.4s; }
@keyframes cdb-ring { 0% { box-shadow: 0 0 0 0 rgba(3,178,87,.45), 0 0 0 8px #CFF1DC; } 70%, 100% { box-shadow: 0 0 0 18px rgba(3,178,87,0), 0 0 0 8px #CFF1DC; } }
.cdb-five__step::after { content: ""; position: absolute; left: 47px; top: 76px; bottom: 4px; width: 2px; background: linear-gradient(180deg, rgba(3,178,87,0), var(--cdb-bright)) 0 -80px / 2px 80px no-repeat, #CFE3DA; animation: cdb-down 2.4s cubic-bezier(.45,0,.25,1) infinite; }
.cdb-five__step:last-child::after { display: none; }
@keyframes cdb-down { from { background-position: 0 -80px, 0 0; } to { background-position: 0 calc(100% + 80px), 0 0; } }
.cdb-five__text { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; min-width: 0; }
.cdb-five__text h3 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.cdb-five__text p { font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.cdb-five__text .cdb-five__note { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--cdb-green); }
.cdb-five__note::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.cdb-five__note--info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E"); }
.cdb-five__panel { align-self: start; min-width: 0; min-height: 300px; box-sizing: border-box; padding: 32px; border-radius: 28px; background: #E6F8EE; color: var(--cdb-ink); display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; }
.cdb-five__panel .cdb-rows li { padding: 14px 18px; border-radius: 16px; background: #fff; font-size: 16px; box-shadow: var(--shadow-1); }
.cdb-five__panel .cdb-av { width: 36px; height: 36px; font-size: 12px; }
.cdb-five__step:nth-child(2) .cdb-chip { background: #EDF4F1; color: #334155; }
.cdb-qrpanel { display: grid; grid-template-columns: 176px minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-content: center; }
.cdb-qrpanel::before { content: ""; grid-column: 1; grid-row: 1 / span 3; width: 176px; height: 176px; border-radius: 20px; background: linear-gradient(var(--cdb-bright), var(--cdb-bright)) center 14px / 148px 3px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' fill='none' stroke='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='%230B1422' stroke='none'%3E%3Cpath d='M0 0h7v7H0zM22 0h7v7h-7zM0 22h7v7H0z'/%3E%3Cpath fill='%23fff' d='M1 1h5v5H1zM23 1h5v5h-5zM1 23h5v5H1z'/%3E%3Cpath d='M2 2h3v3H2zM24 2h3v3h-3zM2 24h3v3H2z'/%3E%3Cpath d='M9 0h2v2H9zM13 1h2v3h-2zM17 0h3v2h-3zM9 4h3v2H9zM16 4h2v3h-2zM10 8h2v2h-2zM14 8h4v2h-4zM20 9h2v2h-2zM0 9h3v2H0zM4 10h2v3H4zM24 9h3v2h-3zM8 12h3v2H8zM13 12h2v4h-2zM17 12h3v2h-3zM22 13h4v2h-4zM1 14h2v3H1zM6 15h4v2H6zM10 17h2v3h-2zM15 17h3v2h-3zM20 16h2v4h-2zM24 17h3v3h-3zM9 22h3v2H9zM14 21h2v3h-2zM18 22h4v2h-4zM23 22h2v2h-2zM26 24h3v3h-3zM9 26h4v3H9zM15 25h2v4h-2zM19 26h4v2h-4z'/%3E%3C/g%3E%3C/svg%3E") center / 140px no-repeat, #fff; animation: cdb-sweep 3.5s ease-in-out infinite; }
@keyframes cdb-sweep { 0%, 100% { background-position: center 14px, center; } 50% { background-position: center 159px, center; } }
.cdb-qrpanel > * { grid-column: 2; }
.cdb-qrpanel strong { font-size: 20px; }
.cdb-qrpanel p { font-size: 16px; line-height: 1.5; color: #334155; }
.cdb-qrpanel p strong { color: var(--cdb-ink); }
.cdb-chatcard { padding: 22px; border-radius: 20px; background: #fff; display: flex; flex-direction: column; gap: 14px; }
.cdb-chatcard__name { font-size: 18px; }
.cdb-chatcard__owner { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.cdb-chatcard__label { width: 70px; color: #64748B; }
.cdb-chatcard .cdb-swap li:first-child { background: #FDECEA; color: #B42318; }
.cdb-chatcard__tags { font-size: 15px; color: #334155; }
.cdb-chatcard__note { padding: 12px 14px; border-radius: 12px; background: #FEF3E2; font-size: 15px; color: #7A3E06; }
.cdb-replied li:last-child { animation: cdb-done 7s infinite; }
.cdb-replied li:last-child .cdb-row__label { background: linear-gradient(var(--cdb-ink), var(--cdb-ink)) left center / 0 1.5px no-repeat; animation: cdb-strike 7s infinite; }
@keyframes cdb-done { 0%, 40% { opacity: 1; } 46%, 94% { opacity: .55; } 100% { opacity: 1; } }
@keyframes cdb-strike { 0%, 40% { background-size: 0 1.5px; } 48%, 94% { background-size: 100% 1.5px; } 100% { background-size: 0 1.5px; } }

.cdb-five + .cdb-product { margin-top: 110px; }

/* your first two weeks: a marker walks the timeline, each day lights up */
.cd-entry > .cdb-days { margin-top: 120px; padding: 88px clamp(24px, 6vw, 88px) 96px; background: #fff; border: 1px solid #DFE7E4; border-radius: 40px; color: var(--cdb-ink); }
.cdb-days__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; }
.cdb-days h2 { color: var(--cdb-ink); }
.cdb-days__head p { font-size: 19px; line-height: 1.55; color: #334155; max-width: 460px; }
.cdb-days__line { position: relative; margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.cdb-days__line::before { content: ""; position: absolute; left: 9px; right: 9px; top: 14px; height: 4px; border-radius: 4px; background: linear-gradient(var(--cdb-green), var(--cdb-green)) left / 0 100% no-repeat, #DFE7E4; animation: cdb-walk 9s cubic-bezier(.65,0,.35,1) infinite; }
.cdb-days__line::after { content: ""; position: absolute; z-index: 2; top: 6px; left: 0; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 4px solid var(--cdb-green); box-shadow: 0 6px 14px -4px rgba(1,60,40,.5); animation: cdb-walker 9s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cdb-walk { 0%, 10% { background-size: 0 100%, auto; } 85%, 96% { background-size: 100% 100%, auto; } 100% { background-size: 0 100%, auto; } }
@keyframes cdb-walker { 0%, 10% { left: 0; } 85%, 96% { left: calc(100% - 20px); } 100% { left: 0; } }
.cdb-day { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 48px; }
.cdb-day::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid #B6C8C0; animation: cdb-day1 9s infinite; }
.cdb-day:nth-child(2)::before { animation-name: cdb-day2; }
.cdb-day:nth-child(3)::before { animation-name: cdb-day3; }
.cdb-day:nth-child(4)::before { animation-name: cdb-day4; }
@keyframes cdb-day1 { 0%, 8% { background: #fff; border-color: #B6C8C0; } 11%, 96% { background: #017F4F; border-color: #017F4F; } 100% { background: #fff; border-color: #B6C8C0; } }
@keyframes cdb-day2 { 0%, 30% { background: #fff; border-color: #B6C8C0; } 33%, 96% { background: #017F4F; border-color: #017F4F; } 100% { background: #fff; border-color: #B6C8C0; } }
@keyframes cdb-day3 { 0%, 50% { background: #fff; border-color: #B6C8C0; } 53%, 96% { background: #017F4F; border-color: #017F4F; } 100% { background: #fff; border-color: #B6C8C0; } }
@keyframes cdb-day4 { 0%, 68% { background: #fff; border-color: #B6C8C0; } 71%, 96% { background: #017F4F; border-color: #017F4F; } 100% { background: #fff; border-color: #B6C8C0; } }
.cdb-day__when { font-size: 14px; font-weight: 600; color: var(--cdb-green); }
.cdb-day h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; font-weight: 700; color: var(--cdb-ink); }
.cdb-day p:last-child { font-size: 16px; line-height: 1.55; color: #334155; }

.cd-entry > .cdb-dayone { padding-top: 120px; padding-bottom: 110px; }
.cdb-dayone__body { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cdb-dayone__side { display: flex; flex-direction: column; gap: 20px; }

/* ================= Pricing ================= */
.cd-entry > .cdb-pplans { position: relative; z-index: 2; margin-top: -196px; }
.cdb-pplans .cdb-plans { margin-top: 0; color: var(--cdb-ink); box-shadow: 0 40px 80px -36px rgba(1,60,40,.45); }
.cdb-pplans .cdb-plan { padding: 40px; }
.cdb-pplans .cdb-plan__tag, .cdb-pplans .cdb-plan__usd { color: #64748B; }
.cdb-pplans .cdb-checks { color: #334155; }
.cdb-pplans .cdb-plan--soon, .cdb-pplans .cdb-plan--soon .cdb-plan__tag, .cdb-pplans .cdb-plan--soon .cdb-checks { color: #94A3B8; }
.cdb-plans__note { margin: 22px 0 0; text-align: center; font-size: 15px; color: var(--muted); }

.cd-entry > .cdb-calc { padding-top: 120px; padding-bottom: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 16px; align-items: start; }
.cdb-calc__text { grid-column: 1; margin-bottom: 8px; }
.cdb-calc__ui { display: contents; }
.cdb-stepper { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #DFE7E4; color: var(--cdb-ink); }
.cdb-stepper b { display: block; font-size: 19px; }
.cdb-stepper span { display: block; margin-top: 4px; font-size: 15px; color: #64748B; }
.cdb-stepper__ctl { display: flex; align-items: center; gap: 10px; }
.cdb-stepper button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #DFE7E4; background: #F4FBF8; font: inherit; font-size: 22px; font-weight: 600; color: var(--cdb-ink); cursor: pointer; transition: background .2s; }
.cdb-stepper button:hover { background: #E6F8EE; }
.cdb-stepper button:disabled { opacity: .35; cursor: default; }
.cdb-stepper output { min-width: 56px; text-align: center; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cdb-calc__ui:not(.is-live) .cdb-stepper button { visibility: hidden; }
.cdb-calc__result { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 44px; border-radius: 32px; background: var(--cdb-ink); color: #F1F5F9; }
.cdb-calc__fit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.cdb-calc__fit span:first-child { font-size: 15px; font-weight: 600; color: var(--cdb-light); }
.cdb-calc__fit span:last-child { padding: 6px 12px; border-radius: 999px; background: #16233A; color: var(--cdb-light); font-size: 13px; font-weight: 600; }
.cdb-calc__total { margin-top: 18px; font-size: clamp(3rem, 6vw, 5.25rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.cdb-calc__total small { font-size: 20px; font-weight: 500; letter-spacing: 0; color: #8A9BB0; }
.cdb-calc__usd { margin: 6px 0 20px; font-size: 17px; color: #8A9BB0; }
.cdb-calc__lines { list-style: none; margin: 0; padding: 0; }
.cdb-calc__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(155,245,190,.18); font-size: 17px; color: #CBD5E1; font-variant-numeric: tabular-nums; }
.cdb-calc__lines li span:last-child { color: #fff; font-weight: 600; }
.cdb-calc__scale { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #8A9BB0; }
.cdb-calc__result .wp-block-buttons { margin-top: auto; padding-top: 24px; }
.cdb-calc__result .is-style-fill .wp-block-button__link { background: #fff; color: var(--cdb-ink); }
.cdb-calc__result .is-style-fill .wp-block-button__link::after { background-color: var(--cdb-green); }

.cd-entry > .cdb-compare { padding-bottom: 120px; }
.cdb-cmp { margin-top: 40px; border-radius: 28px; background: #fff; border: 1px solid #DFE7E4; overflow-x: auto; color: var(--cdb-ink); }
.cdb-cmp table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 17px; }
.cdb-cmp th, .cdb-cmp td { padding: 20px 28px; text-align: center; border-top: 1px solid #EDF4F1; }
.cdb-cmp thead th { border-top: 0; font-size: 15px; font-weight: 600; color: #64748B; }
.cdb-cmp thead th span { font-weight: 500; }
.cdb-cmp tbody th { text-align: left; font-weight: 500; }
.cdb-cmp tbody th span { color: #64748B; }
.cdb-cmp td { width: 190px; }
.cdb-cmp .is-popular { background: #E6F8EE; }
.cdb-cmp .is-soon { color: #94A3B8; }
.cdb-cmp__yes { color: var(--cdb-green); font-weight: 700; }
.cdb-cmp .is-soon .cdb-cmp__yes, .cdb-cmp__no { color: #94A3B8; }
.cdb-cmp__more { margin: 22px 0 0; text-align: center; font-size: 16px; }
.cdb-cmp__more a { color: var(--cdb-green); font-weight: 600; }

.cd-entry > .cdb-nosell { padding-top: 100px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.cdb-nosell__text { display: flex; flex-direction: column; gap: 18px; }
.cdb-nosell__text p { font-size: 20px; line-height: 1.6; color: #CBD5E1; }

.cd-entry > .cdb-billing { padding-top: 120px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 80px; align-items: start; }
.cdb-bsteps { list-style: none; counter-reset: cdbb; margin: 32px 0 0; padding: 0; display: grid; gap: 28px; }
.cdb-bsteps li { counter-increment: cdbb; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cdb-bsteps li::before { content: counter(cdbb); grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cdb-green); color: #fff; font-weight: 700; }
.cdb-bsteps strong { font-size: 20px; color: var(--ink); }
.cdb-billing__note { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cdb-billing__note a { color: var(--cdb-green); font-weight: 600; }
.cdb-billing__faq h3 { margin: 0 0 20px; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.035em; font-weight: 700; }
.cdb-billing__faq .wp-block-details { margin: 0; border-top: 1px solid var(--line); }
.cdb-billing__faq .wp-block-details:last-child { border-bottom: 1px solid var(--line); }
.cdb-billing__faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--ink); cursor: pointer; }
.cdb-billing__faq summary::-webkit-details-marker { display: none; }
.cdb-billing__faq summary::after { content: "+"; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #EDF4F1; color: var(--cdb-green); font-size: 20px; transition: transform .3s var(--cdb-spring); }
.cdb-billing__faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.cdb-billing__faq details p { padding: 0 60px 24px 4px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cdb-billing__faq details p a { color: var(--accent); }

.cd-entry > .cdb-talk { margin-bottom: 120px; padding: 36px 40px; display: flex; align-items: center; gap: 32px; background: #fff; border: 1px solid #DFE7E4; border-radius: 24px; color: var(--cdb-ink); }
.cdb-talk__text { flex: 1; min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 28px; row-gap: 6px; align-items: center; }
.cdb-talk__text.cdb-ico::before { grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; border-radius: 20px; background-size: 28px; }
.cdb-talk h3 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cdb-talk p { color: #334155; }
.cdb-talk .wp-block-buttons { margin: 0; }

/* ================= Security ================= */
.cd-entry > .cdb-sfacts { position: relative; z-index: 2; margin-top: -88px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 28px; background: #fff; border: 1px solid #DFE7E4; box-shadow: 0 40px 80px -36px rgba(1,60,40,.4); color: var(--cdb-ink); }
.cdb-sfacts__item { padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.cdb-sfacts__item + .cdb-sfacts__item { border-left: 1px solid #EDF4F1; }
.cdb-sfacts__big { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--cdb-green); }
.cdb-sfacts__item p:last-child { font-size: 16px; line-height: 1.5; color: #334155; }

.cd-entry > .cdb-sdetails { padding-top: 120px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 96px; }
.cdb-sgroup { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.cdb-sgroup__num { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
[class*="cdb-"] .cdb-sgroup__head h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.cdb-sgroup__intro { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.cdb-sgroup__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.cdb-spec { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cdb-spec li { padding: 5px 11px; border-radius: 8px; background: #F4FBF8; border: 1px solid #DFE7E4; font-size: 13px; font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.cdb-slimits { align-self: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 36px; border-radius: 24px; background: #E6F8EE; color: var(--cdb-ink); }
.cdb-slimits__item { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 18px; background: #fff; }
.cdb-slimits__big { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--cdb-green); }
.cdb-slimits__item p:last-child { font-size: 15px; line-height: 1.5; color: #334155; }
.cdb-slimits__note { grid-column: 1 / -1; font-size: 16px; color: #334155; }
.cdb-slimits__note a { color: var(--cdb-green); font-weight: 600; }

.cd-entry > .cdb-report { padding-top: 40px; padding-bottom: 120px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.cdb-report__card, .cdb-report__about { display: flex; flex-direction: column; gap: 16px; padding: 48px; border-radius: 28px; }
.cdb-report__card { background: var(--cdb-ink); color: #F1F5F9; }
.cdb-report__card h2 { color: #F1F5F9; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.cdb-report__card p { font-size: 18px; line-height: 1.6; color: #CBD5E1; }
.cdb-report__card .cdb-report__kind { font-size: 15px; font-weight: 600; color: var(--cdb-light); }
.cdb-report__card .is-style-fill .wp-block-button__link { background: #22DD6A; color: #04210F; }
.cdb-report__card .is-style-fill .wp-block-button__link::after { background-color: #04210F; }
.cdb-report__about { background: #fff; border: 1px solid #DFE7E4; color: var(--cdb-ink); }
.cdb-report__about p { font-size: 18px; line-height: 1.6; color: #334155; }
.cdb-report__about .cdb-report__kind { font-size: 15px; font-weight: 600; color: #64748B; }
.cdb-report__link { margin-top: auto; }
.cdb-report__link a { color: var(--cdb-green); font-weight: 600; text-decoration: none; }
.cdb-report__link a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================= vs the WhatsApp Business app ================= */
.cd-entry > .cdb-need + .cdb-need { padding-top: 40px; }
.cd-entry > .cdb-vsec { padding-top: 110px; padding-bottom: 110px; }
.wp-block-table.cdb-vs { margin: 40px 0 0; border-radius: 28px; background: #fff; border: 1px solid #DFE7E4; overflow-x: auto; color: var(--cdb-ink); }
.wp-block-table.cdb-vs table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.wp-block-table.cdb-vs thead { border-bottom: 0; }
.wp-block-table.cdb-vs th, .wp-block-table.cdb-vs td { padding: 18px 24px; text-align: left; vertical-align: top; border: 0; border-top: 1px solid #EDF4F1; }
.wp-block-table.cdb-vs thead th { border-top: 0; font-size: 15px; font-weight: 600; color: #64748B; }
.wp-block-table.cdb-vs th:first-child { width: 26%; }
.wp-block-table.cdb-vs td:first-child { font-weight: 600; }
.wp-block-table.cdb-vs th:last-child, .wp-block-table.cdb-vs td:last-child { background: #E6F8EE; }
.wp-block-table.cdb-vs thead th:last-child { color: var(--cdb-green); }
.cdb-vs__na { color: #94A3B8; }
.cdb-vs__sources { margin: 18px 0 0; max-width: 900px; font-size: 14px; line-height: 1.6; color: #64748B; }
.cdb-vs__sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cd-entry > .cdb-stay { padding-top: 0; padding-bottom: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.cdb-stay .cdb-lede { margin-top: 14px; }
.cdb-stay__body { display: flex; flex-direction: column; gap: 24px; }
.cdb-stay .cdb-checks { font-size: 18px; gap: 14px; }
.cdb-stay__both { margin: 0; padding: 22px 24px; border-radius: 20px; background: #E6F8EE; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
/* Phones: each row becomes a card (feature, then the app, then ConvoDock), so nothing scrolls sideways. */
@media (max-width: 640px) {
  .wp-block-table.cdb-vs { overflow: visible; border-radius: 20px; }
  .wp-block-table.cdb-vs table { min-width: 0; table-layout: auto; }
  .wp-block-table.cdb-vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wp-block-table.cdb-vs tr { display: block; padding: 18px; border-top: 1px solid #EDF4F1; }
  .wp-block-table.cdb-vs tbody tr:first-child { border-top: 0; }
  .wp-block-table.cdb-vs td { display: block; width: auto; padding: 0; border: 0; background: none; }
  .wp-block-table.cdb-vs td:first-child { margin-bottom: 10px; font-size: 17px; }
  .wp-block-table.cdb-vs td:nth-child(2)::before, .wp-block-table.cdb-vs td:nth-child(3)::before { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #64748B; }
  .wp-block-table.cdb-vs td:nth-child(2)::before { content: "WhatsApp Business app"; }
  .wp-block-table.cdb-vs td:nth-child(3) { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #E6F8EE; }
  .wp-block-table.cdb-vs td:nth-child(3)::before { content: "ConvoDock"; color: var(--cdb-green); }
}

/* ================= For agencies ================= */
.cdb-phero__visual .cdb-frame { margin: 0; }
.cd-entry > .cdb-proof { padding-top: 40px; padding-bottom: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.cdb-proof__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 28px; background: #fff; border: 1px solid #DFE7E4; box-shadow: 0 30px 60px -30px rgba(1,60,40,.25); }
.cdb-proof .cdb-lede a, .cdb-stay__both a { color: var(--cdb-green); font-weight: 600; }
@media (max-width: 640px) {
  .cdb-proof__facts { grid-template-columns: minmax(0, 1fr); }
  .cdb-proof__facts .cdb-sfacts__item { flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
  .cdb-proof__facts .cdb-sfacts__item + .cdb-sfacts__item { border-left: 0; border-top: 1px solid #EDF4F1; }
  .cdb-proof__facts .cdb-sfacts__big { flex: none; min-width: 52px; }
}

/* ================= Use-case pages: short answer, notes, steps ================= */
.cd-entry > .cdb-tldr { padding-top: 8px; padding-bottom: 8px; }
.cdb-tldr p { margin: 0; padding: 26px 30px; border-radius: 22px; background: #E6F8EE; border: 1px solid #CFF1DC; font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.cdb-tldr strong { color: var(--cdb-green); }
.cdb-need > .cdb-need__note { grid-column: 1 / -1; margin: 20px 0 0; padding: 22px 24px; border-radius: 20px; background: #E6F8EE; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cdb-stay__body .cdb-bsteps { margin-top: 0; }
.cdb-tile a { color: var(--cdb-green); font-weight: 600; }

/* ================= /scan: follow links ================= */
.cdb-phero__fine { margin: -8px 0 0; font-size: 15px; color: #475569; }
.cdb-social-links { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cdb-social-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; border: 1px solid #DFE7E4; color: var(--cdb-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.cdb-social-links a:hover { border-color: var(--cdb-green); color: var(--cdb-green); }
.cdb-social-links svg { flex: none; }

/* ================= smaller screens ================= */
@media (max-width: 1100px) {
  .cd-entry > .cdb-phero, .cd-entry > .cdb-phero--media { grid-template-columns: minmax(0, 1fr); padding-top: 150px; gap: 56px; }
  .cdb-phero__visual { max-width: 640px; width: 100%; }
  .cdb-phero--setup .cdb-phero__visual, .cdb-phero--layers .cdb-phero__visual { max-width: 540px; }
  .cdb-acct__body, .cdb-team__body, .cdb-dayone__body { grid-template-columns: minmax(0, 1fr); }
  .cdb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdb-tile--wide { grid-column: 1 / -1; }
  /* Two columns: a last tile left on its own takes the whole row (the wide tile comes first). */
  .cdb-bento > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .cd-entry > .cdb-calc { grid-template-columns: minmax(0, 1fr); }
  .cdb-calc__result { grid-column: 1; grid-row: auto; }
  .cd-entry > .cdb-billing { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .cdb-sgroup { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cd-entry > .cdb-sfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdb-sfacts__item + .cdb-sfacts__item { border-left: 0; }
  .cdb-sfacts__item:nth-child(even) { border-left: 1px solid #EDF4F1; }
  .cdb-sfacts__item:nth-child(n+3) { border-top: 1px solid #EDF4F1; }
}
@media (max-width: 900px) {
  .cdb-callout { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: max-content; max-width: 100%; margin: 12px 0 0; white-space: normal; }
  .cdb-phero--media .cdb-callout--clock, .cdb-acct__shot .cdb-callout:nth-of-type(3) { display: none; }
  .cdb-setup { transform: none; }
  .cd-entry > .cdb-need { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .cdb-cards3 { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .cd-entry > .cdb-stay { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 80px; }
  .cd-entry > .cdb-proof { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 80px; }
  .cd-entry > .cdb-vsec { padding-top: 80px; padding-bottom: 80px; }
  .cdb-five__step { grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 64px; }
  .cdb-five__step::before { justify-self: start; width: 44px; height: 44px; font-size: 16px; }
  .cdb-five__step::after { left: 21px; top: 60px; }
  .cdb-five__panel { grid-column: 2; margin-top: 24px; min-height: 0; padding: 24px; }
  .cdb-days__line { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .cdb-days__line::before, .cdb-days__line::after { display: none; }
  .cdb-day { padding: 0 0 0 36px; }
  .cdb-day::before { top: 2px; animation: none; background: var(--cdb-green); border-color: var(--cdb-green); }
  .cd-entry > .cdb-nosell { grid-template-columns: minmax(0, 1fr); gap: 24px; border-radius: 32px; margin-inline: 12px; padding-top: 72px; padding-bottom: 72px; }
  .cd-entry > .cdb-acct { border-radius: 32px; margin-inline: 12px; padding-top: 80px; padding-bottom: 80px; }
  .cd-entry > .cdb-report { grid-template-columns: minmax(0, 1fr); }
  .cdb-report__card, .cdb-report__about { padding: 32px; }
  .cdb-slimits { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .cd-entry > .cdb-talk { flex-direction: column; align-items: flex-start; padding: 28px; }
}
@media (max-width: 640px) {
  .cd-entry > .cdb-phero { padding-top: 124px; padding-bottom: 72px; gap: 40px; }
  .cd-entry > .cdb-phero--center { padding-bottom: 220px; }
  .cd-entry > .cdb-phero--layers { padding-bottom: 140px; }
  .cdb-phero__note { justify-content: flex-start; }
  .cdb-bento, .cdb-sgroup__cards, .cd-entry > .cdb-sfacts { grid-template-columns: minmax(0, 1fr); }
  .cdb-sfacts__item:nth-child(even) { border-left: 0; }
  .cdb-sfacts__item + .cdb-sfacts__item { border-top: 1px solid #EDF4F1; }
  .cdb-tile, .cdb-tile--wide, .cdb-roles { padding: 24px; }
  .cdb-tile--wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cdb-wires { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cdb-wires__in { display: flex; flex-wrap: wrap; gap: 8px; }
  .cdb-wires__in li { height: 38px; }
  .cdb-wires__in li::after { display: none; }
  .cdb-tile--row > :not(.cdb-tile__text) { margin-left: 0; }
  .cdb-roles__list::before { display: none; }
  .cdb-roles__list li { flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; border-top: 1px solid #EDF4F1; }
  .cdb-five__step { grid-template-columns: minmax(0, 1fr); }
  .cdb-five__step::before { margin-bottom: 18px; }
  .cdb-five__step::after { display: none; }
  .cdb-five__panel { grid-column: 1; }
  .cdb-qrpanel { grid-template-columns: minmax(0, 1fr); }
  .cdb-qrpanel::before { grid-row: auto; width: 150px; height: 150px; background-size: 124px 3px, 118px; margin-bottom: 8px; }
  @keyframes cdb-sweep { 0%, 100% { background-position: center 12px, center; } 50% { background-position: center 135px, center; } }
  .cdb-qrpanel > * { grid-column: 1; }
  .cdb-layers li { margin-left: 0 !important; flex-wrap: wrap; padding: 14px 16px; }
  .cdb-layers strong { width: auto; }
  .cdb-phero--layers .cdb-phero__visual { padding: 16px; }
  .cd-entry > .cdb-pplans { margin-top: -170px; }
  .cdb-pplans .cdb-plan { padding: 28px; }
  .cdb-calc__result { padding: 28px; }
  .cdb-stepper output { font-size: 32px; min-width: 44px; }
  .cdb-cmp table { min-width: 520px; font-size: 15px; }
  .cdb-cmp th, .cdb-cmp td { padding: 14px 12px; }
  .cdb-cmp tbody th { min-width: 150px; }
  .cdb-cmp td { width: auto; min-width: 84px; }
  .cdb-billing__faq details p { padding-right: 4px; }
  .cdb-talk__text { grid-template-columns: minmax(0, 1fr); }
  .cdb-talk__text.cdb-ico::before { grid-row: auto; margin-bottom: 12px; }
  .cd-entry > .cdb-days { padding: 48px 24px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .cdb-callout, .cdb-callout::before, .cdb-ico--live::before, .cdb-swap li, .cdb-cascade > *, .cdb-phero__note::before,
  .cdb-setup__status::before, .cdb-setup__list li::before, .cdb-setup__list::after, .cdb-layers li,
  .cdb-wires__in li::before, .cdb-wires__in li::after, .cdb-upload::after, .cdb-sched::after,
  .cdb-acct__item h3, .cdb-acct__item::after, .cdb-roles__list::before,
  .cdb-five__step::before, .cdb-five__step::after, .cdb-qrpanel::before, .cdb-replied li:last-child, .cdb-replied li:last-child .cdb-row__label,
  .cdb-days__line::before, .cdb-days__line::after, .cdb-day::before { animation: none !important; }
  .cdb-swap li:nth-child(2), .cdb-wires__in li::after, .cdb-days__line::after, .cdb-roles__list::before { display: none; }
  .cdb-setup__list li::before { background: #017F4F; border-color: #017F4F; color: #fff; }
  .cdb-setup__list::after { background-size: 100% 100%, auto; }
  .cdb-upload::after, .cdb-days__line::before { background-size: 100% 100%, auto; }
  .cdb-day::before { background: #017F4F; border-color: #017F4F; }
}

/* ================= /guides: the hub and the how-to guides (inc/guides.php) ================= */
/* A guide's header: one column, shorter than a product hero, the question as the H1. */
.cd-entry > .cdb-phero--guide, .cd-entry > .cdb-phero--guides { grid-template-columns: minmax(0, 1fr); padding-top: 160px; padding-bottom: 56px; }
.cdb-phero--guide .cdb-phero__text { max-width: 820px; gap: 18px; }
.cdb-phero--guide .cdb-phero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; }
.cdb-crumbs { margin: 0; font-size: 15px; font-weight: 600; color: #475569; }
.cdb-crumbs a { color: var(--cdb-green); text-decoration: none; }
.cdb-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cdb-guide__meta { margin: 0; font-size: 15px; color: #64748B; }

/* The reading column */
.cd-entry > .cdb-guide { padding-top: 56px; padding-bottom: 88px; }
.cdb-guide__body { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; color: var(--cdb-ink); }
.cdb-guide__body p, .cdb-guide__body li { font-size: 18px; line-height: 1.7; color: #334155; }
.cdb-guide__body p { margin: 0; }
.cdb-guide__body strong { color: var(--cdb-ink); }
.cdb-guide__body a { color: var(--cdb-green); text-underline-offset: 3px; }
.cdb-guide__body .cdb-guide__answer { padding: 24px 28px; border-radius: 20px; background: #E6F8EE; border: 1px solid #CFF1DC; font-size: 19px; color: var(--ink-2); }
.cdb-guide__body .cdb-guide__answer strong { color: var(--cdb-green); }
.cdb-guide__toc-box { margin: 0; padding: 20px 24px; border: 1px solid #DFE7E4; border-radius: 18px; background: #fff; }
.cdb-guide__body .cdb-guide__toc-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.cdb-guide__body .cdb-guide__toc { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.cdb-guide__body .cdb-guide__toc li { font-size: 16px; line-height: 1.6; }
.cdb-guide__toc a { text-decoration: none; font-weight: 600; }
.cdb-guide__toc a:hover { text-decoration: underline; }
.cdb-guide__part { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; scroll-margin-top: 110px; }
.cdb-guide__part h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; color: var(--cdb-ink); }
.cdb-guide__part h3 { margin: 10px 0 0; font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; color: var(--cdb-ink); }
.cdb-guide__part ul, .cdb-guide__part ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.cdb-guide__body .cdb-guide__steps { list-style: none; padding: 0; counter-reset: cdbgs; gap: 12px; }
.cdb-guide__steps li { counter-increment: cdbgs; position: relative; padding-left: 46px; }
.cdb-guide__steps li::before { content: counter(cdbgs); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%; background: #E6F8EE; color: var(--cdb-green); font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.cdb-guide__body .cdb-guide__note { padding: 16px 20px; border-radius: 14px; background: #F4FBF8; border: 1px solid #DFE7E4; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.cdb-guide__body .cdb-guide__note--warn { background: #FEF7EC; border-color: #F6DDB4; }

/* "For teams": the one dark block in the guide, in the site's ink */
.cdb-guide__team { margin-top: 6px; padding: 32px; border-radius: 26px; background: var(--cdb-ink); display: flex; flex-direction: column; gap: 16px; }
.cdb-guide__part .cdb-guide__team h3 { margin: 0; font-size: 26px; color: #fff; }
.cdb-guide__body .cdb-guide__team p, .cdb-guide__body .cdb-guide__team li { color: #CBD5E1; }
.cdb-guide__body .cdb-guide__team strong { color: #fff; }
.cdb-guide__body .cdb-guide__team-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cdb-light); }
.cdb-guide__team-list li::marker { color: var(--cdb-bright); }
.cdb-guide__team .wp-block-buttons { margin-top: 6px; }
.cdb-guide__team .is-style-fill .wp-block-button__link { background: #fff; color: var(--cdb-ink); }
.cdb-guide__team .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cdb-guide__team .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.1); }
.cdb-guide__body .cdb-guide__team-fine { margin-top: -6px; font-size: 14px; color: #94A3B8; }
.cdb-guide__body .cdb-guide__sources { margin-top: 12px; padding-top: 20px; border-top: 1px solid #DFE7E4; font-size: 14px; line-height: 1.6; color: #64748B; }
.cdb-guide__body .cdb-guide__sources a { color: inherit; text-decoration: underline; }

/* The hub */
.cd-entry > .cdb-guides { padding-top: 56px; padding-bottom: 96px; }
.cdb-guides__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.cdb-guidecard { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid #DFE7E4; display: flex; flex-direction: column; gap: 10px; }
.cdb-guidecard__topic { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cdb-green); }
.cdb-guidecard h3 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.cdb-guidecard h3 a { color: var(--cdb-ink); text-decoration: none; }
.cdb-guidecard h3 a:hover { color: var(--cdb-green); }
.cdb-guidecard p { margin: 0; font-size: 16px; line-height: 1.55; color: #334155; }

@media (max-width: 640px) {
  .cd-entry > .cdb-phero--guide, .cd-entry > .cdb-phero--guides { padding-top: 128px; padding-bottom: 40px; }
  .cd-entry > .cdb-guide { padding-top: 36px; }
  .cdb-guide__body p, .cdb-guide__body li { font-size: 17px; }
  .cdb-guide__body .cdb-guide__answer { padding: 20px; font-size: 17px; }
  .cdb-guide__team { padding: 24px; border-radius: 20px; }
}

/* "More guides" at the end of a guide */
.cdb-guide__more-box { margin-top: 8px; padding: 20px 24px; border-radius: 18px; background: #F4FBF8; border: 1px solid #DFE7E4; }
.cdb-guide__body .cdb-guide__more-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.cdb-guide__body .cdb-guide__more { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.cdb-guide__body .cdb-guide__more li { font-size: 16px; line-height: 1.6; }
.cdb-guide__more a { font-weight: 600; text-decoration: none; }
.cdb-guide__more a:hover { text-decoration: underline; }

/* A comparison table inside a guide: scrolls sideways on a phone. The
   .wp-block-table prefix beats core's default table borders. */
.cdb-guide__body .wp-block-table.cdb-guide__table { margin: 0; overflow-x: auto; border: 1px solid #DFE7E4; border-radius: 16px; background: #fff; }
.wp-block-table.cdb-guide__table table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.wp-block-table.cdb-guide__table thead { border: 0; }
.wp-block-table.cdb-guide__table th, .wp-block-table.cdb-guide__table td { padding: 12px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid #EDF4F1; color: #334155; }
.wp-block-table.cdb-guide__table thead th { background: #F4FBF8; color: var(--cdb-ink); font-weight: 700; border-bottom: 1px solid #DFE7E4; }
.wp-block-table.cdb-guide__table tr:last-child td { border-bottom: 0; }
.wp-block-table.cdb-guide__table td:first-child { min-width: 128px; color: var(--cdb-ink); }