/* ================================================================
   AI Digital Health Check: product page (FSE build)

   Loaded ONLY by single-product-health-check-fse.php, which enqueues
   it with filemtime() versioning and a 'tt-lib' dependency, on the
   ?tt-preview=aidhc route only. Never loaded on the live page.

   Adapted from css/product-health-check-v2.css (the hand-written HTML
   build) for the native Gutenberg block markup in
   patterns/single-product-health-check.php. The block-generated
   wrapper divs use "layout":{"type":"default"}, which WordPress
   renders with NO extra is-layout-* classes (confirmed against this
   theme's existing patterns), so the DOM structure is close to
   identical to the original hand-written HTML: mostly the original
   class names, with an additional "wp-block-group" (or
   "wp-block-heading" / "wp-block-list" / "wp-block-table") class
   alongside them. Most selectors below are therefore UNCHANGED from
   the v2 stylesheet. The handful that had to change because the
   block-generated tag or nesting genuinely differs are called out in
   comments at the point of change.

   EVERY rule in this file is scoped under .aidhc so nothing leaks to
   the rest of the site.

   Colour tokens: every colour on this page resolves to a theme.json
   preset or to lib.css --border, the site's own hairline token.
   Nothing is an invented hex.

   HONEYCOMB: this file deliberately OMITS .hive-shell, .hive-pane,
   .hive, .hive-row, .cell-wrap, .cell, .key-pane, .key-list, .key-row,
   .key-dot, .key-label, .key-cat, .drawer, .drawer-tag, .legend,
   .swatch, .score-head, .score-dial, .score-n, .score-d, .grade, and
   their @keyframes. Those belong to the tt25/aidhc-hive block's own
   stylesheet, scoped to .tt-aidhc-hive. This is the agreed contract
   between the two builds — do not add honeycomb rules here.

   No dark-mode blocks. The rest of the site is light only.
   ================================================================ */

.aidhc {
	/* Ink. All three are theme.json presets. */
	--aidhc-ink:        var(--wp--preset--color--deep-navy, #0A1E3F);
	--aidhc-ink-soft:   var(--wp--preset--color--primary, #323D4C);
	--aidhc-ink-faint:  var(--wp--preset--color--mid-grey, #6B7280);

	/* Surfaces. */
	--aidhc-paper:      var(--wp--preset--color--off-white, #F9F9F9);
	--aidhc-surface:    var(--wp--preset--color--white, #ffffff);
	--aidhc-surface-2:  var(--wp--preset--color--teal-light, #e8f5f3);

	/* Hairline borders. --border is declared on :root in lib.css,
	   which this stylesheet lists as a dependency, and it is what
	   every other product template on the site uses for card, table
	   and divider edges. A teal-tinted border is not a site pattern. */
	--aidhc-line:       var(--border, rgba(50, 61, 76, 0.1));

	/* Teal. */
	--aidhc-teal-deep:  var(--wp--preset--color--teal-dark, #027D7C);
	--aidhc-teal:       var(--wp--preset--color--teal, #4EA59C);

	/* CTA hover: teal-dark pushed towards deep-navy. Both ends are
	   presets, so the hover stays inside the palette. */
	--aidhc-teal-hover: #036C71;
	--aidhc-teal-hover: color-mix(in srgb, var(--wp--preset--color--teal-dark, #027D7C) 82%, var(--wp--preset--color--deep-navy, #0A1E3F));

	/* Coral, which is the salmon family. */
	--aidhc-coral-deep:  var(--wp--preset--color--salmon-dark, #e06b5f);
	--aidhc-coral:       var(--wp--preset--color--salmon, #F98277);

	/* Close-band CTA hover. Salmon lifted towards white, because this
	   one only ever sits on the deep-navy band. */
	--aidhc-coral-hover: #FBA8A0;
	--aidhc-coral-hover: color-mix(in srgb, var(--wp--preset--color--salmon, #F98277) 70%, var(--wp--preset--color--white, #ffffff));

	/* Type. Site stacks from lib.css / theme.json. */
	--aidhc-display: var(--wp--preset--font-family--display, Georgia, serif);
	--aidhc-sans:    var(--wp--preset--font-family--body, system-ui, sans-serif);
	--aidhc-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

	/* Matches the real site's confirmed content-width standard (960px,
	   .lib-container--wide). There is no narrower single-text-column
	   sub-pattern anywhere else on the site, so .col uses this same
	   value rather than inventing its own measure. */
	--aidhc-wide: 60rem;

	background: var(--aidhc-paper);
	color: var(--aidhc-ink);
	font-family: var(--aidhc-sans);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	display: block;
}

.aidhc *,
.aidhc *::before,
.aidhc *::after { box-sizing: border-box; }

/* h1 excluded on purpose: every other page's hero H1 renders at the
   theme's natural 400 (regular) Fraunces weight. Bolding it here was
   this page inventing its own hero typography instead of inheriting
   the site's. h2-h4 stay 700, matching how component-level headings
   (.lib-feature-card h3, etc.) are bold sitewide too — it's the
   page-level hero headline specifically that's regular weight. */
.aidhc h2,
.aidhc h3,
.aidhc h4 {
	font-family: var(--aidhc-display);
	font-weight: 700;
	letter-spacing: -0.012em;
	text-wrap: balance;
	margin: 0;
	line-height: 1.15;
	color: var(--aidhc-ink);
}

.aidhc h1 {
	font-family: var(--aidhc-display);
	font-weight: 400;
	letter-spacing: -0.012em;
	text-wrap: balance;
	margin: 0;
	line-height: 1.1;
	color: var(--aidhc-ink);
}

/* Salmon italic <em> accent — the real global rule is scoped to
   .lib-page-wrap, which this page doesn't sit inside (.aidhc is its
   own wrapper), so it needs restating here with the exact same
   values, not a new invented style. Matches industry-training's
   "Grow *your region*" / "built *for tourism*" pattern. */
.aidhc :where(h1, h2, h3) em {
	font-style: italic;
	color: var(--aidhc-coral);
}

.aidhc p { margin: 0; }

.aidhc a {
	color: inherit;
	text-decoration: none;
}

.aidhc ul,
.aidhc ol { margin: 0; }

/* ---------- layout bands ---------- */

.aidhc .band { padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem; }
.aidhc .band + .band { padding-top: 0; }

/* Same seam-vs-colour-change issue as .band + .stats-dark-band below:
   .band + .band zeroes top padding for adjacent same-background
   sections, but a .lib-section--white band is a real colour change
   from the off-white band before it, so it needs its top padding
   restored rather than sitting flush against the seam above it. */
.aidhc .band + .band.lib-section--white { padding-top: clamp(3.5rem, 8vw, 6.5rem); }

/* Same fix, other direction: a plain band exiting a white one is just
   as much a colour change as entering it. */
.aidhc .band.lib-section--white + .band:not(.lib-section--white) { padding-top: clamp(3.5rem, 8vw, 6.5rem); }

.aidhc .col {
	max-width: var(--aidhc-wide);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	min-width: 0;
}

.aidhc .wide {
	max-width: var(--aidhc-wide);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.aidhc .wide > * { min-width: 0; }

/* Every .col-flush is a section-intro header (eyebrow/h2/lead) nested
   inside a .wide wrapper, not a standalone narrow prose column — it
   should fill the .wide measure it already sits inside, not add a
   second, narrower cap on top. That extra cap was the "narrow column
   floating in a wide empty box" bug: no page on the real site nests
   a tighter measure inside an already-constrained section. */
.aidhc .col-flush {
	margin-inline: 0;
	max-width: none;
}

/* ---------- shared type ----------
   .eyebrow is intentionally NOT styled here. It's a real global class
   (lib.css) — DM Sans, salmon, 600 weight. A page-scoped override here
   would just re-shadow the site's actual eyebrow treatment, which is
   exactly the bug this rule used to be (mono font, wrong colour). */

.aidhc .lede { font-size: 1.16rem; color: var(--aidhc-ink-soft); }
.aidhc .small { font-size: 0.92rem; color: var(--aidhc-ink-soft); }

.aidhc .tiny {
	font-family: var(--aidhc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--aidhc-ink-faint);
}

.aidhc .h-band { font-size: clamp(1.7rem, 4vw, 2.5rem); }

/* ---------- hero ----------
   Built from the real .tt-product-hero / .price-card component in
   product-standard.css (the same "product standard" hero coaching and
   membership use), enqueued as a dependency in the PHP bootstrap. The
   rules below are only the adapter layer Gutenberg's block wrapping
   needs (a wp:button always wraps its <a> in an extra <div>, so a
   className landing on that wrapper can't be the same selector
   product-standard.css styles directly) plus the couple of page-only
   additions (the "see an example report" link, the trust strip). */

/* wp:button wraps its link in a div, so .hero-btn-primary lands on the
   wrapper, not the <a> that .tt-product-hero .btn-primary in
   product-standard.css expects. Re-point the same declarations at the
   actual link. */
.aidhc .hero-btn-primary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--teal);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.875rem 2.25rem;
	border-radius: 100px;
	box-shadow: 0 8px 24px rgba(78, 165, 156, 0.25);
}
.aidhc .hero-btn-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal-dark);
	color: #fff;
}

.aidhc .hero-see-example { margin-top: 0.6rem; }
.aidhc .hero-see-example a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* .aidhc h1 (global heading colour, dark ink) beats .tt-product-title's
   own white on specificity (class+element beats a single class), so
   the hero title renders near-invisible against the dark hero gradient
   without this. */
.aidhc .tt-product-hero .tt-product-title { color: #fff; }

/* Same wrapper-vs-link issue as .hero-btn-primary, for the price-card's
   own CTA (.price-card-btn in product-standard.css). */
.aidhc .price-card-btn-wrap .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--deep-navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.875rem;
	border-radius: 100px;
}
.aidhc .price-card-btn-wrap .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* The price-card's bundle upsell is page-specific content (not part of
   the reused component), nested inside the card — .bundle/.bundle-note
   are this page's own existing classes, just given a top rule here. */
.aidhc .price-card .bundle {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--aidhc-line);
}

/* Trust strip directly under the hero — reuses .proof (already used
   elsewhere on this page) as its own centred band rather than a hero
   footnote. */
.aidhc .trust-strip .proof { justify-content: center; }

/* Proof panel directly under the hero: the full checklist copy and
   the real report screenshot that used to sit inside the hero itself,
   moved here now that the hero uses the standard price-card shell
   (no room for either). Side by side above the fold on wider screens. */
.aidhc .hero-proof-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}
@media (min-width: 55rem) {
	.aidhc .hero-proof-panel { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.aidhc .hero-proof-panel .col-flush { max-width: none; }

/* ---------- buttons ----------
   ADAPTED: the original design put class "cta" / "cta ghost" /
   "bundle-link" directly on a standalone <a>. Core wp:button always
   wraps its <a class="wp-block-button__link"> inside an outer
   <div class="wp-block-button">, and any custom className lands on
   that OUTER div, not the inner link, so this file targets the
   wrapper context (.cta-row, .order-cta, .bundle-buttons) and styles
   the real link class, .wp-block-button__link, directly. */

.aidhc .cta-row,
.aidhc .order-cta .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
}

.aidhc .cta-row .wp-block-button,
.aidhc .order-cta .wp-block-button { margin: 0; }

.aidhc .cta-row .wp-block-button__link,
.aidhc .order-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--aidhc-teal-deep);
	color: var(--wp--preset--color--white, #ffffff);
	font-family: var(--aidhc-display);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: -0.005em;
	/* 44px minimum tap target. */
	min-height: 44px;
	padding: 0.95rem 1.7rem;
	border: 0;
	/* Pill, matching .lib-btn-primary across the rest of the site. */
	border-radius: 100px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}

.aidhc .cta-row .wp-block-button__link:hover,
.aidhc .order-cta .wp-block-button__link:hover {
	background: var(--aidhc-teal-hover);
	color: var(--wp--preset--color--white, #ffffff);
	transform: translateY(-1px);
}

/* Ghost / secondary CTA: core's is-style-outline variation, restyled
   to match the original ".cta.ghost" look. */
.aidhc .cta-row .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--aidhc-ink);
	border: 1px solid var(--aidhc-line);
}

.aidhc .cta-row .is-style-outline .wp-block-button__link:hover {
	background: var(--aidhc-surface-2);
	color: var(--aidhc-ink);
}

.aidhc a:focus-visible,
.aidhc button:focus-visible,
.aidhc .wp-block-button__link:focus-visible {
	outline: 2px solid var(--aidhc-coral-deep);
	outline-offset: 3px;
}

/* ---------- bundle cross-sell ----------
   ADAPTED: plain wp:button (no is-style-outline) inside a
   ".bundle-buttons" wrapper, fully restyled here as an underlined
   text link rather than a bordered ghost pill. */

.aidhc .bundle {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-top: 0.35rem;
}

.aidhc .bundle-buttons { display: flex; }
.aidhc .bundle-buttons .wp-block-button { margin: 0; }

.aidhc .bundle-buttons .wp-block-button__link {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
	font-family: var(--aidhc-display);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--aidhc-teal-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	align-self: flex-start;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.aidhc .bundle-buttons .wp-block-button__link:hover { color: var(--aidhc-teal-hover); }
.aidhc .bundle-note { font-size: 0.88rem; color: var(--aidhc-ink-soft); }

.aidhc .close-band .bundle-buttons .wp-block-button__link { color: var(--aidhc-coral); }
.aidhc .close-band .bundle-buttons .wp-block-button__link:hover { color: var(--aidhc-coral-hover); }
.aidhc .close-band .bundle-note { color: rgba(249, 249, 249, 0.72); }

/* ---------- proof strip ---------- */

.aidhc .proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-family: var(--aidhc-mono);
	font-size: 0.71rem;
	letter-spacing: 0.05em;
	color: var(--aidhc-ink-faint);
	text-transform: uppercase;
}

.aidhc .proof p { margin: 0; }

/* ---------- the AI answer card (hero thesis, unused, kept for
   reference in case the fabricated-mockup version is ever needed
   again) ---------- */

.aidhc .answer {
	background: var(--aidhc-paper);
	border: 1px solid var(--aidhc-line);
	border-radius: 3px;
	padding: 1.5rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.95rem;
	/* deep-navy at 50%. Kept as rgba because a shadow needs the alpha. */
	box-shadow: 0 22px 46px -30px rgba(10, 30, 63, 0.5);
}

.aidhc .answer-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid var(--aidhc-line);
	padding-bottom: 0.8rem;
}

.aidhc .prompt {
	font-family: var(--aidhc-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--aidhc-ink);
	line-height: 1.45;
}

.aidhc .named-l,
.aidhc .you-l {
	font-family: var(--aidhc-mono);
	font-size: 0.66rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--aidhc-ink-faint);
}

/* ADAPTED: the original numbered each item with a hand-written
   <span>01</span> prefix. core/list's RichText only preserves a small
   set of inline formatting tags (strong, em, a...), not a bare
   decorative <span>, so the digits are dropped from the markup.
   Reproduced here with a CSS counter on ::before (NOT list-style or
   ::marker): decimal-leading-zero via ::marker still appends the
   list-style suffix (a full stop) in several browsers, and ::marker
   content support is patchier than ::before. ::before inside a flex
   li also reproduces the original's flex-row-with-gap layout, which
   ::marker cannot. Do NOT "simplify" this back to list-style: decimal
   -- that renders 1. 2. 3. instead of the original's faint 01 02 03. */
.aidhc .named-list {
	list-style: none;
	counter-reset: named;
	margin: 0.55rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.aidhc .named-list li {
	counter-increment: named;
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	color: var(--aidhc-ink-soft);
	font-size: 0.95rem;
}

.aidhc .named-list li::before {
	content: counter(named, decimal-leading-zero);
	font-family: var(--aidhc-mono);
	font-size: 0.7rem;
	color: var(--aidhc-ink-faint);
}

.aidhc .you {
	margin-top: 0.4rem;
	/* Box language matches .lib-callout-salmon exactly (salmon-light
	   fill, left-edge border only, asymmetric radius) — this content
	   just needs a label + big value + note, which lib.css's version
	   (a single italic paragraph) has no room for, so the box shell is
	   shared but the inner content stays custom. */
	border-left: 3px solid var(--aidhc-coral);
	background: var(--wp--preset--color--salmon-light, #fce9e7);
	border-radius: 0 10px 10px 0;
	padding: 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.aidhc .you-l { color: var(--aidhc-coral-deep); }

.aidhc .you-v {
	font-family: var(--aidhc-display);
	font-size: clamp(1.5rem, 4vw, 1.95rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.05;
	color: var(--aidhc-coral-deep);
}

.aidhc .you-note { font-size: 0.88rem; color: var(--aidhc-ink-soft); margin-top: 0.25rem; }

.aidhc .fade-line { opacity: 0; animation: aidhc-rise 0.55s ease forwards; }

@keyframes aidhc-rise {
	from { opacity: 0; transform: translateY(7px); }
	to   { opacity: 1; transform: none; }
}

.aidhc .delay-1 { animation-delay: 0.1s; }
.aidhc .delay-2 { animation-delay: 0.55s; }
.aidhc .delay-3 { animation-delay: 1.1s; }

/* Force fade-line content visible in the editor: JS never runs there,
   but this animation is CSS-only (no JS trigger), so this is a
   defensive fallback per the skill's "any opacity:0 starting class
   needs an editor override" rule, not a fix for a broken animation. */
.editor-styles-wrapper .aidhc .fade-line {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/* ---------- stat strip ---------- */

/* Dark full-width band, matching .lib-stats-band (primary navy) —
   the rest of the site alternates light/dark sections like this
   (see industry-training's stats band); this page was entirely light
   before, which is exactly what read as off-brand. */
/* This band is now the real, existing .lib-stats-band / .lib-stats-grid
   / .lib-stat system from lib.css — background, padding, centring,
   stat/label styling and the dark-background label-colour override all
   come from there already. Every bug fixed on this section earlier
   (double-centring, vertical misalignment, the missing top padding)
   was this page re-deriving something lib.css already gets right.
   The only genuine content difference is column count: lib.css's
   .lib-stats-grid defaults to a 4-up grid and this section has 3
   stats, not 4. That's the one delta worth keeping. */
@media (min-width: 600px) {
	.aidhc .lib-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Elsewhere on the site .lib-stats-grid is applied to a wp:columns
   block (is-layout-flex, spacing via gap — no margin-bleed issue).
   This page builds it from a wp:group instead (is-layout-flow), whose
   core block-gap rule adds margin-block-start to every child but the
   first regardless of the forced grid display, pushing 2 of 3 columns
   down. Reset it here — a block-type difference, not a re-styling. */
.aidhc .lib-stats-grid > .lib-stat { margin-block-start: 0 !important; }

.aidhc .lib-stats-band .tiny { color: rgba(255, 255, 255, 0.5); text-align: center; }

/* ---------- four questions ---------- */

.aidhc .quads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--aidhc-line);
	border: 1px solid var(--aidhc-line);
}

.aidhc .quad {
	background: var(--aidhc-surface);
	padding: 1.6rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.aidhc .quad h3 { font-size: 1.22rem; }

.aidhc .quad-w {
	font-family: var(--aidhc-mono);
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aidhc-ink-faint);
}

.aidhc .bar { height: 4px; background: var(--aidhc-surface-2); border-radius: 2px; overflow: hidden; }
.aidhc .bar i,
.aidhc .bar .wp-block-group { display: block; height: 100%; background: var(--aidhc-teal-deep); }

.aidhc .bar-64 i, .aidhc .bar-64 .wp-block-group { width: 64%; }
.aidhc .bar-36 i, .aidhc .bar-36 .wp-block-group { width: 36%; }
.aidhc .bar-80 i, .aidhc .bar-80 .wp-block-group { width: 80%; }
.aidhc .bar-50 i, .aidhc .bar-50 .wp-block-group { width: 50%; }

.aidhc .how {
	margin-top: 0.35rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--aidhc-line);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.aidhc .how-l {
	font-family: var(--aidhc-mono);
	font-size: 0.63rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--aidhc-teal-deep);
}

.aidhc .how p { font-size: 0.88rem; color: var(--aidhc-ink-soft); }

/* ---------- inline report screenshots ----------
   Real report screenshots, placed inline in the section they
   illustrate rather than a separate gallery. Native wp:image blocks
   so they stay editable (swap/reorder) in the Site Editor. Direct
   children of .wide, which is a flex column with its own gap, so
   margin stays 0 here to avoid doubling that spacing. */

.aidhc .report-shot {
	width: 100%;
	margin: 0;
}

.aidhc .report-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid var(--aidhc-line);
	box-shadow: 0 12px 30px -18px rgba(10, 30, 63, 0.35);
}

.aidhc .report-shot figcaption {
	font-family: var(--aidhc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--aidhc-ink-faint);
	margin-top: 0.6rem;
}

/* ---------- where we look ---------- */

.aidhc .sources {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	background: var(--aidhc-line);
	border: 1px solid var(--aidhc-line);
}

.aidhc .src {
	background: var(--aidhc-surface);
	padding: 1.15rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* ADAPTED: original was a bare <b> + <span> pair inside .src, styled
   with tag selectors. The block build uses two classed paragraphs
   instead (src-title / src-desc) so RichText content stays plain
   text with no redundant wrapper tags. */
.aidhc .src-title { font-family: var(--aidhc-display); font-size: 0.98rem; letter-spacing: -0.01em; font-weight: 700; }
.aidhc .src-desc { font-size: 0.86rem; color: var(--aidhc-ink-soft); }

.aidhc .engines { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.aidhc .engine {
	/* Pill, matching .lib-audience-tag — the site's convention for a
	   small standalone tag/chip. */
	font-family: var(--aidhc-mono);
	font-size: 0.74rem;
	letter-spacing: 0.05em;
	border: 1px solid var(--aidhc-line);
	background: var(--aidhc-surface);
	padding: 0.4rem 0.9rem;
	border-radius: 100px;
	margin: 0;
}

.aidhc .caveat {
	border-left: 2px solid var(--aidhc-coral-deep);
	padding-left: 1rem;
}

.aidhc .caveat.quiet { border-left-color: var(--aidhc-line); }

.aidhc .aside-note {
	border: 1px solid var(--aidhc-line);
	background: var(--aidhc-surface);
	border-radius: 16px;
	padding: 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ---------- the fix card ----------
   16px radius matches .lib-feature-card / .lib-post-card, the site's
   standard "floating card" language. .quad and .stat (below) stay
   sharp on purpose: they're cells in a continuous divided grid
   (shared 1px borders via the parent's background-as-gridline trick),
   not discrete cards, and rounding individual cells in a shared-border
   grid reads as broken, not branded. */

.aidhc .fix-card {
	background: var(--aidhc-surface);
	border: 1px solid var(--aidhc-line);
	border-radius: 16px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.aidhc .fix-card { grid-template-columns: 1fr 1.15fr; }
}

.aidhc .fix-side { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.aidhc .fix-side + .fix-side { border-top: 1px solid var(--aidhc-line); }

@media (min-width: 56rem) {
	.aidhc .fix-side + .fix-side { border-top: 0; border-left: 1px solid var(--aidhc-line); }
}

.aidhc .fix-label {
	font-family: var(--aidhc-mono);
	font-size: 0.63rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--aidhc-ink-faint);
}

.aidhc .fix-label.spaced { margin-top: 0.5rem; }

.aidhc .fix-side h4 { font-size: 1.08rem; }

/* .prompt-box and .copy-btn moved to blocks/aidhc-copy-prompt/style.css
   (the button is now the tt25/aidhc-copy-prompt block; the paragraph
   stays a native wp:paragraph but its rule travels with that block's
   stylesheet since the two always render together on this page). Do
   not re-add them here. */

/* ---------- tables ----------
   ADAPTED: core/table wraps the <table> in a <figure>, so
   ".matrix-wrap" now lands on the figure rather than a plain <div>.
   Descendant selectors below are unaffected either way. */

.aidhc .matrix-wrap {
	overflow-x: auto;
	border: 1px solid var(--aidhc-line);
	background: var(--aidhc-surface);
	max-width: 100%;
	margin: 0;
}

.aidhc table { border-collapse: collapse; width: 100%; min-width: 34rem; }

.aidhc th,
.aidhc td {
	padding: 0.75rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--aidhc-line);
	font-size: 0.88rem;
}

.aidhc thead th {
	font-family: var(--aidhc-mono);
	font-size: 0.67rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aidhc-ink-faint);
	font-weight: 400;
}

.aidhc tbody tr:last-child td { border-bottom: 0; }

/* ADAPTED: the original coloured each answer cell individually via a
   "mark named" / "mark no" class per <td>. Core/table's JSON schema
   has no supported per-cell className, so the same result is built
   from content instead: every answer cell (any column after the
   first) gets the base mono/bold treatment and defaults to coral
   (Absent); a <strong> wrapping "Named" / "Named + cited" text
   (a supported RichText format) recolours just that cell to teal. */
.aidhc .matrix-wrap td:first-child { color: var(--aidhc-ink); max-width: 20rem; }

.aidhc .matrix-wrap td:not(:first-child) {
	font-family: var(--aidhc-mono);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--aidhc-coral-deep);
}

.aidhc .matrix-wrap td:not(:first-child) strong { color: var(--aidhc-teal-deep); font-weight: 600; }

.aidhc .vs-table td:first-child {
	font-family: var(--aidhc-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aidhc-ink-faint);
	white-space: nowrap;
}

.aidhc .vs-table th:last-child,
.aidhc .vs-table td:last-child { background: var(--aidhc-surface-2); }
.aidhc .vs-table th:last-child { color: var(--aidhc-teal-deep); }

/* ---------- limits of a free scan ---------- */

.aidhc .limits { display: flex; flex-direction: column; border-top: 1px solid var(--aidhc-line); }

.aidhc .limit {
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: 0.35rem 1rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--aidhc-line);
}

@media (min-width: 48rem) {
	.aidhc .limit { grid-template-columns: 2.4rem 17rem 1fr; padding: 1.75rem 0; }
}

.aidhc .limit-n { font-family: var(--aidhc-mono); font-size: 0.72rem; color: var(--aidhc-coral-deep); padding-top: 0.35rem; margin: 0; grid-column: 1; grid-row: 1; }
.aidhc .limit h3 { font-size: 1.1rem; grid-column: 2 / -1; grid-row: 1; }
.aidhc .limit p:not(.limit-n) { color: var(--aidhc-ink-soft); font-size: 0.95rem; grid-column: 2 / -1; grid-row: 2; }

@media (min-width: 48rem) {
	.aidhc .limit h3 { grid-column: 2; grid-row: 1; }
	.aidhc .limit p:not(.limit-n) { grid-column: 3; grid-row: 1; }
}

/* ---------- why us quote ----------
   ADAPTED: original was <figure class="why-quote"><blockquote>…
   </blockquote><figcaption class="tiny">…</figcaption></figure>.
   core/quote renders <blockquote class="wp-block-quote why-quote">
   directly (no figure wrapper) with the quote text as an inner
   wp:paragraph and the citation as a <cite>. The box-model rules
   that were on .why-quote apply the same way directly on the
   blockquote; the text rule moves to the inner <p>; the caption
   rule moves to <cite>. Border/padding are reset first to override
   Twenty Twenty-Five's own core/quote default styling. */

.aidhc .wp-block-quote.why-quote {
	/* Border colour and text weight now match .lib-blockquote exactly
	   (salmon edge, 700 weight, primary-colour text) — this page's own
	   quote previously used teal + 500 weight, which is off the site's
	   actual blockquote convention, not a deliberate variant of it. */
	border: 0;
	padding: 0;
	margin: 0.5rem 0 0;
	border-left: 3px solid var(--aidhc-coral);
	padding-left: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.aidhc .why-quote p {
	margin: 0;
	font-family: var(--aidhc-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.45;
	color: var(--aidhc-ink-soft);
}

.aidhc .why-quote cite {
	font-family: var(--aidhc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--aidhc-ink-faint);
	font-style: normal;
}

/* ---------- what we need from you / steps ----------
   ADAPTED: original was <span class="step-n">01</span><div><b>Title
   </b><p>Desc</p></div> — two flex items in ".step". The block build
   keeps the same two-flex-item shape: .step-n, then a new wrapper
   class ".step-body" (the original wrapping <div> had no class) that
   holds two stacked classed paragraphs, step-title / step-desc,
   replacing the bare <b> / <p> tag selectors. */

.aidhc .steps { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--aidhc-line); }

.aidhc .step {
	display: flex;
	gap: 1.2rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--aidhc-line);
	align-items: baseline;
}

.aidhc .step-n {
	font-family: var(--aidhc-mono);
	font-size: 0.72rem;
	color: var(--aidhc-teal-deep);
	flex: none;
	width: 2rem;
	margin: 0;
}

.aidhc .step-body { display: flex; flex-direction: column; }
.aidhc .step-title { font-family: var(--aidhc-display); font-size: 1.05rem; letter-spacing: -0.01em; font-weight: 700; margin: 0; }
.aidhc .step-desc { color: var(--aidhc-ink-soft); font-size: 0.94rem; margin-top: 0.15rem; }

/* ---------- value stack ----------
   ADAPTED: original stack-row was <b>Title</b><span class="stack-val">
   $N</span><p>Desc</p> on a CSS grid with the <b> and <span> sharing
   row one and the <p> spanning row two. The block build gives the
   title its own class (stack-title) instead of a bare <b> tag
   selector; stack-val keeps its existing class; the description
   becomes stack-desc instead of a bare <p> tag selector, since the
   surrounding .fix-card / .quad sections also use a plain <p> inside
   similarly named wrappers and a bare tag selector here would bleed
   into those. */

.aidhc .stack { border: 1px solid var(--aidhc-line); background: var(--aidhc-surface); }

.aidhc .stack-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem 1.5rem;
	padding: 1.15rem 1.35rem;
	border-bottom: 1px solid var(--aidhc-line);
	align-items: baseline;
}

.aidhc .stack-title { font-family: var(--aidhc-display); font-size: 1.02rem; letter-spacing: -0.01em; font-weight: 700; margin: 0; }
.aidhc .stack-desc { grid-column: 1 / -1; font-size: 0.92rem; color: var(--aidhc-ink-soft); margin: 0; }

.aidhc .stack-val {
	font-family: var(--aidhc-mono);
	font-size: 0.85rem;
	color: var(--aidhc-ink-faint);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.aidhc .stack-total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1.35rem;
	background: var(--aidhc-surface-2);
	border-bottom: 0;
}

.aidhc .stack-total-price { font-family: var(--aidhc-display); font-size: 1.55rem; letter-spacing: -0.02em; font-weight: 700; margin: 0; }

.aidhc .struck {
	text-decoration: line-through;
	color: var(--aidhc-ink-faint);
	font-family: var(--aidhc-mono);
	font-size: 0.9rem;
	margin: 0;
}

.aidhc .order-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.aidhc .order-cta .small { margin: 0; }

/* ---------- guarantee ---------- */

.aidhc .guarantee {
	border: 2px solid var(--aidhc-teal-deep);
	background: var(--aidhc-surface);
	border-radius: 16px;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.aidhc .guarantee h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }

/* ---------- tick lists ---------- */

/* "Who this is for" uses the real .lib-check-list (salmon circle,
   white check, DM Sans) unstyled here on purpose — see the .eyebrow
   note above. .ticks-negative is a genuinely new variant lib.css has
   no equivalent for (a disqualifying-criteria list), built as a
   minimal recolour of the same circle-bullet shape rather than a new
   bullet style, so it still reads as the same list system. */

/* lib.css's .lib-check-list li is display:flex (icon + text as two
   flex items). That's fine while an <li> holds one plain text node,
   but the moment it mixes <strong>lead</strong> + trailing text (as
   the checklist restored under the hero does), flex promotes the
   <strong> and the trailing text run into TWO SEPARATE flex items —
   each box-wraps on its own instead of flowing as one sentence,
   which is what produced the broken, column-split wrapping. Swap to
   the classic hanging-indent technique (block li, absolutely
   positioned ::before) so the text is one normal flow no matter how
   many inline tags it mixes. Same icon, same spacing, just a layout
   mechanism that doesn't split mixed inline content. */
.aidhc .lib-check-list li {
	display: block;
	position: relative;
	padding-left: 1.375rem;
}
.aidhc .lib-check-list li::before {
	position: absolute;
	left: 0;
	top: 0.5rem;
}
.aidhc .ticks-negative li::before {
	background: var(--aidhc-ink-faint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ---------- who it is for ---------- */

.aidhc .fit-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.aidhc .fit-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2.5rem; }
.aidhc .fit-col { display: flex; flex-direction: column; gap: 0.9rem; }
.aidhc .fit-col h3 { font-size: 1.1rem; }

/* ---------- faq ---------- */

.aidhc .faq { border-top: 1px solid var(--aidhc-line); }

/* The [tt_product_faqs] shortcode renders .tt-faq-accordion > details.faq-item
   > summary.faq-question. Style those, do not restyle the shortcode. */
.aidhc .faq details,
.aidhc .faq .faq-item { border-bottom: 1px solid var(--aidhc-line); }

.aidhc .faq summary,
.aidhc .faq .faq-question {
	cursor: pointer;
	padding: 1.1rem 2rem 1.1rem 0;
	font-family: var(--aidhc-display);
	font-weight: 600;
	font-size: 1.03rem;
	letter-spacing: -0.01em;
	list-style: none;
	position: relative;
}

.aidhc .faq summary::-webkit-details-marker { display: none; }

.aidhc .faq summary::after {
	content: "+";
	position: absolute;
	right: 0.2rem;
	top: 1rem;
	font-family: var(--aidhc-mono);
	font-weight: 400;
	color: var(--aidhc-teal-deep);
}

.aidhc .faq details[open] summary::after { content: "\2013"; }

.aidhc .faq details p,
.aidhc .faq .faq-answer p {
	padding: 0 0 1.2rem;
	color: var(--aidhc-ink-soft);
	font-size: 0.96rem;
}

.aidhc .faq details p + p,
.aidhc .faq .faq-answer p + p { margin-top: -0.4rem; }

/* ---------- close band ---------- */

.aidhc .close-band {
	background: var(--aidhc-ink);
	color: var(--aidhc-paper);
	padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
}

.aidhc .close-band h2 { color: var(--aidhc-paper); }
/* off-white at reduced alpha, to sit back from the white headings. */
.aidhc .close-band .lede { color: rgba(249, 249, 249, 0.76); }
/* lib-section-lead is a real global class (lib.css), default mid-grey —
   unreadable on this dark band. Same rgba(249,249,249,X) family the
   rest of .close-band's text already uses, at .lede's opacity since
   it plays the same lead-paragraph role here. */
.aidhc .close-band .lib-section-lead { color: rgba(249, 249, 249, 0.76); }
.aidhc .close-band .small { color: rgba(249, 249, 249, 0.7); }
.aidhc .close-band .cta-row .wp-block-button__link { background: var(--aidhc-coral); color: var(--wp--preset--color--deep-navy, #0A1E3F); }
.aidhc .close-band .cta-row .wp-block-button__link:hover { background: var(--aidhc-coral-hover); color: var(--wp--preset--color--deep-navy, #0A1E3F); }

/* ---------- TT5 seam / editor-visibility defensive rules ---------- */

/* Full-bleed band-to-band seam: this page's .band elements are not
   alignfull (the page is a fixed max-width reading column throughout,
   not edge-to-edge colour blocks), so the sitewide TT5 seam fix does
   not apply here. .band + .band already zeroes its own top padding
   above. Kept as a comment, not a rule, so a future editor does not
   wonder why it is missing. */

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.aidhc *,
	.aidhc *::before,
	.aidhc *::after {
		animation: none !important;
		transition: none !important;
	}
	.aidhc .fade-line { opacity: 1; }
}