/*
 * Live theme base.css, scoped to the live-import wrappers ONLY.
 * The original opens with a universal *{box-sizing:border-box;margin:0;padding:0}
 * reset that would destroy the Editorial shell (content-box + inline styles),
 * so every rule is confined to .listicle-content / main.sp-live-calculator.
 * Rule order preserved from the original (reset first, then type rules).
 */

:where(.listicle-content, main.sp-live-calculator),
:where(.listicle-content, main.sp-live-calculator) *,
:where(.listicle-content, main.sp-live-calculator) *::before,
:where(.listicle-content, main.sp-live-calculator) *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* live base.css body typography, applied to the wrapper so descendants
   inherit Montserrat metrics (handoff-page.css sets body font to initial) */
main.sp-live-calculator {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
}

:where(.listicle-content, main.sp-live-calculator) h1,
:where(.listicle-content, main.sp-live-calculator) h2,
:where(.listicle-content, main.sp-live-calculator) h3,
:where(.listicle-content, main.sp-live-calculator) h4,
:where(.listicle-content, main.sp-live-calculator) h5,
:where(.listicle-content, main.sp-live-calculator) h6 {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
	margin-bottom: 0.5em;
}

:where(.listicle-content, main.sp-live-calculator) h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); letter-spacing: -0.025em; }
:where(.listicle-content, main.sp-live-calculator) h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; }
:where(.listicle-content, main.sp-live-calculator) h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
:where(.listicle-content, main.sp-live-calculator) h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
:where(.listicle-content, main.sp-live-calculator) h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
:where(.listicle-content, main.sp-live-calculator) h6 { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }

:where(.listicle-content, main.sp-live-calculator) p {
	margin-bottom: 1em;
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
}

:where(.listicle-content, main.sp-live-calculator) a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}
:where(.listicle-content, main.sp-live-calculator) a:hover { color: var(--color-accent); }

:where(.listicle-content, main.sp-live-calculator) ul,
:where(.listicle-content, main.sp-live-calculator) ol { list-style: none; }

:where(.listicle-content, main.sp-live-calculator) img { max-width: 100%; height: auto; display: block; }

:where(.listicle-content, main.sp-live-calculator) strong,
:where(.listicle-content, main.sp-live-calculator) b { font-weight: var(--font-weight-semibold); }

:where(.listicle-content, main.sp-live-calculator) em,
:where(.listicle-content, main.sp-live-calculator) i { font-style: italic; }

:where(.listicle-content, main.sp-live-calculator) hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--spacing-xl) 0;
}

:where(.listicle-content, main.sp-live-calculator) ::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}