body.plan-page { font-family: 'Fira Sans', sans-serif; color: #444; font-size: 18px; line-height: 20px; max-width: none; padding: 0 }
	body.plan-page ul li { margin-bottom: 8px; list-style: square; margin-left: 16px; padding-left: 8px }
	/* Width-limited containers: direct body children except the footer. */
	body.plan-page > .site-header,
	body.plan-page > .plan-layout { max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box }
	body.plan-page.has-rail > .site-header,
	body.plan-page.has-rail > .plan-layout,
	body.plan-page.catalog-page > .site-header,
	body.plan-page.catalog-page > .plan-layout,
	body.plan-page.about-page > .site-header,
	body.plan-page.about-page > .plan-layout,
	body.plan-page.research-page > .site-header,
	body.plan-page.research-page > .plan-layout { max-width: 1180px }
	body.plan-page > .site-header { padding-top: 60px }
	@media (min-width: 600px) {
		body.plan-page > .site-header,
		body.plan-page > .plan-layout { padding-left: 48px; padding-right: 48px }
	}
	@media (min-width: 1024px) {
		body.plan-page > .site-header,
		body.plan-page > .plan-layout { padding-left: 64px; padding-right: 64px }
	}
	body.plan-page .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

.plan-layout { display: block }
	.plan-rail { display: none }

@media (min-width: 1024px) {
	.has-rail .plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start }
		.has-rail .plan-main { min-width: 0 }
		.has-rail .plan-rail { display: block; align-self: start; padding-top: 540px }
		.has-rail .preview-narrow { display: none }
}

/* ---------- Site header / logo ---------- */
/* Flex row: logo left, Get-the-app CTA far right, vertically centered.
 * Below 600px the CTA wraps under the logo and the header gains extra bottom margin. */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px }
	.site-home { display: block; flex: 1; min-width: 0; text-decoration: none }
		.site-home-logo { width: 75%; max-width: 280px; background: url(/images/BuenaVidaLogoMobile.png) no-repeat; background-size: contain; aspect-ratio: 1063 / 537 }
	.site-nav { display: none }
	/* Pin the CTA's look in both color schemes: the page-wide anchor rules
	 * (e.g. body.research-page a) must never recolor or underline it. */
	.site-header .button { flex: none; width: 220px; color: #444; text-decoration: none }

@media (max-width: 599px) {
	.site-header { flex-direction: column; align-items: flex-start; margin-bottom: 72px }
		/* Stacked: the logo's 75% width must resolve against the header, not a shrink-to-fit anchor. */
		.site-header .site-home { flex: none; width: 100% }
		.site-header .button { width: 100%; max-width: 280px }
}
	
@media (min-width: 721px) {
	.site-home-logo { width: auto; max-width: none; max-height: 80px; background: url(/images/BuenaVidaLogoDesktopWide.png) no-repeat; background-size: contain; aspect-ratio: 734 / 95 }
}

/* ---------- Plan article rhythm ---------- */
/* The .section-h padding-top + margin-bottom create section rhythm.
 * The plan article keeps a small base gap for sections without an h2 (like the CTA card). */
.plan { display: flex; flex-direction: column; gap: 48px; padding-bottom: 64px }
	.plan section, .plan aside, .plan header { margin: 0 }

/* ---------- Section headers ---------- */
/* Brand pattern from /privacy: h2 with colored bar before, distinct color per section. */
.section-h { position: relative; font-size: 28px; line-height: 36px; letter-spacing: 0.02em; margin: 0 0 32px; padding-top: 24px; color: #444 }
	.section-h::before { content: ''; display: block; margin-bottom: 16px; width: 96px; height: 16px; border-radius: 2px; background: #444 }
	/* Section-header colors progress down the page along the orange ramp:
	 * red → orange → yellow. */
	.glance       .section-h { color: var(--orange3); margin-bottom: 8px }
		.glance       .section-h::before { background: var(--orange3) }
	.verdict      .section-h { color: var(--orange1) }
		.verdict      .section-h::before { background: var(--orange1) }
	.strengths    .section-h { color: var(--orange2) }
		.strengths    .section-h::before { background: var(--orange2) }
	.weaknesses   .section-h { color: var(--orange3) }
		.weaknesses   .section-h::before { background: var(--orange3) }
	.bridge       .section-h { color: var(--orange4) }
		.bridge       .section-h::before { background: var(--orange4) }
	.science      .section-h { color: var(--orange5) }
		.science      .section-h::before { background: var(--orange5) }
	.alternatives .section-h { color: var(--orange6) }
		.alternatives .section-h::before { background: var(--orange6) }
	.faq          .section-h { color: var(--orange7) }
		.faq          .section-h::before { background: var(--orange7) }
	.scorecard    .section-h { color: var(--orange3) }
		.scorecard    .section-h::before { background: var(--orange3) }
	.preview      .section-h { color: var(--orange7) }
		.preview      .section-h::before { background: var(--orange7) }


/* ---------- Header block ---------- */
.plan-header { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px }
	.plan-title { font-size: 26px; line-height: 32px; letter-spacing: 0.5px; margin: 0; color: #444 }
		.plan-kicker, .plan-bvrc { display: block; color: var(--orange1); font-weight: inherit; letter-spacing: inherit;  }
		.plan-kicker { margin-bottom: 16px; font-size: 26px; line-height: 28px }
		.plan-title .plan-bvrc { color: #444; font-size: 16px; line-height: 20px }
		.plan-bvrc { color: var(--orange5); margin-bottom: 3px }
	.plan-subhead { font-size: 18px; line-height: 24px; color: #444; margin: 0 }
	.plan-byline { font-size: 13px; line-height: 16px; color: #777; margin: 0 }
		.byline-sep { display: inline-block; width: 4px; height: 4px; background: currentColor; vertical-align: middle; margin: 0 6px; position: relative; top: -1px }
	.plan-source { font-size: 18px; line-height: 22px; margin: 4px 0 0; display: flex; align-items: start; flex-wrap: wrap; gap: 8px 0; flex-direction: column }
		.pricing-pill { width: max-content; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 7px; background: #444; color: #f1f1f1 }
		.plan-source .pricing-pill { font-size: 15px }
		.plan-source-link { font-size: 15px; font-weight: 500; color: var(--orange1); text-decoration: none; white-space: nowrap }
			.plan-source-link:hover { text-decoration: underline }
			/* No url3P → empty href: hide the link and its preceding separator. */
			.plan-source-link[href=""] { display: none }
			.byline-sep:has(+ .plan-source-link[href=""]) { display: none }

/* ---------- Plan at a Glance ---------- */
/* Mirrors the iOS PlanDetailsGlance.swift design: two rows of 3 cards.
 * Each card uses --c (set inline) as its accent color; background is a tinted
 * version of --c, foreground is full-saturation --c. */
.glance { display: flex; flex-direction: column; gap: 8px; margin: 0 }
	.glance-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
	.glance-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 8px 16px; border-radius: 4px; text-align: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); box-sizing: border-box; mix-blend-mode: multiply }
	.glance-row-primary   .glance-card,
	.glance-row-secondary .glance-card { height: 108px }
	.glance-label { font-family: 'Fira Code', monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; margin-top: 6px }
	.glance-toplabel { font-family: 'Fira Code', monospace; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 12px }
	.glance-big { font-size: 40px; line-height: 0.95; display: inline-flex; align-items: baseline; gap: 2px }
		.glance-big .small { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 16px; align-self: flex-end; padding-bottom: 4px }
		.glance-big .dot { font-size: 22px; line-height: 0.95 }
	/* Workouts tile icons. */
	.wo-icon { height: 20px; width: auto; display: block }
		.wo-icon-run { height: 24px }
	.glance-runs-only { display: flex; align-items: center; justify-content: center; gap: 12px; width: 116px; height: 56px }
		.glance-runs-only .big { font-size: 40px; line-height: 0.95 }
		.glance-card.glance-workouts:has(.glance-runs-only) { padding-bottom: 8px }
	/* Split card (Workouts, Intensity): TL value + BR value, diagonal line through middle. */
	.glance-split { position: relative; width: 116px; height: 56px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr }
		.glance-split .split-tl { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: flex-start; gap: 8px }
		.glance-split .split-br { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px }
		.glance-split .big { font-size: 32px; line-height: 0.95 }
		.glance-split .small { font-size: 10px; line-height: 12px; letter-spacing: 0.5px; text-transform: uppercase }
		.glance-split .pct { font-size: 16px; line-height: 20px; padding-left: 1px; position: relative; top: -11px }
		.glance-split .split-line { position: absolute; left: -8px; right: -8px; top: 50%; height: 3px; background: currentColor; transform: rotate(-32deg); transform-origin: center }
	/* Audience: single-word variant for Beginner/Advanced/Elite; intermediate hyphenates onto two lines. */
	.glance-audience .audience-word { font-size: 22px; line-height: 0.95; letter-spacing: 0.5px }
	.glance-audience .audience-hyphenated { display: flex; flex-direction: column; align-items: center; line-height: 0.9; font-size: 22px }
		.glance-audience .audience-row1 { display: flex; align-items: baseline }
		.glance-audience .hyphen { font-size: 0.6em; padding-left: 1px }
		.glance-audience .audience-row2 { margin-top: 0 }
	/* Range card (Hours, Miles). */
	.glance-range { display: flex; align-items: baseline; gap: 6px; font-size: 36px; line-height: 0.95 }
		.glance-range .range-dash { font-family: 'Bungee', sans-serif; font-size: 20px; font-weight: 500; color: var(--c); position: relative; top: -5px }
		.glance-range .half { font-size: 0.55em; vertical-align: super }

/* ---------- Plan intro / lede (immediately above Verdict) ---------- */
/* First prose on the page; treat as a lede (larger than body, confident type, no chrome).
 * .plan-intro p declared further down with "Lede prose" rules. */
.plan-intro, .whats-missing { display: flex; flex-direction: column; gap: 8px; font-size: 18px; line-height: 26px; max-width: 62ch }
	.lede-score-link a { color: var(--orange1); text-underline-offset: 4px }

/* ---------- Verdict ---------- */
.verdict-body { display: flex; flex-direction: column; gap: 20px; align-items: flex-start }
	@media (min-width: 720px) { .verdict-body { flex-direction: row; gap: 28px } }
.verdict-grade-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--orange1); color: #fff; padding: 12px; border-radius: 8px; flex-shrink: 0; width: 160px; height: 160px; box-sizing: border-box; text-align: center; align-self: flex-start }
	.verdict-grade-eyebrow { font-size: 10px; line-height: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: rgba(255,255,255,0.6); margin: 0 }
	.verdict-grade-letter { font-size: 80px; line-height: 80px; color: #fff; margin: 0 }
	.verdict-grade-band { font-size: 13px; line-height: 16px; color: rgba(255,255,255,0.9); font-weight: 500; margin: 4px 0 0; max-width: 140px }
.verdict-prose { display: flex; flex-direction: column; gap: 16px; margin: 0; flex: 1; min-width: 0 }
	.verdict-prose p { font-size: 18px; line-height: 26px; color: #444; margin: 0 }
	.verdict-lead { font-size: 1.25em; font-weight: bold; }

/* ---------- Scorecard ---------- */
/* Mirrors the verdict layout: each subscore is a flex row at 720px+
 * with a 160px left column (name + question + progress bar + score)
 * aligning exactly with the verdict-grade-box, and a flex:1 right
 * column carrying the description, aligning with verdict-prose. */
/* Margin-top brings the verdict→first-subscore gap up to match the
 * subscore-to-subscore gap visually. Plan-level gap (24) + this margin
 * sit above the first subscore. */
.scorecard { margin-top: 48px }
.scorecard-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 48px }
	.scorecard-row { display: flex; flex-direction: column; gap: 20px; align-items: flex-start }
	
	.scorecard-rows .scorecard-row:nth-child(1) { color: var(--orange1) }
		.scorecard-rows .scorecard-row:nth-child(1) .cat-bar-fill { background: var(--orange1) }
	.scorecard-rows .scorecard-row:nth-child(2) { color: var(--orange2) }
		.scorecard-rows .scorecard-row:nth-child(2) .cat-bar-fill { background: var(--orange2) }
	.scorecard-rows .scorecard-row:nth-child(3) { color: var(--orange3) }
		.scorecard-rows .scorecard-row:nth-child(3) .cat-bar-fill { background: var(--orange3) }
	.scorecard-rows .scorecard-row:nth-child(4) { color: var(--orange4) }
		.scorecard-rows .scorecard-row:nth-child(4) .cat-bar-fill { background: var(--orange4) }
	.scorecard-rows .scorecard-row:nth-child(5) { color: var(--orange5) }
		.scorecard-rows .scorecard-row:nth-child(5) .cat-bar-fill { background: var(--orange5) }
	
		@media (min-width: 720px) { .scorecard-row { flex-direction: row; gap: 28px } }
		.cat-left { width: 100%; display: flex; flex-direction: column; align-self: flex-start }
			@media (min-width: 720px) { .cat-left { width: 160px; flex-shrink: 0 } }
			.cat-name { font-size: 22px; line-height: 28px; margin: 0; font-weight: 400 }
			.cat-question { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0 0 8px }
			.cat-bar-row { display: flex; align-items: center; gap: 12px; margin-top: 4px }
				.cat-bar { flex: 1; min-width: 0; height: 8px; background: #e6e2d8; border-radius: 1px; overflow: hidden }
					.cat-bar-fill { height: 100%; background: var(--orange1); border-radius: 1px }
				.cat-score-text { font-size: 22px; line-height: 22px; position: relative; top: 2px }
					.cat-score-text .cat-max { font-size: 16px; color: rgba(0,0,0,0.25); padding-left: 6px; position: relative; top: -2px; letter-spacing: 3px }
		.cat-right { flex: 1; min-width: 0 }
			.cat-desc { font-size: 18px; line-height: 26px; margin: 0; color: #444  }

/* ---------- Science ---------- */
.science-claims { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none }
	.science-claim { border-left: 3px solid var(--green5); padding: 4px 0 4px 16px }
		.science-claim-h { font-size: 18px; line-height: 24px; font-weight: 600; margin: 0 0 6px; color: #1a1a1a }
			.science-claim-h a { color: inherit; border-bottom: 1px dotted #bbb; text-decoration: none }
		.science-claim-body { font-size: 18px; line-height: 24px; color: #444; margin: 0 }

/* ---------- Bullet lists (strengths / weaknesses) ---------- */
/* Inherits the brand .ul li rule (square bullets, 16px margin). */
body.plan-page ul.bullet-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px }
	body.plan-page ul.bullet-list li { font-size: 18px; line-height: 26px; color: #444; list-style: none; position: relative; padding: 0 0 0 28px; margin: 0; max-width: 48ch }
		body.plan-page ul.bullet-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center }
	body.plan-page .strengths  ul.bullet-list li::before { background-image: url(/images/plus.png) }
	body.plan-page .weaknesses ul.bullet-list li::before { background-image: url(/images/minus.png) }

/* ---------- Bridge ---------- */
.bridge p { font-size: 18px; line-height: 26px; color: #444 }

/* ---------- CTA card ---------- */
.cta-card { background: var(--orange7, #F8B53A); background-image: url(/images/texture.png); background-repeat: repeat; background-blend-mode: overlay; border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin: 8px 0 }
	.cta-card-primary { background-color: var(--green5, #3CB271); color: #fff }
	.cta-headline { font-size: 22px; line-height: 28px; color: inherit }
	.cta-sub { font-size: 16px; line-height: 24px; color: inherit; margin: 0; opacity: 0.9 }
	.cta-button { display: inline-block; background: #000; color: #fff; padding: 10px 20px; border-radius: 999px; text-decoration: none; font-size: 16px; line-height: 24px; font-weight: 600 }
		.cta-card-primary .cta-button { background: var(--orange1) }
		.cta-button:hover { background: var(--orange1); color: #fff }
	.cta-grade-strip { display: flex; align-items: center; gap: 14px; align-self: stretch; flex-wrap: wrap }
		.cta-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--orange1); color: #fff; padding: 10px; border-radius: 8px; width: 110px; height: 110px; box-sizing: border-box; text-align: center; flex-shrink: 0 }
		.cta-grade-label { font-size: 10px; line-height: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); font-family: 'Fira Code', monospace }
		.cta-grade-value { font-size: 56px; line-height: 56px; color: #fff; margin: 0 }
		.cta-grade-arrow { font-size: 26px; line-height: 28px; color: rgba(0,0,0,0.4); flex-shrink: 0 }

/* ---------- Alternatives ---------- */
.alternatives-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0 }
	.alternatives-list li { border: 1px solid #e6e2d8; border-radius: 8px; padding: 12px 14px; background: #fdfaf3 }
		.alternatives-list a { color: var(--green5); font-weight: 600; text-decoration: none }
			.alternatives-list a:hover { text-decoration: underline }
		.alt-fit { font-size: 16px; line-height: 20px; color: #555; margin: 4px 0 0 }

/* ---------- Similar plans carousel ---------- */
.similar .section-h { color: var(--orange3) }
	.similar .section-h::before { background: var(--orange3) }
.similar-rail { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin: 0 -48px; scrollbar-width: none }
	/* In the ≥1024 two-column grid the rail would otherwise be cropped to the
	 * left column. Keep its left edge in place but break the right edge out to
	 * the viewport edge (past the gap + 340px rail + 64px page padding, plus the
	 * centered outer margin once the viewport exceeds the 1180px container) so the
	 * cut-off cards signal that the row scrolls. Page-level overflow-x is already
	 * clipped (html/body), so the breakout never adds a horizontal page scrollbar. */
	@media (min-width: 1024px) {
		/* z-index lifts the bled-out cards above the transparent .plan-rail box
		 * (which spans the right column from the top), so they stay scrollable/hoverable. */
		.has-rail .similar { position: relative; z-index: 1 }
		/* Both edges of the scroll box reach the screen edges (left = 64px page
		 * padding + centered outer margin; right = that gap + 340px rail + 48px gap),
		 * so cards scroll edge-to-edge instead of being cropped to the column. */
		.has-rail .similar-rail {
			margin-left: calc(-64px - max(0px, (100vw - 1180px) / 2));
			margin-right: calc(-452px - max(0px, (100vw - 1180px) / 2));
		}
		/* Leading inset on the first card restores the resting position to the
		 * content-left edge: scroll-0 starts here (and can't scroll past it), while
		 * scrolling right reveals cards all the way to the screen's left edge. */
		.has-rail .similar-card:first-child { margin-left: calc(64px + max(0px, (100vw - 1180px) / 2)) }
	}
	.similar-card { flex: 0 0 280px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; border-radius: 8px; padding: 14px; background: #f1f1f1; text-decoration: none; color: #444 }
		.similar-card:first-child { margin-left: 48px }
		.similar-card:last-child { margin-right: 48px }
		.similar-card:hover { border-color: var(--orange1); background: #fff }
	.similar-card-head { display: flex; align-items: top; gap: 8px }
		.similar-grade { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; font-size: 26px; line-height: 1; color: #f1f1f1; background: var(--orange1); border-radius: 8px; margin: 0; padding-top: 4px }
			.similar-grade:has(.similar-grade-plus) { padding-left: -2px } 
			.similar-grade-plus { font-size: 0.7em; vertical-align: top; margin-top: -7px }

		.similar-grade:empty, .similar-diff:empty, .similar-brand:empty { display: none }
/* Optional elements that templates always emit collapse when empty. */
.s-cites:empty, .glance-toplabel:empty { display: none }
	.similar-titlewrap { display: flex; flex-direction: column; min-width: 0; flex: 1 }
	.similar-card > .pricing-pill { margin: auto 0 8px 56px }
	.similar-name { font-size: 18px; line-height: 24px; font-weight: 600 }
	.similar-brand { font-size: 12px; line-height: 16px; margin-top: 2px }
	.similar-diff { font-family: 'Fira Code', monospace; font-size: 15px; color: var(--orange1); font-weight: 500; letter-spacing: -0.5px }
	.similar-meta { font-size: 12px; line-height: 16px; margin: 8px 0 }
		.similar-meta .square { display: inline-block; width: 3px; height: 3px; background: #444; transform: translateY(-2px); }

/* ---------- FAQ ---------- */
.faq-list { margin: 0; max-width: 62ch }
	.faq-q { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 0 8px; padding-top: 8px }
	.faq-a { font-size: 18px; line-height: 26px; margin: 0 0 16px }

/* ---------- Two-week preview (used by 1P inline + rail; also 3P static) ---------- */
#workouts { max-width: 500px }
.preview .section-h { margin-bottom: 8px }
.preview-intro { font-size: 16px; line-height: 24px; color: #555; margin: 0 0 20px }
.preview-week { margin-bottom: 28px; overflow: hidden; background: color-mix(in srgb, var(--orange7) 2.5%, #fff); }
	.preview-week-cta { display: flex; align-items: center; justify-content: center; padding: 32px 24px; min-height: 460px }
		.preview-week-cta[hidden] { display: none }
		.preview-week-cta-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 360px }
		.preview-week-cta-eyebrow { font-size: 10px; line-height: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange1); margin: 0; font-weight: 600 }
		.preview-week-cta-h { font-size: 22px; line-height: 28px; margin: 0 }
		.preview-week-cta-body { font-size: 16px; line-height: 24px; margin: 0 }
		.preview-week-cta .button { margin-top: 4px }
	.preview-week-banner { padding: 18px 20px; background: color-mix(in srgb, var(--orange7) 15%, #fff); border-bottom: #fff }
		.preview-week-prose { font-size: 16px; line-height: 24px; margin: 0;  }
	.preview-days { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px }
		.preview-day { border-bottom: 2px solid color-mix(in srgb, var(--orange7) 25%, #fff) }
			.preview-day details { width: 100% }
			.preview-day-static .preview-day-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px }
			.preview-day summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0; padding: 10px 12px }
				.preview-day summary > .day-dow,
				.preview-day summary > .day-badge,
				.preview-day summary > .day-name { display: inline }
			.preview-day summary { display: grid; grid-template-columns: 32px auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center }
				.preview-day summary > .day-dow { grid-row: 1; grid-column: 1 }
				.preview-day summary > .day-badge { grid-row: 1; grid-column: 2 }
				.preview-day summary > .day-name { grid-row: 1; grid-column: 3 }
				.preview-day summary > .day-teaser { grid-row: 2; grid-column: 1 / -1; margin: 4px 0 0; padding: 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 50px }
				.preview-day summary::-webkit-details-marker { display: none }
				.preview-day:has(details[open]) summary > .day-teaser { display: none }
			.day-dow { font-family: "Bungee", sans-serif; font-size: 18px; line-height: 18px; width: 32px; flex-shrink: 0 }
			.day-badge { font-size: 10px; line-height: 12px; padding: 2px 7px; border-radius: 4px; font-family: 'Fira Code', monospace; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0 }
				.day-badge.easy     { background: #d9efe0; color: #1f6b3a }
				.day-badge.long     { background: #d0e3f4; color: #1f4d6b }
				.day-badge.tempo    { background: #fbe2c4; color: #8a4a0a }
				.day-badge.thresh   { background: #f9d4c1; color: #8a2c0a }
				.day-badge.intervals{ background: #f5c2c2; color: #8a1a1a }
				.day-badge.strength { background: #e3d4f4; color: #4a1a8a }
				.day-badge.recovery { background: #e5efe1; color: #4a6b1f }
				.day-badge.cross    { background: #e0eef0; color: #1a5a6b }
				.day-badge.race     { background: #1a1a1a; color: #fff }
				.day-badge.shakeout { background: #efeadd; color: #555 }
				.day-badge.rest     { background: #f0ece2; color: #999 }
			.day-name { flex: 1; min-width: 0; font-weight: medium; font-size: 16px; line-height: 24px; mix-blend-mode: multiply }
			.day-detail { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 10px }
				.day-detail-segments { font-size: 14px; line-height: 20px; font-family: 'Fira Code', monospace; color: #444; margin: 8px 0 0 }
				.day-detail-notes { font-size: 16px; line-height: 24px; margin: 0 }
			.day-teaser { font-size: 16px; line-height: 24px; color: #999; margin: 4px 0 0 6px; padding-left: 42px; mix-blend-mode: multiply }
.preview-footnote { font-size: 12px; line-height: 16px; color: #999; margin: 8px 0 0; text-align: center }

.preview-pager { margin: 0; background: color-mix(in srgb, var(--orange7) 2.5%, #fff); border-radius: 8px; overflow: clip }
	.preview-pager-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; font-size: 18px; line-height: 20px; font-family: "Fira Condensed", sans-serif; background: color-mix(in srgb, var(--orange7) 15%, #fff) }
		.pager-btn { background: #fff; border: none; width: 40px; height: 40px; border-radius: 6px; cursor: pointer; font-family: inherit; display: flex; justify-content: center; align-items: center }
			.pager-btn:hover:not([disabled]) img { opacity: 1 }
			.pager-btn[disabled] { opacity: 0.35; cursor: default }
			.pager-btn img { max-height: 16px; opacity: 0.6 }
		.pager-label { color: #666; text-align: center; min-width: 0 }
			.pager-label-week { font-size: 13px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.1em; color: #777; mix-blend-mode: multiply; margin: 0 }
			.pager-label-name { font-family: "Bungee", sans-serif; font-size: 16px; line-height: 24px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
			.pager-label-name:empty { display: none }

/* Rail variant uses the standard section header (size + colored bar).
 * Just keeps a tighter body. */
.preview-rail .preview-intro { font-size: 16px; line-height: 24px; margin-bottom: 12px }
.preview-rail .preview-week-banner { padding: 0 12px 12px }
.preview-rail .preview-week-prose { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden }
.preview-rail .day-detail { padding: 0 12px 12px }
.preview-rail .day-detail-notes { font-size: 16px; line-height: 24px }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	.plan-title { font-size: 40px; line-height: 44px }
	.plan-intro p, .verdict-prose p, .whats-missing p { font-size: 16px; line-height: 24px }
	.section-h { font-size: 22px; line-height: 26px; margin-bottom: 16px; padding-top: 20px }
	/* Tighter vertical rhythm inside subscores on small screens. */
	.scorecard-row { gap: 8px }
			.cat-bar-row { margin-top: 0 }
		.cat-question { margin-bottom: 6px }
		.cat-question, .cat-desc { font-size: 16px; line-height: 24px }
	/* Glance: drop to 2-column. Flatten both .glance-row containers into one parent grid. */
	.glance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
		.glance-row { display: contents }
		.glance .section-h { grid-column: 1 / -1 }
		.glance-row-primary   .glance-card,
		.glance-row-secondary .glance-card { height: 104px }
	body.plan-page ul.bullet-list li, .science .s-prose { font-size: 16px; line-height: 24px }
	.bridge p { font-size: 16px; line-height: 24px; color: #444 }
}
@media (max-width: 420px) {
	.glance-split .pct { display: none }
}

@media (min-width: 420px) {
	.glance-audience .audience-word { font-size: 28px }
}

@media (min-width: 600px) {
	.plan-title { font-size: 48px; line-height: 48px }
		.plan-kicker { font-size: 28px; line-height: 36px; }
		.plan-bvrc { font-size: 21px; line-height: 24px; color: #444 }
	.site-header { margin-bottom: 48px }
	.glance-audience .audience-word { font-size: 30px }
	.similar-card { flex: 0 0 380px }
		.similar-grade { width: 56px; height: 56px; font-size: 36px; }
		.similar-brand { font-size: 15px }
		.similar-card > .pricing-pill { font-size: 13px; margin-left: 64px }
}

@media (min-width: 720px) {
	.similar-diff { font-size: 18px; line-height: 20px }
	.similar-titlewrap { gap: 4px }
	.similar-name { font-size: 20px }
	.similar-meta { font-size: 15px }
		.similar-meta .square { transform: translateY(-3px) }
		
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
	body.plan-page { color: #f1f1f1 }
		body.plan-page strong { color: inherit }
	/* All prose / heading text lifts to #f1f1f1. */
	.plan-title, .plan-subhead, .verdict-prose, .verdict-prose p, .bridge-prose,
	body.plan-page ul.bullet-list li, .faq-q, .faq-a, .cat-desc, .cat-name { color: #f1f1f1 }
	.plan-intro p { color: #ddd }
		.plan-intro p strong { color: #fff }
	.similar-card { background: #444; color: #f1f1f1 }
		.similar-card:hover { background: #555 }
		.pricing-pill { background: #777; color: #f1f1f1 }
		.similar-meta .square { background: #f1f1f1 }
	/* Subdued mid-gray for bylines, timestamps, eyebrow labels. */
	.plan-title .plan-bvrc { color: #999 }
	.plan-byline, .pager-label, .day-dow, .preview-footnote,
	.preview-intro, .scorecard-footer, .site-intro, .cat-question,
	.breadcrumb, .breadcrumb a { color: #aaa }
	.cat-question { color: #777 }
	/* Surfaces: card backgrounds + their borders. */
	.glance-card { mix-blend-mode: normal }
	body.plan-page .preview-pager { color: #444 }
	.preview-week { background: color-mix(in srgb, var(--orange7) 30%, #eee) }
	.preview-day summary > .day-dow { mix-blend-mode: multiply }
	.scorecard-row,
	.preview-week, .alternatives-list li,
	.preview-day { border-color: #2a2a2a }
		.preview-week-banner { border-bottom-color: #1a1a1a }
		
		.day-detail { border-top-color: #2a2a2a }
	.pager-btn { background: #fff; border-color: #444; color: #aaa }
		.pager-btn:hover:not([disabled]) { background: #2a2a2a; border-color: #666; color: #f1f1f1 }
	.site-home-logo { background-image: url(/images/BuenaVidaLogoMobileDark.png) }
}
@media (min-width: 721px) and (prefers-color-scheme: dark) {
	.site-home-logo { background: url(/images/BuenaVidaLogoDesktopWideDark.png) no-repeat; background-size: contain }
}


/* ---------- Footer ---------- */
/* Plan pages use the sitewide landing footer (footer.firaCode, styled in site.css). */

/* ---------- Catalog index (/plans/) ---------- */
.catalog-page .plan-header { padding-bottom: 16px }
.catalog-controls { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px }
	.catalog-filters { display: flex; flex-wrap: wrap; gap: 12px 16px }
	.catalog-filters label { display: flex; flex-direction: column; font-family: 'Fira Code', monospace; font-size: 11px; line-height: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: #777; gap: 4px }
	.catalog-filters select,
	.catalog-filters input { font-family: 'Fira Sans', sans-serif; font-size: 16px; line-height: 24px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #444; min-width: 120px }
	.catalog-filters .catalog-search input { min-width: 200px }
	.catalog-status { color: #777; margin: 0 }
.catalog-table-wrap { overflow-x: auto; margin-bottom: 32px; border: 1px solid #eee; border-radius: 4px }
.catalog-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px }
	.catalog-table th { font-family: 'Fira Code', monospace; font-size: 11px; line-height: 14px; letter-spacing: 0.5px; text-transform: uppercase; text-align: left; color: #777; padding: 12px 8px; border-bottom: 1px solid #eee; background: #fafafa; position: sticky; top: 0; user-select: none }
	.catalog-table th:hover { color: var(--orange3) }
	.catalog-table td { padding: 10px 8px; border-bottom: 1px solid #f3f3f3; vertical-align: middle }
	.catalog-table tr:hover td { background: #fafafa }
	.catalog-table .cat-name a { color: var(--orange2); text-decoration: none; font-weight: 500 }
		.catalog-table .cat-name a:hover { text-decoration: underline }
	.catalog-table .cat-grade { font-family: 'Bungee', sans-serif; font-size: 16px; text-align: center; width: 56px; color: #999 }
		.cat-grade-splus, .cat-grade-s { color: #2d8c52 }
		.cat-grade-a { color: #4caf50 }
		.cat-grade-b { color: #f57c00 }
		.cat-grade-c { color: #e65100 }
		.cat-grade-d { color: #c62828 }
	.catalog-table .cat-days, .catalog-table .cat-weeks { text-align: right; font-variant-numeric: tabular-nums; width: 64px }
	.cat-pill { display: inline-block; font-family: 'Fira Code', monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px }
	.cat-pill-1p { background: color-mix(in srgb, var(--orange3) 18%, transparent); color: var(--orange2) }
	.cat-pill-3p { background: #eee; color: #555 }

/* ---------- Lede + paragraph prose ---------- */
/* plan.notes is rendered as 1–3 paragraphs above the verdict, with the
 * scienceLeadin (the "we score every plan" sentence) styled as a slightly
 * quieter byline below the lede. Same paragraph treatment for the 1P
 * "What's missing" and 3P "Bridge" sections. */

/* ---------- What's missing (1P) ---------- */
.whats-missing .section-h { color: var(--orange6) }
	.whats-missing .section-h::before { background: var(--orange6) }

/* ============================================================================
 * About pages (body.plan-page.about-page)
 * ----------------------------------------------------------------------------
 * Reuses the .plan-page chassis (max-width 800, responsive padding, .section-h
 * colored-bar pattern, sitewide footer). Adds long-form-reading typography
 * (looser line-height, bigger H1, a lede paragraph), per-section color
 * assignments, and the .cat-name inline accent used to color-code category
 * names within prose.
 *
 * Used by: /about/how-we-score, future /about/team.
 * ========================================================================== */

/* 18px base, line-heights in multiples of 4. Matches the plan-page typographic
 * grid — H1, H2, byline all inherit unchanged.
 * Mobile (<600px) drops to 16/24 for comfortable phone-reading. */
body.about-page { line-height: 28px }
body.about-page p { font-size: 18px; line-height: 28px; margin-bottom: 20px; max-width: 62ch }
@media (max-width: 599px) {
	body.plan-page { font-size: 16px; line-height: 24px }
}
body.about-page p:last-child { margin-bottom: 0 }
body.about-page section { margin-top: 16px }
body.about-page strong { font-weight: 700 }

/* Lede paragraph. One size up from body, line-height still on the 4px grid. */
.about-page .lede { font-size: 18px; line-height: 26px; max-width: 62ch; margin-top: 20px; text-wrap: pretty }

/* About-page section-color assignments for .section-h. */
.about-page #measures    .section-h { color: var(--orange3) }   .about-page #measures    .section-h::before { background: var(--orange3) }
.about-page #rank        .section-h { color: var(--green1) }    .about-page #rank        .section-h::before { background: var(--green1) }
.about-page #summaries   .section-h { color: var(--orange1) }   .about-page #summaries   .section-h::before { background: var(--orange1) }
.about-page #app         .section-h { color: var(--green5) }    .about-page #app         .section-h::before { background: var(--green5) }

/* Rank legend: one 80×80 tile per band — grade letter (Bungee) above a short label.
 * Colors mirror the catalog index .cat-grade-* on /plans/ for site consistency. */
.about-page .rank-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 }
.about-page .rank-list > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 120px; height: 120px; box-sizing: border-box; padding: 16px 4px 4px; border-radius: 8px; text-align: center; color: #f1f1f1; background: #e65100 }
.about-page .rank-list b { display: flex; align-items: flex-start; justify-content: center; height: 48px; font-family: 'Bungee Regular', sans-serif; font-size: 40px; line-height: 1; font-weight: normal }
.about-page .rank-list b sup { font-size: 0.5em; line-height: 1 }
.about-page .rank-list span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1.2 }

/* Small subdued page-end footnote (corrections email, version note, etc.). */
.about-page .footnote { font-size: 14px; line-height: 20px; color: #777; margin-top: 48px; padding-top: 16px; border-top: 1px solid #e5e5e5; max-width: 62ch }

/* Per-category block: colored Bungee H3 + italic question stack + body paragraph.
 * The .cat-name class is applied to the H3 and carries the category color.
 * Size (22/28) inherits from the global .cat-name on line 159 — only the
 * font-family, tracking, margin, and per-category color need overriding here.
 *
 * On wide viewports the five categories flow into a 2-column grid (see below). */
.about-page .cat { margin-top: 40px }
.about-page .cat:first-of-type { margin-top: 24px }
@media (min-width: 1024px) {
	.about-page #summaries { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 40px }
		.about-page #summaries > .section-h { grid-column: 1 / -1 }
		.about-page #summaries .cat,
		.about-page #summaries .cat:first-of-type { margin-top: 0 }
}

@media (min-width: 800px) and (max-width: 1200px) {
	#review, #scorecard { width: 70ch }
}


.about-page .cat-name { font-family: 'Bungee Regular', sans-serif; letter-spacing: 0.3px; margin: 0 0 12px; text-wrap: balance }
.about-page .cat-name.structure    { color: var(--orange1) }
.about-page .cat-name.prevention   { color: var(--orange4) }
.about-page .cat-name.flexibility  { color: var(--green5) }
.about-page .cat-name.readiness    { color: var(--green1) }
.about-page .cat-name.variety      { color: var(--purple1) }

/* Italic-grey question stack that sits between the category name and the
 * body paragraph. Reads like the things-we-check teaser for what follows. */
.about-page .questions { margin: 0 0 16px; max-width: 62ch }
.about-page .questions p { font-style: italic; color: #777; font-size: 16px; line-height: 24px; margin: 0 0 4px; max-width: none }
.about-page .questions p:last-child { margin-bottom: 0 }

/* Tinted callout card. Generic, color via --card-tint. Echoes /privacy/'s
 * #join block. Reusable; not used on /about/how-we-score itself. */
.about-page .callout-card { background: color-mix(in srgb, var(--card-tint, var(--green1)) 10%, transparent); border-radius: 6px; padding: 24px; margin-top: 8px }
.about-page .callout-card p { max-width: 62ch }
@media (min-width: 600px) { 
	.about-page .callout-card { padding: 28px 32px } 
	.about-page .lede { font-size: 22px; line-height: 32px; }
}

/* Dark mode. */
@media (prefers-color-scheme: dark) {
	body.about-page { color: #d8d8d8 }
	.about-page .lede { color: #d8d8d8 }
	body.about-page a { text-decoration-color: rgba(255,255,255,0.3) }
	.about-page .questions p { color: #aaa }
	.about-page .footnote { border-top-color: #2a2a2a }
	.about-page .callout-card { background: color-mix(in srgb, var(--card-tint, var(--green1)) 18%, transparent) }
}

/* ============================================================================
 * Research pages (body.plan-page.research-page)
 * ----------------------------------------------------------------------------
 * Per-claim pages at /research/{claim-id}.html + the /research/ index.
 * Reuses the about-page typography (18/28 body, 36em column) but uses green1
 * (teal) as the dominant accent so the reference layer reads distinct from
 * orange-toned plan pages.
 * ========================================================================== */

body.research-page { line-height: 28px }
body.research-page p { font-size: 18px; line-height: 28px; margin-bottom: 20px; max-width: 62ch }
body.research-page p:last-child { margin-bottom: 0 }
body.research-page a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,0.25) }
body.research-page a:hover { text-decoration-color: currentColor }
body.research-page section { margin-top: 16px }

/* All section headers on research pages share the teal accent. */
.research-page .section-h { color: var(--green1) }
.research-page .section-h::before { background: var(--green1) }

/* Lede on the index. */
.research-page .lede { font-size: 22px; line-height: 32px; max-width: 62ch; margin-top: 20px; text-wrap: pretty }

/* Per-claim page header.
 * Visual hierarchy is inverted from semantic: H2 (.claim-short) is the
 * dominant Bungee headline humans scan; H1 (.claim-full) carries the canonical
 * claim sentence for crawlers and renders smaller in Fira Code, reading as a
 * subtitle. SEO tools still see the full claim as the H1. */
.research-page .claim-short { font-family: 'Bungee Regular', sans-serif; font-size: 32px; line-height: 36px; letter-spacing: 0.3px; color: #222; margin: 4px 0 12px; text-wrap: balance }
.research-page .claim-full  { font-family: 'Fira Code', monospace; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.5px; color: #222; margin: 0; max-width: 62ch }
@media (min-width: 600px) {
	.research-page .claim-short { font-size: 40px; line-height: 44px }
	.research-page .claim-full  { font-size: 22px; line-height: 32px }
}
@media (max-width: 599px) {
	.research-page .claim-short { font-size: 26px; line-height: 32px }
	.research-page .claim-full  { font-size: 17px; line-height: 24px }
}

/* Confidence badge (header byline + per-row in index). */
.research-page .confidence-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: 'Fira Code', monospace; font-size: 11px; line-height: 16px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500 }
.research-page .confidence-badge.high    { background: color-mix(in srgb, var(--green5)  18%, transparent); color: #2d8c52 }
.research-page .confidence-badge.medium  { background: color-mix(in srgb, var(--orange4) 18%, transparent); color: #b85a00 }
.research-page .confidence-badge.low     { background: #ddd; color: #555 }
.research-page .confidence-badge.unknown { background: #eee; color: #777 }

/* Studies list — vertical stack with a teal left rule per study. */
.research-page .study-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px }
.research-page .study-list li { padding-left: 16px; border-left: 2px solid var(--green1) }
.research-page .study-list li.study-empty { border-left-color: #ddd; color: #777; font-style: italic }
.research-page .study-cite { font-family: 'Fira Code', monospace; font-weight: 300; font-size: 13px; line-height: 20px; color: #777; margin: 0; max-width: 62ch }
.research-page .study-cite a { color: inherit; text-decoration-color: rgba(0,0,0,0.2) }
.research-page .study-finding { font-size: 16px; line-height: 24px; color: #444; margin: 6px 0 0; max-width: 62ch }
.research-page .study-pop { font-family: 'Fira Code', monospace; font-weight: 300; font-size: 12px; line-height: 16px; color: #777; margin: 6px 0 0 }

/* Out-of-scope note. */
.research-page .scope-out { font-size: 16px; line-height: 24px; color: #555 }
.research-page .scope-out strong { color: #444 }

/* Plans that respect this claim — two-column on wider screens. */
.research-page .backlink-intro { font-size: 16px; line-height: 24px; color: #777; margin: 0 0 12px }
.research-page .plan-backlinks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px 24px }
@media (min-width: 720px) { .research-page .plan-backlinks { grid-template-columns: 1fr 1fr } }
.research-page .plan-backlinks li { padding: 4px 0 }
.research-page .plan-backlinks a { color: var(--orange3); font-weight: 500; text-decoration: none }
.research-page .plan-backlinks a:hover { text-decoration: underline }

/* Related claims — simple list. */
.research-page .related-claims { list-style: none; padding: 0; margin: 0 }
.research-page .related-claims li { padding: 4px 0 }
.research-page .related-claims a { color: var(--green1); font-weight: 500; text-decoration: none }
.research-page .related-claims a:hover { text-decoration: underline }

/* Footnote shares the about-page footnote style. */
.research-page .footnote { font-size: 14px; line-height: 20px; color: #777; margin-top: 48px; padding-top: 16px; border-top: 1px solid #e5e5e5; max-width: 62ch }

/* Index page: claim rows are flex (link + badge inline), flush left with section headers. */
.research-index-page .claim-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px }
.research-index-page .claim-list li { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-left: 0; padding-left: 0; list-style: none }
.research-index-page .claim-list a { color: var(--green1); font-weight: 500; text-decoration: none; flex: 1; min-width: 0 }
.research-index-page .claim-list a:hover { text-decoration: underline }

@media (prefers-color-scheme: dark) {
	body.research-page { color: #d8d8d8 }
	.research-page .claim-short, .research-page .claim-full { color: #f1f1f1 }
	.research-page .lede { color: #d8d8d8 }
	body.research-page a { text-decoration-color: rgba(255,255,255,0.3) }
	.research-page .study-cite { color: #aaa }
	.research-page .study-finding { color: #d8d8d8 }
	.research-page .study-pop { color: #999 }
	.research-page .scope-out { color: #bbb }
	.research-page .backlink-intro { color: #aaa }
	.research-page .footnote { border-top-color: #2a2a2a }
}

/* ============================================================================
 * "What the science supports" — plan-page section above the bridge.
 * Driven by score.scienceSupports[] (agent-authored, applied via
 * apply-science-supports.js). Each entry: short title (link to claim page) +
 * 50–80 word prose + author/year citations linked to DOI.
 * ========================================================================== */

.science .science-support { margin: 0 0 28px; max-width: 62ch }
	.science .science-support:last-child { margin-bottom: 0 }
	.science .s-title { font-family: 'Fira Code', sans-serif; font-size: 18px; line-height: 24px; text-wrap: pretty; margin: 0 0 12px; color: var(--orange5) }
		.science .s-title a { color: inherit; text-decoration: none; border-bottom: 3px dotted color-mix(in srgb, var(--orange5) 50%, transparent) }
		.science .s-title a:hover { border-bottom-color: var(--green1) }
	.science .s-prose { font-size: 18px; line-height: 26px; color: #444; margin: 0 0 8px }
	.science .s-cites { font-family: 'Fira Code', monospace; font-weight: 400; font-size: 13px; line-height: 20px; color: #777; margin: 0 }
		.science .s-cites a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(0,0,0,0.2); margin-left: 8px }
			.science .s-cites a:first-child { margin-left: 0 }
		.science .s-cites a:hover { text-decoration-color: currentColor }

@media (max-width: 599px) {
		.science .s-title a { text-decoration-thickness: 2px; text-underline-offset: 0px; }
	.science .s-title { font-size: 15px }
	.science .s-prose { font-size: 16px; line-height: 24px }
	.science .s-cites { font-size: 12px; line-height: 20px }
		.science .s-cites { text-underline-offset: 2px }
}

@media (prefers-color-scheme: dark) {
	.science .s-prose { color: #d8d8d8 }
	.science .s-cites { color: #aaa }
}

.plan-page #startHere { margin-inline: 0; margin-top: 48px }
	.plan-page #startHere a.button { margin-inline: 0 }
	.plan-page #startHere p { line-height: 26px }