/* Evertreen Carbon Project Checker.

   Built on the site's own page format rather than beside it. The first version inherited
   geo.css, which is the older GEO-page layout: one narrow centred column with its own
   palette. It read as a different product bolted onto the site, because it was one.

   What the site actually does, and what this now does, is full-bleed sections of 90px
   alternating white against --color-bg, a dark green hero, .container for width, cards at
   --radius-4 on #e5e5e2, and pill buttons at --radius-5. Every colour, radius, spacing
   step and font here comes from the tokens in app.css. Nothing is redefined locally
   except the concern bands, which carry meaning rather than brand.

   Scoped under .cp-page throughout, so nothing leaks into the rest of the site. */

.cp-page{
  /* Band colours are derived from the brand palette rather than a generic traffic-light
     ramp, and every band also carries a text label and an icon so it survives greyscale
     and screen readers. Colour is never the only signal. */
  --cp-band-limited:#008636;
  --cp-band-some:#C8E662;
  --cp-band-significant:#C97A16;
  --cp-band-serious:#A4423A;
  --cp-band-insufficient:#7E8A84;

  --cp-ink:#111;
  /* The site's placeholder grey is #828282, which is 3.5:1 on white: fine for a form
     placeholder, under AA for the secondary copy this page uses it for. */
  --cp-muted:#5F5F5F;
  --cp-line:#e5e5e2;

  background:var(--color-bg);
  color:var(--cp-ink);
}

/* The site's global rules paint every heading white for use on the green hero. Inside a
   content section they have to be readable on paper. */
.cp-page h2,.cp-page h3,.cp-page h4{color:var(--color-dark)}
.cp-page h2{font-family:"OnestBold",sans-serif;font-size:2rem;margin:0 0 var(--spacing-5)}
.cp-page h3{font-family:"OnestBold",sans-serif;font-size:1.25rem;margin:0 0 var(--spacing-3)}
.cp-page p{font-family:"OnestRegular",sans-serif;font-size:1rem;line-height:1.62;margin:0 0 var(--spacing-4)}
.cp-page a{color:var(--color-primary)}

/* ---------- section rhythm, straight from the site's content pages ---------- */
.cp-section{padding:90px 0}
.cp-section--tight{padding:44px 0}
/* A section with nothing in it yet should take no room, not 90px of it. */
.cp-section--empty{padding:0}
.cp-section--white{background:#fff}
.cp-section > .container{width:85%;max-width:1200px;margin:0 auto}
/* A reading column. Prose past about 70 characters a line stops being read. */
.cp-read{max-width:820px;margin:0 auto}
.cp-read--narrow{max-width:680px}

/* ---------- hero ---------- */
.cp-hero{background:var(--color-primary);padding:230px 0 var(--spacing-11)}
@media(max-width:992px){.cp-hero{padding-top:200px}}
@media(max-width:576px){.cp-hero{padding-top:150px}}
.cp-hero .container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-5);text-align:center;max-width:900px}
.cp-hero h1{margin:0;color:var(--color-light);font-family:"OnestBold",sans-serif;font-size:3rem;line-height:1.12}
.cp-hero--project h1{font-size:2.4rem}
.cp-page .cp-hero__lede{margin:0;max-width:640px;color:var(--color-primary-light);
  font-family:"OnestLight",sans-serif;font-size:1.15rem;line-height:1.6;text-wrap:balance}
.cp-hero__meta{color:var(--color-primary-light);font-family:"OnestRegular",sans-serif;font-size:.9rem}
.cp-hero .breadcrumb{color:var(--color-primary-light);font-size:.84rem}
.cp-hero .breadcrumb a{color:var(--color-primary-light);text-decoration:none}
.cp-hero .breadcrumb a:hover{color:var(--color-light)}
@media(max-width:768px){.cp-hero h1{font-size:2.1rem}.cp-hero--project h1{font-size:1.7rem}}

/* Sections that follow the hero and overlap it, the way the offsetting page does. */
.cp-hero--overlap{padding-bottom:var(--spacing-14)}
.cp-lift{margin-top:-260px;position:relative;z-index:5}
@media(max-width:768px){.cp-hero--overlap{padding-bottom:var(--spacing-11)}.cp-lift{margin-top:0}}

/* ---------- chips and badges ---------- */
.cp-badge-row{display:flex;flex-wrap:wrap;gap:var(--spacing-3);align-items:center;justify-content:center}
.cp-chip{display:inline-block;padding:6px 14px;border-radius:var(--radius-7);background:var(--color-success);
  color:var(--color-primary);font-family:"OnestBold",sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.cp-chip--neutral{background:rgba(255,255,255,.16);color:var(--color-light)}

/* ---------- concern band ---------- */
.cp-band{display:inline-flex;align-items:center;gap:9px;border-radius:var(--radius-7);padding:8px 18px;
  font-family:"OnestBold",sans-serif;font-size:.95rem;border:2px solid transparent;background:#fff}
.cp-band__icon{font-size:1.05rem;line-height:1}
.cp-band--limited_concerns{background:rgba(0,134,54,.12);color:#00611d;border-color:var(--cp-band-limited)}
.cp-band--some_concerns{background:rgba(200,230,98,.35);color:#3d4a13;border-color:#9dbc3c}
.cp-band--significant_concerns{background:rgba(201,122,22,.14);color:#7a4a0a;border-color:var(--cp-band-significant)}
.cp-band--serious_concerns{background:rgba(164,66,58,.13);color:#7d2f28;border-color:var(--cp-band-serious)}
.cp-band--insufficient_information{background:rgba(126,138,132,.14);color:#4b5551;border-color:var(--cp-band-insufficient)}

/* On the green hero the translucent band fills go muddy and the darker text loses its
   contrast against the green behind it. On paper they are right, so only the hero is
   overridden: a solid white pill, with the band colour kept as the border and the text. */
.cp-hero .cp-band{background:#fff}
.cp-hero .cp-band--limited_concerns{color:#00611d}
.cp-hero .cp-band--some_concerns{color:#3d4a13}
.cp-hero .cp-band--significant_concerns{color:#7a4a0a}
.cp-hero .cp-band--serious_concerns{color:#7d2f28}
.cp-hero .cp-band--insufficient_information{color:#4b5551}

/* ---------- cards, the site's panel ---------- */
.cp-card{background:#fff;border:1px solid var(--cp-line);border-radius:var(--radius-4);padding:var(--spacing-6)}
/* Body text in a card is left aligned. Centring it rags both edges of a narrow column
   and makes every card a different shape; the heading above the grid is what centres a
   section, not the prose inside it. */
.cp-section .cp-offers .cp-card{text-align:left;display:flex;flex-direction:column;gap:var(--spacing-3)}
.cp-section .cp-offers .cp-card h3{margin:0}
.cp-section .cp-offers .cp-card p{margin:0}

/* A panel of prose.

   The prose sections used to be a centred 2rem heading with one small paragraph floating
   underneath it in ninety pixels of empty section. Nothing else on the site does that:
   evertreen.com puts its content inside a panel or a grid, and text on its own is only
   ever a lede under a heading. So the reading column becomes a panel, the same card the
   rest of this page already uses, and the prose inside it goes up to a comfortable
   reading size rather than staying at the size of a caption.

   On a white section the panel takes the page's own background, because a white card on
   white is an invisible card and the padding then reads as an accident. */
.cp-panel{background:#fff;border:1px solid var(--cp-line);border-radius:var(--radius-4);
  padding:var(--spacing-8);text-align:left}
.cp-section--white .cp-panel{background:var(--color-bg);border-color:transparent}
.cp-page .cp-panel p{font-size:1.05rem;line-height:1.7}
.cp-page .cp-panel p:last-child{margin-bottom:0}
@media(max-width:768px){.cp-panel{padding:var(--spacing-6)}}

/* The site has no visually-hidden utility, so the search label was rendering as dark
   text on the green hero. It is there for screen readers; the placeholder does the
   visible work. */
.cp-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- search ---------- */
.cp-search{margin:0}
.cp-search__row{display:flex;gap:var(--spacing-3);flex-wrap:wrap}
.cp-search__input{flex:1 1 320px;min-width:0;padding:16px 22px;font-size:1.05rem;font-family:"OnestRegular",sans-serif;
  border:1px solid var(--cp-line);border-radius:var(--radius-7);background:#fff;color:var(--cp-ink)}
.cp-search__input:focus{outline:none;border-color:var(--color-primary)}
.cp-search__btn{padding:16px 32px;border:0;border-radius:var(--radius-7);background:var(--color-primary);color:var(--color-light);
  font-family:"OnestBold",sans-serif;font-size:1.02rem;cursor:pointer}
.cp-search__btn:hover{background:#00742e}
.cp-search__hint{font-family:"OnestRegular",sans-serif;font-size:.86rem;color:var(--cp-muted);margin:var(--spacing-3) 0 0}
.cp-hero .cp-search{width:100%;max-width:640px}
.cp-hero .cp-search__hint{color:var(--color-primary-light)}
/* Primary green on the green hero is an invisible button. The site's own answer to a
   call to action on this background is the accent yellow. */
.cp-hero .cp-search__btn{background:var(--color-accent);color:var(--color-primary)}
.cp-hero .cp-search__btn:hover{background:var(--color-accent-dark)}
.cp-hero .cp-search__input{border-color:transparent}

.cp-suggest{list-style:none;margin:var(--spacing-2) 0 0;padding:6px;background:#fff;border:1px solid var(--cp-line);
  border-radius:var(--radius-3);box-shadow:0 18px 44px -22px rgba(0,0,0,.3);text-align:left}
.cp-suggest:empty{display:none}
.cp-suggest li{margin:0}
.cp-suggest a{display:block;padding:10px 13px;border-radius:var(--radius-2);text-decoration:none;color:var(--cp-ink);font-size:.95rem}
.cp-suggest a:hover,.cp-suggest a:focus{background:rgba(0,134,54,.09)}
.cp-suggest .cp-suggest__ref{font-family:"OnestBold",sans-serif;color:var(--color-primary);margin-right:8px}
.cp-suggest .cp-suggest__where{color:var(--cp-muted);font-size:.85rem}

/* ---------- our view: the first thing read, and the thing that gets quoted ---------- */
.cp-answer{background:#fff;border:1px solid var(--cp-line);border-left:8px solid var(--color-primary);
  border-radius:var(--radius-4);padding:var(--spacing-6) var(--spacing-7)}
.cp-answer p{margin:0;font-family:"OnestRegular",sans-serif;font-size:1.15rem;line-height:1.6;color:var(--cp-ink)}
.cp-answer__label{display:block;margin-bottom:var(--spacing-3);color:var(--color-primary);
  font-family:"OnestBold",sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.cp-answer--working{border-left-color:var(--color-accent)}
.cp-page .cp-answer__foot{margin:var(--spacing-4) 0 0;padding-top:var(--spacing-4);
  border-top:1px solid var(--cp-line);font-size:.92rem;line-height:1.6;color:#5F5F5F}

/* A determinate bar, because the thing it reports is measured. A spinner cannot say
   whether it is nearly done or stuck, and a page that looks stuck is what this replaces. */
.cp-progress{height:10px;margin:var(--spacing-4) 0 var(--spacing-3);border-radius:var(--radius-7);
  background:var(--color-bg);overflow:hidden}
.cp-progress__bar{width:0;height:100%;border-radius:var(--radius-7);
  background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));
  transition:width .25s linear}
.cp-progress__note{margin:0;font-size:.86rem;color:var(--cp-muted)}
.cp-progress__note [data-cp-pct]{font-family:"OnestBold",sans-serif;color:var(--color-primary)}
@media(prefers-reduced-motion:reduce){.cp-progress__bar{transition:none}}

.cp-spinner{display:inline-block;width:15px;height:15px;margin-right:9px;vertical-align:-2px;border:2px solid rgba(0,134,54,.25);
  border-top-color:var(--color-primary);border-radius:50%;animation:cp-spin .9s linear infinite}
@keyframes cp-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cp-spinner{animation:none}}

/* ---------- summary table ---------- */
.cp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--cp-line);border-radius:var(--radius-4);overflow:hidden}
.cp-table th,.cp-table td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--cp-line);font-size:.98rem;vertical-align:top}
.cp-table tr:last-child th,.cp-table tr:last-child td{border-bottom:0}
/* 38% put the value most of the way across the panel with nothing in between, so the
   two columns read as unrelated lists. A label column sized to the longest label
   keeps the pair together. */
.cp-table th{width:210px;font-family:"OnestMedium",sans-serif;color:var(--cp-muted);font-weight:normal}
.cp-table td{font-family:"OnestRegular",sans-serif;color:var(--cp-ink)}
@media(max-width:640px){
  .cp-table,.cp-table tbody,.cp-table tr,.cp-table th,.cp-table td{display:block;width:auto}
  .cp-table th{border-bottom:0;padding-bottom:0;font-size:.85rem}
  .cp-table td{padding-top:2px}
}

/* ---------- lists of projects and of findings ---------- */
.cp-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--spacing-4)}
/* A list of project cards tiles; a list of findings is one column and stays readable. */
.cp-list:not(.cp-list--rows){grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.cp-list .cp-finding{grid-column:1/-1}

a.cp-card{text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
a.cp-card:hover{border-color:var(--color-primary)}
a.cp-card{display:flex;flex-direction:column;gap:var(--spacing-2)}
a.cp-card .cp-band{align-self:flex-start;margin-top:var(--spacing-3);font-size:.82rem;padding:6px 14px}
@media(prefers-reduced-motion:no-preference){a.cp-card:hover{transform:translateY(-2px)}}
.cp-finding{background:#fff;border:1px solid var(--cp-line);border-left:5px solid var(--cp-band-insufficient);
  border-radius:var(--radius-4);padding:var(--spacing-5) var(--spacing-6)}
.cp-finding--finding{border-left-color:var(--color-primary)}
.cp-finding--allegation{border-left-color:var(--cp-band-significant)}
.cp-finding--registry_action{border-left-color:var(--cp-band-some)}
.cp-finding--regulatory_action{border-left-color:var(--cp-band-serious)}
.cp-finding__type{display:block;margin-bottom:var(--spacing-2);color:var(--cp-muted);
  font-family:"OnestBold",sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.cp-finding__text{margin:0 0 var(--spacing-3);font-family:"OnestRegular",sans-serif;line-height:1.6}
.cp-finding__source{margin:0;font-size:.86rem;color:var(--cp-muted)}
.cp-finding__source a{color:var(--color-primary)}

/* ---------- ratings ---------- */
.cp-dims{list-style:none;margin:0;padding:0;display:grid;gap:var(--spacing-5)}
.cp-dims > li{background:#fff;border:1px solid var(--cp-line);border-radius:var(--radius-4);padding:var(--spacing-5) var(--spacing-6)}
.cp-dims__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-4);margin-bottom:var(--spacing-3)}
.cp-dims__name{font-family:"OnestMedium",sans-serif;font-size:1rem}
.cp-dims__value{font-family:"OnestBold",sans-serif;font-size:.88rem;color:var(--cp-muted);white-space:nowrap}
.cp-dims__track{height:12px;background:var(--color-bg);border-radius:var(--radius-1);overflow:hidden}
.cp-dims__fill{height:100%;border-radius:var(--radius-1)}
.cp-dims__fill--low{background:var(--cp-band-limited)}
.cp-dims__fill--mid{background:var(--cp-band-significant)}
.cp-dims__fill--high{background:var(--cp-band-serious)}
.cp-dims__none{height:100%;width:100%;background:repeating-linear-gradient(45deg,#eceee9,#eceee9 6px,#f6f7f4 6px,#f6f7f4 12px)}
.cp-dims__note{margin:var(--spacing-3) 0 0;font-size:.92rem;line-height:1.55;color:var(--cp-muted)}

/* ---------- commercial block ---------- */
/* Reflows 3 -> 2 -> 1 on its own rather than jumping straight to one column at 900px,
   which left a lot of empty width on a tablet. */
.cp-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--spacing-5);align-items:stretch}
/* Four cards in a three column grid strands the fourth on a row of its own beside a hole
   the width of two cards. Four across, then two, then one, so a row is always full. */
.cp-offers--four{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
@media(min-width:901px) and (max-width:1180px){.cp-offers--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The three products use the shop's own card. All that is needed here is to make the
   spans behave as the shop's divs do, because the card is one big <a> and a <div> is not
   allowed inside it, plus the few places where a rule on this page would otherwise
   overwrite the shop's own styling. */
.cp-shop{margin-top:var(--spacing-7)}
.cp-shop__card{text-decoration:none}
.cp-shop__card .tree-shop-card__image,
.cp-shop__card .trees-shop-card__bottom,
.cp-shop__card .trees-shop-card__info-details,
.cp-shop__card .trees-shop-card__info-position,
.cp-shop__card .trees-shop-card__info-price{display:block}
.cp-shop__card .trees-shop-card__info-details{flex:1;min-width:0}
/* .cp-page p is (0,1,1) and beats a bare component class, so the card's own type sizing
   has to be stated at least as specifically or the shop card silently inherits page body
   copy. This is the same trap as the section ledes. */
.cp-page .cp-shop__card .trees-shop-card__name{font-family:"OnestBold",sans-serif;font-size:1.4rem;
  color:var(--color-dark);text-align:left;text-wrap:balance}
.cp-page .cp-shop__card .trees-shop-card__info-position{font-size:.92rem;color:#5F5F5F}
.cp-page .cp-shop__card .trees-shop-card__info-price{font-family:"OnestBold",sans-serif;font-size:1.15rem;color:var(--color-dark)}
.cp-page .cp-shop__card .trees-shop-card__co2-chip{font-size:.78rem;align-self:flex-start}
.cp-page .cp-shop__card .trees-shop-card__btn{text-decoration:none}
/* The shop's chip is "1.2 t CO2" and fits beside the price. Ours says why the product is
   on this page, which is three or four words, and beside the price it squeezed the
   country and the type into a column one word wide. It gets its own line, directly under
   the name, where it reads as a label on the card rather than a second column. */
.cp-page .cp-shop__card .trees-shop-card__info{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}
.cp-page .cp-shop__card .trees-shop-card__info > :last-child{order:-1}
/* Without this the cards size to their content and three products come out three
   different widths. */
.cp-shop .trees-shop-card{flex-grow:1;min-width:0}
/* .cp-page a is one class and one element, so it outranks a bare .cp-offer__cta and
   painted the hub's call to action green on green: a solid pill with nothing on it. The
   selector has to be at least as specific as the rule it is correcting. */
.cp-offer__cta,.cp-page a.cp-offer__cta{display:inline-block;margin-top:var(--spacing-4);padding:13px 30px;
  border-radius:var(--radius-7);background:var(--color-primary);color:var(--color-light);text-align:center;
  text-decoration:none;font-family:"OnestBold",sans-serif;font-size:.92rem}
.cp-offer__cta:hover,.cp-page a.cp-offer__cta:hover{background:#00742e;color:var(--color-light)}
/* Same specificity trap as the section ledes: .cp-page p is (0,1,1) and a bare
   component class is (0,1,0), so both of these were rendering with no top margin at
   all and sitting against the cards above them. */
.cp-page .cp-commercial__secondary{margin:var(--spacing-7) 0 0;text-align:center}
.cp-page .cp-commercial__disclosure{max-width:760px;margin:var(--spacing-6) auto 0;font-size:.86rem;line-height:1.6;color:var(--cp-muted);text-align:center}

/* ---------- notices, disclaimers, conflicts ---------- */
.cp-notice,.cp-conflict{background:#fff;border:1px solid var(--cp-line);border-left:5px solid var(--color-accent);
  border-radius:var(--radius-4);padding:var(--spacing-5) var(--spacing-6)}
.cp-notice p:last-child,.cp-conflict p:last-child{margin-bottom:0}
.cp-disclaimer{font-size:.86rem;line-height:1.6;color:var(--cp-muted)}
.cp-meta{font-size:.85rem;color:var(--cp-muted)}

/* ---------- browse: cards, facets, pager ---------- */
/* The browse block is two labelled groups of pills, not one flat row.

   This was written as a single flex row of links, but the markup wraps each group in its
   own div with a heading, so the flex was laying out the two groups and the pills inside
   them fell back to list items: two headings side by side in the middle of the page with
   their links stacked underneath and the counts drifting off to the right. */
.cp-facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--spacing-7);max-width:820px;margin:0 auto;text-align:left}
.cp-facets h3{margin:0 0 var(--spacing-4);font-size:1.05rem}
.cp-facets ul{display:flex;flex-wrap:wrap;gap:var(--spacing-3);list-style:none;margin:0;padding:0}
.cp-facets a{display:inline-block;padding:9px 18px;border-radius:var(--radius-7);background:#fff;border:1px solid var(--cp-line);
  color:var(--cp-ink);text-decoration:none;font-family:"OnestMedium",sans-serif;font-size:.9rem}
.cp-facets a:hover{border-color:var(--color-primary);color:var(--color-primary)}
.cp-facets__count{color:var(--cp-muted);font-size:.82rem;margin-left:6px}
.cp-facets li{display:inline-flex;align-items:center}

/* ---------- search results ---------- */
.cp-results{margin:var(--spacing-7) 0 var(--spacing-10)}
.cp-page .cp-results__count{margin:0 0 var(--spacing-5);text-align:center;font-size:.92rem;color:var(--cp-muted)}
/* A results grid of two cards should not spread them across the full container: they end
   up a third of a screen apart with the rest of the row empty. Capping the track width
   and centring the tracks keeps two results together and still fills the row when there
   are twenty. */
.cp-results .cp-list{grid-template-columns:repeat(auto-fit,minmax(260px,300px));justify-content:center}
.cp-card__todo{white-space:normal}
/* The browse block is a section in its own right, not a footnote on the results. */
.cp-page .cp-browse__title{margin-top:var(--spacing-10)}
/* One related project used to stretch the full width of the container: a card the
   size of a billboard holding three short lines. Same fix as the results grid. */
.cp-related{grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center}

.cp-card__ref{display:block;font-family:"OnestBold",sans-serif;font-size:.8rem;letter-spacing:.06em;color:var(--color-primary)}
.cp-card__name{margin:var(--spacing-2) 0;font-family:"OnestBold",sans-serif;font-size:1.05rem;color:var(--color-dark)}
.cp-card__where{font-size:.88rem;color:var(--cp-muted)}
.cp-card__todo{display:inline-block;align-self:flex-start;margin-top:var(--spacing-3);font-size:.78rem;color:#5F5F5F;background:var(--color-primary-light);border-radius:999px;padding:.25rem .6rem}

.cp-pager{display:flex;flex-wrap:wrap;gap:var(--spacing-2);justify-content:center;list-style:none;margin:var(--spacing-7) 0 0;padding:0}
.cp-pager a,.cp-pager span{display:inline-block;padding:9px 16px;border-radius:var(--radius-7);background:#fff;
  border:1px solid var(--cp-line);color:var(--cp-ink);text-decoration:none;font-size:.92rem}
.cp-pager--current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-light)}

/* ---------- correction form ---------- */
.cp-form{display:grid;gap:var(--spacing-5)}
.cp-form__field{display:grid;gap:var(--spacing-2)}
.cp-form__field label{font-family:"OnestMedium",sans-serif;font-size:.95rem}
.cp-form__field input,.cp-form__field select,.cp-form__field textarea{padding:13px 18px;font-family:"OnestRegular",sans-serif;
  font-size:1rem;border:1px solid var(--cp-line);border-radius:var(--radius-3);background:#fff;color:var(--cp-ink)}
.cp-form__field input:focus,.cp-form__field select:focus,.cp-form__field textarea:focus{outline:none;border-color:var(--color-primary)}
.cp-form__help{font-size:.85rem;color:var(--cp-muted)}
.cp-form__error{font-size:.88rem;color:var(--cp-band-serious)}
.cp-form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- sources and questions, kept for the methodology page ---------- */
.cp-sources,.cp-questions{margin:0;padding:0 0 0 1.2em}
.cp-sources li,.cp-questions li{margin:.4em 0;line-height:1.55}

/* ---------- mobile ----------
   The page is read on a phone more often than not, and the desktop rhythm does not
   survive the trip: 90px sections stack into a very long scroll, a 3rem hero headline
   wraps into five lines, and the search row puts a full width button under a full width
   input. */
@media(max-width:768px){
  .cp-section{padding:56px 0}
  .cp-section--tight{padding:28px 0}
  .cp-section > .container{width:auto;padding:0 20px}
  .cp-page h2,.cp-page .title-big{font-size:1.9rem}
  .cp-page h3{font-size:1.12rem}
  .cp-hero .container{width:auto;padding:0 20px}
  .cp-answer{padding:var(--spacing-5)}
  .cp-answer p{font-size:1.05rem}
  .cp-badge-row{gap:var(--spacing-2)}
  .cp-chip,.cp-band{font-size:.74rem;padding:6px 12px}
  .cp-offer__cta,.cp-page a.cp-offer__cta{display:block}
  /* The recycled offsetting sections carry their own desktop padding. */
  .cp-page .offx-section{padding:56px 0}
  .cp-page .offx-section--tight{padding:28px 0}
}

@media(max-width:520px){
  /* flex:1 1 320px sets the basis on the main axis, so stacking the row turned 320px of
     width into 320px of height: a search box four times too tall. */
  .cp-search__row{flex-direction:column}
  .cp-search__input{flex:0 0 auto}
  .cp-search__input,.cp-search__btn{width:100%}
  .cp-page h2,.cp-page .title-big{font-size:1.65rem}
  .cp-section{padding:44px 0}
  .cp-facets a{font-size:.85rem;padding:8px 14px}
  .cp-dims__head{flex-direction:column;align-items:flex-start;gap:2px}
  .cp-dims__value{font-size:.82rem}
}

/* The site paints every heading white for the hero. Inside a recycled offsetting section
   sitting on the checker page, they have to be readable on paper like the rest. */
.cp-page .offx-section h2:not([style*="color"]),
.cp-page .offx-section h3{color:var(--color-dark)}
/* Except the proof band, which is black. `color:inherit` here walked up to .cp-page and
   painted #111 body text on a #141414 card: a contrast ratio of about 1.05, which is to
   say invisible. Headings only, and stated rather than inherited. */
.cp-page .offx-proof h2,.cp-page .offx-proof h3{color:#fff}
.cp-page .offx-proof p,.cp-page .offx-proof-card p{color:#cfcfcb}
.cp-page .offx-proof{padding-bottom:90px}

/* ==================================================================
   Graphic components. Everything here is real text in the document,
   so it is read by a crawler and an assistant exactly as a person
   reads it. The colour does the work of making it look like something
   rather than replacing anything.
   ================================================================== */

/* ---------- icon chip on a card ---------- */
.cp-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;flex-shrink:0;
  border-radius:16px;background:var(--color-primary);color:#fff}
.cp-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-ico--accent{background:var(--color-accent);color:#4a4700}
.cp-ico--dark{background:var(--color-primary);color:#fff}
.cp-ico--light{background:var(--color-primary-light);color:#2f4200}

/* ---------- numbered steps ---------- */
.cp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--spacing-6);
  counter-reset:cp-step;list-style:none;margin:var(--spacing-6) 0 0;padding:0}
.cp-steps > li{position:relative;counter-increment:cp-step;background:#fff;border:1px solid var(--cp-line);
  border-radius:var(--radius-4);padding:var(--spacing-7) var(--spacing-6) var(--spacing-6)}
.cp-steps > li::before{content:counter(cp-step);position:absolute;top:calc(var(--spacing-7) * -1 + 8px);left:var(--spacing-6);
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--color-primary);color:#fff;font-family:"OnestBold",sans-serif;font-size:1.15rem;
  box-shadow:0 0 0 6px var(--color-bg)}
.cp-section--white .cp-steps > li::before{box-shadow:0 0 0 6px #fff}
.cp-steps h3{margin:0 0 var(--spacing-3)}
.cp-steps p{margin:0;color:var(--cp-ink);line-height:1.6}

/* ---------- full-bleed figures band ---------- */
.cp-band-strip{background:var(--color-primary);padding:var(--spacing-9) 0}
.cp-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--spacing-6);list-style:none;margin:0;padding:0;text-align:center}
.cp-figures dt,.cp-figures .cp-figures__n{display:block;font-family:"OnestBlack","OnestBold",sans-serif;
  font-size:2.9rem;line-height:1;color:var(--color-accent)}
.cp-figures dd,.cp-figures .cp-figures__l{margin:var(--spacing-3) 0 0;color:#fff;font-family:"OnestRegular",sans-serif;
  font-size:.98rem;line-height:1.45}

/* ---------- checklist ---------- */
.cp-ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--spacing-3)}
.cp-ticks li{display:flex;align-items:flex-start;gap:var(--spacing-3);line-height:1.55}
.cp-ticks li::before{content:"";flex-shrink:0;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- eyebrow above a section heading ---------- */
.cp-eyebrow{display:block;margin-bottom:var(--spacing-3);text-align:center;color:var(--color-primary);
  font-family:"OnestBold",sans-serif;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.cp-band-strip .cp-eyebrow{color:var(--color-primary-light)}

/* ---------- FAQ, open one at a time, no javascript ----------
   <details> gives the disclosure behaviour the offsetting page builds by hand, and the
   answer stays in the document either way, so a crawler and an assistant read all of it
   whether or not anything is open. */
.cp-faq{display:grid;gap:var(--spacing-3);max-width:820px;margin:0 auto}
.cp-faq details{background:#fff;border:1px solid var(--cp-line);border-radius:var(--radius-4);overflow:hidden}
.cp-faq details[open]{border-color:var(--color-primary)}
.cp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-4);
  padding:22px 26px;cursor:pointer;font-family:"OnestBold",sans-serif;font-size:1.05rem;color:var(--color-dark);
  list-style:none}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary::after{content:"";flex-shrink:0;width:20px;height:20px;transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008636' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat}
.cp-faq details[open] summary::after{transform:rotate(180deg)}
.cp-faq summary:hover{color:var(--color-primary)}
.cp-faq .cp-faq__a{padding:0 26px 24px;line-height:1.65;color:var(--cp-muted)}
.cp-faq .cp-faq__a p{margin:0 0 var(--spacing-3)}
.cp-faq .cp-faq__a p:last-child{margin:0}
@media(prefers-reduced-motion:reduce){.cp-faq summary::after{transition:none}}

/* ---------- a lead paragraph under a centred heading ---------- */
/* .cp-page p is a class and an element, so it outranked a bare .cp-lede and threw away
   the auto side margins: a centred block of text pinned to the left of its container,
   under a heading that was properly centred. On four sections at once. The selector has
   to outrank the rule it is correcting. */
.cp-page .cp-lede{max-width:660px;margin:0 auto var(--spacing-7);text-align:center;
  font-family:"OnestLight",sans-serif;font-size:1.1rem;line-height:1.6;color:var(--cp-ink);
  text-wrap:balance}

@media(max-width:768px){
  .cp-figures dt,.cp-figures .cp-figures__n{font-size:2.2rem}
  .cp-band-strip{padding:var(--spacing-8) 0}
  .cp-steps{gap:var(--spacing-7)}
  .cp-faq summary{padding:18px 20px;font-size:1rem}
  .cp-faq .cp-faq__a{padding:0 20px 20px}
}

/* Alternate the recycled sections so a third of the page is not one unbroken grey run.
   Stated per section, never with :nth-of-type: that counts sibling <section> elements
   rather than elements carrying the class, and it landed on the one section that must
   never be white. It painted the black proof band white, with its white heading on it. */
.cp-page .offx-reporting{background:#fff}

/* Dashboard internals, all three of them faults on /carbon-offsetting as well.
   The offset-coverage tile is a centred row among three top-aligned columns, so its
   labels drop out of line across the whole row; its gauge track is #F3F3F1 on white,
   which is no track at all; and a flex:1 label with the default min-width:auto refuses to
   shrink, pushing "83%" through the panel's padding. */
.offx-srow > span[style*="flex:1"]{min-width:0}
.cp-page .offx-scope-lbl > span[style*="flex:1"]{white-space:normal}

/* The recycled sections' lead paragraph is the same component as .cp-lede and has to read
   as one. Unprotected it lost its size, face and leading to .cp-page p, so the top half of
   the page was light 17.6px and the bottom half regular 16px. */
.cp-page .offx-subtitle{margin:0 auto;font-family:"OnestLight",sans-serif;font-size:1.1rem;line-height:1.6}

/* A three way specificity tie that source order decided, and the .offx stylesheet is
   emitted after this file. The reporting rows' sub-headings were 25.6px against 20px
   everywhere else, and on a phone they matched the section headings exactly, which reads
   as no hierarchy at all. */
.cp-page .offx-row-txt h3{font-size:1.25rem}

/* FAQ answers are the only long-form prose on the page not set in ink. #828282 on white is
   3.5:1, under the threshold for body text, and --cp-muted is a caption colour. */
.cp-page .cp-faq .cp-faq__a{color:var(--cp-ink)}

@media(max-width:768px){
  .cp-page .offx-row-txt h3{font-size:1.12rem}
  /* Half the sections do not carry .cp-section, so they kept the site's 85% container and
     started 38px further right than the ones above them. */
  .cp-page section > .container{width:auto;padding:0 20px}
}

/* The demo frame is pulled 260px up so it overlaps the offsetting page's tall hero. On the
   checker there is no hero above it, there is a heading: the opaque white frame was
   painted straight over the eyebrow, the H2 and the lede introducing it, and over the
   bottom of the button in the section before. An entire heading block, invisible. */
.cp-page .offx-demo-wrap{margin-top:0}

/* ==================================================================
   Three devices, deliberately different, because three sections built
   from the same white card on the same grey ground read as one section
   repeated three times.
   ================================================================== */

/* 1. A horizontal flow with a rule running through the numbers, not boxes. */
.cp-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--spacing-6);counter-reset:none;list-style:none;margin:0 0 var(--spacing-8);padding:0;position:relative}
.cp-flow > li{position:relative;padding-top:var(--spacing-6)}
/* The rule joins the numbers into a sequence. Behind them, and only where there is a
   neighbour to join to. */
.cp-flow > li:not(:last-child)::after{content:"";position:absolute;top:23px;left:calc(50% + 34px);
  right:calc(-1 * var(--spacing-6) - 50% + 34px);height:2px;background:var(--color-primary-light)}
@media(max-width:900px){.cp-flow > li::after{display:none}}
.cp-flow__n{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--color-primary);color:#fff;
  font-family:"OnestBold",sans-serif;font-size:1.15rem;z-index:1}
.cp-flow h3{margin:var(--spacing-6) 0 var(--spacing-3);text-align:center;text-wrap:balance}
.cp-flow p{margin:0;text-align:center;color:var(--cp-ink);line-height:1.6}

/* The demo frame sat right on the end of the section above it. */
.cp-page .offx-demo-wrap{margin-top:var(--spacing-8)}

/* Headings that break to a single orphaned word are most of what "the text looks broken"
   turns out to be on inspection. */
.cp-page h2,.cp-page .title-big,.cp-page h3{text-wrap:balance}
.cp-page .offx-subtitle{text-wrap:balance}

/* The hero lede was #CBE08D on #008636, which is 3.3:1 at this size. */
.cp-page .cp-hero__lede{color:#E7F3CE}

/* letter-spacing adds tracking after the last letter, which centring counts as ink, so
   every eyebrow sat a pixel or two left of the heading above it. */
.cp-eyebrow{padding-left:.12em}

@media(max-width:768px){
  .cp-page .offx-demo-wrap{margin-top:var(--spacing-6)}
}