/**
 * Finewerk Audit Section
 *
 * Scoped, BEM-style styles for the dark-green split lead-capture section.
 * All custom properties are namespaced with --fw-as- to avoid collisions.
 * The two green surfaces (section + panel) carry CSS fallbacks here; the
 * editable Elementor background groups override them per instance.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-audit-section {
	font-family: var(--fw-font-body);
}

.finewerk-audit-section :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-audit-section :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-audit-section {
	--fw-as-accent: #C8F8A9;
	--fw-as-accent-border: #ADDA90;
	--fw-as-deep-green: #0F3D3A;
	--fw-as-content-width: 55%;
	--fw-as-column-gap: 0px;
	--fw-as-divider-color: rgba(255, 255, 255, 0.08);
	--fw-as-divider-width: 1px;
	--fw-as-item-spacing: 22px;
	--fw-as-field-gap: 10px;
	--fw-as-input-height: 52px;
	--fw-as-review-spacing: 20px;
	--fw-as-review-avatar: 52px;
	--fw-as-review-overlap: 23px;
	--fw-as-review-ring: #ffffff;
	--fw-as-review-ring-width: 2px;
	--fw-as-review-star: #F3AA3C;
	--fw-as-review-star-size: 18px;
	--fw-as-toggle-height: 52px;
	--fw-as-arrow-size: 1em;
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(180deg, #101F1B 0%, #1E4237 100%);
	color: #ffffff;
}

/*
 * Optional background image for the WHOLE card (Elementor "Section
 * background image"). Its own layer rather than a background-image on the
 * section, so it never collides with the "Section background" group control
 * — that group writes `background-image: linear-gradient(...)` for its
 * gradient type and would overwrite an image set on the same element.
 *
 * inset:0 spans the entire card, the form panel included; the section's own
 * `overflow: hidden` + radius clip it to the card, so the image can never
 * reach the decorative sheets hanging below the shell.
 */
.finewerk-audit-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: inherit;
	pointer-events: none;
}

.finewerk-audit-section__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	column-gap: var(--fw-as-column-gap);
	width: 100%;
	/* Above the background-image layer. Static position — the columns keep
	   the exact layout they had before the layer existed. */
	position: relative;
	z-index: 1;
}

/* ---------- Left content column ---------- */

.finewerk-audit-section__content {
	flex: 0 0 var(--fw-as-content-width);
	max-width: var(--fw-as-content-width);
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 60px 56px;
}

.finewerk-audit-section__eyebrow {
	display: block;
	margin: 0 0 22px;
	color: var(--fw-as-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.finewerk-audit-section__heading {
	margin: 0 0 40px;
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.01em;
}

.finewerk-audit-section__list {
	margin: 0;
}

.finewerk-audit-section__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 26px;
	align-items: baseline;
	padding: var(--fw-as-item-spacing) 0;
	border-top: var(--fw-as-divider-width) solid var(--fw-as-divider-color);
}

.finewerk-audit-section__item-num {
	color: var(--fw-as-accent);
	font-family: var(--fw-font-title);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.finewerk-audit-section__item-title {
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.finewerk-audit-section__item-text {
	grid-column: 2;
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.6;
}

.finewerk-audit-section__note {
	margin: auto 0 0;
	padding-top: 40px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.7;
}

/* ---------- Right form panel ---------- */

/*
 * The panel carries the shared `finewerk-liquid-glass` material (stamped
 * into the markup by the widget), so its surface is the glass plate — no
 * background of its own, or the opaque fill would sit between the plate and
 * the card behind it and there would be nothing left to see through.
 *
 * z-index lifts the whole form side above the left column and above the
 * card's background-image layer. The glass plate is the panel's own
 * ::before at z-index:-1, so it stays inside this stacking context: over the
 * card background, under the form.
 */
.finewerk-audit-section__panel {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-width: 0;
	padding: 56px 48px;
	border-radius: 20px;
	background: transparent;
}

.finewerk-audit-section__form-title {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.finewerk-audit-section__form-subtitle {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.5;
}

.finewerk-audit-section__form[hidden] {
	display: none;
}

.finewerk-audit-section__form {
	display: flex;
	flex-direction: column;
	row-gap: var(--fw-as-field-gap);
}

/*
 * Every control — text inputs, the service dropdown, the language toggle,
 * the submit button and the disclaimer — is a direct child here, so one
 * row-gap gives the whole form a single consistent rhythm.
 */
.finewerk-audit-section__form [data-fw-form-body] {
	display: flex;
	flex-direction: column;
	row-gap: var(--fw-as-field-gap);
}

.finewerk-audit-section__field {
	display: flex;
	flex-direction: column;
	row-gap: 9px;
	min-width: 0;
}

.finewerk-audit-section__label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Inputs are styled only within the widget scope. */
.finewerk-audit-section__input {
	/* width:100% sits alongside padding and a border here, so the border
	   box is what keeps every control inside the panel. */
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: var(--fw-as-input-height);
	padding: 0 16px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

.finewerk-audit-section__input--textarea {
	min-height: calc(var(--fw-as-input-height) * 2);
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

.finewerk-audit-section__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

.finewerk-audit-section__input:focus-visible {
	outline: 2px solid var(--fw-as-accent);
	outline-offset: 2px;
}

/* Invalid state applied by the shared Finewerk forms handler. */
.finewerk-audit-section__input.is-fw-invalid {
	border-color: #f2a6a6;
}

/* ---------- Language toggle ---------- */

.finewerk-audit-section__lang {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

/* Visually hidden but focusable radios drive the :checked pill state. */
.finewerk-audit-section__lang-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.finewerk-audit-section__lang-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fw-as-toggle-height);
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.finewerk-audit-section__lang-radio:checked + .finewerk-audit-section__lang-option {
	border-color: var(--fw-as-accent-border);
	color: var(--fw-as-accent);
	background-color: rgba(200, 248, 169, 0.08);
}

.finewerk-audit-section__lang-radio:focus-visible + .finewerk-audit-section__lang-option {
	outline: 2px solid var(--fw-as-accent);
	outline-offset: 2px;
}

/* ---------- Service dropdown ---------- */

.finewerk-audit-section__select-wrap {
	position: relative;
	display: block;
}

.finewerk-audit-section__input--select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 42px;
	cursor: pointer;
}

/*
 * The dropdown's surface, restated so it matches the text inputs exactly.
 *
 * A <select> is the one control themes style far more aggressively than a
 * plain input, and the Diteck parent theme is no exception: its
 * `select:not([size]):not([multiple])` rule (specificity 0,2,1) paints a
 * white plate with `border: none`, a 15px radius and its own dark chevron —
 * outranking BOTH `.finewerk-audit-section__input` (0,1,0) and the
 * Elementor input controls, which write at `{{WRAPPER}} .…__input` (0,2,0).
 *
 * Three classes (0,3,0) clear that bar with room to spare, without a single
 * !important. Only the properties the theme actually takes are restated;
 * padding, height, font and the focus ring still come from the shared
 * `.finewerk-audit-section__input` rule above. `background-image: none`
 * removes the theme's chevron — this widget draws its own arrow with
 * `.finewerk-audit-section__select-arrow`.
 */
.finewerk-audit-section .finewerk-audit-section__input.finewerk-audit-section__input--select {
	background-color: rgba(0, 0, 0, 0.2);
	background-image: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #ffffff;
}

/* Same reason, one class further up: the shared invalid rule is (0,2,0) and
   would otherwise lose to the border shorthand just above it. */
.finewerk-audit-section .finewerk-audit-section__input.finewerk-audit-section__input--select.is-fw-invalid {
	border-color: #f2a6a6;
}

/* Native option lists are painted by the OS, so force a readable pair. */
.finewerk-audit-section__input--select option {
	background-color: #10201C;
	color: #ffffff;
}

.finewerk-audit-section__select-arrow {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid rgba(255, 255, 255, 0.6);
	border-bottom: 2px solid rgba(255, 255, 255, 0.6);
	transform: rotate(45deg);
	pointer-events: none;
}

/* ---------- Submit + disclaimer ---------- */

.finewerk-audit-section__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #D9FCC2 0%, #C8F8A9 100%);
	color: var(--fw-as-deep-green);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.finewerk-audit-section__submit:hover {
	filter: brightness(1.04);
}

.finewerk-audit-section__submit:focus-visible {
	outline: 2px solid var(--fw-as-accent);
	outline-offset: 3px;
}

.finewerk-audit-section__submit-arrow {
	font-size: var(--fw-as-arrow-size);
	line-height: 1;
	transition: transform 0.2s ease;
}

.finewerk-audit-section__submit:hover .finewerk-audit-section__submit-arrow {
	transform: translateX(3px);
}

.finewerk-audit-section__disclaimer {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

/* ---------- Review strip ---------- */

/*
 * Sits directly below the form inside the panel. Colours, sizes and the
 * spacing above it are all Elementor-controlled; the values here are the
 * reference design as a fallback.
 */
.finewerk-audit-section__review {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	box-sizing: border-box;
	margin-top: var(--fw-as-review-spacing);
	padding: 22px;
	border: 1px solid #353434;
	border-radius: 14px;
	background-color: #1E1D1D;
}

/* The strip is decorative twice over; this is what a screen reader gets. */
.finewerk-audit-section__review-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * row-reverse + reversed markup reproduces the reference stacking: each
 * portrait overlaps the one to its right, and the count badge sits on top.
 */
.finewerk-audit-section__review-avatars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	flex: 0 0 auto;
}

.finewerk-audit-section__review-avatar {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--fw-as-review-avatar);
	height: var(--fw-as-review-avatar);
	overflow: hidden;
	border: var(--fw-as-review-ring-width) solid var(--fw-as-review-ring);
	border-radius: 50%;
	background-color: #2A2A2A;
}

.finewerk-audit-section__review-avatar + .finewerk-audit-section__review-avatar {
	margin-right: calc(-1 * var(--fw-as-review-overlap));
}

.finewerk-audit-section__review-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.finewerk-audit-section__review-extra {
	z-index: 1;
	overflow: visible;
	background-color: #1A1A1A;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.finewerk-audit-section__review-text {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.finewerk-audit-section__review-rating {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 4px;
}

.finewerk-audit-section__review-stars {
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	/* Stars read as centred against the big score, not baseline-aligned. */
	align-self: center;
	margin-right: 10px;
}

.finewerk-audit-section__review-star {
	display: block;
	line-height: 0;
	color: var(--fw-as-review-star);
}

.finewerk-audit-section__review-star--empty {
	opacity: 0.28;
}

.finewerk-audit-section__review-star svg {
	display: block;
	width: var(--fw-as-review-star-size);
	height: var(--fw-as-review-star-size);
	fill: currentColor;
}

.finewerk-audit-section__review-figure {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 2px;
}

.finewerk-audit-section__review-score {
	color: #ffffff;
	font-family: var(--fw-font-title);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.finewerk-audit-section__review-count {
	color: #8F8E8E;
	font-size: 14px;
	line-height: 1.4;
}

.finewerk-audit-section__review-caption {
	margin: 0;
	color: #8F8E8E;
	font-size: 15px;
	line-height: 1.4;
}

/* ---------- Submission states ---------- */

/*
 * The shared handler renders one status region; these custom properties
 * tune the generic states in forms.css for this dark green panel.
 */
.finewerk-audit-section__status {
	--fw-form-border: var(--fw-as-accent-border);
	--fw-form-radius: 12px;
	--fw-form-color: #ffffff;
	--fw-form-success-border: var(--fw-as-accent-border);
	--fw-form-success-bg: rgba(200, 248, 169, 0.08);
	--fw-form-error-border: rgba(242, 166, 166, 0.75);
	--fw-form-error-bg: rgba(242, 166, 166, 0.1);
	margin-top: 14px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-audit-section__input,
	.finewerk-audit-section__lang-option,
	.finewerk-audit-section__submit,
	.finewerk-audit-section__submit-arrow {
		transition: none;
	}

	.finewerk-audit-section__submit:hover .finewerk-audit-section__submit-arrow {
		transform: none;
	}
}

/* ---------- Responsive ---------- */

/* Tablet: tighten columns and padding. */
@media (max-width: 1024px) {
	.finewerk-audit-section__content {
		padding: 44px 36px;
	}

	.finewerk-audit-section__panel {
		padding: 44px 36px;
	}

	.finewerk-audit-section__heading {
		margin-bottom: 30px;
	}
}

/* Mobile: stack content above the form panel, full width. */
@media (max-width: 767px) {
	.finewerk-audit-section__inner {
		flex-direction: column;
		row-gap: var(--fw-as-column-gap);
	}

	.finewerk-audit-section__content,
	.finewerk-audit-section__panel {
		/* width:100% plus padding needs the border box, or the columns
		   overflow the section and push the form off-screen. */
		box-sizing: border-box;
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
		padding: 36px 24px;
	}

	.finewerk-audit-section__note {
		padding-top: 28px;
	}

	.finewerk-audit-section__lang {
		grid-template-columns: 1fr;
	}

	/* Narrow panel: let the score line wrap under the stars if it must. */
	.finewerk-audit-section__review {
		gap: 14px;
	}

	.finewerk-audit-section__review-stars {
		margin-right: 4px;
	}
}

/* Very narrow: stack the portraits above the rating. */
@media (max-width: 400px) {
	.finewerk-audit-section__review {
		align-items: flex-start;
	}

	.finewerk-audit-section__review-text {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Bottom sheet stack  (audit-bottom.png)
   ==========================================================================
   Two decorative "sheets" hanging below the section's bottom edge, like tabs
   stacked behind the card. The section root clips its own children
   (overflow: hidden + radius), so the sheets live in a clipped strip that is
   a sibling of the section inside a shell wrapper:

       .finewerk-audit-section-shell        position: relative; its border box
                                            ends exactly at the section's
                                            bottom edge — the stack reserves
                                            NO space inside the widget, so a
                                            background applied to any ancestor
                                            (Elementor wrapper or container)
                                            also ends at the content edge and
                                            can never fill behind the sheets
           .finewerk-audit-section          normal flow → the whole visual
           __sheets                         absolute strip hanging below the
                                            shell (top: 100%), overflow:
                                            hidden — clips both sheets to
                                            their exact visible bands
               __sheet--back   (darker)     painted first  → lower band
               __sheet--front  (lighter)    painted second → upper band

   Each sheet is taller than its visible band, but the STRIP clips the excess
   — the stack never relies on the section being opaque, so it renders
   correctly even when the instance's section background is transparent and
   an ancestor paints the green (the audit-visual-bug.png failure). Because
   the strip hangs outside the shell's box, the element that follows the
   widget needs its normal page gap (any non-zero Elementor gap/padding
   covers the 20px hang).

   Sheet WIDTH is measured against the CARD, never against the shell. The
   shell is a full-width block, but the section inside it may legitimately be
   narrower (a max-width on the section, an Elementor width setting reaching
   the section, a theme constraint). Sizing the sheets off the shell would
   then leave them sticking out past the card. So the sheets are laid out
   from two custom properties that describe the card's rendered box inside
   the strip's containing block:

       --fw-as-card-width   the section's rendered border-box width
       --fw-as-card-left    the section's left edge, offset from the shell's
                            padding edge (non-zero only when the card is
                            narrower than the shell AND not centred in it)

   Both default to the shell-filling values (100% / 0px), which is exactly
   right whenever the card does fill the shell — the common case renders
   correctly with no JavaScript at all. audit-section.js observes the section
   and overwrites the pair with real pixel values as soon as the card stops
   matching the shell. The sheets are absolutely positioned, so neither the
   defaults nor the JS update can shift layout.

   Each sheet is then a SCALE of the card width, centred on the card, so the
   stack keeps its proportions at every breakpoint with no pixel widths
   anywhere: front 95%, back 92% (the reference taper, expressed as a ratio).

   Geometry measured from the reference (values are the 1x half of the 2x
   capture): ~10px visible per sheet, ~12px bottom corner radius.

   The stack RECEDES downward: the first sheet (front, the band touching the
   card) is #B9B9B9 at 0.8 opacity; the second one below it (back) is a
   LIGHTER #D2D2D2 and fades further, to 0.7. Each sheet therefore reads as
   one step further behind the card than the one above it. The greys match no
   existing Finewerk utility (accent/deep-green/gradient/grain/glass), so they
   are local custom properties here.
   ========================================================================== */

/* Static fallback matching the section's own 20px: the widget wrapper is
   where the instance-level background utility (fw-bg-gradient)
   paint, so it must round like the card. The grain overlay follows via its
   own border-radius: inherit. NO overflow clipping here — the sheet strip
   hangs below the wrapper's box and must never be cut. The Elementor
   "Section border radius" control overrides both in sync. */
.elementor-widget-finewerk_audit_section,
.finewerk-audit-section-shell {
	border-radius: 20px;
}

.finewerk-audit-section-shell {
	--fw-as-sheet-hang: 10px;
	--fw-as-sheet-radius: 12px;
	--fw-as-sheet-front-scale: 0.95;
	--fw-as-sheet-front-bg: #B9B9B9;
	--fw-as-sheet-front-opacity: 0.8;
	--fw-as-sheet-back-scale: 0.92;
	--fw-as-sheet-back-bg: #D2D2D2;
	--fw-as-sheet-back-opacity: 0.7;
	/* Card box, in the strip's coordinate space. Shell-filling defaults;
	   audit-section.js replaces them with the section's measured box when
	   the card is narrower than the shell. */
	--fw-as-card-width: 100%;
	--fw-as-card-left: 0px;
	/* The card's bottom corner radius (the larger of the two), matching the
	   static 20px; audit-section.js publishes the rendered value. Only the
	   <=1024px corner guard below reads it. */
	--fw-as-card-radius: 20px;
	position: relative;
	/* Flex column so an externally stretched widget (Elementor height /
	   stretched container item) passes its extra height down to the section
	   instead of leaving a bare band the section background does not cover.
	   With an auto-height wrapper both rules are inert and the shell simply
	   wraps its content. */
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* The section grows with whichever column is taller (the form panel included
   — flex containers never shrink below their content), and additionally
   fills the shell when the shell is stretched from outside. Never a fixed
   height: the form can push it taller at any time. A flex column itself, so
   that in the stretched case the inner two-column row grows along with it
   and both column backgrounds keep reaching the bottom edge. */
.finewerk-audit-section-shell > .finewerk-audit-section {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.finewerk-audit-section-shell > .finewerk-audit-section > .finewerk-audit-section__inner {
	flex: 1 1 auto;
}

/* The strip owns the hang area below the section and clips the sheets to
   their visible bands. Decorative only, so it never catches the pointer. */
.finewerk-audit-section-shell__sheets {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: calc(var(--fw-as-sheet-hang) * 2);
	overflow: hidden;
	pointer-events: none;
}

/* A share of the card width, centred on the card: the width is the scale
   applied to --fw-as-card-width, and the left edge is the card's own left
   edge plus half of the leftover. With the defaults in place that reduces to
   the shell-centred `calc(100% * scale)`, so the fallback is the same
   geometry measured against the shell. `right: auto` because the width and
   the left edge already fully determine the box. */
.finewerk-audit-section-shell__sheet {
	position: absolute;
	right: auto;
	width: calc(var(--fw-as-card-width) * var(--fw-as-sheet-scale));
	left: calc(
		var(--fw-as-card-left)
		+ var(--fw-as-card-width) * (1 - var(--fw-as-sheet-scale)) / 2
	);
	/* Taller than the visible band on purpose: the bottom corner radius gets
	   its full curve, and the strip clips the excess above. */
	height: 40px;
	border-radius: 0 0 var(--fw-as-sheet-radius) var(--fw-as-sheet-radius);
}

.finewerk-audit-section-shell__sheet--front {
	--fw-as-sheet-scale: var(--fw-as-sheet-front-scale);
	bottom: var(--fw-as-sheet-hang);
	background: var(--fw-as-sheet-front-bg);
	opacity: var(--fw-as-sheet-front-opacity);
}

.finewerk-audit-section-shell__sheet--back {
	--fw-as-sheet-scale: var(--fw-as-sheet-back-scale);
	bottom: 0;
	background: var(--fw-as-sheet-back-bg);
	opacity: var(--fw-as-sheet-back-opacity);
}

/* Corner guard, tablet and mobile only.
   The sheet insets are a SHARE of the card width (2.5% front, 4% back) while
   the card's bottom corners are a FIXED radius (20px). On desktop the share
   is wider than the radius, so each sheet starts under the card's flat
   bottom edge. Below roughly 800px of card width the share drops under the
   radius (8px / 13px at a 327px card) and the sheets' square top corners
   stick out past the card's rounded silhouette.

   So the front inset never drops below the radius plus a small shoulder, and
   the back sheet keeps its proportional step inward from the front one. Where
   the share already clears the radius, max() picks it and the geometry is
   exactly the base rule's. Desktop never enters this block. */
@media (max-width: 1024px) {
	.finewerk-audit-section-shell {
		--fw-as-sheet-corner-shoulder: 4px;
		--fw-as-sheet-front-inset: max(
			var(--fw-as-card-width) * (1 - var(--fw-as-sheet-front-scale)) / 2,
			var(--fw-as-card-radius) + var(--fw-as-sheet-corner-shoulder)
		);
	}

	.finewerk-audit-section-shell__sheet {
		width: calc(var(--fw-as-card-width) - 2 * var(--fw-as-sheet-inset));
		left: calc(var(--fw-as-card-left) + var(--fw-as-sheet-inset));
	}

	.finewerk-audit-section-shell__sheet--front {
		--fw-as-sheet-inset: var(--fw-as-sheet-front-inset);
	}

	.finewerk-audit-section-shell__sheet--back {
		--fw-as-sheet-inset: calc(
			var(--fw-as-sheet-front-inset)
			+ var(--fw-as-card-width) * (var(--fw-as-sheet-front-scale) - var(--fw-as-sheet-back-scale)) / 2
		);
	}
}