/* ==========================================================================
   Informational pages

   About, Contact, Brands, the policies and the FAQ. One hero treatment, one
   set of content widths and one section rhythm, so the informational side of
   the site matches the shop rather than looking like stock WordPress.

   Loads on pages only — not on the shop or the guides.
   ========================================================================== */

:root {
	/* Long-form legal text sits in a narrow column; marketing sections and
	   card grids get the wider one. */
	--cc-page-read: 46rem;   /* ~740px */
	--cc-page-wide: 72rem;   /* ~1150px */
}

/* --------------------------------------------------------------------------
   Shared width helpers
   -------------------------------------------------------------------------- */
.cc-page__contained {
	width: 100%;
	max-width: var(--cc-page-read);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	padding-block: var(--cc-space-6);
}

.cc-page__contained--wide {
	max-width: var(--cc-page-wide);
}

.cc-page__body > *:first-child {
	margin-top: 0;
}

/* ==========================================================================
   Page hero
   ========================================================================== */
.cc-page-hero {
	background: var(--cc-color-surface);
	border-bottom: 1px solid var(--cc-color-border);
	padding-block: var(--cc-space-6) var(--cc-space-5);
}

.cc-page-hero__inner {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
}

.cc-page-hero--compact {
	padding-block: var(--cc-space-5) var(--cc-space-4);
}

.cc-page-hero__title {
	font-size: var(--cc-text-2xl);
	margin: 0 0 var(--cc-space-3);
}

.cc-page-hero__intro {
	font-size: var(--cc-text-md);
	line-height: var(--cc-leading-normal);
	max-width: 58ch;
	margin: 0;
}

.cc-page-hero__meta {
	margin: var(--cc-space-3) 0 0;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-body);
	opacity: 0.8;
}

/* ==========================================================================
   Buttons
   Defined here so every informational page shares one button, rather than
   each page inventing its own.
   ========================================================================== */
.cc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75em 1.4em;
	border: 1px solid var(--cc-color-button-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-button-bg);
	color: var(--cc-color-button-text);
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: var(--cc-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cc-button:hover,
.cc-button:focus-visible {
	background: var(--cc-color-button-bg-hover);
	color: var(--cc-color-button-text-hover);
}

.cc-button--lg {
	padding: 0.9em 1.8em;
	font-size: var(--cc-text-base);
}

.cc-button--ghost {
	background: transparent;
	color: var(--cc-color-heading);
	border-color: var(--cc-color-border);
}

.cc-button--ghost:hover,
.cc-button--ghost:focus-visible {
	background: transparent;
	border-color: var(--cc-color-heading);
	color: var(--cc-color-heading);
}

/* On the dark green CTA band. */
.cc-button--onDark {
	background: transparent;
	border-color: rgba(248, 249, 249, 0.5);
	color: var(--cc-color-background);
}

.cc-button--onDark:hover,
.cc-button--onDark:focus-visible {
	background: var(--cc-color-background);
	border-color: var(--cc-color-background);
	color: var(--cc-color-heading);
}

/* ==========================================================================
   Icons
   ========================================================================== */
.cc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	display: block;
}

/* ==========================================================================
   Policy pages
   ========================================================================== */
.cc-policy {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	padding-block: var(--cc-space-6);
}

.cc-policy__grid {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: var(--cc-space-6);
	align-items: start;
}

.cc-policy__grid--no-toc {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--cc-page-read);
	margin-inline: auto;
}

.cc-policy__body {
	/* Legal text stays inside a comfortable measure even though the grid
	   column is wider. */
	max-width: var(--cc-page-read);
}

.cc-policy__lead {
	font-size: var(--cc-text-md);
	margin-bottom: var(--cc-space-5);
	color: var(--cc-color-body);
}

/* Table of contents ------------------------------------------------------- */
.cc-toc__inner {
	position: sticky;
	top: var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	background: var(--cc-color-surface);
	padding: var(--cc-space-4);
}

.cc-toc__title {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-heading);
	margin: 0 0 var(--cc-space-3);
}

.cc-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-toc__list li {
	counter-increment: toc;
	display: flex;
	gap: 0.6em;
	font-size: var(--cc-text-sm);
	line-height: var(--cc-leading-snug);
}

.cc-toc__list li::before {
	content: counter(toc);
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-accent);
	flex: none;
	padding-top: 0.15em;
}

.cc-toc__list a {
	color: var(--cc-color-body);
	text-decoration: none;
}

.cc-toc__list a:hover,
.cc-toc__list a:focus-visible {
	color: var(--cc-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Policy sections --------------------------------------------------------- */
.cc-policy-section {
	padding-top: var(--cc-space-5);
	margin-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border);
	/* Anchored jumps should not tuck the heading under the sticky header. */
	scroll-margin-top: var(--cc-space-5);
}

.cc-policy-section:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.cc-policy-section__title {
	font-size: var(--cc-text-lg);
	margin: 0 0 var(--cc-space-3);
}

.cc-policy-section__body > *:last-child {
	margin-bottom: 0;
}

.cc-policy-section__body p,
.cc-policy-section__body li {
	max-width: none;
}

.cc-policy-section__body ul,
.cc-policy-section__body ol {
	padding-left: 1.3em;
	margin-bottom: 1em;
}

.cc-policy-section__body li {
	margin-bottom: 0.4em;
}

.cc-policy-section__body li::marker {
	color: var(--cc-color-accent);
}

/* Related policies -------------------------------------------------------- */
.cc-policy-related {
	margin-top: var(--cc-space-6);
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-color-border);
}

.cc-policy-related__title {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	margin: 0 0 var(--cc-space-3);
}

.cc-policy-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
}

.cc-policy-related a {
	display: inline-block;
	padding: 0.4em 0.9em;
	border: 1px solid var(--cc-color-border);
	border-radius: 999px;
	background: var(--cc-color-surface);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-heading);
	text-decoration: none;
}

.cc-policy-related a:hover,
.cc-policy-related a:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent);
}

/* ==========================================================================
   Help panel — the "questions?" block at the foot of a policy
   ========================================================================== */
.cc-help-panel {
	margin-top: var(--cc-space-6);
	padding: var(--cc-space-4) var(--cc-space-5);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-left: 4px solid var(--cc-color-accent);
	border-radius: var(--cc-radius-md);
}

.cc-help-panel--wide {
	margin-inline: auto;
}

.cc-help-panel__title {
	font-size: var(--cc-text-lg);
	margin: 0 0 var(--cc-space-2);
}

.cc-help-panel p {
	margin-bottom: var(--cc-space-3);
	max-width: none;
}

.cc-help-panel p:last-child {
	margin-bottom: 0;
}

.cc-help-panel__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-4);
}

.cc-help-panel__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--cc-font-heading);
	font-weight: 600;
	text-decoration: none;
	color: var(--cc-color-accent);
}

.cc-help-panel__contacts a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ==========================================================================
   Accordion (FAQ and quick answers)
   ========================================================================== */
.cc-accordion {
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	background: var(--cc-color-surface);
	overflow: hidden;
}

.cc-accordion__item + .cc-accordion__item {
	border-top: 1px solid var(--cc-color-border);
}

.cc-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	padding: var(--cc-space-4);
	cursor: pointer;
	font-family: var(--cc-font-heading);
	font-weight: 600;
	font-size: var(--cc-text-md);
	color: var(--cc-color-heading);
	list-style: none;
}

/* Replace the native disclosure triangle with our own marker. */
.cc-accordion__summary::-webkit-details-marker { display: none; }
.cc-accordion__summary::marker { content: ""; }

.cc-accordion__summary::after {
	content: "";
	flex: none;
	width: 0.65em;
	height: 0.65em;
	border-right: 2px solid var(--cc-color-accent);
	border-bottom: 2px solid var(--cc-color-accent);
	transform: rotate(45deg) translateY(-0.15em);
	transition: transform 0.15s ease;
}

.cc-accordion__item[open] .cc-accordion__summary::after {
	transform: rotate(-135deg) translateY(-0.15em);
}

.cc-accordion__summary:hover,
.cc-accordion__summary:focus-visible {
	background: var(--cc-color-background);
}

.cc-accordion__body {
	padding: 0 var(--cc-space-4) var(--cc-space-4);
}

.cc-accordion__body > *:last-child {
	margin-bottom: 0;
}

.cc-accordion__body p,
.cc-accordion__body li {
	max-width: none;
}

.cc-accordion__link {
	display: inline-block;
	margin-top: var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-weight: 600;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-accent);
}

/* ==========================================================================
   About — hero
   ========================================================================== */
.cc-about-hero {
	background: var(--cc-color-surface);
	border-bottom: 1px solid var(--cc-color-border);
	padding-block: var(--cc-space-6);
}

.cc-about-hero__inner {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--cc-space-6);
	align-items: center;
}

.cc-about-hero__title {
	font-size: var(--cc-text-3xl);
	margin: 0 0 var(--cc-space-3);
}

.cc-about-hero__lead {
	font-size: var(--cc-text-md);
	/* Deliberately short: the brief called out text running the full width
	   of the viewport as the problem with the old page. */
	max-width: 48ch;
	margin-bottom: var(--cc-space-3);
}

.cc-about-hero__sub {
	max-width: 48ch;
	margin-bottom: var(--cc-space-4);
}

.cc-about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
}

.cc-about-hero__media {
	margin: 0;
	/* The figure needs a resolved height of its own: the image below is
	   height:100%, and inside an auto-height parent that collapses to zero. */
	aspect-ratio: 4 / 3;
	max-height: 30rem;
	border-radius: var(--cc-radius-lg);
	border: 1px solid var(--cc-color-border);
	overflow: hidden;
	background: var(--cc-color-background);
}

.cc-about-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   About — statistics
   ========================================================================== */
.cc-stats__inner {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	padding-block: var(--cc-space-6);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cc-space-4);
}

.cc-stat {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-4);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	/* Equal height regardless of label length. */
	height: 100%;
}

.cc-stat__icon {
	color: var(--cc-color-accent);
}

.cc-stat__icon .cc-icon {
	width: 1.6rem;
	height: 1.6rem;
}

.cc-stat__value {
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-xl);
	font-weight: 800;
	line-height: 1;
	color: var(--cc-color-heading);
	text-transform: uppercase;
}

.cc-stat__label {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-body);
	line-height: var(--cc-leading-snug);
	margin-top: auto;
}

/* ==========================================================================
   About — story
   ========================================================================== */
.cc-story__inner {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	padding-block: var(--cc-space-6);
	border-top: 1px solid var(--cc-color-border);
}

.cc-story__head {
	margin-bottom: var(--cc-space-5);
	max-width: 40ch;
}

.cc-story__title {
	font-size: var(--cc-text-xl);
	margin: 0;
}

.cc-story__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cc-space-6);
}

.cc-story__col h3 {
	font-size: var(--cc-text-lg);
	margin: 0 0 var(--cc-space-3);
}

.cc-story__col p {
	max-width: none;
}

.cc-story__col p:last-child {
	margin-bottom: 0;
}

.cc-story__quote {
	margin: var(--cc-space-6) 0 0;
	padding: var(--cc-space-4) var(--cc-space-5);
	border-left: 4px solid var(--cc-color-accent);
	background: var(--cc-color-surface);
	border-radius: var(--cc-radius-md);
	font-size: var(--cc-text-md);
	font-style: italic;
	color: var(--cc-color-heading);
	max-width: 64ch;
}

/* ==========================================================================
   About — why cards
   ========================================================================== */
.cc-why__inner {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	padding-block: var(--cc-space-6);
	border-top: 1px solid var(--cc-color-border);
}

.cc-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--cc-space-4);
}

.cc-why-card {
	display: flex;
	flex-direction: column;
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cc-why-card:hover {
	border-color: var(--cc-color-accent);
	box-shadow: 0 10px 24px var(--cc-color-shadow);
	transform: translateY(-3px);
}

.cc-why-card__media {
	aspect-ratio: 3 / 2;
	border-bottom: 1px solid var(--cc-color-border);
	background: var(--cc-color-background);
}

.cc-why-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-why-card__body {
	padding: var(--cc-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	flex: 1;
}

.cc-why-card__title {
	font-size: var(--cc-text-lg);
	margin: 0;
}

.cc-why-card__text {
	margin: 0;
	font-size: var(--cc-text-sm);
	max-width: none;
	flex: 1;
}

.cc-why-card__link {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: var(--cc-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	text-decoration: none;
}

.cc-why-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cc-cta-band {
	background: var(--cc-color-heading);
	color: var(--cc-color-background);
	padding-block: var(--cc-space-7);
	margin-top: var(--cc-space-6);
}

.cc-cta-band__inner {
	width: 100%;
	max-width: var(--cc-page-wide);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
	text-align: center;
}

.cc-cta-band__title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-2xl);
	text-transform: uppercase;
	color: var(--cc-color-background);
	margin: 0 0 var(--cc-space-3);
}

.cc-cta-band__text {
	margin: 0 auto var(--cc-space-4);
	max-width: 48ch;
	color: rgba(248, 249, 249, 0.85);
}

.cc-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
	justify-content: center;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.cc-contact-direct {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--cc-space-3);
}

.cc-contact-direct__item {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	padding: var(--cc-space-3) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	background: var(--cc-color-surface);
	text-decoration: none;
	color: var(--cc-color-heading);
	transition: border-color 0.15s ease;
}

a.cc-contact-direct__item:hover,
a.cc-contact-direct__item:focus-visible {
	border-color: var(--cc-color-accent);
}

.cc-contact-direct__item .cc-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--cc-color-accent);
}

.cc-contact-direct__label {
	display: block;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-body);
}

.cc-contact-direct__value {
	display: block;
	font-family: var(--cc-font-heading);
	font-weight: 700;
	color: var(--cc-color-heading);
}

/* Help cards --------------------------------------------------------------- */
.cc-help-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--cc-space-4);
}

.cc-help-card {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-4);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	height: 100%;
}

.cc-help-card__icon {
	color: var(--cc-color-accent);
}

.cc-help-card__icon .cc-icon {
	width: 1.6rem;
	height: 1.6rem;
}

.cc-help-card__title {
	font-size: var(--cc-text-lg);
	margin: 0;
}

.cc-help-card__text {
	margin: 0;
	font-size: var(--cc-text-sm);
	max-width: none;
	flex: 1;
}

.cc-help-card__link {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: var(--cc-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	text-decoration: none;
	margin-top: auto;
}

.cc-help-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Contact split ------------------------------------------------------------ */
.cc-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--cc-space-6);
	align-items: start;
}

.cc-contact-split__title {
	font-size: var(--cc-text-lg);
	margin: 0 0 var(--cc-space-3);
}

.cc-contact-split__note {
	font-size: var(--cc-text-sm);
}

.cc-tick-list {
	list-style: none;
	margin: 0 0 var(--cc-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-tick-list li {
	position: relative;
	padding-left: 1.6em;
	font-size: var(--cc-text-sm);
}

.cc-tick-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.5em;
	height: 0.85em;
	border-right: 2px solid var(--cc-color-accent);
	border-bottom: 2px solid var(--cc-color-accent);
	transform: rotate(45deg);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.cc-form-card {
	padding: var(--cc-space-5);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	scroll-margin-top: var(--cc-space-5);
}

.cc-form-card__title {
	font-size: var(--cc-text-lg);
	margin: 0 0 var(--cc-space-2);
}

.cc-form-card__intro {
	font-size: var(--cc-text-sm);
	margin-bottom: var(--cc-space-4);
}

.cc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cc-space-3) var(--cc-space-4);
	margin-bottom: var(--cc-space-4);
}

.cc-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1);
}

.cc-form__field--full { grid-column: 1 / -1; }

.cc-form__field label {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	font-weight: 600;
	color: var(--cc-color-heading);
}

.cc-form__req { color: var(--cc-color-accent); }

.cc-form__field input,
.cc-form__field select,
.cc-form__field textarea {
	width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-background);
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-base);
	color: var(--cc-color-body);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-form__field textarea { resize: vertical; min-height: 9rem; }

.cc-form__field input:focus,
.cc-form__field select:focus,
.cc-form__field textarea:focus {
	outline: none;
	border-color: var(--cc-color-accent);
	/* A ring rather than a colour change alone, so the focused field is
	   obvious to someone tabbing through. */
	box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.18);
}

/* The honeypot must be unreachable but not display:none — some bots skip
   hidden fields, and some screen readers announce them. */
.cc-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Notices ------------------------------------------------------------------ */
.cc-notice {
	padding: var(--cc-space-3) var(--cc-space-4);
	border-radius: var(--cc-radius-sm);
	margin-bottom: var(--cc-space-4);
	border: 1px solid;
}

.cc-notice p { margin: 0.3em 0 0; max-width: none; }

.cc-notice--success {
	background: #EDF7ED;
	border-color: #B8DDB8;
	color: #1E4620;
}

.cc-notice--error {
	background: var(--cc-color-error-bg);
	border-color: var(--cc-color-error);
	color: var(--cc-color-error);
}

/* ==========================================================================
   Brands
   ========================================================================== */
.cc-brand-jump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-1);
	padding-bottom: var(--cc-space-5);
	border-bottom: 1px solid var(--cc-color-border);
	margin-bottom: var(--cc-space-5);
}

.cc-brand-jump a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1em;
	padding: 0.3em;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-heading);
	text-decoration: none;
}

.cc-brand-jump a:hover,
.cc-brand-jump a:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent);
}

.cc-brand-group {
	margin-bottom: var(--cc-space-6);
	scroll-margin-top: var(--cc-space-5);
}

.cc-brand-group__letter {
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-lg);
	color: var(--cc-color-accent);
	margin: 0 0 var(--cc-space-3);
	padding-bottom: var(--cc-space-2);
	border-bottom: 1px solid var(--cc-color-border);
}

.cc-brand-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
	gap: var(--cc-space-3);
}

.cc-brand-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-space-1);
	height: 100%;
	padding: var(--cc-space-4);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-md);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cc-brand-card__link:hover,
.cc-brand-card__link:focus-visible {
	border-color: var(--cc-color-accent);
	box-shadow: 0 6px 16px var(--cc-color-shadow);
	transform: translateY(-2px);
}

/* Stands in for the manufacturer logo until real files are supplied. The
   card keeps its shape when an <img> replaces this. */
.cc-brand-card__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--cc-space-2);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-background);
	border: 1px solid var(--cc-color-border);
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-lg);
	font-weight: 800;
	color: var(--cc-color-heading);
}

.cc-brand-card__name {
	font-family: var(--cc-font-heading);
	font-weight: 700;
	font-size: var(--cc-text-base);
	color: var(--cc-color-heading);
	line-height: var(--cc-leading-snug);
}

.cc-brand-card__count {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	opacity: 0.75;
	margin-top: auto;
	padding-top: var(--cc-space-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.cc-policy__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cc-space-5);
	}

	/* The contents list stops being a sidebar and becomes a summary block. */
	.cc-toc__inner {
		position: static;
	}

	.cc-about-hero__inner,
	.cc-story__columns,
	.cc-contact-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-about-hero__media {
		order: -1;
	}

	.cc-stats__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.cc-page__contained,
	.cc-policy {
		padding-block: var(--cc-space-5);
	}

	.cc-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-form-card {
		padding: var(--cc-space-4);
	}

	.cc-brand-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cc-cta-band {
		padding-block: var(--cc-space-6);
	}
}

/* FAQ topics ---------------------------------------------------------------
   Each question is its own panel, grouped under the topic it belongs to. */
.cc-faq-topic {
	margin-bottom: var(--cc-space-5);
}

.cc-faq-topic__title {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-accent);
	margin: 0 0 var(--cc-space-3);
	padding-bottom: var(--cc-space-2);
	border-bottom: 1px solid var(--cc-color-border);
}