/* SuiteDash 2026: feature pages in block markup (body.sd-fx; inc/features.php).
   The canvas's feature template (FeatureCRM.dc.html), already drawn on the WPBakery rows by site.css ("feature
   pages"), here on the converted copy: core/group rows (.sd-row > .wp-block-group__inner-container > .sd-row-inner
   > … > .wp-block-columns > .wp-block-column), each row marked by inc/features.php (.sd-fx-hero, -feature,
   -review, -section, -block, -row, -sep). site.css's rules for .sd-parallax-content h2 / h5 / .sd-see /
   .sd-see-side, the bullets, "See it" and the testimonial text apply here too; this file adds what the block
   structure needs. Loaded only on these pages. */

/* ---------------------------------------------------------------- the page: one grid, "On this page" beside the index */
.sd-fx .sd-fx-page {
	display: grid; column-gap: 0; align-items: start; padding-bottom: 40px;
	/* the sections use the container's full width (Mike's feature-pages video, 2026-10-09, T3): no side column; "On this page"
	   is a row of links under the hero instead */
	grid-template-columns: [full-start] minmax(var(--sd-gutter), 1fr) [content-start] minmax(0, var(--sd-max)) [content-end] minmax(var(--sd-gutter), 1fr) [full-end];
}
.sd-fx .sd-fx-page > * { grid-column: content; min-width: 0; }
.sd-fx .sd-fx-page > :is(.sd-fx-hero, .sd-fx-review--last) { grid-column: full; }
.sd-fx .sd-fx-page > .sd-fx-sep { display: none; } /* Bridge's colored separator rows: a hairline opens each row instead */
.sd-fx .sd-fx-page > .sd-toc { grid-column: content; padding-top: 32px; }
.sd-fx .sd-fx-page > .sd-toc .sd-toc__list { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.sd-fx .sd-fx-page > .sd-toc .sd-toc__label { margin: 0 6px 0 0; }
.sd-fx .sd-fx-page > .sd-toc a { padding: 7px 12px; border: 1px solid var(--line-2); font-size: 13.5px; }
.sd-fx .sd-fx-page > .sd-toc a:hover { border-color: var(--accent); color: var(--text); }
.sd-fx .sd-entry .wp-block-group__inner-container > :first-child { margin-top: 0; }
.sd-fx .sd-entry .wp-block-columns { margin: 0; }
.sd-fx .sd-entry :is(h2, h3, h4, h5) { text-wrap: balance; }

/* ---------------------------------------------------------------- hero: text left, product recording (or the page's picture) right */
.sd-fx .sd-fx-hero {
	padding: 44px 0 56px; border-bottom: 1px solid var(--line);
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 56px 56px; background-position: center top;
}
.sd-fx .sd-fx-hero .wp-block-columns {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
	max-width: calc(var(--sd-max) + 2 * var(--sd-gutter)); margin: 0 auto; padding: 0 var(--sd-gutter);
}
.sd-fx .sd-fx-hero .wp-block-column { min-width: 0; flex-basis: auto !important; }
.sd-fx .sd-fx-hero h1 { margin: 0; font: 600 var(--t-h1)/1.04 var(--f-display); letter-spacing: -.02em; color: var(--text); text-align: left !important; }
/* the typing line: "+ " and the word assets/js/features.js types (an H2 on the use cases, a span on the features) */
.sd-fx .sd-fx-hero .typography-hero-headline:not(h1) {
	display: block; min-height: 1.15em; margin: 8px 0 0; font: 600 clamp(1.32rem, .88rem + 1.584vw, 2.2rem)/1.1 var(--f-display);
	letter-spacing: -.02em; color: var(--accent); text-align: left !important; white-space: normal; overflow: visible;
}
.sd-fx .sd-fx-hero p:has(> .typography-hero-headline) { margin: 0; }
.sd-typeit__caret { display: inline-block; width: .08em; height: .9em; margin-left: .06em; vertical-align: -.06em; background: currentColor; animation: sd-caret 1s steps(1) infinite; }
@keyframes sd-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-typeit__caret { animation: none; } }
.sd-fx .sd-fx-hero :is(h3, h4) { margin: 18px 0 0; font: 600 20px/1.35 var(--f-text); letter-spacing: 0; color: var(--text); text-align: left !important; max-width: 36ch; }
.sd-fx .sd-fx-hero .sd-text { margin: 22px 0 0; }
.sd-fx .sd-fx-hero .sd-text h4 { margin-top: 0; }
.sd-fx .sd-fx-hero h2.typography-feature-sub-sub { margin: 10px 0 12px; max-width: 50ch; font: 400 17px/1.6 var(--f-text); letter-spacing: 0; color: var(--mute); text-align: left !important; }
.sd-fx .sd-fx-hero p { margin: 0 0 14px; max-width: 50ch; font-size: 15.5px; color: var(--mute); text-align: left !important; }
.sd-fx .sd-fx-hero h3 + p { margin-top: 12px; }
.sd-fx .sd-fx-hero p strong { color: var(--text); }
.sd-fx .sd-fx-hero p:has(> .sd-21btn-primary-l) { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
/* the second hero button ("Watch the Intro Video", "More Info"): the design's quiet button; its icon goes, as on the first */
.sd-fx .sd-21btn-primary-r {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; white-space: nowrap;
	font: 600 15px/1 var(--f-text); text-decoration: none; color: var(--text); border: 1px solid var(--line-2); background: transparent;
}
.sd-fx .sd-21btn-primary-r:hover { color: var(--accent); border-color: var(--accent); }
.sd-fx .sd-21btn-primary-r i { display: none; }
/* the picture: the recording (sd-hero-media), or, until one exists, the live picture. No frame and no title bar: it floats
   on the white band (Mike, 2026-10-10, every feature page). The recording keeps a hairline round the screen itself, since
   the app's own white would otherwise run into the band's. */
.sd-fx .sd-fx-hero :is(.sd-hero-media, .sd-fx-pic) { margin: 0; border: 0; background: none; }
.sd-fx .sd-fx-hero .wp-block-column:has(:is(.sd-hero-media, .sd-fx-pic)) { align-self: center; } /* centered on the text column (core's columns style can force align-items: normal !important) */
.sd-fx .sd-fx-pic img { display: block; width: 100%; max-height: 440px; object-fit: contain; padding: 0; margin: 0 !important; background: none; }
/* V3 artwork is composed to dissolve into white on all four sides. Give only those new images
   the larger right-column footprint reviewed at desktop and phone sizes; preserve older heroes. */
@media (min-width: 901px) {
	.sd-fx .sd-fx-hero .sd-fx-pic img[src*="-illustration-v3-"] {
		width: calc(100% + 100px); max-width: none; max-height: none; height: auto;
		margin-left: -50px !important;
	}
}
@media (max-width: 900px) {
	.sd-fx .sd-fx-hero .sd-fx-pic img[src*="-illustration-v3-"] {
		width: calc(100% + 24px); max-width: none; max-height: none; height: auto;
		margin-left: -12px !important;
	}
}
.sd-fx .sd-hero-media video { border: 1px solid var(--line); }
.sd-fx .sd-hero-media figcaption { padding: 10px 0 0; border-top: 0; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
/* "Replaces…": the competitors' names, struck through (drawn from data-t), or the logo strip on a light chip */
.sd-fx .sd-replaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-family: var(--f-num); }
.sd-fx .sd-replaces :is(.sd-replaces-apps) { margin: 0 4px 0 0; font: 400 12.5px/1.4 var(--f-num); color: var(--faint); letter-spacing: 0; }
.sd-fx .sd-replaces__names { display: contents; }
.sd-fx .sd-replaces s { border: 1px solid var(--line-2); padding: 5px 10px; font-size: 12.5px; color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-decoration-thickness: 1.5px; }
.sd-fx .sd-replaces s::before { text-decoration: inherit; }
.sd-fx .sd-replaces__logo { display: block; width: auto !important; max-width: min(100%, 300px) !important; max-height: 44px !important; height: auto; padding: 6px 10px !important; margin: 0 !important; background: #FFFFFF; }

/* ---------------------------------------------------------------- each feature: one row of the index: [H2 + lead + See it] [media above bullets] */
.sd-fx .sd-fx-feature { padding: 40px 0; border-top: 1px solid var(--line); }
.sd-fx .sd-fx-page > .sd-toc + .sd-fx-feature, .sd-fx .sd-fx-page > .sd-fx-hero + .sd-fx-feature { border-top: 0; }
.sd-fx .sd-fx-feature .sd-parallax-content {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 12px 48px; align-items: start;
}
.sd-fx .sd-fx-feature > .wp-block-group__inner-container,
.sd-fx .sd-fx-feature .sd-parallax-content > .wp-block-group__inner-container,
.sd-fx .sd-fx-feature .sd-parallax-content .wp-block-columns,
.sd-fx .sd-fx-feature .sd-parallax-content .wp-block-column { display: contents; }
.sd-fx .sd-fx-feature .sd-parallax-content h2 { scroll-margin-top: calc(var(--sd-header-h) + 24px); }
.sd-fx .sd-fx-feature .sd-parallax-content p:has(> .sd-21btn-primary-l) { display: none; } /* D5 (feature pages since 0.4): the CTA band closes the page */
.sd-fx .sd-entry .y2021-featuredbullets-p { margin: 0; } /* the block layer's paragraph spacing would double the list's own gap */

/* ---------------------------------------------------------------- "See it": the gallery in a panel, a stack of frames */
.sd-fx .sd-see__panel > .wp-block-gallery { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; background: var(--line-2); }
.sd-fx .sd-see__panel > .wp-block-gallery > .wp-block-image { width: 100% !important; margin: 0 !important; flex: none !important; }
.sd-fx .sd-see__panel > .wp-block-gallery img { display: block; width: 100% !important; max-height: none !important; height: auto !important; padding: 0 !important; object-fit: contain !important; background: #FFFFFF; }
.sd-fx .sd-see__panel > .wp-block-gallery figcaption { display: none; }
.sd-fx .sd-see-inline { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 24px 0; }
.sd-fx .sd-see-inline > .sd-see__panel { align-self: stretch; }
.sd-fx .wp-block-column:empty { display: none; }

/* ---------------------------------------------------------------- testimonials: quotes in the column; the last one, the canvas's review band */
.sd-fx .sd-fx-review { padding: 40px 0; border-top: 1px solid var(--line); }
.sd-fx .sd-fx-review--last { padding: 72px 0; background: var(--panel); border-top: 1px solid var(--line); }
.sd-fx .sd-fx-page:has(> .sd-fx-review--last) { padding-bottom: 0; } /* the band meets the CTA band's own rule */
.sd-fx .sd-fx-review .wp-block-columns { display: block; }
.sd-fx .sd-fx-review--last .wp-block-columns { max-width: 980px; margin: 0 auto; padding: 0 var(--sd-gutter); }
.sd-fx .sd-fx-review .wp-block-column:has(.sd-icon, .fa) { display: none; } /* the quote mark ([icons]) */
.sd-fx .sd-fx-review .sd-21-quotes { margin: 0 0 18px; max-width: none !important; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem) !important; line-height: 1.5; color: var(--text) !important; text-align: left !important; }
.sd-fx .sd-fx-review .sd-21-testimonials-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; font: 13px/1.4 var(--f-num); text-align: left !important; }
.sd-fx .sd-text-highlight { color: var(--accent); }
.sd-fx .sd-21-reviewlink { color: var(--mute); text-decoration: none; }
.sd-fx .sd-21-reviewlink:hover { color: var(--accent); }
.sd-fx .sd-21-testimonials-row img { display: block; width: auto; height: 40px; margin: 0; padding: 0 !important; background: none; } /* the review badge, a white pill on the band, no white box (Mike, 2026-10-10) */

/* ---------------------------------------------------------------- the use cases' own rows (CPA, Law): sections, image + text blocks */
.sd-fx .sd-fx-page > :is(.sd-fx-section, .sd-fx-block, .sd-fx-row) { padding: 48px 0; border-top: 1px solid var(--line); }
.sd-fx .sd-fx-section h2 { margin: 0 auto .5em; max-width: 30ch; font: 600 clamp(1.4rem, 1.05rem + 1.2vw, 2rem)/1.15 var(--f-display); letter-spacing: -.02em; scroll-margin-top: calc(var(--sd-header-h) + 24px); }
.sd-fx .sd-fx-section h3 { margin: 0 auto .9em; max-width: 46ch; font: 500 var(--t-h4)/1.4 var(--f-text); letter-spacing: 0; color: var(--mute); }
.sd-fx .sd-fx-section h4 { margin: 1.2em auto .5em; max-width: 46ch; color: var(--text); }
.sd-fx .sd-fx-section h5 { margin: 1.4em auto .8em; max-width: 60ch; font-size: 1.0625rem; color: var(--text); }
.sd-fx .sd-fx-section p { max-width: 68ch; margin-inline: auto; color: var(--c-copy); }
/* D3 (Mike, 2026-10-07, long-form; applied here too): body copy reads left, the section headings stay centered */
.sd-fx .sd-fx-section p:not(:has(> img)) { text-align: left !important; }
/* navy text written for the live site's light sections: on this ground it reads as the body copy */
.sd-fx .sd-entry [style*="color: #224057"], .sd-fx .sd-entry [style*="color:#224057"] { color: inherit !important; }
/* the checklist written as paragraphs with Font Awesome checks (not loaded here): the bullets' check mark */
.sd-fx .sd-home-features-01 { display: flex; gap: 10px; margin: .4em auto !important; }
.sd-fx .sd-home-features-01 > i.fa { display: none; }
.sd-fx .sd-home-features-01::before {
	content: ""; flex: none; width: 16px; height: 16px; margin-top: 5px; background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* image + text blocks: the text first, the illustration beside it */
.sd-fx .sd-fx-block .wp-block-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sd-fx .sd-fx-block .wp-block-column { min-width: 0; flex-basis: auto !important; }
.sd-fx .sd-fx-block .wp-block-column:has(.typography-section-h1) { order: -1; }
.sd-fx .typography-section-h1 { display: block; font: 600 clamp(1.4rem, 1.05rem + 1.2vw, 2rem)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--text); text-align: left !important; }
.sd-fx .sd-fx-block p:has(> .typography-section-h1) { margin: 0 0 8px; }
.sd-fx .sd-fx-block h4 { margin: 0 0 12px; color: var(--text); }
.sd-fx .sd-fx-block p { color: var(--c-copy); text-align: left !important; }
.sd-fx .sd-fx-block p:has(> .sd-21btn-primary-l) { display: none; } /* D5, as on the feature rows */
.sd-fx .sd-replaces--block { margin: 6px 0 14px; }
.sd-fx .sd-replaces--block h4 { margin: 0 4px 0 0; }
/* illustrations and badges drawn for a white page: each on its own light card, capped in height */
.sd-fx .sd-fx-page > :not(.sd-fx-hero) :is(.wp-block-image, p) > img:not(.sd-replaces__logo),
.sd-fx .sd-fx-page > :not(.sd-fx-hero) .wp-block-image > a > img { display: block; max-width: 100% !important; height: auto; max-height: 320px; object-fit: contain; margin: 0 auto !important; padding: 14px; background: #FFFFFF; }
.sd-fx .sd-entry .wp-block-image { margin: 0 0 1em; }
.sd-fx .sd-fx-row .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; align-items: center; }
.sd-fx .sd-fx-row .wp-block-column { min-width: 0; flex-basis: auto !important; }
.sd-fx .sd-fx-page > .sd-fx-row .wp-block-image img { max-height: 120px !important; } /* badges (the intro video, security) */

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1060px) {
	.sd-fx .sd-fx-page { grid-template-columns: [full-start] var(--sd-gutter) [content-start] minmax(0, 1fr) [content-end] var(--sd-gutter) [full-end]; }
	.sd-fx .sd-fx-page > .sd-toc { padding-top: 24px; }
	.sd-fx .sd-fx-page > .sd-toc + .sd-fx-feature { border-top: 0; }
}
@media (max-width: 900px) {
	.sd-fx .sd-fx-hero .wp-block-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sd-fx .sd-fx-feature .sd-parallax-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.sd-fx .sd-fx-block .wp-block-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
	.sd-fx .sd-fx-hero { padding: 32px 0 40px; }
	.sd-fx .sd-fx-hero .typography-hero-headline:not(h1) { font-size: 1.32rem; }
	.sd-fx .sd-fx-hero p:has(> .sd-21btn-primary-l) > a { flex: 1 1 100%; }
	.sd-fx .sd-fx-page > :is(.sd-fx-section, .sd-fx-block, .sd-fx-row) { padding: 36px 0; }
	.sd-fx .sd-fx-feature { padding: 32px 0; }
	.sd-fx .sd-fx-review--last { padding: 48px 0; }
}