/* ==========================================================================
   Block styles: loaded on the site and inside the editor
   ========================================================================== */
.wp-block-image img { border-radius: var(--radius); }
.wp-block-image.is-style-rounded img { border-radius: 9999px; }
.is-style-fw-framed img, .wp-block-image.is-style-fw-framed img {
	background: var(--surface); border: 1px solid var(--line); padding: 8px;
	border-radius: var(--radius); box-shadow: var(--shadow);
}
.wp-block-image.is-style-fw-tilted img { transform: rotate(-1.8deg); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .55); border-radius: var(--radius); }
.wp-block-image.is-style-fw-tilted:nth-of-type(even) img { transform: rotate(1.8deg); }
.wp-block-image.is-style-fw-screenshot { background: #12161c; padding: 30px 6px 6px; border-radius: var(--radius); position: relative; box-shadow: var(--shadow); }
.wp-block-image.is-style-fw-screenshot::before {
	content: ""; position: absolute; top: 11px; left: 12px; width: 46px; height: 9px;
	background: radial-gradient(circle at 4.5px 4.5px, #ff5f2e 4px, transparent 4.5px), radial-gradient(circle at 21px 4.5px, #3a3f47 4px, transparent 4.5px), radial-gradient(circle at 37.5px 4.5px, #3a3f47 4px, transparent 4.5px);
}
.wp-block-image.is-style-fw-screenshot img { border-radius: calc(var(--radius) - 6px); display: block; }
.wp-block-image.is-style-fw-screenshot figcaption { color: #8b9098; margin-bottom: 4px; }

.wp-block-gallery.is-style-fw-framed .wp-block-image img { border: 1px solid var(--line); padding: 6px; background: var(--surface); }

.wp-block-media-text { gap: 0; }
.wp-block-media-text .wp-block-media-text__media img { border-radius: var(--radius); }
.wp-block-media-text.is-style-fw-card {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-lg, 22px); overflow: hidden; box-shadow: var(--shadow);
}
.wp-block-media-text.is-style-fw-card .wp-block-media-text__media img { border-radius: 0; height: 100%; object-fit: cover; }
.wp-block-media-text.is-style-fw-card .wp-block-media-text__content { padding: clamp(22px, 4vw, 44px); }
.wp-block-media-text.is-style-fw-card .wp-block-media-text__content > :first-child { margin-top: 0; }
.wp-block-media-text.is-style-fw-bio { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 22px); padding: 22px; }
.wp-block-media-text.is-style-fw-bio .wp-block-media-text__media img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.wp-block-media-text.is-style-fw-bio .wp-block-media-text__content { padding: 0 0 0 24px; }
.wp-block-media-text.is-style-fw-bio h3 { margin-top: 0; }
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile.is-style-fw-bio .wp-block-media-text__media { max-width: 140px; }
	.wp-block-media-text.is-style-fw-bio .wp-block-media-text__content { padding: 16px 0 0; }
}

.wp-block-cover:not(.alignfull) { border-radius: var(--radius-lg, 22px); overflow: hidden; }
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3 { color: inherit; margin-top: 0; }

.wp-block-group.is-style-fw-panel { padding: clamp(26px, 4vw, 48px); border-radius: var(--radius-lg, 22px); }
.wp-block-group.is-style-fw-panel:not(.has-background) { background: var(--surface-2); }
.wp-block-group.is-style-fw-panel > :first-child { margin-top: 0; }
.wp-block-group.is-style-fw-panel > :last-child { margin-bottom: 0; }
.wp-block-group.is-style-fw-card { padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.has-background h2, .has-background h3, .has-text-color h2, .has-text-color h3 { color: inherit; }

.wp-block-columns.is-style-fw-cards > .wp-block-column {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 22px;
}
.wp-block-columns.is-style-fw-cards > .wp-block-column > :first-child { margin-top: 0; }
.wp-block-columns.is-style-fw-cards > .wp-block-column > :last-child { margin-bottom: 0; }
.wp-block-columns.is-style-fw-cards h3 { font-size: 20px; margin: 0 0 8px; }
.wp-block-columns.is-style-fw-cards p { font-size: 16px; line-height: 1.6; }
.wp-block-columns.is-style-fw-cards .wp-block-image { margin: -22px -22px 18px; }
.wp-block-columns.is-style-fw-cards .wp-block-image img { border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.wp-block-details.is-style-fw-faq { border-bottom: 1px solid var(--line); padding: 4px 0; margin: 0; }
.wp-block-details.is-style-fw-faq + .wp-block-details.is-style-fw-faq { margin-top: 0; }
.wp-block-details.is-style-fw-faq summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 16px 40px 16px 0;
	font: 700 19px/1.35 var(--font-display); color: var(--ink);
}
.wp-block-details.is-style-fw-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-fw-faq summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	background: var(--surface-2); font: 500 18px/1 var(--font-mono);
}
.wp-block-details.is-style-fw-faq[open] summary::after { content: "−"; background: var(--lime); color: var(--lime-ink); }
.wp-block-details.is-style-fw-faq > :not(summary) { margin-top: 0; padding-bottom: 12px; }

.wp-block-table.is-style-fw-compare thead th { background: var(--ink); color: var(--paper); border-bottom: 0; }
.wp-block-table.is-style-fw-compare tbody td:first-child { font-weight: 600; color: var(--ink); }
.wp-block-table.is-style-fw-compare tbody tr:nth-child(even) { background: var(--surface); }

.wp-block-buttons { gap: 10px; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--ink); border: 2px solid currentColor; padding: 11px 20px; }
.wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-media-text.is-style-fw-card > .wp-block-media-text__media { align-self: stretch; }
.wp-block-media-text.is-style-fw-card > .wp-block-media-text__media img { height: 100%; min-height: 280px; }