/*
 * CADchat — Homepage 2026 redesign (Claudia's design), v1.4.50
 *
 * Styles for the rebuilt homepage per _redesign-claudia/homepage-2026-07/
 * (index.html is the composition of record, styles.css the visual spec).
 *
 * Enqueued as its own leaf AFTER patterns-extra.css so these rules win the
 * cascade over the legacy fix layers without editing them. Everything here is
 * OPT-IN via classes that only the redesigned page content carries:
 *
 *   .cc-home-hero               new hero (gradient headline, phase tabs, showcase)
 *   .cc-ticker-section--marquee re-enables the logo marquee (v1.3.7 froze it static)
 *   .cc-privacy                 new "Privacy first, always" section (patterns/privacy-first.php)
 *   .cc-formats--zero           "Zero friction to start" restyle of cc-formats
 *   .cc-cta-banner--card        gradient-card final CTA (homepage only; v1.4.55)
 *   .ge-model                   interactive 3D model embed (v1.4.55, GoEngineer)
 *
 * Brand colors flow through the v1.4.41 source tokens (--cc-color-brand-primary /
 * --cc-color-action) so the Customizer recolor keeps working. Prototype palette
 * mapping: --blue=action, --blue-dark=action-deep, --purple=brand-primary,
 * --purple-dark=brand-primary-deep, --purple-bg=brand-primary-tint,
 * --lavender=4% brand mix (see .cc-privacy), --ink=text-primary,
 * --navy=text-heading, --line=border-subtle. Prototype muted #71717A stays the
 * theme's WCAG-checked --cc-color-text-muted (#52525B) — standing sitewide
 * divergence; #A1A1AA whisper text follows the existing literal convention.
 *
 * Breakpoints: prototype 980px → theme 899px, prototype 680px → theme 770px.
 */

/* ========================================================================
 * 1. HERO — .cc-home-hero
 * Light centered hero: H1 with gradient second line, static subtitle,
 * Get Started Free (action blue) + Watch the Tour (play link), trust line,
 * radial brand washes, then the Before/During/After phase tabs + showcase.
 * ======================================================================== */

.cc-section.cc-home-hero {
	position: relative;
	/* clip (not hidden): an overflow:hidden ancestor captures position:sticky,
	 * which froze the scroll-story's .stage-wrap at the top of its column
	 * (v1.4.65). clip crops the radial washes identically without becoming
	 * the sticky containing scroll box; hidden stays as the old-browser
	 * fallback. */
	overflow: hidden;
	overflow: clip;
	/* v1.4.61 (Jesse): bottom padding 88px → 0 — the showcase frame's own
	 * air was doubling up against the logo band below. */
	padding-block: 80px 0;
	background: var(--cc-color-bg-page);
	text-align: center;
}

.cc-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(58% 46% at 50% -4%, rgb(from var(--cc-color-brand-primary) r g b / 0.12) 0%, transparent 70%),
		radial-gradient(50% 40% at 82% 8%, rgb(from var(--cc-color-action) r g b / 0.10) 0%, transparent 70%);
}

.cc-home-hero > .cc-container,
.cc-home-hero > .wp-block-group {
	position: relative;
	z-index: 1;
}

/* Release WP's constrained-layout width clip (global content-size ≈ 820px)
 * so the 960px headline and 1000px showcase frame reach prototype width.
 * Same pattern the pricing grid uses. Elements keep their own max-widths. */
.cc-home-hero .cc-container > *,
.cc-home-hero__panel > * {
	max-width: none;
}

.cc-section .cc-home-hero__h {
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	font-weight: var(--cc-fw-black);
	letter-spacing: -0.03em;
	line-height: 1.02;
	color: var(--cc-color-text-primary);
	max-width: 960px;
	margin: 0 auto 22px;
}

.cc-home-hero__h .cc-grad-accent {
	background: linear-gradient(90deg, var(--cc-color-brand-primary) 0%, var(--cc-color-action) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cc-section .cc-home-hero__lead {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	color: var(--cc-color-text-muted);
	max-width: 620px;
	margin: 0 auto 32px;
	line-height: var(--cc-lh-normal);
	font-weight: var(--cc-fw-regular);
}

.cc-home-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.cc-home-hero__btns .wp-block-button .wp-block-button__link,
.cc-home-hero__btns .wp-block-button .wp-element-button {
	padding: 15px 30px;
	font-size: 17px;
	border-radius: 10px;
}

/* v1.4.61 (Jesse): resting glow removed — it read as an already-pressed
 * button. The hover glow stays as interaction feedback. */
.cc-home-hero__btns .wp-block-button.is-style-action .wp-block-button__link {
	box-shadow: none;
}

.cc-home-hero__btns .wp-block-button.is-style-action .wp-block-button__link:hover {
	box-shadow: 0 10px 26px rgb(from var(--cc-color-action) r g b / 0.32);
}

/* v1.4.61 (Jesse): friction-killer assurance chips under the hero CTAs. */
.cc-home-hero__assurances {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.cc-home-hero__assurances li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--cc-color-text-muted);
}

.cc-home-hero__assurances svg {
	flex-shrink: 0;
	color: var(--cc-color-brand-primary);
}

/* "Watch the Tour" play link — shared by the hero and the light CTA.
 * Carries data-hystmodal="#video-modal" (opens + autoplays the tour modal);
 * href="#video" stays as the no-JS fallback to the showcase anchor. */
.cc-btn-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: var(--cc-fw-bold);
	font-size: 16px;
	color: var(--cc-color-text-primary);
	padding: 12px 24px 12px 8px;
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
}

.cc-btn-play:hover {
	opacity: 1;
	color: var(--cc-color-text-primary);
}

.cc-btn-play__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgb(from var(--cc-color-brand-primary) r g b / 0.12);
	border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.4);
	color: var(--cc-color-brand-primary);
	font-size: 11px;
	transition:
		background var(--cc-duration-fast) var(--cc-easing-standard),
		border-color var(--cc-duration-fast) var(--cc-easing-standard),
		color var(--cc-duration-fast) var(--cc-easing-standard);
}

.cc-btn-play:hover .cc-btn-play__icon {
	background: var(--cc-color-brand-primary);
	border-color: var(--cc-color-brand-primary);
	color: var(--cc-color-text-on-dark);
}

/* v1.4.55 (CC-05): .cc-home-hero__trust rule removed — the "Like Zoom and
 * Drive" line was deleted from all 5 homepage languages and the class is
 * used nowhere else. */

/* --- Phase tabs (Before / During / After the Review) ---
 * The wp:html block carries data-cc-phases (also the enqueue gate for
 * hero-phases.js). Buttons are plain <button role="tab">. */
.cc-home-hero__tabs {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 58px auto 34px;
	background: var(--cc-color-bg-section);
	border: 1px solid var(--cc-color-border-subtle);
	border-radius: var(--cc-radius-pill);
	padding: 6px;
	box-shadow: 0 4px 16px rgba(20, 20, 40, 0.05);
}

.cc-home-hero__tab {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--cc-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: var(--cc-fw-medium);
	line-height: 1.2;
	color: var(--cc-color-text-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 11px 22px;
	border-radius: var(--cc-radius-pill);
	transition:
		background var(--cc-duration-base) var(--cc-easing-standard),
		color var(--cc-duration-base) var(--cc-easing-standard);
}

/* v1.4.55 (CC-08): GeneratePress ships a global button:hover that painted
 * every tab dark grey (#3F4047) — inactive tabs looked filled and the active
 * tab's gradient was flattened. Declare background in our hover states so
 * GP's grey never wins: soft brand tint when inactive, gradient held (with a
 * slight brightness lift) when active. */
.cc-home-hero__tab:hover,
.cc-home-hero__tab:focus-visible {
	color: var(--cc-color-text-primary);
	background: rgb(from var(--cc-color-brand-primary) r g b / 0.08);
}

.cc-home-hero__tab.is-active {
	color: var(--cc-color-text-on-dark);
	background: linear-gradient(90deg, var(--cc-color-brand-primary), var(--cc-color-action));
	box-shadow: 0 6px 16px rgb(from var(--cc-color-brand-primary-deep) r g b / 0.22);
}

.cc-home-hero__tab.is-active:hover,
.cc-home-hero__tab.is-active:focus-visible {
	color: var(--cc-color-text-on-dark);
	background: linear-gradient(90deg, var(--cc-color-brand-primary), var(--cc-color-action));
	filter: brightness(1.06);
}

/* --- Showcase panels (caption + framed screenshot per phase) ---
 * Panels are native blocks (paragraph + wp:image) so they stay editable.
 * CSS hides all but .is-active — the pattern ships panel 1 active, so the
 * no-JS render shows the first phase, same as the prototype's [hidden]. */
.cc-home-hero__showcase {
	position: relative;
	z-index: 1;
}

.cc-home-hero__panel {
	display: none;
}

.cc-home-hero__panel.is-active {
	display: block;
	animation: cc-phase-fade 0.35s var(--cc-easing-standard);
}

@keyframes cc-phase-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.cc-section .cc-home-hero__panel-text {
	max-width: 640px;
	margin: 0 auto 26px;
	font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
	color: var(--cc-color-text-muted);
	line-height: var(--cc-lh-normal);
}

.cc-home-hero__frame {
	max-width: 1000px;
	margin: 0 auto;
	border: 2px solid rgb(from var(--cc-color-brand-primary) r g b / 0.55);
	border-radius: 22px;
	overflow: hidden;
	background: var(--cc-color-bg-section);
	box-shadow: 0 30px 70px rgb(from var(--cc-color-brand-primary-deep) r g b / 0.16);
}

.cc-home-hero__frame .wp-block-image,
.cc-home-hero__frame figure {
	margin: 0 !important;
}

.cc-home-hero__frame img {
	width: 100%;
	display: block;
	border-radius: 0;
}

/* v1.4.46 mobile bar: ≥44px effective touch targets below 900px. */
@media (max-width: 899px) {
	.cc-home-hero__tab {
		padding-block: 14px;
	}
}

@media (max-width: 770px) {
	.cc-section.cc-home-hero {
		padding-block: 60px 0; /* v1.4.61: match the desktop zero bottom */
	}
	.cc-home-hero__tabs {
		margin-top: 44px;
		gap: 4px;
		padding: 5px;
	}
	.cc-home-hero__tab {
		padding: 15px 14px;
		font-size: 12px;
	}
	.cc-home-hero__btns .wp-block-button,
	.cc-cta-banner--card .cc-cta-banner__btns .wp-block-button {
		flex: 1 1 auto;
	}
	.cc-home-hero__btns .wp-block-button .wp-block-button__link,
	.cc-cta-banner--card .cc-cta-banner__btns .wp-block-button .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
	.cc-home-hero__btns .cc-btn-play,
	.cc-cta-banner--card .cc-btn-play {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-home-hero__panel.is-active {
		animation: none;
	}
}

/* ========================================================================
 * 2. LOGO MARQUEE — .cc-ticker-section--marquee (opt-in variant)
 * patterns.css still ships the full marquee machinery (cc-ticker-scroll,
 * edge mask, aria-hidden duplicate pass); v1.3.7 froze it static with
 * !important for the old design. This variant out-specifies those rules to
 * re-enable it per the redesign: 32s loop, grayscale 0.55 → color on hover,
 * 40px logos, 72px gap, pause-on-hover, reduced-motion → static again.
 * The plain .cc-ticker-section (any other page) is untouched.
 * ======================================================================== */

.cc-ticker-section--marquee {
	background: var(--cc-color-bg-page) !important;
	padding-block: 64px 56px !important;
}

.cc-ticker-section--marquee .cc-ticker-section__eyebrow {
	color: var(--cc-color-brand-primary);
	font-family: var(--cc-font-mono);
	font-size: 13px !important;
	font-weight: var(--cc-fw-medium);
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	margin: 0 0 34px;
}

.cc-ticker-section--marquee .cc-ticker {
	overflow: hidden !important;
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
}

.cc-ticker-section--marquee .cc-ticker__track {
	animation: cc-ticker-scroll 32s linear infinite !important;
	justify-content: flex-start !important;
	gap: 72px;
}

.cc-ticker-section--marquee .cc-ticker:hover .cc-ticker__track {
	animation-play-state: paused !important;
}

.cc-ticker-section--marquee .cc-ticker__item[aria-hidden="true"] {
	display: flex !important;
}

.cc-ticker-section--marquee .cc-ticker__item {
	height: 48px;
}

/* Neutralize the v1.4.13 divider treatment (border-right + 32px pad/margin
 * per logo) — the redesign marquee has no dividers, gap alone spaces logos. */
.cc-ticker-section--marquee .cc-ticker img,
.cc-ticker-section--marquee .cc-ticker__logo {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.cc-ticker-section--marquee .cc-ticker__item img {
	height: 40px;
	max-height: 40px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition:
		opacity var(--cc-duration-base) var(--cc-easing-standard),
		filter var(--cc-duration-base) var(--cc-easing-standard);
}

.cc-ticker-section--marquee .cc-ticker__item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Reduced motion: fall back to exactly the v1.3.7 static presentation. */
@media (prefers-reduced-motion: reduce) {
	.cc-ticker-section--marquee .cc-ticker__track {
		animation: none !important;
		justify-content: center !important;
	}
	.cc-ticker-section--marquee .cc-ticker__item[aria-hidden="true"] {
		display: none !important;
	}
	.cc-ticker-section--marquee .cc-ticker {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}
}

/* ========================================================================
 * 3. PRIVACY FIRST, ALWAYS — .cc-privacy (patterns/privacy-first.php)
 * Lavender band, 2 columns: eyebrow/title/lead/Trust-Center link on the
 * left, three white badge cards on the right. Prototype lavender #FAF8FF is
 * derived from brand purple (4% mix ≈ #FBF9FE) so a Customizer recolor
 * re-tints the band.
 * ======================================================================== */

.cc-section.cc-privacy {
	--cc-lavender: color-mix(in srgb, var(--cc-color-brand-primary) 4%, #FFFFFF);
	background: var(--cc-lavender);
	padding-block: 88px;
}

/* max-width:none releases WP's constrained-layout clip on the container's
 * direct child so the two-column grid spans the full 1200px container. */
.cc-privacy .cc-container > .cc-privacy__inner {
	max-width: none;
}

.cc-privacy__inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
	margin-inline: auto;
}

.cc-privacy__inner > *,
.cc-privacy__cards > *,
.cc-privacy__card > * {
	margin-block-start: 0 !important;
}

.cc-privacy__head {
	text-align: left;
}

.cc-section .cc-privacy__eyebrow {
	color: var(--cc-color-brand-primary);
	font-family: var(--cc-font-mono);
	font-size: 13px !important;
	font-weight: var(--cc-fw-medium);
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.cc-section .cc-privacy__h {
	font-size: clamp(1.875rem, 4.4vw, 3.25rem) !important;
	font-weight: var(--cc-fw-black);
	letter-spacing: -0.02em !important;
	line-height: 1.05 !important;
	color: var(--cc-color-brand-primary-deep) !important;
	margin: 0 0 18px;
}

.cc-section .cc-privacy__lead {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	color: var(--cc-color-text-muted);
	margin: 0 0 24px;
	max-width: 620px;
	line-height: var(--cc-lh-normal);
}

.cc-privacy__link {
	margin: 0;
}

.cc-privacy__link a {
	color: var(--cc-color-action);
	font-weight: var(--cc-fw-bold);
}

.cc-privacy__link a:hover {
	color: var(--cc-color-brand-primary);
	opacity: 1;
}

.cc-privacy__cards {
	display: grid;
	gap: 18px;
}

.cc-privacy__card {
	background: var(--cc-color-bg-section);
	border: 1px solid var(--cc-color-brand-primary-tint);
	border-radius: 14px;
	padding: 24px 26px;
	box-shadow: 0 6px 24px rgb(from var(--cc-color-brand-primary-deep) r g b / 0.06);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 20px;
	align-items: start;
	text-align: left;
}

.cc-section .cc-privacy__badge {
	grid-row: span 2;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: var(--cc-color-brand-primary-tint);
	color: var(--cc-color-brand-primary-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cc-font-mono);
	font-weight: var(--cc-fw-medium);
	font-size: 15px !important;
	line-height: 1.1;
	text-align: center;
	margin: 0;
}

.cc-section .cc-privacy__card-h {
	margin: 0;
	font-size: 18px;
	font-weight: var(--cc-fw-bold);
	line-height: 1.35;
	color: var(--cc-color-text-primary);
	letter-spacing: normal;
}

.cc-section .cc-privacy__card-p {
	margin: 4px 0 0;
	color: var(--cc-color-text-muted);
	font-size: 15px;
	line-height: var(--cc-lh-normal);
}

@media (max-width: 899px) {
	.cc-privacy__inner {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	/* Standalone link → ≥44px effective touch target (v1.4.46 bar). */
	.cc-privacy__link a {
		display: inline-block;
		padding: 12px 0;
	}
}

/* ========================================================================
 * 4. ZERO FRICTION TO START — .cc-formats--zero (variant on cc-formats)
 * Restyles the existing formats pattern to the redesign: page-bg band, big
 * centered title, 760px pill cloud with 8px-radius mono pills, blue inline
 * "See everything supported →". Other pages' cc-formats are untouched.
 * ======================================================================== */

.cc-formats.cc-formats--zero {
	background: var(--cc-color-bg-page) !important;
	border-bottom: 0 !important;
	padding-block: 92px 80px !important;
}

.cc-formats--zero .cc-formats__eyebrow {
	color: var(--cc-color-brand-primary);
	font-family: var(--cc-font-mono);
	font-size: 13px !important;
	font-weight: var(--cc-fw-medium);
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* Three classes: the body.home formats-h rules weigh (0,2,1)/(0,2,2). */
.cc-formats.cc-formats--zero .cc-formats__h {
	font-size: clamp(1.875rem, 4.4vw, 3.25rem) !important;
	font-weight: var(--cc-fw-black);
	letter-spacing: -0.02em !important;
	line-height: 1.05 !important;
	color: var(--cc-color-text-primary) !important;
	max-width: 900px;
	margin: 0 auto 18px;
}

.cc-formats--zero .cc-formats__lead {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem) !important;
	color: var(--cc-color-text-muted);
	max-width: 560px;
	margin: 0 auto;
	line-height: var(--cc-lh-normal);
}

.cc-formats--zero .cc-formats__grid {
	max-width: 760px;
	gap: 10px;
	margin: 34px auto 22px;
}

.cc-formats--zero .cc-formats__pill {
	font-size: 13px;
	padding: 7px 13px;
	border-radius: 8px;
	background: var(--cc-color-bg-section);
	border: 1px solid var(--cc-color-border-subtle);
	color: var(--cc-color-text-muted);
}

/* v1.4.69 (Dan): 2D/drawing/image formats get a brand-tinted pill, per his
 * "Zero Friction" mock (.DWG .DXF .CATDRAWING .PDF .JPG .JPEG .PNG).
 * Same specificity as the --zero pill rule above — must stay AFTER it. */
.cc-formats--zero .cc-formats__pill--2d {
	background: color-mix(in srgb, var(--cc-color-brand-primary) 5%, var(--cc-color-bg-page));
	border-color: color-mix(in srgb, var(--cc-color-brand-primary) 28%, var(--cc-color-border-subtle));
	color: color-mix(in srgb, var(--cc-color-brand-primary) 55%, var(--cc-color-text-muted));
}

.cc-formats--zero .cc-formats__caption {
	font-size: 15px !important;
	color: var(--cc-color-text-muted);
}

.cc-formats--zero .cc-formats__see-all {
	color: var(--cc-color-action);
	font-weight: var(--cc-fw-semibold);
}

/* ========================================================================
 * 5. FINAL CTA (GRADIENT CARD) — .cc-cta-banner--card (homepage only)
 * v1.4.55: Dan's design replaces v1.4.50's light CTA (--light) with an
 * inset rounded card carrying the brand purple→blue gradient, white text,
 * a new sub-line, a white Get Started Free button, and the light play link.
 * The class in content changed --light → --card; every other page keeps its
 * own banner. Beats the Dan-R2 global gradient and button rules
 * (`.cc-cta-banner … !important`) on specificity.
 * ======================================================================== */

.cc-section.cc-cta-banner.cc-cta-banner--card {
	background: none !important;
	background-color: transparent !important;
	padding-block: 48px 96px !important;
	text-align: center;
}

/* v1.4.56 corrections to match the supplied mock: 135° gradient holding
 * purple through the first third, 40px radius, airier padding, everything
 * center-aligned, primary button stays BLUE. */
.cc-cta-banner--card > .cc-container,
.cc-cta-banner--card > .wp-block-group {
	background: linear-gradient(135deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary) 28%, var(--cc-color-action) 100%);
	border-radius: 40px;
	max-width: 1200px;
	margin-inline: auto;
	padding: 96px clamp(24px, 6vw, 88px) 104px;
}

.cc-cta-banner--card .cc-cta-banner__h {
	color: var(--cc-color-text-on-dark) !important;
	font-size: clamp(1.875rem, 4.4vw, 3.125rem) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.08;
	/* margin-inline must stay AUTO — zeroing it pins the constrained-layout
	 * heading box left while its text centers (the v1.4.56 off-center bug). */
	margin: 0 auto 16px !important;
}

.cc-cta-banner--card .cc-cta-banner__sub {
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
	font-weight: var(--cc-fw-regular) !important;
	margin: 0 auto 44px !important;
	max-width: 720px;
}

.cc-cta-banner--card .cc-cta-banner__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	align-items: center;
}

.cc-cta-banner--card .wp-block-button .wp-block-button__link,
.cc-cta-banner--card .wp-block-button .wp-element-button {
	padding: 15px 30px;
	font-size: 17px;
	border-radius: 10px;
}

/* v1.4.61 (Jesse, 2026-09-04): primary CTA on the gradient banner is now
 * WHITE with the deep brand purple text — no gradient, no border, no shadow.
 * #552978 in Jesse's mock == our --cc-color-brand-primary-deep exactly
 * (color-mix 58% of #9346CF), so the token keeps it recolorable.
 * Scoped to .cc-cta-banner so the other pages' brand banners match too
 * (his selector was the generic .cc-cta-banner). Supersedes the v1.4.56
 * "primary stays blue" treatment. */
.cc-cta-banner .wp-block-button.is-style-action .wp-block-button__link,
.cc-cta-banner .wp-block-button:not(.is-style-action-outline):not(.is-style-outline) .wp-block-button__link {
	background: #FFFFFF !important;
	color: var(--cc-color-brand-primary-deep) !important;
	border: 0 !important;
	box-shadow: none;
}

.cc-cta-banner .wp-block-button.is-style-action .wp-block-button__link:hover,
.cc-cta-banner .wp-block-button:not(.is-style-action-outline):not(.is-style-outline) .wp-block-button__link:hover {
	background: color-mix(in srgb, #FFFFFF 88%, var(--cc-color-brand-primary)) !important;
	color: var(--cc-color-brand-primary-deep) !important;
}

/* Play link goes light on the gradient. */
.cc-cta-banner--card .cc-btn-play {
	color: var(--cc-color-text-on-dark);
}

.cc-cta-banner--card .cc-btn-play:hover {
	color: var(--cc-color-text-on-dark);
}

.cc-cta-banner--card .cc-btn-play__icon {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--cc-color-text-on-dark);
}

.cc-cta-banner--card .cc-btn-play:hover .cc-btn-play__icon {
	background: var(--cc-color-text-on-dark);
	border-color: var(--cc-color-text-on-dark);
	color: var(--cc-color-brand-primary);
}

.cc-cta-banner--card .cc-cta-banner__lead {
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.75) !important;
	margin: 20px auto 0 !important;
}

@media (max-width: 770px) {
	.cc-cta-banner--card > .cc-container,
	.cc-cta-banner--card > .wp-block-group {
		border-radius: 24px;
		padding: 56px 24px 64px;
	}
}

/* ========================================================================
 * 6. INTERACTIVE 3D MODEL — .ge-model (GoEngineer / Vectary embed)
 * v1.4.55: replaces the Before/During/After screenshot showcase inside the
 * hero (Dan / GoEngineer, cadchat-jigsaw-html-css-embed.txt). Class names
 * kept 1:1 with GoEngineer's file so their updates drop in; their <style>
 * block lives HERE instead of in content, with fonts/sizing adapted to
 * theme tokens. v1.4.59: the "blank screenshot" frame is now self-hosted
 * in the Media Library (attachment 2683, was cdn.goengineer.com — Graham
 * approved 2026-09-03); root-relative so it survives Test→Live deploys.
 * ======================================================================== */

.ge-model {
	position: relative;
	background-image: url('/wp-content/uploads/2026/09/cadchat-hero-bg-screenshot.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	max-width: 1000px;
	margin: 0 auto;
}

.ge-model__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 1805 / 1316; /* matches cadchat-blank-screenshot.png */
	overflow: hidden;
}

.ge-model__embed {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: transparent;
}

.ge-model__hint {
	position: absolute;
	z-index: 2;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.65);
	color: var(--cc-color-text-on-dark);
	padding: 10px 18px;
	border-radius: var(--cc-radius-pill);
	font-family: var(--cc-font-body);
	font-size: 14px;
	font-weight: var(--cc-fw-semibold);
	line-height: 1.2;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	pointer-events: none;
	animation: ge-model-fade 2s ease 4s forwards;
}

@keyframes ge-model-fade {
	to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.ge-model__hint {
		animation: none;
	}
}