/* Cheapy cheapy-core.css — GENERATED by theme/assets.cjs from mark/src/.
   Do not edit. Edit the source files and run: node theme/build.cjs */

/* ═══════════════════════════════════════════════════════════════
   CHEAPY SITE — the document layer
   ---------------------------------------------------------------
   Marketing and content surfaces: vertical entry cards, article
   cards, market figures, FAQ, hub links, content bands.

   WHY THIS IS A SEPARATE FILE FROM cp-form.css
   --------------------------------------------
   cp-form.css is the PRODUCT — the things a user operates. This is
   the DOCUMENT — the things a user reads, and the things Google
   reads. They have different jobs and, more importantly, different
   layout rules: the product lives inside a locked shell that never
   scrolls, and the document has to scroll, because a page that
   cannot scroll cannot hold enough text to rank for anything.

   THAT TENSION IS REAL AND IT IS NOT RESOLVED BY CSS.
   "No scroll" is right for the app: chat and calculators are tasks,
   and a task should not move under the user's hands. "SEO monster"
   needs depth, structure and words. A homepage cannot be both at
   full strength, so the three home mockups each take a different
   position on it and pay a different price. See site/home.cjs.

   The rule that keeps this honest: .cp-shell (locked, no scroll) and
   .cp-doc (scrolling document) are mutually exclusive. A page picks
   one. A page that tries to be both gets a locked hero and a
   scrolling body — which is variant B, and it is a deliberate design
   with known costs, not a way of avoiding the choice.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ the scrolling document ═════════════════════════════════════ */

.cp-doc {
  background: var(--cp-canvas);
  color: var(--cp-ink);
  font-family: var(--cp-font);
  -webkit-font-smoothing: antialiased;
}
.cp-doc *, .cp-doc *::before, .cp-doc *::after { box-sizing: border-box }

/* the rail every band shares, so nothing on the page has its own idea
   of where the left edge is */
.cp-band { position: relative; z-index: 2; padding: clamp(38px, 6vw, 72px) 0 }
.cp-band-in { width: var(--cp-rail); margin-inline: auto }
.cp-band-head { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vw, 30px) }

.cp-eyebrow {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--cp-blue);
}
.cp-h2-site {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: clamp(1.375rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.cp-sub-site {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(.9375rem, 1.6vw, 1rem);
  line-height: 1.7;
  color: var(--cp-ink-soft);
}

/* ═══ vertical entry cards ═══════════════════════════════════════
   The homepage's real job on a comparison site: get the visitor into
   the right vertical in one tap. These are LINKS, not radios — they
   navigate rather than answer, which matters for crawling as much as
   for the user. (.cp-option is the radio version, in cp-form.css.) */

.cp-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.cp-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border-radius: var(--cp-r-lg);
  background: var(--cp-glass-strong);
  -webkit-backdrop-filter: var(--cp-blur);
          backdrop-filter: var(--cp-blur);
  border: 1px solid var(--cp-hairline);
  box-shadow: var(--cp-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--cp-t-fast), border-color var(--cp-t-fast),
              box-shadow var(--cp-t-fast);
}
.cp-pick:hover {
  transform: translateY(-3px);
  border-color: var(--cp-blue-line);
  box-shadow: var(--cp-shadow-md);
}
.cp-pick:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 3px }

.cp-pick-glyph {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--cp-r-md);
  background: var(--cp-blue-tint);
  color: var(--cp-blue);
  transition: background var(--cp-t-fast), color var(--cp-t-fast);
}
.cp-pick:hover .cp-pick-glyph { background: var(--cp-blue); color: #fff }

.cp-pick-text { display: grid; gap: 2px; min-width: 0 }
.cp-pick-label { font-size: 1rem; font-weight: 800; letter-spacing: -.02em }
/* The line under each vertical carries a real figure, because "compare
   car insurance" is a category and "typical range 180–420 a month" is
   a reason to click. Illustrative figures must be labelled as such on
   the page — see the note block in each mockup. */
.cp-pick-meta { font-size: .8125rem; color: var(--cp-ink-faint); font-variant-numeric: tabular-nums }

/* ═══ market figures ═════════════════════════════════════════════
   Numbers as the hero. Real market data is the one thing a
   comparison site has that a brochure does not, and leading with it
   is the fastest way to say "this is a measurement tool". */

.cp-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.cp-fig {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--cp-r-lg);
  background: var(--cp-glass);
  -webkit-backdrop-filter: var(--cp-blur);
          backdrop-filter: var(--cp-blur);
  border: 1px solid var(--cp-hairline);
}
.cp-fig-val {
  font-family: var(--cp-font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--cp-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cp-fig-label { font-size: .875rem; font-weight: 700; color: var(--cp-ink) }
.cp-fig-note { font-size: .75rem; color: var(--cp-ink-faint); line-height: 1.5 }

/* ═══ articles ═══════════════════════════════════════════════════
   The SEO engine. Real <article> elements with real headings, so the
   structure a crawler sees matches the structure a reader sees.

   The whole card is NOT a link. The heading is. A card-sized anchor
   swallows the text into one enormous link name, which is miserable
   with a screen reader and gives the crawler one uninformative
   target instead of a titled one. ::after on the heading restores
   the big click target without any of that. */

.cp-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.cp-post {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
  border-radius: var(--cp-r-lg);
  background: var(--cp-paper);
  border: 1px solid var(--cp-hairline);
  box-shadow: var(--cp-shadow-sm);
  transition: transform var(--cp-t-fast), box-shadow var(--cp-t-fast),
              border-color var(--cp-t-fast);
}
.cp-post:hover {
  transform: translateY(-3px);
  border-color: var(--cp-blue-line);
  box-shadow: var(--cp-shadow-md);
}

.cp-post-kicker {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--cp-blue);
}
.cp-post-h {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.45;
}
.cp-post-h a { color: inherit; text-decoration: none }
.cp-post-h a::after { content: ''; position: absolute; inset: 0 }  /* the card is the target */
.cp-post-h a:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 4px }
.cp-post-sum { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--cp-ink-soft) }
.cp-post-meta {
  font-size: .75rem;
  color: var(--cp-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* the compact form, for a strip under a hero where a full card grid
   would push everything else off the screen */
.cp-post-strip { display: grid; gap: 2px }
.cp-post-strip .cp-post {
  padding: 13px 15px;
  border-radius: var(--cp-r-md);
  box-shadow: none;
  background: var(--cp-glass);
}
.cp-post-strip .cp-post:hover { transform: none }
.cp-post-strip .cp-post-h { font-size: .9375rem }
.cp-post-strip .cp-post-sum { display: none }

/* ═══ hub links ══════════════════════════════════════════════════
   Internal linking, which is most of what makes a content site rank
   at all. Plain, dense, and crawlable — this is one of the few
   places where a wall of links is the correct design. */

.cp-hubs { display: flex; flex-wrap: wrap; gap: 10px }
.cp-hub {
  padding: 8px 14px;
  border-radius: var(--cp-r-pill);
  background: var(--cp-glass);
  border: 1px solid var(--cp-hairline);
  color: var(--cp-ink-soft);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--cp-t-fast), border-color var(--cp-t-fast);
}
.cp-hub:hover { color: var(--cp-blue); border-color: var(--cp-blue-line) }

/* ═══ FAQ ════════════════════════════════════════════════════════
   <details>/<summary>, not a JS accordion. It is open to a crawler
   whether or not it is open on screen, it works with no script, and
   the keyboard behaviour is free and correct. */

.cp-faq { display: grid; gap: 10px; max-width: 78ch }
.cp-faq details {
  border-radius: var(--cp-r-md);
  background: var(--cp-glass);
  border: 1px solid var(--cp-hairline);
  overflow: hidden;
}
.cp-faq summary {
  padding: 15px 18px;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-faq summary::-webkit-details-marker { display: none }
.cp-faq summary::after {
  content: '';
  margin-inline-start: auto;
  width: 9px; height: 9px;
  border-inline-end: 2px solid var(--cp-ink-faint);
  border-block-end: 2px solid var(--cp-ink-faint);
  transform: rotate(45deg);
  transition: transform var(--cp-t-fast);
}
.cp-faq details[open] summary::after { transform: rotate(-135deg) }
.cp-faq summary:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: -3px }
.cp-faq-a {
  margin: 0;
  padding: 0 18px 16px;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--cp-ink-soft);
}

/* ═══ a hero that is also the app ════════════════════════════════
   Variant B: the fold is a locked working surface, the page below it
   is a document. .cp-fold takes the viewport height and nothing else
   on the page does. */

.cp-fold {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  /* minus the header, or the fold alone is taller than the viewport
     and the page scrolls before it has anything to scroll TO — which
     reads as a broken hero rather than as a document below */
  min-height: min(calc(100dvh - 74px), 820px);
  padding: 20px;
}
.cp-fold-in { width: var(--cp-rail); display: grid; gap: clamp(18px, 3vw, 28px) }

.cp-h1 {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: clamp(1.75rem, 5.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.cp-h1 em { font-style: normal; color: var(--cp-blue) }
.cp-lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1rem, 2.1vw, 1.125rem);
  line-height: 1.65;
  color: var(--cp-ink-soft);
}

/* the quiet line that says where a number came from. Every
   illustrative figure on these pages needs one; a market average with
   no stated source is the same unfalsifiable claim the voice rules
   ban everywhere else. */
.cp-source {
  margin: 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--cp-ink-faint);
}

/* ═══ scroll cue ═════════════════════════════════════════════════
   Only on the hybrid, and only there because a full-height fold with
   no cue reads as a page with nothing under it — which is exactly
   the mistake that makes a locked hero cost you the whole document. */
.cp-more {
  display: inline-flex;
  text-decoration: none;
  justify-self: start;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cp-ink-faint);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}
.cp-more:hover { color: var(--cp-blue) }
.cp-more:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 4px }
/* the target of the cue: scroll it clear of the sticky header */
#market { scroll-margin-top: 84px }
.cp-more svg { animation: cpNudgeDown 2.4s var(--cp-ease) infinite }
@keyframes cpNudgeDown {
  0%, 60%, 100% { transform: translateY(0) }
  30% { transform: translateY(4px) }
}
@media (prefers-reduced-motion: reduce) {
  .cp-more svg { animation: none }
}

/* ═══ responsive ═════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .cp-picks { grid-template-columns: 1fr }
  .cp-fold { min-height: auto; padding: 28px 18px 34px }
}

/* ── source attribution ──────────────────────────────────────
   Moved here from cp-cat.css. Every surface that prints a number
   prints where it came from and when it was checked, so the rule has
   to live in the layer EVERY page loads — not in the catalogue bundle
   that only four pages do. /health/ and /life/ shipped this class with
   no rule behind it for exactly that reason. */
.cp-cat-src { font-size: .75rem; color: var(--cp-ink-faint); line-height: 1.6 }
.cp-cat-src a { color: var(--cp-ink-soft) }

/* ═══ a band with the character standing beside it ═══════════════
   The verticals alternate a tinted canvas band against a white one,
   and the white ones were carrying nothing but a column of prose.
   Measured on /health/: seven bands, four of them white, two of those
   493px and 635px tall with zero images in them. The complaint was
   that the white looked flat, but white was only what made the
   emptiness visible — the band was under-filled.

   In RTL the reading column sits right and the dead space is on the
   LEFT, which is where the figure column goes. Content first in
   source order, so the character is decoration to a screen reader's
   left-to-right traversal of the DOM rather than something it has to
   step over to reach the text.

   ONE PER PAGE. Two of these on the same document stop reading as the
   brand turning up and start reading as clip art, which was visible
   the moment a prototype put two on /life/.

   The character is NOT sized here. cp-mark.js and the plugin both
   care about width and height ATTRIBUTES on inline SVG — the plugin
   forces unclassed inline svg to 1.25em at a specificity a class
   cannot beat — so the size travels with the markup.

   THE FIGURE PAIRS WITH THE HEADING, NOT WITH THE WHOLE BAND.
   The first version made .cp-band-in itself the two-column grid, so
   the figure sat beside EVERYTHING. That was right while the body was
   prose and wrong the moment it became cards: the column plus its gap
   came out of the card row, and four cards wrapped 3 + 1. Worse, the
   rule outlived the change — the band markup moved to .cp-band-top
   and this stale grid was still turning .cp-band-in into two columns,
   which put the heading in one and the entire card grid in the other.
   Headings wrapped one word per line. */
.cp-band-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}
.cp-band-figure .cp-band-head { margin-bottom: 0 }
.cp-band-figure .cp-band-top { margin-bottom: clamp(20px, 3vw, 30px) }

.cp-band-fig {
  display: grid;
  place-items: center;
  line-height: 0;
}

/* Under the breakpoint the reading column needs the whole rail, and a
   character stacked above the text is 150px of decoration between the
   heading and the first sentence. It goes away rather than moves. */
@media (max-width: 760px) {
  .cp-band-top { grid-template-columns: 1fr }
  .cp-band-fig { display: none }
}