/* Mojo Content Blocks style pack: angular */

.ccb-root.ccb-style-angular {
	--ccb-radius: 3px;
	--ccb-radius-sm: 2px;
	--ccb-shadow: 16px 18px 0 color-mix(in srgb, var(--ccb-primary-dark) 10%, transparent), 0 20px 54px rgba(15,31,55,.16);
	--ccb-shadow-strong: 22px 24px 0 color-mix(in srgb, var(--ccb-primary-dark) 13%, transparent), 0 28px 70px rgba(15,31,55,.24);
}

.ccb-root.ccb-style-angular.ccb-document {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--ccb-primary-soft) 22%, #fff 78%) 0 25%, transparent 25% 100%),
		linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ccb-canvas) 88%, #fff 12%) 46%, color-mix(in srgb, var(--ccb-primary-soft) 34%, #fff 66%) 100%);
}

.ccb-root.ccb-style-angular .ccb-card,
.ccb-root.ccb-style-angular .ccb-deep-card,
.ccb-root.ccb-style-angular .ccb-price-card,
.ccb-root.ccb-style-angular .ccb-resource-card,
.ccb-root.ccb-style-angular .ccb-related-card,
.ccb-root.ccb-style-angular .ccb-case-card,
.ccb-root.ccb-style-angular .ccb-product-cta,
.ccb-root.ccb-style-angular .ccb-standard-panel,
.ccb-root.ccb-style-angular .ccb-intro-panel,
.ccb-root.ccb-style-angular .ccb-icon-list-panel,
.ccb-root.ccb-style-angular .ccb-verdict,
.ccb-root.ccb-style-angular .ccb-tabs,
.ccb-root.ccb-style-angular .ccb-faq-accordion__item,
.ccb-root.ccb-style-angular .ccb-callout,
.ccb-root.ccb-style-angular .ccb-author-bio,
.ccb-root.ccb-style-angular .ccb-newsletter,
.ccb-root.ccb-style-angular .ccb-checklist-panel,
.ccb-root.ccb-style-angular .ccb-image-full-frame,
.ccb-root.ccb-style-angular .ccb-image-pair__item,
.ccb-root.ccb-style-angular .ccb-image-text__media {
	border-width: 2px;
	border-radius: var(--ccb-radius);
	box-shadow: var(--ccb-shadow);
}

.ccb-root.ccb-style-angular .ccb-hero-art,
.ccb-root.ccb-style-angular .ccb-image-hero,
.ccb-root.ccb-style-angular .ccb-image-cta,
.ccb-root.ccb-style-angular .ccb-image-placeholder,
.ccb-root.ccb-style-angular .ccb-image-pair__media,
.ccb-root.ccb-style-angular .ccb-image-text__media,
.ccb-root.ccb-style-angular .ccb-related-card__media,
.ccb-root.ccb-style-angular .ccb-author-bio__avatar {
	border-radius: var(--ccb-radius);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.ccb-root.ccb-style-angular .ccb-button,
.ccb-root.ccb-style-angular .ccb-pill,
.ccb-root.ccb-style-angular .ccb-chip,
.ccb-root.ccb-style-angular .ccb-float-chip,
.ccb-root.ccb-style-angular .ccb-tab,
.ccb-root.ccb-style-angular .ccb-newsletter__form {
	border-radius: var(--ccb-radius-sm);
}

.ccb-root.ccb-style-angular .ccb-eyebrow::before,
.ccb-root.ccb-style-angular .ccb-eyebrow::after {
	width: 34px;
	transform: skewX(-24deg);
	border-radius: 0;
}

/* Stronger visual language packs. These intentionally create distinct
   silhouettes so AI-generated sites do not all read like the same template. */
.ccb-root.ccb-style-angular .ccb-section {
	clip-path: polygon(0 0, 100% 32px, 100% 100%, 0 calc(100% - 32px));
	margin-block: -18px;
	padding-block: calc(var(--ccb-section-pad) + 20px);
}

.ccb-root.ccb-style-angular .ccb-section::before {
	inset: 0;
	background:
		linear-gradient(132deg, transparent 0 42%, color-mix(in srgb, var(--ccb-primary), transparent 88%) 42% 45%, transparent 45% 100%),
		repeating-linear-gradient(135deg, transparent 0 24px, color-mix(in srgb, var(--ccb-primary), transparent 95%) 24px 26px, transparent 26px 58px);
	border-radius: 0;
	transform: none;
}

.ccb-root.ccb-style-angular .ccb-card,
.ccb-root.ccb-style-angular .ccb-deep-card,
.ccb-root.ccb-style-angular .ccb-price-card,
.ccb-root.ccb-style-angular .ccb-resource-card,
.ccb-root.ccb-style-angular .ccb-related-card,
.ccb-root.ccb-style-angular .ccb-case-card,
.ccb-root.ccb-style-angular .ccb-product-cta,
.ccb-root.ccb-style-angular .ccb-standard-panel,
.ccb-root.ccb-style-angular .ccb-intro-panel,
.ccb-root.ccb-style-angular .ccb-icon-list-panel,
.ccb-root.ccb-style-angular .ccb-verdict,
.ccb-root.ccb-style-angular .ccb-tabs,
.ccb-root.ccb-style-angular .ccb-faq-accordion__item,
.ccb-root.ccb-style-angular .ccb-callout,
.ccb-root.ccb-style-angular .ccb-author-bio,
.ccb-root.ccb-style-angular .ccb-newsletter,
.ccb-root.ccb-style-angular .ccb-checklist-panel,
.ccb-root.ccb-style-angular .ccb-image-pair__item,
.ccb-root.ccb-style-angular .ccb-image-text__media {
	--ccb-angular-cut: 22px;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
	border-radius: 0;
	border-width: 2px;
	box-shadow: 14px 14px 0 color-mix(in srgb, var(--ccb-primary), transparent 88%);
}

.ccb-root.ccb-style-angular :is(
	.ccb-card,
	.ccb-deep-card,
	.ccb-price-card,
	.ccb-resource-card,
	.ccb-related-card,
	.ccb-case-card,
	.ccb-product-cta,
	.ccb-intro-panel,
	.ccb-icon-list-panel,
	.ccb-verdict,
	.ccb-tabs,
	.ccb-faq-accordion__item,
	.ccb-callout,
	.ccb-author-bio,
	.ccb-newsletter,
	.ccb-checklist-panel,
	.ccb-image-pair__item
) {
	position: relative;
}

.ccb-root.ccb-style-angular :is(
	.ccb-card,
	.ccb-deep-card,
	.ccb-price-card,
	.ccb-resource-card,
	.ccb-related-card,
	.ccb-case-card,
	.ccb-product-cta,
	.ccb-intro-panel,
	.ccb-icon-list-panel,
	.ccb-verdict,
	.ccb-tabs,
	.ccb-faq-accordion__item,
	.ccb-callout,
	.ccb-author-bio,
	.ccb-newsletter,
	.ccb-checklist-panel,
	.ccb-image-pair__item
)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--ccb-primary-border) 68%, var(--ccb-primary) 32%) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) top right / var(--ccb-angular-cut) var(--ccb-angular-cut) no-repeat,
		linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--ccb-primary-border) 68%, var(--ccb-primary) 32%) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) bottom left / var(--ccb-angular-cut) var(--ccb-angular-cut) no-repeat;
}

.ccb-root.ccb-style-angular .ccb-image-hero,
.ccb-root.ccb-style-angular .ccb-image-cta,
.ccb-root.ccb-style-angular .ccb-image-placeholder,
.ccb-root.ccb-style-angular .ccb-image-pair__media,
.ccb-root.ccb-style-angular .ccb-image-text__media,
.ccb-root.ccb-style-angular .ccb-related-card__media,
.ccb-root.ccb-style-angular .ccb-video-frame {
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-hero-art {
	overflow: visible;
	border-radius: 0;
	clip-path: none;
}

.ccb-root.ccb-style-angular .ccb-hero-art::before {
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-video-frame {
	clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
}

.ccb-root.ccb-style-angular .ccb-section:has(.ccb-image-full-frame),
.ccb-root.ccb-style-angular .ccb-section:has(.ccb-image-pair) {
	padding-block: clamp(43px, 4.2vw, 53px);
}

.ccb-root.ccb-style-angular .ccb-image-full-frame .ccb-image-screen,
.ccb-root.ccb-style-angular .ccb-image-pair__image,
.ccb-root.ccb-style-angular .ccb-image-text__image {
	max-height: 620px;
	object-fit: cover;
}

.ccb-root.ccb-style-angular .ccb-button,
.ccb-root.ccb-style-angular .ccb-pill,
.ccb-root.ccb-style-angular .ccb-chip,
.ccb-root.ccb-style-angular .ccb-tab,
.ccb-root.ccb-style-angular .ccb-newsletter__form {
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-newsletter__form {
	clip-path: none;
}

.ccb-root.ccb-style-angular .ccb-tabs__tab {
	clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	border-radius: 0;
}


.ccb-root.ccb-style-angular .ccb-image-pair__item {
	--ccb-angular-cut: 16px;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.ccb-root.ccb-style-angular .ccb-image-pair__media {
	--ccb-angular-zigzag: clamp(6px, .55vw, 9px);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--ccb-angular-zigzag)),
		95.833% 100%,
		91.667% calc(100% - var(--ccb-angular-zigzag)),
		87.5% 100%,
		83.333% calc(100% - var(--ccb-angular-zigzag)),
		79.167% 100%,
		75% calc(100% - var(--ccb-angular-zigzag)),
		70.833% 100%,
		66.667% calc(100% - var(--ccb-angular-zigzag)),
		62.5% 100%,
		58.333% calc(100% - var(--ccb-angular-zigzag)),
		54.167% 100%,
		50% calc(100% - var(--ccb-angular-zigzag)),
		45.833% 100%,
		41.667% calc(100% - var(--ccb-angular-zigzag)),
		37.5% 100%,
		33.333% calc(100% - var(--ccb-angular-zigzag)),
		29.167% 100%,
		25% calc(100% - var(--ccb-angular-zigzag)),
		20.833% 100%,
		16.667% calc(100% - var(--ccb-angular-zigzag)),
		12.5% 100%,
		8.333% calc(100% - var(--ccb-angular-zigzag)),
		4.167% 100%,
		0 calc(100% - var(--ccb-angular-zigzag))
	);
	border-radius: 0;
}

.ccb-root.ccb-style-angular .ccb-image-pair__image {
	clip-path: none;
	border-radius: 0;
}

.ccb-root.ccb-style-angular :is(.ccb-section--standard-panel, .ccb-section--hero-split, .ccb-section--hero-centered, .ccb-section--hero-dark-image, .ccb-section--dark-cta, .ccb-section--toc-jump-links, .ccb-section--intro-panel, .ccb-section--trust-bar, .ccb-section--feature-grid-3, .ccb-section--feature-grid-4, .ccb-section--feature-deep-cards, .ccb-section--icon-list-panel, .ccb-section--process-steps, .ccb-section--timeline, .ccb-section--problem-solution, .ccb-section--before-after, .ccb-section--comparison-table, .ccb-section--pricing-cards, .ccb-section--pros-cons, .ccb-section--stat-band, .ccb-section--quote-callout, .ccb-section--warning-callout, .ccb-section--tip-callout, .ccb-section--verdict-box, .ccb-section--resource-cards, .ccb-section--tabs-panel, .ccb-section--author-bio, .ccb-section--team-grid, .ccb-section--newsletter-cta, .ccb-section--lead-form, .ccb-section--video-embed, .ccb-section--image-slider, .ccb-section--image-full, .ccb-section--image-pair, .ccb-section--image-gallery, .ccb-section--image-text, .ccb-section--logo-cloud, .ccb-section--checklist-panel, .ccb-section--related-posts, .ccb-section--case-study-card, .ccb-section--testimonial-row, .ccb-section--reviews-widget, .ccb-section--faq-static, .ccb-section--faq-accordion, .ccb-section--product-cta, .ccb-section--map-location, .ccb-section--code-embed).ccb-variant-dark {
	background: linear-gradient(135deg, color-mix(in srgb, var(--ccb-heading) 90%, #000 10%) 0%, color-mix(in srgb, var(--ccb-primary-dark) 84%, #000 16%) 52%, color-mix(in srgb, var(--ccb-primary) 68%, var(--ccb-accent) 32%) 100%);
	color: color-mix(in srgb, #fff 88%, var(--ccb-primary-soft) 12%);
}

.ccb-root.ccb-style-angular :is(.ccb-section--standard-panel, .ccb-section--hero-split, .ccb-section--hero-centered, .ccb-section--hero-dark-image, .ccb-section--dark-cta, .ccb-section--toc-jump-links, .ccb-section--intro-panel, .ccb-section--trust-bar, .ccb-section--feature-grid-3, .ccb-section--feature-grid-4, .ccb-section--feature-deep-cards, .ccb-section--icon-list-panel, .ccb-section--process-steps, .ccb-section--timeline, .ccb-section--problem-solution, .ccb-section--before-after, .ccb-section--comparison-table, .ccb-section--pricing-cards, .ccb-section--pros-cons, .ccb-section--stat-band, .ccb-section--quote-callout, .ccb-section--warning-callout, .ccb-section--tip-callout, .ccb-section--verdict-box, .ccb-section--resource-cards, .ccb-section--tabs-panel, .ccb-section--author-bio, .ccb-section--team-grid, .ccb-section--newsletter-cta, .ccb-section--lead-form, .ccb-section--video-embed, .ccb-section--image-slider, .ccb-section--image-full, .ccb-section--image-pair, .ccb-section--image-gallery, .ccb-section--image-text, .ccb-section--logo-cloud, .ccb-section--checklist-panel, .ccb-section--related-posts, .ccb-section--case-study-card, .ccb-section--testimonial-row, .ccb-section--reviews-widget, .ccb-section--faq-static, .ccb-section--faq-accordion, .ccb-section--product-cta, .ccb-section--map-location, .ccb-section--code-embed).ccb-variant-dark :is(.ccb-eyebrow, .ccb-section-title, h1, h2, h3, p, li, blockquote, strong, label, th, td, figcaption) {
	color: #fff;
}

.ccb-root.ccb-style-angular :is(.ccb-section--standard-panel, .ccb-section--hero-split, .ccb-section--hero-centered, .ccb-section--hero-dark-image, .ccb-section--dark-cta, .ccb-section--toc-jump-links, .ccb-section--intro-panel, .ccb-section--trust-bar, .ccb-section--feature-grid-3, .ccb-section--feature-grid-4, .ccb-section--feature-deep-cards, .ccb-section--icon-list-panel, .ccb-section--process-steps, .ccb-section--timeline, .ccb-section--problem-solution, .ccb-section--before-after, .ccb-section--comparison-table, .ccb-section--pricing-cards, .ccb-section--pros-cons, .ccb-section--stat-band, .ccb-section--quote-callout, .ccb-section--warning-callout, .ccb-section--tip-callout, .ccb-section--verdict-box, .ccb-section--resource-cards, .ccb-section--tabs-panel, .ccb-section--author-bio, .ccb-section--team-grid, .ccb-section--newsletter-cta, .ccb-section--lead-form, .ccb-section--video-embed, .ccb-section--image-slider, .ccb-section--image-full, .ccb-section--image-pair, .ccb-section--image-gallery, .ccb-section--image-text, .ccb-section--logo-cloud, .ccb-section--checklist-panel, .ccb-section--related-posts, .ccb-section--case-study-card, .ccb-section--testimonial-row, .ccb-section--reviews-widget, .ccb-section--faq-static, .ccb-section--faq-accordion, .ccb-section--product-cta, .ccb-section--map-location, .ccb-section--code-embed).ccb-variant-dark :is(.ccb-card, .ccb-feature-card, .ccb-deep-card, .ccb-price-card, .ccb-resource-card, .ccb-related-card, .ccb-case-card, .ccb-product-cta, .ccb-standard-panel, .ccb-intro-panel, .ccb-trust-bar, .ccb-trust-title, .ccb-trust-item, .ccb-icon-list-panel, .ccb-verdict, .ccb-verdict__fit article, .ccb-tabs, .ccb-tabs__list, .ccb-tabs__panel, .ccb-faq article, .ccb-faq-accordion__item, .ccb-callout, .ccb-author-bio, .ccb-team-card, .ccb-newsletter, .ccb-lead-form, .ccb-checklist-panel, .ccb-checklist article, .ccb-image-full-frame, .ccb-image-pair__item, .ccb-image-text__media, .ccb-testimonials figure, .ccb-review-card, .ccb-pros-cons article, .ccb-step, .ccb-timeline article, .ccb-paired article, .ccb-table-wrap, .ccb-stat-card, .ccb-quote, .ccb-slider__slide, .ccb-icon-row, .ccb-takeaway, .ccb-toc, .ccb-video-frame, .ccb-logo-cloud, .ccb-logo-cloud a, .ccb-logo-cloud div, .ccb-code-embed--raw, .ccb-code-embed--placeholder, .ccb-map-location) {
	border-color: rgba(255,255,255,.18);
	background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
	color: color-mix(in srgb, #fff 88%, var(--ccb-primary-soft) 12%);
}

.ccb-root.ccb-style-angular :is(.ccb-section--standard-panel, .ccb-section--hero-split, .ccb-section--hero-centered, .ccb-section--hero-dark-image, .ccb-section--dark-cta, .ccb-section--toc-jump-links, .ccb-section--intro-panel, .ccb-section--trust-bar, .ccb-section--feature-grid-3, .ccb-section--feature-grid-4, .ccb-section--feature-deep-cards, .ccb-section--icon-list-panel, .ccb-section--process-steps, .ccb-section--timeline, .ccb-section--problem-solution, .ccb-section--before-after, .ccb-section--comparison-table, .ccb-section--pricing-cards, .ccb-section--pros-cons, .ccb-section--stat-band, .ccb-section--quote-callout, .ccb-section--warning-callout, .ccb-section--tip-callout, .ccb-section--verdict-box, .ccb-section--resource-cards, .ccb-section--tabs-panel, .ccb-section--author-bio, .ccb-section--team-grid, .ccb-section--newsletter-cta, .ccb-section--lead-form, .ccb-section--video-embed, .ccb-section--image-slider, .ccb-section--image-full, .ccb-section--image-pair, .ccb-section--image-gallery, .ccb-section--image-text, .ccb-section--logo-cloud, .ccb-section--checklist-panel, .ccb-section--related-posts, .ccb-section--case-study-card, .ccb-section--testimonial-row, .ccb-section--reviews-widget, .ccb-section--faq-static, .ccb-section--faq-accordion, .ccb-section--product-cta, .ccb-section--map-location, .ccb-section--code-embed).ccb-variant-dark :is(.ccb-button, .ccb-resource-card__link, .ccb-author-bio__links a, .ccb-team-card__link, .ccb-newsletter__form button, .ccb-lead-form__form button, .ccb-slider__button, .ccb-tabs__tab.is-active) {
	background: #fff;
	border-color: #fff;
	color: color-mix(in srgb, var(--ccb-primary-dark) 84%, #000 16%);
}

.ccb-root.ccb-style-angular .ccb-section--faq-accordion.ccb-variant-dark :is(.ccb-faq-accordion__button, .ccb-faq-accordion__button:hover, .ccb-faq-accordion__button:focus, .ccb-faq-accordion__button > span:first-child) {
	color: #fff;
}