/* ==========================================================================
   Loud Days AI visibility report

   The signature element is the banded score rail: five named territories
   drawn to scale, with a needle on the reading. Everything else is quiet
   structure so the rail and the ranked fixes carry the page.
   Typography is inherited from the theme on the live page, and set to a
   system stack in the standalone print view.
   ========================================================================== */

.ld-aeo {
	--ld-accent: #1f4dff;
	--ld-ink: #0f1215;
	--ld-ink-2: #59606b;
	--ld-rule: #e2e5ea;
	--ld-wash: #f5f6f8;
	--ld-good: #14764a;
	--ld-good-soft: #7fb79b;
	--ld-mid: #a96a0c;
	--ld-poor: #b4241f;
	--ld-poor-soft: #d98a86;

	/* Cleared by JavaScript from the site's own fixed header, with this as
	   the fallback if measurement fails. */
	--ld-sticky-top: 9.5rem;

	max-width: 68rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
	color: var(--ld-ink);
	line-height: 1.6;
}

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

.ld-aeo p { max-width: 68ch; }
.ld-aeo h1, .ld-aeo h2, .ld-aeo h3 { letter-spacing: -0.015em; }

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */

.ld-aeo-loading { padding: 3rem 0; max-width: 34rem; }

.ld-aeo-loading-title { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.4rem; }
.ld-aeo-loading-sub { margin: 0 0 1.75rem; color: var(--ld-ink-2); }

.ld-aeo-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ld-rule);
}

.ld-aeo-steps li {
	padding: 0.7rem 0 0.7rem 1.9rem;
	border-bottom: 1px solid var(--ld-rule);
	color: var(--ld-ink-2);
	position: relative;
	opacity: 0.4;
	transition: opacity 0.35s ease, color 0.35s ease;
}

.ld-aeo-steps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 0.55rem;
	height: 0.55rem;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.ld-aeo-steps li.is-active { opacity: 1; color: var(--ld-ink); }
.ld-aeo-steps li.is-active::before { background: var(--ld-accent); border-color: var(--ld-accent); }
.ld-aeo-steps li.is-done { opacity: 0.55; }
.ld-aeo-steps li.is-done::before { background: var(--ld-good); border-color: var(--ld-good); }

.ld-aeo-printwait { padding: 3rem 1.25rem; color: var(--ld-ink-2); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.ld-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem 2rem;
	align-items: end;
	padding-bottom: 1.1rem;
	border-bottom: 2px solid var(--ld-ink);
	margin-bottom: 2.25rem;
}

.ld-head-logo { display: none; }

.ld-head-label { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--ld-ink-2); }

.ld-head h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.05;
	word-break: break-word;
}

.ld-head-meta { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--ld-ink-2); }

.ld-pdf {
	background: none;
	border: 1px solid var(--ld-ink);
	color: var(--ld-ink);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	padding: 0.55rem 1rem;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}

.ld-pdf:hover,
.ld-pdf:focus-visible { background: var(--ld-ink); color: #fff; }

/* --------------------------------------------------------------------------
   Verdict and score rail
   -------------------------------------------------------------------------- */

.ld-verdict { margin-bottom: 2.5rem; }

.ld-rail {
	position: relative;
	/* Must clear the marker stack above it: label, numeral and needle. */
	margin: clamp(5.75rem, 13vw, 7.25rem) 0 0;
}

.ld-rail-bands { display: flex; height: 2.4rem; overflow: hidden; border-radius: 2px; }

.ld-rail-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding: 0 0.3rem;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
}

.ld-rail-band[data-band="0"] { background: var(--ld-poor); flex: 0 0 40%; }
.ld-rail-band[data-band="1"] { background: var(--ld-poor-soft); flex: 0 0 15%; }
.ld-rail-band[data-band="2"] { background: var(--ld-mid); flex: 0 0 15%; }
.ld-rail-band[data-band="3"] { background: var(--ld-good-soft); flex: 0 0 15%; }
.ld-rail-band[data-band="4"] { background: var(--ld-good); flex: 0 0 15%; }

.ld-rail-band.is-current { box-shadow: inset 0 0 0 2px var(--ld-ink); }

.ld-rail-marker {
	position: absolute;
	bottom: 100%;
	left: 0;
	transform: translateX(-50%);
	text-align: center;
	transition: left 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	min-width: 3.5rem;
}

/* At the ends of the scale the number would hang off the rail, so anchor it
   inward while the needle keeps pointing at the true reading. */
.ld-rail-marker.is-high { transform: translateX(-82%); }
.ld-rail-marker.is-high .ld-rail-needle { margin-right: 0; margin-left: auto; }
.ld-rail-marker.is-low { transform: translateX(-18%); }
.ld-rail-marker.is-low .ld-rail-needle { margin-left: 0; margin-right: auto; }

.ld-rail-out { display: block; font-size: 0.75rem; color: var(--ld-ink-2); margin-bottom: 0.2rem; }

.ld-rail-value {
	display: block;
	font-size: clamp(2.6rem, 7vw, 4rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.ld-rail-needle { display: block; width: 2px; height: 0.7rem; background: var(--ld-ink); margin: 0.25rem auto 0; }

.ld-rail-scale {
	position: relative;
	height: 1.5rem;
	margin-top: 0.35rem;
	font-size: 0.7rem;
	color: var(--ld-ink-2);
	font-variant-numeric: tabular-nums;
}

.ld-rail-scale span { position: absolute; top: 0; transform: translateX(-50%); }

.ld-grade { margin: 2rem 0 0.4rem; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; }

.ld-good { color: var(--ld-good); }
.ld-mid  { color: var(--ld-mid); }
.ld-poor { color: var(--ld-poor); }

.ld-verdict-copy { margin: 0; font-size: 1.08rem; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Measured facts strip
   -------------------------------------------------------------------------- */

.ld-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--ld-rule);
	border-bottom: 1px solid var(--ld-rule);
	margin-bottom: 2.5rem;
}

.ld-fact { padding: 1rem 1rem 1rem 0; border-right: 1px solid var(--ld-rule); }
.ld-fact:last-child { border-right: 0; }
.ld-fact + .ld-fact { padding-left: 1rem; }

.ld-fact-value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.ld-fact-label { display: block; font-size: 0.8rem; color: var(--ld-ink-2); margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   Two column body with index rail
   -------------------------------------------------------------------------- */

.ld-body { display: block; }
.ld-index { display: none; }

.ld-index-item {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 0.55rem 0;
	border-top: 1px solid var(--ld-rule);
}

.ld-index-item:last-child { border-bottom: 1px solid var(--ld-rule); }

.ld-index-top {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	align-items: baseline;
	font-size: 0.85rem;
	line-height: 1.3;
}

.ld-index-pct { font-weight: 700; font-variant-numeric: tabular-nums; }

.ld-index-bar { height: 3px; background: var(--ld-rule); margin-top: 0.35rem; }

.ld-index-bar span {
	display: block;
	height: 100%;
	background: currentColor;
	width: 0;
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ld-index-item:hover .ld-index-top,
.ld-index-item:focus-visible .ld-index-top { color: var(--ld-accent); }

@media (min-width: 1000px) {
	.ld-body { display: grid; grid-template-columns: 15rem 1fr; gap: 3.5rem; align-items: start; }
	.ld-index {
		display: block;
		position: sticky;
		top: var(--ld-sticky-top);
		max-height: calc(100vh - var(--ld-sticky-top) - 2rem);
		overflow-y: auto;
	}
	.ld-index-title { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--ld-ink-2); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.ld-section { padding-bottom: 2.75rem; }
.ld-section + .ld-section { border-top: 1px solid var(--ld-rule); padding-top: 2.75rem; }
.ld-section > h2 { margin: 0 0 0.4rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.ld-lede { margin: 0 0 1.75rem; color: var(--ld-ink-2); }

.ld-cat {
	padding: 1.15rem 0;
	border-top: 1px solid var(--ld-rule);
	scroll-margin-top: var(--ld-sticky-top);
}
.ld-cat:last-child { border-bottom: 1px solid var(--ld-rule); }

.ld-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; }
.ld-cat-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }

.ld-cat-score {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	line-height: 1.1;
}

.ld-cat-weight { display: block; font-size: 0.72rem; font-weight: 400; color: var(--ld-ink-2); }

.ld-cat-bar { height: 4px; background: var(--ld-rule); margin: 0.65rem 0; }
.ld-cat-bar span {
	display: block;
	height: 100%;
	background: currentColor;
	width: 0;
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ld-cat-blurb { margin: 0; font-size: 0.93rem; color: var(--ld-ink-2); }

/* Priorities */

.ld-priorities { list-style: none; margin: 0; padding: 0; }

.ld-priorities li {
	display: grid;
	grid-template-columns: 2.8rem 1fr;
	gap: 1.1rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--ld-rule);
	break-inside: avoid;
}

.ld-priorities li:last-child { border-bottom: 1px solid var(--ld-rule); }

.ld-pri-rank {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ld-accent);
	font-variant-numeric: tabular-nums;
}

.ld-pri-body h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.ld-pri-meta { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--ld-ink-2); font-variant-numeric: tabular-nums; }
.ld-pri-body p { margin: 0 0 0.55rem; }
.ld-pri-body p:last-child { margin-bottom: 0; }

/* Checks */

.ld-group {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 2.25rem 0 0.3rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--ld-ink);
}

.ld-group h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.ld-group-pct { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ld-check { border-bottom: 1px solid var(--ld-rule); break-inside: avoid; }

.ld-check > summary {
	display: grid;
	grid-template-columns: 4.9rem minmax(0, 1fr) minmax(0, 1.15fr) 1rem;
	gap: 0.9rem;
	align-items: baseline;
	padding: 0.9rem 0;
	cursor: pointer;
	list-style: none;
}

.ld-check > summary::-webkit-details-marker { display: none; }
.ld-check > summary:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }

.ld-pill {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	text-align: center;
}

.ld-check.ld-pass .ld-pill { color: var(--ld-good); }
.ld-check.ld-warn .ld-pill { color: var(--ld-mid); }
.ld-check.ld-fail .ld-pill { color: var(--ld-poor); }

.ld-check-label { font-weight: 600; }
.ld-check-ev { font-size: 0.88rem; color: var(--ld-ink-2); }

.ld-chev { justify-self: end; color: var(--ld-ink-2); font-size: 0.8rem; transition: transform 0.2s ease; }
.ld-check[open] .ld-chev { transform: rotate(180deg); }

.ld-check-body {
	background: var(--ld-wash);
	margin: 0 -1rem 0.6rem;
	padding: 1rem 1rem 1.2rem 6.8rem;
}

.ld-check-body p { margin: 0 0 0.65rem; font-size: 0.95rem; }
.ld-check-body p:last-child { margin-bottom: 0; }

/* Method and CTA */

.ld-method p { color: var(--ld-ink-2); font-size: 0.95rem; }

.ld-cta { border-top: 2px solid var(--ld-ink); padding-top: 2.25rem; margin-top: 1rem; }
.ld-cta h2 { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 3vw, 2rem); }

.ld-btn {
	display: inline-block;
	margin-top: 0.9rem;
	padding: 0.9rem 1.7rem;
	background: var(--ld-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-radius: 3px;
}

.ld-btn:hover,
.ld-btn:focus-visible { background: var(--ld-ink); color: #fff; }

.ld-footnote {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ld-rule);
	font-size: 0.78rem;
	color: var(--ld-ink-2);
}

.ld-aeo-empty { padding: 3rem 0; }

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

@media (prefers-reduced-motion: reduce) {
	.ld-aeo * { transition: none !important; animation: none !important; }
	.ld-aeo-steps li { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.ld-head { grid-template-columns: 1fr; align-items: start; }

	.ld-facts { grid-template-columns: repeat(2, 1fr); }
	.ld-fact { border-bottom: 1px solid var(--ld-rule); padding-left: 0; }
	.ld-fact:nth-child(2n) { border-right: 0; padding-left: 1rem; }
	.ld-fact:nth-child(n+3) { border-bottom: 0; }

	.ld-rail-band { font-size: 0.6rem; }
	.ld-rail-band[data-band="1"] .ld-band-name,
	.ld-rail-band[data-band="3"] .ld-band-name { display: none; }

	.ld-check > summary { grid-template-columns: 4.6rem 1fr 1rem; }
	.ld-check-ev { grid-column: 2 / span 2; }
	.ld-check-body { padding-left: 1rem; margin: 0 -0.75rem 0.6rem; }

	.ld-priorities li { grid-template-columns: 2rem 1fr; gap: 0.8rem; }
}

/* --------------------------------------------------------------------------
   Print
   The standalone print view carries body.ld-aeo-printview, so the theme
   header, offer bar, navigation and footer are never in the document.
   -------------------------------------------------------------------------- */

@page {
	size: A4 portrait;
	margin: 14mm 13mm 16mm;
}

@media print {

	html, body { background: #fff !important; }

	.ld-aeo { --ld-sticky-top: 0rem; }

	body.ld-aeo-printview > *:not(.ld-aeo) { display: none !important; }

	.ld-aeo {
		max-width: none;
		margin: 0;
		padding: 0;
		font-size: 9.5pt;
		line-height: 1.45;
		color: #000;
	}

	.ld-aeo p { max-width: none; }

	.ld-pdf,
	.ld-index,
	.ld-chev,
	.ld-btn { display: none !important; }

	.ld-head { grid-template-columns: auto 1fr; align-items: center; }
	.ld-head-logo { display: block; max-height: 42px; width: auto; }
	.ld-head h1 { font-size: 20pt; }
	.ld-head-label { font-size: 8.5pt; }
	.ld-head-meta { font-size: 8pt; }

	.ld-rail { margin-top: 2.6rem; }
	.ld-rail-value { font-size: 26pt; }
	.ld-rail-bands { height: 16pt; }
	.ld-rail-band { font-size: 6.5pt; }

	.ld-grade { font-size: 15pt; margin-top: 1.2rem; }
	.ld-verdict-copy { font-size: 10pt; }

	.ld-facts { grid-template-columns: repeat(4, 1fr); }
	.ld-fact-value { font-size: 13pt; }
	.ld-fact-label { font-size: 7.5pt; }

	.ld-body { display: block; }

	.ld-section { padding-bottom: 1.2rem; }
	.ld-section + .ld-section { padding-top: 1.2rem; }
	.ld-section > h2 { font-size: 13pt; break-after: avoid; }

	.ld-priorities-section { break-before: page; }
	.ld-priorities li { padding: 0.85rem 0; }
	.ld-pri-rank { font-size: 14pt; }
	.ld-pri-body h3 { font-size: 10.5pt; }

	.ld-checks-section { break-before: page; }
	.ld-group { break-after: avoid; margin-top: 1.1rem; }

	.ld-check > summary {
		cursor: default;
		grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 1.15fr);
		padding: 0.4rem 0;
	}

	.ld-check-body {
		display: block !important;
		background: transparent;
		margin: 0;
		padding: 0 0 0.6rem 5.3rem;
	}

	.ld-check-body p { font-size: 8.5pt; margin-bottom: 0.3rem; }

	.ld-cta { break-inside: avoid; }
	.ld-cta h2 { font-size: 13pt; }

	.ld-print-foot {
		display: block !important;
		margin-top: 1.5rem;
		padding-top: 0.6rem;
		border-top: 1px solid #000;
		font-size: 7.5pt;
	}

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

.ld-print-foot { display: none; }