@charset "UTF-8";

:root{
  /* ── Brand colours ── */
  --dt-brand: #0d838d;
  --dt-brand-light: #52bac5;
  --dt-brand-dark: #0a6b74;
  --dt-brand-glow: rgba(13, 131, 141, 0.28);
  --dt-amber: #ffbe2b;
  --dt-amber-dark: #e6a800;
  --dt-amber-glow: rgba(255, 190, 43, 0.35);

  /* ── Neutrals ── */
  --dt-navy: #2e3e58;
  --dt-dark: #1a2333;
  --dt-dark2: #0f1720;
  --dt-white: #ffffff;
  --dt-off: #ebf1f8;
  --dt-off2: #dde6f0;
  --dt-border: #cdd9e8;
  --dt-text: #1e2d3d;
  --dt-text-2: #4a6078;
  --dt-text-3: #7f96ae;

  /* ── Typography ── */
  --dt-font: "Inter", system-ui, -apple-system, sans-serif;
  --dt-font-h: "Plus Jakarta Sans", "Inter", sans-serif;

  /* ── Shape & motion ── */
  --dt-r: 14px;
  --dt-r-lg: 22px;
  --dt-r-xl: 30px;
  --dt-sh: 0 2px 16px rgba(30, 45, 61, 0.07);
  --dt-sh-lg: 0 12px 48px rgba(30, 45, 61, 0.13);
  --dt-sh-xl: 0 24px 80px rgba(30, 45, 61, 0.18);
  --dt-max: 1180px;
  --dt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dt-t: 0.28s var(--dt-ease);
}
.dtPageContainer{
  font-family: var(--dt-font);
  font-size: 16px;
  color: var(--dt-text);
  -webkit-font-smoothing: antialiased;
}
.dtPageContainer *,
.dtPageContainer *::before,
.dtPageContainer *::after{
  box-sizing: border-box;
}
.dtPageContainer img{
  max-width: 100%;
}

/* ─── INNER CONTAINERS ─── */
.dtHeroSection,
.dtFvtSectionInner,
.dtHiwSectionInner,
.dtPfSectionInner,
.dtDfdSectionInner,
.dtCapSectionInner,
.dtExSectionInner,
.dtCasSectionInner,
.dtListSectionInner,
.dtRevSectionInner,
.dtGarSectionInner,
.dtFeatSectionInner,
.dtPrsSectionInner,
.dtSupSectionInner{
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ═══════════════════════════════════════════
   HERO  — dark navy, teal glow, amber CTA
═══════════════════════════════════════════ */
.dtHeroWrapper{
  background:
    radial-gradient(ellipse 120% 90% at 70% -10%, #1b2c44 0%, transparent 60%),
    linear-gradient(155deg, var(--dt-dark2) 0%, var(--dt-dark) 48%, #131f34 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ── Hero light layer ──────────────────────────────────────────
   Four stacked pieces, each doing one job: a fine dot grid for
   texture, a large rule grid for depth, drifting orbs for colour,
   and a beam along the top edge that reads as the light source.
   All decorative, all pointer-transparent.
────────────────────────────────────────────────────────────── */
.dtHeroFx{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.dtHeroFx > span{
  position: absolute;
  display: block;
}

/* fine teal dots, faded out towards the edges */
.dtHeroGridDots{
  inset: -8%;
  background-image: radial-gradient(
    circle,
    rgba(82, 186, 197, 0.3) 1.2px,
    transparent 1.2px
  );
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(
    ellipse 82% 76% at 50% 38%,
    #000 38%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 82% 76% at 50% 38%,
    #000 38%,
    transparent 84%
  );
}

/* wide rule grid, fading downwards */
.dtHeroGridLines{
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 136px 136px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}

/* drifting colour orbs — teal twice, amber once to echo the CTA */
.dtHeroOrb{
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.dtHeroOrb1{
  width: 560px;
  height: 560px;
  top: -190px;
  left: -130px;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.42) 0%, transparent 70%);
  animation: dtOrbDrift 13s ease-in-out infinite;
}
.dtHeroOrb3{
  width: 360px;
  height: 360px;
  top: 26%;
  right: -110px;
  background: radial-gradient(circle, rgba(82, 186, 197, 0.26) 0%, transparent 70%);
  animation: dtOrbDrift 11s ease-in-out 2s infinite;
}

@keyframes dtOrbDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(34px, -22px) scale(1.07);
  }
  66% {
    transform: translate(-22px, 18px) scale(0.95);
  }
}

/* hairline of light along the very top, with a soft spill below it */
.dtHeroBeam{
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(82, 186, 197, 0.5) 26%,
    rgba(160, 234, 243, 0.62) 52%,
    transparent 100%
  );
}
.dtHeroBeam::after{
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 200px;
  background: radial-gradient(
    ellipse at top,
    rgba(82, 186, 197, 0.15) 0%,
    transparent 70%
  );
}
.dtHeroSection{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 104px;
  padding-bottom: 116px;
  position: relative;
  z-index: 2;
}

/* Badge */
.dtHeroBadge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(13, 131, 141, 0.16);
  border: 1px solid rgba(13, 131, 141, 0.38);
  color: #6dd4dc;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.dtHeroBadgeDot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-brand-light);
  box-shadow: 0 0 8px var(--dt-brand-light);
  animation: dtPulse 2s infinite;
}

@keyframes dtPulse {
  0%,
  100% {
    box-shadow: 0 0 6px var(--dt-brand-light);
  }
  50% {
    box-shadow: 0 0 14px var(--dt-brand-light);
  }
}

/* Title */
.dtHeroSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--dt-white);
  margin-bottom: 22px;
  text-wrap: balance;
}
.dtHeroSectionTitle span{
  background: linear-gradient(
    90deg,
    var(--dt-brand-light) 0%,
    #a8eef7 42%,
    var(--dt-brand-light) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: dtTitleShine 7s linear 1.2s infinite;
}

@keyframes dtTitleShine {
  to {
    background-position: 220% center;
  }
}
.dtHeroSectionSubtitle{
  font-size: 18px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  margin-bottom: 38px;
  max-width: 480px;
}
.dtHeroCtaRow{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 40px;
}

/* ── CTA Buttons — amber primary, ghost secondary ── */
.dtBtnPrimary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dt-amber);
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 40px;
  box-shadow: 0 6px 24px var(--dt-amber-glow);
  transition: var(--dt-t);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.dtBtnPrimary:hover,
.dtBtnPrimary:focus{
  background: var(--dt-amber-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255, 190, 43, 0.5);
  color: #1a1a1a;
  text-decoration: none;
}
.dtBtnPrimary svg{
  width: 16px;
  height: 16px;
}
.dtBtnGhost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 40px;
  transition: var(--dt-t);
  white-space: nowrap;
  text-decoration: none;
}
.dtBtnGhost:hover,
.dtBtnGhost:focus{
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--dt-white);
  text-decoration: none;
}
.dtBtnGhost svg{
  width: 16px;
  height: 16px;
}

/* "run it in your browser" link - sits under the hero buttons */
.dtHeroTryLink{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  padding: 9px 18px 9px 12px;
  margin-bottom: 30px;
  transition: var(--dt-t);
}
.dtHeroTryLink:hover,
.dtHeroTryLink:focus{
  color: var(--dt-white);
  border-color: rgba(82, 186, 197, 0.5);
  background: rgba(13, 131, 141, 0.16);
  text-decoration: none;
}
.dtHeroTryIcon{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(82, 186, 197, 0.18);
  border: 1px solid rgba(82, 186, 197, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dtHeroTryIcon svg{
  width: 13px;
  height: 13px;
  color: var(--dt-brand-light);
}
.dtHeroTryLink b{
  font-weight: 700;
  color: var(--dt-white);
}
.dtHeroTryLink span{
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

/* same idea inside the Free plan card of the matrix */
.dtMtxTryLink{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dt-brand-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(82, 186, 197, 0.35);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: var(--dt-t);
}
.dtMtxTryLink:hover,
.dtMtxTryLink:focus{
  color: var(--dt-white);
  border-bottom-color: var(--dt-white);
  text-decoration: none;
}
.dtMtxTryLink svg{
  width: 13px;
  height: 13px;
}

/* ── Stats strip ── */
.dtHeroStats{
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 18px 8px;
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
}
.dtHeroStat{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding-inline: 6px;
}
.dtHeroStatNum{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--dt-font-h);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dt-white);
  font-variant-numeric: tabular-nums;
}

/* a word-sized stat sits a notch smaller than the numeric ones */
.dtHeroStatWord{
  font-size: 20px;
  letter-spacing: -0.01em;
}
.dtHeroStatStar{
  width: 17px;
  height: 17px;
  fill: var(--dt-amber);
  flex-shrink: 0;
}
.dtHeroStatNum em{
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--dt-brand-light);
}
.dtHeroStatLabel{
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.3;
}
.dtHeroStatDiv{
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.14) 25%,
    rgba(255, 255, 255, 0.14) 75%,
    transparent
  );
  flex-shrink: 0;
}

/* ── Capability pills ── */
.dtHeroPills{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 560px;
}
.dtHeroPill{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 6px 11px;
  transition: var(--dt-t);
}
.dtHeroPill:hover{
  color: var(--dt-brand-light);
  border-color: rgba(13, 131, 141, 0.45);
  background: rgba(13, 131, 141, 0.12);
}

/* ── Hero: abstract shapes + tablet (right column) ── */
.dtHeroSectionRight{
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
  /* grid children default to min-width:auto, so a long headline in the left
     column can squeeze this one to nothing before the breakpoint hits */
  min-width: 0;
}
.dtHeroSectionLeft{
  min-width: 0;
}

/* soft geometry behind the device, in the band's own palette */
.dtHeroShapes{
  position: absolute;
  inset: -18% -12%;
  pointer-events: none;
  z-index: 0;
}
.dtHeroShape{
  position: absolute;
  display: block;
}

/* the slab: a tilted panel, echoing the navy plate the old artwork had */
.dtHeroShapeSlab{
  top: 6%;
  right: -4%;
  width: 74%;
  height: 76%;
  border-radius: 46px;
  background: linear-gradient(155deg, rgba(46, 62, 88, 0.55) 0%, rgba(26, 35, 51, 0.2) 100%);
  transform: rotate(-11deg);
  filter: blur(0.5px);
}

/* ── the tablet ── */
.dtHeroTablet{
  position: relative;
  z-index: 1;
  /* bezel and corners scale with the device, so the frame keeps its
     proportions instead of looking chunky on a narrow screen */
  padding: clamp(7px, 2.3%, 13px);
  border-radius: clamp(18px, 6%, 34px);
  background: linear-gradient(150deg, #3a4048 0%, #16181c 22%, #0d0f12 60%, #23272d 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(0, 0, 0, 0.6);
}
.dtHeroTabletScreen{
  position: relative;
  border-radius: clamp(11px, 4%, 22px);
  overflow: hidden;
  background: #05070a;
  aspect-ratio: 800 / 560;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.dtHeroTabletVideo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the video is the content here - no chrome, no interaction */
  pointer-events: none;
}

/* side keys, as on the reference device */
.dtHeroTabletKeys{
  position: absolute;
  top: 22%;
  right: -3px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dtHeroTabletKeys i{
  display: block;
  width: 3px;
  height: 30px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #0d0f12, #2b3038);
}
.dtHeroTabletKeys i:first-child{
  height: 46px;
}

/* ── Hero entrance: one staggered sequence, nothing else moves ── */

@keyframes dtHeroRise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dtHeroRiseShot {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dtHeroBadge{
  animation: dtHeroRise 0.7s var(--dt-ease) both;
}
.dtHeroSectionTitle{
  animation: dtHeroRise 0.7s var(--dt-ease) 0.08s both;
}
.dtHeroSectionSubtitle{
  animation: dtHeroRise 0.7s var(--dt-ease) 0.16s both;
}
.dtHeroCtaRow{
  animation: dtHeroRise 0.7s var(--dt-ease) 0.24s both;
}
.dtHeroStats{
  animation: dtHeroRise 0.7s var(--dt-ease) 0.32s both;
}
.dtHeroPills{
  animation: dtHeroRise 0.7s var(--dt-ease) 0.4s both;
}
.dtHeroSectionRight{
  animation: dtHeroRiseShot 0.9s var(--dt-ease) 0.18s both;
}

/* ═══════════════════════════════════════════
   SECTION LABEL (shared)
═══════════════════════════════════════════ */
.dtSectionLabel{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dt-brand);
  margin-bottom: 10px;
}
.dtSectionLabel::before{
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   FVT – 4-col features  [white bg]
═══════════════════════════════════════════ */
.dtFvtSection{
  padding: 80px 0;
  background: var(--dt-white);
}
.dtFvtSectionR1{
  font-size: 17px;
  color: var(--dt-text-2);
  line-height: 1.7;
  border-left: 3px solid var(--dt-brand);
  padding-left: 18px;
  margin-bottom: 52px;
  max-width: 820px;
}
.dtFvtSectionR1 p{
  margin: 0;
}
.dtFvtSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtFvtSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 680px;
}
.dtFvtSectionCols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dtFvtSectionCol{
  background: var(--dt-off);
  border-radius: var(--dt-r-lg);
  padding: 28px 24px 24px;
  border: 1.5px solid transparent;
  transition: var(--dt-t);
}
.dtFvtSectionCol:hover{
  border-color: rgba(13, 131, 141, 0.28);
  background: var(--dt-white);
  box-shadow: var(--dt-sh-lg);
  transform: translateY(-3px);
}
.dtFvtSectionColIcon{
  width: 52px;
  height: 52px;
  background: rgba(13, 131, 141, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1.5px solid rgba(13, 131, 141, 0.15);
  transition: var(--dt-t);
}
.dtFvtSectionCol:hover .dtFvtSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.32);
}
.dtFvtSectionColIcon svg{
  width: 26px;
  height: 26px;
  color: var(--dt-brand);
}
.dtFvtSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--dt-navy);
  margin-bottom: 8px;
}
.dtFvtSectionColSubtitle{
  font-size: 13.5px;
  color: var(--dt-text-2);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   HIW – How it works  [dark bg]
═══════════════════════════════════════════ */
.dtHiwSection{
  background: linear-gradient(160deg, var(--dt-dark) 0%, var(--dt-dark2) 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.dtHiwSection::before{
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.12) 0%, transparent 70%);
}

/* Ghost mosaic wireframe, laid down in isometric projection - the layout the
   steps are building, drawn as a faint plan behind them.
   Three nested jobs: the frame clips and fades, the plane does the parallax
   (it carries no transform, so the drift is not flattened by the tilt), and
   the SVG carries the isometric rotation. */
.dtHiwMosaic{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 95% 120% at 50% 8%,
    #000 12%,
    rgba(0, 0, 0, 0.5) 52%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 95% 120% at 50% 8%,
    #000 12%,
    rgba(0, 0, 0, 0.5) 52%,
    transparent 88%
  );
}
.dtHiwMosaicPlane{
  position: absolute;
  /* Headroom above and below so the drift never uncovers an edge. The plane is
     (1 + 2h) tall, so an amplitude a of its own height moves a(1+2h) of the
     section - keep a <= h / (1 + 2h). At h = 48% that allows just under 25%. */
  inset: -48% 0;
  display: block;
  will-change: translate;
}
.dtHiwMosaicSvg{
  display: block;
  width: 100%;
  height: 100%;
  /* no perspective on the ancestor, so rotateX/rotateZ give a parallel
     (isometric) projection rather than a vanishing-point one */
  transform: rotateX(57deg) rotateZ(-41deg) scale(1.45);
  transform-origin: 50% 38%;
}

/* ═══════════════════════════════════════════
   MTX – Free vs Pro feature matrix
   Dark scoreboard band + white table card that
   overlaps it, so the section ends on white and
   flows straight into the pricing block.
═══════════════════════════════════════════ */
.dtHiwSectionInner{
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   MTX – Free vs Pro feature matrix
   Dark scoreboard band + white table card that
   overlaps it, so the section ends on white and
   flows straight into the pricing block.
═══════════════════════════════════════════ */
.dtHiwSection .dtSectionLabel{
  color: rgba(255, 255, 255, 0.5);
}
.dtHiwSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtHiwSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: 52px;
}
.dtHiwSectionSubtitle p{
  margin: 0;
}
.dtHiwSectionCols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dtHiwSectionCol{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--dt-r-lg);
  padding: 30px 22px;
  transition: var(--dt-t);
}
.dtHiwSectionCol:hover{
  background: rgba(13, 131, 141, 0.12);
  border-color: rgba(13, 131, 141, 0.35);
  transform: translateY(-3px);
}

/* one head row per step: index, then the icon it belongs to */
.dtHiwStepHead{
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.dtHiwStepNum{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--dt-font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--dt-brand-light);
  background: rgba(13, 131, 141, 0.14);
  border: 1.5px solid rgba(82, 186, 197, 0.4);
  transition: var(--dt-t);
}
.dtHiwSectionCol:hover .dtHiwStepNum{
  background: var(--dt-brand);
  border-color: var(--dt-brand-light);
  color: var(--dt-white);
}
.dtHiwSectionColIcon{
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: var(--dt-t);
  flex-shrink: 0;
}
.dtHiwSectionCol:hover .dtHiwSectionColIcon{
  background: rgba(13, 131, 141, 0.22);
  border-color: rgba(13, 131, 141, 0.45);
}
.dtHiwSectionColIcon svg{
  width: 25px;
  height: 25px;
  color: var(--dt-brand-light);
}
.dtHiwSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--dt-white);
  margin-bottom: 8px;
}
.dtHiwSectionColSubtitle{
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   PF – "Perfect for" cards  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.dtPfSection{
  background: var(--dt-off);
  padding: 88px 0;
}
.dtPfSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtPfSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 640px;
}
.dtPfSectionSubtitle p{
  margin: 0;
}
.dtPfSectionSubtitle2{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dt-text-3);
  margin-bottom: 32px;
}
.dtPfSectionSubtitle3{
  margin-top: 40px;
  font-size: 16px;
  font-weight: 600;
  color: var(--dt-text-3);
  text-align: center;
}
.dtPfGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.dtPfCard{
  background: var(--dt-white);
  border-radius: var(--dt-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1.5px solid transparent;
  box-shadow: var(--dt-sh);
  transition: var(--dt-t);
}
.dtPfCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--dt-sh-lg);
  border-color: rgba(13, 131, 141, 0.22);
}
.dtPfCardFeat{
  grid-row: 1 / 3;
  background: linear-gradient(160deg, #0d2040 0%, #1a2333 100%);
  border-color: rgba(13, 131, 141, 0.25);
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
}
.dtPfCardFeat::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dt-brand), var(--dt-brand-dark));
}
.dtPfCardFeat:hover{
  border-color: rgba(13, 131, 141, 0.5);
  box-shadow: 0 16px 48px rgba(13, 131, 141, 0.22);
}
.dtPfCardFeat .dtPfCardTitle{
  color: var(--dt-white);
  font-size: 20px;
}
.dtPfCardFeat .dtPfCardText{
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
}
.dtPfCardIcon{
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px var(--dt-brand-glow);
}
.dtPfCardIcon svg{
  width: 32px;
  height: 32px;
  color: #fff;
}
.dtPfCardIconSm{
  width: 54px;
  height: 54px;
  background: rgba(13, 131, 141, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(13, 131, 141, 0.14);
  transition: var(--dt-t);
}
.dtPfCard:hover .dtPfCardIconSm{
  background: rgba(13, 131, 141, 0.16);
  border-color: rgba(13, 131, 141, 0.28);
}
.dtPfCardIconSm svg{
  width: 28px;
  height: 28px;
  color: var(--dt-brand);
}
.dtPfCardTitle{
  font-size: 16px;
  font-weight: 700;
  color: var(--dt-navy);
}
.dtPfCardText{
  font-size: 14px;
  color: var(--dt-text-2);
  line-height: 1.65;
  flex: 1;
}
.dtPfCardTag{
  display: inline-flex;
  align-self: flex-start;
  background: rgba(13, 131, 141, 0.14);
  border: 1px solid rgba(13, 131, 141, 0.28);
  color: var(--dt-brand-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}

/* ═══════════════════════════════════════════
   DFD – Developer friendly  [white bg]
═══════════════════════════════════════════ */
.dtDfdSection{
  background: var(--dt-white);
  padding: 80px 0;
}
.dtDfdSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.dtDfdSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  margin-bottom: 40px;
}
.dtDfdSectionCols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.dtDfdSectionCol{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--dt-off);
  border-radius: var(--dt-r);
  padding: 18px 20px;
  border: 1.5px solid var(--dt-border);
  transition: var(--dt-t);
}
.dtDfdSectionCol:hover{
  border-color: var(--dt-brand);
  background: rgba(13, 131, 141, 0.06);
}
.dtDfdSectionColIcon{
  width: 38px;
  height: 38px;
  background: rgba(13, 131, 141, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(13, 131, 141, 0.15);
  transition: var(--dt-t);
}
.dtDfdSectionCol:hover .dtDfdSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.3);
}
.dtDfdSectionColIcon svg{
  width: 20px;
  height: 20px;
  color: var(--dt-brand);
}
.dtDfdSectionColSubtitle{
  font-size: 14px;
  font-weight: 600;
  color: var(--dt-text);
}
.dtDfdSectionSubtitle2{
  margin-top: 32px;
  font-size: 15px;
  color: var(--dt-text-3);
  font-style: italic;
}

/* ═══════════════════════════════════════════
   CAP – Capabilities banner  [dark navy]
═══════════════════════════════════════════ */
.dtCapSection{
  /* same two-layer treatment as the hero: a radial lift over a diagonal ramp */
  background:
    radial-gradient(ellipse 110% 140% at 70% -20%, #24395c 0%, transparent 62%),
    linear-gradient(155deg, var(--dt-navy) 0%, #1d2b40 52%, var(--dt-dark) 100%);
  padding: 74px 0;
  text-align: center;
}
.dtCapSection .dtSectionLabel{
  display: inline-flex;
  color: var(--dt-brand-light);
}
.dtCapSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtCapSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 700px;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════
   EX – Layout / examples showcase  [#ebf1f8 bg]
   The one section that shows the product itself.
═══════════════════════════════════════════ */
.dtExSection{
  background: var(--dt-off);
  padding: 88px 0;
}
.dtExSectionHeader{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.dtExSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtExSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  max-width: 620px;
}
.dtExSectionHeader .dtBtnLink{
  white-space: nowrap;
  padding-bottom: 6px;
}
.dtBtnLink{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dt-brand);
  text-decoration: none;
  border-bottom: 2px solid rgba(13, 131, 141, 0.25);
  transition: var(--dt-t);
}
.dtBtnLink:hover,
.dtBtnLink:focus{
  color: var(--dt-brand-dark);
  border-bottom-color: var(--dt-brand);
  text-decoration: none;
}
.dtBtnLink svg{
  width: 15px;
  height: 15px;
  transition: transform var(--dt-t);
}
.dtBtnLink:hover svg{
  transform: translateX(3px);
}

/* filter chips */
.dtExFilters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.dtExFilter{
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-text-2);
  background: var(--dt-white);
  border: 1.5px solid var(--dt-border);
  border-radius: 100px;
  padding: 8px 18px;
  cursor: pointer;
  transition: var(--dt-t);
}
.dtExFilter:hover{
  border-color: var(--dt-brand);
  color: var(--dt-brand);
}
.dtExFilter:focus-visible{
  outline: 2px solid var(--dt-brand);
  outline-offset: 2px;
}
.dtExFilterActive,
.dtExFilterActive:hover{
  background: var(--dt-brand);
  border-color: var(--dt-brand);
  color: var(--dt-white);
  box-shadow: 0 4px 14px var(--dt-brand-glow);
}

/* card grid */
.dtExGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dtExCard{
  position: relative;
  display: block;
  border-radius: var(--dt-r-lg);
  overflow: hidden;
  background: var(--dt-white);
  border: 1.5px solid transparent;
  box-shadow: var(--dt-sh);
  transition: var(--dt-t);
  text-decoration: none;
}
.dtExCard:hover,
.dtExCard:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--dt-sh-lg);
  border-color: rgba(13, 131, 141, 0.28);
  text-decoration: none;
}
.dtExCardMedia{
  display: block;
  position: relative;
  aspect-ratio: 535 / 320;
  overflow: hidden;
  /* contain letterboxes anything that is not exactly 535x320, so this
     ground shows through - keep it close to the card, not to the page */
  background: var(--dt-off);
}
.dtExCardMedia img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.55s var(--dt-ease);
}
.dtExCard:hover .dtExCardMedia img{
  transform: scale(1.05);
}
.dtExCardMedia::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 35, 51, 0.5) 100%);
  opacity: 0;
  transition: var(--dt-t);
}
.dtExCard:hover .dtExCardMedia::after{
  opacity: 1;
}
.dtExCardBody{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}
.dtExCardTitle{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dt-navy);
}
.dtExCardTag{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-brand);
  background: rgba(13, 131, 141, 0.09);
  border: 1px solid rgba(13, 131, 141, 0.18);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Pro tiles differ from category tiles by weight, not by hue: a solid chip
   against the outlined ones. Keeps the meaning, drops the last stray yellow. */
.dtExCardPro .dtExCardTag{
  color: var(--dt-white);
  background: var(--dt-brand);
  border-color: var(--dt-brand);
}
.dtExFooter{
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dtExMore{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dt-brand);
  background: var(--dt-white);
  border: 1.5px solid var(--dt-border);
  border-radius: 40px;
  padding: 13px 26px;
  cursor: pointer;
  transition: var(--dt-t);
}
.dtExMore:hover{
  border-color: var(--dt-brand);
  background: rgba(13, 131, 141, 0.06);
}
.dtExMore svg{
  width: 15px;
  height: 15px;
  transition: transform var(--dt-t);
}
.dtExMore[aria-expanded="true"] svg{
  transform: rotate(180deg);
}
.dtExGrid .dtExCard[hidden]{
  display: none;
}

/* ═══════════════════════════════════════════
   CAS – Scale cards  [dark bg]
═══════════════════════════════════════════ */
.dtCasSection{
  background: var(--dt-dark);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dtCasSection::before{
  content: "";
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.1) 0%, transparent 70%);
}
.dtCasSectionInner{
  position: relative;
  z-index: 1;
}
.dtCasHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.dtCasHeader > div:first-child{
  flex: 1;
  min-width: 260px;
}
.dtCasSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
  text-wrap: balance;
}
.dtCasSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 520px;
}
.dtCasEdgePill{
  background: rgba(13, 131, 141, 0.12);
  border: 1px solid rgba(13, 131, 141, 0.28);
  border-radius: var(--dt-r-lg);
  padding: 22px 24px;
  max-width: 260px;
  flex-shrink: 0;
}
.dtCasEdgePillIcon{
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.dtCasEdgePillIcon svg{
  width: 20px;
  height: 20px;
  color: #fff;
}
.dtCasEdgePillText{
  font-size: 14px;
  font-weight: 700;
  color: var(--dt-brand-light);
  margin-bottom: 6px;
}
.dtCasEdgePillSub{
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
}
.dtCasCards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.dtCasCard{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--dt-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--dt-t);
  position: relative;
  overflow: hidden;
}
.dtCasCard::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dt-brand), transparent);
  opacity: 0;
  transition: var(--dt-t);
}
.dtCasCard:hover{
  background: rgba(13, 131, 141, 0.09);
  border-color: rgba(13, 131, 141, 0.3);
  transform: translateY(-3px);
}
.dtCasCard:hover::before{
  opacity: 1;
}
.dtCasCardWide{
  grid-column: 1/3;
  grid-row: 1/3;
  background: rgba(13, 131, 141, 0.08);
  border-color: rgba(13, 131, 141, 0.22);
  justify-content: flex-end;
  min-height: 260px;
}
.dtCasCardWide::before{
  opacity: 1;
}
.dtCasCardNum{
  font-family: var(--dt-font-h);
  font-size: 42px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.07);
  line-height: 1;
  letter-spacing: -0.04em;
  position: absolute;
  top: 18px;
  right: 20px;
  font-variant-numeric: tabular-nums;
}
.dtCasCardWide .dtCasCardNum{
  font-size: 80px;
  top: 12px;
  right: 20px;
}
.dtCasCardIcon{
  width: 44px;
  height: 44px;
  background: rgba(13, 131, 141, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.dtCasCardIcon svg{
  width: 22px;
  height: 22px;
  color: var(--dt-brand-light);
}
.dtCasCardWide .dtCasCardIcon{
  width: 52px;
  height: 52px;
  background: rgba(13, 131, 141, 0.24);
}
.dtCasCardWide .dtCasCardIcon svg{
  width: 26px;
  height: 26px;
}
.dtCasCardTitle{
  font-size: 16px;
  font-weight: 700;
  color: var(--dt-white);
  line-height: 1.3;
}
.dtCasCardWide .dtCasCardTitle{
  font-size: 22px;
}
.dtCasCardText{
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.65;
  flex: 1;
}
.dtCasCardWide .dtCasCardText{
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
}
.dtCasCardTag{
  display: inline-flex;
  align-self: flex-start;
  background: rgba(13, 131, 141, 0.14);
  border: 1px solid rgba(13, 131, 141, 0.25);
  color: var(--dt-brand-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 4px;
}
.dtCasFootnote{
  margin-top: 36px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 760px;
}
.dtCasFootnote b{
  color: var(--dt-brand-light);
}

/* ═══════════════════════════════════════════
   LIST – Comparison table  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.dtListSection{
  background: var(--dt-off);
  padding: 88px 0;
}
.dtListSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.dtListSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 44px;
  max-width: 640px;
}
.dtListSectionSubtitle p{
  margin: 0 0 6px;
}
.dtListSectionSubtitle p:last-child{
  margin-bottom: 0;
}
.dtCmpTableScroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.dtCmpTable{
  min-width: 640px;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  border: 1.5px solid var(--dt-border);
  margin-top: 8px;
}
.dtCmpRow{
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  border-bottom: 1px solid var(--dt-border);
}
.dtCmpRow:last-child{
  border-bottom: none;
}
.dtCmpCell{
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dtCmpHeader{
  background: var(--dt-navy);
}
.dtCmpHeader .dtCmpCell{
  padding: 22px 24px;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.dtCmpPlanName{
  font-size: 17px;
  font-weight: 700;
  color: var(--dt-white);
}
.dtCmpPlanSub{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.dtCmpBadge{
  display: inline-flex;
  background: linear-gradient(135deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  color: var(--dt-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}
.dtCmpPlanHighlight{
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  position: relative;
}
.dtCmpPlanHighlight::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dt-brand), var(--dt-brand-dark));
}
.dtCmpFeatureCol{
  background: var(--dt-white);
  font-weight: 600;
  color: var(--dt-navy);
  font-size: 14px;
  border-right: 1px solid var(--dt-border);
}
.dtCmpFeatureIcon{
  font-size: 16px;
  flex-shrink: 0;
}
.dtCmpOld{
  color: var(--dt-text-3);
  background: var(--dt-white);
  border-right: 1px solid var(--dt-border);
}
.dtCmpRow:nth-child(even) .dtCmpOld{
  background: #f2f6fb;
}
.dtCmpNew{
  background: rgba(13, 131, 141, 0.05);
  color: var(--dt-text);
  font-weight: 500;
}
.dtCmpNew::before{
  content: "\2713";
  color: var(--dt-brand);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 2px;
}
.dtCmpRow:nth-child(even) .dtCmpNew{
  background: rgba(13, 131, 141, 0.09);
}
.dtCmpRowLast{
  border-bottom: 2px solid var(--dt-border);
}
.dtCmpFooter{
  background: var(--dt-white);
  border-bottom: none;
}
.dtCmpOldFooter{
  color: var(--dt-text-3);
  font-size: 13px;
  border-right: 1px solid var(--dt-border);
  justify-content: center;
}
.dtCmpCross{
  color: #e5484d;
  font-weight: 700;
  margin-right: 4px;
}
.dtCmpNewFooter{
  background: rgba(13, 131, 141, 0.06);
  justify-content: center;
}
.dtCmpNewFooter .dtBtnPrimary{
  font-size: 13px;
  padding: 11px 24px;
}

/* ═══════════════════════════════════════════
   GAR – Guarantee  [white bg]
═══════════════════════════════════════════ */
.dtGarSection{
  background: var(--dt-white);
  padding: 80px 0;
}
.dtGarSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.dtGarWave{
  max-width: 320px;
  margin-bottom: 20px;
}
.dtGarWave svg{
  width: 100%;
  height: 16px;
  display: block;
}
.dtGarSectionSubtitle{
  font-size: 18px;
  font-weight: 700;
  color: var(--dt-brand);
  margin-bottom: 8px;
}
.dtGarSectionSubtitle2{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 640px;
}
.dtGarBox{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  background: var(--dt-white);
  border-radius: var(--dt-r-xl);
  padding: 40px;
  box-shadow: var(--dt-sh-lg);
  border: 1.5px solid var(--dt-border);
  align-items: start;
}
.dtGarBoxLeft{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.dtGarBadge{
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(
    135deg,
    rgba(13, 131, 141, 0.1) 0%,
    rgba(13, 131, 141, 0.05) 100%
  );
  border: 1.5px solid rgba(13, 131, 141, 0.25);
  border-radius: var(--dt-r-lg);
  padding: 16px 20px;
}
.dtGarBadgeIcon{
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dtGarBadgeIcon svg{
  width: 30px;
  height: 30px;
  color: #fff;
}
.dtGarBadge strong{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--dt-navy);
}
.dtGarBadge span{
  font-size: 12px;
  color: var(--dt-text-3);
}
.dtGarPayments img{
  width: 100%;
  max-width: 250px;
}
.dtGarBoxRight p{
  font-size: 15px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 14px;
}
.dtGarBoxRight p:last-child{
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   FEAT – Pro features  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.dtFeatSection{
  background: var(--dt-off);
  padding: 88px 0;
}
.dtFeatSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtFeatSectionTitle2{
  font-size: 22px;
  font-weight: 700;
  color: var(--dt-navy);
  margin-top: 52px;
  margin-bottom: 10px;
}
.dtFeatSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 680px;
}
.dtFeatSectionSubtitle2{
  font-size: 15px;
  color: var(--dt-text-3);
  line-height: 1.7;
  max-width: 660px;
}
.dtFeatSectionCols{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dtFeatSectionCol{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--dt-white);
  border-radius: var(--dt-r-lg);
  padding: 26px 24px;
  border: 1.5px solid transparent;
  transition: var(--dt-t);
}
.dtFeatSectionCol:hover{
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--dt-sh);
}
.dtFeatSectionColIcon{
  width: 48px;
  height: 48px;
  background: rgba(13, 131, 141, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(13, 131, 141, 0.15);
  transition: var(--dt-t);
}
.dtFeatSectionCol:hover .dtFeatSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.3);
}
.dtFeatSectionColIcon svg{
  width: 24px;
  height: 24px;
  color: var(--dt-brand);
}
.dtFeatSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--dt-navy);
  margin-bottom: 6px;
}
.dtFeatSectionColSubtitle{
  font-size: 13.5px;
  color: var(--dt-text-2);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   MTX – Free vs Pro feature matrix
   Dark scoreboard band + white table card that
   overlaps it, so the section ends on white and
   flows straight into the pricing block.
═══════════════════════════════════════════ */
.dtMtxSection{
  background: var(--dt-white);
}
.dtMtxTop{
  /* was the only full dark band starting at --dt-navy, which read washed out
     next to Hiw / Cas / Rev / Sup - same depth as those now, with a lift on top */
  background:
    radial-gradient(ellipse 110% 130% at 72% -18%, #22344f 0%, transparent 60%),
    linear-gradient(158deg, var(--dt-dark) 0%, #141f33 54%, var(--dt-dark2) 100%);
  padding: 88px 0 128px;
  position: relative;
  overflow: hidden;
}
.dtMtxTop::before{
  content: "";
  position: absolute;
  top: -140px;
  left: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

/* Parallax: the plane drifts down as the page scrolls down, so on screen it
   travels slower than the copy and reads as further away. Driven by the scroll
   position itself (no scroll listener), and animating `translate` rather than
   `transform` keeps the isometric orientation above untouched. */

@media (prefers-reduced-motion: reduce) {
  
}
.dtMtxTop .dtSectionLabel{
  color: var(--dt-brand-light);
}
.dtMtxBottom{
  background: var(--dt-white);
  /* the pricing section below is white too - keep the seam tight so the two
     do not read as one very empty band */
  padding-bottom: 56px;
}
.dtMtxSectionInner{
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}
.dtMtxSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-wrap: balance;
}
.dtMtxSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 48px;
}

/* ── Scoreboard: two plan cards with coverage rings ── */
.dtMtxScore{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dtMtxPlan{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--dt-r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.dtMtxPlanPro{
  background: rgba(13, 131, 141, 0.12);
  border-color: rgba(13, 131, 141, 0.36);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
}
.dtMtxPlanPro::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dt-brand-light), #a0eaf3);
}
.dtMtxPlanTop{
  display: flex;
  align-items: center;
  gap: 22px;
}

/* the ring */
.dtMtxRing{
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}
.dtMtxRing svg{
  width: 92px;
  height: 92px;
  transform: rotate(-90deg);
  display: block;
}
.dtMtxRingTrack{
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

/* r=40 -> circumference 251.33. The arc is drawn by dashoffset so it can be
   animated; the resting values below are the finished state, so with no JS the
   rings simply render full rather than empty. */
.dtMtxRingFill{
  fill: none;
  stroke: var(--dt-brand-light);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 251.33;
  stroke-dashoffset: 153.25; /* 16 of 41 */
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.dtMtxPlanPro .dtMtxRingFill{
  stroke-dashoffset: 0; /* 41 of 41 */
}

/* the script adds this once it is ready to run the reveal */
.dtMtxAnimReady .dtMtxRingFill{
  stroke-dashoffset: 251.33;
}
.dtMtxAnimReady .dtMtxPlan.dtIsIn .dtMtxRingFill{
  stroke-dashoffset: 153.25;
}
.dtMtxAnimReady .dtMtxPlanPro.dtIsIn .dtMtxRingFill{
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dtMtxRingFill {
    transition: none;
  }
}
.dtMtxPlanPro .dtMtxRingFill{
  stroke: var(--dt-brand-light);
}
.dtMtxPlan:not(.dtMtxPlanPro) .dtMtxRingFill{
  stroke: var(--dt-brand);
}
.dtMtxRingLabel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--dt-font-h);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dtMtxRingNum{
  font-size: 24px;
  font-weight: 800;
  color: var(--dt-white);
}
.dtMtxRingOf{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.dtMtxPlanName{
  font-family: var(--dt-font-h);
  font-size: 22px;
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.dtMtxPlanPrice{
  font-size: 15px;
  font-weight: 700;
  color: var(--dt-brand-light);
}
.dtMtxPlanPro .dtMtxPlanPrice{
  color: var(--dt-brand-light);
}
.dtMtxPlanPrice span{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-left: 4px;
}
.dtMtxPlanPriceAlt{
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(82, 186, 197, 0.1);
  border: 1px solid rgba(82, 186, 197, 0.3);
}
.dtMtxPlanPriceAlt span{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.dtMtxPlanPriceAlt b{
  font-family: var(--dt-font-h);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dt-brand-light);
  font-variant-numeric: tabular-nums;
}
.dtMtxHeadPlanAlt{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-brand-light);
}
.dtMtxPlanText{
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  flex: 1;
}
.dtMtxPlan .dtBtnGhost,
.dtMtxPlan .dtBtnPrimary{
  align-self: flex-start;
}

/* ── Filter chips above the table ── */
.dtMtxControls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 28px;
  border-bottom: 1px solid var(--dt-border);
  background: var(--dt-off);
}
.dtMtxControlsTitle{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dtMtxFilters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dtMtxFilter{
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-text-2);
  background: var(--dt-white);
  border: 1.5px solid var(--dt-border);
  border-radius: 100px;
  padding: 7px 16px;
  cursor: pointer;
  transition: var(--dt-t);
}
.dtMtxFilter:hover{
  border-color: var(--dt-brand);
  color: var(--dt-brand);
}
.dtMtxFilterActive,
.dtMtxFilterActive:hover{
  background: var(--dt-brand);
  border-color: var(--dt-brand);
  color: var(--dt-white);
  box-shadow: 0 4px 14px var(--dt-brand-glow);
}

/* ── The table card ── */
.dtMtxTableWrap{
  margin-top: -80px;
  background: var(--dt-white);
  border: 1.5px solid var(--dt-border);
  border-radius: var(--dt-r-xl);
  box-shadow: var(--dt-sh-xl);
  /* clip, not hidden: `hidden` would make this a scroll container and the
     sticky header row inside it would never stick. Older engines that do not
     know `clip` keep `hidden` and simply lose the stickiness. */
  overflow: hidden;
  overflow: clip;
}
.dtMtxTable{
  width: 100%;
}
.dtMtxTable [hidden]{
  display: none !important;
}
.dtMtxRow{
  display: grid;
  grid-template-columns: 1fr 168px 168px;
  border-top: 1px solid var(--dt-border);
  align-items: stretch;
}
.dtMtxCell{
  padding: 5px 20px;
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dtMtxCellFeature{
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-left: 28px;
  color: var(--dt-navy);
  font-weight: 600;
}
.dtMtxHint{
  font-size: 12.5px;
  font-weight: 400;
  color: var(--dt-text-3);
  line-height: 1.5;
}

/* header row — sticky so column identity survives a long scroll */
.dtMtxHeadRow{
  position: sticky;
  top: 0;
  z-index: 4;
  border-top: none;
  background: var(--dt-navy);
}
.dtMtxHeadRow .dtMtxCell{
  padding: 18px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  justify-content: center;
}
.dtMtxHeadRow .dtMtxCellFeature{
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 28px;
}
.dtMtxHeadPlan{
  flex-direction: column;
  gap: 2px;
}
.dtMtxHeadPlan strong{
  font-family: var(--dt-font-h);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--dt-white);
}
.dtMtxHeadPro{
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  position: relative;
}
.dtMtxHeadPro::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dt-brand), var(--dt-brand-light));
}
.dtMtxHeadPro strong{
  color: var(--dt-brand-light);
}

/* group header row — carries the free-coverage bar */
.dtMtxGroup{
  display: grid;
  grid-template-columns: 1fr 336px;
  align-items: center;
  gap: 20px;
  background: var(--dt-off);
  border-top: 1px solid var(--dt-border);
  padding: 16px 28px;
}
.dtMtxGroupName{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--dt-font-h);
  font-size: 15px;
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.01em;
}
.dtMtxGroupIcon{
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(13, 131, 141, 0.1);
  border: 1.5px solid rgba(13, 131, 141, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dtMtxGroupIcon svg{
  width: 17px;
  height: 17px;
  color: var(--dt-brand);
}
.dtMtxGroupMeter{
  display: flex;
  align-items: center;
  gap: 12px;
}
.dtMtxGroupBar{
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: var(--dt-off2);
  overflow: hidden;
  min-width: 80px;
}
.dtMtxGroupBarFill{
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--dt-brand-light), var(--dt-brand));
}
.dtMtxGroupCount{
  font-size: 12px;
  font-weight: 700;
  color: var(--dt-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dtMtxGroupCount b{
  color: var(--dt-brand);
  font-weight: 800;
}
.dtMtxGroupCountEmpty b{
  color: var(--dt-text-3);
}

/* value cells */
.dtMtxCellFree,
.dtMtxCellPro{
  justify-content: center;
  text-align: center;
  font-size: 13px;
  color: var(--dt-text-2);
}
.dtMtxCellPro{
  background: rgba(13, 131, 141, 0.05);
}
.dtMtxYes,
.dtMtxNo{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dtMtxYes{
  background: rgba(13, 131, 141, 0.13);
  border: 1.5px solid rgba(13, 131, 141, 0.3);
}
.dtMtxYes svg{
  width: 14px;
  height: 14px;
  color: var(--dt-brand);
}
.dtMtxCellPro .dtMtxYes{
  background: rgba(13, 131, 141, 0.2);
  border-color: rgba(13, 131, 141, 0.45);
}
.dtMtxNo{
  background: #f1f4f9;
  border: 1.5px solid var(--dt-border);
}
.dtMtxNo svg{
  width: 12px;
  height: 12px;
  color: var(--dt-text-3);
}
.dtMtxVal{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dt-text-2);
  line-height: 1.4;
}
.dtMtxCellPro .dtMtxVal{
  color: var(--dt-brand-dark);
}
.dtMtxValMuted{
  color: var(--dt-text-3);
  font-weight: 600;
}

/* footer CTA row */
.dtMtxFootRow{
  border-top: 2px solid var(--dt-border);
  background: var(--dt-white);
}
.dtMtxFootRow .dtMtxCell{
  padding: 22px 16px;
  justify-content: center;
}
.dtMtxFootRow .dtMtxCellFeature{
  align-items: flex-start;
  justify-content: center;
  padding-left: 28px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dt-text-3);
}
.dtMtxFootRow .dtBtnPrimary{
  font-size: 12.5px;
  padding: 11px 20px;
}
.dtMtxFootFree{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dt-brand);
  text-decoration: none;
  border-bottom: 2px solid rgba(13, 131, 141, 0.25);
  transition: var(--dt-t);
}
.dtMtxFootFree:hover,
.dtMtxFootFree:focus{
  color: var(--dt-brand-dark);
  border-bottom-color: var(--dt-brand);
  text-decoration: none;
}
.dtMtxNote{
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--dt-text-3);
  line-height: 1.65;
  text-align: center;
}
.dtMtxNote b{
  color: var(--dt-text-2);
}
.dtMtxEmpty{
  padding: 40px 28px;
  text-align: center;
  font-size: 14.5px;
  color: var(--dt-text-3);
  border-top: 1px solid var(--dt-border);
}

/* ── Matrix responsive ── */

@media (max-width: 900px) {
  .dtMtxScore {
    grid-template-columns: 1fr;
  }
  .dtMtxRow {
    grid-template-columns: 1fr 118px 118px;
  }
  .dtMtxGroup {
    grid-template-columns: 1fr 236px;
  }
}

@media (max-width: 640px) {
  .dtMtxTop {
    padding: 72px 0 110px;
  }
  .dtMtxRow {
    grid-template-columns: 1fr 76px 76px;
  }
  .dtMtxCell {
    padding: 13px 8px;
    font-size: 13.5px;
  }
  .dtMtxCellFeature,
  .dtMtxHeadRow .dtMtxCellFeature,
  .dtMtxFootRow .dtMtxCellFeature {
    padding-left: 16px;
    padding-right: 10px;
  }
  .dtMtxHeadRow .dtMtxCell {
    padding: 14px 6px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .dtMtxHeadPlan strong {
    font-size: 13px;
  }
  .dtMtxHeadPlanSub,
  .dtMtxHeadPlanAlt {
    display: none;
  }
  .dtMtxGroup {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  .dtMtxVal {
    font-size: 11px;
    line-height: 1.35;
  }
  .dtMtxYes,
  .dtMtxNo {
    width: 22px;
    height: 22px;
  }
  .dtMtxControls {
    padding: 18px 16px;
  }
  .dtMtxFootRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px 16px;
  }
  .dtMtxFootRow .dtMtxCell,
  .dtMtxFootRow .dtMtxCellFeature {
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .dtMtxFootRow .dtMtxCellPro {
    background: transparent;
  }
  .dtMtxFootRow .dtBtnPrimary {
    padding: 12px 26px;
    font-size: 12px;
  }
  .dtMtxVal {
    overflow-wrap: break-word;
  }
}

/* ═══════════════════════════════════════════
   REV – Reviews  [dark bg]
   Real wordpress.org reviews, each linking to
   the review it was taken from.
═══════════════════════════════════════════ */
.dtRevSection{
  background: linear-gradient(165deg, var(--dt-dark) 0%, #101b2c 55%, var(--dt-dark2) 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.dtRevSection::before{
  content: "";
  position: absolute;
  top: -120px;
  left: 12%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82, 186, 197, 0.13) 0%, transparent 70%);
  pointer-events: none;
}
.dtRevSectionInner{
  position: relative;
  z-index: 1;
}
.dtRevSection .dtSectionLabel{
  color: var(--dt-brand-light);
}
.dtRevHeader{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.dtRevSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-wrap: balance;
}
.dtRevSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
  max-width: 560px;
}

/* score block, links to the review index */
.dtRevScore{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--dt-r-lg);
  padding: 18px 24px;
  text-decoration: none;
  transition: var(--dt-t);
  flex-shrink: 0;
}
.dtRevScore:hover,
.dtRevScore:focus{
  border-color: rgba(82, 186, 197, 0.45);
  background: rgba(13, 131, 141, 0.12);
  text-decoration: none;
}
.dtRevScoreTop{
  display: flex;
  align-items: center;
  gap: 10px;
}
.dtRevScoreNum{
  font-family: var(--dt-font-h);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--dt-white);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dtRevScoreNum em{
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}
.dtRevStars{
  display: inline-flex;
  gap: 2px;
}
.dtRevStars svg{
  width: 15px;
  height: 15px;
  fill: var(--dt-amber);
}
.dtRevScoreMeta{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* the wall */
.dtRevGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dtRevCard{
  margin: 0;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--dt-r-lg);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: var(--dt-t);
  position: relative;
  overflow: hidden;
}
.dtRevCard:hover{
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(82, 186, 197, 0.32);
  transform: translateY(-3px);
}
.dtRevCardFeat{
  grid-column: span 2;
  background: rgba(13, 131, 141, 0.1);
  border-color: rgba(13, 131, 141, 0.3);
}
.dtRevCardFeat::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dt-brand-light), #a0eaf3);
}
.dtRevQuote{
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
  flex: 1;
}
.dtRevCardFeat .dtRevQuote{
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.86);
}
.dtRevTitle{
  font-family: var(--dt-font-h);
  font-size: 15px;
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.01em;
}
.dtRevCardFeat .dtRevTitle{
  font-size: 19px;
}
.dtRevFoot{
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dtRevAvatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--dt-font-h);
  font-size: 14px;
  font-weight: 800;
  color: var(--dt-white);
  background: linear-gradient(135deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  text-transform: uppercase;
}
.dtRevCardFeat .dtRevAvatar{
  background: linear-gradient(135deg, var(--dt-brand-light) 0%, var(--dt-brand) 100%);
  color: #0f1720;
}
.dtRevWho{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dtRevName{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dt-white);
}
.dtRevSrc{
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: var(--dt-t);
}
.dtRevSrc:hover,
.dtRevSrc:focus{
  color: var(--dt-brand-light);
  text-decoration: none;
}
.dtRevFoot .dtRevStars{
  margin-left: auto;
  flex-shrink: 0;
}
.dtRevFoot .dtRevStars svg{
  width: 12px;
  height: 12px;
}
.dtRevFooter{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .dtRevGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dtRevCardFeat {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .dtRevGrid {
    grid-template-columns: 1fr;
  }
  .dtRevCardFeat {
    grid-column: span 1;
  }
  .dtRevScore {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════
   PRS – "usually an upgrade" strip
═══════════════════════════════════════════ */
.dtPrsIncluded{
  background: var(--dt-off);
  border: 1.5px solid var(--dt-border);
  border-radius: var(--dt-r-xl);
  padding: 26px 30px;
  /* now closes the pricing section rather than introducing it */
  margin-top: 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.dtPrsIncludedIcon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--dt-white);
  border: 1.5px solid rgba(13, 131, 141, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dtPrsIncludedIcon svg{
  width: 26px;
  height: 26px;
  color: var(--dt-brand);
}
.dtPrsIncludedTitle{
  font-family: var(--dt-font-h);
  font-size: 17px;
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.dtPrsIncludedText{
  font-size: 14.5px;
  color: var(--dt-text-2);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .dtPrsIncluded {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }
}

/* ═══════════════════════════════════════════
   CAP – light sweeping across the banner
   The sweep sits behind the copy (z-index 0 vs 1)
   so it never washes over the text.
═══════════════════════════════════════════ */
.dtCapSection{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* the hero's dot + rule grid, cut to a diamond facet behind the copy */
/* A plain pool of light behind the stone - enough separation that the facet
   reads as standing in front of the band, without turning into a lamp show. */
.dtCapGlow{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 880px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(150, 226, 236, 0.13) 0%,
    rgba(82, 186, 197, 0.08) 34%,
    rgba(13, 131, 141, 0.04) 56%,
    transparent 74%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px) {
  .dtCapGlow {
    width: 560px;
  }
}
.dtCapFacet{
  position: absolute;
  top: 50%;
  left: 50%;
  /* sized to the band so the whole rhombus fits: its widest line lands on the
     vertical centre and the left/right points sit inside the section */
  width: 720px;
  height: 150%;
  transform: translate(-50%, -50%);
  background-image:
    radial-gradient(circle, rgba(82, 186, 197, 0.34) 1.2px, transparent 1.2px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px, 136px 136px, 136px 136px;
  /* without this the lattice starts at the box corner and the pattern is
     lopsided about the diamond's own centre */
  background-position: center center;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* fades out before the clipped corners, so the cut never shows as a hard edge */
  -webkit-mask-image: radial-gradient(
    circle,
    #000 14%,
    rgba(0, 0, 0, 0.6) 46%,
    transparent 78%
  );
  mask-image: radial-gradient(
    circle,
    #000 14%,
    rgba(0, 0, 0, 0.6) 46%,
    transparent 78%
  );
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px) {
  .dtCapFacet {
    width: 460px;
  }
}

/* the rhombus outline, drawn rather than implied - kept outside the facet so
   the facet's soft mask never eats it */
.dtCapFacetEdge{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

@media (max-width: 640px) {
  .dtCapFacetEdge {
    width: 460px;
  }
}
.dtCapSheen{
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -20%;
  /* narrow and only lightly blurred - a wide, heavily blurred band reads as a
     smudge on the panel rather than as light crossing it */
  width: 15%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(160, 234, 243, 0.05) 30%,
    rgba(214, 247, 251, 0.22) 50%,
    rgba(160, 234, 243, 0.05) 70%,
    transparent 100%
  );
  transform: rotate(18deg);
  filter: blur(5px);
  pointer-events: none;
  z-index: 0;
  animation: dtCapSweep 6s cubic-bezier(0.42, 0, 0.5, 1) infinite;
}

@keyframes dtCapSweep {
  0%,
  6% {
    left: -20%;
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  54% {
    opacity: 1;
  }
  66%,
  100% {
    left: 104%;
    opacity: 0;
  }
}
.dtCapSectionInner{
  position: relative;
  z-index: 1;
  will-change: translate;
}

/* ═══════════════════════════════════════════
   PRS – Pricing  [white bg]
═══════════════════════════════════════════ */
.dtPrsSection{
  background: var(--dt-white);
  padding: 88px 0;
}
.dtPrsSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  line-height: 1.15;
  text-wrap: balance;
}
.dtPrsSectionSubtitle{
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 600px;
}
.dtPrsSectionSubtitle2{
  font-size: 14px;
  color: var(--dt-text-3);
  text-align: center;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════
   SUP – Support CTA  [dark bg]
═══════════════════════════════════════════ */
.dtSupSection{
  background: linear-gradient(160deg, var(--dt-dark) 0%, var(--dt-dark2) 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.dtSupSection::before{
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.14) 0%, transparent 70%);
}
.dtSupSectionInner{
  position: relative;
  z-index: 1;
}
.dtSupSection .dtSectionLabel{
  color: var(--dt-brand-light);
}
.dtSupSectionInnerContainer{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.dtSupSectionTitle{
  font-family: var(--dt-font-h);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.dtSupSectionSubtitle{
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 28px;
  line-height: 1.7;
  max-width: 560px;
}
.dtSupSectionSubtitle p{
  margin-bottom: 10px;
}
.dtSupSectionSubtitle p:last-child{
  margin-bottom: 0;
}
.dtSupSectionTitle2{
  font-size: 18px;
  font-weight: 700;
  color: var(--dt-brand-light);
  margin-bottom: 10px;
}
.dtSupSectionSubtitle2{
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  max-width: 560px;
}
.dtSupSectionSubtitle2 p{
  margin-bottom: 8px;
}
.dtSupSectionSubtitle2 p:last-child{
  margin-bottom: 0;
}
.dtSupSectionInnerRight{
  flex-shrink: 0;
}
.dtSupIllustration{
  width: 240px;
  height: 240px;
}
.dtSupCtaRow{
  margin-top: 48px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.dtSupCtaBtn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--dt-amber);
  color: #1a1a1a;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 44px;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 8px 32px var(--dt-amber-glow), 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: var(--dt-t);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.dtSupCtaBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  border-radius: inherit;
}
.dtSupCtaBtn:hover,
.dtSupCtaBtn:focus{
  background: var(--dt-amber-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(255, 190, 43, 0.55), 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
  text-decoration: none;
}
.dtSupCtaBtn svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--dt-t);
}
.dtSupCtaBtn:hover svg{
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════
   Legacy theme blocks that sit inside the page
   (.example / .features rendered by the theme)
═══════════════════════════════════════════ */
.dtPageContainer .example.stripped,
.dtPageContainer .features.stripped{
  background: var(--dt-white);
}
.dtPageContainer .example.stripped .sec-title,
.dtPageContainer .features.stripped .sec-title{
  font-family: var(--dt-font-h);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════
   FOCUS / MOTION
═══════════════════════════════════════════ */
.dtPageContainer a:focus-visible,
.dtPageContainer button:focus-visible{
  outline: 2px solid var(--dt-brand-light);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .dtPageContainer *,
  .dtPageContainer *::before,
  .dtPageContainer *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* without this the staggered hero entrance would hold its "from"
       state - invisible - for the length of its delay before snapping in */
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .dtFvtSectionCols,
  .dtHiwSectionCols,
  .dtDfdSectionCols {
    grid-template-columns: repeat(2, 1fr);
  }
  .dtFeatSectionCols {
    grid-template-columns: 1fr;
  }
  .dtExGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .dtPfGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dtPfCardFeat {
    grid-row: auto;
  }
  .dtCasCards {
    grid-template-columns: repeat(2, 1fr);
  }
  .dtCasCardWide {
    grid-column: 1/3;
    grid-row: auto;
  }
}

@media (max-width: 860px) {
  .dtHeroSection {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 80px;
  }
  
  .dtSupSectionInnerContainer {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .dtSupSectionInnerRight {
    display: none;
  }
  .dtGarBox {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .dtHeroSectionTitle {
    font-size: clamp(30px, 8vw, 44px);
  }
  .dtHeroStats {
    padding: 16px 4px;
  }
  .dtHeroStatNum {
    font-size: 20px;
  }
  .dtHeroStatWord {
    font-size: 16px;
  }
  .dtHeroStatLabel {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  .dtHeroStatStar {
    width: 14px;
    height: 14px;
  }
  .dtHeroPill {
    font-size: 11.5px;
    padding: 5px 12px;
  }
  .dtHeroCtaRow {
    flex-direction: column;
    align-items: stretch;
  }
  .dtHeroCtaRow .dtBtnPrimary,
  .dtHeroCtaRow .dtBtnGhost {
    justify-content: center;
  }
  .dtFvtSectionCols,
  .dtDfdSectionCols,
  .dtExGrid {
    grid-template-columns: 1fr;
  }
  .dtHiwSectionCols {
    grid-template-columns: 1fr 1fr;
  }
  .dtExSectionHeader {
    align-items: flex-start;
  }
}

@media (max-width: 580px) {
  .dtPfGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .dtCasCards {
    grid-template-columns: 1fr;
  }
  .dtCasCardWide {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
  .dtCasHeader {
    flex-direction: column;
  }
  .dtCasEdgePill {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .dtHeroStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .dtHeroStatDiv {
    display: none;
  }
  .dtHeroGridLines {
    background-size: 92px 92px;
  }
  .dtHiwSectionCols {
    grid-template-columns: 1fr;
  }
  .dtSupCtaBtn {
    font-size: 15px;
    padding: 16px 28px;
    text-align: center;
  }
  :root {
    --dt-r-xl: 20px;
  }
}

/* ═══════════════════════════════════════════
   HEADING LINE-HEIGHT
   The theme sets body { line-height: 25px } as a fixed pixel value, so it
   inherits unchanged into every element that does not state its own. On a
   38-44px heading that leaves the lines overlapping. The four titles that
   already carry line-height: 1.15 were unaffected; these are the rest, set
   to the same ratio so every section heading matches.
═══════════════════════════════════════════ */
.dtFvtSectionTitle,
.dtHiwSectionTitle,
.dtPfSectionTitle,
.dtDfdSectionTitle,
.dtCapSectionTitle,
.dtExSectionTitle,
.dtListSectionTitle,
.dtGarSectionTitle,
.dtFeatSectionTitle,
.dtSupSectionTitle{
  line-height: 1.15;
}


/* ═══════════════════════════════════════════
   DATA TABLES – additions on top of the shared
   design system (everything above is the gallery
   stylesheet with the prefix renamed).
═══════════════════════════════════════════ */

/* Section titles are real h2/h3 on this page. The class rules set the type,
   this only strips what the theme's own heading rules would otherwise add. */
.dtPageContainer h1,
.dtPageContainer h2,
.dtPageContainer h3 {
  margin-top: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  font-style: normal;
}
.dtPageContainer h3 {
  font-family: inherit;
}
.dtPageContainer h2 {
  line-height: 1.15;
}

/* ── Hero: three real screens cycling in the tablet ── */
.dtHeroTabletScreen {
  aspect-ratio: 1000 / 580;
}
.dtHeroTabletScreens {
  position: relative;
}
.dtHeroScreen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.dtHeroTabletScreens:not(.dtHeroCycling) .dtHeroScreen1,
.dtHeroScreen.dtHeroScreenOn {
  opacity: 1;
}

/* ── Demo: the live table ── */
.dtDemoSection {
  background: var(--dt-off);
  padding: 80px 0;
}
.dtDemoSectionInner {
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.dtDemoHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.dtDemoSectionTitle {
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.dtDemoSectionSubtitle {
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  max-width: 680px;
}
.dtDemoHint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-brand);
  background: rgba(13, 131, 141, 0.08);
  border: 1px solid rgba(13, 131, 141, 0.2);
  border-radius: 100px;
  padding: 8px 16px;
  white-space: nowrap;
}
.dtDemoHintDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dt-brand-light);
  box-shadow: 0 0 8px var(--dt-brand-light);
  animation: dtPulse 2s infinite;
}
.dtDemoGrid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
.dtDemoTable {
  min-width: 0;
  background: var(--dt-white);
  border: 1.5px solid transparent;
  border-radius: var(--dt-r-xl);
  padding: 22px;
  box-shadow: var(--dt-sh-lg);
  overflow-x: auto;
}
.dtDemoTable table {
  max-width: 100%;
}
.dtDemoCharts {
  display: grid;
  gap: 16px;
}
.dtDemoChartsTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
  margin: 0;
}
.dtDemoChart {
  background: var(--dt-white);
  border: 1.5px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  padding: 14px;
  min-height: 200px;
}
@media (max-width: 1000px) {
  .dtDemoGrid {
    grid-template-columns: 1fr;
  }
  .dtDemoCharts {
    grid-template-columns: repeat(3, 1fr);
  }
  .dtDemoChartsTitle {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .dtDemoCharts {
    grid-template-columns: 1fr;
  }
}

/* ── AI / MCP band ── */
.dtAiSection {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 110% 130% at 72% -18%, #22344f 0%, transparent 60%),
    linear-gradient(158deg, var(--dt-dark) 0%, #141f33 54%, var(--dt-dark2) 100%);
  padding: 96px 0;
}
.dtAiGrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}
.dtAiSectionInner {
  position: relative;
  z-index: 1;
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.dtAiBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(82, 186, 197, 0.14);
  border: 1px solid rgba(82, 186, 197, 0.4);
  color: #8fe1ea;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.dtAiBadgeDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-brand-light);
  box-shadow: 0 0 8px var(--dt-brand-light);
  animation: dtPulse 2s infinite;
}
.dtAiSectionTitle {
  font-family: var(--dt-font-h);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  color: var(--dt-white);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
  text-wrap: balance;
}
.dtAiSectionTitle span {
  background: linear-gradient(90deg, var(--dt-brand-light), #a8eef7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dtAiSectionSubtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 28px;
}
.dtAiSectionSubtitle b {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}
.dtAiCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dtAiCard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--dt-r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dtAiCardPro {
  background: rgba(13, 131, 141, 0.13);
  border-color: rgba(13, 131, 141, 0.4);
}
.dtAiTag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.dtAiTagFree {
  color: var(--dt-brand-light);
  background: rgba(82, 186, 197, 0.12);
  border: 1px solid rgba(82, 186, 197, 0.35);
}
.dtAiTagPro {
  color: #fff;
  background: var(--dt-brand);
  border: 1px solid var(--dt-brand-light);
}
.dtAiCardTitle {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dt-white);
  line-height: 1.3;
  margin: 0;
}
.dtAiCardText {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.dtAiLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--dt-brand-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(82, 186, 197, 0.35);
  padding-bottom: 2px;
  transition: var(--dt-t);
}
.dtAiLink:hover,
.dtAiLink:focus {
  color: var(--dt-white);
  border-color: var(--dt-white);
  text-decoration: none;
}
.dtAiLink svg {
  width: 13px;
  height: 13px;
}
.dtAiTerminal {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--dt-r-lg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.dtAiTermHead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dtAiTermDots {
  display: flex;
  gap: 6px;
}
.dtAiTermDots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dtAiTermDots i:nth-child(1) { background: #ff5f57; }
.dtAiTermDots i:nth-child(2) { background: #febc2e; }
.dtAiTermDots i:nth-child(3) { background: #28c840; }
.dtAiTermTitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.dtAiTermBody {
  padding: 18px 20px 20px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
}
.dtAiTermYou {
  color: rgba(255, 255, 255, 0.88);
}
.dtAiTermYou span {
  color: var(--dt-brand-light);
  font-weight: 700;
  margin-right: 6px;
}
.dtAiTermAi {
  color: rgba(255, 255, 255, 0.55);
  padding-left: 22px;
  margin-bottom: 4px;
}
.dtAiTermAi span {
  color: #3ddc84;
  margin-right: 6px;
}
.dtAiTermAi b {
  color: #fff;
  font-weight: 600;
}
.dtAiTermCursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--dt-brand-light);
  vertical-align: -2px;
  animation: dtBlink 1s steps(1) infinite;
}
@keyframes dtBlink {
  50% { opacity: 0; }
}
@media (max-width: 1000px) {
  .dtAiSectionInner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .dtAiCards {
    grid-template-columns: 1fr;
  }
}

/* ── WooCommerce product table band ── */
.dtWooSection {
  position: relative;
  overflow: hidden;
  background: var(--dt-off);
  padding: 88px 0;
}
.dtWooOrb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.dtWooOrb1 {
  width: 460px;
  height: 460px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.22), transparent 70%);
}
.dtWooOrb2 {
  width: 380px;
  height: 380px;
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(82, 186, 197, 0.18), transparent 70%);
}
.dtWooSectionInner {
  position: relative;
  z-index: 1;
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.dtWooTop {
  max-width: 760px;
  margin-bottom: 40px;
}
.dtWooBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(13, 131, 141, 0.1);
  border: 1px solid rgba(13, 131, 141, 0.3);
  color: var(--dt-brand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.dtWooBadgeDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-brand);
  box-shadow: 0 0 8px var(--dt-brand-light);
}
.dtWooTitle {
  font-family: var(--dt-font-h);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 14px;
  text-wrap: balance;
}
.dtWooTitle span {
  color: var(--dt-brand);
}
.dtWooSubtitle {
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
}
.dtWooGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.dtWooCard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--dt-white);
  border: 1.5px solid transparent;
  border-radius: var(--dt-r-lg);
  padding: 22px;
  box-shadow: var(--dt-sh);
  transition: var(--dt-t);
}
.dtWooCard:hover {
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--dt-sh-lg);
  transform: translateY(-3px);
}
.dtWooCardIcon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(13, 131, 141, 0.1);
  border: 1.5px solid rgba(13, 131, 141, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtWooCardIcon svg {
  width: 23px;
  height: 23px;
  color: var(--dt-brand);
}
.dtWooCardTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--dt-navy);
  margin-bottom: 5px;
}
.dtWooCardText {
  font-size: 13.5px;
  color: var(--dt-text-2);
  line-height: 1.6;
}
.dtWooCta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* the ghost button was drawn for dark bands; give it a brand outline here */
.dtWooCta .dtBtnGhost {
  border-color: rgba(13, 131, 141, 0.4);
  color: var(--dt-brand);
}
.dtWooCta .dtBtnGhost:hover,
.dtWooCta .dtBtnGhost:focus {
  background: rgba(13, 131, 141, 0.08);
  border-color: var(--dt-brand);
  color: var(--dt-brand-dark);
}
.dtWooCtaNote {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dt-text-3);
}
@media (max-width: 760px) {
  .dtWooGrid {
    grid-template-columns: 1fr;
  }
}

/* ── FAQ ── */
.dtFaqSection {
  background: var(--dt-white);
  padding: 88px 0;
}
.dtFaqSectionInner {
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.dtFaqHeader {
  position: sticky;
  top: 90px;
}
.dtFaqSectionTitle {
  font-family: var(--dt-font-h);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 12px;
  text-wrap: balance;
}
.dtFaqSectionSubtitle {
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
}
.dtFaqList {
  display: grid;
  gap: 10px;
}
.dtFaqItem {
  border: 1.5px solid var(--dt-border);
  border-radius: var(--dt-r);
  background: var(--dt-white);
  transition: var(--dt-t);
}
.dtFaqItem[open] {
  border-color: rgba(13, 131, 141, 0.35);
  box-shadow: var(--dt-sh);
}
.dtFaqQ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.dtFaqQ::-webkit-details-marker {
  display: none;
}
.dtFaqQ h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dt-navy);
  line-height: 1.35;
  margin: 0;
}
.dtFaqIcon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(13, 131, 141, 0.1);
  transition: var(--dt-t);
}
.dtFaqIcon::before,
.dtFaqIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--dt-brand);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: var(--dt-t);
}
.dtFaqIcon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.dtFaqItem[open] .dtFaqIcon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.dtFaqA {
  padding: 0 20px 18px;
}
.dtFaqA p {
  margin: 0;
  font-size: 14.5px;
  color: var(--dt-text-2);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .dtFaqSectionInner {
    grid-template-columns: 1fr;
  }
  .dtFaqHeader {
    position: static;
  }
}

/* ── Support: version and compatibility line ── */
.dtSupMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.dtSupMeta b {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.dtSupMeta a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dt-brand-light);
  font-weight: 600;
  text-decoration: none;
}
.dtSupMeta a svg {
  width: 12px;
  height: 12px;
}

/* ── Matrix rings: this page has a different Free / total split ── */
.dtMtxRingFill,
.dtMtxAnimReady .dtMtxPlan.dtIsIn .dtMtxRingFill {
  stroke-dashoffset: 121.01;
}
.dtMtxPlanPro .dtMtxRingFill,
.dtMtxAnimReady .dtMtxPlanPro.dtIsIn .dtMtxRingFill {
  stroke-dashoffset: 0;
}
.dtMtxAnimReady .dtMtxRingFill {
  stroke-dashoffset: 251.33;
}
.dtMtxAnimReady .dtMtxPlan.dtIsIn .dtMtxRingFill {
  stroke-dashoffset: 121.01;
}
.dtMtxAnimReady .dtMtxPlanPro.dtIsIn .dtMtxRingFill {
  stroke-dashoffset: 0;
}
/* feature names that link to their own page */
.dtMtxCellFeature a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(13, 131, 141, 0.45);
}
.dtMtxCellFeature a:hover {
  color: var(--dt-brand);
  border-bottom-style: solid;
}

/* ── Three table types: cards inside the band ── */
.dtWooTypes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dtWooType {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--dt-white);
  border: 1.5px solid transparent;
  border-radius: var(--dt-r-lg);
  padding: 26px 24px;
  box-shadow: var(--dt-sh);
  transition: var(--dt-t);
}
.dtWooType:hover {
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--dt-sh-lg);
  transform: translateY(-3px);
}
.dtWooTypeHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dtWooTypeTag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-brand);
  background: rgba(13, 131, 141, 0.09);
  border: 1px solid rgba(13, 131, 141, 0.18);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.dtWooTypeTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--dt-navy);
  margin: 4px 0 0;
}
.dtWooTypeLead {
  font-size: 14px;
  color: var(--dt-text-2);
  line-height: 1.65;
  margin: 0;
}
.dtWooTypeList {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  flex: 1;
}
.dtWooTypeList li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--dt-text-2);
  line-height: 1.55;
}
.dtWooTypeList li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--dt-brand);
  font-weight: 800;
}
.dtWooTypeLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dt-brand);
  text-decoration: none;
  border-bottom: 2px solid rgba(13, 131, 141, 0.25);
  transition: var(--dt-t);
}
.dtWooTypeLink:hover {
  color: var(--dt-brand-dark);
  border-bottom-color: var(--dt-brand);
  text-decoration: none;
}
.dtWooTypeLink svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 960px) {
  .dtWooTypes {
    grid-template-columns: 1fr;
  }
}

/* ── How it works: the isometric plane carries a spreadsheet, so it is drawn
   less magnified than the gallery's mosaic and the cells stay cell-sized ── */
.dtHiwMosaicSvg {
  transform: rotateX(57deg) rotateZ(-41deg) scale(1.12);
  transform-origin: 50% 42%;
}

/* ── Review round: Pro chips on feature cards, four-tile stats, examples, competitor table ── */
.dtFvtPro {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dt-white);
  background: var(--dt-brand);
  border-radius: 100px;
  padding: 2px 7px;
}
.dtHeroPill i {
  font-style: normal;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dt-brand-light);
  margin-left: 5px;
}

/* examples: this page shows a one-line description under the title */
.dtExSection {
  background: var(--dt-white);
}
.dtExCardTitle {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dtExCardDesc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--dt-text-3);
  line-height: 1.45;
}
.dtExCardBody {
  align-items: flex-start;
}
.dtExCard[hidden] {
  display: none;
}
.dtRevMore[hidden] {
  display: none;
}
.dtRevMore {
  display: contents;
}
.dtRevFooter {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dtRevMoreBtn {
  font-family: inherit;
  cursor: pointer;
}

/* competitor comparison */
.dtVsSection {
  background: var(--dt-off);
  padding: 88px 0;
}
.dtVsSectionInner {
  max-width: var(--dt-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.dtVsSectionTitle {
  font-family: var(--dt-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--dt-navy);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.dtVsSectionSubtitle {
  font-size: 16px;
  color: var(--dt-text-2);
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 36px;
}
.dtVsTable {
  min-width: 860px;
  background: var(--dt-white);
  border: 1.5px solid var(--dt-border);
  border-radius: var(--dt-r-xl);
  overflow: hidden;
}
.dtVsRow {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  border-top: 1px solid var(--dt-border);
}
.dtVsRow:first-child {
  border-top: none;
}
.dtVsCell {
  padding: 13px 18px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dt-text-2);
}
.dtVsCell a {
  color: var(--dt-brand);
  font-weight: 600;
}
.dtVsFeature {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
  color: var(--dt-navy);
  padding-left: 24px;
}
.dtVsHead {
  background: var(--dt-navy);
}
.dtVsHead .dtVsCell {
  color: var(--dt-white);
  font-weight: 700;
  font-size: 14px;
  padding: 18px 14px;
}
.dtVsUs {
  background: rgba(13, 131, 141, 0.06);
  color: var(--dt-text);
  font-weight: 600;
}
.dtVsHead .dtVsUs {
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  box-shadow: inset 0 3px 0 var(--dt-brand);
}
.dtVsNote {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--dt-text-3);
  line-height: 1.6;
  max-width: 820px;
}

/* ── Second review round ── */
/* icons drawn from the symbol sheet keep the sizes the class rules give them */
.dtHeroStatStar,
.dtRevStars svg,
.dtMtxYes svg,
.dtMtxNo svg {
  display: inline-block;
}
.dtRevStars svg {
  width: 13px;
  height: 13px;
  fill: var(--dt-amber);
}
.dtMtxYes svg,
.dtMtxNo svg {
  width: 14px;
  height: 14px;
}

/* both comparison tables are real <table> elements now; the grid rules above
   were written for divs, so the table gets its own layout here */
.dtVsCaption,
.dtVsSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
table.dtVsTable,
table.dtCmpTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
table.dtVsTable {
  min-width: 860px;
}
table.dtCmpTable {
  min-width: 640px;
}
.dtVsRow,
.dtCmpRow {
  display: table-row;
}
table.dtVsTable .dtVsCell,
table.dtCmpTable .dtCmpCell {
  display: table-cell;
  vertical-align: middle;
  border-top: 1px solid var(--dt-border);
}
table.dtVsTable thead .dtVsCell,
table.dtCmpTable thead .dtCmpCell {
  border-top: none;
}
table.dtVsTable th,
table.dtCmpTable th {
  font-weight: 600;
}
table.dtVsTable .dtVsFeature {
  width: 27%;
  text-align: left;
}
table.dtVsTable thead .dtVsFeature {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
table.dtVsTable .dtVsUs {
  color: var(--dt-text);
}
table.dtCmpTable .dtCmpFeatureCol {
  width: 28%;
  text-align: left;
}
table.dtCmpTable .dtCmpCell {
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.55;
}
table.dtCmpTable thead .dtCmpCell {
  padding: 22px 24px;
  vertical-align: top;
  text-align: left;
}
table.dtCmpTable .dtCmpFeatureIcon {
  margin-right: 8px;
}
table.dtCmpTable .dtCmpNew::before {
  margin-right: 8px;
}
table.dtCmpTable tfoot .dtCmpCell {
  border-top: 2px solid var(--dt-border);
}
table.dtCmpTable .dtCmpOldFooter,
table.dtCmpTable .dtCmpNewFooter {
  text-align: center;
}
table.dtVsTable thead .dtVsUs {
  color: var(--dt-white);
}

/* pills sit under the tablet, not under the copy */
.dtHeroSectionRight .dtHeroPills {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  max-width: none;
  justify-content: center;
}
.dtHeroStats {
  margin-bottom: 0;
}

/* ── Live check: the theme centres every h2 and the section titles ran up to
   46px at desktop width. Left-align them and cap the size one step lower;
   only the capabilities banner stays centred by design. ── */
.dtPageContainer h2 {
  text-align: left;
  font-size: clamp(24px, 2.6vw, 36px);
}
.dtPageContainer .dtCapSectionTitle {
  text-align: center;
}
.dtHeroSectionTitle {
  font-size: clamp(32px, 3.6vw, 48px);
}

/* the theme styles <blockquote> as bold italic; review cards are blockquotes */
.dtPageContainer blockquote.dtRevCard,
.dtPageContainer .dtRevCard .dtRevQuote {
  font-weight: 400;
  font-style: normal;
  quotes: none;
}
.dtPageContainer .dtRevCard .dtRevQuote::before,
.dtPageContainer .dtRevCard .dtRevQuote::after {
  content: none;
}

/* the theme header is position:fixed (68px); keep anchored sections clear of it */
.dtPageContainer section[id] {
  scroll-margin-top: 96px;
}
.dtPageContainer .dtFaqSection {
  padding-top: 112px;
  scroll-margin-top: 72px;
}