/* Outline button hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-surface-subtle);
}

/* Footer — Figma 401:2 desktop.
   Built from native wp:group / wp:list / wp:site-logo blocks. Overrides bump
   specificity to defeat WP layout-flex defaults. */
.wp-block-group.gtmkit-footer__grid {
  display: flex !important;
  flex-direction: row;
  gap: 64px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}
.wp-block-group.gtmkit-footer__brand {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  margin: 0;
}
.gtmkit-footer__brand .wp-block-site-logo,
.gtmkit-footer__brand .wp-block-site-logo a { display: inline-block; }
.gtmkit-footer__brand .wp-block-site-logo img { height: 32px; width: auto; max-width: 112px; }
.gtmkit-footer__tagline {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.wp-block-group.gtmkit-footer__col {
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  margin: 0;
}
/* Centre the three link columns between the brand (left) and the socials
   (right): a margin-left:auto here pairs with the socials' own margin-left:auto
   so the free space splits evenly on both sides of the column cluster. */
.gtmkit-footer__brand + .gtmkit-footer__col { margin-left: auto; }
.gtmkit-footer__heading {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
ul.wp-block-list.gtmkit-footer__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtmkit-footer__list li { margin: 0; }
.gtmkit-footer__list a {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--motion-default) ease-out;
}
.gtmkit-footer__list a:hover { color: var(--color-text-primary); }

/* "Follow us" social block — Figma 640:2. Pushed to the far right of the
   column row and vertically centred against the link columns. */
.wp-block-group.gtmkit-footer__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 0 0 auto;
  align-self: center;
  flex-shrink: 0;
}
.gtmkit-footer__social-heading {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 1.12px !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-footer .gtmkit-footer__social-icons { display: flex; align-items: center; gap: 20px; margin-block-start: 0 }
.gtmkit-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  color: var(--color-text-tertiary);
  transition: color var(--motion-default) ease-out, background var(--motion-default) ease-out;
}
.gtmkit-footer__social-link:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.gtmkit-footer__social-link svg { display: block; width: 28px; height: 28px; }

.wp-block-group.gtmkit-footer__bottom {
  border-top: 1px solid var(--color-border-default);
  padding-top: 24px;
  margin-top: 48px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.gtmkit-footer__copyright {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
  white-space: nowrap;
}
/* Mobile footer — Figma 535:211 (CSS-only, no separate pattern). Vertical
   stack: brand → Product → Support → Company → Follow us → copyright, each
   section full-width with 24px side padding, 32px between sections. */
@media (max-width: 720px) {
  .gtmkit-footer { padding-left: 24px !important; padding-right: 24px !important; }
  .wp-block-group.gtmkit-footer__grid { flex-direction: column !important; gap: 32px; }
  .wp-block-group.gtmkit-footer__brand,
  .wp-block-group.gtmkit-footer__col { width: 100%; }
  .gtmkit-footer__brand + .gtmkit-footer__col { margin-left: 0; }
  .wp-block-group.gtmkit-footer__social { width: 100%; align-items: center; align-self: stretch; margin: 0; }
  .wp-block-group.gtmkit-footer__bottom { margin-top: 32px !important; padding-top: 16px; }
}

/* Legacy footer-list (kept for non-home pages until they migrate) */
.is-style-footer-list { list-style: none; padding-left: 0; margin: 0; }
.is-style-footer-list li { margin: 0 0 8px; }
.is-style-footer-list a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--motion-default) ease-out;
}
.is-style-footer-list a:hover { color: var(--color-text-primary); }

/* Pricing features — checkmark bullets */
.is-style-pricing-features { list-style: none; padding-left: 0; margin: 0; }
.is-style-pricing-features li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.is-style-pricing-features li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
}

/* FAQ — Figma 406:16 desktop / 484:76 mobile.
   Divider-style list: no per-item border, bottom-border separator.
   Desktop: heading 32/600/40, list width 800, item py-24, question 17/26/500.
   Mobile:  heading 24/600,    list full,       item py-20, question 15/22/500. */
.gtmkit-faq-section { gap: 48px; }
.gtmkit-faq-section > * + * { margin-top: 0; }
.gtmkit-faq-header { text-align: center; display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; }
.gtmkit-faq-header__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-faq-header__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-faq-header__sub a { color: var(--color-text-brand); text-decoration: underline; }
.gtmkit-faq { width: 100%; margin-top: 48px; display: flex; flex-direction: column; }
.gtmkit-faq__item,
.wp-block-details.gtmkit-faq__item {
  border-bottom: 1px solid var(--color-border-default);
  padding: 24px 0;
  margin: 0 !important;
}
.gtmkit-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  color: var(--color-text-primary);
}
.gtmkit-faq__item > summary::-webkit-details-marker { display: none; }
.gtmkit-faq__item > summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-tertiary);
  font-family: Inter, sans-serif;
  font-weight: 400;
  width: 16px;
  text-align: center;
}
.gtmkit-faq__item[open] > summary::after {
  content: "−";
  color: var(--color-text-brand);
}
.gtmkit-faq__a {
  margin: 12px 0 0 !important;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-secondary);
}
.gtmkit-faq__a a { color: var(--color-text-brand); }
@media (max-width: 768px) {
  .gtmkit-faq-section { gap: 20px; padding-top: 64px !important; padding-bottom: 64px !important; }
  .gtmkit-faq-header { gap: 8px; }
  .gtmkit-faq-header__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.4px; }
  .gtmkit-faq-header__sub { font-size: 14px; line-height: 22px; }
  .gtmkit-faq { margin-top: 20px; }
  .gtmkit-faq__item { padding: 20px 0; }
  .gtmkit-faq__item > summary { font-size: 15px; line-height: 22px; align-items: flex-start; }
  .gtmkit-faq__item > summary::after { font-size: 20px; width: 14px; }
  .gtmkit-faq__a { font-size: 14px; line-height: 22px; }
}

/* =====================================================================
   TOP NAV — Figma desktop 400:21 / mobile 482:3
   Desktop: h-65, px-32, gap-32 between items, 140x40 logo.
   Each link: Inter Medium 14 / text-secondary.
   Sign-in: Inter Medium 14 / text-brand (#1d4ed8).
   Get Premium pill: h-40, px-16, radius-8, bg brand-primary, weight 500.
   Mobile: h-64, px-16, 112x32 logo, hamburger menu via WP overlay.
   ===================================================================== */
.gtmkit-top-nav { gap: 32px; }
.gtmkit-top-nav .wp-block-navigation-item__content {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color var(--motion-default) ease-out;
}
.gtmkit-top-nav .wp-block-navigation-item__content:hover { color: var(--color-text-primary); }
.gtmkit-top-nav .current-menu-item .wp-block-navigation-item__content,
.gtmkit-top-nav .current_page_item .wp-block-navigation-item__content { color: var(--color-text-brand); }

/* Get Premium pill — Figma 400:31: h-40, px-16, radius-8, Inter Medium 14 */
.gtmkit-top-nav .is-style-button-primary > .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  border-radius: 8px;
  font-weight: 500;
  box-sizing: border-box;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-top-nav .is-style-button-primary > .wp-block-navigation-item__content:hover {
  background: var(--color-brand-primary-hover);
  color: var(--color-text-on-brand);
}

/* Sign in link — Figma 400:30: text-brand color, same weight */
.gtmkit-top-nav .wp-block-navigation-item:nth-last-child(2) .wp-block-navigation-item__content { color: var(--color-text-brand); }
.gtmkit-top-nav .wp-block-navigation-item:nth-last-child(2) .wp-block-navigation-item__content:hover { color: var(--color-text-brand-hover); }

/* Sticky header with hide-on-scroll-down / reveal-on-scroll-up (headroom).
   The .is-hidden class is toggled by sticky-header.js. position:sticky keeps
   it in flow (no spacer / layout shift); translateY slides it out of view. */

/* WordPress wraps each template part in a .wp-block-template-part div that is
   only as tall as the header itself. position:sticky can only stick within its
   parent's box, so that wrapper would let the header scroll straight off.
   display:contents removes the wrapper from layout so the header's containing
   block becomes the full-height .wp-site-blocks and sticky actually sticks. */
.wp-block-template-part:has(> .gtmkit-header) { display: contents; }

.gtmkit-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
  will-change: transform;
}
.gtmkit-header.is-hidden {
  transform: translateY(-100%);
}
/* Sit below the WP admin bar when it's present (logged-in views). */
.admin-bar .gtmkit-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .gtmkit-header { top: 46px; }
}
/* Don't fight the slide-in animation with reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .gtmkit-header { transition: none; }
}

/* Hamburger button — Figma 480:4. Hidden on desktop; 44x44 tap target on
   mobile. The open/close glyphs swap on the trigger's aria-expanded state,
   which drawer.js toggles. */
.gtmkit-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-burger:hover { background: var(--color-surface-subtle); }
.gtmkit-burger svg { display: block; }
.gtmkit-burger .gtmkit-burger__close { display: none; }
.gtmkit-burger[aria-expanded="true"] .gtmkit-burger__open { display: none; }
.gtmkit-burger[aria-expanded="true"] .gtmkit-burger__close { display: block; }

/* Site nav drawer — Figma 480:15. In-page sheet anchored below the 64px bar
   (absolute against the sticky .gtmkit-header), opaque surface, 1px bottom
   border, no backdrop. drawer.js adds .is-open; visible only at ≤720px. */
.gtmkit-site-drawer-wrap { margin: 0 !important; }
.gtmkit-site-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--color-surface-background);
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-site-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
}
.gtmkit-site-drawer__link {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 8px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-site-drawer__link:hover { background: var(--color-surface-subtle); }
.gtmkit-site-drawer__divider {
  height: 1px;
  background: var(--color-border-default);
  margin: 0 24px;
}
.gtmkit-site-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px 24px;
}
.gtmkit-site-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-site-drawer__cta--secondary {
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  background: var(--color-surface-background);
}
.gtmkit-site-drawer__cta--secondary:hover { background: var(--color-surface-subtle); }
.gtmkit-site-drawer__cta--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
.gtmkit-site-drawer__cta--primary:hover { background: var(--color-brand-primary-hover); }

@keyframes gtmkit-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile header: tighter horizontal padding (16) + smaller logo (112x32),
   desktop nav swapped for the hamburger + drawer. */
@media (max-width: 720px) {
  .gtmkit-header { padding-left: 16px !important; padding-right: 16px !important; }
  .gtmkit-header .wp-block-site-logo img { width: 112px !important; height: auto !important; }
  .gtmkit-header .gtmkit-top-nav { display: none !important; }
  .gtmkit-burger { display: inline-flex; }
  /* Open drawer fills the viewport below the 64px bar so no page content
     shows through. dvh keeps it correct when mobile browser chrome
     collapses; the plain vh line is the fallback. */
  .gtmkit-site-drawer.is-open {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    overflow-y: auto;
    animation: gtmkit-drawer-in var(--motion-medium) var(--motion-ease);
  }
  .admin-bar .gtmkit-site-drawer.is-open {
    height: calc(100vh - 110px);
    height: calc(100dvh - 110px);
  }
  /* Pin the CTA section (divider + Sign in + Get Premium) to the bottom
     of the full-height sheet. */
  .gtmkit-site-drawer.is-open .gtmkit-site-drawer__divider { margin-top: auto; }
}

/* Remove WP's default 24px vertical gap between top-level siblings of .wp-site-blocks
   (header / main / footer). We want sections to butt up against each other so
   colored bands like the purple CTA reach the footer with no white strip in between. */
body .wp-site-blocks > * { margin-block-start: 0; }

/* =====================================================================
   HOME PAGE — Figma-exact values (nodes 402:15, 482:14, 405:22, 483:27, 406:46)
   ===================================================================== */

/* Platform strip — two variants per Figma.
   Desktop (441:445): single-line text + dot separators, py-28 px-24.
   Mobile  (482:28): stacked eyebrow + pill chips, padding 24. */
.gtmkit-platforms__desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 28px 24px;
  white-space: nowrap;
}
.gtmkit-platforms__desktop .gtmkit-platforms__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.gtmkit-platforms__item {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary);
}
.gtmkit-platforms__dot {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Mobile variant — hidden on desktop, shown on mobile via @media below */
.gtmkit-platforms__mobile { display: none; }
.gtmkit-platforms__eyebrow--mobile {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 1.2px;
  margin: 0 0 12px;
  text-align: center;
  text-transform: uppercase;
}
.gtmkit-platforms__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.gtmkit-platforms__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--color-surface-background);
  border: 1px solid var(--color-border-default);
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-primary);
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .gtmkit-platforms__desktop { display: none; }
  .gtmkit-platforms__mobile { display: block; padding: 24px; }
}

/* Hero eyebrow badge — Figma 402:16 / 482:15
   Brand-blue border + light-blue background + 8px radius. NOT just text. */
.gtmkit-eyebrow-badge {
  display: block;
  width: max-content;
  margin: 0 auto;
  padding: 4px 10px;
  background: var(--color-surface-brand-subtle);
  border: 1px solid var(--color-border-brand);
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-brand);
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .gtmkit-eyebrow-badge { color: var(--color-text-primary); }
}

/* Hero title — Figma 402:18 desktop, 482:17/18 mobile
   Inter SemiBold (600), 56px / line 64 / tracking -1.4px desktop;
   34px / line 40 / tracking -1px mobile.
   "for WordPress" is the second visual line in brand color. */
.gtmkit-hero-title {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 64px !important;
  line-height: 64px !important;
  letter-spacing: -1.4px !important;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-hero-title .gtmkit-hero-accent {
  display: block;
  color: var(--color-text-brand);
  margin-top: 10px;
}
@media (max-width: 768px) {
  .gtmkit-hero-title {
    font-size: 34px !important;
    line-height: 40px !important;
    letter-spacing: -1px !important;
  }
}

/* Hero lede — Figma 402:21 desktop / 482:19 mobile */
.gtmkit-hero-lede {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
  max-width: 720px;
}
@media (max-width: 768px) {
  .gtmkit-hero-lede { font-size: 16px; line-height: 26px; }
}

/* Install count badge — Figma 462:511 / 482:20 */
.gtmkit-install-count {
  display: flex;
  width: max-content;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-tertiary);
  box-sizing: border-box;
}
.gtmkit-install-count .dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-state-success);
}
@media (max-width: 768px) {
  .gtmkit-install-count { font-size: 13px; }
}

/* Hero CTA buttons — Figma 402:23, 402:25 desktop / 482:24, 482:26 mobile.
   Height 48 desktop, 52 mobile. 8px radius. px-[32] horizontal padding. */
.gtmkit-hero-ctas {
  display: flex;
  align-self: center;
  gap: 12px;
  padding-top: 12px;
  align-items: center;
  justify-content: center;
}
.gtmkit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--motion-default) ease-out, border-color var(--motion-default) ease-out;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.gtmkit-btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
.gtmkit-btn--primary:hover { background: var(--color-brand-primary-hover); color: var(--color-text-on-brand); }
.gtmkit-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.gtmkit-btn--secondary:hover { background: var(--color-surface-subtle); }
@media (max-width: 768px) {
  .gtmkit-hero-ctas {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-top: 12px;
  }
  .gtmkit-btn { height: 52px; width: 100%; }
}

/* Intro 3-col cards — Figma 440:49 desktop.
   3 columns, gap 32, each card has border + 28x32 padding + 16 internal gap.
   Eyebrow Inter Medium 12 text-brand tracking 0.6.
   Title Inter SemiBold 22/30 -0.4.
   Body Inter Regular 15/24 text-secondary.
   Tag Inter Medium 13 text-tertiary. */
.gtmkit-intro-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}
/* Kill WP's is-layout-flow margin-block-start injection on grid children
   (gap handles spacing, not vertical margins). */
.gtmkit-intro-cards > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-intro-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  /* Force stretch within the parent grid row. WP's is-layout-flow on the
     wp-block-group wrapper resolves align-self: auto to something other
     than stretch, so we set it explicitly. */
  align-self: stretch;
  height: 100%;
}
.gtmkit-intro-card__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text-brand);
  letter-spacing: 0.6px;
  margin: 0;
  text-transform: uppercase;
}
.gtmkit-intro-card__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-intro-card__body {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-intro-card__tag {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
  margin-top: auto;
}
@media (max-width: 768px) {
  .gtmkit-intro-cards { grid-template-columns: 1fr; gap: 16px; }
  .gtmkit-intro-card { padding: 24px 20px; }
  .gtmkit-intro-card__title { font-size: 20px; line-height: 28px; }
}

/* Reusable page hero — Figma sub-pages all share the same eyebrow / title / sub
   pattern. Concrete Figma references: Pricing 410:58 / 490:14, About 424:338 /
   525:18, Contact 424:401 / 527:18, Legal 425:418 / 529:18. */
.gtmkit-page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 96px;
  padding-bottom: 64px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
}
.gtmkit-page-hero__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--color-text-brand);
  margin: 0;
  text-transform: uppercase;
}
.gtmkit-page-hero__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1.2px;
  color: var(--color-text-primary);
  margin: 0;
  max-width: 800px;
}
.gtmkit-page-hero__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 760px;
}
@media (max-width: 768px) {
  .gtmkit-page-hero {
    gap: 14px;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .gtmkit-page-hero__eyebrow { font-size: 11px; }
  .gtmkit-page-hero__title { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
  .gtmkit-page-hero__sub { font-size: 15px; line-height: 24px; }
}

/* About page — long-form prose body (Figma 424:343 desktop / 525:31 mobile).
   Section headings 28/600/36/-0.5, body 17/400/30, gap 24px. */
.gtmkit-about-prose {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.gtmkit-about-prose__heading {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-about-prose__p {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  color: var(--color-text-primary);
  margin: 0;
}
@media (max-width: 768px) {
  .gtmkit-about-prose { gap: 16px; }
  .gtmkit-about-prose__heading { font-size: 24px; line-height: 32px; }
  .gtmkit-about-prose__p { font-size: 15px; line-height: 25px; color: var(--color-text-secondary); }
}

/* Soft CTA block — Figma 424:353 desktop / 525:44 mobile.
   Light surface, centered title + sub + brand button. */
.gtmkit-soft-cta {
  padding-top: 64px !important;
  padding-bottom: 96px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.gtmkit-soft-cta__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-soft-cta__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 640px;
}
.gtmkit-soft-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 8px;
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  margin-top: 8px;
}
.gtmkit-soft-cta__btn:hover { background: var(--color-brand-primary-hover); }
@media (max-width: 768px) {
  .gtmkit-soft-cta {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    text-align: left;
    align-items: stretch;
  }
  .gtmkit-soft-cta__title { line-height: 36px; }
  .gtmkit-soft-cta__sub { font-size: 15px; line-height: 24px; }
  .gtmkit-soft-cta__btn { width: 100%; height: auto; padding: 14px 20px; border-radius: 10px; font-weight: 600; }
}

/* Feature cards — Figma 405:22 desktop / 483:22 mobile.
   Single 3-col grid. 24px column-gap matches Figma; 32px row-gap matches mobile
   itemSpacing and gives a clean visual break between rows. */
.gtmkit-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 32px;
  width: 100%;
}
.gtmkit-feature-cards > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* WP's is-layout-flow injects margin-block-start on the 2nd+ child of every
   wp-block-group. When we're using flex/grid + a `gap` we don't want those
   margins — they double-spacing. Reset across every custom container that
   uses flex/grid gap to manage spacing. */
.gtmkit-compare-cards > *,
.gtmkit-compare-card > *,
.gtmkit-compare-card__list > *,
.gtmkit-footer__grid > *,
.gtmkit-footer__brand > *,
.gtmkit-footer__col > *,
.gtmkit-footer__bottom > *,
.gtmkit-soft-cta > *,
.gtmkit-faq-header > *,
.gtmkit-faq > *,
.gtmkit-cta-gradient > *,
.gtmkit-cta-gradient__buttons > *,
.gtmkit-channels > *,
.gtmkit-channel > *,
.gtmkit-company-info__grid > *,
.gtmkit-company-info__item > *,
.gtmkit-page-hero > *,
.gtmkit-about-prose > *,
.gtmkit-blog-meta > *,
.gtmkit-blog-author > *,
.gtmkit-blog-single-hero > *,
.gtmkit-blog-single-hero__author > *,
.gtmkit-blog-single-hero__author-text > *,
.gtmkit-contact-form-header > *,
.gtmkit-docs-sidebar > *,
.gtmkit-docs-article > *,
.gtmkit-docs-toc > *,
.gtmkit-shop-hero > *,
.gtmkit-order-hero > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
/* Feature card with icon — Figma 405:23 desktop / 483:27 mobile.
   Desktop: padding 28, gap 16. Mobile: padding 20px horizontal / 24 vertical, gap 12.
   Grid auto-stretches cards in a row to equal height — no explicit height needed. */
.gtmkit-feature-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Stretch within grid row — see intro-card note for why this is needed. */
  align-self: stretch;
  height: 100%;
}
/* Icon container 40x40, brand-subtle bg, 8px radius. Inner icon 24x24 desktop / 20x20 mobile. */
.gtmkit-feature-card__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  background: var(--color-surface-brand-subtle);
  color: var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gtmkit-feature-card h3 {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  line-height: 26px !important;
  letter-spacing: -0.3px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-feature-card p {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .gtmkit-feature-cards { grid-template-columns: 1fr; row-gap: 32px; }
  .gtmkit-feature-card {
    padding: 24px 20px;
    gap: 12px;
  }
  .gtmkit-feature-card h3 {
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0;
  }
  .gtmkit-feature-card p {
    font-size: 14px;
    line-height: 22px;
  }
  .gtmkit-feature-card__icon svg { width: 20px; height: 20px; }
}

/* Premium pill on feature cards 4 + 5 — handoff 2026-05-29.
   Purple to read as "Premium" (vs. the blue brand-subtle pro-pill); sits
   inline next to the card title. Renders from feature-card render_callback. */
.gtmkit-feature-card__premium-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #f5f3ff;
  color: var(--color-premium-700);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* =====================================================================
   TEMPLATE ASSISTANT — Figma 852:937 (Home frame 402:2).
   Header (constrained 720) + 2-col body (4 numbered steps / wizard shot)
   + centered CTA row. The group's 48px blockGap spaces header → body → CTAs.
   ===================================================================== */
.gtmkit-template-assistant__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  width: 100%;
}
.gtmkit-template-assistant__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gtmkit-template-assistant__step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.gtmkit-template-assistant__num {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--color-text-brand);
  flex-shrink: 0;
  min-width: 44px;
}
.gtmkit-template-assistant__step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtmkit-template-assistant__step-title {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-template-assistant__step-desc {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-template-assistant__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-template-assistant__shot {
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-card);
}
.gtmkit-template-assistant__shot img {
  display: block;
  width: 100%;
  height: auto;
}
.gtmkit-template-assistant__note {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: 0;
}
.gtmkit-template-assistant__note a { color: var(--color-text-brand); }
.gtmkit-template-assistant__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .gtmkit-template-assistant__body { grid-template-columns: 1fr; gap: 32px; }
  .gtmkit-template-assistant__steps { gap: 24px; }
  .gtmkit-template-assistant__num { font-size: 26px; min-width: 38px; }
  .gtmkit-template-assistant__step-title { font-size: 18px !important; }
  .gtmkit-template-assistant__step-desc { font-size: 15px; }
  .gtmkit-template-assistant__ctas { flex-direction: column; }
  .gtmkit-template-assistant__ctas .gtmkit-btn { width: 100%; }
}

/* =====================================================================
   TRUST STRIP — Figma 863:939 (Home frame 402:2).
   Four equal stat cards + centered release-notes sub-line.
   ===================================================================== */
.gtmkit-trust-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}
.gtmkit-trust-strip__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-surface-card);
}
.gtmkit-trust-strip__stat {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.gtmkit-trust-strip__label {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.gtmkit-trust-strip__subline {
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-trust-strip__subline a { color: var(--color-text-brand); }
@media (max-width: 720px) {
  .gtmkit-trust-strip__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gtmkit-trust-strip__row { grid-template-columns: 1fr; }
}

/* What you gain (Woo → Premium) — Figma 792:872.
   Reuses .gtmkit-feature-card for each item; the only new chrome is the two
   group labels, the full-width featured card, and the 2-col grid. */
.gtmkit-woo-gains__groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}
.gtmkit-woo-gains__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Kill WP's is-layout-flow margin-block-start injection — gap manages spacing. */
.gtmkit-woo-gains__groups > *,
.gtmkit-woo-gains__group > *,
.gtmkit-woo-gains__featured > *,
.gtmkit-woo-gains__grid > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-woo-gains__label {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-brand);
  margin: 0;
}
.gtmkit-woo-gains__featured { width: 100%; }
.gtmkit-woo-gains__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}
/* The Woo "stays the same" cards drop the intro-card tag line; hide the
   empty paragraph so it doesn't add a trailing gap inside the card. */
.gtmkit-intro-card__tag:empty { display: none; }
@media (max-width: 768px) {
  .gtmkit-woo-gains__groups { gap: 32px; }
  .gtmkit-woo-gains__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Comparison — desktop table + mobile stacked cards.
   Desktop (>=769): 3-col table visible, mobile cards hidden.
   Mobile  (<=768): table hidden, two stacked cards per Figma 483:83. */
.gtmkit-compare-cards { display: none; }
.gtmkit-comparison { width: 100%; border-collapse: collapse; background: var(--color-surface-card); border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border-default); }
.gtmkit-comparison th, .gtmkit-comparison td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--color-border-default); font-size: 15px; vertical-align: middle; }
.gtmkit-comparison thead th { background: var(--color-surface-subtle); font-weight: 600; color: var(--color-text-tertiary); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.gtmkit-comparison thead th:not(:first-child), .gtmkit-comparison tbody td:not(:first-child) { text-align: center; }
.gtmkit-comparison tbody td:first-child { font-weight: 500; color: var(--color-text-primary); }
.gtmkit-comparison tbody td:not(:first-child) { color: var(--color-text-secondary); }
.gtmkit-comparison tbody tr:last-child td { border-bottom: 0; }
.gtmkit-comparison td.dot-on::before,
.gtmkit-comparison td.dot-off::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 9999px;
}
.gtmkit-comparison td.dot-on::before { background: var(--color-state-success); }
.gtmkit-comparison td.dot-off::before { background: transparent; border: 1.5px solid var(--color-border-default); }

/* =====================================================================
   SUPPORTED EVENTS — Figma 906:939 (Home frame 402:2).
   EVENT | FREE | PREMIUM table, rows driven by inc/home-supported-events.php.
   Stays a 3-col table on mobile (tighter padding); dot tokens shared with
   .gtmkit-comparison.
   ===================================================================== */
.gtmkit-supported-events__table {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-collapse: collapse;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  overflow: hidden;
}
.gtmkit-supported-events__table th,
.gtmkit-supported-events__table td {
  padding: 12px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-supported-events__table thead th {
  background: var(--color-surface-subtle);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.gtmkit-supported-events__table thead th:not(:first-child),
.gtmkit-supported-events__table tbody td:not(:first-child) {
  text-align: center;
  width: 140px;
}
.gtmkit-supported-events__cat-row th {
  background: var(--color-surface-subtle);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
}
.gtmkit-supported-events__event code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--color-text-primary);
  background: transparent;
  padding: 0;
}
.gtmkit-supported-events__table tbody tr:last-child td { border-bottom: 0; }
.gtmkit-supported-events__dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  vertical-align: middle;
}
.gtmkit-supported-events__dot--on  { background: var(--color-state-success); }
.gtmkit-supported-events__dot--off { background: transparent; border: 1.5px solid var(--color-border-strong); }
.gtmkit-supported-events__footer {
  margin-top: 24px;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.gtmkit-supported-events__footer a { color: var(--color-text-brand); text-decoration: none; }
.gtmkit-supported-events__footer a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .gtmkit-supported-events__table th,
  .gtmkit-supported-events__table td { padding: 10px 12px; }
  .gtmkit-supported-events__table thead th:not(:first-child),
  .gtmkit-supported-events__table tbody td:not(:first-child) { width: 64px; }
  .gtmkit-supported-events__event code { font-size: 13px; }
  .gtmkit-supported-events__dot { width: 16px; height: 16px; }
}

@media (max-width: 768px) {
  /* Hide the desktop table on mobile; show stacked compare cards instead. */
  .gtmkit-comparison { display: none; }
  .gtmkit-compare-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .gtmkit-compare-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .gtmkit-compare-card--premium {
    border: 2px solid var(--color-border-brand);
  }
  .gtmkit-compare-card__title {
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
  }
  .gtmkit-compare-card__list,
  .wp-block-group.gtmkit-compare-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .gtmkit-compare-card__list .gtmkit-compare-card__row,
  .gtmkit-compare-card__list li {
    position: relative;
    padding-left: 26px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 22px;
    min-height: 24px;
  }
  .gtmkit-compare-card__list .is-on { color: var(--color-text-primary); }
  /* neutral-500, not text-muted: 14px text needs 4.5:1 on white (WCAG AA) */
  .gtmkit-compare-card__list .is-off { color: var(--color-neutral-500); }
  .gtmkit-compare-card__list .gtmkit-compare-card__row::before,
  .gtmkit-compare-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
  }
  .gtmkit-compare-card__list .is-on::before {
    background: var(--color-state-success);
  }
  .gtmkit-compare-card__list .is-off::before {
    background: transparent;
    border: 1.5px solid var(--color-border-default);
  }
}

/* 2-tier pricing compare (Home + Pricing) */
.gtmkit-pricing-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.gtmkit-pricing-compare > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
@media (max-width: 768px) {
  /* Stack cards on mobile. Bump gap to 32px since the badge moves inside. */
  .gtmkit-pricing-compare { grid-template-columns: 1fr; gap: 32px; }
}
/* Pricing card — Figma 407:46 (Free) / 407:73 (Premium).
   padding 40 / gap 28 / radius 14. */
.gtmkit-pricing-compare__card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  /* Stretch to equal height in the grid + zero WP block-gap margins
     (the flex gap above already handles spacing between children). */
  align-self: stretch;
  height: 100%;
}
.gtmkit-pricing-compare__card > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
@media (max-width: 768px) { .gtmkit-pricing-compare__card { padding: 32px 24px; gap: 24px; } }
.gtmkit-pricing-compare__card--premium {
  border: 2px solid var(--color-brand-primary);
}
/* Recommended badge on Premium card.
   Desktop (Figma 407:102): floats above the card top edge at y=-14.
   Mobile  (Figma 484:33): sits inside the card at top-left after 32px
   card padding. */
.gtmkit-pricing-compare__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  color: #fff;
  padding: 4px 14px;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .gtmkit-pricing-compare__badge {
    position: static;
    transform: none;
    align-self: flex-start;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1;
  }
}
.gtmkit-pricing-compare__card h3 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-pricing-compare__desc {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-pricing-compare__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.gtmkit-pricing-compare__tabs button {
  background: transparent;
  border: 0;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--motion-default) ease-out, color var(--motion-default) ease-out;
}
.gtmkit-pricing-compare__tabs button:hover { color: var(--color-text-primary); }
.gtmkit-pricing-compare__tabs button.is-active {
  background: var(--color-surface-background);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.gtmkit-pricing-compare__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Big "Free" / "$399" — Figma 407:51 / 407:78: Inter SemiBold 52/56/-1.4 */
.gtmkit-pricing-compare__price strong span {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 52px;
  line-height: 56px;
  letter-spacing: -1.4px;
  color: var(--color-text-primary);
}
.gtmkit-pricing-compare__price span {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-tertiary);
}
@media (max-width: 768px) {
  .gtmkit-pricing-compare__price strong { font-size: 44px; line-height: 48px; letter-spacing: -1.2px; }
}
/* Pricing page: price number + sites <select> on one row (Figma 410:96). */
.gtmkit-pricing-compare__price-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Brand-aligned interactive pill — Figma dropdown next to the price. */
.gtmkit-pricing-compare__sites-dropdown {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface-brand-subtle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1.5px solid var(--color-text-brand);
  border-radius: 10px;
  padding: 10px 42px 10px 18px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--color-text-brand);
  cursor: pointer;
  box-shadow: 0 2px 6px 0 rgba(29, 78, 216, 0.15);
  transition: border-color var(--motion-default) ease-out, box-shadow var(--motion-default) ease-out;
}
.gtmkit-pricing-compare__sites-dropdown:hover {
  border-color: var(--color-text-brand-hover);
}
.gtmkit-pricing-compare__sites-dropdown:focus-visible {
  outline: 2px solid var(--color-text-brand);
  outline-offset: 2px;
}
.gtmkit-pricing-compare__features {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
/* Pricing feature list rows — Figma 407:54: 16x16 solid green dot, no checkmark.
   Inter Regular 15/22, text-primary. */
.gtmkit-pricing-compare__features li {
  position: relative;
  padding-left: 28px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-primary);
}
.gtmkit-pricing-compare__features li::before {
  content: "";
  position: absolute; left: 0; top: 5px;
  width: 16px; height: 16px;
  border-radius: 9999px;
  background: var(--color-state-success);
}
.gtmkit-pricing-compare__features li::after { content: none; }
/* Pricing CTA button — Figma 407:70 / 407:100: h-48, px-24, radius 8, Inter Medium 15. */
.gtmkit-pricing-compare__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-pricing-compare__cta--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
.gtmkit-pricing-compare__cta--primary:hover { background: var(--color-brand-primary-hover); }
.gtmkit-pricing-compare__cta--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}
.gtmkit-pricing-compare__cta--secondary:hover { background: var(--color-surface-subtle); }
/* Footer note — green dot + Inter Medium 13/tertiary */
.gtmkit-pricing-compare__note {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 0;
}
.gtmkit-pricing-compare__note::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-state-success);
}

/* Contact channels — Figma 424:407 / 424:417 / 424:425.
   3-col grid, card 384w with 24 gap. Card padding 28h 32v, gap 16. */
.gtmkit-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .gtmkit-channels { grid-template-columns: 1fr; gap: 16px; }
}
.gtmkit-channel {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-channel__icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--color-surface-brand-subtle);
  color: var(--color-brand-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gtmkit-channel__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-channel__body {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-channel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  margin-top: auto;
}
.gtmkit-channel__link {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text-brand);
  text-decoration: none;
}
.gtmkit-channel__link:hover { color: var(--color-text-brand-hover); text-decoration: underline; }
.gtmkit-channel__badge {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 9999px;
}

/* Contact form section header — Figma 476:506 desktop / 527:36 mobile. */
.gtmkit-contact-form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 40px;
}
.gtmkit-contact-form-header__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--color-text-brand);
  margin: 0;
  text-transform: uppercase;
}
.gtmkit-contact-form-header__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-contact-form-header__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-secondary);
  margin: 0;
}
@media (max-width: 768px) {
  .gtmkit-contact-form-header__title { font-size: 24px; line-height: 32px; letter-spacing: -0.4px; }
  .gtmkit-contact-form-header__sub { font-size: 14px; line-height: 22px; }
}

/* Company info bar — Figma 424:433 desktop.
   4 columns with 64 gap, tertiary 11 labels with 0.8 tracking, primary 15 values. */
.gtmkit-company-info__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  justify-content: center;
  border-top: 1px solid var(--color-border-default);
  padding-top: 32px;
}
.gtmkit-company-info__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtmkit-company-info__label {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.8px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.gtmkit-company-info__value {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 0;
}
@media (max-width: 768px) {
  .gtmkit-company-info__grid { gap: 24px; flex-direction: column; align-items: flex-start; }
}

/* Blog hero variant — Figma 414:138. Slightly tighter title (44 vs 48),
   pt-96 pb-48. */
.gtmkit-page-hero--blog { gap: 16px; padding-bottom: 48px; }
.gtmkit-page-hero--blog .gtmkit-page-hero__title {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -1px;
}
@media (max-width: 768px) {
  .gtmkit-page-hero--blog .gtmkit-page-hero__title { font-size: 32px; line-height: 40px; letter-spacing: -0.6px; }
}

/* Blog meta row (category dot date). Figma 414:146.
   Featured: 12px. Card: 11px. Cat: brand 500 0.6 tracking uppercase.
   Date: tertiary 400. Separator: muted. */
.gtmkit-blog-meta { display: flex; align-items: center; gap: 12px; }
.gtmkit-blog-meta--sm { gap: 8px; }
.gtmkit-blog-meta__cat,
.gtmkit-blog-meta .wp-block-post-terms a {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.6px !important;
  color: var(--color-text-brand) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.gtmkit-blog-meta--sm .gtmkit-blog-meta__cat,
.gtmkit-blog-meta--sm .wp-block-post-terms a { font-size: 11px !important; letter-spacing: 0.88px !important; }
.gtmkit-blog-meta__sep {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
}
.gtmkit-blog-meta--sm .gtmkit-blog-meta__sep { font-size: 12px !important; }
.gtmkit-blog-meta__date,
.gtmkit-blog-meta .wp-block-post-date {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-blog-meta--sm .gtmkit-blog-meta__date,
.gtmkit-blog-meta--sm .wp-block-post-date { font-size: 12px !important; }

/* Featured post — Figma 414:143. 30/600/38 -0.5 title, 17/28 excerpt. */
.gtmkit-blog-featured__title,
.gtmkit-blog-featured__title a {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  line-height: 38px !important;
  letter-spacing: -0.5px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-decoration: none !important;
}
.gtmkit-blog-featured__title a:hover { color: var(--color-text-brand) !important; }
.gtmkit-blog-featured__excerpt {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 28px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-blog-featured__excerpt .wp-block-post-excerpt__excerpt { margin: 0 !important; }
.gtmkit-blog-author { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.gtmkit-blog-author .wp-block-avatar img { width: 32px; height: 32px; }
.gtmkit-blog-author .wp-block-avatar img { border-radius: 9999px !important; }
.gtmkit-blog-author__name,
.gtmkit-blog-author__name a {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-decoration: none !important;
}
@media (max-width: 768px) {
  .gtmkit-blog-featured__columns { flex-direction: column !important; gap: 24px !important; }
  .gtmkit-blog-featured__title { font-size: 24px !important; line-height: 32px !important; letter-spacing: -0.4px !important; }
  .gtmkit-blog-featured__excerpt { font-size: 15px !important; line-height: 24px !important; }
}

/* Order received hero — Figma 419:299. 64px success circle on top,
   40/600/48 -1 tracking title, 17/28 secondary subhead. */
.gtmkit-order-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 80px 24px 0;
  text-align: center;
}
.gtmkit-order-hero__check {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--color-state-success);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.gtmkit-order-hero__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-order-hero__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 640px;
}
@media (max-width: 768px) {
  .gtmkit-order-hero { padding: 48px 24px 0; gap: 16px; }
  .gtmkit-order-hero__check { width: 56px; height: 56px; }
  .gtmkit-order-hero__title { font-size: 28px; line-height: 36px; letter-spacing: -0.6px; }
  .gtmkit-order-hero__sub { font-size: 15px; line-height: 24px; }
}

/* =====================================================================
   ORDER-RECEIVED page (Figma 419:299 / 419:304). Styling for the three
   WC-rendered sections sitting between the hero and the gtmkit/order-
   received-extras block: confirmation summary, totals table, and the
   WC Subscriptions related-subscriptions table.
   ===================================================================== */

/* (1) Confirmation summary — Order # / Date / Total / Email / Payment.
   WC renders a <ul> with key/value <li> pairs inline. Restyle as a
   bordered card holding a horizontal grid of label/value stacks. */
.wc-block-order-confirmation-summary {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 24px;
}
.wc-block-order-confirmation-summary-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 24px;
}
.wc-block-order-confirmation-summary-list-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wc-block-order-confirmation-summary-list-item::before,
.wc-block-order-confirmation-summary-list-item::after { content: none !important; display: none !important; }
.wc-block-order-confirmation-summary-list-item__key {
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  /* Remove the trailing ":" WC ships in the key text — pure visual choice. */
}
.wc-block-order-confirmation-summary-list-item__value {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  word-break: break-word;
}

/* (2) Order details totals table. Apply the cart-style bordered card
   treatment so it matches the rest of the checkout flow. */
table.wc-block-order-confirmation-totals__table {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default) !important;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  margin: 0 0 24px;
}
table.wc-block-order-confirmation-totals__table thead,
table.wc-block-order-confirmation-totals__table thead tr,
table.wc-block-order-confirmation-totals__table thead th {
  background: var(--color-surface-muted) !important;
}
table.wc-block-order-confirmation-totals__table th,
table.wc-block-order-confirmation-totals__table td {
  padding: 14px 20px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}
table.wc-block-order-confirmation-totals__table thead th {
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
}
table.wc-block-order-confirmation-totals__table tbody tr:last-child td {
  border-bottom: 0 !important;
}
table.wc-block-order-confirmation-totals__table tfoot tr:last-child td,
table.wc-block-order-confirmation-totals__table tbody tr:last-child td { border-bottom: 0 !important; }
table.wc-block-order-confirmation-totals__table tfoot td {
  font-weight: 600 !important;
  border-top: 1px solid var(--color-border-default) !important;
}

/* (3) Related subscriptions table (WC Subscriptions plugin). Same
   bordered-card treatment and a brand-blue View button. */
.woocommerce-MyAccount-subscriptions,
table.shop_table.woocommerce-orders-table {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default) !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  margin: 0 0 24px;
}
.woocommerce-MyAccount-subscriptions thead,
.woocommerce-MyAccount-subscriptions thead tr,
.woocommerce-MyAccount-subscriptions thead th,
table.shop_table.woocommerce-orders-table thead,
table.shop_table.woocommerce-orders-table thead tr,
table.shop_table.woocommerce-orders-table thead th {
  background: var(--color-surface-muted) !important;
}
.woocommerce-MyAccount-subscriptions th,
.woocommerce-MyAccount-subscriptions td,
table.shop_table.woocommerce-orders-table th,
table.shop_table.woocommerce-orders-table td {
  padding: 14px 20px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}
.woocommerce-MyAccount-subscriptions thead th,
table.shop_table.woocommerce-orders-table thead th {
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
}
.woocommerce-MyAccount-subscriptions tbody tr:last-child td,
table.shop_table.woocommerce-orders-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
/* "View" button — WP element style was forcing dark grey. Force the
   brand colour like we already do on the cart's Apply / Proceed
   buttons. */
.woocommerce-MyAccount-subscriptions .button,
table.shop_table.woocommerce-orders-table .button,
.woocommerce-MyAccount-subscriptions a.wp-element-button,
table.shop_table.woocommerce-orders-table a.wp-element-button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--motion-default) ease-out;
}
.woocommerce-MyAccount-subscriptions .button:hover,
table.shop_table.woocommerce-orders-table .button:hover,
.woocommerce-MyAccount-subscriptions a.wp-element-button:hover,
table.shop_table.woocommerce-orders-table a.wp-element-button:hover {
  background: var(--color-brand-primary-hover) !important;
}

/* Section headings between cards on order-received. Pull them in
   so they don't float as 24px page-level h2 the way WC ships them. */
.gtmkit-order-details h2,
.gtmkit-order-details h3 {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 8px 0 12px !important;
}

@media (max-width: 768px) {
  .wc-block-order-confirmation-summary { padding: 18px 20px; }
  .wc-block-order-confirmation-summary-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  table.wc-block-order-confirmation-totals__table th,
  table.wc-block-order-confirmation-totals__table td,
  .woocommerce-MyAccount-subscriptions th,
  .woocommerce-MyAccount-subscriptions td,
  table.shop_table.woocommerce-orders-table th,
  table.shop_table.woocommerce-orders-table td { padding: 12px 14px !important; font-size: 13px !important; }
}

/* Shop pages hero (Cart / Checkout / Order received).
   Figma 417:218 / 418:258 / 419:298. Centered 36/600/44 -0.8 tracking. */
.gtmkit-shop-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 24px;
}
.gtmkit-shop-hero__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.8px;
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .gtmkit-shop-hero { padding: 32px 24px 16px; }
  .gtmkit-shop-hero__title { font-size: 28px; line-height: 36px; letter-spacing: -0.6px; }
}

/* Blog single hero — Figma 414:249. Centered: gap-16, pt-80 pb-40 px-24,
   meta row 12px, title 48/600/56 -1.2 tracking, excerpt 19/30 secondary,
   author 36px avatar + 14/Medium name + 12 tertiary role. */
.gtmkit-blog-single-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 24px 40px;
}
.gtmkit-blog-single-hero__title,
.gtmkit-blog-single-hero__title a {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 48px !important;
  line-height: 56px !important;
  letter-spacing: -1.2px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-align: center !important;
  max-width: 840px;
}
.gtmkit-blog-single-hero__excerpt {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 30px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  text-align: center !important;
  max-width: 720px;
}
.gtmkit-blog-single-hero__excerpt .wp-block-post-excerpt__excerpt { margin: 0 !important; }
.gtmkit-blog-single-hero__author { padding-top: 12px; display: flex; align-items: center; gap: 12px; }
.gtmkit-blog-single-hero__author .wp-block-avatar img { border-radius: 9999px !important; width: 36px; height: 36px; }
.gtmkit-blog-single-hero__author-text { display: flex; flex-direction: column; align-items: flex-start; }
.gtmkit-blog-single-hero__author-name,
.gtmkit-blog-single-hero__author-name a {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-decoration: none !important;
}
.gtmkit-blog-single-hero__author-role {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .gtmkit-blog-single-hero { padding: 48px 24px 32px; gap: 12px; }
  .gtmkit-blog-single-hero__title { font-size: 32px !important; line-height: 40px !important; letter-spacing: -0.8px !important; }
  .gtmkit-blog-single-hero__excerpt { font-size: 16px !important; line-height: 26px !important; }
}

/* Blog secondary cards — per 2026-05-13 phase-E spec. Bordered, no
   thumbnail. 28px padding, 12px radius, 12px internal gap. 20/700/1.3
   title, 14/1.55 excerpt, 13/600 brand "Read article →" link. */
.gtmkit-blog-card {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 28px !important;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-surface-card);
  transition: border-color var(--motion-default) ease-out, transform var(--motion-default) ease-out;
}
.gtmkit-blog-card > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-blog-card:hover { border-color: var(--color-border-brand); transform: translateY(-1px); }
.gtmkit-blog-card__title,
.gtmkit-blog-card__title a {
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-decoration: none !important;
}
.gtmkit-blog-card__title a:hover { color: var(--color-text-brand) !important; }
.gtmkit-blog-card__excerpt {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-blog-card__excerpt .wp-block-post-excerpt__excerpt { margin: 0 !important; }
.gtmkit-blog-card__read {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-brand);
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}
.gtmkit-blog-card__read:hover { color: var(--color-text-brand-hover); }

/* Featured cover. Real thumbnail shows as object-cover; fallback
   shows a brand-blue gradient with the post title centered. */
.gtmkit-blog-featured__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-surface-subtle);
}
.gtmkit-blog-featured__cover--image .gtmkit-blog-featured__cover-img,
.gtmkit-blog-featured__cover--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fallback featured card — Figma 414:144. Solid brand-blue, content
   stacked top→bottom: category eyebrow, 40px bold title, logo + date
   footer. Sized 3:2 to mirror the 560×360 frame. */
.gtmkit-blog-featured__cover--fallback {
  background: var(--color-brand-primary);
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px;
}
.gtmkit-blog-featured__cover-eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.gtmkit-blog-featured__cover-title {
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.5px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gtmkit-blog-featured__cover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gtmkit-blog-featured__cover-logo { height: 22px; width: auto; display: block; }
.gtmkit-blog-featured__cover-date {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
  .gtmkit-blog-featured__cover--fallback { padding: 24px; }
  .gtmkit-blog-featured__cover-title { font-size: 30px; line-height: 38px; }
}

/* Featured columns layout + spacing wrap. Figma 414:142: body pt-48,
   64px gap between the featured row and the secondary grid. */
.gtmkit-blog-body { padding: 48px 32px 96px; }
/* !important: WordPress's constrained-layout styles force margin-block-end:0
   on the featured block and a 24px blockGap on the columns, overriding plain
   class rules. The stacked-mobile overrides below already use !important too. */
.gtmkit-blog-featured { margin-bottom: 80px !important; }
.gtmkit-blog-featured__columns { gap: 64px !important; }
.gtmkit-blog-featured__content { display: flex; flex-direction: column; gap: 12px; }
.gtmkit-blog-featured__content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Grid spacing — 3 columns, 24px gap. Pagination beneath. */
.gtmkit-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none !important;
  padding: 0 !important;
}
.gtmkit-blog-grid > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gtmkit-blog-grid > li::before, .gtmkit-blog-grid > li::after { content: none !important; display: none !important; }
.gtmkit-blog-pagination {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-default);
}

@media (max-width: 1024px) {
  .gtmkit-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .gtmkit-blog-featured__columns { flex-direction: column !important; gap: 24px !important; }
}
@media (max-width: 768px) {
  .gtmkit-blog-body { padding: 0 20px 64px; }
  .gtmkit-blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .gtmkit-blog-card { padding: 22px !important; }
  .gtmkit-blog-card__title { font-size: 18px !important; line-height: 1.3 !important; }
}

/* Left-aligned hero variant (Docs landing, blog index, account etc.). */
.gtmkit-page-hero--start {
  align-items: flex-start;
  text-align: left;
}
.gtmkit-page-hero--start .gtmkit-page-hero__title,
.gtmkit-page-hero--start .gtmkit-page-hero__sub {
  text-align: left;
}

/* Legal page hero variant — Figma 425:418. Tighter than the generic page hero:
   pt-80 pb-24, gap-8, title 44/600/52 -1.1, meta line in tertiary 14. */
.gtmkit-page-hero--legal {
  gap: 8px;
  padding-top: 80px;
  padding-bottom: 24px;
}
.gtmkit-page-hero--legal .gtmkit-page-hero__title {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -1.1px;
}
.gtmkit-page-hero__meta {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .gtmkit-page-hero--legal { padding-top: 48px; padding-bottom: 24px; }
  .gtmkit-page-hero--legal .gtmkit-page-hero__title { font-size: 32px; line-height: 40px; letter-spacing: -0.8px; }
  .gtmkit-page-hero__meta { font-size: 13px; }
}

/* Legal page TOC sidebar — Figma 425:423. 220 wide, 14 gap.
   "ON THIS PAGE" label 12/Medium tertiary 0.6 tracking. Items 13/Regular
   secondary, 28h, left-border 1px default. Active item has 2px brand border
   and 13/Medium brand. */
.gtmkit-legal-toc { position: sticky; top: 80px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.gtmkit-legal-toc__label {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}
.gtmkit-legal-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.gtmkit-legal-toc__list li {
  margin: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-left: 1px solid var(--color-border-default);
}
.gtmkit-legal-toc__list li.is-active { border-left: 2px solid var(--color-border-brand); padding-left: 11px; }
.gtmkit-legal-toc__list a {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.gtmkit-legal-toc__list li.is-active a { font-weight: 500; color: var(--color-text-brand); }
.gtmkit-legal-toc__list a:hover { color: var(--color-text-primary); }
@media (max-width: 1024px) {
  .gtmkit-legal-toc { position: static; margin-bottom: 24px; }
}

/* (Blog index — featured + grid rules now live above next to
   .gtmkit-blog-card. The previous image-related selectors were
   removed when the spec dropped thumbnails from secondary cards.) */

/* Dashboard: my-account sidebar styled per Figma */
.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: 80px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; background-size: contain; background-repeat: no-repeat; opacity: 0.6; }

/* Purple-gradient final CTA — Figma 406:46. Single custom block
   (gtmkit/final-cta) so the validator can't fight inline-style mismatches. */
.gtmkit-cta-gradient {
  background: linear-gradient(to right, #6366f1 0%, #7c3aed 100%);
  color: #fff;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.gtmkit-cta-gradient__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.8px;
  color: #fff;
  margin: 0;
  max-width: 720px;
}
.gtmkit-cta-gradient__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  max-width: 640px;
}
.gtmkit-cta-gradient__buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
  flex-wrap: wrap;
}
.gtmkit-cta-gradient__primary,
.gtmkit-cta-gradient__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  /* Padding must NOT push width past parent — needed because mobile sets
     width: 100% and the default content-box would overflow the section. */
  box-sizing: border-box;
}
.gtmkit-cta-gradient__primary {
  background: #fff;
  color: #7c3aed;
}
.gtmkit-cta-gradient__primary:hover { background: rgba(255,255,255,0.92); color: #7c3aed; }
.gtmkit-cta-gradient__secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.gtmkit-cta-gradient__secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }
/* Price teaser under the buttons — handoff 2026-05-29. ~14px, white, centered. */
.gtmkit-cta-gradient__teaser {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .gtmkit-cta-gradient { padding: 64px 24px; gap: 16px; }
  .gtmkit-cta-gradient__title { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; }
  .gtmkit-cta-gradient__sub { font-size: 15px; line-height: 22px; }
  .gtmkit-cta-gradient__buttons { flex-direction: column; width: 100%; gap: 10px; }
  .gtmkit-cta-gradient__primary,
  .gtmkit-cta-gradient__secondary { width: 100%; }
}

/* =====================================================================
   MOBILE RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
  /* Headings scale down on mobile per Figma mobile comps.
     .gtmkit-hero-title is handled by its own dedicated rule above. */
  .wp-block-heading[style*="font-size:56px"]:not(.gtmkit-hero-title) { font-size: 34px !important; line-height: 40px !important; }
  .wp-block-heading[style*="font-size:48px"] { font-size: 32px !important; line-height: 38px !important; }
  .wp-block-heading[style*="font-size:40px"] { font-size: 28px !important; line-height: 34px !important; }
  .wp-block-heading[style*="font-size:32px"] { font-size: 24px !important; line-height: 30px !important; }

  /* Section padding — Figma mobile (node 482:2) uses 64/64 on most sections.
     Hero is 56/64 (top tighter than other sections). */
  .wp-block-group.alignfull[style*="padding-top:96px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  .wp-block-group.alignfull[style*="padding-top:80px"] { padding-top: 56px !important; padding-bottom: 64px !important; }
  .wp-block-group.alignfull[style*="padding-top:64px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  /* Hero specifically: inline style is padding-top:96 padding-bottom:80, override to 56/64 */
  .wp-block-group.alignfull[style*="padding-top:96px"][style*="padding-bottom:80px"] {
    padding-top: 56px !important; padding-bottom: 64px !important;
  }
  /* Final CTA: 64/64 on mobile per Figma node 484:105.
     Higher specificity needed to win against the [style*=] attribute rule above. */
  .wp-block-group.alignfull.gtmkit-cta-gradient { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Top nav collapses to hamburger (handled by core navigation block).
     Apply consistent gap and ensure the Get Premium pill stays visible. */
  .gtmkit-top-nav { font-size: 13px; }

  /* Pricing tier tabs: stack 2x2 on narrow widths so labels stay readable */
  .gtmkit-pricing-compare__tabs { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .gtmkit-pricing-compare__tabs button { font-size: 13px; padding: 8px 6px; }

  /* CTAs stack and fill width on mobile.
     Figma mobile uses 10px between stacked CTA buttons (node 482:23 frame). */
  .wp-block-buttons { width: 100%; flex-direction: column; gap: 10px; }
  .wp-block-buttons .wp-block-button { width: 100%; }
  .wp-block-buttons .wp-block-button .wp-block-button__link { display: block; text-align: center; }

  /* Card-to-card vertical gaps when stacked on mobile.
     Values pulled from Figma node 482:2 auto-layout itemSpacing:
       - Feature cards (node 483:22): 32px
       - Comparison cards (Free/Premium, node 483:83): 24px
       - Pricing tier cards (node 484:2): 24px
     Heading-group → first card gap is 32px (node 483:23 -> 483:27). */
  .wp-block-columns { gap: 32px !important; }
  .wp-block-group > .wp-block-columns + .wp-block-columns { margin-top: 32px !important; }
  /* .gtmkit-pricing-compare mobile gap is set above (32px after badge moved inside card).
     Don't redeclare here. */
  .gtmkit-channels { gap: 24px; }
  .gtmkit-dashboard-metrics { gap: 16px; }

  /* Blog featured stacks */
  .gtmkit-blog-featured__columns { gap: 24px; }
}

/* Legal: TOC stays in 2-col at >=1024 only */
@media (max-width: 1024px) {
  .gtmkit-legal-toc__list li { border-left: 0; padding-left: 0; }
  .gtmkit-legal-toc__list a { padding: 4px 0; }
}

/* Most-popular pricing card */
.wp-block-column.is-style-most-popular .wp-block-group {
  border-color: var(--color-brand-primary);
  border-width: 2px;
  position: relative;
}
.wp-block-column.is-style-most-popular .wp-block-group::before {
  content: "Most popular";
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Legal page body */
/* Legal / long-form body — Figma 425:439. H2 24/600/32 -0.4, body 16/28
   primary, 24 gap between blocks. */
.entry-content { display: flex; flex-direction: column; gap: 24px; }
/* Core's constrained layout sets margin-inline:auto on every child, which in a
   flex column centres short blocks (headings, lists). Override with higher
   specificity (.gtmkit-legal-layout .entry-content > *) so the body is left-aligned. */
.gtmkit-legal-layout .entry-content > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; align-self: stretch; }
.entry-content h2 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  margin: 0;
}
.entry-content h3 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text-primary);
  margin: 0;
}
.entry-content p {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-text-primary);
  margin: 0;
}
.entry-content a { color: var(--color-text-brand); text-decoration: underline; }
.entry-content ul {
  padding-left: 24px;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-text-primary);
}

/* Docs sidebar list — Figma 411:100. Group label 12/Medium tertiary 0.6
   tracking, items 8 gap, each h-32 p:6 12. Hover: surface-subtle bg.
   Active: surface-brand-subtle bg radius 8, 14/Medium brand. */
.gtmkit-docs-sidebar .wp-block-group > p {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}
.is-style-docs-sidebar-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.is-style-docs-sidebar-list li { margin: 0; }
.is-style-docs-sidebar-list a {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-secondary);
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--motion-default) ease-out;
}
.is-style-docs-sidebar-list a:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.is-style-docs-sidebar-list a.current,
.is-style-docs-sidebar-list a[aria-current="page"] {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-weight: 500;
}

/* Docs TOC list — Figma 411:182. Items 6 gap, py-4 pl-12.
   1px default left-border, 2px brand for active. 14/Regular secondary. */
.gtmkit-docs-toc > p {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}
.is-style-docs-toc-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.is-style-docs-toc-list li { border-left: 1px solid var(--color-border-default); margin: 0; padding-left: 12px; }
.is-style-docs-toc-list a {
  display: block;
  padding: 4px 0;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.is-style-docs-toc-list a:hover { color: var(--color-text-primary); }
.is-style-docs-toc-list li.active { border-left: 2px solid var(--color-border-brand); padding-left: 11px; }
.is-style-docs-toc-list li.active a { color: var(--color-text-brand); font-weight: 500; }

/* Docs body — Figma 411:98. 3-col grid: sidebar 280 (surface-subtle bg,
   border-r), article column 920 (white), TOC 240. */
.gtmkit-docs-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 240px;
  align-items: stretch;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.gtmkit-docs-sidebar {
  background: var(--color-surface-subtle);
  border-right: 1px solid var(--color-border-default);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gtmkit-docs-article {
  padding: 64px 64px 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.gtmkit-docs-article__title {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 40px !important;
  line-height: 48px !important;
  letter-spacing: -0.8px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-docs-article__lede,
.gtmkit-docs-article .wp-block-post-excerpt {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 30px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-docs-article .wp-block-post-excerpt__excerpt { margin: 0 !important; }
.gtmkit-docs-toc {
  padding: 64px 48px 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 1200px) {
  .gtmkit-docs-body { grid-template-columns: 240px minmax(0, 1fr); }
  .gtmkit-docs-toc { display: none; }
}
@media (max-width: 720px) {
  .gtmkit-docs-body { grid-template-columns: 1fr; }
  .gtmkit-docs-sidebar { display: none; }
  .gtmkit-docs-article { padding: 32px 24px 64px; gap: 12px; }
  .gtmkit-docs-article__title { font-size: 28px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.4px !important; }
  .gtmkit-docs-article__lede,
  .gtmkit-docs-article .wp-block-post-excerpt { font-size: 17px !important; line-height: 1.55 !important; color: var(--color-text-secondary) !important; margin-bottom: 12px !important; }
}

/* =====================================================================
   DOCS INDEX — Figma 593:510
   ===================================================================== */

/* Most docs-index sections cap at 1440px and center. The popular strip
   is excluded — its surface-subtle background spans full viewport edge
   to edge, with only its inner content capped at 1280px (see below). */
.wp-block-group.gtmkit-docs-index-hero,
.wp-block-group.gtmkit-docs-index-search,
.wp-block-group.gtmkit-docs-index-grid,
.wp-block-group.gtmkit-docs-index-help {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
/* Popular strip: bg edge-to-edge (no max-width on wrapper). The inner
   __head and __grid are capped at 1280px on their own rules below. */

/* Hero. Specificity bumped via .wp-block-group + !important on padding so
   WP's has-global-padding doesn't override the Figma 80px horizontal. */
.wp-block-group.gtmkit-docs-index-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 96px 80px 48px !important;
  align-items: flex-start;
}
.gtmkit-docs-index-hero__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--color-text-brand);
  margin: 0;
  text-transform: uppercase;
}
.gtmkit-docs-index-hero__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 60px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-docs-index-hero__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 720px;
}
.gtmkit-docs-index-hero > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Search box — Figma 593:531. 720w, p:18 20, radius 10, kbd hint right. */
.wp-block-group.gtmkit-docs-index-search {
  padding: 0 80px 48px !important;
}
.gtmkit-docs-index-search .gtmkit-docs-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px !important;
  padding: 18px 20px;
  background: var(--color-surface-background);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  box-sizing: border-box;
}
.gtmkit-docs-search__icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.gtmkit-docs-search__input {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-primary);
  outline: none;
}
.gtmkit-docs-search__input::placeholder { color: var(--color-text-tertiary); }
.gtmkit-docs-search__kbd {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Category cards grid — Figma 593:538. 2x2, gap 24. */
.wp-block-group.gtmkit-docs-index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 80px 64px !important;
}
/* WP's is-layout-constrained sets `max-width: contentSize` and `margin: auto`
   on every non-aligned child, which makes grid items center at content-width
   instead of stretching to fill their cell. Override on the grid children. */
.wp-block-group.gtmkit-docs-index-grid > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  justify-self: stretch;
}
.gtmkit-docs-index-grid > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* The card itself — rendered by gtmkit/docs-category-card. */
.wp-block-group.gtmkit-docs-cat,
.gtmkit-docs-cat {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
  height: 100%;
}
.gtmkit-docs-cat__head {
  display: flex;
  gap: 16px;
  align-items: center;
}
.gtmkit-docs-cat__icon {
  background: var(--color-surface-brand-subtle);
  border-radius: 10px;
  padding: 12px;
  color: var(--color-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gtmkit-docs-cat__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gtmkit-docs-cat__label {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.88px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-transform: uppercase;
}
.gtmkit-docs-cat__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-docs-cat__desc {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-docs-cat__line {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--color-border-default);
  margin: 0;
}
.gtmkit-docs-cat__list { display: flex; flex-direction: column; }
.gtmkit-docs-cat__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--motion-default) ease-out;
}
.gtmkit-docs-cat__row:hover { color: var(--color-text-brand); }
.gtmkit-docs-cat__row svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.gtmkit-docs-cat__browse {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-brand);
  text-decoration: none;
  margin-top: auto;
}
.gtmkit-docs-cat__browse:hover { color: var(--color-text-brand-hover); }

/* Popular strip — Figma 593:660. */
.wp-block-group.gtmkit-docs-index-popular {
  padding: 64px 80px !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wp-block-group.gtmkit-docs-index-popular__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 16px;
}
.gtmkit-docs-index-popular__title-wrap { display: flex; flex-direction: column; gap: 6px; }
.gtmkit-docs-index-popular__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.88px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-transform: uppercase;
}
.gtmkit-docs-index-popular__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-docs-index-popular__link {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-brand);
  text-decoration: none;
  white-space: nowrap;
}
.wp-block-group.gtmkit-docs-index-popular__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-group.gtmkit-docs-index-popular__grid > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  justify-self: stretch;
}
.gtmkit-docs-pop {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  height: 100%;
  align-self: stretch;
  /* border-box so `height: 100%` includes padding + border. Without this,
     `height: 100%` resolves to the grid track height (content-box), then
     the 20px padding + 1px border get *added* on top, making the card
     overflow the track by ~42px — which manifested as the popular strip
     looking like it had only ~22px bottom padding instead of 64px. */
  box-sizing: border-box;
  transition: border-color var(--motion-default) ease-out;
}
.gtmkit-docs-pop:hover { border-color: var(--color-border-brand); }
.gtmkit-docs-pop__label {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.8px;
  color: var(--color-text-brand);
  text-transform: uppercase;
}
.gtmkit-docs-pop__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-primary);
}

/* Help strip — Figma 593:679. */
.wp-block-group.gtmkit-docs-index-help {
  padding: 48px 80px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.gtmkit-docs-index-help__left { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 0 0; }
.gtmkit-docs-index-help__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-docs-index-help__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-docs-index-help__right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.gtmkit-docs-index-help__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.gtmkit-docs-index-help__btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
.gtmkit-docs-index-help__btn--primary:hover { background: var(--color-brand-primary-hover); }
.gtmkit-docs-index-help__btn--secondary {
  background: var(--color-surface-background);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}
.gtmkit-docs-index-help__btn--secondary:hover { background: var(--color-surface-subtle); }

@media (max-width: 1024px) {
  .wp-block-group.gtmkit-docs-index-hero,
  .wp-block-group.gtmkit-docs-index-search,
  .wp-block-group.gtmkit-docs-index-grid,
  .wp-block-group.gtmkit-docs-index-popular,
  .wp-block-group.gtmkit-docs-index-help { padding-left: 24px !important; padding-right: 24px !important; }
  /* Single-column stack for both grids on mobile/tablet per Figma 594:367 + 594:486.
     0.625rem (10px) gap between stacked cards. !important defeats the
     base-rule `gap: 16px` and any WP layout override. */
  .wp-block-group.gtmkit-docs-index-grid {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
    row-gap: 0.625rem !important;
  }
  .wp-block-group.gtmkit-docs-index-popular__grid {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
    row-gap: 0.625rem !important;
  }
  /* Fallback: also set margin-bottom on every card except the last so
     spacing is visible even if a parent rule kills grid `gap`. */
  .wp-block-group.gtmkit-docs-index-grid > *:not(:last-child),
  .wp-block-group.gtmkit-docs-index-popular__grid > *:not(:last-child) {
    margin-block-end: 0.625rem !important;
  }
  /* Help strip stacks; both buttons full-width per Figma 594:502/504. */
  .wp-block-group.gtmkit-docs-index-help {
    flex-direction: column;
    align-items: stretch;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    gap: 16px;
  }
  .gtmkit-docs-index-help__right { flex-direction: column; align-items: stretch; width: 100%; }
  .gtmkit-docs-index-help__btn { width: 100%; padding: 14px 18px; }
  /* Section vertical padding scales down. */
  .wp-block-group.gtmkit-docs-index-hero { padding: 48px 24px 24px !important; }
  .wp-block-group.gtmkit-docs-index-search { padding: 0 24px 32px !important; }
  .wp-block-group.gtmkit-docs-index-grid { padding: 0 24px 48px !important; }
  .wp-block-group.gtmkit-docs-index-popular { padding: 40px 24px !important; gap: 12px; }
  /* Hero typography scales down. */
  .gtmkit-docs-index-hero__title { font-size: 36px; line-height: 44px; }
  .gtmkit-docs-index-hero__sub { font-size: 15px; line-height: 24px; }
  /* Category card padding tighter + smaller icon/title/desc per Figma 594:368. */
  .wp-block-group.gtmkit-docs-cat,
  .gtmkit-docs-cat { padding: 24px 20px; gap: 14px; }
  .gtmkit-docs-cat__head { gap: 12px; }
  .gtmkit-docs-cat__icon { padding: 10px; }
  .gtmkit-docs-cat__icon svg { width: 22px; height: 22px; }
  .gtmkit-docs-cat__label { font-size: 10px; letter-spacing: 0.8px; }
  .gtmkit-docs-cat__title { font-size: 18px; line-height: 22px; }
  .gtmkit-docs-cat__desc { font-size: 13px; line-height: 20px; }
  .gtmkit-docs-cat__row { padding: 8px 0; }
  .gtmkit-docs-cat__row svg { width: 12px; height: 12px; }
  /* Search box: drop the ⌘K kbd on mobile per Figma 594:362 (not in the design). */
  .gtmkit-docs-search__kbd { display: none; }
  .gtmkit-docs-index-search .gtmkit-docs-search { max-width: none !important; padding: 14px; gap: 10px; }
  .gtmkit-docs-search__icon { width: 18px; height: 18px; }
  .gtmkit-docs-search__input { font-size: 14px; }
  /* Popular section header (eyebrow stacks above title + link, per Figma 594:484). */
  .wp-block-group.gtmkit-docs-index-popular__head { flex-direction: column; align-items: flex-start; }
  .gtmkit-docs-index-popular__title { font-size: 22px; }
  /* Popular card: tighter, smaller title. */
  .gtmkit-docs-pop { padding: 14px 16px; gap: 4px; }
  .gtmkit-docs-pop__title { font-size: 14px; line-height: 22px; }
  /* Help typography. */
  .gtmkit-docs-index-help__title { font-size: 20px; line-height: 28px; }
  .gtmkit-docs-index-help__sub { font-size: 13px; line-height: 20px; }
}

/* =====================================================================
   DOCS CATEGORY — Figma 595:556
   ===================================================================== */
.gtmkit-docs-cat-page { background: var(--color-surface-background); }
.wp-block-group.gtmkit-docs-cat-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  padding: 40px 80px 96px !important;
}
.gtmkit-docs-cat-body > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Sidebar — reuses the docs sidebar pattern. Override its bg to be flat
   (no subtle bg/right-border like the docs-article sidebar has). */
.gtmkit-docs-cat-sidebar { width: 240px; }
.gtmkit-docs-cat-sidebar .gtmkit-docs-sidebar {
  background: transparent !important;
  border-right: 0 !important;
  padding: 0 !important;
  gap: 24px;
}

/* Main column. */
.wp-block-group.gtmkit-docs-cat-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.gtmkit-docs-cat-main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

.gtmkit-docs-cat-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-tertiary);
}
.gtmkit-docs-cat-crumb a {
  color: var(--color-text-tertiary);
  text-decoration: none;
}
.gtmkit-docs-cat-crumb a:hover { color: var(--color-text-primary); }
.gtmkit-docs-cat-crumb .wp-block-post-title {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-docs-cat-crumb__sep { color: var(--color-text-tertiary); }

.gtmkit-docs-cat-header { display: flex; flex-direction: column; gap: 12px; }
.gtmkit-docs-cat-header__eyebrow {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.96px !important;
  color: var(--color-text-brand) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}
.gtmkit-docs-cat-header__title,
.gtmkit-docs-cat-header .wp-block-post-title {
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 56px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-docs-cat-header__sub,
.gtmkit-docs-cat-header .wp-block-post-excerpt {
  font-family: Inter, sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 26px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-docs-cat-header .wp-block-post-excerpt__excerpt { margin: 0 !important; }

.gtmkit-docs-cat-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-tertiary);
}
.gtmkit-docs-cat-meta__sep { color: var(--color-text-tertiary); }
.gtmkit-docs-cat-meta time { color: inherit; }

.gtmkit-docs-cat-line {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--color-border-default);
  margin: 0;
}

/* Sub-section inside a category page — Figma 595:634. */
.gtmkit-docs-cat-subsection {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}
.gtmkit-docs-cat-subsection__head { display: flex; flex-direction: column; gap: 6px; }
.gtmkit-docs-cat-subsection__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-docs-cat-subsection__sub {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-docs-cat-subsection__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Article card — Figma 595:639. Used inside category sub-sections. */
.gtmkit-docs-art {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  transition: border-color var(--motion-default) ease-out;
}
.gtmkit-docs-art:hover { border-color: var(--color-border-brand); }
.gtmkit-docs-art__num {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-surface-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.gtmkit-docs-art__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 0 0; }
.gtmkit-docs-art__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-docs-art__desc {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-docs-art__meta {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--color-text-tertiary);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gtmkit-docs-art__sep { color: var(--color-text-tertiary); }
.gtmkit-docs-art__chev { color: var(--color-text-tertiary); flex-shrink: 0; }

@media (max-width: 1024px) {
  .gtmkit-docs-cat-body { padding: 40px 32px 64px; grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gtmkit-docs-cat-body { padding: 32px 24px 64px; }
  .gtmkit-docs-cat-header__title,
  .gtmkit-docs-cat-header .wp-block-post-title { font-size: 32px !important; line-height: 40px !important; }
  .gtmkit-docs-cat-header__sub,
  .gtmkit-docs-cat-header .wp-block-post-excerpt { font-size: 15px !important; line-height: 24px !important; }
}

/* Tip / callout box — Figma 411:155. Rendered by gtmkit/tip-callout block.
   Defaults to the "tip" variant (brand-subtle bg, brand left border). */
.gtmkit-callout {
  background: var(--color-surface-brand-subtle);
  border-left: 3px solid var(--color-border-brand);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.gtmkit-callout > * { margin: 0 !important; }
.gtmkit-callout__label {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.4px;
  color: var(--color-text-brand);
}
.gtmkit-callout__body {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-primary);
}
.gtmkit-callout__body a { color: var(--color-text-brand); text-decoration: underline; }
.gtmkit-callout__body code {
  background: rgba(255,255,255,0.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Warning variant — amber-ish */
.gtmkit-callout--warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
}
.gtmkit-callout--warning .gtmkit-callout__label { color: #b45309; }

/* Note variant — neutral */
.gtmkit-callout--note {
  background: var(--color-surface-subtle);
  border-left-color: var(--color-border-strong);
}
.gtmkit-callout--note .gtmkit-callout__label { color: var(--color-text-secondary); }

/* Info variant — same as tip but explicit alias */
.gtmkit-callout--info {
  background: var(--color-surface-brand-subtle);
  border-left-color: var(--color-border-brand);
}
.gtmkit-callout--info .gtmkit-callout__label { color: var(--color-text-brand); }

/* =====================================================================
   WOOCOMMERCE CART — partial Figma 417:205 alignment.
   Three targeted overrides only (option B): line-items card border/radius,
   brand-subtle "3 sites" pill, and brand-primary Proceed-to-checkout button.
   ===================================================================== */

/* Line items card — WC renders the table itself with both wp-block-
   woocommerce-cart-line-items-block and wc-block-cart-items classes on
   the same TABLE element, so we style it directly. */
table.wp-block-woocommerce-cart-line-items-block,
table.wc-block-cart-items {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default) !important;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.wp-block-woocommerce-cart-items-block thead,
.wc-block-cart-items thead,
.wp-block-woocommerce-cart-items-block thead tr,
.wc-block-cart-items thead tr,
.wp-block-woocommerce-cart-items-block thead th,
.wc-block-cart-items thead th {
  /* Set the grey strip on every layer (thead, tr, th) so it paints
     edge-to-edge in every table-layout model. surface-muted (#f1f5f9)
     is slightly darker than surface-subtle so the header strip
     actually reads as a strip; subtle was too close to white to be
     visible against the card. */
  background: var(--color-surface-muted) !important;
}
/* WC core (cart.css) hides the middle "Details" header cell with
   visibility:hidden — but per CSS spec that also stops the cell's
   background from painting, leaving a gap in the grey strip. Re-
   enable visibility on the cell so the bg paints, and hide the
   inner text instead so "Details" stays invisible. */
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-product {
  visibility: visible !important;
}
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-product > * {
  visibility: hidden;
}
.wc-block-cart-items th {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
}

/* "3 sites" variation pill — Figma 417:238. */
.wc-block-components-product-details__sites {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand) !important;
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-top: 4px;
}
.wc-block-components-product-details__sites .wc-block-components-product-details__name,
.wc-block-components-product-details__sites .wc-block-components-product-details__value {
  color: inherit !important;
  font: inherit !important;
}
.wc-block-components-product-details__sites .wc-block-components-product-details__name::after {
  content: "";
}

/* Proceed-to-checkout button — Figma 417:271 (brand-primary, 48h, radius-8). */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border-radius: 8px !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
  background: var(--color-brand-primary-hover) !important;
}

/* =====================================================================
   RELEASES — taxonomy archive (taxonomy-release_track.html). Simple
   list of release rows; will be the basis for the /changelog/ index
   rebuild later.
   ===================================================================== */
.gtmkit-release-archive .gtmkit-release-list-wrap {
  padding: 0 24px 96px;
}
.gtmkit-release-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-release-list > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-release-list .wp-block-post-template {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-release-list .wp-block-post-template > li { margin: 0 !important; padding: 0; list-style: none; }
.gtmkit-release-list .wp-block-post-template > li::before,
.gtmkit-release-list .wp-block-post-template > li::after { content: none !important; display: none !important; }
.gtmkit-release-row {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-surface-card);
  transition: border-color var(--motion-default) ease-out, transform var(--motion-default) ease-out;
}
.gtmkit-release-row > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-release-row:hover { border-color: var(--color-border-brand); transform: translateY(-1px); }
.gtmkit-release-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gtmkit-release-row__track,
.gtmkit-release-row__track a {
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-brand) !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.gtmkit-release-row__sep {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-release-row__date,
.gtmkit-release-row .wp-block-post-date {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-release-row__title,
.gtmkit-release-row__title a {
  font-family: Inter, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.gtmkit-release-row__title a:hover { color: var(--color-text-brand) !important; }
.gtmkit-release-row__excerpt {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-release-row__excerpt .wp-block-post-excerpt__excerpt { margin: 0 !important; }
.gtmkit-release-row__excerpt .wp-block-post-excerpt__more-link { display: none; }
.gtmkit-release-pagination {
  margin-top: 32px !important;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-default);
  font-size: 14px;
}
@media (max-width: 768px) {
  .gtmkit-release-archive .gtmkit-release-list-wrap { padding: 0 20px 64px; }
  .gtmkit-release-row { padding: 18px 20px; }
  .gtmkit-release-row__title { font-size: 17px !important; }
}

/* Article body extras (code blocks within docs/blog) */
.entry-content h2 + p, .entry-content h3 + p { margin-top: 0; }
.entry-content pre { background: var(--color-surface-inverse); color: #fff; padding: 16px 20px; border-radius: 10px; font-size: 13px; line-height: 1.5; overflow-x: auto; }
.entry-content code { background: var(--color-surface-muted); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.entry-content pre code { background: transparent; padding: 0; }

/* =====================================================================
   DOCS — single article (single-docs.html) and category archive
   (taxonomy-docs_category.html). 240 sidebar + 1fr content, capped at
   1280. The sidebar is rendered by gtmkit/docs-nav (dynamic) and lists
   every docs_category term with its docs inside, highlighting the
   current article or term.
   ===================================================================== */
.gtmkit-docs-single .gtmkit-docs-single__body {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 32px;
  max-width: 1280px !important;
  margin: 48px auto 96px !important;
  padding: 0 32px;
  align-items: start;
  box-sizing: border-box;
}
.gtmkit-docs-single .gtmkit-docs-single__body > * {
  /* Defeat WP's is-layout-flow `> * + *` 24px margin injection on grid
     children so the sticky sidebar doesn't gain a phantom top offset. */
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sidebar nav column — sticky on desktop. */
.gtmkit-docs-single__nav {
  position: sticky;
  top: 88px;
  align-self: start;
}
.gtmkit-docs-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 16px;
}
.gtmkit-docs-nav__section { display: block; }
.gtmkit-docs-nav__label {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.88px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 8px;
}
.gtmkit-docs-nav__label:hover { color: var(--color-text-primary); }
/* Foldable sections — the label is a <summary>: hide the native marker,
   show a chevron that rotates when the section is open. */
summary.gtmkit-docs-nav__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px;
  cursor: pointer;
  list-style: none;
}
summary.gtmkit-docs-nav__label::-webkit-details-marker { display: none; }
.gtmkit-docs-nav__chev {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform var(--motion-default) var(--motion-ease);
}
details[open] > summary .gtmkit-docs-nav__chev { transform: rotate(90deg); }
.gtmkit-docs-nav__section > .gtmkit-docs-nav__list { margin-top: 4px !important; padding-bottom: 6px; }
.gtmkit-docs-nav__section.is-current .gtmkit-docs-nav__label {
  color: var(--color-text-brand);
}
.gtmkit-docs-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gtmkit-docs-nav__item { margin: 0 !important; padding: 0 !important; list-style: none; }
.gtmkit-docs-nav__item::before, .gtmkit-docs-nav__item::after { content: none !important; display: none !important; }
.gtmkit-docs-nav__item a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--motion-default) ease-out, color var(--motion-default) ease-out;
}
.gtmkit-docs-nav__item a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.gtmkit-docs-nav__item.is-current a {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-weight: 600;
}

/* Content column — bordered card with breadcrumb, H1, lede, post body. */
.gtmkit-docs-single__article {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 40px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-docs-single__article > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-docs-single__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.gtmkit-docs-single__crumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
}
.gtmkit-docs-single__crumb a:hover { color: var(--color-text-primary); }
.gtmkit-docs-single__crumb-sep { color: var(--color-text-tertiary); }
.gtmkit-docs-single__title,
.gtmkit-docs-single .wp-block-post-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  margin: 0 !important;
}
.gtmkit-docs-single__lede,
.gtmkit-docs-single .wp-block-post-excerpt {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text-secondary);
  margin: 0 !important;
}
.gtmkit-docs-single .wp-block-post-excerpt__excerpt { margin: 0 !important; }
.gtmkit-docs-single .wp-block-post-excerpt__more-link { display: none; }
.gtmkit-docs-single__article .wp-block-post-content > * + * {
  margin-block-start: 16px;
}
.gtmkit-docs-single__article .wp-block-post-content h2 { font-size: 22px; line-height: 30px; margin-top: 24px; font-weight: 700; }
.gtmkit-docs-single__article .wp-block-post-content h3 { font-size: 18px; line-height: 26px; margin-top: 16px; font-weight: 600; }
.gtmkit-docs-single__article .wp-block-post-content p { font-size: 15px; line-height: 26px; color: var(--color-text-secondary); }
.gtmkit-docs-single__article .wp-block-post-content a { color: var(--color-text-brand); }
.gtmkit-docs-single__article .wp-block-post-content ul,
.gtmkit-docs-single__article .wp-block-post-content ol {
  padding-left: 22px;
  font-size: 15px;
  line-height: 26px;
  color: var(--color-text-secondary);
}

/* Article list inside taxonomy archive — same visual as docs-article-card.
   When the term has child terms, the list is wrapped in one or more
   `.gtmkit-docs-cat__section` blocks (heading + description + list).
   Each section restarts its own numbering. */
.gtmkit-docs-cat__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 !important;
}
.gtmkit-docs-cat__section + .gtmkit-docs-cat__section { margin-top: 32px !important; }
.gtmkit-docs-cat__section-head { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; }
.gtmkit-docs-cat__section-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-primary);
  margin: 0 !important;
}
.gtmkit-docs-cat__section-desc {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin: 0 !important;
}
.gtmkit-docs-cat__list {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: gtmkit-docs-art;
}
.gtmkit-docs-art { margin: 0 !important; padding: 0 !important; list-style: none; }
.gtmkit-docs-art::before, .gtmkit-docs-art::after { content: none !important; display: none !important; }
.gtmkit-docs-art__link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  gap: 16px;
  align-items: center;
  /* `<a>` defaults to inline width even with display: grid in some
     browsers — pin it to the LI's full width so all cards stretch. */
  width: 100%;
  box-sizing: border-box;
  padding: 16px 20px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  text-decoration: none;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  transition: border-color var(--motion-default) ease-out, transform var(--motion-default) ease-out;
}
.gtmkit-docs-art__link:hover {
  border-color: var(--color-border-brand);
  transform: translateY(-1px);
}
.gtmkit-docs-art__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.gtmkit-docs-art__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gtmkit-docs-art__title { font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--color-text-primary); }
.gtmkit-docs-art__desc {
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gtmkit-docs-art__chev { color: var(--color-text-tertiary); flex-shrink: 0; }
.gtmkit-docs-cat__empty {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 8px 0 0 !important;
}

/* Docs category sidebar (contextual) — Figma 595:556, spec
   2026-05-13 phase-E. Single 240px card with: back link row (bottom
   border), category eyebrow + heading, flat article list, optional
   helper paragraph (term description) above a top border. */
.gtmkit-docs-cat-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  overflow: hidden;
}
.gtmkit-docs-cat-sidebar__back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-default);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background var(--motion-default) ease-out;
}
.gtmkit-docs-cat-sidebar__back:hover { background: var(--color-surface-subtle); }
.gtmkit-docs-cat-sidebar__back svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.gtmkit-docs-cat-sidebar__back-stack { display: flex; flex-direction: column; gap: 2px; }
.gtmkit-docs-cat-sidebar__back-eyebrow {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.gtmkit-docs-cat-sidebar__back-target {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.gtmkit-docs-cat-sidebar__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 10px;
}
.gtmkit-docs-cat-sidebar__eyebrow {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-brand);
  margin: 0 !important;
}
.gtmkit-docs-cat-sidebar__title {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 0 !important;
}
/* Grouped sidebar (when the queried term has child terms). Each group
   gets an eyebrow label above its <ul>. Single ungrouped term renders
   one __group with no label. */
.gtmkit-docs-cat-sidebar__groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 8px 14px;
}
.gtmkit-docs-cat-sidebar__group { display: flex; flex-direction: column; gap: 4px; }
.gtmkit-docs-cat-sidebar__group-label {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 !important;
  padding: 6px 10px;
  display: block;
}
/* Drill-down groups: subcategory label is a link to the child term
   archive. Same eyebrow style as plain labels, but with a hover
   affordance so it's discoverable as interactive. */
.gtmkit-docs-cat-sidebar__group.is-drilldown .gtmkit-docs-cat-sidebar__group-label {
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--motion-default) ease-out, color var(--motion-default) ease-out;
}
.gtmkit-docs-cat-sidebar__group.is-drilldown .gtmkit-docs-cat-sidebar__group-label:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.gtmkit-docs-cat-sidebar__list {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gtmkit-docs-cat-sidebar__item { margin: 0 !important; padding: 0 !important; list-style: none; }
.gtmkit-docs-cat-sidebar__item::before,
.gtmkit-docs-cat-sidebar__item::after { content: none !important; display: none !important; }
.gtmkit-docs-cat-sidebar__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Extra left padding so articles sit indented under the section
     header — visually nests them inside the group. */
  padding: 7px 10px 7px 20px;
  border-radius: 6px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--motion-default) ease-out, color var(--motion-default) ease-out;
}
.gtmkit-docs-cat-sidebar__item a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.gtmkit-docs-cat-sidebar__item.is-current a {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-weight: 600;
}
.gtmkit-docs-cat-sidebar__item-label { min-width: 0; flex: 1; }
.gtmkit-pro-pill {
  display: inline-block;
  padding: 1px 5px;
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  border-radius: 3px;
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.gtmkit-docs-cat-sidebar__note {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--color-border-default);
}
.gtmkit-docs-cat-sidebar__note p {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: 0 !important;
}

/* =====================================================================
   DOCS — mobile context bar + Browse drawer (patterns/docs-context-bar.php)
   Figma 486:14 (search variant) / 546:249 (breadcrumb variant) / 486:41
   (open drawer). Hidden on desktop; sticky under the 65px site header on
   mobile. drawer.js opens the sheet via data-gtmkit-drawer="docs-nav".
   ===================================================================== */
.gtmkit-docs-context-bar { display: none !important; }
.gtmkit-docs-context-bar > * { margin: 0 !important; }
.gtmkit-docs-context-bar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-surface-subtle);
  color: var(--color-text-tertiary);
  box-sizing: border-box;
}
.gtmkit-docs-context-bar__search svg { flex-shrink: 0; }
.gtmkit-docs-context-bar__search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: Inter, sans-serif;
  font-size: 15px;
  color: var(--color-text-primary);
  outline: 0;
}
.gtmkit-docs-context-bar__search input[type="search"]::placeholder { color: var(--color-text-tertiary); }
.gtmkit-docs-context-bar__crumb { display: none; flex: 1; min-width: 0; }
.gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
/* The bar is narrow: on article pages show only "Docs / <category>" —
   the article title is right below in the H1. The trailing aria-current
   crumb and its separator are hidden; category archives keep their full
   (already short) trail. JSON-LD inside the block keeps everything. */
body.single-docs .gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb > [aria-current="page"],
body.single-docs .gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb > .gtmkit-docs-single__crumb-sep:has(+ [aria-current="page"]) { display: none; }
.gtmkit-docs-context-bar__browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-surface-background);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.gtmkit-docs-context-bar__browse:hover { background: var(--color-surface-muted); }
/* Crumb per Figma 596:385: 12px, "Docs /" tertiary, current segment
   semibold primary. On article pages the last VISIBLE crumb is the
   category link (the title crumb is hidden), so bold that instead. */
.gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb { font-size: 12px; }
.gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb a {
  color: var(--color-text-tertiary);
  font-weight: 400;
}
/* The crumb is display:block here (for text-overflow ellipsis), which
   drops the desktop flex gap — restore breathing room via the separators. */
.gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb-sep { margin: 0 6px; }
.gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb [aria-current="page"] {
  font-weight: 600;
  color: var(--color-text-primary);
}
body.single-docs .gtmkit-docs-context-bar__crumb .gtmkit-docs-single__crumb a:last-of-type {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Breadcrumb variant on article + category surfaces (Figma 546:249). */
body.single-docs .gtmkit-docs-context-bar > .gtmkit-docs-context-bar__search,
body.tax-docs_category .gtmkit-docs-context-bar > .gtmkit-docs-context-bar__search { display: none; }
body.single-docs .gtmkit-docs-context-bar__crumb,
body.tax-docs_category .gtmkit-docs-context-bar__crumb { display: flex; }

/* Browse drawer — full-width sheet sliding down from the context bar. */
.gtmkit-docs-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 95;
  background: var(--color-surface-background);
  border-bottom: 1px solid var(--color-border-default);
  overflow-y: auto;
  padding: 0 16px 24px;
  box-sizing: border-box;
}
.gtmkit-docs-drawer > * { margin: 0 !important; }
/* Search + close stay pinned while the nav tree scrolls underneath. */
.gtmkit-docs-drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-background);
  padding: 12px 0;
  margin-bottom: 12px !important;
}
.gtmkit-docs-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.gtmkit-docs-drawer__close:hover { background: var(--color-surface-subtle); }
.gtmkit-docs-drawer .gtmkit-docs-nav { border: 0; padding: 0; }

@media (max-width: 720px) {
  .gtmkit-docs-context-bar {
    display: flex !important;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 64px;
    z-index: 90;
    padding: 12px 16px;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border-default);
    transition: transform 0.3s ease;
  }
  .admin-bar .gtmkit-docs-context-bar { top: 110px; }
  /* Follow the headroom header: when sticky-header.js hides the top nav
     (.is-hidden), slide the context bar off-screen with it; both return
     together on scroll-up. The header lives inside a .wp-block-template-part
     wrapper (display:contents), so :has() bridges to the sibling main. */
  .wp-block-template-part:has(> .gtmkit-header.is-hidden) ~ main .gtmkit-docs-context-bar {
    transform: translateY(calc(-100% - 64px));
  }
  .admin-bar .wp-block-template-part:has(> .gtmkit-header.is-hidden) ~ main .gtmkit-docs-context-bar {
    transform: translateY(calc(-100% - 110px));
  }
  @media (prefers-reduced-motion: reduce) {
    .gtmkit-docs-context-bar { transition: none; }
  }
  /* Open sheet covers the FULL viewport — header and context bar
     included; it carries its own search field and close button.
     Long nav trees scroll inside. z-index clears the sticky header (100). */
  .gtmkit-docs-drawer.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    animation: gtmkit-drawer-in var(--motion-medium) var(--motion-ease);
  }
  /* Logged-in views: stay below the WP admin bar (46px at mobile widths). */
  .admin-bar .gtmkit-docs-drawer.is-open { top: 46px; }
  /* The sheet lives inside the context bar's stacking context (z 90),
     which the sticky header (z 100) would otherwise paint over — lift
     the bar above the header while its drawer is open. */
  .gtmkit-docs-context-bar:has(.gtmkit-docs-drawer.is-open) { z-index: 120; }
}

/* Mobile: stack nav above article. */
@media (max-width: 1024px) {
  .gtmkit-docs-single .gtmkit-docs-single__body {
    grid-template-columns: 1fr !important;
    padding: 0 24px;
    margin: 32px auto 64px !important;
    gap: 24px;
  }
  .gtmkit-docs-single__nav { position: static; }
  .gtmkit-docs-cat-sidebar { width: auto; }
  .gtmkit-docs-nav { padding: 12px; }
  .gtmkit-docs-cat-sidebar__back { padding: 12px 16px; }
  .gtmkit-docs-cat-sidebar__head { padding: 14px 16px 8px; }
  .gtmkit-docs-cat-sidebar__list { padding: 0 6px 12px; }
  .gtmkit-docs-cat-sidebar__note { padding: 12px 16px 14px; }
  .gtmkit-docs-single__article { padding: 28px 22px; }
  .gtmkit-docs-single__title { font-size: 26px; line-height: 34px; }
  .gtmkit-docs-single__lede { font-size: 15px; line-height: 24px; }
}

/* ≤720: the context bar + Browse drawer replace every desktop docs sidebar. */
@media (max-width: 720px) {
  .gtmkit-docs-single__nav { display: none; }
  .gtmkit-docs-cat-sidebar { display: none; }
  .gtmkit-docs-cat-page .gtmkit-docs-cat-sidebar { display: none; }
}

/* Docs category prev/next nav — Figma 596:483. Rendered by
   gtmkit/docs-category-nav at the bottom of category archives;
   mobile-only (the desktop archive keeps its sidebar navigation). */
.gtmkit-docs-cat-nav { display: none; }
@media (max-width: 720px) {
  .gtmkit-docs-cat-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .gtmkit-docs-cat-nav__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-surface-background);
    text-decoration: none;
    transition: border-color var(--motion-default) ease-out;
  }
  .gtmkit-docs-cat-nav__card:hover { border-color: var(--color-border-brand); }
  .gtmkit-docs-cat-nav__label {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.88px;
    color: var(--color-text-brand);
  }
  .gtmkit-docs-cat-nav__title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-primary);
  }
}

/* =====================================================================
   DOCS — category archive mobile restyle (Figma 596:372). Desktop keeps
   the bordered-card layout and numbered rows; everything below only
   applies at ≤720px (plus display:none defaults for the mobile-only
   elements the blocks now emit).
   ===================================================================== */
.gtmkit-docs-cat__eyebrow,
.gtmkit-docs-cat__meta-row,
.gtmkit-docs-art__meta,
.gtmkit-docs-art__pill,
.gtmkit-docs-cat-help { display: none; }
.gtmkit-docs-art__title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

@media (max-width: 720px) {
  /* Flat full-width page: drop the card chrome and the grid padding. */
  body.tax-docs_category .gtmkit-docs-single .gtmkit-docs-single__body {
    padding: 0;
    margin: 0 auto !important;
    gap: 0;
  }
  body.tax-docs_category .gtmkit-docs-single__article {
    border: 0;
    border-radius: 0;
    padding: 32px 24px;
    gap: 12px;
  }

  /* Header: brand eyebrow + 36/42 bold title + 15/24 lede. */
  body.tax-docs_category .gtmkit-docs-cat__eyebrow {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--color-text-brand);
    margin: 0 !important;
  }
  body.tax-docs_category .gtmkit-docs-single__title,
  body.tax-docs_category .gtmkit-docs-single .wp-block-query-title {
    font-size: 36px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
  }
  body.tax-docs_category .gtmkit-docs-single__lede,
  body.tax-docs_category .gtmkit-docs-single__lede p {
    font-size: 15px !important;
    line-height: 24px !important;
    margin: 0 !important;
  }

  /* "N articles · Updated <date>" + divider (Figma 596:399). */
  body.tax-docs_category .gtmkit-docs-cat__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: var(--color-text-tertiary);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-default);
    margin: 0 !important;
  }
  .gtmkit-docs-art__meta-sep { color: var(--color-text-tertiary); }

  /* Sub-sections: 20px heading, 13/20 description. */
  body.tax-docs_category .gtmkit-docs-cat__section-desc { font-size: 13px; line-height: 20px; }

  /* Article cards: flat card — no number chip, no chevron; title row
     with PREMIUM pill; 13/20 description; 11px meta line. */
  body.tax-docs_category .gtmkit-docs-art__num,
  body.tax-docs_category .gtmkit-docs-art__chev { display: none; }
  body.tax-docs_category .gtmkit-docs-art__link {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 16px;
    border-radius: 10px;
  }
  body.tax-docs_category .gtmkit-docs-art__body { gap: 6px; }
  body.tax-docs_category .gtmkit-docs-art__title { font-weight: 700; }
  body.tax-docs_category .gtmkit-docs-art__pill { display: inline-block; }
  body.tax-docs_category .gtmkit-docs-art__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    line-height: 1;
    color: var(--color-text-tertiary);
  }

  /* Help strip (Figma 596:490). */
  body.tax-docs_category .gtmkit-docs-cat-help {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    background: var(--color-surface-subtle);
    padding: 40px 24px;
    box-sizing: border-box;
  }
  .gtmkit-docs-cat-help > * { margin: 0 !important; }
  .gtmkit-docs-cat-help__title {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
  }
  .gtmkit-docs-cat-help__sub {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-text-secondary);
  }
  .gtmkit-docs-cat-help__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
  }
  .gtmkit-docs-cat-help__btn:hover { background: var(--color-brand-primary-hover); }
}

/* =====================================================================
   DOCS — article mobile typography (Figma 546:237). Applies to both
   article surfaces: .gtmkit-docs-single__article (single-docs.html /
   taxonomy) and .gtmkit-docs-article (page-docs-article.html).
   ===================================================================== */
@media (max-width: 720px) {
  .gtmkit-docs-single .gtmkit-docs-single__body { padding: 0 16px; margin: 24px auto 48px !important; }
  .gtmkit-docs-single__article { padding: 24px 16px; gap: 12px; }

  /* The context bar carries the breadcrumb (546:249); drop the in-article copy. */
  .gtmkit-docs-single__article > .gtmkit-docs-single__crumb { display: none; }

  /* H1: 28 / 1.2 / Semi Bold, 12px below (via container gap). */
  .gtmkit-docs-single__title,
  .gtmkit-docs-single .wp-block-post-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }
  /* Lede: 17 / 1.55 / text-secondary, 24px below (12 gap + 12 margin). */
  .gtmkit-docs-single__lede,
  .gtmkit-docs-single .wp-block-post-excerpt {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
  }

  /* Headings + body copy (both article scopes). */
  .gtmkit-docs-single__article .wp-block-post-content h2,
  .gtmkit-docs-article .wp-block-post-content h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin-top: 32px !important;
    margin-bottom: 12px !important;
  }
  .gtmkit-docs-single__article .wp-block-post-content h3,
  .gtmkit-docs-article .wp-block-post-content h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
  }
  .gtmkit-docs-single__article .wp-block-post-content p,
  .gtmkit-docs-article .wp-block-post-content p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Bullet rows (546:284): brand dot, 16px text, 12px between rows. */
  .gtmkit-docs-single__article .wp-block-post-content ul,
  .gtmkit-docs-article .wp-block-post-content ul,
  .gtmkit-docs-single__article .wp-block-post-content ol,
  .gtmkit-docs-article .wp-block-post-content ol {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .gtmkit-docs-single__article .wp-block-post-content li + li,
  .gtmkit-docs-article .wp-block-post-content li + li { margin-top: 12px; }
  .gtmkit-docs-single__article .wp-block-post-content ul li::marker,
  .gtmkit-docs-article .wp-block-post-content ul li::marker { color: var(--color-brand-primary); }

  /* Code blocks (546:270): 14px mono on surface-subtle, scrolls inside its
     box instead of overflowing the viewport. */
  .gtmkit-docs-single__article pre,
  .gtmkit-docs-article pre,
  .gtmkit-docs-single__article .wp-block-code,
  .gtmkit-docs-article .wp-block-code {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    background: var(--color-surface-subtle) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-default);
    overflow-x: auto !important;
    max-width: 100%;
  }

  /* Tip callout (546:274): uppercase 12px label, 15px body. Scoped under
     .wp-block-post-content with !important so the article's generic
     `p` rules (also !important, lower class count) can't steamroll it. */
  .gtmkit-docs-single__article .wp-block-post-content .gtmkit-callout__label,
  .gtmkit-docs-article .wp-block-post-content .gtmkit-callout__label {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-brand) !important;
  }
  .gtmkit-docs-single__article .wp-block-post-content .gtmkit-callout--warning .gtmkit-callout__label,
  .gtmkit-docs-article .wp-block-post-content .gtmkit-callout--warning .gtmkit-callout__label { color: #b45309 !important; }
  .gtmkit-docs-single__article .wp-block-post-content .gtmkit-callout--note .gtmkit-callout__label,
  .gtmkit-docs-article .wp-block-post-content .gtmkit-callout--note .gtmkit-callout__label { color: var(--color-text-secondary) !important; }
  .gtmkit-docs-single__article .wp-block-post-content .gtmkit-callout__body,
  .gtmkit-docs-article .wp-block-post-content .gtmkit-callout__body {
    font-size: 15px !important;
    line-height: 24px !important;
    color: var(--color-text-primary) !important;
  }

  /* Prev / Next cards (546:296): stacked full-width, 60px tall. */
  .wp-block-group.gtmkit-docs-prevnext {
    flex-direction: column !important;
    margin-top: 32px !important;
  }
  .gtmkit-docs-prevnext > .wp-block-group {
    width: 100%;
    box-sizing: border-box;
    min-height: 60px;
    justify-content: center;
  }
}

/* =====================================================================
   SEARCH RESULTS (search.html) — list view, no sidebar. Used for both
   docs-only and site-wide search; the only difference is which posts
   are in the results.
   ===================================================================== */
.gtmkit-search-page .gtmkit-search-page__inner {
  max-width: 880px !important;
  margin: 56px auto 96px !important;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gtmkit-search-page .gtmkit-search-page__inner > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.gtmkit-search-page__header { display: flex; flex-direction: column; gap: 8px; }
.gtmkit-search-page__eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.88px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  margin: 0 !important;
}
.gtmkit-search-page__title,
.gtmkit-search-page .wp-block-query-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  margin: 0 !important;
}
.gtmkit-search-page__form .wp-block-search__inside-wrapper {
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 6px;
  background: var(--color-surface-card);
}
.gtmkit-search-page__form .wp-block-search__input {
  border: 0;
  font-size: 15px;
  padding: 10px 12px;
}
.gtmkit-search-page__form .wp-block-search__input:focus { outline: 0; box-shadow: none; }
.gtmkit-search-page__form .wp-block-search__button {
  background: var(--color-brand-primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.gtmkit-search-page__results { display: flex; flex-direction: column; gap: 16px; }
.gtmkit-search-page__results > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-search-page__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.gtmkit-search-page__list > li { margin: 0 !important; padding: 0; list-style: none; }
.gtmkit-search-page__list > li::before, .gtmkit-search-page__list > li::after { content: none !important; display: none !important; }
.gtmkit-search-result {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-surface-card);
  transition: border-color var(--motion-default) ease-out;
}
.gtmkit-search-result > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.gtmkit-search-result:hover { border-color: var(--color-border-brand); }
.gtmkit-search-result__title { font-size: 17px !important; line-height: 24px !important; font-weight: 600 !important; margin: 0 !important; }
.gtmkit-search-result__title a { color: var(--color-text-primary); text-decoration: none; }
.gtmkit-search-result__title a:hover { color: var(--color-text-brand); }
.gtmkit-search-result__excerpt { font-size: 14px !important; line-height: 22px !important; color: var(--color-text-secondary) !important; margin: 0 !important; }
.gtmkit-search-result__meta { font-size: 12px; color: var(--color-text-tertiary); }
.gtmkit-search-page__empty {
  font-size: 15px;
  color: var(--color-text-secondary);
  padding: 24px;
  background: var(--color-surface-subtle);
  border-radius: 12px;
  margin: 0 !important;
}
.gtmkit-search-page__pagination {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
  font-size: 14px;
}

/* ==================================================================
   Switch subscription page (Figma 1050:142)
   Rendered by gtmkit-wp-cf templates/switch-subscription.php on
   /product/gtm-kit-premium/?switch-subscription=...
   Spec: 2026-05-29-switch-subscription-page-HANDOFF.md
   ================================================================== */
.gtmkit-switch-page {
  background: var(--color-surface-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: 96px;
  padding-inline: 16px;
  font-family: Inter, sans-serif;
}
.gtmkit-switch-page__head {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.gtmkit-switch-page__head h1 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-switch-page__lede {
  font-size: 17px;
  color: var(--color-text-secondary);
  margin: 0;
}
/* Eyebrow labels: brand by default ("Change plan", "New plan"),
   muted for the Current-plan section. */
.gtmkit-switch-page .gtmkit-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-brand);
  margin: 0;
}
.gtmkit-switch-page .gtmkit-eyebrow--muted { color: var(--color-text-secondary); }
.gtmkit-switch-page .gtmkit-eyebrow--brand { color: var(--color-text-brand); }
.gtmkit-switch-card {
  width: 100%;
  max-width: 640px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}
.gtmkit-switch-card__current,
.gtmkit-switch-card__new {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtmkit-switch-card__current-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-switch-card__renews {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-switch-card__divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 0;
}
.gtmkit-switch-card__price-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.gtmkit-switch-card__price {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-switch-card__per-site {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}
.gtmkit-switch-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gtmkit-switch-card__features-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-switch-card__features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Same green-dot bullet as the Pricing comparison, scaled to the 6px spec. */
.gtmkit-switch-card__features-list li,
.gtmkit-switch-page__description ul li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-primary);
}
.gtmkit-switch-card__features-list li::before,
.gtmkit-switch-page__description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-state-success);
}
/* Full-width primary CTA, same colour pair as the Pricing CTA. */
.gtmkit-switch-card__cta {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-switch-card__cta:hover { background: var(--color-brand-primary-hover); }
.gtmkit-switch-card__cta:focus-visible {
  outline: 2px solid var(--color-text-brand);
  outline-offset: 2px;
}
.gtmkit-switch-card__fineprint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0;
}
/* Plain description block below the card: no tab UI, no border, no meta. */
.gtmkit-switch-page__description {
  width: 100%;
  max-width: 720px;
  padding-block: 48px;
}
.gtmkit-switch-page__description p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-primary);
}
.gtmkit-switch-page__description ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* WC error notices (failed switch validation re-renders this page).
   Current WC prints the block banner (.wc-block-components-notice-banner,
   styled by wc-blocks.css); the classic ul fallback gets minimal styling. */
.gtmkit-switch-page .woocommerce-error,
.gtmkit-switch-page .wc-block-components-notice-banner {
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
}
.gtmkit-switch-page ul.woocommerce-error {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-danger-500);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
}
@media (max-width: 720px) {
  .gtmkit-switch-page { padding-block: 64px; }
  .gtmkit-switch-card { padding: 20px; }
  /* Price drops to 36px so price + dropdown stay on one row down to 320px. */
  .gtmkit-switch-card__price { font-size: 36px; }
}

/* ==================================================================
   Changelog feed (/changelog/, Figma 1072:64) + single release
   Pattern: patterns/changelog-feed.php — block: gtmkit/release-feed
   ================================================================== */
.gtmkit-changelog-page__head { background: var(--color-surface-background); }

.gtmkit-release-feed { display: flex; flex-direction: column; gap: 28px; }

/* Filter pills */
.gtmkit-changelog-page__filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.gtmkit-changelog-pill {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-secondary);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.gtmkit-changelog-pill:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.gtmkit-changelog-pill[aria-pressed="true"] {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}

/* Feed list */
.gtmkit-release-feed__list { display: flex; flex-direction: column; gap: 16px; }
.gtmkit-release-feed.is-loading .gtmkit-release-feed__list { opacity: 0.5; pointer-events: none; }
.gtmkit-release-feed__empty {
  text-align: center;
  color: var(--color-text-tertiary);
  margin: 24px 0;
}

/* Release card */
.gtmkit-release-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gtmkit-release-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.gtmkit-release-card__heading { display: flex; flex-direction: column; gap: 6px; }
.gtmkit-release-card__title {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin: 0;
}
.gtmkit-release-card__title a { color: inherit; text-decoration: none; }
.gtmkit-release-card__title a:hover { color: var(--color-text-brand); }
.gtmkit-release-card__date {
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-tertiary);
}
.gtmkit-release-card__pill {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  white-space: nowrap;
}
.gtmkit-release-card__pill--free {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}
.gtmkit-release-card__pill--premium {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}

/* Card body — shared prose basics */
.gtmkit-release-card__body {
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gtmkit-release-card__body > * { margin: 0; }
.gtmkit-release-card__read {
  font-weight: 600;
  color: var(--color-text-brand);
  text-decoration: none;
}
.gtmkit-release-card__read:hover { color: var(--color-text-brand-hover); }

/* Structured changelog body (imported/synced entries): uppercase
   bucket labels + dot lists. Scoped so the long-form announcement
   articles keep normal article typography. */
.gtmkit-release-card__body--structured h3 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.72px;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
}
.gtmkit-release-card__body--structured > h3:first-child { margin-top: 0; }
.gtmkit-release-card__body--structured ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtmkit-release-card__body--structured li {
  position: relative;
  padding-left: 18px;
}
.gtmkit-release-card__body--structured li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

/* Long-form announcement body on the single template */
.gtmkit-release-card__body--article { gap: 16px; }
.gtmkit-release-card__body--article h2 { font-size: 24px; line-height: 32px; margin: 16px 0 0; }
.gtmkit-release-card__body--article h3 { font-size: 19px; line-height: 26px; margin: 12px 0 0; }
.gtmkit-release-card__body--article ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Pagination */
.gtmkit-changelog-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}
.gtmkit-changelog-pagination a {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-brand);
  text-decoration: none;
}
.gtmkit-changelog-pagination a:hover { color: var(--color-text-brand-hover); }

/* Single release page */
.gtmkit-release-single {
  background: var(--color-surface-subtle);
  padding: 48px 24px 96px;
}
.gtmkit-release-single__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-release-single__back {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.gtmkit-release-single__back:hover { color: var(--color-text-brand); }
.gtmkit-release-card--single .gtmkit-release-card__title {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.5px;
}

/* Mobile */
@media (max-width: 720px) {
  .gtmkit-release-card { padding: 20px; }
  .gtmkit-release-card__title { font-size: 20px; line-height: 26px; }
  .gtmkit-release-card__head { flex-wrap: wrap; }
  .gtmkit-release-card--single .gtmkit-release-card__title { font-size: 24px; line-height: 31px; }
  .gtmkit-release-single { padding: 32px 16px 64px; }
}