/*
 Theme Name:   Crack-Ajax Web Technologies 2026
 Description:  Improvise Child Theme for Crack-Ajax Web Technologies 2026
 Author:       Crack-Ajax
 Author URI:   https://crack-ajax.com
 Template:     improvise
 Version:      2.10
*/

/* ============================================================
   Child Theme Variables
   Bespoke values with no home in the parent theme's ACF-driven
   :root vars (see improvise-styling skill, Rule 1/2) — tints,
   shades, and one-off UI colors specific to the hero build.
   The hero text gradient is NOT here: it's an exact match for
   the "Text Shine" ACF gradient, so it uses the theme's own
   var(--wp--preset--gradient--text-shine) instead of a duplicate.
   =========================================================== */
:root {
	--ca-wine-deep: #6e1236;
	--ca-eyebrow-text: #bfe0d2;
	--ca-lead-text: #d8e6e0;
	--ca-hero-note-text: #b9cfc6;
	--ca-audit-shadow: rgba(6, 24, 34, .45);
	--ca-tab-tray-bg: #eef1ee;
	--ca-tab-shadow: rgba(20, 56, 76, .14);
	--ca-neutral-text: #5b6672;
	--ca-label-text: #39434f;
	--ca-border: #e3e8e4;
	--ca-msg-them-bg: #eef3f6;
	--ca-msg-them-text: #2c3945;
	--ca-ticker-text: #e4eee9;
	--ca-muted-white: #DDF2E5;
	--ca-paper: #F7F8F6;
	--ca-border-rad: 14px;
	--ca-muted-accent: #F7E6ED;
	--ca-muted-secondary: #EAF0E6;
	--ca-muted-tertiary: #ECE7F5;
	--ca-muted-quaternary: #eee5d6;
}

/* ============================================================
   Global heading sizes
   Parent theme's h1-h3 are small, fixed, non-fluid sizes meant
   for a small default scale. These override just font-size with
   clamp() so large editorial headings scale down on mobile
   instead of overflowing. h4-h6 are left as the parent set them.
   Loads after parent-style, so plain element selectors here win
   on source order without needing !important.
   ============================================================ */

h1 {
	font-size: clamp(38px, 4.6vw, 58px);
}

h2 {
	font-size: clamp(28px, 3.2vw, 40px);
}

h3 {
	font-size: clamp(20px, 2.2vw, 26px);
}

.mobile-telephone-button a {

	&:link, &:visited {
		color: var(--color-white);
	}
}

/* CTA band gets a slightly larger H2 than the site default */
.ca-cta-band {
	& h2 {
		font-size: clamp(30px, 3.4vw, 44px);
	}

	.wp-block-cover__inner-container {
		padding: 0;
	}

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

/* Thicker separator bar than the parent theme's 2px default, with
   extra top margin. Loads after parent-style, so this plain selector
   wins on source order without needing !important (same reasoning as
   the heading sizes above). */
.wp-block-separator {
	height: 4px;
	margin-top: var(--m-spacing);
}

/* ============================================================
   Site header — top accent bar
   .document-header is position:fixed in the parent theme, which
   already establishes a containing block, so this pseudo-element
   just needs top:0 — no extra position/relative needed. Same
   brand-colors-bar gradient preset as the .ca-audit card's
   accent bar. z-index set above the header's own 99999 so it
   isn't painted under .main-bar's background in the has-top-bar
   layout.
   ============================================================ */
body.improvise .document-header {

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		z-index: 100000;
		background: var(--wp--preset--gradient--brand-colors-bar);
	}

	& .primary-nav {
		flex: auto;
        justify-content: center;

		@media (max-width: 850px) {
			border-bottom: 1px solid var(--color-primary);
		}

		& .navbar-nav {
			flex: auto;

			/* Parent theme's own desktop default is justify-content:
			   space-between (spreads every li edge-to-edge); its mobile
			   breakpoint switches that to space-around for the collapsed
			   mobile menu. Scoped to 1401px, not the parent's own 1200px —
			   see the "Nav breakpoint override" section below for why this
			   site pushes the mobile-menu switch out to 1400px, and moves
			   every desktop-only nav rule (including this one) to match. */
			@media (min-width: 1401px) {
				container-type: inline-size;
				position: relative;
				justify-content: center;
				align-items: center;
				/* Reserves room on the right so the centered li's never
				   visually run into the absolutely-positioned button. */
				padding-right: 14cqw;
			}
		}

		& .button {
			color: var(--color-primary);
			background-color: var(--color-white);
			border-color: var(--color-primary);
			border-radius: 50px;
			padding: 8px 20px;
			transition: all 0.5s ease;

			/* .button itself is display:block (not flex) in the parent
			   theme, so its inline-flex <a> child was positioned by
			   normal inline vertical-align:baseline rules instead of
			   being centered — with no baseline-participating content,
			   an inline-flex box's baseline is its bottom margin edge,
			   which left it flush against the top of the padding box
			   and all ~3px of slack pushed below. Making .button itself
			   the flex container centers it properly regardless of the
			   child's own display/baseline behavior. */
			display: flex;
			align-items: center;

			@media (min-width: 1401px) {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			a {
				border-bottom: none;
				font-size: 0.8rem;
				font-weight: 900;
				display: inline-flex;
				align-items: center;
				gap: 6px;

				/* Same icon-phone SVG already used on the live site's
				   floating "Ready when you are!" mobile CTA — reused
				   here via mask-image (not background-image) so it
				   picks up the link's actual text color instead of the
				   flat black a data-URI background-image would render:
				   the original SVG's fill="currentColor" only resolves
				   against real inherited color in an inline <svg>, not
				   one loaded as a CSS image resource, so mask-image
				   (which only reads the shape's alpha, painted by
				   background-color) is the correct technique for an
				   icon that needs to track surrounding text color. */
				&::before {
					content: "";
					flex: none;
					width: 18px;
					height: 18px;
					background-color: currentColor;
					-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7zm0 2h10v16H7V4zm3 13a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/></svg>');
					mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7zm0 2h10v16H7V4zm3 13a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/></svg>');
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
					-webkit-mask-size: contain;
					mask-size: contain;
				}
			}

			&:hover {
				background-color: var(--color-primary);
				transform: translateY(-2px);

				/* The base ≥1401px rule above uses translateY(-50%) to
				   vertically center the absolutely-positioned button —
				   this hover lift would otherwise replace that outright
				   and knock it off-center. Combines both in one
				   transform instead of just adding the -2px lift. */
				@media (min-width: 1401px) {
					transform: translateY(calc(-50% - 2px));
				}

				a {
					color: var(--color-white);
					border-bottom: none !important;
				}
			}

			@media (max-width: 850px) {
				width: 202px;
				margin: 90px auto 50px;
				text-align: center;

				a {
					padding-left: 0;
					line-height: 1.5;
				}

				&:before {
					content: "Ready when you are!";
					position: absolute;
					top: -45px;
					left: -20px;
					white-space: nowrap;
					font-size: 25px;
				}
			}
		}

		& .caret {
			position: relative;
			top: -2px;
			border-radius: 3px;

			@media (max-width: 850px) {
				top: 0.5px;
			}
		}
	}
}

body.improvise.fixed .document-header {

	& .button {
		padding: 4px 20px;
	}
}

/* The parent's hover and button nav styles size every nav link to the
   header's height (line-height calc(var(--xl-spacing) - 1px)) and give
   hovered/focused links the button-style background, which turned the
   phone pill into a ~100px block. The pill keeps its own look in those
   styles. Underline (this site's default) is unaffected. */
@media (min-width: 851px) {
	.document-header .primary-nav:not(.tab-underline) .button a {
		line-height: normal !important;
		max-height: none !important;
		height: auto !important;
		padding: 0 !important;
		background-color: transparent !important;
		color: var(--color-primary) !important;
	}

	.document-header .primary-nav:not(.tab-underline) .button:hover a {
		color: var(--color-white) !important;
	}

	/* The caret nudge (.caret top:-2px, 3px radius) is for the underline
	   style's small inline glyph. In hover/button styles the caret is part of
	   the full-height link highlight, so it sits flush and square. */
	.document-header .primary-nav:not(.tab-underline) .navbar-nav > li.dropdown > .caret {
		top: 0;
		border-radius: 0;
	}
}

/* ============================================================
   Nav breakpoint override: 1200px -> 1400px
   The new "Products" nav item makes the desktop nav row start
   overflowing around 1383px — comfortably inside what Improvise
   still treats as its own ">1200px, desktop" range, so the header
   just breaks/overlaps there instead of falling back to the mobile
   hamburger menu the way it already does below 1200px.

   Not fixed by editing improvise/style.css itself: that file's
   1200px nav breakpoint is a parent-theme default shared by every
   site built on Improvise, and how many nav items a given site can
   fit above that breakpoint is genuinely a per-site question, not a
   framework bug. This re-declares the parent's own nav-breakpoint
   rules for the 1201px-1400px gap only, so everything <=1200px
   still comes from the parent completely unmodified, and
   1201-1400px now gets the parent's own <=1200px mobile treatment
   instead of its own >1200px desktop treatment. The three
   @media(min-width:1401px) rules above (in .navbar-nav, .button,
   and .button:hover) are this same override's other half — they
   keep the desktop-only centered-nav/absolute-button treatment from
   this file's earlier "nav centering" work out of this gap too.

   Scope note: this site currently runs the default ACF settings
   that make this duplication tractable — no transparent nav, no top
   nav bar, navigation_style="default" (tab-underline). Improvise's
   own .has-transparent-nav and .has-top-bar rules have their own
   @media(min-width:1201px)/@media(max-width:1200px) blocks that
   only matter when those ACF toggles are on, so they aren't
   duplicated here. If either is ever turned on for this site, this
   section needs extending to match — see improvise/style.css's
   .has-transparent-nav block and its body.has-top-bar
   .document-header .primary-nav rule for what those look like at
   the parent's own 1200px boundary.

   Everything below is copied verbatim from improvise/style.css
   (only the @media condition changed) — if the parent's own nav,
   hamburger, or footer-widgets CSS at that breakpoint is ever
   changed, this needs to be updated to match by hand. There's no
   way to "inherit" a shifted breakpoint from the parent without
   literally duplicating the rules that fire at it. */
@media (min-width: 1201px) and (max-width: 1400px) {

	/* Matches improvise/style.css's own max-width:1200px rule on
	   this selector — lets the header row wrap/compress instead of
	   overflowing once .primary-nav below switches to mobile mode. */
	body:not(.has-top-bar) .document-header,
	body.has-top-bar .document-header .main-bar {
		flex-wrap: wrap;
		padding: 0 var(--l-spacing);
	}

	/* .primary-nav's mobile-accordion treatment, copied verbatim from
	   improvise/style.css's own max-width:1200px block. */
	.primary-nav {
		position: absolute;
		top: var(--xl-spacing);
		left: 0;
		width: 100%;
		height: auto;
		max-height: 0;
		background-color: var(--color-header-bg);
		overflow: hidden;
		z-index: 9;
		transition: all 0.25s linear;
		align-items: flex-start;
	}

	.fixed .primary-nav {
		top: var(--l-spacing);
	}

	.menu-open .primary-nav {
		overflow: visible;
		height: var(--l-spacing);
		max-height: var(--l-spacing);
	}

	.navbar-collapse .navbar-nav {
		justify-content: space-around;
		align-items: center;
		height: 100%;
		width: 100%;
		padding: 0;
		border-bottom: 1px solid var(--color-header-text);
	}

	.primary-nav ul li a {
		color: var(--color-header-text);
	}

	.primary-nav:not(.tab-underline) ul li a {
		height: auto;
		max-height: 0;
		line-height: calc(var(--l-spacing) - 1px);
		overflow: hidden;
		transition: max-height 0.25s linear;
	}

	.menu-open .primary-nav:not(.tab-underline) ul li a {
		max-height: calc(var(--l-spacing) - 1px);
		height: calc(var(--l-spacing) - 1px);
	}

	.primary-nav ul li:not(.touch-start):hover a,
	.primary-nav ul li.current-menu-item a {
		border-color: var(--color-header-text);
	}

	.menu-open .primary-nav.tab-underline .dropdown .dropdown-menu {
		padding: 12px 0 0;
	}

	.menu-open .primary-nav.tab-underline .dropdown.active .dropdown-menu,
	.menu-open .primary-nav.tab-underline .dropdown:not(.touch-start):hover .dropdown-menu {
		border-bottom: 1px solid var(--color-header-bg);
	}

	.primary-nav ul li:not(.touch-start):hover .dropdown-menu li a {
		border-color: var(--color-header-text);
	}

	.primary-nav ul li:not(.touch-start) .dropdown-menu li:hover a,
	.primary-nav ul li .dropdown-menu li.current-menu-item a {
		border-color: var(--color-header-bg);
	}

	.primary-nav.tab-underline ul li:not(.touch-start):hover .dropdown-menu li,
	.primary-nav.tab-underline .dropdown.active .dropdown-menu li {
		border-left: 1px solid var(--color-header-bg);
		border-right: 1px solid var(--color-header-bg);
	}

	/* Hamburger icon, copied verbatim from improvise/style.css's own
	   .mobile-hamburger max-width:1200px block. */
	.mobile-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 40px;
		height: 40px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		transform: rotate(0deg);
		transition: 0.25s ease-in-out;
		z-index: 2;
		padding: 0;
		background: transparent;
		border: 0;

		.fixed & { margin-top: -5px; }
		span { position: relative; background: var(--color-header-text); border-radius: 9px; height: 3px; width: 40px; transform: rotate(0deg); transition: .25s ease-in-out; }
		.primary-nav:not(.tab-underline) &:hover span { background: var(--color-header-hover); }
		&.toggled .wrapper { max-height: 1000px; }
		&.toggled span:nth-child(1) { top: 11px; transform: rotate(135deg); }
		&.toggled span:nth-child(2) { transform: rotate(495deg); }
		&.toggled span:nth-child(3) { top: -10px; transform: rotate(-135deg); }
	}

	/* Footer reflow — matches improvise/style.css's own .footer-widgets
	   rule, which is itself explicitly documented there as intentionally
	   synced to the nav breakpoint so the footer and header agree on
	   where "mobile" starts. Includes the #footer4 (4th widget area)
	   variant since that's active on this site. */
	.footer-widgets {
		grid-template-columns: repeat(2, 48%);
		grid-row-gap: var(--l-spacing);

		> li:first-child { grid-row: 2/3; grid-column: 1/3; text-align: center; }

		&:has(#footer4) {
			grid-template-columns: repeat(3, 32%);
			> li:first-child { grid-column: 1/4; }
		}
	}
}

/* Cart/My Account icons: pull them into the fixed header at the same
   1400px point, matching how they already behave at max-width:1200px.
   Source is a DIFFERENT parent-theme file than the nav rules above —
   improvise/inc/woocommerce/woocommerce-mini-cart.php enqueues its own
   inc/woocommerce/woocommerce.css (handle "testy"), which has its own
   independent @media(max-width:1200px) block pulling .the-mini-cart/
   .wc-my-account out of the nav flow into position:fixed in the header
   corner. That block never got touched by the nav-breakpoint override
   above (different file entirely), so once .primary-nav itself stopped
   collapsing at 1200px, these two icons were left stranded: still
   flowing inline in the (now-desktop-width) nav row from 1201-1400px
   instead of moving up into the header the way they do the moment the
   nav actually collapses.

   Verified this file's actual <link> order live: "testy-css" (this
   WooCommerce file) loads AFTER cawt-2026's own style-css here, unlike
   every other parent/child pairing in this project — so this override
   doesn't need to out-specificity it for max-width:1200px (that
   range is untouched, still the parent's alone); it only needs to
   supply the missing 1201-1400px treatment, which the parent's file
   has no rule for at all, so there's nothing to lose a specificity
   fight against.

   Trimmed from the parent's full block: every .woocommerce-demo-store
   variant is dropped (that WooCommerce setting is confirmed off on
   this site: `wp option get woocommerce_demo_store` = "no") and
   .has-top-bar variants are dropped (this site doesn't use the ACF
   top-bar toggle) — same scoping reasoning as the nav-breakpoint
   override above. admin-bar and .fixed (scroll state) variants are
   kept since those are real runtime states independent of any ACF
   toggle. If either dropped feature is ever turned on for this site,
   see improvise/inc/woocommerce/woocommerce.css's own
   @media(max-width:1200px) block for the variants to add here. */
@media (min-width: 1201px) and (max-width: 1400px) {

	.improvise .document-header {
		height: var(--xl-spacing);
	}

	.improvise .the-mini-cart,
	.improvise .wc-my-account {
		position: fixed;
		display: block;
		top: 0;
		right: 140px;
		line-height: var(--xl-spacing);
		max-height: var(--xl-spacing);
		border-top: 0 !important;
		border-bottom: 0 !important;
		transition: all 0.5s ease;
	}

	.improvise .wc-my-account {
		right: 90px;
	}

	.improvise .the-mini-cart.no-items {
		right: 125px;
	}

	.improvise.admin-bar.fixed .wc-my-account {
		line-height: var(--l-spacing);
	}

	.improvise .primary-nav.tab-underline .the-mini-cart {
		top: 3px;
	}

	.improvise .primary-nav.tab-underline .wc-my-account {
		top: 5px;
	}

	.improvise.admin-bar .the-mini-cart,
	.improvise.admin-bar .wc-my-account {
		top: 32px;
	}

	.improvise.admin-bar .primary-nav.tab-underline .the-mini-cart,
	.improvise.admin-bar .primary-nav.tab-underline .wc-my-account {
		top: 35px;
	}

	.improvise.fixed .the-mini-cart,
	.improvise.fixed .wc-my-account {
		line-height: var(--l-spacing);
		max-height: var(--l-spacing);
		transition: all 0.5s ease;
	}

	.improvise .woocommerce-mini-cart-item a:not(.remove) {
		height: auto !important;
		max-height: none !important;
		overflow: visible;
	}

	.improvise .the-mini-cart .wcmenucart-contents {
		display: block;
		line-height: var(--xl-spacing);
		max-height: var(--xl-spacing) !important;
		height: auto !important;
		transition: all 0.5s ease;
	}

	.improvise.fixed .the-mini-cart .wcmenucart-contents {
		line-height: var(--l-spacing);
		max-height: var(--l-spacing) !important;
	}

	.improvise .primary-nav.tab-underline .the-mini-cart .mini-cart-wrapper,
	.improvise.fixed .primary-nav.tab-underline .the-mini-cart .mini-cart-wrapper {
		margin-top: -3px;
	}

	.improvise .the-mini-cart:hover .mini-cart-wrapper a {
		overflow: visible;
		max-height: none;
	}

	.improvise .the-mini-cart .cart-items-qty {
		margin-top: -17px;
	}

	.improvise .primary-nav.tab-underline .the-mini-cart .cart-items-qty {
		margin-top: -22px;
	}

	.improvise .primary-nav:not(.tab-underline) a.gg-icon,
	.improvise.menu-open .primary-nav:not(.tab-underline) a.gg-icon {
		height: var(--xl-spacing) !important;
		transition: all 0.5s ease;
		max-height: none;
	}

	.improvise .primary-nav.tab-underline .wc-my-account .gg-icon {
		padding-bottom: 3px;
	}

	.improvise.fixed .primary-nav:not(.tab-underline) a.gg-icon {
		height: var(--l-spacing) !important;
	}
}

@media (min-width: 851px) and (max-width: 910px) {
	.primary-nav ul li a {
		font-size: 0.85rem;
	}
}

/* The admin-bar-slides-under-header bug this used to patch (see
   git history / cawt-2026/CLAUDE.md 2026-08-25 entry if the old
   version of this rule is ever needed for reference) is now fixed at
   the source, in the parent theme itself (improvise/style.css's own
   .document-header rule, mirrored to the pav.crack-ajax.com starter
   copy too) — see improvise.md's changelog. Fixing it there instead
   of here means every future site built on this theme gets it for
   free, not just this one. */

article {
	padding-bottom: 0;
}

a {

	&:link, &:visited {
		color: var(--color-primary);
	}

	&:hover {
		color: var(--color-accent);
	}
}

.wp-block-button__link.has-light-text-color.has-accent-background-color {
	border: none;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-accent) 32%, transparent);
	transition: background .2s, box-shadow .15s, transform .15s;

	&:hover {
		background-color: var(--ca-wine-deep) !important;
		color: var(--color-white) !important;
		transform: translateY(-2px);
	}
}

/* Button treatments the color/border panels can't express:
	shadow, and a hover state (must beat the block's own inline
	background-color, hence !important on that one property) */
& .wp-block-button.ca-btn-wine .wp-block-button__link {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 32%, transparent);
	transition: background-color .15s, box-shadow .15s, transform .15s;
	border: 2px solid white !important;

	&:hover {
		background-color: var(--ca-wine-deep) !important;
		box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 42%, transparent);
		transform: translateY(-2px);
		border-color: white !important;
	}
}

& .ca-btn-ghost .wp-block-button__link {
	border-color: color-mix(in srgb, var(--color-light-text) 55%, transparent) !important;
	transition: background-color .15s;
	white-space: nowrap;

	&:hover {
		background: color-mix(in srgb, var(--color-light-text) 12%, transparent);
	}
}

/* ============================================================
   Child Theme Custom Block Toggles
   Styles for classes added via the custom "Improvise Settings"
   panel toggles registered in js/block-*.js (see
   js/block-paragraph.js). Add a new subsection here for each
   toggle's class as more get added.
   ============================================================ */

/* Paragraph block "Kicker" toggle — small eyebrow-style label */
.ca-kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* ============================================================
   Home hero — Cover block, className "ca-hero"
   Covers only what the block editor's own controls can't reach:
   gradient text, pseudo-element decoration, hover states, the
   raw-HTML client ticker, and color for children the cover
   block doesn't auto-tint against its dark background.
   ============================================================ */

.ca-hero {

	a:visited, a:link {
		color: white;
		&:hover {
			color: var(--ca-muted-accent);
		}
	}

	& > .wp-block-cover__inner-container {
		padding-bottom: 15px;
		/* Core's .wp-block-cover__background gradient span has no
		explicit z-index (paints in the "auto" layer), and our
		::before puzzle decoration below needs an explicit z-index
		to paint above that span — which would otherwise also lift
		it above the actual hero content. Lifting the real content
		one layer higher keeps the stacking order correct: gradient
		(auto) < puzzle (1) < content (2). */
		position: relative;
		z-index: 2;
	}

	/* Faint puzzle-piece watermark, matching the homepage.html mockup's
	   hero decoration — a classic jigsaw tab/blank shape (pinched neck,
	   round bulb), not a plain semicircle bump. Sits above the cover
	   block's own gradient background span but behind the real content
	   — see the z-index note on .wp-block-cover__inner-container above
	   for why an explicit z-index is required here at all. Centered in
	   the hero rather than tucked in a corner. */
	&::before {
		content: "";
		position: absolute;
		top: 34%;
		left: 57%;
		width: 560px;
		height: 560px;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 -13 106 106"><path d="M8,8 L37.40,8.00 C37.40,2.96 39.92,-10.48 50.00,-10.48 C60.08,-10.48 62.60,2.96 62.60,8.00 L92.00,8.00 L92.00,37.40 C97.04,37.40 110.48,39.92 110.48,50.00 C110.48,60.08 97.04,62.60 92.00,62.60 L92.00,92.00 L62.60,92.00 C62.60,86.96 60.08,73.52 50.00,73.52 C39.92,73.52 37.40,86.96 37.40,92.00 L8.00,92.00 L8.00,62.60 C13.04,62.60 26.48,60.08 26.48,50.00 C26.48,39.92 13.04,37.40 8.00,37.40 L8.00,8.00 Z" fill="none" stroke="white" stroke-width="1.4" opacity=".14"/></svg>') no-repeat center/contain;
		transform: translate(-50%, -50%) rotate(-38deg);
		pointer-events: none;
		z-index: 1;
	}

	/* Gradient-clipped emphasis inside the H1 */
	& h1 em {
		font-style: normal;
		background: var(--wp--preset--gradient--text-shine);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* Eyebrow label + gradient tick mark */
	& .ca-eyebrow {
		display: inline-flex;
		align-items: center;
		/* inline-flex is shrink-to-fit (indeterminate width), so a %
		   gap here would resolve to 0 per spec — px stays intentional */
		gap: 10px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--ca-eyebrow-text);

		&::before {
			content: "";
			width: 26px;
			height: 3px;
			border-radius: 2px;
			background: linear-gradient(90deg, var(--color-accent), var(--color-quaternary));
		}
	}

	& .ca-lead {
		color: var(--ca-lead-text);
		max-width: 34em;
	}

	& .ca-hero-note {
		color: var(--ca-hero-note-text);
	}

	/* Quick form / Ask AI card. ".ca-audit" is the 42%-width column, and
	   it's the single white card here — the tab tray and whichever panel
	   is active both sit inside it, so it (not the individual panels)
	   gets the background/radius/shadow/accent-bar. */
	& .ca-audit {
		background: var(--color-white);
		border-radius: var(--ca-border-rad);
		padding: var(--s-spacing);
		box-shadow: 0 24px 60px var(--ca-audit-shadow);
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 10px;
			border-radius: var(--ca-border-rad)var(--ca-border-rad) 0 0;
			background: var(--wp--preset--gradient--brand-colors-bar);
		}

		& > .wp-block-buttons {
			display: flex;
			gap: 1.5%;
			background: var(--ca-tab-tray-bg);
			border-radius: 99px;
			padding: 4px;
			margin-bottom: 18px;

			& .wp-block-button {
				flex: 1;
			}

			/* Neutralizes whatever background/color/padding the editor set
			   per-button (one has is-style-fill baked in, one doesn't) so
			   both tabs share one look, with active state fully JS-driven
			   via .ca-tab-active — hence !important throughout. */
			& .wp-block-button__link {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 2%;
				width: 100%;
				border: none !important;
				border-radius: 99px !important;
				padding: 2px 10px !important;
				font-size: 14px !important;
				font-weight: 600 !important;
				color: var(--ca-neutral-text) !important;
				background: transparent !important;
				box-shadow: none !important;
				cursor: pointer;
				transition: background .2s, color .2s, box-shadow .2s;

				&.ca-tab-active {
					background: var(--color-white) !important;
					color: var(--color-dark-text) !important;
					box-shadow: 0 2px 8px var(--ca-tab-shadow) !important;
				}
			}
		}
	}

	/* .panel-form arrives from the block editor with its own
	   background/radius/padding (set via the group block's own style
	   attributes when it was built) — that would nest a second white
	   card inside .ca-audit's, so it's neutralized flush here. Needs
	   !important to beat those inline styles. .panel-ai has no such
	   inline styles (empty group), so it just never gets any. */
	& .panel-form {
		padding: var(--s-spacing) 0 0 !important;
		margin-top: 0;
		margin-bottom: 0;

		/* Tighten the heading/intro above the form — parent theme's
		   default heading/paragraph margins are looser than the mockup.
		   Targets h2, not h3: the panel title was bumped from h3 to h2
		   (2026-08-31) to fix a heading-level skip (h1 hero -> h3 panel
		   title with no h2 between them). */
		& > h2 {
			margin-bottom: 0px;
			color: var(--color-dark-text);
			font-size: 21px;
		}

		& > p {
			margin-top: 0;
			margin-bottom: var(--s-spacing);
			color: var(--color-dark-text);
			font-size: 14.5px;
		}

		/* The AJAX confirmation replaces the form inside the dark hero, so it
		   inherits the hero's light text and was invisible on the white card. */
		& .gform_confirmation_message {
			color: var(--color-dark-text);
			font-size: 16px;
			font-weight: 600;
			line-height: 1.5;
			padding: var(--s-spacing) 0;
		}

		/* Gravity Forms styling. Its own gravity-theme CSS (basic.min.css /
		   theme.min.css) loads AFTER this stylesheet, so overriding its
		   defaults needs !important throughout — it doesn't use !important
		   on any of these same properties, so this reliably wins. GF's own
		   CSS still handles the name-field grid layout and honeypot
		   hiding; nothing here touches structure, only look + spacing. */

		/* Redundant with the per-field required asterisks */
		& .gform_required_legend {
			display: none !important;
		}

    & .gform_wrapper.gravity-theme {
      margin-top: var(--s-spacing);

      /* .gform_fields is a CSS Grid with grid-template-rows: repeat(auto-fill, auto)
         (GF's own basic.min.css) — every row is auto-height, so the container's
         own height is intrinsic/indeterminate. A % row-gap needs a definite
         height to resolve against and collapses to ~0 here instead, which is
         what let the last field (the select) sit flush against .gform_footer
         with no breathing room. GF's own un-overridden default is 16px for
         exactly this reason — stays px, not %. Column-gap is fine as GF's
         own 2% default (untouched here) since .gform_fields does have a
         definite width. */
      & .gform_fields {
        grid-row-gap: 2px;
      }

		  & .gfield_label {
			  font-size: 13px;
			  font-weight: 600;
			  color: var(--ca-label-text);
		  }

		  & input[type="text"],
		  & input[type="email"],
		  & input[type="url"],
		  & select {
			  border: 1.5px solid var(--ca-border) !important;
			  border-radius: 9px;
			  font-size: 15px !important;

			  &:focus {
				  border-color: var(--color-primary) !important;
				  outline: none;
			  }
		  }

		  & .gform_footer {
        	padding-bottom: 8px;

			& .gform_button {
				width: 100%;
				max-width: 100%;
				font-size: 18px;
                font-weight: 800;
				border: none;
				border-radius: 50px;
				color: var(--color-light-text);
				background: var(--color-accent);
				/* Negative spread shrinks the shadow's shape before the blur
					softens it, so it reaches much less to the sides (~10px)
					while still dropping ~18px below — needs far less side
					clearance than a plain 0/6px/18px/0 shadow would on a
					width:100% button flush with its container. */
				box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-accent) 32%, transparent);
				transition: background .2s, box-shadow .15s, transform .15s;

				&:hover {
					background: var(--ca-wine-deep) !important;
					transform: translateY(-2px);
				}
			}
		}
    }
	}

	/* Hidden by default so there's no flash-of-both-panels before
	   theme.js runs; theme.js sets an explicit inline display to
	   toggle between the two from then on. */
	& .panel-ai {
		display: none;
		padding-top: var(--s-spacing);
		margin-top: 0;
		margin-bottom: 0;

		/* Targets h2, not h3 — see the matching comment on .panel-form's
		   own heading rule above for why. */
		& > h2 {
			margin-bottom: 0;
			color: var(--color-dark-text);
			font-size: 21px;
		}

		& > p {
			margin-top: 0;
			margin-bottom: var(--s-spacing);
			color: var(--color-dark-text);
			font-size: 14.5px;
		}
	}

	/* Ask-AI demo conversation, built as a raw wp:html block inside
	   .panel-ai (same reasoning as .ca-ticker above) */
	& .ca-chat {
		display: grid;
		/* This gap is vertical (row-gap between stacked bubbles), which
		   resolves against the container's height — auto/intrinsic here,
		   so a % gap would resolve to 0 per spec. Stays px. */
		gap: 10px;
		margin: 6px 0 14px;
	}

	& .ca-msg {
		padding: 11px 14px;
		border-radius: var(--ca-border-rad);
		font-size: 14.5px;
		line-height: 1.5;
		max-width: 92%;

		&.ca-msg-them {
			background: var(--ca-msg-them-bg);
			color: var(--ca-msg-them-text);
			border-bottom-left-radius: 4px;
			justify-self: start;
		}

		&.ca-msg-me {
			background: var(--color-primary);
			color: var(--color-light-text);
			border-bottom-right-radius: 4px;
			justify-self: end;
		}
	}

	& .ca-chat-row {
		display: flex;
		gap: 2%;

		& input {
			flex: 1;
			padding: 11px 13px;
			border: 1.5px solid var(--ca-border);
			border-radius: 99px;
			font-size: 14.5px;

			&:focus {
				border-color: var(--color-primary);
				outline: none;
			}
		}
	}

	& .ca-chat-send {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 16px;
		border-radius: 99px;
		border: none;
		background: var(--color-accent);
		color: var(--color-light-text);
		font-weight: 600;
		cursor: pointer;
		box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 32%, transparent);
		transition: background .2s, transform .15s;

		&:hover {
			background: var(--ca-wine-deep);
			transform: translateY(-1px);
		}
	}

	& .ca-chat-hint {
		display: block;
		text-align: center;
		margin-top: 10px;
		color: var(--ca-neutral-text);
		font-size: 12.5px;
	}

	& .ca-proof {

		/* Star rating + client count — no textColor set on the block,
		   so without this it inherits the dark default body color
		   and disappears against the cover's background */
		& .ca-rating {
			display: flex;
			align-items: center;
			/* .ca-rating is a flex item with no flex-grow, so it shrink-
			   wraps to its own content — indeterminate width, % gap
			   would resolve to 0. Stays px. */
			gap: 8px;
			color: var(--color-light-text);

			& strong {
				font-weight: 600;
				font-size: 15px;
			}
		}

		& .ca-stars {
			color: var(--color-quaternary);
			letter-spacing: 2px;
			font-size: 17px;
		}

		/* Client-name ticker: a raw wp:html block, so it has no block
		   settings at all — every rule here is required, not optional */
		& .ca-ticker {
			flex: 1;
			min-width: 280px;
			overflow: hidden;
			position: relative;
			-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
			mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);

			&:hover .ca-ticker-track {
				animation-play-state: paused;
			}
		}

		& .ca-ticker-track {
			display: flex;
			/* width:max-content below is load-bearing for the marquee
			   (it must size to its own duplicated content, not its
			   container) — that makes this width indeterminate for gap
			   purposes too, so a % gap would collapse to 0 and the
			   scrolling items would overlap. Stays px. */
			gap: 44px;
			width: max-content;
			font-family: var(--font-primary-heading);
			font-weight: 600;
			font-size: 14.5px;
			color: var(--ca-ticker-text);
			opacity: .9;
			animation: ca-ticker-scroll 34s linear infinite;

			& span {
				white-space: nowrap;
			}
		}
	}
}

/* Editor-only override: theme.js can't drive the tab switching inside
   wp-admin (it's enqueued into the outer admin window, not the block
   editor's iframed canvas, and Gutenberg intercepts clicks on the tab
   buttons for block-selection before any click handler would fire
   anyway) — so without this, .panel-ai stays permanently display:none
   and its group block can never be selected/edited visually. Scoped to
   .editor-styles-wrapper (the class WP puts on the iframe's content
   root when editor-styles are enabled) so it only applies in wp-admin,
   never on the live front end. */
.editor-styles-wrapper .ca-hero .panel-ai {
	display: block !important;
	margin-top: 16px;
	border-top: 1px dashed var(--ca-border);
	padding-top: 16px;
}

@keyframes ca-ticker-scroll {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ca-hero .ca-ticker-track {
		animation: none;
		flex-wrap: wrap;
		width: auto;

		& span[aria-hidden] {
			display: none;
		}
	}

	.ca-hero .ca-ticker {
		mask-image: none;
		-webkit-mask-image: none;
	}
}

.ca-includes {

	.wp-block-button.ca-btn-wine .wp-block-button__link {
		border: 0 !important;
	}

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

.ca-feature {

	& .wp-block-column {
		position: relative;
		background-color: var(--color-white);
		border: 1px solid var(--ca-border);
		border-radius: var(--ca-border-rad);
		padding: var(--s-spacing);
		box-shadow: none;
		transition: box-shadow .6s;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 8px;
			border-radius: var(--ca-border-rad) var(--ca-border-rad) 0 0;
		}

		&:hover {
			box-shadow: 0 10px 30px rgba(20,56,76,.10);
		}
	}

	& .wp-block-column:first-child {
		&:before,
		& .svg-style {
			background-color: var(--color-accent);
		}
	}

	& .wp-block-column:nth-child(2) {
		&:before,
		& .svg-style {
			background-color: var(--color-tertiary);
		}
	}

	& .wp-block-column:nth-child(3) {
		&:before,
		& .svg-style {
			background-color: var(--color-secondary);
		}
	}

	& .wp-block-column:last-child {
		&:before,
		& .svg-style {
			background-color: var(--color-quaternary);
		}
	}

	& .svg-style {
		width: 44px;
		height: 44px;
		border-radius: 11px;
		transform: rotate(45deg);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 6px 0 22px;

		img {
			transform: rotate(-45deg);
		}
	}
}

.ca-result {

	& .ca-gradient-text {
		font-family: var(--font-primary-heading);
		font-weight: 800;
		font-size: 34px;
		background: var(--wp--preset--gradient--gradient-text);
		background-clip: text;
		color: transparent;
	}

	& .wp-block-column {
		background: var(--color-white);
		border: 1px solid var(--ca-border);
		border-radius: var(--ca-border-rad);
		padding: var(--s-spacing);

		&:hover {
			box-shadow: 0 10px 30px rgba(20,56,76,.10);
		}

		& .wp-block-button__link {
			border: none;
			padding: 10px 16px;
			line-height: normal;
		}

		/* :first-child's hover rule is deliberately NOT nested like its
		   :nth-child(2)/:nth-child(3)/:last-child siblings below —
		   confirmed via CDP's CSS.getMatchedStylesForNode that Chrome
		   never even considers a nested "&:first-child { & ...:hover }"
		   rule a match for a genuine first-child element (verified this
		   isn't a specificity/!important loss — the rule doesn't appear
		   in the matched-rules list at all), while the nth-child(2)/
		   last-child versions apply correctly for their own columns. A
		   flat, non-nested selector for just this one case sidesteps
		   whatever the underlying nesting-resolution quirk is. */
		&:nth-child(2) {
			& .wp-block-button__link:hover {
				background-color: var(--color-tertiary) !important;
				color: var(--ca-muted-tertiary) !important;
			}
		}

		&:nth-child(3) {
			& .wp-block-button__link:hover {
				background-color: var(--color-secondary) !important;
				color: var(--ca-muted-secondary) !important;
			}
		}

		&:last-child {
			& .wp-block-button__link:hover {
				background-color: var(--color-quaternary) !important;
				color: var(--ca-muted-quaternary) !important;
			}
		}
	}
}

.ca-result .wp-block-column:first-child .wp-block-button__link:hover {
	background-color: var(--color-accent) !important;
	color: var(--ca-muted-accent) !important;
}

.ca-band-green {

	/* Same mobile top/bottom-padding reduction .ca-includes/.ca-client-
	   stories/.ca-faqs already get -- this class was missing it, which
	   left any page using it (this one, and the pre-existing AI-services
	   hub) stuck at the full desktop 100px on mobile instead of easing
	   down like every other full-width section. */
	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}

	a:visited, a:link {
		color: white;
		text-decoration: underline;

		&:hover {
			color: var(--ca-border);
		}
	}

	& .ca-service-list {
		padding-left: 0;
	
		&> li {
			position: relative;
			isolation: isolate;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			background: rgba(255, 255, 255, .07);
			border: 1px solid rgba(255, 255, 255, .14);
			border-radius: var(--ca-border-rad);
			padding: 15px var(--s-spacing);
			padding-left: var(--m-spacing);
			font-size: 0.9rem;

			/* Default comet/bullet color for this li — overridden per
			   position below so both stay in sync off one value. */
			--ca-comet-color: var(--color-quaternary);

			/* Animated gradient "comet" border on hover — see the
			   @property/@keyframes block below the .ca-band-green
			   rule for the full explanation of the non-linear speed. */
			&::before {
				content: "";
				position: absolute;
				inset: -2px;
				z-index: -1;
				padding: 2px;
				border-radius: inherit;
				background: conic-gradient(
					from var(--ca-border-angle),
					transparent 0deg,
					transparent 200deg,
					var(--ca-comet-color) 240deg,
					var(--ca-comet-color) 280deg,
					var(--color-light-text) 315deg,
					transparent 322deg,
					transparent 360deg
				);
				-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
				        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
				-webkit-mask-composite: xor;
				        mask-composite: exclude;
				filter: drop-shadow(0 0 5px var(--ca-comet-color));
				opacity: 0;
				transition: opacity .35s ease;
			}

			&:hover::before,
			&:focus-within::before {
				opacity: 1;
				animation-name: ca-border-chase;
				animation-duration: 4.5s;
				animation-iteration-count: infinite;
				animation-timing-function: linear(0.0 0.0%, 0.031 1.58%, 0.062 3.25%, 0.094 5.13%, 0.125 7.38%, 0.156 10.22%, 0.188 13.99%, 0.219 18.97%, 0.25 25.0%, 0.281 31.03%, 0.312 36.01%, 0.344 39.78%, 0.375 42.62%, 0.406 44.87%, 0.438 46.75%, 0.469 48.42%, 0.5 50.0%, 0.531 51.58%, 0.562 53.25%, 0.594 55.13%, 0.625 57.38%, 0.656 60.22%, 0.688 63.99%, 0.719 68.97%, 0.75 75.0%, 0.781 81.03%, 0.812 86.01%, 0.844 89.78%, 0.875 92.62%, 0.906 94.87%, 0.938 96.75%, 0.969 98.42%, 1.0 100.0%);
			}

			ul {
				list-style: none;
				padding-left: 0;

				li {
					font-size: 0.8rem;
					margin-top: 0;
					color: var(--ca-muted-white);
				}
			}

			strong {
				position: relative;

				&:before {
					content: "";
					position: absolute;
					flex: none;
					top: 6px;
					left: calc(var(--s-spacing) * -1);
					width: 12px;
					height: 12px;
					border-radius: 3px;
					transform: rotate(45deg);
					background: var(--ca-comet-color);
				}
			}
		}

		/* Repeats every 4 items (nth-child(4n+X), not just first/2nd/3rd/last)
		   so a longer list — e.g. an 8-10 item checklist — keeps cycling
		   through all 4 brand colors instead of items past the 3rd all
		   falling back to the default quaternary set above. For any list
		   whose length is itself a multiple of 4, this produces the exact
		   same result the old first-child/2nd/3rd/last-child rules did. */
		&> li:nth-child(4n+1) {
			--ca-comet-color: var(--color-quaternary);
		}

		&> li:nth-child(4n+2) {
			--ca-comet-color: var(--color-secondary);
		}

		&> li:nth-child(4n+3) {
			--ca-comet-color: var(--color-tertiary);
		}

		&> li:nth-child(4n) {
			--ca-comet-color: var(--color-accent);
		}
	}

	& .wp-block-column:has(.ca-pricing) {

		@media (max-width: 1200px) {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}

	& .ca-pricing {
		border-radius: var(--ca-border-rad);
		padding: var(--m-spacing) !important;
    	box-shadow: 0 24px 60px rgba(6, 24, 34, .4);

		table {
			min-width: auto;

			td {
				border: none;
				border-bottom: 0.5px solid var(--ca-border);
				line-height: normal;
			}

			&+ .wp-element-caption {
				font-size: 0.55rem;
				line-height: normal;
			}
		}

		/* "See what AI can do for you" and its siblings on this pattern
		   (8 pages) were picking up two separate underline/border
		   sources: a generic sitewide `a` rule contributes the
		   underline (nothing here had ever overridden it back to
		   none), and the .ca-btn-wine rule above unconditionally sets
		   `border: 2px solid white !important` at rest — meant for
		   .ca-hero's dark background, wrong here on a solid-fill
		   button that already reads fine with no border at all.
		   Matches this button's own highest-specificity competing
		   selector (.wp-block-button.ca-btn-wine .wp-block-button__link,
		   3 classes) with .ca-pricing prepended, so this reliably wins
		   regardless of the exact upstream cascade. */
		.wp-block-button.ca-btn-wine .wp-block-button__link {
			text-decoration: none !important;
			border: none !important;

			&:hover {
				border: none !important;
			}
		}

		@media (max-width: 480px) {
			padding: var(--s-spacing) !important;
		}
	}

	& .wp-block-image {

		a {
			position: relative;

			img {
				border-radius: var(--ca-border-rad);
			}

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 10px;
				border-radius: 0 0 var(--ca-border-rad) var(--ca-border-rad);
				background: var(--wp--preset--gradient--brand-colors-bar);
			}
		}
	}

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

/* ============================================================
   AI Chat pricing comparison (2-card layout with a "Best Value"
   ribbon on the higher tier) — see /ai-for-small-business/
   chatbots-lead-capture/. The cards are their own white card
   style regardless of section background — currently placed on
   the ai-green gradient (see the kicker/h2/sub/note textColor
   overrides in that page's post_content, switched to light-text/
   white to stay legible now that the section isn't a light bg).
   ============================================================ */
.ca-pricing-compare {

	& .wp-block-column {
		position: relative;
		background: var(--color-white);
		border-radius: var(--ca-border-rad);
		padding: var(--m-spacing);
		box-shadow: 0 12px 32px rgba(6, 24, 34, .12);

		/* Anchor the "Get started" button to the bottom of the card
		   regardless of how tall its own checklist is — the two cards
		   are already equal-height (the parent .wp-block-columns row
		   stretches them), but the AI Chat card's shorter checklist
		   left its button sitting well above the Lead Capture card's.
		   Turning the column itself into a column-direction flex
		   container and pushing the buttons block down with
		   margin-top:auto keeps the heading/price/table stacked at
		   the top and the button flush with the card's bottom edge
		   in both columns. */
		display: flex;
		flex-direction: column;

		& .wp-block-buttons {
			/* Becoming a flex item of the column above shrank this to
			   fit its own content (129px) instead of the card's full
			   width, which broke the button's own width:100% (it's a
			   percentage of ITS OWN parent, .wp-block-buttons — not
			   the card). Restoring width:100% here fixes both. */
			width: 100%;
			margin-top: auto;
		}

		& .wp-block-table {
			/* Was 0 before this card became a flex column — harmless
			   then, since normal block flow still gave the buttons
			   block its own natural ~24px top margin (WP's block-gap
			   mechanism). margin-top:auto above replaces that margin
			   entirely, and computes to 0 on the taller Lead Capture
			   card (zero leftover space), leaving no gap at all.
			   Restoring the same block-gap value here — the flex
			   column's height is derived from its own tallest card's
			   content, so this becomes part of what "tallest" means,
			   rather than being squeezed out by it. */
			margin-bottom: var(--m-spacing);

			table {
				/* table-layout:fixed doesn't stop the browser from
				   computing an intrinsic minimum width from the
				   longest unbreakable run of text in a cell — with
				   long checklist labels, that minimum (850px here)
				   exceeded the card's actual width and silently won
				   over width:100%, forcing horizontal scroll on
				   mobile. min-width:0 removes that floor so the table
				   genuinely fills its container and wraps instead. */
				min-width: 0;
				max-width: 100%;

				& td {
					border: none;
					border-bottom: 0.5px solid var(--ca-border);
					font-size: 14px;
					line-height: normal;
				}

				/* Requested: label column 75%, checkmark column 25%.
				   Targets the shortcode's own <colgroup><col> elements
				   (not td:first-child/last-child) — the lead-capture
				   table's first body row is a colspan divider ("Also
				   includes everything in Chat:"), and with
				   table-layout:fixed a browser derives column widths
				   from the first row, ignoring width set on later
				   rows' cells. <col>-based widths aren't affected by
				   that and apply consistently to every row. */
				& col:first-child {
					width: 75%;
				}

				& col:last-child {
					width: 25%;
				}
			}

			/* The shortcode's own note styling is a hardcoded inline
			   style (font-size:13px), so it needs !important here to
			   be overridden from outside — reduced to 12px per request,
			   scoped to just this section rather than changing the
			   shortcode's own default for every other page that uses
			   pricing-table notes. */
			em {
				font-size: 12px !important;
			}
		}

		/* Styled like the case-story buttons below this section
		   (.ca-result .wp-block-button__link) — no border, tighter
		   padding, normal line-height. This is a sibling of
		   .wp-block-table (the "Get started" button sits in its own
		   .wp-block-buttons block below the table, not inside it), so
		   it has to be scoped directly under .wp-block-column, not
		   nested inside the table rule above. */
		& .wp-block-button__link {
			border: none !important;
			padding: 10px 16px;
			line-height: normal;
			text-decoration: none;
			font-weight: 600;
		}

		/* Card headings get the site's existing primary-color text
		   gradient (same var(--wp--preset--gradient--gradient-text)
		   token .ca-gradient-text already uses elsewhere) instead of
		   plain text. */
		& h3 {
			background: var(--wp--preset--gradient--gradient-text);
			background-clip: text;
			color: transparent;
		}
	}

	& .ca-pricing-best-value {
		box-shadow: 0 16px 40px rgba(6, 24, 34, .18);

		&::before {
			content: "Best Value";
			position: absolute;
			top: -14px;
			left: 50%;
			transform: translateX(-50%);
			background: var(--color-quaternary);
			color: var(--color-light-text);
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			padding: 6px 16px;
			border-radius: 50px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
			white-space: nowrap;
		}
	}

	/* "Add to your monthly plan" pack table header — styled as a
	   pill (rounded, tinted tertiary background + tertiary text),
	   matching the Get Started buttons' own tinted-pill look above
	   this table rather than a solid-fill header cell.
	   border-collapse:separate + border-spacing gives it a little
	   breathing room from the body rows below so the rounded
	   shape actually reads. */
	& .ca-center {
		& table {
			border-collapse: separate;
			border-spacing: 0 6px;
			/* Same fixed-layout intrinsic-minimum-width issue as the
			   two card tables above — forced horizontal scroll on
			   mobile until this floor was removed. */
			min-width: 0;
			max-width: 100%;
		}

		& thead th {
			background-color:var(--wp--preset--color--quaternary);
			color: white;
			border: none;
			border-radius: 999px;
			padding: 10px 0;
			font-weight: 600;
			font-size: 1rem;
		}
	}
}

/* "the pricing page" (Published Rates and Pricing, page 1152) —
   every table's cell content gets line-height:normal, matching
   the tighter spacing already used elsewhere (e.g. .ca-band-green
   .ca-pricing) rather than the block-library default's looser
   line-height. */
body.page-id-1152 .wp-block-table {
	& table {
		/* Same table-layout:fixed intrinsic-minimum-width issue as
		   the AI Chatbots pricing cards — every table here was
		   forcing horizontal scroll on mobile (850px in a 350px
		   container) until this floor was removed. */
		min-width: 0;
		max-width: 100%;
	}

	& th {
		line-height: normal;
	}

	& td {
		line-height: normal;

		&.has-text-align-right {
			white-space: nowrap;
		}
	}
}

/* ============================================================
   Pricing table base styles
   Restores the base wp-block-table CSS (full width, borders,
   fixed layout) that WordPress's own block-library stylesheet
   used to provide automatically whenever a real core/table block
   was present on the page. Since the pricing-centralization pass
   every pricing table site-wide renders via the
   [ca_pricing_table] shortcode instead of a real core/table block,
   so WP's per-page block-asset loading no longer detects any
   core/table usage and skips enqueuing that CSS entirely — these
   rules replace exactly the subset this site actually relied on
   (see wp-includes/blocks/table/style.css for the original).
   =========================================================== */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table thead {
	border-bottom: 3px solid;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid;
	padding: 0.5em;
}

.wp-block-table table.has-fixed-layout {
	table-layout: fixed;
	width: 100%;
}

/* ============================================================
   Animated gradient border — .ca-service-list item hover
   (rule itself lives above, nested in .ca-band-green > .ca-service-list > li)
   A bright "comet" chases around each list item's border on
   hover: a conic-gradient sits in a 2px ring punched out with
   mask-composite (no image, no JS), and its rotation angle is
   driven by an animated @property custom property so the browser
   can interpolate it smoothly frame to frame.

   The @keyframes below are a plain, constant-rate 0deg->360deg
   sweep on purpose — ALL of the speed shaping lives in the
   animation-timing-function's linear() curve set on the hover
   rule above, not in the keyframe stops. A multi-stop @keyframes
   (dwell here, jump there) still gets an ease in/out at every
   stop by default, which reads as a stutter/pulse rather than
   one continuous motion. linear() instead plots ~33 closely-
   spaced points along a single smooth sine-modulated velocity
   curve — v(angle) = 1 + 0.6*cos(2*angle) — so the card (much
   wider than tall, so both right corners cluster near 90deg and
   both left corners near 270deg in angle-space) glides smoothly
   slower through the corners and smoothly faster across the top
   and bottom straight edges, with no visible speed jumps.
   =========================================================== */

@property --ca-border-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes ca-border-chase {
	from { --ca-border-angle: 0deg; }
	to   { --ca-border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {

	.ca-band-green .ca-service-list > li:hover::before,
	.ca-band-green .ca-service-list > li:focus-within::before {
		animation: none;
	}
}

.ca-meet {

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

.ca-about {

	& .wp-block-media-text__media {
		position: relative;

		&:before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 10px;
			border-radius: 0 0 var(--ca-border-rad) var(--ca-border-rad);
			background: var(--wp--preset--gradient--brand-colors-bar);
		}

		img {
			padding-bottom: 10px;
			border-radius: var(--ca-border-rad) var(--ca-border-rad) 0 0;
		}
	}

	&.ca-puzzle-image {

		figure.wp-block-media-text__media {
			text-align: center;
			background: linear-gradient(0deg, #E7F4EC, var(--ca-paper));
            box-shadow: 0 10px 30px rgba(20, 56, 76, .10);
			border-radius: var(--ca-border-rad);
			background: linear-gradient(180deg, #E7F4EC, var(--ca-paper));

			img {
				width: auto;
			}
		}
	}
}

.ca-about + .wp-block-separator {

	@media(max-width: 768px) {
		margin-top: var(--l-spacing) !important;
	}
}

.wp-block-pullquote {

    &:not(.is-style-solid-color) {
		border-color: var(--color-secondary);
	}

	blockquote {

		&:before,
		cite {
			color: var(--color-secondary) !important;
		}
	}
}

.ca-tint-blue {
	background: linear-gradient(180deg,var(--ca-paper),#EDF3F6);

	/* Same mobile top/bottom-padding reduction .ca-includes/.ca-client-
	   stories/.ca-faqs already get -- this class was missing it, which
	   left any page using it (this one, and the pre-existing AI-services
	   hub) stuck at the full desktop 100px on mobile instead of easing
	   down like every other full-width section. */
	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}

	& .wp-block-column {
		border: 1px solid var(--ca-border);
		border-radius: var(--ca-border-rad);
		padding: var(--s-spacing);

		a {
			text-decoration: none;
		}

		/* The arrow and hover-highlight below only make sense when a card
		   actually links somewhere (an <a> wrapping the heading, or a
		   "Learn more" line) -- scoped to :has(a) so a purely descriptive
		   card with no link doesn't look clickable when it isn't. */
		&:has(a) {

			h3 {
				position: relative;
				padding-right: var(--s-spacing);

				&:after {
					content: "→";
					position: absolute;
					right: 0;
					top: 1.5px;
					color: var(--color-dark-text);
					font-family: var(--font-primary-heading);
					font-weight: 600;
					transition: transform .2s;

					@media (max-width: 480px) {
						top: -2px;
					}
				}

				&:hover:after {
					transform: translateX(4px);
				}
			}

			&:hover {
				border: 1px solid var(--color-primary);
			}
		}
	}

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

.ca-client-stories {
	background: linear-gradient(180deg, var(--ca-paper), #E7F4EC);

	& .wp-block-column {
		padding: var(--s-spacing) var(--m-spacing);
		border-radius: var(--ca-border-rad);
	}

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

.ca-faqs {
	background: linear-gradient(180deg, #E7F4EC, var(--ca-paper));

	& .schema-faq-section {
		background-color: var(--color-white);
		border: 1px solid var(--ca-border);
		border-radius: var(--ca-border-rad);
		max-width: var(--restricted-width);
		margin-inline: auto;

		& .schema-faq-question {
			color: var(--color-dark-text);
			font-weight: 800;
			font-size: 17px;
			line-height: normal;
		}

		& .schema-faq-answer {
			color: var(--color-dark-text);
			font-size: 15.5px;

			/* Same bug as the List-block and heading-link fixes in the
			   parent theme (search improvise.md for "should read as a
			   heading, not as body copy") — a:link/a:visited target the
			   <a> itself, which always wins over this paragraph's own
			   color regardless of specificity. Without this, an FAQ
			   answer's link is white (invisible on this card's white
			   background) if the visitor's browser has never visited
			   that URL, dark if it has. */
			& a { color: inherit; }
		}
	}

	@media (max-width: 480px) {
		padding-top: var(--l-spacing) !important;
		padding-bottom: var(--l-spacing) !important;
	}
}

.document-footer {

	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6px;
		background: var(--wp--preset--gradient--brand-colors-bar);
	}

	.wp-block-group {
		padding: 0 !important;
	}

	.footer-widgets {
		/* Scoped to the desktop range only (matches this site's own
		   1400px mobile-nav breakpoint — see the "Nav breakpoint
		   override" section further down — not the parent theme's
		   default 1200px). Previously unconditional, so this
		   wide-logo-column ratio kept overriding the parent theme's own
		   responsive grid-template-columns at every mobile breakpoint
		   (992/768/540px) — same selector/specificity, later in the
		   cascade, so it always won. That left the grid's column COUNT
		   fixed at 4 while the parent's own breakpoint rules were
		   simultaneously reassigning each li's grid-ROW on the
		   assumption of a different (2, 3, or 1-column) layout —
		   a genuine column/row mismatch that caused severe content
		   overlap at every mobile width, not just uneven spacing.
		   Confirmed via Playwright screenshots at 1200/992/850/768/
		   540/480/375px before and after this fix. */
		&:has(#footer4) {
			@media (min-width: 1401px) {
				grid-template-columns: 2fr 1fr 1fr 1fr;
				gap: 5%;
			}

			@media (max-width: 768px) {
				grid-row-gap: var(--m-spacing);

				& .widget_nav_menu {
					margin-top: 0;
				}
			}

			@media (max-width: 1400px) {
				text-align: center;
			}
		}
	}

	a {
		&:link, &:visited {
			color: #afc2bb;
			text-decoration: none;
		}

		&:hover {
			color: var(--color-white) !important;
			opacity: 1;
		}
	}

	h3 {
		font-size: 15px;
		font-weight: 900;
	}

	li {
		font-size: 14.5px;
		line-height: 2;
	}

	& #footer1 {

		p {
			margin: 0 0 var(--s-spacing);

			&:first-of-type {
				margin-top: var(--s-spacing);
				margin-bottom: 0;
			}
		}

		img {
			background-color: white;
    		border-radius: 14px;
			padding: 10px;
		}
	}

	/* footer1 (the logo/contact card) is already centered by the
	   parent theme's own li:first-child rule at this width — this
	   only needs to center the other three (Websites/Support/AI &
	   marketing), which the parent leaves left-aligned at every
	   width. */
	@media (max-width: 480px) {
		.footer-widgets > li:not(:first-child) .widget-area {
			text-align: center;
		}
	}

	.footer-bottom {

		.copyright {
			justify-content: space-between;
			width: 100%;

			.menu-item-254 .pipe {
				display: none;
			} 
		}
		
		.crack-ajax-plug {
			display: none;
		}
	}

	@media (max-width: 1300px) {
		padding: var(--l-spacing) var(--s-spacing) var(--xl-spacing);
	}
}

/* Reveal on scroll (.ca-reveal/.ca-in, plus the matching
   .editor-styles-wrapper override) moved to the parent theme —
   improvise/style.css — since it's generic Improvise-framework
   behavior, not specific to this site. See improvise/improvise.md. */