/* CLP – You Pick What We Test. Everything is scoped to #clp-pwt: the theme is untouched, and theme styles can't leak in. */

#clp-pwt.clp-pwt{
	/* CLP Brand & Design Standards v1.0, §3c. Nothing is added to this list without a version bump. */
	--clp-teal-600: #028090;   /* fills only: primary button. White text on top. Never text on light. */
	--clp-teal-700: #025E69;   /* teal text, links, secondary-button outline, callout rule */
	--clp-teal-900: #0C4A52;   /* dark surfaces: hero panel */
	--clp-teal-050: #E9F5F4;   /* card and callout backgrounds */
	--clp-ink-900: #1F2A2E;    /* all body copy, headings, default text */
	--clp-slate-500: #5B6B70;  /* captions, metadata, eyebrow labels. Never small body copy. */
	--clp-canvas: #FAFAF8;     /* default page background */
	--clp-white: #FFFFFF;
	--clp-border: #D6E1E5;     /* §6 card and form-field border */
	/* mint-400 (#02C39A) is reserved for "certified" signals and alert-700 (#B4530A) for recalls;
	   this page shows neither, so neither is used. */

	--clp-serif: Georgia, 'Times New Roman', serif;
	--clp-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;

	background: var(--clp-canvas);
	color: var(--clp-ink-900);
	font-family: var(--clp-sans);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	text-transform: none;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	/* Layout responds to the space the page is given, not the screen, so it
	   holds up inside narrow theme containers as well as full-width templates. */
	container: clp / inline-size;
}
#clp-pwt.clp-pwt--fonts{
	--clp-serif: 'Fraunces', Georgia, serif;
	--clp-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#clp-pwt.clp-pwt *, #clp-pwt.clp-pwt *::before, #clp-pwt.clp-pwt *::after{ box-sizing: border-box; }
/* Resets for what themes set globally (Hello Elementor, Elementor Site Kit): heading fonts,
   colours and caps; button nowrap, caps, pink hover. Every rule in this file starts with
   #clp-pwt, so it outranks theme and kit rules; :where() keeps these resets at the same
   weight as the component rules below, which come later and so win over them. */
#clp-pwt.clp-pwt :where(h1, h2, h3, p, ul, ol, dl, dd){ margin: 0; padding: 0; }
#clp-pwt.clp-pwt :where(h1, h2, h3){ color: inherit; font-family: inherit; font-weight: 600; font-size: inherit; line-height: 1.2; text-transform: none; letter-spacing: normal; }
#clp-pwt.clp-pwt :where(button){ white-space: normal; text-transform: none; letter-spacing: normal; font-weight: inherit; line-height: inherit; font-size: inherit; box-shadow: none; }
#clp-pwt.clp-pwt :where(a){ word-break: normal; }
#clp-pwt.clp-pwt :focus-visible{ outline: 2px solid var(--clp-teal-600); outline-offset: 3px; }
#clp-pwt.clp-pwt .clp-hero :focus-visible{ outline-color: var(--clp-white); }

#clp-pwt .clp-wrap{ max-width: 1248px; margin: 0 auto; padding: 0 24px; }
@container clp (min-width: 900px) { #clp-pwt .clp-wrap{ padding: 0 48px; } }

#clp-pwt .clp-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#clp-pwt .clp-icon{ flex-shrink: 0; }

/* type */
#clp-pwt .clp-h2{ font-family: var(--clp-serif); font-weight: 600; font-size: clamp(32px, 4.2cqi, 48px); line-height: 1.05; letter-spacing: -0.022em; }
#clp-pwt .clp-h3{ font-family: var(--clp-serif); font-weight: 600; font-size: clamp(24px, 2.6cqi, 30px); line-height: 1.15; letter-spacing: -0.015em; }
#clp-pwt .clp-lede{ margin-top: 12px; font-size: 18px; color: var(--clp-ink-900); max-width: 640px; }
#clp-pwt .clp-kicker{ font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clp-slate-500); }

/* buttons */
#clp-pwt.clp-pwt .clp-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
	font-family: var(--clp-sans); font-size: 16px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s;
}
#clp-pwt.clp-pwt .clp-btn:active{ transform: translateY(1px); }
#clp-pwt.clp-pwt .clp-btn--accent{ background: var(--clp-teal-600); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-btn--accent:hover{ background: var(--clp-teal-700); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-btn--line{ border: 1.5px solid var(--clp-teal-700); color: var(--clp-teal-700); background: transparent; min-height: 46px; font-size: 15px; }
#clp-pwt.clp-pwt .clp-btn--line:hover{ background: var(--clp-teal-050); color: var(--clp-teal-700); }
/* On the teal-900 hero, teal-600 isn't an approved pairing (about 2.1:1), so the
   primary inverts to white with teal-700 text (7.48:1) and the secondary is a white outline. */
#clp-pwt.clp-pwt .clp-hero .clp-btn--accent{ background: var(--clp-white); color: var(--clp-teal-700); }
#clp-pwt.clp-pwt .clp-hero .clp-btn--accent:hover{ background: var(--clp-teal-050); color: var(--clp-teal-700); }
#clp-pwt.clp-pwt .clp-btn--ghost{ border: 1.5px solid var(--clp-white); color: var(--clp-white); background: transparent; }
#clp-pwt.clp-pwt .clp-btn--ghost:hover{ background: var(--clp-teal-700); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-btn--dark{ background: var(--clp-ink-900); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-btn--dark:hover{ background: var(--clp-teal-900); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-btn--block{ display: flex; width: 100%; }
#clp-pwt.clp-pwt .clp-link{ background: none; border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--clp-teal-700); text-decoration: underline; cursor: pointer; }

/* ---------------- hero ---------------- */
#clp-pwt .clp-hero{ background: var(--clp-teal-900); color: var(--clp-white); padding: 64px 0 72px; }
#clp-pwt .clp-hero__inner{ display: grid; gap: 40px; }
@container clp (min-width: 1000px) { #clp-pwt .clp-hero{ padding: 96px 0; } #clp-pwt .clp-hero__inner{ grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; align-items: center; } }
#clp-pwt .clp-eyebrow{ display: inline-flex; align-items: center; gap: 9px; min-height: 30px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--clp-teal-700); color: var(--clp-white); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
#clp-pwt .clp-dot{ display: none; } /* a coloured dot reads as the mint 'certified' signal */
#clp-pwt.clp-pwt .clp-hero__title{ margin-top: 24px; font-family: var(--clp-serif); font-weight: 600; font-size: clamp(44px, 7cqi, 80px); line-height: 0.98; letter-spacing: -0.028em; color: var(--clp-white); max-width: 12ch; }
#clp-pwt .clp-hero__intro{ margin-top: 24px; font-size: clamp(17px, 1.6cqi, 20px); color: var(--clp-white); max-width: 620px; }
#clp-pwt .clp-hero__ctas{ margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
@container clp (max-width: 520px) { #clp-pwt .clp-hero__ctas .clp-btn{ width: 100%; } }
#clp-pwt .clp-hero__side{ display: grid; gap: 16px; }
#clp-pwt .clp-stat{ padding: 24px 26px; border-radius: 16px; background: transparent; border: 1px solid var(--clp-teal-700); }
#clp-pwt .clp-stat__value{ font-family: var(--clp-serif); font-size: 44px; font-weight: 600; line-height: 1; color: var(--clp-white); }
#clp-pwt .clp-stat__value--warm{ color: var(--clp-white); }
#clp-pwt .clp-stat__label{ margin-top: 8px; font-size: 15px; color: var(--clp-white); }
#clp-pwt .clp-hero__note{ display: flex; gap: 12px; align-items: flex-start; padding: 20px 24px; border-radius: 16px; border: 1px dashed var(--clp-teal-700); color: var(--clp-white); font-size: 14px; }
#clp-pwt .clp-hero__note .clp-icon{ color: var(--clp-white); width: 20px; height: 20px; margin-top: 1px; }

/* ---------------- the pick ---------------- */
#clp-pwt .clp-pick{ padding: 64px 0; background: var(--clp-canvas); scroll-margin-top: 24px; }
@container clp (min-width: 900px) { #clp-pwt .clp-pick{ padding: 88px 0; } }
#clp-pwt .clp-pick__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
#clp-pwt .clp-pick__head .clp-h2{ margin-top: 8px; outline: none; }
#clp-pwt .clp-dots{ display: flex; gap: 6px; padding-bottom: 10px; flex-shrink: 0; }
#clp-pwt .clp-dots span{ width: 30px; height: 5px; border-radius: 999px; background: var(--clp-border); }
#clp-pwt .clp-dots span.is-done{ background: var(--clp-slate-500); }
#clp-pwt .clp-dots span.is-now{ background: var(--clp-ink-900); }
@container clp (max-width: 600px) { #clp-pwt .clp-dots span{ width: 18px; } }

#clp-pwt .clp-fallback-list{ list-style: disc; padding-left: 22px; color: var(--clp-ink-900); }
#clp-pwt .clp-fallback-list li + li{ margin-top: 6px; }

#clp-pwt .clp-duel{ display: grid; gap: 16px; align-items: stretch; }
@container clp (min-width: 760px) { #clp-pwt .clp-duel{ grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 20px; } }
#clp-pwt .clp-duel__side{ display: flex; flex-direction: column; gap: 12px; }
#clp-pwt .clp-vs{ display: flex; align-items: center; justify-content: center; gap: 12px; }
#clp-pwt .clp-vs::before, #clp-pwt .clp-vs::after{ content: ''; flex: 1; height: 1px; background: var(--clp-border); }
@container clp (min-width: 760px) { #clp-pwt .clp-vs::before, #clp-pwt .clp-vs::after{ display: none; } }
#clp-pwt .clp-vs span{ width: 48px; height: 48px; border-radius: 999px; background: var(--clp-ink-900); color: var(--clp-white); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }

#clp-pwt.clp-pwt .clp-choice{
	flex: 1; display: flex; flex-direction: column; gap: 10px; width: 100%;
	padding: 28px; border-radius: 20px; border: 2px solid var(--clp-border); background: var(--clp-white); color: var(--clp-ink-900);
	text-align: left; font-family: var(--clp-sans); cursor: pointer; padding: 20px 22px;
	transition: border-color .15s, transform .15s, opacity .2s, box-shadow .15s;
}
#clp-pwt.clp-pwt .clp-choice:hover:not([disabled]){ border-color: var(--clp-ink-900); transform: translateY(-2px); }
#clp-pwt.clp-pwt .clp-choice[disabled]{ cursor: default; }
#clp-pwt.clp-pwt .clp-choice.is-picked{ border-color: var(--clp-ink-900); }
#clp-pwt.clp-pwt .clp-choice.is-other{ opacity: .55; }
#clp-pwt .clp-choice__name{ font-family: var(--clp-serif); font-size: clamp(22px, 2.8cqi, 34px); overflow-wrap: break-word; hyphens: auto; min-width: 0; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
#clp-pwt .clp-choice__blurb{ font-size: 16px; color: var(--clp-ink-900); }
#clp-pwt .clp-choice__cta{ margin-top: auto; padding-top: 12px; font-size: 15px; font-weight: 600; color: var(--clp-teal-700); }
#clp-pwt .clp-choice.is-picked .clp-choice__cta{ color: var(--clp-ink-900); }
#clp-pwt .clp-choice.is-picked .clp-choice__cta::before{ content: '✓ '; }

#clp-pwt .clp-split:empty{ display: none; }
@container clp (min-width: 760px) {
	#clp-pwt.clp-pwt .clp-choice{ min-height: 200px; padding: 28px; }
	#clp-pwt .clp-split{ min-height: 44px; }
	#clp-pwt .clp-split:empty{ display: block; }
}
@container clp (max-width: 759px) {
	#clp-pwt .clp-choice__cta{ padding-top: 4px; }
	#clp-pwt .clp-duel{ gap: 10px; }
}
/* pick your top few */
#clp-pwt .clp-picks{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
#clp-pwt.clp-pwt .clp-pickcard{
	position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 128px;
	padding: 20px 52px 20px 22px; border-radius: 18px; border: 2px solid var(--clp-border);
	background: var(--clp-white); color: var(--clp-ink-900); text-align: left; cursor: pointer;
	font-family: var(--clp-sans); transition: border-color .15s, background-color .15s, transform .15s;
}
#clp-pwt.clp-pwt .clp-pickcard:hover{ border-color: var(--clp-ink-900); transform: translateY(-2px); }
#clp-pwt.clp-pwt .clp-pickcard.is-picked{ border-color: var(--clp-teal-700); background: var(--clp-teal-050); }
#clp-pwt .clp-pickcard__rank{
	position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--clp-border); background: var(--clp-white);
	font-size: 14px; font-weight: 700; color: var(--clp-white);
}
#clp-pwt .clp-pickcard.is-picked .clp-pickcard__rank{ background: var(--clp-teal-600); border-color: var(--clp-teal-600); }
#clp-pwt .clp-pickcard.is-picked .clp-pickcard__rank.is-tick::after{
	content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 11px;
	border: solid var(--clp-white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
#clp-pwt .clp-pickcard__rank{ position: absolute; }
#clp-pwt .clp-pickcard__name{ font-family: var(--clp-serif); font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: break-word; hyphens: auto; }
#clp-pwt .clp-pickcard__blurb{ font-size: 15px; color: var(--clp-ink-900); }
#clp-pwt .clp-pickcard__screens{ font-size: 13px; color: var(--clp-slate-500); }
#clp-pwt .clp-pickcard__screens b{ color: var(--clp-ink-900); font-weight: 600; }
#clp-pwt .clp-pickcard__cost{ margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--clp-slate-500); font-variant-numeric: tabular-nums; }
#clp-pwt .clp-pickcard--other{ border-style: dashed; cursor: default; }
#clp-pwt .clp-pickcard--other.is-picked{ border-color: var(--clp-teal-700); border-style: solid; background: var(--clp-teal-050); }
#clp-pwt.clp-pwt .clp-input{
	margin-top: 4px; width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--clp-border);
	background: var(--clp-white); color: var(--clp-ink-900); font-family: var(--clp-sans); font-size: 15px;
}
#clp-pwt .clp-details{ display: block; }
#clp-pwt .clp-details > summary{
	cursor: pointer; font-family: var(--clp-serif); font-size: clamp(22px, 2.6cqi, 30px); font-weight: 600;
	letter-spacing: -0.015em; list-style-position: outside; padding-block: 4px;
}
#clp-pwt .clp-details[open] > summary{ margin-bottom: 8px; }
#clp-pwt .clp-box__form{ margin-top: 12px; }
#clp-pwt .clp-box__form givebutter-widget{ display: block; }
#clp-pwt .clp-split__bar{ height: 8px; border-radius: 999px; background: var(--clp-border); overflow: hidden; }
#clp-pwt .clp-split__fill{ height: 100%; border-radius: 999px; background: var(--clp-slate-500); width: 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
#clp-pwt .clp-split__fill.is-mine{ background: var(--clp-ink-900); }
#clp-pwt .clp-split__text{ margin-top: 7px; font-size: 14px; font-weight: 600; }

#clp-pwt .clp-pick__foot{ margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 52px; font-size: 15px; color: var(--clp-slate-500); }
#clp-pwt .clp-pick__foot .clp-icon{ color: var(--clp-slate-500); width: 18px; height: 18px; }
#clp-pwt .clp-first{ font-size: 15px; color: var(--clp-slate-500); }

/* results */
#clp-pwt .clp-results__head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--clp-border); }
#clp-pwt .clp-results__said{ font-size: 16px; font-weight: 600; color: var(--clp-ink-900); }
#clp-pwt .clp-results{ display: grid; gap: 28px; }
@container clp (min-width: 900px) { #clp-pwt .clp-results{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; } }
#clp-pwt .clp-rank{ list-style: none; margin-top: 20px; }
#clp-pwt .clp-rank li{ padding: 12px 0; border-bottom: 1px solid var(--clp-border); }
#clp-pwt .clp-rank__row{ display: flex; align-items: baseline; gap: 12px; }
#clp-pwt .clp-rank__n{ width: 22px; font-family: var(--clp-serif); font-size: 17px; font-weight: 600; color: var(--clp-slate-500); }
#clp-pwt .clp-rank__name{ flex: 1; font-weight: 600; }
#clp-pwt .clp-rank__pct{ font-size: 14px; font-weight: 600; color: var(--clp-slate-500); }
#clp-pwt .clp-rank .clp-split__bar{ margin: 8px 0 0 34px; height: 7px; }
#clp-pwt .clp-rank li.is-mine .clp-rank__name::after{ content: ' · your pick'; font-weight: 500; color: var(--clp-slate-500); font-size: 14px; }
#clp-pwt .clp-results__side{ display: flex; flex-direction: column; gap: 16px; }
#clp-pwt .clp-top{ padding: 26px; border-radius: 18px; background: var(--clp-teal-050); border-left: 4px solid var(--clp-teal-700); color: var(--clp-ink-900); } /* §6 callout */
#clp-pwt .clp-top .clp-kicker{ color: var(--clp-slate-500); }
#clp-pwt .clp-top .clp-top__name{ margin-top: 8px; font-family: var(--clp-serif); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
#clp-pwt .clp-top p{ margin-top: 10px; font-size: 15px; color: var(--clp-ink-900); }
#clp-pwt .clp-top__cta{ margin-top: 18px; }
#clp-pwt .clp-box{ padding: 22px 24px; border-radius: 18px; background: var(--clp-white); border: 1px solid var(--clp-border); }
#clp-pwt .clp-box h3{ font-size: 16px; font-weight: 700; }
#clp-pwt .clp-box p{ margin-top: 4px; font-size: 14px; color: var(--clp-slate-500); }
#clp-pwt .clp-box givebutter-signup-form{ display: block; margin-top: 12px; }

/* ---------------- cost ---------------- */
#clp-pwt .clp-cost{ background: var(--clp-white); color: var(--clp-ink-900); border-top: 1px solid var(--clp-border); border-bottom: 1px solid var(--clp-border); padding: 72px 0; }
@container clp (min-width: 900px) { #clp-pwt .clp-cost{ padding: 96px 0; } }
#clp-pwt .clp-cost__inner{ display: grid; gap: 40px; }
@container clp (min-width: 1000px) { #clp-pwt .clp-cost__inner{ grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 72px; align-items: center; } }
#clp-pwt .clp-cost__intro{ margin-top: 20px; font-size: 18px; color: var(--clp-ink-900); }
#clp-pwt .clp-cost__total{ margin-top: 28px; padding: 24px; border-radius: 16px; background: var(--clp-teal-050); border-left: 4px solid var(--clp-teal-700); } /* §6 callout */
#clp-pwt .clp-cost__total-label{ font-size: 14px; color: var(--clp-slate-500); }
#clp-pwt .clp-cost__total-value{ margin-top: 6px; font-family: var(--clp-serif); font-size: clamp(44px, 5cqi, 58px); font-weight: 600; line-height: 1; color: var(--clp-ink-900); }
#clp-pwt .clp-cost__total p{ margin-top: 10px; font-size: 15px; color: var(--clp-ink-900); }
#clp-pwt .clp-stat__source{ margin-top: 8px; font-size: 12px; color: var(--clp-white); opacity: .72; }
#clp-pwt .clp-hero__votelink{ align-self: center; color: var(--clp-white); font-size: 15px; font-weight: 600; text-decoration: underline; }
#clp-pwt .clp-cost__fine{ margin-top: 14px; font-size: 13.5px; color: var(--clp-slate-500); }
#clp-pwt .clp-cost__fine--source{ margin-top: 6px; font-size: 12.5px; }
#clp-pwt .clp-cost__closing{ margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--clp-ink-900); }
#clp-pwt .clp-guard__link{ margin-top: 20px; font-size: 15px; }
#clp-pwt .clp-cost__group{ font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clp-slate-500); padding: 0 0 10px; }
#clp-pwt .clp-cost__group ~ .clp-cost__group{ padding-top: 30px; }
#clp-pwt .clp-cost__row{ display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--clp-border); }
#clp-pwt .clp-cost__row dt{ font-size: 17px; }
#clp-pwt .clp-cost__row dd{ font-family: var(--clp-serif); font-size: 22px; font-weight: 600; white-space: nowrap; }

/* ---------------- studies ---------------- */
#clp-pwt .clp-studies{ padding: 72px 0; background: var(--clp-canvas); scroll-margin-top: 24px; }
@container clp (min-width: 900px) { #clp-pwt .clp-studies{ padding: 96px 0; } }
#clp-pwt .clp-studies__head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 36px; }
#clp-pwt .clp-stages{ list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; font-size: 14px; font-weight: 600; color: var(--clp-ink-900); }
#clp-pwt .clp-stages li{ position: relative; display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px; background: var(--clp-white); border: 1px solid var(--clp-border); }
#clp-pwt .clp-stages li:not(:last-child)::after{ content: '\2192'; position: absolute; right: -21px; color: var(--clp-slate-500); }
#clp-pwt .clp-stages li.is-last{ background: var(--clp-ink-900); border-color: var(--clp-ink-900); color: var(--clp-white); }

#clp-pwt .clp-cards{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
#clp-pwt .clp-card{ display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 18px; background: var(--clp-canvas); border: 1px solid var(--clp-border); } /* §6 card */
#clp-pwt .clp-card--funding{ background: var(--clp-teal-050); border-left: 4px solid var(--clp-teal-700); } /* §6 callout: the study that needs money now */
#clp-pwt .clp-card--upcoming{ border-style: dashed; }
#clp-pwt .clp-badge{ align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clp-slate-500); } /* §6 eyebrow */
#clp-pwt .clp-badge--funding{ color: var(--clp-ink-900); }
#clp-pwt.clp-pwt .clp-card__title{ font-family: var(--clp-serif); font-size: 27px; overflow-wrap: break-word; hyphens: auto; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
#clp-pwt .clp-card__blurb{ font-size: 15px; color: var(--clp-ink-900); }
#clp-pwt .clp-card__foot{ margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
#clp-pwt .clp-card__votes{ font-size: 13px; color: var(--clp-slate-500); }
#clp-pwt .clp-card__goal{ min-height: 20px; }
#clp-pwt .clp-card__meter{ height: 10px; border-radius: 999px; background: var(--clp-border); overflow: hidden; }
#clp-pwt .clp-card__meter span{ display: block; height: 100%; border-radius: 999px; background: var(--clp-ink-900); }
#clp-pwt .clp-tiers{ display: grid; gap: 8px; }
#clp-pwt.clp-pwt .clp-tier{
	display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 11px 14px;
	border-radius: 10px; border: 1.5px solid var(--clp-border); background: var(--clp-white); color: var(--clp-ink-900);
	font-family: var(--clp-sans); cursor: pointer; transition: border-color .15s, background-color .15s;
}
#clp-pwt.clp-pwt .clp-tier:hover{ border-color: var(--clp-teal-600); background: var(--clp-teal-050); }
#clp-pwt .clp-tier b{ font-family: var(--clp-serif); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#clp-pwt .clp-tier span{ font-size: 13.5px; color: var(--clp-slate-500); }
#clp-pwt .clp-tiers--compact .clp-tier{ padding: 9px 12px; }
#clp-pwt .clp-tiers--compact .clp-tier b{ font-size: 16px; }
#clp-pwt .clp-match{ font-size: 13px; font-weight: 700; color: var(--clp-teal-700); }
#clp-pwt .clp-results-note{ margin-top: 12px; font-size: 13.5px; color: var(--clp-ink-900); }
#clp-pwt .clp-top .clp-results-note{ opacity: .85; }
#clp-pwt .clp-monthly{ font-size: 14px; color: var(--clp-slate-500); }
#clp-pwt .clp-card__note{ font-size: 13px; font-weight: 600; color: var(--clp-ink-900); }
#clp-pwt .clp-card givebutter-button, #clp-pwt .clp-top givebutter-button{ display: block; }
#clp-pwt.clp-pwt .clp-gb-fallback[hidden]{ display: none; }
#clp-pwt.clp-pwt .clp-gb-fallback--primary{ background: var(--clp-teal-600); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-gb-fallback--primary:hover{ background: var(--clp-teal-700); color: var(--clp-white); }
#clp-pwt.clp-pwt .clp-gb-fallback--secondary{ background: transparent; border: 1.5px solid var(--clp-teal-700); color: var(--clp-teal-700); min-height: 46px; font-size: 15px; }
#clp-pwt.clp-pwt .clp-gb-fallback--secondary:hover{ background: var(--clp-teal-050); color: var(--clp-teal-700); }

/* ---------------- notify ---------------- */
#clp-pwt .clp-notify{ padding: 48px 0; background: var(--clp-white); border-top: 1px solid var(--clp-border); border-bottom: 1px solid var(--clp-border); scroll-margin-top: 24px; }
#clp-pwt .clp-notify__inner{ display: grid; gap: 20px; align-items: center; }
@container clp (min-width: 900px) { #clp-pwt .clp-notify__inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
#clp-pwt .clp-notify p{ margin-top: 6px; color: var(--clp-ink-900); }

/* ---------------- guardrails ---------------- */
#clp-pwt .clp-guard{ padding: 72px 0; background: var(--clp-canvas); }
#clp-pwt .clp-guard__inner{ display: grid; gap: 40px; }
@container clp (min-width: 1000px) { #clp-pwt .clp-guard__inner{ grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; align-items: center; } }
#clp-pwt .clp-guard__icon{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 12px; background: var(--clp-white); border: 1px solid var(--clp-border); color: var(--clp-ink-900); } /* icons are ink unless they mean certified */
#clp-pwt .clp-guard .clp-h2{ font-size: clamp(30px, 3.4cqi, 42px); }
#clp-pwt .clp-guard__grid{ display: grid; gap: 26px 40px; }
@container clp (min-width: 700px) { #clp-pwt .clp-guard__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#clp-pwt .clp-guard__grid h3{ font-family: var(--clp-sans); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
#clp-pwt .clp-guard__grid p{ font-size: 15px; color: var(--clp-ink-900); }

/* ---------------- monthly ---------------- */
#clp-pwt .clp-lab{ padding: 60px 0; background: var(--clp-teal-050); color: var(--clp-ink-900); scroll-margin-top: 24px; }
#clp-pwt .clp-lab__inner{ display: grid; gap: 24px; align-items: center; }
@container clp (min-width: 900px) { #clp-pwt .clp-lab__inner{ grid-template-columns: minmax(0, 1fr) auto; gap: 72px; } }
#clp-pwt .clp-lab .clp-h2{ font-size: clamp(30px, 3.4cqi, 42px); color: var(--clp-ink-900); }
#clp-pwt .clp-lab p{ margin-top: 12px; font-size: 18px; max-width: 680px; }
#clp-pwt .clp-lab__cta{ min-width: 240px; }

@media (prefers-reduced-motion: reduce) {
	#clp-pwt.clp-pwt *, #clp-pwt.clp-pwt *::before, #clp-pwt.clp-pwt *::after{ transition: none !important; }
}