/* ==========================================================================
   Home page: shared pieces used by the blocks/home-* sections.
   Section-specific styles live in each block's style.css.
   This file is also loaded in the editor, so everything is scoped to .fx-hm-* or body.home.
   ========================================================================== */

/* The hero slides under the transparent sticky header. */
.wp-block-post-content > .fx-hm-hero, .fx-main .fx-hm-hero { margin-top: calc(-1 * var(--header-h)); }
.editor-styles-wrapper .fx-hm-hero { margin-top: 0; }

/* Below the fold, the browser skips layout and paint of these sections until they come near the
   viewport (Home is long, so laying out the whole page twice at load, before and after the fonts
   swap in, was most of its blocking time). The height estimate only sizes the scrollbar until a
   section has rendered once. Only sections that paint nothing outside their own box and have no
   sticky or fixed parts are listed, because the containment clips to the box: not the hero, the
   problem band (its bridge overhangs), the reviews (a sideways strip on phones) or the FAQ (sticky heading). */
body.home .wp-block-post-content > :is(.fx-hm-help, .fx-hm-results, .fx-hm-work, .fx-hm-proc, .fx-hm-why, .fx-hm-cta-sec) {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

/* Desktop / phone text variants */
.fx-hm-mob { display: none !important; }
@media (max-width: 600px) {
	.fx-hm-desk { display: none !important; }
	.fx-hm-mob { display: revert !important; }
}

/* Section shell */
.fx-hm-sec { position: relative; padding: 112px 0; }
.fx-hm-sec.is-surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-hm-sec.is-ruled { border-top: 1px solid var(--line); }
.fx-hm-wrap { display: flex; flex-direction: column; gap: 48px; }

/* Eyebrow: logo mark + "01 — Label" */
.fx-hm-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.fx-hm-eyebrow .fx-hm-mark { flex: none; }
.fx-hm-eyebrow.is-coral { color: var(--coral-400); }

/* Headings */
.fx-hm-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.02; letter-spacing: -0.03em; }
.fx-hm-h2.is-xl { font-size: 60px; line-height: 1; letter-spacing: -0.035em; }
.fx-hm-h2.is-l { font-size: 52px; }
.fx-hm-h2 em { font-style: normal; color: var(--violet); }

/* Header row: main (7 cols) + aside (cols 8–12), bottom-aligned */
.fx-hm-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.fx-hm-head__main { grid-column: span 7; display: flex; flex-direction: column; gap: 20px; }
.fx-hm-head__aside { grid-column: 8 / span 5; font-size: 19px; line-height: 1.6; color: var(--muted); }
.fx-hm-head__aside.is-narrow { grid-column: 9 / span 4; font-size: 17px; }
.fx-hm-headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* Arrow text link */
.fx-hm-link { font-weight: 600; font-size: 16px; color: var(--violet); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.fx-hm-link .arr { display: inline-block; transition: transform 150ms ease-out; }
.fx-hm-link:hover .arr { transform: translateX(3px); }

/* Shared section blocks placed on Home: match the Home eyebrow (logo mark) and spacing. */
body.home .wp-block-fourspixel-faq { padding-top: 112px; }
body.home .wp-block-fourspixel-faq .fx-eyebrow > .fx-eyebrow__rule:first-child {
	width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='44' height='44' rx='8' fill='%235B2BD9'/%3E%3Crect x='56' width='44' height='44' rx='8' fill='%235B2BD9'/%3E%3Crect y='56' width='44' height='44' rx='8' fill='%235B2BD9'/%3E%3Crect x='56' y='56' width='44' height='44' rx='8' fill='%23EE5A3A'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.home .wp-block-fourspixel-faq .fx-faqs__head { grid-column: span 4; gap: 20px; }
body.home .wp-block-fourspixel-faq .fx-faqs__h { font-size: 48px; line-height: 1.05; letter-spacing: -0.03em; }

@media (max-width: 960px) {
	.fx-hm-sec { padding: 72px 0; }
	.fx-hm-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fx-hm-head > * { grid-column: 1 / -1 !important; }
	.fx-hm-h2, .fx-hm-h2.is-xl, .fx-hm-h2.is-l { font-size: 40px; }
}
@media (max-width: 600px) {
	.fx-hm-sec { padding: 64px 0; }
	.fx-hm-wrap { gap: 20px; }
	.fx-hm-eyebrow { font-size: 12px; }
	.fx-hm-eyebrow .fx-hm-mark { width: 13px; height: 13px; }
	.fx-hm-h2, .fx-hm-h2.is-xl, .fx-hm-h2.is-l { font-size: 36px; line-height: 1.04; }
	.fx-hm-head__aside, .fx-hm-head__aside.is-narrow { font-size: 17px; }
	body.home .wp-block-fourspixel-faq { padding-top: 56px; }
	body.home .wp-block-fourspixel-faq .fx-eyebrow, body.home .wp-block-fourspixel-faq .fx-faqs__head .fx-link-arrow { display: none; }
}

/* Website checker strip straight after the dark research band: a white card that bridges the two sections. */
body.home .fx-hm-results:has(+ .fx-cstrip) { padding-bottom: 184px; }
body.home .fx-hm-results + .fx-cstrip { margin-top: -96px; padding-bottom: 8px; z-index: 2; }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 50px 90px -46px rgba(23, 17, 46, .6); }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__glow { background: radial-gradient(circle, rgba(91, 43, 217, .14), transparent 70%); }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__ring { color: var(--violet); }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__arc circle { stroke: #EEEBF5; }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__arc .fg { stroke: var(--coral); }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__h { color: var(--ink); }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__t { color: var(--muted); }
body.home .fx-hm-results + .fx-cstrip .fx-eyebrow { color: var(--violet); }
body.home .fx-hm-results + .fx-cstrip .fx-eyebrow__rule { background: var(--violet); }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__form { background: #F5F3FA; border: 1px solid #E4DEFA; box-shadow: none; }
body.home .fx-hm-results + .fx-cstrip .fx-cstrip__form:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(91, 43, 217, .16); }
@media (max-width: 960px) {
	body.home .fx-hm-results:has(+ .fx-cstrip) { padding-bottom: 136px; }
	body.home .fx-hm-results + .fx-cstrip { margin-top: -72px; }
}
@media (max-width: 600px) {
	body.home .fx-hm-results:has(+ .fx-cstrip) { padding-bottom: 104px; }
	body.home .fx-hm-results + .fx-cstrip { margin-top: -56px; }
}