/* ═══════════════════════════════════════════════════════════════
   CES — Customer Engagement System landing page
   /wp-content/themes/supsystic_2017/templates/ces/style.css
   Design system shared with pps / cf / ump / pt templates.
   Fonts (Inter, Plus Jakarta Sans) are already loaded by style-new.css
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── Brand colours ── */
  --ces-brand: #0d838d;
  --ces-brand-light: #52bac5;
  --ces-brand-dark: #0a6b74;
  --ces-brand-glow: rgba(13, 131, 141, 0.28);
  --ces-amber: #ffbe2b;
  --ces-amber-dark: #e6a800;
  --ces-amber-glow: rgba(255, 190, 43, 0.35);

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

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

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

/* ─── INNER CONTAINERS ─── */
.cesHeroSection,
.cesFvtSectionInner,
.cesHiwSectionInner,
.cesPfSectionInner,
.cesDfdSectionInner,
.cesCapSectionInner,
.cesExSectionInner,
.cesCasSectionInner,
.cesListSectionInner,
.cesRevSectionInner,
.cesGarSectionInner,
.cesFeatSectionInner,
.cesPrsSectionInner,
.cesSupSectionInner{
  max-width: var(--ces-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ═══════════════════════════════════════════
   HERO  — dark navy, teal glow, amber CTA
═══════════════════════════════════════════ */
.cesHeroWrapper{
  background:
    radial-gradient(ellipse 120% 90% at 70% -10%, #1b2c44 0%, transparent 60%),
    linear-gradient(155deg, var(--ces-dark2) 0%, var(--ces-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.
────────────────────────────────────────────────────────────── */
.cesHeroFx{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cesHeroFx > span{
  position: absolute;
  display: block;
}

/* fine teal dots, faded out towards the edges */
.cesHeroGridDots{
  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 */
.cesHeroGridLines{
  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 */
.cesHeroOrb{
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.cesHeroOrb1{
  width: 560px;
  height: 560px;
  top: -190px;
  left: -130px;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.42) 0%, transparent 70%);
  animation: cesOrbDrift 13s ease-in-out infinite;
}
.cesHeroOrb3{
  width: 360px;
  height: 360px;
  top: 26%;
  right: -110px;
  background: radial-gradient(circle, rgba(82, 186, 197, 0.26) 0%, transparent 70%);
  animation: cesOrbDrift 11s ease-in-out 2s infinite;
}

@keyframes cesOrbDrift {
  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 */
.cesHeroBeam{
  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%
  );
}
.cesHeroBeam::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%
  );
}
.cesHeroSection{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 104px;
  padding-bottom: 116px;
  position: relative;
  z-index: 2;
}

/* Badge */
.cesHeroBadge{
  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;
}
.cesHeroBadgeDot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ces-brand-light);
  box-shadow: 0 0 8px var(--ces-brand-light);
  animation: cesPulse 2s infinite;
}

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

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

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

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

/* "run it in your browser" link - sits under the hero buttons */
.cesHeroTryLink{
  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(--ces-t);
}
.cesHeroTryLink:hover,
.cesHeroTryLink:focus{
  color: var(--ces-white);
  border-color: rgba(82, 186, 197, 0.5);
  background: rgba(13, 131, 141, 0.16);
  text-decoration: none;
}
.cesHeroTryIcon{
  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;
}
.cesHeroTryIcon svg{
  width: 13px;
  height: 13px;
  color: var(--ces-brand-light);
}
.cesHeroTryLink b{
  font-weight: 700;
  color: var(--ces-white);
}
.cesHeroTryLink span{
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

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

/* ── Stats strip ── */
.cesHeroStats{
  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);
}
.cesHeroStat{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding-inline: 6px;
}
.cesHeroStatNum{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ces-font-h);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ces-white);
  font-variant-numeric: tabular-nums;
}

/* a word-sized stat sits a notch smaller than the numeric ones */
.cesHeroStatWord{
  font-size: 20px;
  letter-spacing: -0.01em;
}
.cesHeroStatStar{
  width: 17px;
  height: 17px;
  fill: var(--ces-amber);
  flex-shrink: 0;
}
.cesHeroStatNum em{
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--ces-brand-light);
}
.cesHeroStatLabel{
  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;
}
.cesHeroStatDiv{
  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 ── */
.cesHeroPills{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 560px;
}
.cesHeroPill{
  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(--ces-t);
}
.cesHeroPill:hover{
  color: var(--ces-brand-light);
  border-color: rgba(13, 131, 141, 0.45);
  background: rgba(13, 131, 141, 0.12);
}

/* ── Hero: abstract shapes + tablet (right column) ── */
.cesHeroSectionRight{
  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;
}
.cesHeroSectionLeft{
  min-width: 0;
}

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

/* the slab: a tilted panel, echoing the navy plate the old artwork had */
.cesHeroShapeSlab{
  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 ── */
.cesHeroTablet{
  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);
}
.cesHeroTabletScreen{
  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;
}
.cesHeroTabletVideo{
  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 */
.cesHeroTabletKeys{
  position: absolute;
  top: 22%;
  right: -3px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cesHeroTabletKeys i{
  display: block;
  width: 3px;
  height: 30px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #0d0f12, #2b3038);
}
.cesHeroTabletKeys i:first-child{
  height: 46px;
}

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

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

@keyframes cesHeroRiseShot {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cesHeroBadge{
  animation: cesHeroRise 0.7s var(--ces-ease) both;
}
.cesHeroSectionTitle{
  animation: cesHeroRise 0.7s var(--ces-ease) 0.08s both;
}
.cesHeroSectionSubtitle{
  animation: cesHeroRise 0.7s var(--ces-ease) 0.16s both;
}
.cesHeroCtaRow{
  animation: cesHeroRise 0.7s var(--ces-ease) 0.24s both;
}
.cesHeroStats{
  animation: cesHeroRise 0.7s var(--ces-ease) 0.32s both;
}
.cesHeroPills{
  animation: cesHeroRise 0.7s var(--ces-ease) 0.4s both;
}
.cesHeroSectionRight{
  animation: cesHeroRiseShot 0.9s var(--ces-ease) 0.18s both;
}

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

/* ═══════════════════════════════════════════
   FVT – 4-col features  [white bg]
═══════════════════════════════════════════ */
.cesFvtSection{
  padding: 80px 0;
  background: var(--ces-white);
}
.cesFvtSectionR1{
  font-size: 17px;
  color: var(--ces-text-2);
  line-height: 1.7;
  border-left: 3px solid var(--ces-brand);
  padding-left: 18px;
  margin-bottom: 52px;
  max-width: 820px;
}
.cesFvtSectionR1 p{
  margin: 0;
}
.cesFvtSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesFvtSectionSubtitle{
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 680px;
}
.cesFvtSectionCols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cesFvtSectionCol{
  background: var(--ces-off);
  border-radius: var(--ces-r-lg);
  padding: 28px 24px 24px;
  border: 1.5px solid transparent;
  transition: var(--ces-t);
}
.cesFvtSectionCol:hover{
  border-color: rgba(13, 131, 141, 0.28);
  background: var(--ces-white);
  box-shadow: var(--ces-sh-lg);
  transform: translateY(-3px);
}
.cesFvtSectionColIcon{
  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(--ces-t);
}
.cesFvtSectionCol:hover .cesFvtSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.32);
}
.cesFvtSectionColIcon svg{
  width: 26px;
  height: 26px;
  color: var(--ces-brand);
}
.cesFvtSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--ces-navy);
  margin-bottom: 8px;
}
.cesFvtSectionColSubtitle{
  font-size: 13.5px;
  color: var(--ces-text-2);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   HIW – How it works  [dark bg]
═══════════════════════════════════════════ */
.cesHiwSection{
  background: linear-gradient(160deg, var(--ces-dark) 0%, var(--ces-dark2) 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.cesHiwSection::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. */
.cesHiwMosaic{
  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%
  );
}
.cesHiwMosaicPlane{
  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;
}
.cesHiwMosaicSvg{
  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.
═══════════════════════════════════════════ */
.cesHiwSectionInner{
  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.
═══════════════════════════════════════════ */
.cesHiwSection .cesSectionLabel{
  color: rgba(255, 255, 255, 0.5);
}
.cesHiwSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesHiwSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: 52px;
}
.cesHiwSectionSubtitle p{
  margin: 0;
}
.cesHiwSectionCols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cesHiwSectionCol{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--ces-r-lg);
  padding: 30px 22px;
  transition: var(--ces-t);
}
.cesHiwSectionCol: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 */
.cesHiwStepHead{
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.cesHiwStepNum{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--ces-font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ces-brand-light);
  background: rgba(13, 131, 141, 0.14);
  border: 1.5px solid rgba(82, 186, 197, 0.4);
  transition: var(--ces-t);
}
.cesHiwSectionCol:hover .cesHiwStepNum{
  background: var(--ces-brand);
  border-color: var(--ces-brand-light);
  color: var(--ces-white);
}
.cesHiwSectionColIcon{
  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(--ces-t);
  flex-shrink: 0;
}
.cesHiwSectionCol:hover .cesHiwSectionColIcon{
  background: rgba(13, 131, 141, 0.22);
  border-color: rgba(13, 131, 141, 0.45);
}
.cesHiwSectionColIcon svg{
  width: 25px;
  height: 25px;
  color: var(--ces-brand-light);
}
.cesHiwSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--ces-white);
  margin-bottom: 8px;
}
.cesHiwSectionColSubtitle{
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   PF – "Perfect for" cards  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.cesPfSection{
  background: var(--ces-off);
  padding: 88px 0;
}
.cesPfSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesPfSectionSubtitle{
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 640px;
}
.cesPfSectionSubtitle p{
  margin: 0;
}
.cesPfSectionSubtitle2{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ces-text-3);
  margin-bottom: 32px;
}
.cesPfSectionSubtitle3{
  margin-top: 40px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ces-text-3);
  text-align: center;
}
.cesPfGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.cesPfCard{
  background: var(--ces-white);
  border-radius: var(--ces-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1.5px solid transparent;
  box-shadow: var(--ces-sh);
  transition: var(--ces-t);
}
.cesPfCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--ces-sh-lg);
  border-color: rgba(13, 131, 141, 0.22);
}
.cesPfCardFeat{
  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;
}
.cesPfCardFeat::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ces-brand), var(--ces-brand-dark));
}
.cesPfCardFeat:hover{
  border-color: rgba(13, 131, 141, 0.5);
  box-shadow: 0 16px 48px rgba(13, 131, 141, 0.22);
}
.cesPfCardFeat .cesPfCardTitle{
  color: var(--ces-white);
  font-size: 20px;
}
.cesPfCardFeat .cesPfCardText{
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
}
.cesPfCardIcon{
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--ces-brand) 0%, var(--ces-brand-dark) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px var(--ces-brand-glow);
}
.cesPfCardIcon svg{
  width: 32px;
  height: 32px;
  color: #fff;
}
.cesPfCardIconSm{
  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(--ces-t);
}
.cesPfCard:hover .cesPfCardIconSm{
  background: rgba(13, 131, 141, 0.16);
  border-color: rgba(13, 131, 141, 0.28);
}
.cesPfCardIconSm svg{
  width: 28px;
  height: 28px;
  color: var(--ces-brand);
}
.cesPfCardTitle{
  font-size: 16px;
  font-weight: 700;
  color: var(--ces-navy);
}
.cesPfCardText{
  font-size: 14px;
  color: var(--ces-text-2);
  line-height: 1.65;
  flex: 1;
}
.cesPfCardTag{
  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(--ces-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]
═══════════════════════════════════════════ */
.cesDfdSection{
  background: var(--ces-white);
  padding: 80px 0;
}
.cesDfdSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.cesDfdSectionSubtitle{
  font-size: 16px;
  color: var(--ces-text-2);
  margin-bottom: 40px;
}
.cesDfdSectionCols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.cesDfdSectionCol{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ces-off);
  border-radius: var(--ces-r);
  padding: 18px 20px;
  border: 1.5px solid var(--ces-border);
  transition: var(--ces-t);
}
.cesDfdSectionCol:hover{
  border-color: var(--ces-brand);
  background: rgba(13, 131, 141, 0.06);
}
.cesDfdSectionColIcon{
  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(--ces-t);
}
.cesDfdSectionCol:hover .cesDfdSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.3);
}
.cesDfdSectionColIcon svg{
  width: 20px;
  height: 20px;
  color: var(--ces-brand);
}
.cesDfdSectionColSubtitle{
  font-size: 14px;
  font-weight: 600;
  color: var(--ces-text);
}
.cesDfdSectionSubtitle2{
  margin-top: 32px;
  font-size: 15px;
  color: var(--ces-text-3);
  font-style: italic;
}

/* ═══════════════════════════════════════════
   CAP – Capabilities banner  [dark navy]
═══════════════════════════════════════════ */
.cesCapSection{
  /* 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(--ces-navy) 0%, #1d2b40 52%, var(--ces-dark) 100%);
  padding: 74px 0;
  text-align: center;
}
.cesCapSection .cesSectionLabel{
  display: inline-flex;
  color: var(--ces-brand-light);
}
.cesCapSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesCapSectionSubtitle{
  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.
═══════════════════════════════════════════ */
.cesExSection{
  background: var(--ces-off);
  padding: 88px 0;
}
.cesExSectionHeader{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cesExSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesExSectionSubtitle{
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  max-width: 620px;
}
.cesExSectionHeader .cesBtnLink{
  white-space: nowrap;
  padding-bottom: 6px;
}
.cesBtnLink{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ces-brand);
  text-decoration: none;
  border-bottom: 2px solid rgba(13, 131, 141, 0.25);
  transition: var(--ces-t);
}
.cesBtnLink:hover,
.cesBtnLink:focus{
  color: var(--ces-brand-dark);
  border-bottom-color: var(--ces-brand);
  text-decoration: none;
}
.cesBtnLink svg{
  width: 15px;
  height: 15px;
  transition: transform var(--ces-t);
}
.cesBtnLink:hover svg{
  transform: translateX(3px);
}

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

/* card grid */
.cesExGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cesExCard{
  position: relative;
  display: block;
  border-radius: var(--ces-r-lg);
  overflow: hidden;
  background: var(--ces-white);
  border: 1.5px solid transparent;
  box-shadow: var(--ces-sh);
  transition: var(--ces-t);
  text-decoration: none;
}
.cesExCard:hover,
.cesExCard:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--ces-sh-lg);
  border-color: rgba(13, 131, 141, 0.28);
  text-decoration: none;
}
.cesExCardMedia{
  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(--ces-off);
}
.cesExCardMedia img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.55s var(--ces-ease);
}
.cesExCard:hover .cesExCardMedia img{
  transform: scale(1.05);
}
.cesExCardMedia::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 35, 51, 0.5) 100%);
  opacity: 0;
  transition: var(--ces-t);
}
.cesExCard:hover .cesExCardMedia::after{
  opacity: 1;
}
.cesExCardBody{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}
.cesExCardTitle{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ces-navy);
}
.cesExCardTag{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ces-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. */
.cesExCardPro .cesExCardTag{
  color: var(--ces-white);
  background: var(--ces-brand);
  border-color: var(--ces-brand);
}
.cesExFooter{
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cesExMore{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ces-brand);
  background: var(--ces-white);
  border: 1.5px solid var(--ces-border);
  border-radius: 40px;
  padding: 13px 26px;
  cursor: pointer;
  transition: var(--ces-t);
}
.cesExMore:hover{
  border-color: var(--ces-brand);
  background: rgba(13, 131, 141, 0.06);
}
.cesExMore svg{
  width: 15px;
  height: 15px;
  transition: transform var(--ces-t);
}
.cesExMore[aria-expanded="true"] svg{
  transform: rotate(180deg);
}
.cesExGrid .cesExCard[hidden]{
  display: none;
}

/* ═══════════════════════════════════════════
   CAS – Scale cards  [dark bg]
═══════════════════════════════════════════ */
.cesCasSection{
  background: var(--ces-dark);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.cesCasSection::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%);
}
.cesCasSectionInner{
  position: relative;
  z-index: 1;
}
.cesCasHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.cesCasHeader > div:first-child{
  flex: 1;
  min-width: 260px;
}
.cesCasSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
  text-wrap: balance;
}
.cesCasSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 520px;
}
.cesCasEdgePill{
  background: rgba(13, 131, 141, 0.12);
  border: 1px solid rgba(13, 131, 141, 0.28);
  border-radius: var(--ces-r-lg);
  padding: 22px 24px;
  max-width: 260px;
  flex-shrink: 0;
}
.cesCasEdgePillIcon{
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--ces-brand) 0%, var(--ces-brand-dark) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.cesCasEdgePillIcon svg{
  width: 20px;
  height: 20px;
  color: #fff;
}
.cesCasEdgePillText{
  font-size: 14px;
  font-weight: 700;
  color: var(--ces-brand-light);
  margin-bottom: 6px;
}
.cesCasEdgePillSub{
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
}
.cesCasCards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.cesCasCard{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ces-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--ces-t);
  position: relative;
  overflow: hidden;
}
.cesCasCard::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ces-brand), transparent);
  opacity: 0;
  transition: var(--ces-t);
}
.cesCasCard:hover{
  background: rgba(13, 131, 141, 0.09);
  border-color: rgba(13, 131, 141, 0.3);
  transform: translateY(-3px);
}
.cesCasCard:hover::before{
  opacity: 1;
}
.cesCasCardWide{
  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;
}
.cesCasCardWide::before{
  opacity: 1;
}
.cesCasCardNum{
  font-family: var(--ces-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;
}
.cesCasCardWide .cesCasCardNum{
  font-size: 80px;
  top: 12px;
  right: 20px;
}
.cesCasCardIcon{
  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;
}
.cesCasCardIcon svg{
  width: 22px;
  height: 22px;
  color: var(--ces-brand-light);
}
.cesCasCardWide .cesCasCardIcon{
  width: 52px;
  height: 52px;
  background: rgba(13, 131, 141, 0.24);
}
.cesCasCardWide .cesCasCardIcon svg{
  width: 26px;
  height: 26px;
}
.cesCasCardTitle{
  font-size: 16px;
  font-weight: 700;
  color: var(--ces-white);
  line-height: 1.3;
}
.cesCasCardWide .cesCasCardTitle{
  font-size: 22px;
}
.cesCasCardText{
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.65;
  flex: 1;
}
.cesCasCardWide .cesCasCardText{
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
}
.cesCasCardTag{
  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(--ces-brand-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 4px;
}
.cesCasFootnote{
  margin-top: 36px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 760px;
}
.cesCasFootnote b{
  color: var(--ces-brand-light);
}

/* ═══════════════════════════════════════════
   LIST – Comparison table  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.cesListSection{
  background: var(--ces-off);
  padding: 88px 0;
}
.cesListSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.cesListSectionSubtitle{
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  margin-bottom: 44px;
  max-width: 640px;
}
.cesListSectionSubtitle p{
  margin: 0 0 6px;
}
.cesListSectionSubtitle p:last-child{
  margin-bottom: 0;
}
.cesCmpTableScroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.cesCmpTable{
  min-width: 640px;
  border-radius: var(--ces-r-xl);
  overflow: hidden;
  border: 1.5px solid var(--ces-border);
  margin-top: 8px;
}
.cesCmpRow{
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  border-bottom: 1px solid var(--ces-border);
}
.cesCmpRow:last-child{
  border-bottom: none;
}
.cesCmpCell{
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cesCmpHeader{
  background: var(--ces-navy);
}
.cesCmpHeader .cesCmpCell{
  padding: 22px 24px;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.cesCmpPlanName{
  font-size: 17px;
  font-weight: 700;
  color: var(--ces-white);
}
.cesCmpPlanSub{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.cesCmpBadge{
  display: inline-flex;
  background: linear-gradient(135deg, var(--ces-brand) 0%, var(--ces-brand-dark) 100%);
  color: var(--ces-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}
.cesCmpPlanHighlight{
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  position: relative;
}
.cesCmpPlanHighlight::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ces-brand), var(--ces-brand-dark));
}
.cesCmpFeatureCol{
  background: var(--ces-white);
  font-weight: 600;
  color: var(--ces-navy);
  font-size: 14px;
  border-right: 1px solid var(--ces-border);
}
.cesCmpFeatureIcon{
  font-size: 16px;
  flex-shrink: 0;
}
.cesCmpOld{
  color: var(--ces-text-3);
  background: var(--ces-white);
  border-right: 1px solid var(--ces-border);
}
.cesCmpRow:nth-child(even) .cesCmpOld{
  background: #f2f6fb;
}
.cesCmpNew{
  background: rgba(13, 131, 141, 0.05);
  color: var(--ces-text);
  font-weight: 500;
}
.cesCmpNew::before{
  content: "\2713";
  color: var(--ces-brand);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 2px;
}
.cesCmpRow:nth-child(even) .cesCmpNew{
  background: rgba(13, 131, 141, 0.09);
}
.cesCmpRowLast{
  border-bottom: 2px solid var(--ces-border);
}
.cesCmpFooter{
  background: var(--ces-white);
  border-bottom: none;
}
.cesCmpOldFooter{
  color: var(--ces-text-3);
  font-size: 13px;
  border-right: 1px solid var(--ces-border);
  justify-content: center;
}
.cesCmpCross{
  color: #e5484d;
  font-weight: 700;
  margin-right: 4px;
}
.cesCmpNewFooter{
  background: rgba(13, 131, 141, 0.06);
  justify-content: center;
}
.cesCmpNewFooter .cesBtnPrimary{
  font-size: 13px;
  padding: 11px 24px;
}

/* ═══════════════════════════════════════════
   GAR – Guarantee  [white bg]
═══════════════════════════════════════════ */
.cesGarSection{
  background: var(--ces-white);
  padding: 80px 0;
}
.cesGarSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cesGarWave{
  max-width: 320px;
  margin-bottom: 20px;
}
.cesGarWave svg{
  width: 100%;
  height: 16px;
  display: block;
}
.cesGarSectionSubtitle{
  font-size: 18px;
  font-weight: 700;
  color: var(--ces-brand);
  margin-bottom: 8px;
}
.cesGarSectionSubtitle2{
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 640px;
}
.cesGarBox{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  background: var(--ces-white);
  border-radius: var(--ces-r-xl);
  padding: 40px;
  box-shadow: var(--ces-sh-lg);
  border: 1.5px solid var(--ces-border);
  align-items: start;
}
.cesGarBoxLeft{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.cesGarBadge{
  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(--ces-r-lg);
  padding: 16px 20px;
}
.cesGarBadgeIcon{
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--ces-brand) 0%, var(--ces-brand-dark) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cesGarBadgeIcon svg{
  width: 30px;
  height: 30px;
  color: #fff;
}
.cesGarBadge strong{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--ces-navy);
}
.cesGarBadge span{
  font-size: 12px;
  color: var(--ces-text-3);
}
.cesGarPayments img{
  width: 100%;
  max-width: 250px;
}
.cesGarBoxRight p{
  font-size: 15px;
  color: var(--ces-text-2);
  line-height: 1.7;
  margin-bottom: 14px;
}
.cesGarBoxRight p:last-child{
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   FEAT – Pro features  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.cesFeatSection{
  background: var(--ces-off);
  padding: 88px 0;
}
.cesFeatSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesFeatSectionTitle2{
  font-size: 22px;
  font-weight: 700;
  color: var(--ces-navy);
  margin-top: 52px;
  margin-bottom: 10px;
}
.cesFeatSectionSubtitle{
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 680px;
}
.cesFeatSectionSubtitle2{
  font-size: 15px;
  color: var(--ces-text-3);
  line-height: 1.7;
  max-width: 660px;
}
.cesFeatSectionCols{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cesFeatSectionCol{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--ces-white);
  border-radius: var(--ces-r-lg);
  padding: 26px 24px;
  border: 1.5px solid transparent;
  transition: var(--ces-t);
}
.cesFeatSectionCol:hover{
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--ces-sh);
}
.cesFeatSectionColIcon{
  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(--ces-t);
}
.cesFeatSectionCol:hover .cesFeatSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.3);
}
.cesFeatSectionColIcon svg{
  width: 24px;
  height: 24px;
  color: var(--ces-brand);
}
.cesFeatSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--ces-navy);
  margin-bottom: 6px;
}
.cesFeatSectionColSubtitle{
  font-size: 13.5px;
  color: var(--ces-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.
═══════════════════════════════════════════ */
.cesMtxSection{
  background: var(--ces-white);
}
.cesMtxTop{
  /* was the only full dark band starting at --ces-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(--ces-dark) 0%, #141f33 54%, var(--ces-dark2) 100%);
  padding: 88px 0 128px;
  position: relative;
  overflow: hidden;
}
.cesMtxTop::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) {
  
}
.cesMtxTop .cesSectionLabel{
  color: var(--ces-brand-light);
}
.cesMtxBottom{
  background: var(--ces-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;
}
.cesMtxSectionInner{
  max-width: var(--ces-max);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}
.cesMtxSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-wrap: balance;
}
.cesMtxSectionSubtitle{
  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 ── */
.cesMtxScore{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cesMtxPlan{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ces-r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.cesMtxPlanPro{
  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);
}
.cesMtxPlanPro::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ces-brand-light), #a0eaf3);
}
.cesMtxPlanTop{
  display: flex;
  align-items: center;
  gap: 22px;
}

/* the ring */
.cesMtxRing{
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}
.cesMtxRing svg{
  width: 92px;
  height: 92px;
  transform: rotate(-90deg);
  display: block;
}
.cesMtxRingTrack{
  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. */
.cesMtxRingFill{
  fill: none;
  stroke: var(--ces-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);
}
.cesMtxPlanPro .cesMtxRingFill{
  stroke-dashoffset: 0; /* 41 of 41 */
}

/* the script adds this once it is ready to run the reveal */
.cesMtxAnimReady .cesMtxRingFill{
  stroke-dashoffset: 251.33;
}
.cesMtxAnimReady .cesMtxPlan.cesIsIn .cesMtxRingFill{
  stroke-dashoffset: 153.25;
}
.cesMtxAnimReady .cesMtxPlanPro.cesIsIn .cesMtxRingFill{
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cesMtxRingFill {
    transition: none;
  }
}
.cesMtxPlanPro .cesMtxRingFill{
  stroke: var(--ces-brand-light);
}
.cesMtxPlan:not(.cesMtxPlanPro) .cesMtxRingFill{
  stroke: var(--ces-brand);
}
.cesMtxRingLabel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--ces-font-h);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cesMtxRingNum{
  font-size: 24px;
  font-weight: 800;
  color: var(--ces-white);
}
.cesMtxRingOf{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.cesMtxPlanName{
  font-family: var(--ces-font-h);
  font-size: 22px;
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cesMtxPlanPrice{
  font-size: 15px;
  font-weight: 700;
  color: var(--ces-brand-light);
}
.cesMtxPlanPro .cesMtxPlanPrice{
  color: var(--ces-brand-light);
}
.cesMtxPlanPrice span{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-left: 4px;
}
.cesMtxPlanPriceAlt{
  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);
}
.cesMtxPlanPriceAlt span{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.cesMtxPlanPriceAlt b{
  font-family: var(--ces-font-h);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ces-brand-light);
  font-variant-numeric: tabular-nums;
}
.cesMtxHeadPlanAlt{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ces-brand-light);
}
.cesMtxPlanText{
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  flex: 1;
}
.cesMtxPlan .cesBtnGhost,
.cesMtxPlan .cesBtnPrimary{
  align-self: flex-start;
}

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

/* ── The table card ── */
.cesMtxTableWrap{
  margin-top: -80px;
  background: var(--ces-white);
  border: 1.5px solid var(--ces-border);
  border-radius: var(--ces-r-xl);
  box-shadow: var(--ces-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;
}
.cesMtxTable{
  width: 100%;
}
.cesMtxTable [hidden]{
  display: none !important;
}
.cesMtxRow{
  display: grid;
  grid-template-columns: 1fr 168px 168px;
  border-top: 1px solid var(--ces-border);
  align-items: stretch;
}
.cesMtxCell{
  padding: 5px 20px;
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cesMtxCellFeature{
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-left: 28px;
  color: var(--ces-navy);
  font-weight: 600;
}
.cesMtxHint{
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ces-text-3);
  line-height: 1.5;
}

/* header row — sticky so column identity survives a long scroll */
.cesMtxHeadRow{
  position: sticky;
  top: 0;
  z-index: 4;
  border-top: none;
  background: var(--ces-navy);
}
.cesMtxHeadRow .cesMtxCell{
  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;
}
.cesMtxHeadRow .cesMtxCellFeature{
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 28px;
}
.cesMtxHeadPlan{
  flex-direction: column;
  gap: 2px;
}
.cesMtxHeadPlan strong{
  font-family: var(--ces-font-h);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ces-white);
}
.cesMtxHeadPro{
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  position: relative;
}
.cesMtxHeadPro::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ces-brand), var(--ces-brand-light));
}
.cesMtxHeadPro strong{
  color: var(--ces-brand-light);
}

/* group header row — carries the free-coverage bar */
.cesMtxGroup{
  display: grid;
  grid-template-columns: 1fr 336px;
  align-items: center;
  gap: 20px;
  background: var(--ces-off);
  border-top: 1px solid var(--ces-border);
  padding: 16px 28px;
}
.cesMtxGroupName{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ces-font-h);
  font-size: 15px;
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.01em;
}
.cesMtxGroupIcon{
  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;
}
.cesMtxGroupIcon svg{
  width: 17px;
  height: 17px;
  color: var(--ces-brand);
}
.cesMtxGroupMeter{
  display: flex;
  align-items: center;
  gap: 12px;
}
.cesMtxGroupBar{
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: var(--ces-off2);
  overflow: hidden;
  min-width: 80px;
}
.cesMtxGroupBarFill{
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--ces-brand-light), var(--ces-brand));
}
.cesMtxGroupCount{
  font-size: 12px;
  font-weight: 700;
  color: var(--ces-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cesMtxGroupCount b{
  color: var(--ces-brand);
  font-weight: 800;
}
.cesMtxGroupCountEmpty b{
  color: var(--ces-text-3);
}

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

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

/* ── Matrix responsive ── */

@media (max-width: 900px) {
  .cesMtxScore {
    grid-template-columns: 1fr;
  }
  .cesMtxRow {
    grid-template-columns: 1fr 118px 118px;
  }
  .cesMtxGroup {
    grid-template-columns: 1fr 236px;
  }
}

@media (max-width: 640px) {
  .cesMtxTop {
    padding: 72px 0 110px;
  }
  .cesMtxRow {
    grid-template-columns: 1fr 76px 76px;
  }
  .cesMtxCell {
    padding: 13px 8px;
    font-size: 13.5px;
  }
  .cesMtxCellFeature,
  .cesMtxHeadRow .cesMtxCellFeature,
  .cesMtxFootRow .cesMtxCellFeature {
    padding-left: 16px;
    padding-right: 10px;
  }
  .cesMtxHeadRow .cesMtxCell {
    padding: 14px 6px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .cesMtxHeadPlan strong {
    font-size: 13px;
  }
  .cesMtxHeadPlanSub,
  .cesMtxHeadPlanAlt {
    display: none;
  }
  .cesMtxGroup {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  .cesMtxVal {
    font-size: 11px;
    line-height: 1.35;
  }
  .cesMtxYes,
  .cesMtxNo {
    width: 22px;
    height: 22px;
  }
  .cesMtxControls {
    padding: 18px 16px;
  }
  .cesMtxFootRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px 16px;
  }
  .cesMtxFootRow .cesMtxCell,
  .cesMtxFootRow .cesMtxCellFeature {
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .cesMtxFootRow .cesMtxCellPro {
    background: transparent;
  }
  .cesMtxFootRow .cesBtnPrimary {
    padding: 12px 26px;
    font-size: 12px;
  }
  .cesMtxVal {
    overflow-wrap: break-word;
  }
}

/* ═══════════════════════════════════════════
   REV – Reviews  [dark bg]
   Real wordpress.org reviews, each linking to
   the review it was taken from.
═══════════════════════════════════════════ */
.cesRevSection{
  background: linear-gradient(165deg, var(--ces-dark) 0%, #101b2c 55%, var(--ces-dark2) 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.cesRevSection::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;
}
.cesRevSectionInner{
  position: relative;
  z-index: 1;
}
.cesRevSection .cesSectionLabel{
  color: var(--ces-brand-light);
}
.cesRevHeader{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.cesRevSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-wrap: balance;
}
.cesRevSectionSubtitle{
  font-size: 16px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
  max-width: 560px;
}

/* score block, links to the review index */
.cesRevScore{
  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(--ces-r-lg);
  padding: 18px 24px;
  text-decoration: none;
  transition: var(--ces-t);
  flex-shrink: 0;
}
.cesRevScore:hover,
.cesRevScore:focus{
  border-color: rgba(82, 186, 197, 0.45);
  background: rgba(13, 131, 141, 0.12);
  text-decoration: none;
}
.cesRevScoreTop{
  display: flex;
  align-items: center;
  gap: 10px;
}
.cesRevScoreNum{
  font-family: var(--ces-font-h);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--ces-white);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cesRevScoreNum em{
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}
.cesRevStars{
  display: inline-flex;
  gap: 2px;
}
.cesRevStars svg{
  width: 15px;
  height: 15px;
  fill: var(--ces-amber);
}
.cesRevScoreMeta{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

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

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

@media (max-width: 620px) {
  .cesRevGrid {
    grid-template-columns: 1fr;
  }
  .cesRevCardFeat {
    grid-column: span 1;
  }
  .cesRevScore {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════
   PRS – "usually an upgrade" strip
═══════════════════════════════════════════ */
.cesPrsIncluded{
  background: var(--ces-off);
  border: 1.5px solid var(--ces-border);
  border-radius: var(--ces-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;
}
.cesPrsIncludedIcon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ces-white);
  border: 1.5px solid rgba(13, 131, 141, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cesPrsIncludedIcon svg{
  width: 26px;
  height: 26px;
  color: var(--ces-brand);
}
.cesPrsIncludedTitle{
  font-family: var(--ces-font-h);
  font-size: 17px;
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.cesPrsIncludedText{
  font-size: 14.5px;
  color: var(--ces-text-2);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .cesPrsIncluded {
    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.
═══════════════════════════════════════════ */
.cesCapSection{
  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. */
.cesCapGlow{
  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) {
  .cesCapGlow {
    width: 560px;
  }
}
.cesCapFacet{
  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) {
  .cesCapFacet {
    width: 460px;
  }
}

/* the rhombus outline, drawn rather than implied - kept outside the facet so
   the facet's soft mask never eats it */
.cesCapFacetEdge{
  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) {
  .cesCapFacetEdge {
    width: 460px;
  }
}
.cesCapSheen{
  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: cesCapSweep 6s cubic-bezier(0.42, 0, 0.5, 1) infinite;
}

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

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

/* ═══════════════════════════════════════════
   SUP – Support CTA  [dark bg]
═══════════════════════════════════════════ */
.cesSupSection{
  background: linear-gradient(160deg, var(--ces-dark) 0%, var(--ces-dark2) 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.cesSupSection::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%);
}
.cesSupSectionInner{
  position: relative;
  z-index: 1;
}
.cesSupSection .cesSectionLabel{
  color: var(--ces-brand-light);
}
.cesSupSectionInnerContainer{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.cesSupSectionTitle{
  font-family: var(--ces-font-h);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.cesSupSectionSubtitle{
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 28px;
  line-height: 1.7;
  max-width: 560px;
}
.cesSupSectionSubtitle p{
  margin-bottom: 10px;
}
.cesSupSectionSubtitle p:last-child{
  margin-bottom: 0;
}
.cesSupSectionTitle2{
  font-size: 18px;
  font-weight: 700;
  color: var(--ces-brand-light);
  margin-bottom: 10px;
}
.cesSupSectionSubtitle2{
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  max-width: 560px;
}
.cesSupSectionSubtitle2 p{
  margin-bottom: 8px;
}
.cesSupSectionSubtitle2 p:last-child{
  margin-bottom: 0;
}
.cesSupSectionInnerRight{
  flex-shrink: 0;
}
.cesSupIllustration{
  width: 240px;
  height: 240px;
}
.cesSupCtaRow{
  margin-top: 48px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.cesSupCtaBtn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ces-amber);
  color: #1a1a1a;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 44px;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 8px 32px var(--ces-amber-glow), 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: var(--ces-t);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.cesSupCtaBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  border-radius: inherit;
}
.cesSupCtaBtn:hover,
.cesSupCtaBtn:focus{
  background: var(--ces-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;
}
.cesSupCtaBtn svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--ces-t);
}
.cesSupCtaBtn:hover svg{
  transform: translateX(4px);
}

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

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

@media (prefers-reduced-motion: reduce) {
  .cesPageContainer *,
  .cesPageContainer *::before,
  .cesPageContainer *::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) {
  .cesFvtSectionCols,
  .cesHiwSectionCols,
  .cesDfdSectionCols {
    grid-template-columns: repeat(2, 1fr);
  }
  .cesFeatSectionCols {
    grid-template-columns: 1fr;
  }
  .cesExGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .cesPfGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cesPfCardFeat {
    grid-row: auto;
  }
  .cesCasCards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cesCasCardWide {
    grid-column: 1/3;
    grid-row: auto;
  }
}

@media (max-width: 860px) {
  .cesHeroSection {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 80px;
  }
  
  .cesSupSectionInnerContainer {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cesSupSectionInnerRight {
    display: none;
  }
  .cesGarBox {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .cesHeroSectionTitle {
    font-size: clamp(30px, 8vw, 44px);
  }
  .cesHeroStats {
    padding: 16px 4px;
  }
  .cesHeroStatNum {
    font-size: 20px;
  }
  .cesHeroStatWord {
    font-size: 16px;
  }
  .cesHeroStatLabel {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  .cesHeroStatStar {
    width: 14px;
    height: 14px;
  }
  .cesHeroPill {
    font-size: 11.5px;
    padding: 5px 12px;
  }
  .cesHeroCtaRow {
    flex-direction: column;
    align-items: stretch;
  }
  .cesHeroCtaRow .cesBtnPrimary,
  .cesHeroCtaRow .cesBtnGhost {
    justify-content: center;
  }
  .cesFvtSectionCols,
  .cesDfdSectionCols,
  .cesExGrid {
    grid-template-columns: 1fr;
  }
  .cesHiwSectionCols {
    grid-template-columns: 1fr 1fr;
  }
  .cesExSectionHeader {
    align-items: flex-start;
  }
}

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

@media (max-width: 540px) {
  .cesCasCards {
    grid-template-columns: 1fr;
  }
  .cesCasCardWide {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
  .cesCasHeader {
    flex-direction: column;
  }
  .cesCasEdgePill {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .cesHeroStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .cesHeroStatDiv {
    display: none;
  }
  .cesHeroGridLines {
    background-size: 92px 92px;
  }
  .cesHiwSectionCols {
    grid-template-columns: 1fr;
  }
  .cesSupCtaBtn {
    font-size: 15px;
    padding: 16px 28px;
    text-align: center;
  }
  :root {
    --ces-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.
═══════════════════════════════════════════ */
.cesFvtSectionTitle,
.cesHiwSectionTitle,
.cesPfSectionTitle,
.cesDfdSectionTitle,
.cesCapSectionTitle,
.cesExSectionTitle,
.cesListSectionTitle,
.cesGarSectionTitle,
.cesFeatSectionTitle,
.cesSupSectionTitle{
  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. */
.cesPageContainer h1,
.cesPageContainer h2,
.cesPageContainer h3 {
  margin-top: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  font-style: normal;
}
.cesPageContainer h3 {
  font-family: inherit;
}
.cesPageContainer h2 {
  line-height: 1.15;
}

/* ── Hero: three real screens cycling in the tablet ── */
.cesHeroTabletScreen {
  aspect-ratio: 1000 / 580;
}
.cesHeroTabletScreens {
  position: relative;
}
.cesHeroScreen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.cesHeroTabletScreens:not(.cesHeroCycling) .cesHeroScreen1,
.cesHeroScreen.cesHeroScreenOn {
  opacity: 1;
}

/* ── Demo: the live table ── */
.cesDemoSection {
  background: var(--ces-off);
  padding: 80px 0;
}
.cesDemoSectionInner {
  max-width: var(--ces-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.cesDemoHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cesDemoSectionTitle {
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cesDemoSectionSubtitle {
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  max-width: 680px;
}
.cesDemoHint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ces-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;
}
.cesDemoHintDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ces-brand-light);
  box-shadow: 0 0 8px var(--ces-brand-light);
  animation: cesPulse 2s infinite;
}
.cesDemoGrid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
.cesDemoTable {
  min-width: 0;
  background: var(--ces-white);
  border: 1.5px solid transparent;
  border-radius: var(--ces-r-xl);
  padding: 22px;
  box-shadow: var(--ces-sh-lg);
  overflow-x: auto;
}
.cesDemoTable table {
  max-width: 100%;
}
.cesDemoCharts {
  display: grid;
  gap: 16px;
}
.cesDemoChartsTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ces-text-3);
  margin: 0;
}
.cesDemoChart {
  background: var(--ces-white);
  border: 1.5px solid var(--ces-border);
  border-radius: var(--ces-r-lg);
  padding: 14px;
  min-height: 200px;
}
@media (max-width: 1000px) {
  .cesDemoGrid {
    grid-template-columns: 1fr;
  }
  .cesDemoCharts {
    grid-template-columns: repeat(3, 1fr);
  }
  .cesDemoChartsTitle {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .cesDemoCharts {
    grid-template-columns: 1fr;
  }
}

/* ── AI / MCP band ── */
.cesAiSection {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 110% 130% at 72% -18%, #22344f 0%, transparent 60%),
    linear-gradient(158deg, var(--ces-dark) 0%, #141f33 54%, var(--ces-dark2) 100%);
  padding: 96px 0;
}
.cesAiGrid {
  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%);
}
.cesAiSectionInner {
  position: relative;
  z-index: 1;
  max-width: var(--ces-max);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.cesAiBadge {
  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;
}
.cesAiBadgeDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ces-brand-light);
  box-shadow: 0 0 8px var(--ces-brand-light);
  animation: cesPulse 2s infinite;
}
.cesAiSectionTitle {
  font-family: var(--ces-font-h);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  color: var(--ces-white);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
  text-wrap: balance;
}
.cesAiSectionTitle span {
  background: linear-gradient(90deg, var(--ces-brand-light), #a8eef7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cesAiSectionSubtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 28px;
}
.cesAiSectionSubtitle b {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}
.cesAiCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cesAiCard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ces-r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cesAiCardPro {
  background: rgba(13, 131, 141, 0.13);
  border-color: rgba(13, 131, 141, 0.4);
}
.cesAiTag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.cesAiTagFree {
  color: var(--ces-brand-light);
  background: rgba(82, 186, 197, 0.12);
  border: 1px solid rgba(82, 186, 197, 0.35);
}
.cesAiTagPro {
  color: #fff;
  background: var(--ces-brand);
  border: 1px solid var(--ces-brand-light);
}
.cesAiCardTitle {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ces-white);
  line-height: 1.3;
  margin: 0;
}
.cesAiCardText {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.cesAiLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--ces-brand-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(82, 186, 197, 0.35);
  padding-bottom: 2px;
  transition: var(--ces-t);
}
.cesAiLink:hover,
.cesAiLink:focus {
  color: var(--ces-white);
  border-color: var(--ces-white);
  text-decoration: none;
}
.cesAiLink svg {
  width: 13px;
  height: 13px;
}
.cesAiTerminal {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ces-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;
}
.cesAiTermHead {
  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);
}
.cesAiTermDots {
  display: flex;
  gap: 6px;
}
.cesAiTermDots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cesAiTermDots i:nth-child(1) { background: #ff5f57; }
.cesAiTermDots i:nth-child(2) { background: #febc2e; }
.cesAiTermDots i:nth-child(3) { background: #28c840; }
.cesAiTermTitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.cesAiTermBody {
  padding: 18px 20px 20px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
}
.cesAiTermYou {
  color: rgba(255, 255, 255, 0.88);
}
.cesAiTermYou span {
  color: var(--ces-brand-light);
  font-weight: 700;
  margin-right: 6px;
}
.cesAiTermAi {
  color: rgba(255, 255, 255, 0.55);
  padding-left: 22px;
  margin-bottom: 4px;
}
.cesAiTermAi span {
  color: #3ddc84;
  margin-right: 6px;
}
.cesAiTermAi b {
  color: #fff;
  font-weight: 600;
}
.cesAiTermCursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--ces-brand-light);
  vertical-align: -2px;
  animation: cesBlink 1s steps(1) infinite;
}
@keyframes cesBlink {
  50% { opacity: 0; }
}
@media (max-width: 1000px) {
  .cesAiSectionInner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .cesAiCards {
    grid-template-columns: 1fr;
  }
}

/* ── WooCommerce product table band ── */
.cesWooSection {
  position: relative;
  overflow: hidden;
  background: var(--ces-off);
  padding: 88px 0;
}
.cesWooOrb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.cesWooOrb1 {
  width: 460px;
  height: 460px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(13, 131, 141, 0.22), transparent 70%);
}
.cesWooOrb2 {
  width: 380px;
  height: 380px;
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(82, 186, 197, 0.18), transparent 70%);
}
.cesWooSectionInner {
  position: relative;
  z-index: 1;
  max-width: var(--ces-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.cesWooTop {
  max-width: 760px;
  margin-bottom: 40px;
}
.cesWooBadge {
  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(--ces-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;
}
.cesWooBadgeDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ces-brand);
  box-shadow: 0 0 8px var(--ces-brand-light);
}
.cesWooTitle {
  font-family: var(--ces-font-h);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 14px;
  text-wrap: balance;
}
.cesWooTitle span {
  color: var(--ces-brand);
}
.cesWooSubtitle {
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
}
.cesWooGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cesWooCard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--ces-white);
  border: 1.5px solid transparent;
  border-radius: var(--ces-r-lg);
  padding: 22px;
  box-shadow: var(--ces-sh);
  transition: var(--ces-t);
}
.cesWooCard:hover {
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--ces-sh-lg);
  transform: translateY(-3px);
}
.cesWooCardIcon {
  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;
}
.cesWooCardIcon svg {
  width: 23px;
  height: 23px;
  color: var(--ces-brand);
}
.cesWooCardTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ces-navy);
  margin-bottom: 5px;
}
.cesWooCardText {
  font-size: 13.5px;
  color: var(--ces-text-2);
  line-height: 1.6;
}
.cesWooCta {
  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 */
.cesWooCta .cesBtnGhost {
  border-color: rgba(13, 131, 141, 0.4);
  color: var(--ces-brand);
}
.cesWooCta .cesBtnGhost:hover,
.cesWooCta .cesBtnGhost:focus {
  background: rgba(13, 131, 141, 0.08);
  border-color: var(--ces-brand);
  color: var(--ces-brand-dark);
}
.cesWooCtaNote {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ces-text-3);
}
@media (max-width: 760px) {
  .cesWooGrid {
    grid-template-columns: 1fr;
  }
}

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

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

/* ── Matrix rings: this page has a different Free / total split ── */
.cesMtxRingFill,
.cesMtxAnimReady .cesMtxPlan.cesIsIn .cesMtxRingFill {
  stroke-dashoffset: 121.01;
}
.cesMtxPlanPro .cesMtxRingFill,
.cesMtxAnimReady .cesMtxPlanPro.cesIsIn .cesMtxRingFill {
  stroke-dashoffset: 0;
}
.cesMtxAnimReady .cesMtxRingFill {
  stroke-dashoffset: 251.33;
}
.cesMtxAnimReady .cesMtxPlan.cesIsIn .cesMtxRingFill {
  stroke-dashoffset: 121.01;
}
.cesMtxAnimReady .cesMtxPlanPro.cesIsIn .cesMtxRingFill {
  stroke-dashoffset: 0;
}
/* feature names that link to their own page */
.cesMtxCellFeature a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(13, 131, 141, 0.45);
}
.cesMtxCellFeature a:hover {
  color: var(--ces-brand);
  border-bottom-style: solid;
}

/* ── Three table types: cards inside the band ── */
.cesWooTypes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cesWooType {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ces-white);
  border: 1.5px solid transparent;
  border-radius: var(--ces-r-lg);
  padding: 26px 24px;
  box-shadow: var(--ces-sh);
  transition: var(--ces-t);
}
.cesWooType:hover {
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--ces-sh-lg);
  transform: translateY(-3px);
}
.cesWooTypeHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cesWooTypeTag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ces-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;
}
.cesWooTypeTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--ces-navy);
  margin: 4px 0 0;
}
.cesWooTypeLead {
  font-size: 14px;
  color: var(--ces-text-2);
  line-height: 1.65;
  margin: 0;
}
.cesWooTypeList {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  flex: 1;
}
.cesWooTypeList li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--ces-text-2);
  line-height: 1.55;
}
.cesWooTypeList li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ces-brand);
  font-weight: 800;
}
.cesWooTypeLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ces-brand);
  text-decoration: none;
  border-bottom: 2px solid rgba(13, 131, 141, 0.25);
  transition: var(--ces-t);
}
.cesWooTypeLink:hover {
  color: var(--ces-brand-dark);
  border-bottom-color: var(--ces-brand);
  text-decoration: none;
}
.cesWooTypeLink svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 960px) {
  .cesWooTypes {
    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 ── */
.cesHiwMosaicSvg {
  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 ── */
.cesFvtPro {
  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(--ces-white);
  background: var(--ces-brand);
  border-radius: 100px;
  padding: 2px 7px;
}
.cesHeroPill i {
  font-style: normal;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ces-brand-light);
  margin-left: 5px;
}

/* examples: this page shows a one-line description under the title */
.cesExSection {
  background: var(--ces-white);
}
.cesExCardTitle {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cesExCardDesc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ces-text-3);
  line-height: 1.45;
}
.cesExCardBody {
  align-items: flex-start;
}
.cesExCard[hidden] {
  display: none;
}
.cesRevMore[hidden] {
  display: none;
}
.cesRevMore {
  display: contents;
}
.cesRevFooter {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cesRevMoreBtn {
  font-family: inherit;
  cursor: pointer;
}

/* competitor comparison */
.cesVsSection {
  background: var(--ces-off);
  padding: 88px 0;
}
.cesVsSectionInner {
  max-width: var(--ces-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.cesVsSectionTitle {
  font-family: var(--ces-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--ces-navy);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.cesVsSectionSubtitle {
  font-size: 16px;
  color: var(--ces-text-2);
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 36px;
}
.cesVsTable {
  min-width: 860px;
  background: var(--ces-white);
  border: 1.5px solid var(--ces-border);
  border-radius: var(--ces-r-xl);
  overflow: hidden;
}
.cesVsRow {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  border-top: 1px solid var(--ces-border);
}
.cesVsRow:first-child {
  border-top: none;
}
.cesVsCell {
  padding: 13px 18px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ces-text-2);
}
.cesVsCell a {
  color: var(--ces-brand);
  font-weight: 600;
}
.cesVsFeature {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
  color: var(--ces-navy);
  padding-left: 24px;
}
.cesVsHead {
  background: var(--ces-navy);
}
.cesVsHead .cesVsCell {
  color: var(--ces-white);
  font-weight: 700;
  font-size: 14px;
  padding: 18px 14px;
}
.cesVsUs {
  background: rgba(13, 131, 141, 0.06);
  color: var(--ces-text);
  font-weight: 600;
}
.cesVsHead .cesVsUs {
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  box-shadow: inset 0 3px 0 var(--ces-brand);
}
.cesVsNote {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ces-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 */
.cesHeroStatStar,
.cesRevStars svg,
.cesMtxYes svg,
.cesMtxNo svg {
  display: inline-block;
}
.cesRevStars svg {
  width: 13px;
  height: 13px;
  fill: var(--ces-amber);
}
.cesMtxYes svg,
.cesMtxNo 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 */
.cesVsCaption,
.cesVsSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
table.cesVsTable,
table.cesCmpTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
table.cesVsTable {
  min-width: 860px;
}
table.cesCmpTable {
  min-width: 640px;
}
.cesVsRow,
.cesCmpRow {
  display: table-row;
}
table.cesVsTable .cesVsCell,
table.cesCmpTable .cesCmpCell {
  display: table-cell;
  vertical-align: middle;
  border-top: 1px solid var(--ces-border);
}
table.cesVsTable thead .cesVsCell,
table.cesCmpTable thead .cesCmpCell {
  border-top: none;
}
table.cesVsTable th,
table.cesCmpTable th {
  font-weight: 600;
}
table.cesVsTable .cesVsFeature {
  width: 27%;
  text-align: left;
}
table.cesVsTable thead .cesVsFeature {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
table.cesVsTable .cesVsUs {
  color: var(--ces-text);
}
table.cesCmpTable .cesCmpFeatureCol {
  width: 28%;
  text-align: left;
}
table.cesCmpTable .cesCmpCell {
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.55;
}
table.cesCmpTable thead .cesCmpCell {
  padding: 22px 24px;
  vertical-align: top;
  text-align: left;
}
table.cesCmpTable .cesCmpFeatureIcon {
  margin-right: 8px;
}
table.cesCmpTable .cesCmpNew::before {
  margin-right: 8px;
}
table.cesCmpTable tfoot .cesCmpCell {
  border-top: 2px solid var(--ces-border);
}
table.cesCmpTable .cesCmpOldFooter,
table.cesCmpTable .cesCmpNewFooter {
  text-align: center;
}
table.cesVsTable thead .cesVsUs {
  color: var(--ces-white);
}

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

/* ── CES additions on top of the shared landing system ── */
.cesModSection{background:var(--ces-off);border-bottom:1px solid var(--ces-border)}
.cesModSectionInner{max-width:var(--ces-max);margin:0 auto;padding:22px 20px 26px}
.cesModHead{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ces-text-2);margin-bottom:14px;flex-wrap:wrap}
.cesModHead b{color:var(--ces-text)}.cesModHead em{font-style:normal;color:var(--ces-brand);font-weight:700}
.cesModDot{width:9px;height:9px;border-radius:50%;background:var(--ces-brand);box-shadow:0 0 0 4px var(--ces-brand-glow)}
.cesModGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cesModCard{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--ces-r);background:#fff;border:1px solid var(--ces-border);text-decoration:none;color:var(--ces-text);transition:transform var(--ces-t),box-shadow var(--ces-t),border-color var(--ces-t)}
.cesModCard svg{width:22px;height:22px;color:var(--ces-brand)}
.cesModCard:hover{transform:translateY(-2px);box-shadow:var(--ces-sh-lg);border-color:var(--ces-brand-light)}
.cesModCardOn{border-color:var(--ces-brand);box-shadow:0 0 0 3px var(--ces-brand-glow)}
.cesModCardTitle{font-family:var(--ces-font-h);font-weight:800;font-size:15px;line-height:1.2}
.cesModCardSub{font-size:12.5px;color:var(--ces-text-3);line-height:1.35}
@media(max-width:960px){.cesModGrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cesModGrid{grid-template-columns:1fr 1fr}.cesModCardOn{grid-column:1/-1}}

.cesLegSection{background:#fff;padding:56px 20px}
.cesLegSectionInner{max-width:var(--ces-max);margin:0 auto;display:flex;gap:26px;align-items:flex-start;padding:30px 34px;border-radius:var(--ces-r-lg);background:linear-gradient(135deg,#e6f5f6,#f4f7fb);border:1px solid var(--ces-border)}
.cesLegIcon{flex:0 0 64px;width:64px;height:64px;border-radius:18px;background:var(--ces-brand);color:#fff;display:flex;align-items:center;justify-content:center}
.cesLegIcon svg{width:32px;height:32px}
.cesLegTitle{font-family:var(--ces-font-h);font-size:26px;font-weight:800;margin:4px 0 10px;color:var(--ces-text)}
.cesLegText{font-size:16px;line-height:1.6;color:var(--ces-text-2);margin:0 0 16px}
.cesLegPills{display:flex;flex-wrap:wrap;gap:8px}
.cesLegPills span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--ces-border);color:var(--ces-text)}
@media(max-width:700px){.cesLegSectionInner{flex-direction:column;padding:24px}}

/* demo mockups (used inside .cesDemoTable / .cesDemoChart) */
.cesMock{font-family:var(--ces-font);color:var(--ces-text);font-size:14px}
.cesMockPage{position:relative;min-height:470px;border-radius:14px;background:var(--ces-off2);overflow:hidden;padding:22px}
.cesMockLine{height:9px;border-radius:5px;background:var(--ces-border);margin:0 0 12px}
.cesMockLine.w60{width:60%}.cesMockLine.w80{width:80%}.cesMockLine.w40{width:40%}
.cesMockBtn{display:inline-block;padding:10px 18px;border-radius:9px;background:var(--ces-brand);color:#fff;font-weight:700;font-size:14px;border:0;cursor:pointer;font-family:inherit}
.cesMockBtn.amber{background:var(--ces-amber);color:var(--ces-text)}
.cesMockOverlay{position:absolute;inset:0;background:rgba(15,23,32,.55);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.cesMockOverlay.on{opacity:1;pointer-events:auto}
.cesMockPopup{width:min(340px,90%);background:#fff;border-radius:16px;padding:26px 26px 22px;box-shadow:var(--ces-sh-xl);position:relative;transform:translateY(14px);transition:transform .3s}
.cesMockOverlay.on .cesMockPopup{transform:none}
.cesMockPopup h4{font-family:var(--ces-font-h);font-size:21px;font-weight:800;margin:0 0 8px}
.cesMockPopup p{margin:0 0 14px;color:var(--ces-text-2);font-size:14px;line-height:1.5}
.cesMockPopup input,.cesMockForm input,.cesMockForm select,.cesMockForm textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--ces-border);border-radius:9px;font:inherit;font-size:14px;margin-bottom:10px;background:#fff}
.cesMockClose{position:absolute;top:10px;right:14px;border:0;background:none;font-size:20px;cursor:pointer;color:var(--ces-text-3)}
.cesMockBar{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.cesMockBar button{font:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:9px;border:1px solid var(--ces-border);background:#fff;cursor:pointer;color:var(--ces-text)}
.cesMockBar button:hover{border-color:var(--ces-brand);color:var(--ces-brand)}
.cesDemoChart:has(.cesStat){min-height:0}
.cesStat{display:flex;flex-direction:column;gap:2px;padding:4px 2px}
.cesStat b{font-family:var(--ces-font-h);font-size:26px;font-weight:800;color:var(--ces-text)}
.cesStat span{font-size:13px;color:var(--ces-text-3)}
.cesStat i{font-style:normal;font-size:12px;font-weight:700;color:var(--ces-brand)}
.cesMockForm label{display:block;font-size:12.5px;font-weight:600;color:var(--ces-text-2);margin:0 0 4px}
.cesMockForm .cesCond{display:none;padding:10px 12px;border-left:3px solid var(--ces-brand);background:#e6f5f6;border-radius:8px;margin-bottom:10px;font-size:13px}
.cesMockForm .cesCond.on{display:block}
.cesMockDone{display:none;padding:14px;border-radius:10px;background:#e6f5f6;color:var(--ces-brand-dark);font-weight:600;font-size:14px}
.cesMockDone.on{display:block}
.cesContact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cesContactHead{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--ces-border)}
.cesAvatar{width:48px;height:48px;border-radius:50%;background:var(--ces-brand);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;font-family:var(--ces-font-h)}
.cesContactHead b{font-family:var(--ces-font-h);font-size:18px;display:block}
.cesContactHead span{font-size:13px;color:var(--ces-text-3)}
.cesTags{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cesTag{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#e6f5f6;color:var(--ces-brand-dark)}
.cesTag.amber{background:#fff4d6;color:#8a6200}
.cesKv{font-size:13.5px;line-height:1.5}
.cesKv dt{color:var(--ces-text-3);font-size:12px;font-weight:600;margin-top:8px}
.cesKv dd{margin:0;font-weight:600}
.cesTimeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--ces-border);font-size:13.5px}
.cesTimeline li{position:relative;padding:0 0 12px 12px}
.cesTimeline li::before{content:"";position:absolute;left:-24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--ces-brand);box-shadow:0 0 0 3px #e6f5f6}
.cesTimeline small{display:block;color:var(--ces-text-3);font-size:12px}
.cesChain{display:flex;flex-direction:column;gap:0}
.cesStep{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid var(--ces-border);border-radius:12px;background:#fff}
.cesStep + .cesStep{margin-top:22px;position:relative}
.cesStep + .cesStep::before{content:"";position:absolute;left:28px;top:-23px;width:2px;height:22px;background:var(--ces-border)}
.cesStepIcon{flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:#e6f5f6;color:var(--ces-brand);display:flex;align-items:center;justify-content:center}
.cesStepIcon svg{width:18px;height:18px}
.cesStepIcon.amber{background:#fff4d6;color:#8a6200}.cesStepIcon.dark{background:var(--ces-dark);color:#fff}
.cesStep b{display:block;font-size:14px}.cesStep span{font-size:12.5px;color:var(--ces-text-3)}
.cesFlow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cesFlowStep{padding:16px 14px;border-radius:12px;background:#fff;border:1px solid var(--ces-border);position:relative}
.cesFlowStep b{display:block;font-family:var(--ces-font-h);font-size:15px;margin:8px 0 4px}
.cesFlowStep span{font-size:12.5px;color:var(--ces-text-3);line-height:1.4;display:block}
.cesFlowStep svg{width:22px;height:22px;color:var(--ces-brand)}
.cesFlowStep + .cesFlowStep::before{content:"›";position:absolute;left:-11px;top:18px;font-size:22px;color:var(--ces-text-3);font-weight:800}
@media(max-width:700px){.cesFlow{grid-template-columns:1fr 1fr}.cesContact{grid-template-columns:1fr}}
.cesWooTypes4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.cesWooTypes4{grid-template-columns:1fr}}
.cesEvents{margin-top:16px;border-top:1px solid var(--ces-border);padding-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cesEvent{font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:10px;background:var(--ces-off)}
.cesEvent b{display:block;font-size:13px}
@media(max-width:700px){.cesEvents{grid-template-columns:1fr}}
/* rings: free/total split differs per page -> offset comes from a variable set on the Free plan */
.cesMtxRingFill,.cesMtxAnimReady .cesMtxPlan.cesIsIn .cesMtxRingFill{stroke-dashoffset:var(--ces-ring-off,0)}
.cesMtxAnimReady .cesMtxRingFill{stroke-dashoffset:251.33}
.cesMtxAnimReady .cesMtxPlan.cesIsIn .cesMtxRingFill{stroke-dashoffset:var(--ces-ring-off,0)}
.cesMtxPlanPro .cesMtxRingFill,.cesMtxAnimReady .cesMtxPlanPro.cesIsIn .cesMtxRingFill{stroke-dashoffset:0}
/* HIW backdrop: one isometric 'contact factory' scene instead of the tiled mosaic */
.cesHiwMosaic{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 30%,#000 25%,rgba(0,0,0,.45) 60%,transparent 96%);mask-image:radial-gradient(ellipse 70% 80% at 72% 30%,#000 25%,rgba(0,0,0,.45) 60%,transparent 96%)}
.cesHiwMosaicPlane{inset:-40px 0}
.cesHiwMosaicSvg,.cesHiwSection .cesHiwMosaicSvg{transform:none!important;transform-origin:50% 50%;opacity:.95}
.cesGarPayText{font-size:13px;font-weight:600;color:var(--ces-text-3)}


/* style-new.css centres every h2 on the site (".affiliate-block1 h1, h2"),
   so section titles are put back on the left here. The Capabilities banner
   and the pricing shortcode title are centred by design. */
.cesPageContainer h2:not(.sptTitle) {
  text-align: left;
}
.cesCapSection h2.cesCapSectionTitle {
  text-align: center;
}
.cesHeroSectionSubtitle b {
  color: #fff;
  font-weight: 700;
}
.cesVsUsName {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.cesVsUsSub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Template gallery (replaces the live demo) ── */
.cesExSection.cesTplSection {
  background: var(--ces-off);
}
.cesExGrid.cesTplGrid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cesTplCard {
  margin: 0;
  cursor: default;
}
.cesTplCard .cesExCardMedia {
  aspect-ratio: 4 / 3;
  padding: 12px;
  background: linear-gradient(160deg, #dfe7f1 0%, #f3f6fa 100%);
}
.cesTplCard .cesExCardMedia::after {
  display: none;
}
.cesTplCard .cesExCardMedia img {
  filter: drop-shadow(0 6px 14px rgba(15, 23, 32, 0.18));
}
.cesTplBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(15, 23, 32, 0.15);
}
.cesTplBadgeFree {
  background: var(--ces-white);
  color: var(--ces-brand);
  border: 1px solid rgba(13, 131, 141, 0.35);
}
.cesTplBadgePro {
  background: var(--ces-dark);
  color: var(--ces-amber);
}
.cesTplCard .cesExCardBody {
  padding: 12px 14px 14px;
}
.cesTplCard .cesExCardTitle {
  font-size: 14px;
  line-height: 1.35;
}
.cesTplCard[hidden] {
  display: none;
}
.cesTplPerks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: -12px 0 30px;
}
.cesTplPerk {
  background: var(--ces-white);
  border: 1.5px solid var(--ces-border);
  border-radius: var(--ces-r);
  padding: 16px 16px 18px;
}
.cesTplPerkIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(13, 131, 141, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.cesTplPerkIcon svg {
  width: 20px;
  height: 20px;
  color: var(--ces-brand);
}
.cesTplPerk b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ces-navy);
  margin-bottom: 4px;
}
.cesTplPerk > span:last-child {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ces-text-2);
}
.cesTplNote {
  max-width: 720px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ces-text-3);
}
.cesTplNote b {
  color: var(--ces-text);
  font-weight: 700;
}
@media (max-width: 1100px) {
  .cesTplPerks {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .cesTplPerks {
    grid-template-columns: 1fr 1fr;
  }
}
.cesTplMore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ces-brand);
  background: var(--ces-white);
  border: 1.5px solid var(--ces-border);
  border-radius: 40px;
  padding: 13px 26px;
  cursor: pointer;
  transition: var(--ces-t);
}
.cesTplMore:hover {
  border-color: var(--ces-brand);
  background: rgba(13, 131, 141, 0.06);
}
.cesTplMore svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 1100px) {
  .cesExGrid.cesTplGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .cesExGrid.cesTplGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* hero tablet: real CES screens (a template preview stands in until a screenshot is uploaded) */
.cesHeroTabletScreens {
  background: radial-gradient(ellipse 90% 80% at 50% 45%, #22344f 0%, #0b1220 80%);
}
.cesHeroScreen {
  object-fit: contain;
  object-position: center;
  padding: 5%;
}
.cesHeroTabletScreen.cesHeroHasShots {
  aspect-ratio: 1200 / 602;
  background: #eef2f8;
}
.cesHeroHasShots .cesHeroScreen {
  object-fit: cover;
  object-position: left top;
  padding: 0;
}
/* library video: the same light grey as the library page, so the bands blend in */
.cesHeroScreenVid {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #eceff7;
}
.cesHeroScreenVid video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* palette video: a white card in the middle of a soft backdrop */
.cesHeroScreenVid-palette {
  background: radial-gradient(ellipse 80% 90% at 50% 40%, #f8fafd 0%, #e3e9f3 100%);
}
.cesHeroScreenVid-palette video {
  width: 90%;
  height: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 32, 0.35), 0 0 0 1px rgba(15, 23, 32, 0.06);
}
.cesHeroScreenTpl {
  overflow: hidden;
  background: #0b1220;
}
.cesHeroScreenTpl img {
  position: absolute;
  display: block;
  max-width: none;
}
.cesHeroScreenBg {
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(26px) brightness(0.7) saturate(1.15);
}
.cesHeroScreenFg {
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3.5% 6%;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}

/* ── Inside the plugin: library scroll + palette picker ── */
.cesTplInside {
  margin-top: 64px;
}
.cesTplInsideHead {
  max-width: 720px;
  margin-bottom: 22px;
}
.cesPageContainer .cesTplInsideTitle {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ces-text);
  text-align: left;
}
.cesTplInsideText {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ces-text-2);
}
.cesTplBrowser {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ces-off2);
  box-shadow: 0 30px 60px -28px rgba(15, 23, 32, 0.35), 0 8px 18px -10px rgba(15, 23, 32, 0.18);
}
.cesTplBrowserBar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: #f4f7fb;
  border-bottom: 1px solid var(--ces-off2);
}
.cesTplBrowserBar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f87171;
}
.cesTplBrowserBar i:nth-child(2) {
  background: #fbbf24;
}
.cesTplBrowserBar i:nth-child(3) {
  background: #34d399;
}
.cesTplBrowserBar span {
  margin-left: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ces-off2);
  font-size: 12px;
  color: var(--ces-text-3);
}
.cesTplVideo {
  display: block;
  width: 100%;
  height: auto;
  background: #eef2f8;
}
.cesTplPalette {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px;
  align-items: center;
  margin-top: 28px;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ces-off2);
}
.cesTplPaletteMedia {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ces-off2);
  box-shadow: 0 18px 40px -24px rgba(15, 23, 32, 0.35);
}
@media (max-width: 900px) {
  .cesTplPalette {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }
  .cesPageContainer .cesTplInsideTitle {
    font-size: 22px;
  }
  .cesTplBrowserBar span {
    display: none;
  }
}

/* ── Inside the CRM: real interface screens ── */
.cesShotGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 8px;
}
.cesShotCard {
  margin: 0;
}
.cesShotCard-full {
  grid-column: 1 / -1;
}
.cesShotFrame {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--ces-off2);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  box-shadow: 0 24px 50px -28px rgba(15, 23, 32, 0.35), 0 6px 16px -10px rgba(15, 23, 32, 0.16);
  transition: transform var(--ces-t), box-shadow var(--ces-t);
  font: inherit;
  text-align: left;
}
.cesShotFrame:hover,
.cesShotFrame:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -26px rgba(15, 23, 32, 0.42), 0 8px 18px -10px rgba(15, 23, 32, 0.2);
}
.cesShotFrame img {
  display: block;
  width: 100%;
  height: auto;
}
.cesShotCard figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 4px 0;
}
.cesShotCard figcaption b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ces-navy);
}
.cesShotCard figcaption span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ces-text-2);
}
.cesShotBox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(10, 16, 26, 0.86);
  cursor: zoom-out;
}
.cesShotBox[hidden] {
  display: none;
}
.cesShotBox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.cesShotBoxClose {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 820px) {
  .cesShotGrid {
    grid-template-columns: 1fr;
  }
}