/* ==========================================================================
   content.css — About, Sell to me, Contact and the not-found page.

   Mobile-first. Single breakpoint at 900px, always min-width.
   Tokens only: everything here resolves to a --cd-* or a theme.json preset.
   ========================================================================== */

:root {
	/* The one step of the ink ramp the foundation doesn't carry: the opening
	   paragraph of a long-form column, a shade darker than body copy. */
	--cd-ink-lead: rgba(0, 0, 0, .78);
}

/* WordPress gives every flow container a block gap between children. These
   sections lay themselves out, so the gap is turned off where it would fight
   the grid. Core's rule is written with :where(), so one class beats it. */
.cd-flow-flat > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   1. Shared page furniture
   -------------------------------------------------------------------------- */

/* About and Contact both close on a full-bleed dark panel. The site's block gap
   would leave a strip of paper between that panel and the (also dark) footer,
   which reads as a seam rather than a section break. */
.cd-main:has(.cd-about__cta) + .cd-footer,
.cd-main:has(.cd-contact__panel) + .cd-footer {
	margin-block-start: 0;
}


/* A full-bleed band that carries its own vertical rhythm. */
.cd-page-band {
	margin-block-start: 0;
	width: 100%;
}

/* The mono label that opens every card on these pages. */
.cd-card-label {
	display: block;
	margin: 0;
	font: 700 10px var(--cd-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cd-ink-soft);
}

@media (min-width: 900px) {
	.cd-card-label {
		font-size: 10.5px;
	}
}

/* Two-column mono row — "Selling since … 2017". */
.cd-factrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--cd-hairline);
	font: 500 12px var(--cd-mono);
	font-variant-numeric: tabular-nums;
	color: var(--cd-ink-muted);
}

.cd-factrow:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* The label is a bare text node and the value is a <strong> — both become flex
   items, so the row splits without needing a wrapper span. That keeps the whole
   row a plain editable paragraph: Wes types the label, bolds the value. */
.cd-factrow > strong {
	font-weight: 600;
	color: var(--cd-ink);
	text-align: right;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.cd-factrow {
		padding: 11px 0;
		font-size: 13px;
	}
}

/* The note under a card's rows. */
.cd-card-note {
	margin: 11px 0 0;
	font: 400 11.5px/1.55 var(--cd-sans);
	color: var(--cd-ink-soft);
}

@media (min-width: 900px) {
	.cd-card-note {
		margin-top: 12px;
		font-size: 12.5px;
	}
}

/* --------------------------------------------------------------------------
   2. About
   -------------------------------------------------------------------------- */

.cd-about__hero {
	margin-block-start: 0;
}

.cd-about__hero-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 24px;
}

/* core/image wraps its <img> in a <figure>, so the circle lives on the image
   and the figure is reduced to a plain, zero-margin box. */
.cd-about__portrait {
	margin: 0;
	flex: none;
	line-height: 0;
}

.cd-about__portrait img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 2.5px solid var(--cd-ink);
	object-fit: cover;
	display: block;
}

.cd-about__hero .cd-about__title {
	margin: 8px 0 0;
	font: 800 30px/1.05 var(--cd-sans);
	letter-spacing: -.035em;
	color: var(--cd-on-accent);
	text-wrap: balance;
}

@media (min-width: 900px) {
	.cd-about__hero-inner {
		flex-direction: row;
		align-items: center;
		gap: 34px;
		padding-block: 44px;
	}

	.cd-about__portrait img {
		width: 150px;
		height: 150px;
		border-width: 3px;
	}

	.cd-about__hero .cd-about__title {
		margin-top: 10px;
		max-width: 720px;
		font-size: 46px;
		line-height: 1.03;
	}
}

/* --- body: story column, sidebar, reviews --- */

.cd-about__body {
	margin-block-start: 0;
	/* The dark call to action closes the page edge to edge on mobile, so there
	   is no paper seam between it and the footer. */
	padding-block: 22px 0;
}

.cd-about__cols {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* On mobile the sidebar isn't a column — its cards join the single stack, and
   the dark call to action drops to the bottom of the page. */
.cd-about__aside {
	display: contents;
}

.cd-about__story { order: 1; }
.cd-about__numbers { order: 2; }
.cd-about__reviews { order: 3; }
.cd-about__cta { order: 4; }

/* The platform list is already in the footer on every page; on a 390px screen
   printing it twice is noise, so the card is desktop-only. */
.cd-about__platforms {
	display: none;
}

.cd-about__story > p {
	margin: 16px 0 0;
	font: 400 13.5px/1.7 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-about__story > p:first-child {
	margin-top: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--cd-ink-lead);
}

.cd-about__quote {
	margin: 22px 0;
	padding: 4px 0 4px 16px;
	border-left: 4px solid var(--cd-accent);
}

.cd-about__quote p {
	margin: 0;
	font: 700 18px/1.35 var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-ink);
	text-wrap: balance;
}

.cd-about__platform-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

/* A plain core/list — the chip styling sits on the <li> itself so Wes can add
   or remove a platform by pressing Enter, with no inner markup to preserve. */
.cd-about__platform-tags li {
	display: inline-block;
	border: 1px solid var(--cd-rule);
	color: var(--cd-ink-body);
	font: 600 11px var(--cd-mono);
	letter-spacing: .05em;
	padding: 7px 11px;
	border-radius: 6px;
}

/* Dark call to action — a full-bleed band on mobile, a card in the sidebar
   from 900px up. */
.cd-about__cta {
	margin-inline: calc(var(--cd-gutter) * -1);
	padding: 22px var(--cd-gutter) 24px;
	border-radius: 0;
}

.cd-about__cta .cd-about__cta-title {
	margin: 0;
	font: 800 19px/1.25 var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-card);
}

.cd-about__cta p {
	margin: 8px 0 0;
	font: 400 12.5px/1.55 var(--cd-sans);
	color: var(--cd-on-dark-muted);
}

.cd-about__cta-actions {
	margin-top: 14px;
}

.cd-about__cta .wp-block-button__link {
	padding: 14px 18px;
	font-size: 13.5px;
	border-radius: 9px;
}

/* --- reviews --- */

.cd-about__reviews .cd-about__reviews-title {
	margin: 0;
	font: 800 17px var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-ink);
}

.cd-about__reviewgrid {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 12px;
}

.cd-about__review {
	margin: 0; /* blockquote's UA margin would inset the card inside its column. */
	background: var(--cd-card);
	border: 1px solid var(--cd-rule);
	border-radius: 11px;
	padding: 15px;
}

.cd-about__review-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.cd-about__review-name {
	margin: 0;
	font: 700 12.5px var(--cd-sans);
	color: var(--cd-ink);
}

.cd-about__review-date {
	margin: 0;
	font: 500 9.5px var(--cd-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cd-ink-faint);
	white-space: nowrap;
}

.cd-about__review-text {
	margin: 9px 0 0;
	font: 400 12px/1.5 var(--cd-sans);
	color: var(--cd-ink-body);
}

@media (min-width: 900px) {
	.cd-about__body {
		padding-block: 44px 48px;
	}

	.cd-about__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: 48px;
		row-gap: 44px;
		align-items: start;
	}

	.cd-about__story {
		grid-column: 1;
		grid-row: 1;
	}

	.cd-about__aside {
		display: flex;
		flex-direction: column;
		gap: 16px;
		grid-column: 2;
		grid-row: 1;
	}

	/* The sidebar is a real column again, so the mobile reordering is undone. */
	.cd-about__numbers,
	.cd-about__platforms,
	.cd-about__cta {
		order: 0;
	}

	.cd-about__reviews {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.cd-about__platforms {
		display: block;
	}

	.cd-about__story > p {
		margin-top: 16px;
		font-size: 15.5px;
	}

	.cd-about__story > p:first-child {
		font-size: 17px;
	}

	.cd-about__story > p:nth-child(2) {
		margin-top: 20px;
	}

	.cd-about__quote {
		margin: 32px 0;
		padding: 6px 0 6px 22px;
	}

	.cd-about__quote p {
		font-size: 24px;
	}

	.cd-about__platform-tags li {
		font-size: 11px;
	}

	.cd-about__cta {
		margin-inline: 0;
		padding: 22px 24px;
		border-radius: var(--cd-r-card);
	}

	.cd-about__cta p {
		font-size: 13px;
	}

	.cd-about__cta .wp-block-button__link {
		padding: 13px 18px;
	}

	.cd-about__reviews .cd-about__reviews-title {
		font-size: 22px;
		padding-bottom: 18px;
		border-bottom: 1px solid var(--cd-rule);
	}

	.cd-about__reviewgrid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		margin-top: 22px;
	}

	.cd-about__review {
		border-radius: var(--cd-r-card);
		padding: 20px 22px;
	}

	.cd-about__review-name {
		font-size: 14px;
	}

	.cd-about__review-date {
		font-size: 10.5px;
	}

	.cd-about__review-text {
		margin-top: 11px;
		font-size: 13.5px;
		line-height: 1.55;
	}
}

/* --------------------------------------------------------------------------
   3. Sell to me
   -------------------------------------------------------------------------- */

.cd-sellpage {
	margin-block-start: 0;
	padding-block: 22px 26px;
}

.cd-sellpage__cols {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cd-sellpage__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cd-sellpage__pitch .cd-sellpage__title {
	margin: 9px 0 0;
	font: 800 30px/1.05 var(--cd-sans);
	letter-spacing: -.035em;
	color: var(--cd-ink);
	text-wrap: balance;
}

.cd-sellpage__lede {
	margin: 11px 0 0;
	font: 400 13.5px/1.6 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-steps {
	display: flex;
	list-style: none;
	flex-direction: column;
	gap: 12px;
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: cd-step;
}

.cd-steps li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font: 400 12.5px/1.5 var(--cd-sans);
	color: var(--cd-ink-body);
	counter-increment: cd-step;
}

.cd-steps li::before {
	content: counter(cd-step);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--cd-accent);
	color: var(--cd-on-accent);
	font: 600 11px var(--cd-mono);
	font-variant-numeric: tabular-nums;
}

.cd-sellpage__footnote {
	margin: 0;
	font: 400 12.5px/1.6 var(--cd-sans);
	color: var(--cd-ink-soft);
}

@media (min-width: 900px) {
	.cd-sellpage {
		padding-block: 44px 48px;
	}

	.cd-sellpage__cols {
		display: grid;
		grid-template-columns: 400px minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}

	.cd-sellpage__intro {
		gap: 26px;
	}

	.cd-sellpage__pitch .cd-sellpage__title {
		margin-top: 10px;
		font-size: 40px;
	}

	.cd-sellpage__lede {
		margin-top: 14px;
		font-size: 15.5px;
		line-height: 1.65;
	}

	.cd-steps {
		gap: 14px;
		margin-top: 15px;
	}

	.cd-steps li {
		gap: 13px;
		font-size: 13.5px;
	}

	.cd-steps li::before {
		width: 22px;
		height: 22px;
		font-size: 12px;
	}

	.cd-sellpage__footnote {
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   4. Contact
   -------------------------------------------------------------------------- */

/* The studio photo band. Nothing on this page names the street. */
.cd-contact__photo {
	position: relative;
	margin-block-start: 0;
	line-height: 0;
}

.cd-contact__photo img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 0;
}

.cd-contact__photo-tag {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	pointer-events: none;
}

.cd-contact__area {
	display: inline-block;
	margin: 0;
	background: var(--cd-accent);
	border: 0;
	color: var(--cd-on-accent);
	padding: 5px 9px;
	font: 700 9.5px var(--cd-mono);
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.cd-contactpage {
	margin-block-start: 0;
	/* The booking panel is full-bleed and last on mobile — it meets the footer. */
	padding-block: 20px 0;
}

.cd-contact__cols {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cd-contact__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cd-contact__main .cd-contact__title {
	margin: 0;
	font: 800 28px/1.05 var(--cd-sans);
	letter-spacing: -.035em;
	color: var(--cd-ink);
	text-wrap: balance;
}

.cd-contact__lede {
	margin: 11px 0 0;
	font: 400 13.5px/1.6 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-contact__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cd-delivery {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font: 400 12.5px/1.5 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-delivery strong {
	font-weight: 700;
	color: var(--cd-ink);
}

/* The booking panel — dark on mobile edge to edge, a card from 900px up. */
.cd-contact__panel {
	margin-inline: calc(var(--cd-gutter) * -1);
	padding: 22px var(--cd-gutter) 24px;
	border-radius: 0;
}

.cd-contact__panel .cd-contact__panel-title {
	margin: 0;
	font: 800 21px/1.2 var(--cd-sans);
	letter-spacing: -.025em;
	color: var(--cd-card);
}

.cd-contact__panel-lede {
	margin: 8px 0 0;
	font: 400 12.5px/1.55 var(--cd-sans);
	color: var(--cd-on-dark-muted);
}

.cd-contact__panel-form {
	margin-top: 16px;
}

/* The fields themselves are dressed for the dark panel in forms.css, which
   already scopes on .cd-contact__panel — nothing to restate here. */

.cd-contact__legal {
	margin: 18px 0 0;
	font: 500 9.5px/1.7 var(--cd-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cd-on-dark-soft);
}

@media (min-width: 900px) {
	.cd-contact__photo img {
		height: 340px;
	}

	.cd-contact__photo-tag {
		bottom: 24px;
	}

	.cd-contact__area {
		padding: 9px 15px;
		font-size: 12px;
		letter-spacing: .06em;
	}

	.cd-contactpage {
		padding-block: 44px 48px;
	}

	.cd-contact__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: 48px;
		align-items: start;
	}

	.cd-contact__main {
		gap: 0;
	}

	.cd-contact__main .cd-contact__title {
		font-size: 40px;
	}

	.cd-contact__lede {
		margin-top: 14px;
		max-width: 560px;
		font-size: 15.5px;
		line-height: 1.65;
	}

	.cd-contact__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		margin-top: 32px;
	}

	.cd-delivery {
		gap: 11px;
		margin-top: 13px;
		font-size: 13.5px;
	}

	.cd-contact__panel {
		margin-inline: 0;
		padding: 30px 32px 32px;
		border-radius: var(--cd-r-card);
	}

	.cd-contact__panel .cd-contact__panel-title {
		font-size: 24px;
	}

	.cd-contact__panel-lede {
		margin-top: 9px;
		font-size: 13.5px;
	}

	.cd-contact__panel-form {
		margin-top: 20px;
	}

	.cd-contact__legal {
		margin-top: 20px;
		font-size: 10px;
	}
}

/* --------------------------------------------------------------------------
   5. Not found — also the resting place of every deleted product
   -------------------------------------------------------------------------- */

.cd-404__hero {
	margin-block-start: 0;
	text-align: center;
}

.cd-404__hero-inner {
	padding-block: 44px 40px;
}

/* IBM Plex Mono ships 400–600 here and font-synthesis is off, so this is 600 —
   the heaviest real weight rather than a faked one. */
.cd-404__code {
	margin: 0;
	/* The design sets 900. IBM Plex Mono has no face above 700, and the theme
	   now ships that one, so this is as heavy as the numeral can honestly go. */
	font: 700 68px/1 var(--cd-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.04em;
	color: var(--cd-on-accent);
}

.cd-404__hero .cd-404__title {
	margin: 14px 0 0;
	font: 800 26px/1.1 var(--cd-sans);
	letter-spacing: -.03em;
	color: var(--cd-on-accent);
	text-wrap: balance;
}

.cd-404__lede {
	margin: 11px auto 0;
	max-width: 520px;
	font: 400 13.5px/1.6 var(--cd-sans);
	color: var(--cd-on-accent);
}

.cd-404__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

.cd-404__actions .wp-block-button__link {
	font-size: 14px;
	padding: 15px 20px;
}

.cd-404__actions .is-style-outline .wp-block-button__link {
	padding: 13px 20px;
	border-width: 2px;
	border-color: var(--cd-on-accent);
	color: var(--cd-on-accent);
}

/* The band is already accent, so the primary button inverts to card white on
   hover — the foundation's accent hover would disappear into the background. */
.cd-404__actions .wp-block-button__link:hover,
.cd-404__actions .wp-block-button__link:focus {
	background: var(--cd-card);
	border-color: var(--cd-ink);
	color: var(--cd-ink);
}

.cd-404__actions .is-style-outline .wp-block-button__link:hover,
.cd-404__actions .is-style-outline .wp-block-button__link:focus {
	background: var(--cd-ink);
	color: var(--cd-card);
}

.cd-404__more {
	margin-block-start: 0;
	padding-block: 22px 26px;
}

.cd-404__more .cd-404__more-title {
	margin: 0;
	font: 800 17px var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-ink);
}

.cd-404__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.cd-404__item {
	display: block;
	min-width: 0;
}

.cd-404__item img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 9px;
	display: block;
	background: var(--cd-chip);
}

.cd-404__item-title {
	margin: 7px 0 0;
	font: 700 12px/1.3 var(--cd-sans);
	color: var(--cd-ink);
}

.cd-404__item .cd-price {
	margin-top: 4px;
}

.cd-404__item .cd-price__amount {
	font-size: 13.5px;
}

@media (min-width: 900px) {
	.cd-404__hero-inner {
		padding-block: 64px 60px;
	}

	.cd-404__code {
		font-size: 96px;
	}

	.cd-404__hero .cd-404__title {
		margin-top: 16px;
		font-size: 36px;
	}

	.cd-404__lede {
		margin-top: 12px;
		font-size: 15.5px;
	}

	.cd-404__actions {
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		margin-top: 26px;
	}

	.cd-404__actions .wp-block-button__link {
		font-size: 14.5px;
		padding: 15px 30px;
	}

	.cd-404__actions .is-style-outline .wp-block-button__link {
		padding: 13px 28px;
	}

	.cd-404__more {
		padding-block: 44px 48px;
	}

	.cd-404__more .cd-404__more-title {
		font-size: 22px;
		padding-bottom: 18px;
		border-bottom: 1px solid var(--cd-rule);
	}

	.cd-404__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin-top: 22px;
	}

	.cd-404__item img {
		height: 180px;
		border-radius: var(--cd-r-image);
	}

	.cd-404__item-title {
		margin-top: 9px;
		font-size: 13.5px;
	}

	.cd-404__item .cd-price {
		margin-top: 6px;
	}

	.cd-404__item .cd-price__amount {
		font-size: 15px;
	}
}

/* --------------------------------------------------------------------------
   Full-bleed opening bands meet the header.

   The site's block gap leaves a strip of paper between the header and the first
   section. Where that section is a full-bleed band — About's accent hero, the
   contact photo, the 404 band — the gap reads as a mistake rather than a section
   break, so it is closed at the seam.
   -------------------------------------------------------------------------- */

.cd-main:has(> .cd-page-band:first-child),
.cd-main:has(> .cd-contact__photo:first-child),
.cd-main:has(.wp-block-post-content > .cd-page-band:first-child),
.cd-main:has(.wp-block-post-content > .cd-contact__photo:first-child) {
	margin-block-start: 0;
	padding-block-start: 0;
}

.cd-main .wp-block-post-content > .cd-page-band:first-child,
.cd-main .wp-block-post-content > .cd-contact__photo:first-child,
.cd-main > .cd-page-band:first-child,
.cd-main > .cd-contact__photo:first-child {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   About — "How I grade"

   The shop's "What the grades mean" link points here, so the grading scale
   needs a real home with a stable #grades anchor. Same dark panel as the
   product page's grading aside, at column width.
   -------------------------------------------------------------------------- */

.cd-grades {
	margin-top: 26px;
	padding: 20px var(--cd-gutter) 22px;
	margin-inline: calc(var(--cd-gutter) * -1);
	border-radius: 0;
	/* Anchor links land under the sticky-ish header without this. */
	scroll-margin-top: 90px;
}

.cd-grades .cd-grades__eyebrow {
	color: var(--cd-on-dark-soft);
	margin: 0;
}

.cd-grades .cd-grades__title {
	margin: 9px 0 0;
	font: 800 19px/1.25 var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-card);
	text-wrap: balance;
}

.cd-grades .cd-grades__lede {
	margin: 9px 0 0;
	font: 400 12.5px/1.55 var(--cd-sans);
	color: var(--cd-on-dark-muted);
}

.cd-grades__list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cd-grades__list li {
	display: flex;
	align-items: baseline;
	gap: 11px;
	font: 400 13px/1.5 var(--cd-sans);
	color: var(--cd-on-dark);
}

/* The grade letter is a <strong> so the row stays one editable line. */
.cd-grades__list li > strong {
	flex: none;
	min-width: 26px;
	text-align: center;
	font: 700 10.5px var(--cd-mono);
	letter-spacing: .04em;
	background: rgba(255, 255, 255, .16);
	color: var(--cd-card);
	padding: 3px 6px;
	border-radius: var(--cd-r-badge);
}

/* Top of the scale carries the accent, exactly as the product page does. */
.cd-grades__list li:first-child > strong {
	background: var(--cd-accent);
	color: var(--cd-on-accent);
}

@media (min-width: 900px) {
	.cd-grades {
		margin-top: 32px;
		margin-inline: 0;
		padding: 24px 26px;
		border-radius: var(--cd-r-card);
	}

	.cd-grades .cd-grades__title {
		font-size: 22px;
	}

	.cd-grades .cd-grades__lede {
		font-size: 13px;
	}

	.cd-grades__list li {
		font-size: 13.5px;
	}
}