/**
 * AI Audit — /ai/audit/  (page-ai-audit.php)
 *
 * Built from Figma YmLzL45Qaw4FJRduYrQQM1 node 94:2594 "Audit", a single
 * 1520x10844 desktop frame. Values come from get_design_context on each
 * section node, not from eyeballing the export — see the per-section
 * `Figma <node>` comments below for provenance.
 *
 * EVERY selector is scoped under .page-template-page-ai-audit. content.css
 * loads sitewide and defines unscoped .hero / .faq__* rules that would
 * otherwise collide; this is the same containment approach already used by
 * agentic-ai.css and ai-automation-agency.css.
 *
 * No Figma frame exists below 1520px in this file, so every breakpoint in
 * the RESPONSIVE section at the bottom is this build's own interpretation
 * and is NOT Figma-verified.
 */

.page-template-page-ai-audit {
	/* Palette — sampled from Figma node fills, not from the PNG. */
	--aud-bg: #020010;
	--aud-card: #0f0821;
	--aud-card-alt: #100a21;
	--aud-accent: #b96cff;
	--aud-eyebrow: #cab5ff;
	--aud-eyebrow-light: #9a60fb;
	--aud-body: rgba(255, 255, 255, 0.7);
	--aud-lede: #c7c1cc;
	--aud-lede-alt: #aab1c0;
	--aud-ink: #171717;
	--aud-ink-soft: #28262d;

	/* Panel skin shared by the two CTA panels (94:2741, 94:3192) and the
	   Humans / AI Agents cards (94:2766, 94:2791). */
	--aud-panel-bg: linear-gradient(180deg, rgba(19, 12, 35, 0.92) 0%, rgba(12, 8, 25, 0.94) 100%);
	--aud-panel-border: rgba(120, 82, 186, 0.5);
	--aud-panel-shadow: 0 18px 55px 0 rgba(0, 0, 0, 0.24);

	background-color: var(--aud-bg);
}

.page-template-page-ai-audit .aud-page {
	overflow-x: clip;
	background-color: var(--aud-bg);
}

/* Figma frame 1520 with 40px inner padding => 1440 content. */
.page-template-page-ai-audit .aud-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
}

/* ---------------------------------------------------------------- shared */

/* Eyebrow — Figma 94:2677 / 94:2705 / 94:2745. */
.page-template-page-ai-audit .aud-eyebrow {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.19;
	letter-spacing: 2.86px;
	text-transform: uppercase;
	color: var(--aud-eyebrow);
}

/* Light-section eyebrow — Figma 94:2762. */
.page-template-page-ai-audit .aud-eyebrow--light {
	color: var(--aud-eyebrow-light);
}

/**
 * Figma is inconsistent about whether an eyebrow's text box is trimmed:
 * 94:2705 and 94:3157 measure 14px tall (untrimmed, the default above),
 * but 94:2933 and 94:2983 measure 8px and 9px — trimmed to cap height.
 * That is not cosmetic: it lifts everything below them by ~6px, which is
 * exactly what the "What you get" and "Readiness report" sections do in
 * the export. This modifier reproduces the trimmed variant.
 */
.page-template-page-ai-audit .aud-eyebrow--trim {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/**
 * Section H2 — Figma 94:2706: Gelasio Regular 76px, literal 78.34px
 * line-height (NOT a multiplier), letter-spacing -3.46px.
 */
.page-template-page-ai-audit .aud-h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 76px;
	line-height: 78.34px;
	letter-spacing: -3.46px;
	text-align: center;
	color: var(--color-text-light);
}

.page-template-page-ai-audit .aud-h2--left {
	text-align: left;
}

/* Figma 94:2640 — same size, tighter tracking. */
.page-template-page-ai-audit .aud-h2--tight {
	line-height: 78.3px;
	letter-spacing: -5px;
}

/* Figma 94:2746 / 94:3197 — the two CTA panels drop to 70/70. */
.page-template-page-ai-audit .aud-h2--70 {
	font-size: 70px;
	line-height: 70px;
	letter-spacing: -3.15px;
}

.page-template-page-ai-audit .aud-h2--dark {
	color: var(--aud-ink-soft);
}

.page-template-page-ai-audit .aud-accent {
	color: var(--aud-accent);
}

/* Section header block — Figma 94:2704: 20px gap, centred. */
.page-template-page-ai-audit .aud-sectionhead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

/* Shared CTA panel — Figma 94:2741 and 94:3192.
   NOTE the asymmetric radius: Figma rounds top-left, top-right and
   bottom-left to 22px and leaves BOTTOM-RIGHT SQUARE. Verified against the
   1:1 export (e2e-tests/figma-reference/ai-audit/x-corner-br.png) before
   being written here — it is deliberate, not a mistake. */
.page-template-page-ai-audit .aud-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 65px;
	border: 1px solid var(--aud-panel-border);
	border-radius: 22px 22px 0 22px;
	background-image: var(--aud-panel-bg);
	box-shadow: var(--aud-panel-shadow), inset 0 1px 0 0 rgba(255, 255, 255, 0.02);
}

/* Figma paints a soft purple radial from the upper-left of each panel. */
.page-template-page-ai-audit .aud-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(60% 62% at 13% 9%, rgba(185, 108, 255, 0.2) 0%, rgba(185, 108, 255, 0) 49%);
	pointer-events: none;
}

.page-template-page-ai-audit .aud-panel > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------- URL capture form (x3) */
/* Figma 94:2681 (hero), 94:2749 (mid), 94:2832 (final). */

.page-template-page-ai-audit .aud-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	flex-wrap: wrap;
}

.page-template-page-ai-audit .aud-form__input {
	flex: 1 0 0;
	min-width: 0;
	height: 64px;
	margin: 0;
	padding: 25px 18px;
	border: 0;
	border-radius: 0;
	background: #fff;
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 27px;
	color: var(--aud-ink);
	appearance: none;
}

.page-template-page-ai-audit .aud-form__input::placeholder {
	color: rgba(23, 23, 23, 0.48);
	opacity: 1;
}

/* Figma 94:2682 — only the hero field carries a purple border. */
.page-template-page-ai-audit .aud-form--hero .aud-form__input {
	border: 1px solid #7605f5;
}

/* Figma 94:2835 — the final CTA's placeholder is DM Sans at 30% ink. */
.page-template-page-ai-audit .aud-form--final .aud-form__input::placeholder {
	font-family: var(--font-mono-label);
	color: rgba(23, 23, 23, 0.3);
}

.page-template-page-ai-audit .aud-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 64px;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background: var(--color-cta-bg);
	color: var(--color-cta-text);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.page-template-page-ai-audit .aud-form__submit:hover,
.page-template-page-ai-audit .aud-form__submit:focus-visible {
	background: #ffef52;
}

/* Figma 94:2686 — Roboto SemiBold 19px with trimmed text box. */
.page-template-page-ai-audit .aud-form__submit-text {
	font-family: var(--font-roboto);
	font-weight: 600;
	font-size: 19px;
	line-height: normal;
	color: var(--color-cta-text);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/**
 * Figma 94:2687 — a 10x17.508 chevron rotated 90deg to point right, sitting
 * in a 17.508x10 box. The box is what the 6px flex gap measures against;
 * without it the rotated image still occupies a 10px-wide layout slot and
 * the arrow crowds the label.
 */
.page-template-page-ai-audit .aud-form__submit-arrowbox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17.508px;
	height: 10px;
	flex: none;
}

.page-template-page-ai-audit .aud-form__submit-arrow {
	display: block;
	width: 10px;
	height: 17.508px;
	max-width: none;
	transform: rotate(90deg);
}

.page-template-page-ai-audit .aud-form__error {
	flex: 1 0 100%;
	margin: 10px 0 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 1.4;
	color: #ff9d9d;
	text-align: left;
}

/* Hero form is 1000px wide inside its shell; mid/final are narrower. */
.page-template-page-ai-audit .aud-form--hero {
	gap: 16px;
}

.page-template-page-ai-audit .aud-form--hero .aud-form__submit {
	width: 256px;
	padding-inline: 20px;
}

.page-template-page-ai-audit .aud-form--mid {
	max-width: 744px;
}

.page-template-page-ai-audit .aud-form--mid .aud-form__input {
	flex: 0 1 506px;
	padding-inline: 24px;
}

.page-template-page-ai-audit .aud-form--mid .aud-form__submit {
	padding-inline: 28px;
}

.page-template-page-ai-audit .aud-form--final {
	max-width: 700px;
}

/* ===================================================== 1. HERO (94:2596) */

/* The blue-black floor the (image-occluded) hero ellipses leave behind —
   measured off the export at frame x20-300, y150-650. */
.page-template-page-ai-audit .aud-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #050413;
}

/**
 * Figma 94:2610 "bg1 1" is 1672x941 placed at x=-46 inside the 1520 frame
 * and vertically overhanging its 707px mask by 35px — so it is NOT a
 * `cover` fit. Those exact proportions are reproduced here (110.03% width,
 * -3.03% left) instead of being approximated with object-fit.
 */
.page-template-page-ai-audit .aud-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	overflow: hidden;
}

/**
 * The plate is heavily knocked back in Figma — it is not the raw asset at
 * full strength. Measured off the 1:1 export against the source PNG over
 * two sample windows (frame x1150-1500 and x20-300, y150-650): Figma reads
 * (15.0,10.8,25.3) and (5.6,4.5,20.3) where the raw file reads
 * (29.4,12.2,67.4) and (1.3,0.3,14.0). Solving those two points gives a
 * per-channel affine map with very different slopes per channel, which no
 * combination of CSS brightness()/saturate() can express — hence the
 * #aud-hero-grade feComponentTransfer defined in page-ai-audit.php.
 */
.page-template-page-ai-audit .aud-hero__bg img {
	position: absolute;
	top: -35px;
	left: -3.026%;
	width: 110.026%;
	height: auto;
	max-width: none;
	filter: url("#aud-hero-grade");
}

.page-template-page-ai-audit .aud-svgdefs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/**
 * Figma 94:2602/94:2603/94:2606/94:2607 are large blurred ellipses that sit
 * BEHIND the image plate in the 94:2596 mask group, so they contribute
 * almost nothing to the visible hero. They are deliberately not painted on
 * top here — doing so made the right-hand side read 3x too bright against
 * the export. The blue-black floor they leave behind is the .aud-hero fill
 * set above.
 */

/* Hero content stack — Figma y-offsets 186/217/394/484/604 inside the
   frame, i.e. 94px below the 92px hero top and 100px above its 721px end. */
.page-template-page-ai-audit .aud-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: 94px var(--container-padding-inline) 100px;
	text-align: center;
}

.page-template-page-ai-audit .aud-hero__heading {
	margin: 16px 0 0;
	max-width: 691px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 76px;
	line-height: 78.34px;
	letter-spacing: -3.46px;
	color: var(--color-text-light);
}

.page-template-page-ai-audit .aud-hero__sub {
	margin: 20px 0 0;
	max-width: 655px;
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 28.8px;
	color: var(--aud-lede);
}

/* Figma 94:2680 — 1032x96 shell, 12px radius, translucent, purple border. */
.page-template-page-ai-audit .aud-hero__formshell {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1032px;
	margin-top: 32px;
	padding: 16px;
	border: 1px solid #53307a;
	border-radius: 12px;
	background: rgba(6, 3, 26, 0.8);
}

/* Figma 94:2688 — 24px gap row of four ticked assurances. */
.page-template-page-ai-audit .aud-hero__checks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.page-template-page-ai-audit .aud-hero__check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	color: rgba(255, 255, 255, 0.7);
}

.page-template-page-ai-audit .aud-hero__check img {
	display: block;
	width: 13.284px;
	height: 9.429px;
	flex: none;
}

/* ======================================== 2. SEO/AEO/GEO STRIP (94:2613) */

.page-template-page-ai-audit .aud-signals {
	padding: 24px 80px;
	background: #100c19;
}

.page-template-page-ai-audit .aud-signals__inner {
	display: flex;
	align-items: stretch;
	gap: 35px;
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

.page-template-page-ai-audit .aud-signals__item {
	flex: 1 0 0;
	min-width: 0;
	padding: 28px 0 28px 32px;
}

/* Figma 94:2621/94:2626 — rule between columns only, not before the first. */
.page-template-page-ai-audit .aud-signals__item + .aud-signals__item {
	border-left: 1px solid rgba(160, 100, 255, 0.3);
}

.page-template-page-ai-audit .aud-signals__label {
	margin: 0 0 8px;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 12px;
	line-height: 13px;
	letter-spacing: 1.86px;
	text-transform: uppercase;
	color: var(--aud-eyebrow);
}

/**
 * Figma 94:2620 declares a 251px box and breaks this copy over two lines.
 * The browser measures its first line ("Of Gen Z consumers use social
 * media") at 251.1px — 0.1px wider than Figma's own text engine does — so a
 * literal 251px here wraps to three lines and makes the strip 21px taller
 * than the design. 252px preserves the design's two-line break, which is
 * the thing the 251px was expressing.
 */
.page-template-page-ai-audit .aud-signals__copy {
	margin: 0;
	max-width: 252px;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 21px;
	color: var(--aud-body);
}

/* ============================ 3. + 10. NUMBERED CARD GRID (94:2707/3159) */

.page-template-page-ai-audit .aud-shift,
.page-template-page-ai-audit .aud-act {
	padding: 120px 0;
	background: var(--aud-bg);
}

/* Figma 94:2703 — 48px between the section header and the card row. */
.page-template-page-ai-audit .aud-numcards {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-top: 48px;
}

/* Figma 94:2708 — 12px radius, 20/16/40/20 padding, 40px internal gap. */
.page-template-page-ai-audit .aud-numcard {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 20px 16px 40px 20px;
	border: 1px solid rgba(185, 108, 255, 0.32);
	border-radius: 12px;
	background: var(--aud-card);
	overflow: hidden;
}

.page-template-page-ai-audit .aud-numcard__tag {
	align-self: flex-start;
	margin: 0;
	padding: 5px 8px;
	border: 1px solid rgba(185, 108, 255, 0.2);
	border-radius: 4px;
	background: rgba(185, 108, 255, 0.04);
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 11px;
	line-height: 16.128px;
	letter-spacing: 1.1088px;
	text-transform: uppercase;
	color: var(--aud-accent);
}

.page-template-page-ai-audit .aud-numcard__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Figma 94:2712 — Roboto Bold 22px. */
.page-template-page-ai-audit .aud-numcard__title {
	margin: 0;
	font-family: var(--font-roboto);
	font-weight: 700;
	font-size: 22px;
	line-height: normal;
	color: var(--color-text-light);
}

.page-template-page-ai-audit .aud-numcard__copy {
	margin: 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 24px;
	color: var(--aud-body);
}

/* Figma 94:2714 — 88px ghost numeral at 4% accent, tracking -8.8px. */
.page-template-page-ai-audit .aud-numcard__num {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 88px;
	line-height: normal;
	letter-spacing: -8.8px;
	color: rgba(185, 108, 255, 0.04);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ======================================== 4. WHAT YOU MAY NOT SEE (2631) */

.page-template-page-ai-audit .aud-gaps {
	padding: 120px 0;
	background: var(--aud-bg);
}

.page-template-page-ai-audit .aud-gaps__inner {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.page-template-page-ai-audit .aud-gaps__intro {
	flex: 0 0 486px;
	max-width: 486px;
}

.page-template-page-ai-audit .aud-gaps__intro .aud-h2 {
	margin-top: 20px;
}

.page-template-page-ai-audit .aud-gaps__lede {
	margin: 32px 0 0;
	max-width: 590px;
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 28.8px;
	color: var(--aud-lede);
}

/* Figma 94:2644 — wrapping 16px-gap row of 429px cards (2 per row). */
.page-template-page-ai-audit .aud-gaps__grid {
	display: grid;
	flex: 1 0 0;
	min-width: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Figma 94:2645 — 20px radius, 32px padding, 200px tall. */
.page-template-page-ai-audit .aud-gapcard {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 200px;
	padding: 32px;
	border: 1px solid rgba(168, 114, 216, 0.3);
	border-radius: 20px;
	background: var(--aud-card-alt);
}

.page-template-page-ai-audit .aud-gapcard__dash {
	display: block;
	width: 34.891px;
	height: 3.063px;
	flex: none;
	background: var(--aud-accent);
}

.page-template-page-ai-audit .aud-gapcard__title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 22px;
	line-height: normal;
	color: var(--color-text-light);
}

.page-template-page-ai-audit .aud-gapcard__copy {
	margin: 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 24px;
	color: var(--aud-body);
}

/* ================================== 5. FIND YOUR VISIBILITY GAPS (2736) */

/**
 * Figma: section spans 2460-3187 with the panel at 2556-3083. Nodes
 * 94:2739/94:2740 are the same pair of "Yellow" ellipses used in the
 * "What you get" section; measured at y=3180 the band peaks near #1e121 9
 * around x=1070-1220 against the page black.
 */
.page-template-page-ai-audit .aud-ctamid {
	position: relative;
	padding: 96px 0 104px;
	background: var(--aud-bg);
}

.page-template-page-ai-audit .aud-ctamid::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(72% 56% at 76% 100%, rgba(96, 54, 38, 0.3) 0%, rgba(96, 54, 38, 0) 70%);
	pointer-events: none;
}

.page-template-page-ai-audit .aud-ctamid > * {
	position: relative;
	z-index: 1;
}

.page-template-page-ai-audit .aud-panel--mid .aud-h2 {
	margin-top: 20px;
	max-width: 900px;
}

.page-template-page-ai-audit .aud-ctamid__lede {
	margin: 25px 0 0;
	max-width: 480px;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 28px;
	text-align: center;
	color: var(--aud-lede-alt);
}

.page-template-page-ai-audit .aud-panel--mid .aud-form {
	justify-content: center;
	margin-top: 28px;
}

.page-template-page-ai-audit .aud-ctamid__note {
	margin: 20px 0 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	color: var(--aud-lede-alt);
}

.page-template-page-ai-audit .aud-ctamid__note-em {
	font-weight: 500;
	color: var(--color-cta-bg);
}

/* ==================================== 6. TWO VISITORS NOW — light (2757) */

.page-template-page-ai-audit .aud-visitors {
	padding: 120px 0;
	background: #faf9fc;
}

.page-template-page-ai-audit .aud-visitors__inner {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.page-template-page-ai-audit .aud-visitors__intro {
	flex: 1 0 0;
	min-width: 0;
}

/* Figma 94:2763 — 76px Gelasio with its own 76.44/-4.29 metrics. */
.page-template-page-ai-audit .aud-visitors__intro .aud-h2 {
	margin-top: 20px;
	line-height: 76.44px;
	letter-spacing: -4.29px;
}

.page-template-page-ai-audit .aud-visitors__lede {
	margin: 32px 0 0;
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 32px;
	color: #625f67;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-visitors__cards {
	display: flex;
	gap: 32px;
	flex: 0 0 870px;
	max-width: 870px;
}

/* Figma 94:2766 — dark card on the light section, 22px radius, 25px pad,
   fixed 344px height. */
.page-template-page-ai-audit .aud-vcard {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 344px;
	padding: 25px;
	border: 1px solid var(--aud-panel-border);
	border-radius: 22px;
	background-image: var(--aud-panel-bg);
	box-shadow: var(--aud-panel-shadow), inset 0 1px 0 0 rgba(255, 255, 255, 0.02);
}

.page-template-page-ai-audit .aud-vcard::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(62% 48% at 20% 15%, rgba(96, 52, 164, 0.12) 0%, rgba(96, 52, 164, 0) 32%);
	pointer-events: none;
}

.page-template-page-ai-audit .aud-vcard > * {
	position: relative;
	z-index: 1;
}

.page-template-page-ai-audit .aud-vcard__head {
	display: flex;
	align-items: center;
	gap: 22px;
}

/* Figma 94:2768 — 56px circle, 36px radius, purple wash + inset ring. */
.page-template-page-ai-audit .aud-vcard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: none;
	border: 1px solid rgba(179, 119, 255, 0.54);
	border-radius: 36px;
	background-image:
		radial-gradient(58% 58% at 50% 36%, rgba(143, 86, 255, 0.3) 0%, rgba(143, 86, 255, 0) 58%),
		linear-gradient(90deg, rgba(74, 35, 133, 0.28) 0%, rgba(74, 35, 133, 0.28) 100%);
	box-shadow: inset 0 0 0 1.556px rgba(153, 103, 255, 0.12);
}

.page-template-page-ai-audit .aud-vcard__icon img {
	display: block;
}

/* Figma 94:2777 — Gelasio 40px, literal 49.15px leading. */
.page-template-page-ai-audit .aud-vcard__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 49.15px;
	letter-spacing: -1.72px;
	color: var(--color-text-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-vcard__copy {
	margin: 0 0 8px;
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 30px;
	color: #e6e8f4;
}

/* Figma 94:2780 — 1px gradient divider. */
.page-template-page-ai-audit .aud-vcard__rule {
	height: 1px;
	margin: 0;
	border: 0;
	background: linear-gradient(90deg, rgba(132, 91, 202, 0.2) 0%, rgba(132, 91, 202, 0.1) 100%);
}

.page-template-page-ai-audit .aud-vcard__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
}

.page-template-page-ai-audit .aud-vcard__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 24.3px;
	color: var(--color-text-light);
}

.page-template-page-ai-audit .aud-vcard__tick {
	flex: none;
	font-size: 18px;
	line-height: 24.3px;
	color: var(--aud-accent);
}

/* ========================================= 7. WHAT WE CHECK — light (2841) */

.page-template-page-ai-audit .aud-check {
	padding: 120px 0;
	background: #fff;
}

.page-template-page-ai-audit .aud-check .aud-sectionhead .aud-h2 {
	max-width: 910px;
}

/* Figma 94:2846 — three 1003px rows, each linked by a 20px connector. */
.page-template-page-ai-audit .aud-tiers {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 48px;
}

.page-template-page-ai-audit .aud-tier {
	display: flex;
	align-items: flex-start;
	gap: 62px;
	width: 100%;
	max-width: 1003px;
	padding: 32px 64px;
	border: 1px solid #e0dbe5;
	border-radius: 20px;
	background: #f9f7fb;
}

/* Figma 94:2872 — a 20px vertical hairline centred in the 70px gap between
   consecutive tier rows (rows start at y=0, 237 and 474; each is 167 tall). */
.page-template-page-ai-audit .aud-tier__connector {
	display: block;
	width: 1.5px;
	height: 20px;
	margin: 25px 0;
	background: #b39ae8;
}

/* Figma 94:2850 — DM Sans Black 13px. */
.page-template-page-ai-audit .aud-tier__label {
	flex: none;
	width: 58px;
	margin: 0;
	font-family: var(--font-mono-label);
	font-weight: 900;
	font-size: 13px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--aud-eyebrow-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-tier__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 0 0;
	min-width: 0;
}

/* Figma 94:2852 — Inter ExtraBold 22px. */
.page-template-page-ai-audit .aud-tier__title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 800;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.044px;
	color: var(--aud-ink);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-tier__copy {
	margin: 0;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 23px;
	color: var(--aud-ink);
	opacity: 0.72;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-tier__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Figma 94:2855 — 20px radius pill on an 8% accent wash. */
.page-template-page-ai-audit .aud-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 20px;
	border-radius: 20px;
	background: rgba(154, 96, 251, 0.08);
}

.page-template-page-ai-audit .aud-pill img {
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
}

.page-template-page-ai-audit .aud-pill span {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 24px;
	color: var(--aud-ink-soft);
	opacity: 0.8;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* ============================================= 8. WHAT YOU GET (94:2925) */

/**
 * Figma 94:2929/94:2930 — two 1125x982 "Yellow" ellipses laid across the
 * lower half of this section. Measured off the export at y=5400..5515 the
 * band ramps from #020010 on the left to a peak of about #180d19 around
 * x=1070-1220, i.e. a warm (+22,+13,+9) lift over the page black.
 */
.page-template-page-ai-audit .aud-get {
	position: relative;
	padding: 120px 0;
	background: var(--aud-bg);
}

.page-template-page-ai-audit .aud-get::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(74% 58% at 76% 96%, rgba(92, 50, 34, 0.26) 0%, rgba(92, 50, 34, 0) 72%);
	pointer-events: none;
}

.page-template-page-ai-audit .aud-get > * {
	position: relative;
	z-index: 1;
}

.page-template-page-ai-audit .aud-get .aud-sectionhead .aud-h2 {
	max-width: 862px;
}

/* Figma 94:2936 — 15px gap, four equal white cards. */
.page-template-page-ai-audit .aud-getcards {
	display: flex;
	align-items: stretch;
	gap: 15px;
	margin-top: 48px;
}

.page-template-page-ai-audit .aud-getcard {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 235px;
	padding: 22px 20px 20px 22px;
	border: 1px solid rgba(185, 108, 255, 0.3);
	border-radius: 16px;
	background: #fefefe;
}

/* Figma 94:2940 — 58px tile, 12px radius, #eee3fb. */
.page-template-page-ai-audit .aud-getcard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	flex: none;
	border-radius: 12px;
	background: #eee3fb;
}

.page-template-page-ai-audit .aud-getcard__icon img {
	display: block;
}

.page-template-page-ai-audit .aud-getcard__title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 22px;
	line-height: 40px;
	letter-spacing: -1px;
	color: var(--aud-ink);
}

.page-template-page-ai-audit .aud-getcard__copy {
	margin: -16px 0 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 32px;
	color: rgba(23, 23, 23, 0.72);
}

/* ======================================= 9. READINESS REPORT (94:2977) */

/**
 * Figma 94:2980 — a 533x538 ellipse centred at roughly (1566, 5558), i.e.
 * mostly off the right edge at the very top of the section. Measured at
 * y=5530-5560 the far right reads #100a28 against the #020010 page black.
 */
.page-template-page-ai-audit .aud-report {
	position: relative;
	padding: 120px 0;
	background: var(--aud-bg);
}

.page-template-page-ai-audit .aud-report::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(30% 34% at 103% 3%, rgba(116, 83, 200, 0.32) 0%, rgba(116, 83, 200, 0) 74%);
	pointer-events: none;
}

.page-template-page-ai-audit .aud-report > * {
	position: relative;
	z-index: 1;
}

.page-template-page-ai-audit .aud-report .aud-sectionhead .aud-h2 {
	max-width: 856px;
}

/* Figma 94:3048 — 1157px card, purple rim, cream inner 94:3049. */
.page-template-page-ai-audit .aud-rep {
	width: 100%;
	max-width: 1157px;
	margin: 48px auto 0;
	padding: 20px;
	border: 1px solid rgba(157, 92, 245, 0.65);
	border-radius: 24px;
	background: #140f32;
}

/**
 * Figma 94:3049 is 1116x555 inside the 1157x595 shell, and its content
 * block 94:3051 runs y=45..546 within the card — i.e. 25px above and 29px
 * below inside the cream, with the three stacked panels 20px apart and the
 * content column inset 50px each side (1116 - 1016 = 100).
 */
.page-template-page-ai-audit .aud-rep__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 25px 50px 29px;
	border-radius: 16px;
	background: #fbf9f6;
}

/* --- top panel: score gauge + three tier bars (Figma 94:3052) --- */

/* Figma 94:3052 — 209.33px tall; the 152px score block sits 30.65px from
   its top, leaving ~25px beneath. */
.page-template-page-ai-audit .aud-rep__top {
	display: flex;
	align-items: center;
	gap: 50px;
	padding: 30px 30px 25px;
	border-radius: 10px;
	background: #fff;
}

.page-template-page-ai-audit .aud-rep__score {
	flex: none;
	width: 170px;
	text-align: center;
}

.page-template-page-ai-audit .aud-rep__gauge {
	position: relative;
	width: 170px;
	height: 128px;
}

.page-template-page-ai-audit .aud-rep__gauge img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Figma 94:3059 — 42px bold score with a 22px 50%-ink denominator. */
.page-template-page-ai-audit .aud-rep__num {
	position: absolute;
	left: 0;
	right: 0;
	top: 36px;
	margin: 0;
	font-family: var(--font-base);
	letter-spacing: -2.1px;
	color: var(--aud-ink);
}

.page-template-page-ai-audit .aud-rep__num strong {
	font-weight: 700;
	font-size: 42px;
}

.page-template-page-ai-audit .aud-rep__num span {
	font-weight: 400;
	font-size: 22px;
	color: rgba(23, 23, 23, 0.5);
}

/* Figma 94:3056 — Roboto Medium 13px. */
.page-template-page-ai-audit .aud-rep__scorelabel {
	margin: -32px 0 0;
	font-family: var(--font-roboto);
	font-weight: 500;
	font-size: 13px;
	line-height: 22px;
	color: rgba(23, 23, 23, 0.7);
}

/* Figma 94:3061 — 50px-radius purple chip. */
.page-template-page-ai-audit .aud-rep__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 6px 14px;
	border-radius: 50px;
	background: rgba(118, 5, 245, 0.1);
	font-family: var(--font-mono-label);
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
	color: #7605f5;
}

.page-template-page-ai-audit .aud-rep__badge img {
	display: block;
	flex: none;
}

.page-template-page-ai-audit .aud-rep__bars {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-template-page-ai-audit .aud-rep__barrow {
	display: grid;
	grid-template-columns: 28px minmax(84px, max-content) minmax(0, 440px) 1fr;
	align-items: center;
	gap: 12px;
}

/* Figma 94:3080 etc — 28px rounded status tiles behind each row icon. */
.page-template-page-ai-audit .aud-rep__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28.227px;
	height: 28.227px;
	flex: none;
	border-radius: 5px;
}

.page-template-page-ai-audit .aud-rep__ico img {
	display: block;
}

.page-template-page-ai-audit .aud-rep__ico--green { background: #e8f4e6; }
.page-template-page-ai-audit .aud-rep__ico--amber { background: #fcebd5; }
.page-template-page-ai-audit .aud-rep__ico--blue  { background: #eceefa; }
.page-template-page-ai-audit .aud-rep__ico--red   { background: #fdebeb; }

.page-template-page-ai-audit .aud-rep__barname,
.page-template-page-ai-audit .aud-rep__rowname {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--aud-ink);
	white-space: nowrap;
}

.page-template-page-ai-audit .aud-rep__track {
	display: block;
	width: 100%;
	height: 10px;
	border-radius: 10px;
	background: #eae5e9;
	overflow: hidden;
}

.page-template-page-ai-audit .aud-rep__fill {
	display: block;
	height: 100%;
	border-radius: 10px;
}

.page-template-page-ai-audit .aud-rep__bar--green { background: #086607; }
.page-template-page-ai-audit .aud-rep__bar--amber { background: #864c01; }
.page-template-page-ai-audit .aud-rep__bar--blue  { background: #0a4095; }

.page-template-page-ai-audit .aud-rep__barstatus {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: #5c5b5a;
}

/* --- the two check columns (Figma 94:3053 / 94:3054) --- */

.page-template-page-ai-audit .aud-rep__cols {
	display: flex;
	gap: 19px;
}

/* Figma 94:3053/94:3054 — 183.97px tall for three 57px rows. */
.page-template-page-ai-audit .aud-rep__col {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	padding: 6.5px 20px;
	list-style: none;
	border-radius: 10px;
	background: #fff;
}

.page-template-page-ai-audit .aud-rep__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 57px;
}

.page-template-page-ai-audit .aud-rep__row + .aud-rep__row {
	border-top: 1px solid #efedee;
}

.page-template-page-ai-audit .aud-rep__row--more {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--aud-ink);
}

.page-template-page-ai-audit .aud-rep__rowname {
	flex: 1 0 0;
	min-width: 0;
}

/* Figma 94:3104 etc — 22px status chips. */
.page-template-page-ai-audit .aud-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	flex: none;
	padding: 0 10px;
	border-radius: 5px;
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2;
}

.page-template-page-ai-audit .aud-chip--green { background: #e8f4e6; color: #086607; }
.page-template-page-ai-audit .aud-chip--amber { background: #fcebd5; color: #864c01; }
.page-template-page-ai-audit .aud-chip--red   { background: rgba(226, 46, 46, 0.1); color: #e22e2e; }

/* --- footer strip (Figma 94:3142) --- */

/* Figma 94:3142 — 67.93px tall, so the 48px button sets the height with
   10px of breathing room, not 14px. */
.page-template-page-ai-audit .aud-rep__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 68px;
	padding: 10px 10px 10px 15px;
	border-radius: 10px;
	background: rgba(118, 5, 245, 0.05);
}

.page-template-page-ai-audit .aud-rep__footicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 39.3px;
	height: 39.84px;
	flex: none;
	border-radius: 5.865px;
	background: rgba(118, 5, 245, 0.1);
}

.page-template-page-ai-audit .aud-rep__footicon img {
	display: block;
}

.page-template-page-ai-audit .aud-rep__foottext {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	font-family: var(--font-mono-label);
	font-size: 15px;
	line-height: 27px;
	color: var(--aud-ink);
}

/* Figma 94:3148 — 201x48 translucent button with a purple glow. */
.page-template-page-ai-audit .aud-rep__footbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 201px;
	height: 48px;
	flex: none;
	padding: 14px 20px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 24px 0 rgba(118, 5, 245, 0.2);
}

.page-template-page-ai-audit .aud-rep__footbtn img {
	display: block;
	flex: none;
}

.page-template-page-ai-audit .aud-rep__footbtn span {
	font-family: var(--font-roboto);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	color: #7605f5;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* ========================================= 11. YOUR NEXT STEPS (94:3188) */

/* Figma: section 7289-7831, panel 7410-7830 — 121px lead-in, flush bottom. */
.page-template-page-ai-audit .aud-next {
	padding: 121px 0 0;
	background: var(--aud-bg);
}

.page-template-page-ai-audit .aud-panel--next .aud-h2 {
	margin-top: 32px;
	max-width: 955px;
}

/* Figma 94:3198 — Gelasio ITALIC 60px in accent purple. */
.page-template-page-ai-audit .aud-next__em {
	margin: 32px 0 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: 60px;
	line-height: 70px;
	letter-spacing: -3.15px;
	text-align: center;
	color: var(--aud-accent);
}

/* ==================================================== 12. FAQ (94:2813) */

/**
 * Restyles the sitewide .faq component (content.css) to this design's
 * values. The markup contract and js/faq-accordion.js are untouched.
 */
.page-template-page-ai-audit .aud-faq {
	position: relative;
	padding: 120px 0;
	background: var(--aud-bg);
	background-image: none;
}

/* Figma 94:2816 — a 538px purple glow low on the left edge. */
.page-template-page-ai-audit .aud-faq::before {
	content: "";
	position: absolute;
	left: -300px;
	top: 277px;
	width: 538px;
	height: 538px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(110, 52, 186, 0.28) 0%, rgba(110, 52, 186, 0) 68%);
	pointer-events: none;
}

/* Figma 94:2819 — the accordion itself is 900px wide, so the container has
   to be 900 PLUS its own gutters or the answers rewrap. */
.page-template-page-ai-audit .aud-faq .faq__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(900px + (var(--container-padding-inline) * 2));
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
}

/* Figma 94:2818 — Inter Bold 64px, tracking -3.46px. */
.page-template-page-ai-audit .aud-faq .faq__heading {
	margin: 0 0 40px;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 64px;
	line-height: 64px;
	letter-spacing: -3.46px;
	text-align: center;
	color: #f7f7f8;
}

/**
 * Figma 94:1841 — 23px of padding at the top and bottom of the item, an
 * 18px gap between the question and its answer, and a 26px question box.
 * The padding lives on the item (not the trigger) so the 18px gap is not
 * double-counted when an item is open.
 */
.page-template-page-ai-audit .aud-faq .faq__item {
	padding: 23px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	background: none;
}

.page-template-page-ai-audit .aud-faq .faq__question {
	margin: 0;
}

.page-template-page-ai-audit .aud-faq .faq__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 17px;
	line-height: 26px;
	text-align: left;
	color: var(--color-text-light);
	cursor: pointer;
}

/* Figma 94:1846 — a DM Sans +/- glyph in #bd9cff. The sitewide component
   draws it with two pseudo bars; they are recoloured and resized here
   rather than swapped for a text glyph, so the existing JS keeps working. */
.page-template-page-ai-audit .aud-faq .faq__icon {
	position: relative;
	width: 14px;
	height: 14px;
	flex: none;
	margin-top: 4px;
}

.page-template-page-ai-audit .aud-faq .faq__icon::before,
.page-template-page-ai-audit .aud-faq .faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 1.6px;
	background: #bd9cff;
	transform: translateY(-50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-template-page-ai-audit .aud-faq .faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.page-template-page-ai-audit .aud-faq .faq__trigger[aria-expanded="true"] .faq__icon::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.page-template-page-ai-audit .aud-faq .faq__answer {
	padding: 18px 0 0;
}

/* content.css gives .faq__answer p a 24px bottom padding for the sitewide
   FAQ; Figma 94:1921 has none, so it is reset rather than left to inflate
   the open item by 24px. */
.page-template-page-ai-audit .aud-faq .faq__answer p {
	margin: 0;
	padding: 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 28px;
	color: var(--aud-lede-alt);
}

.page-template-page-ai-audit .aud-faq__placeholder {
	color: rgba(170, 177, 192, 0.75);
}

/* ============================================== 13. FINAL CTA (94:2820) */

/* Figma: the section sits on white; only the inner card is dark. */
.page-template-page-ai-audit .aud-final {
	padding: 127px 0 74px;
	background: #fff;
}

/**
 * Figma 94:2824 ("Rectangle 9071", 1265x591) is a backdrop shape, NOT the
 * visible card: scanning the 1:1 export down the card's centre shows white
 * page background until y=9061 and again from y=9611, so what actually
 * renders is the 1265x549 image node 94:2825. Sizing the card to 591 made
 * `cover` crop 91px off each side of the plane instead of 40 and was the
 * single biggest diff on the page (12.2%).
 *
 * Corners are SQUARE here — verified against the export
 * (x-final-tl.png / x-final-br.png).
 */
.page-template-page-ai-audit .aud-final__card {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1265px;
	min-height: 549px;
	margin-inline: auto;
	padding: 101px 40px 76px;
	overflow: hidden;
	background: #0b0416;
}

.page-template-page-ai-audit .aud-final__scene {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

/**
 * `cover` on the 2823x1152 source in a 1265x549 box scales to 1345.3 wide,
 * so 80.3px is cropped horizontally. Figma does not split that evenly:
 * cross-correlating the plane region against the 1:1 export puts our crop
 * 4px to the LEFT of Figma's, i.e. 36.15px off the left edge rather than
 * 40.15 — which is 45% of the overflow, not 50%.
 */
.page-template-page-ai-audit .aud-final__scene img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% center;
}

.page-template-page-ai-audit .aud-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 700px;
	text-align: center;
}

/**
 * Figma 94:2829 — Inter BLACK 63px on a literal 71px leading, in a box
 * Figma states explicitly as 132px tall. The browser's own cap-height trim
 * lands at 116.8px for the same two lines, which pulled everything below
 * the heading 15px up. The 15.2px difference is added as padding rather
 * than by forcing height:132px, so that a browser without text-box-trim
 * support degrades by pushing the lede DOWN rather than by overlapping it.
 */
.page-template-page-ai-audit .aud-final__heading {
	padding-bottom: 15.2px;
	margin: 22px 0 0;
	max-width: 678px;
	font-family: var(--font-base);
	font-weight: 900;
	font-size: 63px;
	line-height: 71px;
	color: var(--color-text-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-final__lede {
	margin: 25px 0 0;
	max-width: 618px;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 28px;
	color: var(--color-text-light);
	opacity: 0.8;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-ai-audit .aud-final__inner .aud-form {
	margin-top: 32px;
}

/* Figma 94:2839 — trimmed to a 10px box, not the full 28px line. */
.page-template-page-ai-audit .aud-final__note {
	margin: 32px 0 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 28px;
	color: var(--color-text-light);
	opacity: 0.8;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* ============================================================ RESPONSIVE */

/**
 * NOT FIGMA-VERIFIED. The source file contains only the 1520px desktop
 * frame — there is no tablet or mobile artboard anywhere in it — so every
 * rule below this line is this build's own interpretation of the design's
 * intent, not a measured match. Stated in TASK.md and the Phase 9 report.
 */

@media (max-width: 1420px) {
	.page-template-page-ai-audit .aud-h2 { font-size: 64px; line-height: 68px; letter-spacing: -2.6px; }
	.page-template-page-ai-audit .aud-h2--70 { font-size: 60px; line-height: 62px; letter-spacing: -2.4px; }
	.page-template-page-ai-audit .aud-hero__heading { font-size: 64px; line-height: 68px; letter-spacing: -2.6px; }
	.page-template-page-ai-audit .aud-visitors__intro .aud-h2 { line-height: 68px; letter-spacing: -2.6px; }
	.page-template-page-ai-audit .aud-next__em { font-size: 52px; line-height: 60px; }
	.page-template-page-ai-audit .aud-final__heading { padding-bottom: 0; font-size: 54px; line-height: 62px; }
	.page-template-page-ai-audit .aud-gaps__inner { gap: 48px; }
	.page-template-page-ai-audit .aud-gaps__intro { flex-basis: 420px; }
	.page-template-page-ai-audit .aud-visitors__inner { gap: 40px; }
	.page-template-page-ai-audit .aud-visitors__cards { flex-basis: 640px; }
	.page-template-page-ai-audit .aud-signals { padding-inline: 40px; }
}

@media (max-width: 1100px) {
	.page-template-page-ai-audit .aud-numcards,
	.page-template-page-ai-audit .aud-getcards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-template-page-ai-audit .aud-gaps__inner,
	.page-template-page-ai-audit .aud-visitors__inner {
		flex-direction: column;
	}

	.page-template-page-ai-audit .aud-gaps__intro,
	.page-template-page-ai-audit .aud-visitors__cards {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.page-template-page-ai-audit .aud-gaps__grid { width: 100%; }
	.page-template-page-ai-audit .aud-tier { padding: 28px 32px; gap: 32px; }
	.page-template-page-ai-audit .aud-rep__inner { padding: 24px 24px 32px; }
	.page-template-page-ai-audit .aud-rep__top { flex-direction: column; gap: 24px; }
	.page-template-page-ai-audit .aud-rep__bars { width: 100%; }
	.page-template-page-ai-audit .aud-rep__barrow { grid-template-columns: 28px minmax(84px, max-content) minmax(0, 1fr) max-content; }
	.page-template-page-ai-audit .aud-panel { padding: 48px 32px; }
	.page-template-page-ai-audit .aud-panel--mid .aud-form { flex-wrap: wrap; }
}

@media (max-width: 900px) {
	.page-template-page-ai-audit .aud-h2,
	.page-template-page-ai-audit .aud-hero__heading { font-size: 48px; line-height: 54px; letter-spacing: -1.8px; }
	.page-template-page-ai-audit .aud-h2--70 { font-size: 44px; line-height: 50px; letter-spacing: -1.6px; }
	.page-template-page-ai-audit .aud-visitors__intro .aud-h2 { line-height: 54px; letter-spacing: -1.8px; }
	.page-template-page-ai-audit .aud-faq .faq__heading { font-size: 44px; line-height: 48px; letter-spacing: -1.6px; }
	.page-template-page-ai-audit .aud-final__heading { padding-bottom: 0; font-size: 40px; line-height: 48px; }
	.page-template-page-ai-audit .aud-next__em { font-size: 38px; line-height: 46px; letter-spacing: -1.4px; }
	.page-template-page-ai-audit .aud-vcard__title { font-size: 32px; line-height: 40px; letter-spacing: -1px; }

	.page-template-page-ai-audit .aud-shift,
	.page-template-page-ai-audit .aud-act,
	.page-template-page-ai-audit .aud-gaps,
	.page-template-page-ai-audit .aud-visitors,
	.page-template-page-ai-audit .aud-check,
	.page-template-page-ai-audit .aud-get,
	.page-template-page-ai-audit .aud-report,
	.page-template-page-ai-audit .aud-faq { padding: 72px 0; }

	.page-template-page-ai-audit .aud-ctamid { padding: 64px 0; }
	.page-template-page-ai-audit .aud-next { padding-top: 72px; }
	.page-template-page-ai-audit .aud-final { padding: 72px 0 32px; }
	.page-template-page-ai-audit .aud-final__card { padding: 64px 24px; min-height: 0; }
	.page-template-page-ai-audit .aud-hero__inner { padding-block: 64px 72px; }

	.page-template-page-ai-audit .aud-signals__inner { flex-direction: column; gap: 0; }
	.page-template-page-ai-audit .aud-signals__item { padding: 20px 0; }
	.page-template-page-ai-audit .aud-signals__item + .aud-signals__item { border-left: 0; border-top: 1px solid rgba(160, 100, 255, 0.3); }
	.page-template-page-ai-audit .aud-signals__copy { max-width: none; }

	.page-template-page-ai-audit .aud-visitors__cards { flex-direction: column; gap: 20px; }
	.page-template-page-ai-audit .aud-tier { flex-direction: column; gap: 16px; }
	.page-template-page-ai-audit .aud-rep__cols { flex-direction: column; gap: 16px; }
	.page-template-page-ai-audit .aud-rep__foot { flex-wrap: wrap; }
	.page-template-page-ai-audit .aud-rep__foottext { flex-basis: 100%; }
}

@media (max-width: 680px) {
	.page-template-page-ai-audit .aud-h2,
	.page-template-page-ai-audit .aud-hero__heading { font-size: 38px; line-height: 44px; letter-spacing: -1.2px; }
	.page-template-page-ai-audit .aud-h2--70 { font-size: 34px; line-height: 40px; letter-spacing: -1px; }
	.page-template-page-ai-audit .aud-visitors__intro .aud-h2 { line-height: 44px; letter-spacing: -1.2px; }
	.page-template-page-ai-audit .aud-faq .faq__heading { font-size: 32px; line-height: 38px; letter-spacing: -1px; }
	.page-template-page-ai-audit .aud-final__heading { padding-bottom: 0; font-size: 30px; line-height: 38px; }
	.page-template-page-ai-audit .aud-next__em { font-size: 28px; line-height: 36px; letter-spacing: -0.8px; }
	.page-template-page-ai-audit .aud-vcard__title { font-size: 28px; line-height: 34px; }

	.page-template-page-ai-audit .aud-numcards,
	.page-template-page-ai-audit .aud-getcards,
	.page-template-page-ai-audit .aud-gaps__grid { grid-template-columns: minmax(0, 1fr); }

	.page-template-page-ai-audit .aud-hero__formshell { padding: 12px; }

	/* Stack the URL field over its button below the point where 506px of
	   input plus the label no longer fit on one line. */
	.page-template-page-ai-audit .aud-form { flex-direction: column; gap: 12px; }
	.page-template-page-ai-audit .aud-form--hero { gap: 12px; }
	.page-template-page-ai-audit .aud-form__input,
	.page-template-page-ai-audit .aud-form--mid .aud-form__input { flex: 1 1 auto; width: 100%; }
	.page-template-page-ai-audit .aud-form__submit,
	.page-template-page-ai-audit .aud-form--hero .aud-form__submit { width: 100%; }

	.page-template-page-ai-audit .aud-panel { padding: 32px 20px; }
	.page-template-page-ai-audit .aud-gapcard,
	.page-template-page-ai-audit .aud-vcard { padding: 24px; }
	.page-template-page-ai-audit .aud-getcard { min-height: 0; }
	.page-template-page-ai-audit .aud-rep { padding: 12px; }
	.page-template-page-ai-audit .aud-rep__inner { padding: 16px; }
	.page-template-page-ai-audit .aud-rep__top { padding: 20px; }
	.page-template-page-ai-audit .aud-rep__barrow { grid-template-columns: 28px minmax(0, 1fr); row-gap: 8px; }
	.page-template-page-ai-audit .aud-rep__track { grid-column: 1 / -1; }
	.page-template-page-ai-audit .aud-rep__barstatus { grid-column: 1 / -1; }
	.page-template-page-ai-audit .aud-rep__footbtn { width: 100%; }
	.page-template-page-ai-audit .aud-hero__checks { gap: 12px 20px; }
	.page-template-page-ai-audit .aud-tier { padding: 24px 20px; }
	.page-template-page-ai-audit .aud-pill { padding: 8px 14px; }
}