/* The comparison listicle (BACKLOG B23, COMPARE.md): the structure and
   the conversion devices of the owner's best-converting affiliate page
   (TopReviewed's snap-on veneers 3), in our own ground, type and orange.
   Its signature carries over: the winner's card boxed in ink with a
   solid offset shadow, and square cards whose pros and cons thin out
   down the ranking. Each section sets its own width: prose narrow, the
   cards and the review wide. */

.cp-page {
  background: var(--paper-card);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.cp-page h1,
.cp-page h2,
.cp-page h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

.cp-prose,
.cp-narrow,
.cp-wide {
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.cp-prose { max-width: calc(48rem + 2 * var(--space-5)); }
.cp-narrow { max-width: calc(56rem + 2 * var(--space-5)); }
.cp-wide { max-width: calc(72rem + 2 * var(--space-5)); }

.cp-page h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cp-kicker {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--accent);
}

/* The promise, the byline, the proof */
.cp-hero {
  padding: var(--space-7) 0 var(--space-7);
  border-bottom: 4px solid var(--ink);
}

.cp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.cp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.cp-deal {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--saving);
  color: var(--paper-card);
  font-size: var(--text-xs);
}

.cp-sub {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 40rem;
}

.cp-cred {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-mute);
}

/* The phone bar's avatar is the logo's mark (shared/_logo_mark, 2026-09-25),
   at rest: it was "rai" set in a dark circle. */
.cp-mark {
  flex: none;
  display: block;
  width: 3.25rem;
  height: 3.25rem;
}

.cp-mark .logo-mark { display: block; width: 100%; height: 100%; }
.cp-mark.is-small { width: 2.5rem; height: 2.5rem; }

.cp-hero-pair,
.cp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.cp-hero-pair > div,
.cp-pair > div {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  background: var(--tint);
}

.cp-hero-pair img,
.cp-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-hero-pair figcaption,
.cp-pair figcaption {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  text-align: center;
}

.cp-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}

.cp-tag.is-after { background: var(--ink); color: var(--paper-card); }

/* The hero's showcase reel (2026-10-05): the homepage's reel, one link to
   the generator, its button laid over the frame so the whole picture
   reads as the way in. It sits right under the credibility line since the
   byline went (owner, 2026-10-05). */
.cp-hero-reel { margin: var(--space-6) 0 0; }

.cp-hero-reel-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--deep);
  box-shadow: var(--shadow-deep);
}

.cp-hero-reel-link video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* At the top: the reel's own tool labels run along its bottom edge.
   Centered by margins, not a transform: .btn-loud:hover lifts with one. */
.cp-hero-reel-btn {
  position: absolute;
  inset: var(--space-4) 0 auto;
  width: max-content;
  margin-inline: auto;
}

.cp-hero-reel-link:hover .cp-hero-reel-btn,
.cp-hero-reel-link:focus-visible .cp-hero-reel-btn {
  background-image: linear-gradient(180deg, var(--accent-hover), var(--accent));
}

.cp-hero-reel figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  text-align: center;
}

/* The story */
.cp-intro { padding: var(--space-7) 0; }

.cp-intro .cp-hero-pair { margin: var(--space-4) 0 var(--space-5); }

.cp-intro p,
.cp-review-section p,
.cp-about p {
  font-size: var(--text-lg);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.cp-intro p.is-lead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cp-page a:not(.btn):not(.cp-card) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cp-criteria,
.cp-checks,
.cp-cautions,
.cp-pros,
.cp-cons {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.cp-criteria li,
.cp-checks li,
.cp-cautions li,
.cp-pros li,
.cp-cons li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
}

.cp-criteria li,
.cp-checks li,
.cp-cautions li { font-size: var(--text-lg); }

/* The marks: a drawn tick or cross (inline SVG masks, the ladder's
   own strokes at home.css .rl-checks) in a soft circle. Orange where
   the point is ours (the winner's card, the case for it, the
   scorecard), ink for a rival's pros and the intro's criteria, red for
   any drawback. The circle is ::before, the stroke ::after, both
   centered on the first line whatever its size. */
.cp-criteria li::before,
.cp-checks li::before,
.cp-pros li::before,
.cp-cautions li::before,
.cp-cons li::before,
.cp-criteria li::after,
.cp-checks li::after,
.cp-pros li::after,
.cp-cautions li::after,
.cp-cons li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  top: calc(0.5lh - 0.65rem);
  width: 1.3rem;
  height: 1.3rem;
}

.cp-criteria li::before,
.cp-checks li::before,
.cp-pros li::before,
.cp-cautions li::before,
.cp-cons li::before { border-radius: 50%; }

.cp-criteria li::before,
.cp-pros li::before { background: var(--tint); }

.cp-checks li::before,
.cp-card.is-top .cp-pros li::before { background: color-mix(in srgb, var(--accent) 14%, var(--paper-card)); }

.cp-cautions li::before,
.cp-cons li::before { background: color-mix(in srgb, var(--caution) 12%, var(--paper-card)); }

.cp-criteria li::after,
.cp-checks li::after,
.cp-pros li::after {
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.8 2.8L14.2 7.4' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.8 2.8L14.2 7.4' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cp-checks li::after,
.cp-card.is-top .cp-pros li::after { background: var(--accent); }

.cp-cautions li::after,
.cp-cons li::after {
  background: var(--caution);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 7.2l5.6 5.6M12.8 7.2l-5.6 5.6' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 7.2l5.6 5.6M12.8 7.2l-5.6 5.6' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cp-checks.is-compact li,
.cp-cautions.is-compact li { font-size: var(--text-sm); }

/* The ranking */
.cp-offers {
  padding: var(--space-8) 0;
  background: var(--paper-deep);
}

.cp-offers h2 { margin: 0 0 var(--space-3); }

.cp-offers-note {
  max-width: 44rem;
  margin: 0 0 var(--space-6);
  color: var(--ink-soft);
}

.cp-cards {
  display: grid;
  gap: var(--space-5);
}

.cp-card {
  position: relative;
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper-card);
  border: 2px solid var(--line);
  color: inherit;
  text-decoration: none;
}

/* The winner: the whole card is the link, boxed in ink with the solid
   shadow, and a single light sweep the first time it comes into view
   (offer_bar_controller marks it seen) says it can be tapped. At rest,
   and without script, it is simply the finished card. */
.cp-card.is-top {
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.cp-card.is-top:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}

.cp-card.is-top:focus-visible {
  outline: 4px solid var(--ember);
  outline-offset: 4px;
}

.cp-card.is-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-100%);
}

.cp-card.is-top.is-seen::after { animation: cp-sweep 1.2s var(--ease-out) 300ms 1 both; }

@keyframes cp-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.cp-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 8px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--tint);
  color: var(--ink-soft);
}

.cp-card.is-top .cp-badge {
  background: var(--ink);
  color: var(--paper-card);
}

.cp-card-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: calc(var(--space-7) + var(--space-3)) var(--space-5) var(--space-5);
  border-right: 2px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--paper-card));
  text-align: center;
}

.cp-card.is-top .cp-card-media { border-right-color: var(--ink); }

/* Our card's picture: one room, the design on the left and the photo
   it started from on the right, the render line between them, as the
   logo and the reel have it (and the after's best pieces sit left). */
.cp-card-split {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
  box-shadow: var(--shadow-soft);
}

.cp-card-split img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-card-split img.is-after { clip-path: inset(0 50% 0 0); }

.cp-card-split-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px 3px rgba(194, 65, 12, 0.55);
}

.cp-card-split .cp-tag.is-right { left: auto; right: 10px; }

/* A rival's logo, saved from its own site (COMPARE.md C8), with its
   address under it; a wordmark sits on a white tile, RoomGPT's white
   one on the deep tile, an app icon on its own. The address pill is the
   fallback for a rival without a logo. */
.cp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--paper-card);
  border: 2px solid var(--line);
}

.cp-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cp-logo.is-dark {
  background: var(--deep);
  border-color: var(--deep);
}

.cp-logo.is-icon {
  padding: 0;
  border: 0;
  background: none;
}

.cp-logo.is-icon img { border-radius: 18px; }

.cp-site-plain {
  margin-top: calc(-1 * var(--space-2));
  font-size: var(--text-xs);
  color: var(--ink-mute);
}

.cp-site {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--paper-card);
  border: 2px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}


.cp-best-for {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-wrap: balance;
}

.cp-card-body { padding: var(--space-6); }

.cp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.cp-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  letter-spacing: -0.02em;
}

.cp-score {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.cp-score span {
  font-size: 0.5em;
  color: var(--ink-mute);
}

.cp-score-label {
  margin: 0 0 var(--space-3);
  text-align: right;
  font-size: var(--text-xs);
  color: var(--ink-mute);
}

.cp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.cp-price strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.cp-price s { color: var(--ink-mute); }
.cp-period { color: var(--ink-soft); }

.cp-save {
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--saving) 14%, var(--paper-card));
  color: var(--saving);
  font-size: var(--text-xs);
  font-weight: 700;
}

.cp-price-note {
  margin: var(--space-1) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.cp-pros,
.cp-cons { margin-bottom: var(--space-4); }

.cp-pros li,
.cp-cons li {
  font-size: var(--text-base);
  color: var(--ink-soft);
}

.cp-pros strong,
.cp-cons strong { color: var(--ink); }

.cp-cta { margin-top: var(--space-2); }
.cp-cta.is-block { width: 100%; }

.cp-cta-sub {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-mute);
}

/* At a glance */
.cp-table-wrap {
  margin-top: var(--space-7);
  overflow-x: auto;
}

.cp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-card);
  border: 2px solid var(--ink);
  font-size: var(--text-sm);
}

.cp-table caption {
  caption-side: bottom;
  padding-top: var(--space-3);
  text-align: left;
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

.cp-table th,
.cp-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.cp-table thead th {
  background: var(--deep);
  color: var(--paper-card);
  font-weight: 600;
}

.cp-table tr.is-ours { background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper-card)); }
.cp-table tbody th { font-weight: 700; }

/* How we compared */
.cp-method { padding: var(--space-7) 0; }

/* The method box and the scorecard are ordinary cards: the solid ink
   shadow belongs to the winner's card alone, so it means "our pick"
   (owner, 2026-09-24). */
.cp-method-box {
  overflow: hidden;
  border: var(--border-hard);
  border-radius: var(--radius-md);
  background: var(--paper-card);
  box-shadow: var(--shadow-soft);
}

.cp-method-box h2 {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--deep);
  color: var(--paper-card);
  font-size: var(--text-xl);
}

.cp-method-box dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.cp-method-box dl > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-5);
  border-left: var(--border-hard);
  text-align: center;
}

.cp-method-box dl > div:first-child { border-left: 0; }

.cp-method-box dt {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.cp-method-box dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Why it came first */
.cp-pick { padding: var(--space-8) 0; }

.cp-pick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.cp-pick-copy h2 { margin: 0 0 var(--space-4); }

.cp-pick-copy > p:not(.cp-kicker):not(.cp-cta-sub) {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The full review beside the scorecard */
.cp-review {
  padding: var(--space-8) 0;
  background: var(--paper);
}

.cp-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.cp-review-section + .cp-review-section { margin-top: var(--space-7); }
.cp-review-section h2 { margin: 0 0 var(--space-4); }

/* The review's proof: a before and after side by side, the homepage's
   tool tiles (home.css .rl-cmp, flip_controller), the reel. */
.cp-pair { margin: var(--space-5) 0 var(--space-6); }
.cp-pair figcaption { text-align: left; }

.cp-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}

.cp-inline-cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.cp-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}

.cp-score-card {
  padding: var(--space-5);
  background: var(--paper-card);
  border: var(--border-hard);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
}

.cp-score-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.cp-score-big {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.cp-score-big span {
  font-size: 0.4em;
  color: var(--ink-mute);
}

.cp-score-note {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-mute);
}

.cp-bars {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.cp-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.cp-bars li > span:last-child {
  grid-row: 1;
  grid-column: 2;
  text-align: right;
  font-weight: 700;
}

.cp-bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--tint);
  overflow: hidden;
}

.cp-bar rect { fill: var(--accent); }

/* Questions */
.cp-faq { padding: var(--space-8) 0; }
.cp-faq h2 { margin: 0 0 var(--space-5); }

.cp-faq-item {
  border: 2px solid var(--line);
  background: var(--paper-card);
}

.cp-faq-item + .cp-faq-item { margin-top: var(--space-3); }

.cp-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: var(--text-lg);
  cursor: pointer;
  list-style: none;
}

.cp-faq-item summary::-webkit-details-marker { display: none; }

.cp-faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
}

.cp-faq-item[open] summary::after { content: "\2212"; }

.cp-faq-item p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The last ask */
.cp-final {
  padding: var(--space-8) 0;
  background: var(--deep);
  color: var(--paper-card);
  text-align: center;
}

.cp-final h2 { margin: 0 0 var(--space-5); }
.cp-final .cp-cta-sub { color: rgba(255, 255, 255, 0.72); }

/* Who wrote it, from what */
.cp-about { padding: var(--space-7) 0 var(--space-8); }
.cp-about h2 { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.cp-about p { font-size: var(--text-base); color: var(--ink-soft); }

.cp-about h3 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-base);
}

.cp-sources {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* The offer on the way out: exit intent on a desktop, a dwell in the
   review on a phone (compare_popup_controller). */
.cp-popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(15, 20, 23, 0.7);
}

.cp-popup[hidden] { display: none; }

.cp-popup-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  width: min(100%, 44rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-card);
  box-shadow: var(--shadow-deep);
}

.cp-popup-box:focus { outline: none; }

.cp-popup-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-popup-copy { padding: var(--space-6); }
.cp-popup-copy h2 { margin: 0 0 var(--space-3); }

.cp-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* The phone's bar: appears once the winner's card is reached and stays
   (offer_bar_controller); a desktop never shows it. */
.cp-bar-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -4px rgba(15, 20, 23, 0.1);
  transform: translateY(110%);
  transition: transform 300ms var(--ease-out);
}

.cp-bar-sticky.is-visible { transform: none; }

.cp-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 40rem;
  margin-inline: auto;
}

.cp-bar-inner p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.cp-bar-inner s { color: var(--ink-mute); }
.cp-bar-inner .btn { flex: none; margin: 0; min-height: 2.75rem; padding: 0 1.1em; }

@media (max-width: 1023px) {
  .cp-pick-grid,
  .cp-review-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-aside { position: static; }
}

@media (max-width: 767px) {
  .cp-bar-sticky { display: block; }
  .cp-card { grid-template-columns: minmax(0, 1fr); }
  .cp-card-media { border-right: 0; border-bottom: 2px solid var(--line); padding-top: var(--space-8); }
  .cp-card.is-top .cp-card-media { border-bottom-color: var(--ink); }
  .cp-card.is-top { box-shadow: 5px 5px 0 var(--ink); margin-right: 5px; }
  .cp-card-body { padding: var(--space-5); }
  .cp-card.is-top .cp-cta { width: 100%; }
  .cp-method-box dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-method-box dl > div:nth-child(3) { border-left: 0; }
  .cp-method-box dl > div:nth-child(n+3) { border-top: var(--border-hard); }
  .cp-popup-box { grid-template-columns: minmax(0, 1fr); }
  .cp-popup-img { height: 10rem; }
  .cp-table thead { display: none; }
  .cp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .cp-table tbody th { grid-column: 1; border-bottom: 0; padding-bottom: 0; }
  .cp-table td { border-bottom: 0; padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .cp-table td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .cp-table td:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
  .cp-table td:nth-of-type(3) { grid-column: 2; grid-row: 1; padding-top: var(--space-3); font-weight: 700; }
}

@media (max-width: 480px) {
  .cp-prose,
  .cp-narrow,
  .cp-wide { padding-inline: var(--space-4); }
  .cp-hero { padding-top: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-card.is-top::after { animation: none; display: none; }
  .cp-card.is-top,
  .cp-bar-sticky { transition: none; }
}