/* ===========================================================================
   site.css — marketing-site chrome for citedproof.com.

   WHAT: the components the public site needs that the shared design system
   deliberately does not ship — skip link, sticky nav, hero, measurement
   specimen, step list, stat/citation blocks, pricing plans, FAQ disclosure,
   footer and the long-form legal prose layout.

   WHY it is a separate file and not brand/components.css: components.css is
   embedded inside the app AND inside white-labelled PDFs that agencies put
   their own name on. Hero copy layout and pricing cards have no business
   shipping into a client's PDF. Nav and footer are the two candidates for
   promotion into components.css the day the app needs them; the class names
   are written so that promotion is a cut-and-paste with no rename.

   RULES this file obeys (brand/BRAND.md §4):
     - Layer-2 semantic tokens only. No raw hex, no primitive --cp-neutral-*.
     - Mobile-first: the base rules ARE the 390px rules; media queries only add.
     - No gradients. The only repeating-linear-gradient here is the no-data
       hatch, which is a token.
     - Every interactive target is at least --cp-tap-min.
     - Motion is opacity/transform only and is disabled under reduced-motion
       by the global rule in tokens.css.

   Load order: brand/fonts.css -> brand/tokens.css -> brand/components.css ->
   this file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Skip link + page scaffold
   --------------------------------------------------------------------------- */

.cp-skip {
  position: absolute;
  left: var(--cp-space-3);
  top: var(--cp-space-3);
  z-index: var(--cp-z-toast);
  transform: translateY(-200%);
  transition: transform var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-skip:focus-visible { transform: translateY(0); }

/* Anchored headings must clear the sticky nav when jumped to. */
[id] { scroll-margin-top: calc(var(--cp-control-height-lg) + var(--cp-space-8)); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------------
   2. Nav
   --------------------------------------------------------------------------- */

.cp-nav {
  position: sticky;
  top: 0;
  z-index: var(--cp-z-sticky);
  background: var(--cp-color-surface);
  border-bottom: var(--cp-hairline) solid var(--cp-color-border);
}

.cp-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-3);
  min-height: 60px;
}

.cp-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--cp-tap-min);
  min-width: var(--cp-tap-min);
  padding-inline: var(--cp-space-1);
  margin-inline-start: calc(var(--cp-space-1) * -1);
  border-radius: var(--cp-radius-sm);
}
/* Size only — NEVER set `display` on these images. `.cp-logo--dark { display:
   none }` in components.css is a single-class selector, so a type+class rule
   like `.cp-nav__brand img { display: block }` outranks it and both logo files
   render at once (seen 30 Jul 2026: a ghosted second wordmark in the bar).
   `.cp-nav__brand` is inline-flex, so its children are blockified anyway. */
.cp-nav__brand img { height: 24px; width: auto; }

.cp-nav__toggle { flex: none; }
@media (min-width: 900px) { .cp-nav__toggle { display: none; } }

/* Mobile: the menu is a disclosure panel under the bar. */
.cp-nav__menu {
  display: none;
  padding-block: var(--cp-space-2) var(--cp-space-4);
  border-top: var(--cp-hairline) solid var(--cp-color-border-subtle);
}
.cp-nav__menu[data-open='true'] { display: block; }

.cp-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-px);
  margin: 0 0 var(--cp-space-3);
  padding: 0;
  list-style: none;
}

.cp-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--cp-tap-min);
  padding-inline: var(--cp-space-2);
  border-radius: var(--cp-radius-sm);
  color: var(--cp-color-text);
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-medium);
  text-decoration: none;
  transition: var(--cp-transition-colors);
}
.cp-nav__link:hover { background: var(--cp-color-bg-subtle); color: var(--cp-color-text); }
.cp-nav__link[aria-current='page'] { color: var(--cp-color-primary-text); }

@media (min-width: 900px) {
  .cp-nav__menu {
    display: contents;
    padding: 0;
    border: 0;
  }
  .cp-nav__links {
    flex-direction: row;
    align-items: center;
    gap: var(--cp-space-1);
    margin: 0;
    margin-inline-start: auto;
  }
  .cp-nav__link { padding-inline: var(--cp-space-3); }
}

/* ---------------------------------------------------------------------------
   3. Sections and bands
   --------------------------------------------------------------------------- */

.cp-band { padding-block: var(--cp-section-y); }
.cp-band--sunken { background: var(--cp-color-bg-subtle); }
.cp-band--ruled { border-top: var(--cp-hairline) solid var(--cp-color-border); }
.cp-band--tight { padding-block: calc(var(--cp-section-y) * 0.55); }
/* For a band that continues the one above it — a hero's bottom padding plus the
   next band's top padding otherwise stacks into a ~200px hole. */
.cp-band--flush { padding-top: 0; }

.cp-eyebrow {
  display: block;
  margin-bottom: var(--cp-space-3);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-2xs);
  font-weight: var(--cp-weight-medium);
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-color-text-subtle);
}
.cp-eyebrow--primary { color: var(--cp-color-primary-text); }

/* The one-sentence answer that opens a section. Answer-first is an AEO
   structure decision, not a typographic one: engines quote the first
   declarative sentence under a heading far more often than a lede. */
.cp-answer {
  max-width: var(--cp-measure);
  /* .cp-h2 carries no bottom margin, so without this the answer sentence sits
     on the heading's descenders and reads as a second heading line. */
  margin: var(--cp-space-3) 0 var(--cp-space-5);
  font-size: var(--cp-text-lg);
  line-height: var(--cp-leading-relaxed);
  color: var(--cp-color-text);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------------------- */

.cp-hero { padding-block: var(--cp-space-10) var(--cp-section-y); }

.cp-hero__title {
  margin: 0 0 var(--cp-space-5);
  font-size: var(--cp-text-4xl);
  font-weight: var(--cp-weight-semibold);
  line-height: var(--cp-leading-tight);
  letter-spacing: var(--cp-tracking-tight);
  text-wrap: balance;
}
.cp-hero__title em {
  font-style: normal;
  border-bottom: 3px solid var(--cp-color-primary);
  padding-bottom: 1px;
}

.cp-hero__sub {
  max-width: var(--cp-measure);
  margin: 0 0 var(--cp-space-6);
  font-size: var(--cp-text-lg);
  line-height: var(--cp-leading-relaxed);
  color: var(--cp-color-text-muted);
  text-wrap: pretty;
}

.cp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-3);
  margin-bottom: var(--cp-space-4);
}

.cp-hero__note {
  margin: 0;
  font-size: var(--cp-text-sm);
  color: var(--cp-color-text-subtle);
}

@media (min-width: 900px) {
  .cp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--cp-space-12);
    align-items: start;
  }
  .cp-hero__title { font-size: var(--cp-text-5xl); }
}

/* ---------------------------------------------------------------------------
   5. The specimen — a real reading, rendered the way the product renders it.
      This is the hero's proof: an actual engine answer, an absent brand, and
      one surface that did not answer drawn as a hatch rather than a zero.
   --------------------------------------------------------------------------- */

.cp-specimen {
  margin-top: var(--cp-space-8);
  border: var(--cp-hairline) solid var(--cp-color-border-strong);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-color-surface);
  box-shadow: var(--cp-shadow-sm);
  overflow: hidden;
}
@media (min-width: 900px) { .cp-specimen { margin-top: 0; } }

.cp-specimen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cp-space-2);
  padding: var(--cp-space-3) var(--cp-space-4);
  border-bottom: var(--cp-hairline) solid var(--cp-color-border);
  background: var(--cp-color-surface-sunken);
}
.cp-specimen__label {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-2xs);
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-color-text-subtle);
}
.cp-specimen__body { padding: var(--cp-space-4); }

.cp-specimen__prompt {
  margin: 0 0 var(--cp-space-4);
  padding: var(--cp-space-3);
  border-left: 3px solid var(--cp-color-border-strong);
  background: var(--cp-color-bg-subtle);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-sm);
  line-height: var(--cp-leading-normal);
  color: var(--cp-color-text);
}

.cp-specimen__rows { display: grid; gap: var(--cp-space-3); }

/* Engine name and state badge share a row on wide screens. Below 560px the
   badge ("MENTIONED · POSITION 4") no longer fits beside a wrapped engine
   name: the auto track refuses to shrink, and the card's overflow:hidden
   silently CLIPS the badge rather than scrolling it. Seen at 390px on
   30 Jul 2026. Stack instead — and shoot.py now fails on clipped content so
   this class of defect cannot come back unseen. */
.cp-reading {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--cp-space-2) var(--cp-space-3);
  padding-block: var(--cp-space-3);
  border-top: var(--cp-hairline) solid var(--cp-color-border-subtle);
}
@media (min-width: 560px) {
  .cp-reading { grid-template-columns: 1fr auto; }
}
.cp-reading:first-child { border-top: 0; padding-top: 0; }
.cp-reading__engine {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  color: var(--cp-color-text-muted);
}
.cp-reading__state { justify-self: start; }
@media (min-width: 560px) { .cp-reading__state { justify-self: end; } }
.cp-reading__evidence {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--cp-font-quote);
  font-size: var(--cp-text-base);
  line-height: var(--cp-leading-snug);
  color: var(--cp-color-text);
}
.cp-reading__evidence b { font-weight: var(--cp-weight-regular); border-bottom: 2px solid var(--cp-color-negative-border); }
.cp-reading__meta {
  grid-column: 1 / -1;
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-2xs);
  color: var(--cp-color-text-subtle);
}

/* The hatch row: no reading taken. Never a zero, never an empty bar. */
.cp-reading--nodata .cp-reading__evidence {
  padding: var(--cp-space-3);
  border: var(--cp-hairline) dashed var(--cp-color-nodata-border);
  border-radius: var(--cp-radius-sm);
  background-color: var(--cp-color-nodata-ground);
  background-image: var(--cp-pattern-nodata-soft);
  font-family: var(--cp-font-sans);
  font-size: var(--cp-text-sm);
  color: var(--cp-color-nodata-text);
}

/* ---------------------------------------------------------------------------
   6. Steps
   --------------------------------------------------------------------------- */

.cp-steps { counter-reset: cp-step; display: grid; gap: var(--cp-space-5); margin: 0; padding: 0; }
@media (min-width: 900px) { .cp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-space-6); } }

.cp-step { counter-increment: cp-step; list-style: none; padding-top: var(--cp-space-4); border-top: 2px solid var(--cp-color-text); }
.cp-step__n {
  display: block;
  margin-bottom: var(--cp-space-2);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-2xs);
  letter-spacing: var(--cp-tracking-caps);
  color: var(--cp-color-text-subtle);
}
.cp-step__n::before { content: counter(cp-step, decimal-leading-zero) " — "; }
.cp-step__title { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-xl); font-weight: var(--cp-weight-semibold); }
.cp-step__body { margin: 0; color: var(--cp-color-text-muted); }

/* ---------------------------------------------------------------------------
   7. Stats and citations — every number on this site carries its source.
   --------------------------------------------------------------------------- */

.cp-stat {
  margin: 0;
  padding: var(--cp-space-4);
  border: var(--cp-hairline) solid var(--cp-color-border);
  border-radius: var(--cp-radius-md);
  background: var(--cp-color-surface);
}
.cp-stat__value {
  display: block;
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-score-sm);
  font-weight: var(--cp-weight-medium);
  line-height: var(--cp-leading-none);
  letter-spacing: var(--cp-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--cp-color-text);
}
.cp-stat__value--negative { color: var(--cp-color-negative-text); }
.cp-stat__body { margin-top: var(--cp-space-3); font-size: var(--cp-text-sm); line-height: var(--cp-leading-relaxed); color: var(--cp-color-text-muted); }
.cp-stat__src {
  display: block;
  margin-top: var(--cp-space-2);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-2xs);
  line-height: var(--cp-leading-normal);
  color: var(--cp-color-text-subtle);
}
.cp-stat__src a { color: inherit; }

/* Inline source marker, e.g. "97% of them [1]". */
.cp-cite {
  font-family: var(--cp-font-mono);
  font-size: 0.82em;
  text-decoration: none;
  color: var(--cp-color-link);
  /* Leading pad only: a trailing pad pushes the sentence's full stop away from
     the marker and reads as "answers [3] ." at body size. */
  padding-inline: 2px 0;
}
.cp-cite:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   8. Pricing
   --------------------------------------------------------------------------- */

/* stretch, not start: .cp-plan__cta has margin-top:auto, so equal-height cards
   put both buy buttons on the same line. With `start` the shorter card's CTA
   floats up and the pair reads as two unrelated blocks. */
.cp-plans { display: grid; gap: var(--cp-space-5); align-items: stretch; }
@media (min-width: 900px) { .cp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-6); } }

.cp-plan {
  display: flex;
  flex-direction: column;
  padding: var(--cp-space-5);
  border: var(--cp-hairline) solid var(--cp-color-border);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-color-surface);
}
.cp-plan--lead { border-color: var(--cp-color-primary-border); box-shadow: var(--cp-shadow-sm); }
.cp-plan__name { margin: 0 0 var(--cp-space-1); font-size: var(--cp-text-xl); font-weight: var(--cp-weight-semibold); }
.cp-plan__for { margin: 0 0 var(--cp-space-4); font-size: var(--cp-text-sm); color: var(--cp-color-text-subtle); }
.cp-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--cp-space-2);
  padding-block: var(--cp-space-3);
  border-block: var(--cp-hairline) solid var(--cp-color-border-subtle);
}
.cp-plan__amount {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-score-sm);
  font-weight: var(--cp-weight-medium);
  line-height: var(--cp-leading-none);
  letter-spacing: var(--cp-tracking-tight);
  font-variant-numeric: tabular-nums;
}
.cp-plan__unit { font-family: var(--cp-font-mono); font-size: var(--cp-text-sm); color: var(--cp-color-text-subtle); }
.cp-plan__list { margin: var(--cp-space-4) 0 var(--cp-space-5); padding: 0; list-style: none; display: grid; gap: var(--cp-space-3); }
.cp-plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--cp-space-3); font-size: var(--cp-text-sm); line-height: var(--cp-leading-relaxed); }
.cp-plan__list svg { margin-top: 3px; color: var(--cp-color-primary); }
.cp-plan__list--no svg { color: var(--cp-color-text-subtle); }
.cp-plan__cta { margin-top: auto; }
.cp-plan__foot { margin: var(--cp-space-3) 0 0; font-size: var(--cp-text-xs); color: var(--cp-color-text-subtle); }

/* ---------------------------------------------------------------------------
   9. FAQ disclosure
   --------------------------------------------------------------------------- */

.cp-faq { border-top: var(--cp-hairline) solid var(--cp-color-border); }
.cp-faq__item { border-bottom: var(--cp-hairline) solid var(--cp-color-border); }
.cp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-4);
  min-height: var(--cp-tap-min);
  padding-block: var(--cp-space-4);
  cursor: pointer;
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-medium);
  line-height: var(--cp-leading-snug);
  list-style: none;
  transition: var(--cp-transition-colors);
}
.cp-faq__q::-webkit-details-marker { display: none; }
.cp-faq__q:hover { color: var(--cp-color-primary-text); }
.cp-faq__q:focus-visible { outline: 2px solid var(--cp-color-focus-ring); outline-offset: 3px; border-radius: var(--cp-radius-xs); }
.cp-faq__sign { flex: none; position: relative; width: 16px; height: 16px; color: var(--cp-color-text-subtle); }
.cp-faq__sign::before,
.cp-faq__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-faq__sign::after { transform: rotate(90deg); }
.cp-faq__item[open] .cp-faq__sign::after { transform: rotate(0deg); }
.cp-faq__a { max-width: var(--cp-measure); padding-bottom: var(--cp-space-5); color: var(--cp-color-text-muted); }
.cp-faq__a > * + * { margin-top: var(--cp-space-3); }
.cp-faq__a p { margin: 0; }

/* ---------------------------------------------------------------------------
   10. Signup capture
   --------------------------------------------------------------------------- */

.cp-signup {
  padding: var(--cp-space-5);
  border: var(--cp-hairline) solid var(--cp-color-border-strong);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-color-surface);
}
@media (min-width: 700px) { .cp-signup { padding: var(--cp-space-6); } }
.cp-signup__row { display: grid; gap: var(--cp-space-3); }
@media (min-width: 700px) {
  .cp-signup__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cp-signup__actions { margin-top: var(--cp-space-4); display: grid; gap: var(--cp-space-3); }
@media (min-width: 700px) { .cp-signup__actions { grid-template-columns: auto 1fr; align-items: center; } }
.cp-signup__status:empty { display: none; }
.cp-turnstile:empty { display: none; }
.cp-turnstile { margin-top: var(--cp-space-4); }

/* ---------------------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------------------- */

.cp-foot {
  padding-block: var(--cp-section-y) var(--cp-space-8);
  border-top: var(--cp-hairline) solid var(--cp-color-border);
  background: var(--cp-color-bg-subtle);
}
.cp-foot__grid { display: grid; gap: var(--cp-space-8); }
@media (min-width: 700px) { .cp-foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
/* Flex column for the same reason as .cp-nav__brand above: it blockifies the
   logo without a `display` declaration that would defeat the light/dark swap. */
.cp-foot__brand { display: flex; flex-direction: column; align-items: flex-start; }
.cp-foot__brand img { height: 24px; width: auto; margin-bottom: var(--cp-space-3); }
.cp-foot__blurb { margin: 0; max-width: 42ch; font-size: var(--cp-text-sm); color: var(--cp-color-text-muted); }
.cp-foot__title {
  margin: 0 0 var(--cp-space-2);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-2xs);
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-color-text-subtle);
}
.cp-foot__links { margin: 0; padding: 0; list-style: none; }
.cp-foot__links a {
  display: flex;
  align-items: center;
  min-height: var(--cp-tap-min);
  font-size: var(--cp-text-sm);
  color: var(--cp-color-text);
  text-decoration: none;
}
.cp-foot__links a:hover { color: var(--cp-color-primary-text); text-decoration: underline; }
.cp-foot__legal {
  margin-top: var(--cp-space-8);
  padding-top: var(--cp-space-5);
  border-top: var(--cp-hairline) solid var(--cp-color-border);
  font-size: var(--cp-text-xs);
  color: var(--cp-color-text-subtle);
}
.cp-foot__legal p { margin: 0 0 var(--cp-space-2); max-width: var(--cp-measure); }

/* ---------------------------------------------------------------------------
   12. Long-form prose (methodology, privacy, terms, refunds)
   --------------------------------------------------------------------------- */

.cp-prose { max-width: var(--cp-measure); }
.cp-prose > * + * { margin-top: var(--cp-space-4); }
.cp-prose h2 {
  margin-top: var(--cp-space-10);
  padding-top: var(--cp-space-5);
  border-top: var(--cp-hairline) solid var(--cp-color-border);
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-semibold);
  line-height: var(--cp-leading-snug);
}
.cp-prose h3 { margin-top: var(--cp-space-7); font-size: var(--cp-text-lg); font-weight: var(--cp-weight-semibold); }
.cp-prose p { margin: 0; line-height: var(--cp-leading-relaxed); text-wrap: pretty; }
.cp-prose ul, .cp-prose ol { margin: 0; padding-inline-start: var(--cp-space-5); }
.cp-prose li + li { margin-top: var(--cp-space-2); }
.cp-prose li { line-height: var(--cp-leading-relaxed); }
.cp-prose dt { font-weight: var(--cp-weight-semibold); }
.cp-prose dd { margin: var(--cp-space-1) 0 var(--cp-space-4); color: var(--cp-color-text-muted); }
.cp-prose code {
  font-family: var(--cp-font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border: var(--cp-hairline) solid var(--cp-color-border-subtle);
  border-radius: var(--cp-radius-xs);
  background: var(--cp-color-surface-sunken);
  /* break-word, not anywhere: `anywhere` lets a table column shrink below the
     token's width, which split "PerplexityBot" across two lines in the crawler
     table. break-word keeps min-content at the longest token and only breaks
     when the token genuinely cannot fit. */
  overflow-wrap: break-word;
}
.cp-prose pre {
  margin: 0;
  padding: var(--cp-space-4);
  overflow-x: auto;
  border: var(--cp-hairline) solid var(--cp-color-border);
  border-radius: var(--cp-radius-md);
  background: var(--cp-color-surface-sunken);
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  line-height: var(--cp-leading-relaxed);
  -webkit-overflow-scrolling: touch;
}
.cp-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; }

.cp-updated {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  color: var(--cp-color-text-subtle);
}

/* Long URLs in citation lists must not blow the viewport open at 390px. */
.cp-refs { max-width: var(--cp-measure); }
.cp-refs li { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   13. Small utilities used by more than one page
   --------------------------------------------------------------------------- */

.cp-lede { max-width: var(--cp-measure); font-size: var(--cp-text-lg); line-height: var(--cp-leading-relaxed); color: var(--cp-color-text-muted); }
.cp-rule { height: var(--cp-hairline); background: var(--cp-color-border); border: 0; margin-block: var(--cp-space-8); }
.cp-two { display: grid; gap: var(--cp-space-5); }
@media (min-width: 900px) { .cp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-6); } }
.cp-three { display: grid; gap: var(--cp-space-4); }
@media (min-width: 700px) { .cp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }