@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   Photo Gallery by Supsystic — landing page
   /wp-content/themes/supsystic_2017/templates/gg/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 ── */
  --gg-brand: #0d838d;
  --gg-brand-light: #52bac5;
  --gg-brand-dark: #0a6b74;
  --gg-brand-glow: rgba(13, 131, 141, 0.28);
  --gg-amber: #ffbe2b;
  --gg-amber-dark: #e6a800;
  --gg-amber-glow: rgba(255, 190, 43, 0.35);

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

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

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

/* ─── INNER CONTAINERS ─── */
.ggHeroSection,
.ggFvtSectionInner,
.ggHiwSectionInner,
.ggPfSectionInner,
.ggDfdSectionInner,
.ggCapSectionInner,
.ggExSectionInner,
.ggCasSectionInner,
.ggListSectionInner,
.ggRevSectionInner,
.ggGarSectionInner,
.ggFeatSectionInner,
.ggPrsSectionInner,
.ggSupSectionInner{
  max-width: var(--gg-max);
  margin-inline: auto;
  padding-inline: 24px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes ggHeroRiseShot {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ggHeroBadge{
  animation: ggHeroRise 0.7s var(--gg-ease) both;
}
.ggHeroSectionTitle{
  animation: ggHeroRise 0.7s var(--gg-ease) 0.08s both;
}
.ggHeroSectionSubtitle{
  animation: ggHeroRise 0.7s var(--gg-ease) 0.16s both;
}
.ggHeroCtaRow{
  animation: ggHeroRise 0.7s var(--gg-ease) 0.24s both;
}
.ggHeroStats{
  animation: ggHeroRise 0.7s var(--gg-ease) 0.32s both;
}
.ggHeroPills{
  animation: ggHeroRise 0.7s var(--gg-ease) 0.4s both;
}
.ggHeroSectionRight{
  animation: ggHeroRiseShot 0.9s var(--gg-ease) 0.18s both;
}

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

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

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

/* ═══════════════════════════════════════════
   PF – "Perfect for" cards  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.ggPfSection{
  background: var(--gg-off);
  padding: 88px 0;
}
.ggPfSectionTitle{
  font-family: var(--gg-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--gg-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.ggPfSectionSubtitle{
  font-size: 16px;
  color: var(--gg-text-2);
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 640px;
}
.ggPfSectionSubtitle p{
  margin: 0;
}
.ggPfSectionSubtitle2{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gg-text-3);
  margin-bottom: 32px;
}
.ggPfSectionSubtitle3{
  margin-top: 40px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gg-text-3);
  text-align: center;
}
.ggPfGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.ggPfCard{
  background: var(--gg-white);
  border-radius: var(--gg-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1.5px solid transparent;
  box-shadow: var(--gg-sh);
  transition: var(--gg-t);
}
.ggPfCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--gg-sh-lg);
  border-color: rgba(13, 131, 141, 0.22);
}
.ggPfCardFeat{
  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;
}
.ggPfCardFeat::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gg-brand), var(--gg-brand-dark));
}
.ggPfCardFeat:hover{
  border-color: rgba(13, 131, 141, 0.5);
  box-shadow: 0 16px 48px rgba(13, 131, 141, 0.22);
}
.ggPfCardFeat .ggPfCardTitle{
  color: var(--gg-white);
  font-size: 20px;
}
.ggPfCardFeat .ggPfCardText{
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
}
.ggPfCardIcon{
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gg-brand) 0%, var(--gg-brand-dark) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px var(--gg-brand-glow);
}
.ggPfCardIcon svg{
  width: 32px;
  height: 32px;
  color: #fff;
}
.ggPfCardIconSm{
  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(--gg-t);
}
.ggPfCard:hover .ggPfCardIconSm{
  background: rgba(13, 131, 141, 0.16);
  border-color: rgba(13, 131, 141, 0.28);
}
.ggPfCardIconSm svg{
  width: 28px;
  height: 28px;
  color: var(--gg-brand);
}
.ggPfCardTitle{
  font-size: 16px;
  font-weight: 700;
  color: var(--gg-navy);
}
.ggPfCardText{
  font-size: 14px;
  color: var(--gg-text-2);
  line-height: 1.65;
  flex: 1;
}
.ggPfCardTag{
  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(--gg-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]
═══════════════════════════════════════════ */
.ggDfdSection{
  background: var(--gg-white);
  padding: 80px 0;
}
.ggDfdSectionTitle{
  font-family: var(--gg-font-h);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--gg-navy);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.ggDfdSectionSubtitle{
  font-size: 16px;
  color: var(--gg-text-2);
  margin-bottom: 40px;
}
.ggDfdSectionCols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.ggDfdSectionCol{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gg-off);
  border-radius: var(--gg-r);
  padding: 18px 20px;
  border: 1.5px solid var(--gg-border);
  transition: var(--gg-t);
}
.ggDfdSectionCol:hover{
  border-color: var(--gg-brand);
  background: rgba(13, 131, 141, 0.06);
}
.ggDfdSectionColIcon{
  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(--gg-t);
}
.ggDfdSectionCol:hover .ggDfdSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.3);
}
.ggDfdSectionColIcon svg{
  width: 20px;
  height: 20px;
  color: var(--gg-brand);
}
.ggDfdSectionColSubtitle{
  font-size: 14px;
  font-weight: 600;
  color: var(--gg-text);
}
.ggDfdSectionSubtitle2{
  margin-top: 32px;
  font-size: 15px;
  color: var(--gg-text-3);
  font-style: italic;
}

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

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

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

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

/* ═══════════════════════════════════════════
   LIST – Comparison table  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.ggListSection{
  background: var(--gg-off);
  padding: 88px 0;
}
.ggListSectionTitle{
  font-family: var(--gg-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--gg-navy);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.ggListSectionSubtitle{
  font-size: 16px;
  color: var(--gg-text-2);
  line-height: 1.7;
  margin-bottom: 44px;
  max-width: 640px;
}
.ggListSectionSubtitle p{
  margin: 0 0 6px;
}
.ggListSectionSubtitle p:last-child{
  margin-bottom: 0;
}
.ggCmpTableScroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.ggCmpTable{
  min-width: 640px;
  border-radius: var(--gg-r-xl);
  overflow: hidden;
  border: 1.5px solid var(--gg-border);
  margin-top: 8px;
}
.ggCmpRow{
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  border-bottom: 1px solid var(--gg-border);
}
.ggCmpRow:last-child{
  border-bottom: none;
}
.ggCmpCell{
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ggCmpHeader{
  background: var(--gg-navy);
}
.ggCmpHeader .ggCmpCell{
  padding: 22px 24px;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.ggCmpPlanName{
  font-size: 17px;
  font-weight: 700;
  color: var(--gg-white);
}
.ggCmpPlanSub{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ggCmpBadge{
  display: inline-flex;
  background: linear-gradient(135deg, var(--gg-brand) 0%, var(--gg-brand-dark) 100%);
  color: var(--gg-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}
.ggCmpPlanHighlight{
  background: linear-gradient(160deg, #0d2040 0%, #112840 100%);
  position: relative;
}
.ggCmpPlanHighlight::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gg-brand), var(--gg-brand-dark));
}
.ggCmpFeatureCol{
  background: var(--gg-white);
  font-weight: 600;
  color: var(--gg-navy);
  font-size: 14px;
  border-right: 1px solid var(--gg-border);
}
.ggCmpFeatureIcon{
  font-size: 16px;
  flex-shrink: 0;
}
.ggCmpOld{
  color: var(--gg-text-3);
  background: var(--gg-white);
  border-right: 1px solid var(--gg-border);
}
.ggCmpRow:nth-child(even) .ggCmpOld{
  background: #f2f6fb;
}
.ggCmpNew{
  background: rgba(13, 131, 141, 0.05);
  color: var(--gg-text);
  font-weight: 500;
}
.ggCmpNew::before{
  content: "\2713";
  color: var(--gg-brand);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 2px;
}
.ggCmpRow:nth-child(even) .ggCmpNew{
  background: rgba(13, 131, 141, 0.09);
}
.ggCmpRowLast{
  border-bottom: 2px solid var(--gg-border);
}
.ggCmpFooter{
  background: var(--gg-white);
  border-bottom: none;
}
.ggCmpOldFooter{
  color: var(--gg-text-3);
  font-size: 13px;
  border-right: 1px solid var(--gg-border);
  justify-content: center;
}
.ggCmpCross{
  color: #e5484d;
  font-weight: 700;
  margin-right: 4px;
}
.ggCmpNewFooter{
  background: rgba(13, 131, 141, 0.06);
  justify-content: center;
}
.ggCmpNewFooter .ggBtnPrimary{
  font-size: 13px;
  padding: 11px 24px;
}

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

/* ═══════════════════════════════════════════
   FEAT – Pro features  [#ebf1f8 bg]
═══════════════════════════════════════════ */
.ggFeatSection{
  background: var(--gg-off);
  padding: 88px 0;
}
.ggFeatSectionTitle{
  font-family: var(--gg-font-h);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--gg-navy);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.ggFeatSectionTitle2{
  font-size: 22px;
  font-weight: 700;
  color: var(--gg-navy);
  margin-top: 52px;
  margin-bottom: 10px;
}
.ggFeatSectionSubtitle{
  font-size: 16px;
  color: var(--gg-text-2);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 680px;
}
.ggFeatSectionSubtitle2{
  font-size: 15px;
  color: var(--gg-text-3);
  line-height: 1.7;
  max-width: 660px;
}
.ggFeatSectionCols{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ggFeatSectionCol{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--gg-white);
  border-radius: var(--gg-r-lg);
  padding: 26px 24px;
  border: 1.5px solid transparent;
  transition: var(--gg-t);
}
.ggFeatSectionCol:hover{
  border-color: rgba(13, 131, 141, 0.25);
  box-shadow: var(--gg-sh);
}
.ggFeatSectionColIcon{
  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(--gg-t);
}
.ggFeatSectionCol:hover .ggFeatSectionColIcon{
  background: rgba(13, 131, 141, 0.18);
  border-color: rgba(13, 131, 141, 0.3);
}
.ggFeatSectionColIcon svg{
  width: 24px;
  height: 24px;
  color: var(--gg-brand);
}
.ggFeatSectionColTitle{
  font-size: 15px;
  font-weight: 700;
  color: var(--gg-navy);
  margin-bottom: 6px;
}
.ggFeatSectionColSubtitle{
  font-size: 13.5px;
  color: var(--gg-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.
═══════════════════════════════════════════ */
.ggMtxSection{
  background: var(--gg-white);
}
.ggMtxTop{
  /* was the only full dark band starting at --gg-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(--gg-dark) 0%, #141f33 54%, var(--gg-dark2) 100%);
  padding: 88px 0 128px;
  position: relative;
  overflow: hidden;
}
.ggMtxTop::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) {
  
}
.ggMtxTop .ggSectionLabel{
  color: var(--gg-brand-light);
}
.ggMtxBottom{
  background: var(--gg-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;
}
.ggMtxSectionInner{
  max-width: var(--gg-max);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}
.ggMtxSectionTitle{
  font-family: var(--gg-font-h);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--gg-white);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-wrap: balance;
}
.ggMtxSectionSubtitle{
  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 ── */
.ggMtxScore{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ggMtxPlan{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--gg-r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.ggMtxPlanPro{
  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);
}
.ggMtxPlanPro::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gg-brand-light), #a0eaf3);
}
.ggMtxPlanTop{
  display: flex;
  align-items: center;
  gap: 22px;
}

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

/* the script adds this once it is ready to run the reveal */
.ggMtxAnimReady .ggMtxRingFill{
  stroke-dashoffset: 251.33;
}
.ggMtxAnimReady .ggMtxPlan.ggIsIn .ggMtxRingFill{
  stroke-dashoffset: 153.25;
}
.ggMtxAnimReady .ggMtxPlanPro.ggIsIn .ggMtxRingFill{
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ggMtxRingFill {
    transition: none;
  }
}
.ggMtxPlanPro .ggMtxRingFill{
  stroke: var(--gg-brand-light);
}
.ggMtxPlan:not(.ggMtxPlanPro) .ggMtxRingFill{
  stroke: var(--gg-brand);
}
.ggMtxRingLabel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--gg-font-h);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ggMtxRingNum{
  font-size: 24px;
  font-weight: 800;
  color: var(--gg-white);
}
.ggMtxRingOf{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.ggMtxPlanName{
  font-family: var(--gg-font-h);
  font-size: 22px;
  font-weight: 800;
  color: var(--gg-white);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.ggMtxPlanPrice{
  font-size: 15px;
  font-weight: 700;
  color: var(--gg-brand-light);
}
.ggMtxPlanPro .ggMtxPlanPrice{
  color: var(--gg-brand-light);
}
.ggMtxPlanPrice span{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-left: 4px;
}
.ggMtxPlanPriceAlt{
  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);
}
.ggMtxPlanPriceAlt span{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ggMtxPlanPriceAlt b{
  font-family: var(--gg-font-h);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gg-brand-light);
  font-variant-numeric: tabular-nums;
}
.ggMtxHeadPlanAlt{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gg-brand-light);
}
.ggMtxPlanText{
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  flex: 1;
}
.ggMtxPlan .ggBtnGhost,
.ggMtxPlan .ggBtnPrimary{
  align-self: flex-start;
}

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

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

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

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

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

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

/* ── Matrix responsive ── */

@media (max-width: 900px) {
  .ggMtxScore {
    grid-template-columns: 1fr;
  }
  .ggMtxRow {
    grid-template-columns: 1fr 118px 118px;
  }
  .ggMtxGroup {
    grid-template-columns: 1fr 236px;
  }
}

@media (max-width: 640px) {
  .ggMtxTop {
    padding: 72px 0 110px;
  }
  .ggMtxRow {
    grid-template-columns: 1fr 76px 76px;
  }
  .ggMtxCell {
    padding: 13px 8px;
    font-size: 13.5px;
  }
  .ggMtxCellFeature,
  .ggMtxHeadRow .ggMtxCellFeature,
  .ggMtxFootRow .ggMtxCellFeature {
    padding-left: 16px;
    padding-right: 10px;
  }
  .ggMtxHeadRow .ggMtxCell {
    padding: 14px 6px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .ggMtxHeadPlan strong {
    font-size: 13px;
  }
  .ggMtxHeadPlanSub,
  .ggMtxHeadPlanAlt {
    display: none;
  }
  .ggMtxGroup {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  .ggMtxVal {
    font-size: 11px;
    line-height: 1.35;
  }
  .ggMtxYes,
  .ggMtxNo {
    width: 22px;
    height: 22px;
  }
  .ggMtxControls {
    padding: 18px 16px;
  }
  .ggMtxFootRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px 16px;
  }
  .ggMtxFootRow .ggMtxCell,
  .ggMtxFootRow .ggMtxCellFeature {
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .ggMtxFootRow .ggMtxCellPro {
    background: transparent;
  }
  .ggMtxFootRow .ggBtnPrimary {
    padding: 12px 26px;
    font-size: 12px;
  }
  .ggMtxVal {
    overflow-wrap: break-word;
  }
}

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

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

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

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

@media (max-width: 620px) {
  .ggRevGrid {
    grid-template-columns: 1fr;
  }
  .ggRevCardFeat {
    grid-column: span 1;
  }
  .ggRevScore {
    width: 100%;
  }
}

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

@media (max-width: 640px) {
  .ggPrsIncluded {
    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.
═══════════════════════════════════════════ */
.ggCapSection{
  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. */
.ggCapGlow{
  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) {
  .ggCapGlow {
    width: 560px;
  }
}
.ggCapFacet{
  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) {
  .ggCapFacet {
    width: 460px;
  }
}

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .ggPageContainer *,
  .ggPageContainer *::before,
  .ggPageContainer *::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) {
  .ggFvtSectionCols,
  .ggHiwSectionCols,
  .ggDfdSectionCols {
    grid-template-columns: repeat(2, 1fr);
  }
  .ggFeatSectionCols {
    grid-template-columns: 1fr;
  }
  .ggExGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ggPfGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ggPfCardFeat {
    grid-row: auto;
  }
  .ggCasCards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ggCasCardWide {
    grid-column: 1/3;
    grid-row: auto;
  }
}

@media (max-width: 860px) {
  .ggHeroSection {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 80px;
  }
  
  .ggSupSectionInnerContainer {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ggSupSectionInnerRight {
    display: none;
  }
  .ggGarBox {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .ggHeroSectionTitle {
    font-size: clamp(30px, 8vw, 44px);
  }
  .ggHeroStats {
    padding: 16px 4px;
  }
  .ggHeroStatNum {
    font-size: 20px;
  }
  .ggHeroStatWord {
    font-size: 16px;
  }
  .ggHeroStatLabel {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  .ggHeroStatStar {
    width: 14px;
    height: 14px;
  }
  .ggHeroPill {
    font-size: 11.5px;
    padding: 5px 12px;
  }
  .ggHeroCtaRow {
    flex-direction: column;
    align-items: stretch;
  }
  .ggHeroCtaRow .ggBtnPrimary,
  .ggHeroCtaRow .ggBtnGhost {
    justify-content: center;
  }
  .ggFvtSectionCols,
  .ggDfdSectionCols,
  .ggExGrid {
    grid-template-columns: 1fr;
  }
  .ggHiwSectionCols {
    grid-template-columns: 1fr 1fr;
  }
  .ggExSectionHeader {
    align-items: flex-start;
  }
}

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

@media (max-width: 540px) {
  .ggCasCards {
    grid-template-columns: 1fr;
  }
  .ggCasCardWide {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
  .ggCasHeader {
    flex-direction: column;
  }
  .ggCasEdgePill {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .ggHeroStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .ggHeroStatDiv {
    display: none;
  }
  .ggHeroGridLines {
    background-size: 92px 92px;
  }
  .ggHiwSectionCols {
    grid-template-columns: 1fr;
  }
  .ggSupCtaBtn {
    font-size: 15px;
    padding: 16px 28px;
    text-align: center;
  }
  :root {
    --gg-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.
═══════════════════════════════════════════ */
.ggFvtSectionTitle,
.ggHiwSectionTitle,
.ggPfSectionTitle,
.ggDfdSectionTitle,
.ggCapSectionTitle,
.ggExSectionTitle,
.ggListSectionTitle,
.ggGarSectionTitle,
.ggFeatSectionTitle,
.ggSupSectionTitle{
  line-height: 1.15;
}