.pp-reading-cta {
  --cta-ink: #122b4b;
  --cta-copy: #405572;
  --cta-accent: #086d80;
  --cta-button: #086d80;
  --cta-button-ink: #fff;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 28px 0 36px;
  padding: 26px;
  border: 1px solid #c2e6e1;
  border-radius: 20px;
  background: radial-gradient(ellipse at 0 100%, #cdf3e8 0, transparent 55%), linear-gradient(115deg, #effcf8, #edf2ff);
  color: var(--cta-ink);
  box-shadow: 0 8px 28px rgba(18, 43, 75, .06);
}

.pp-reading-cta--bottom { margin-top: 40px; margin-bottom: 0; }
.pp-reading-cta__mascot { display: block; width: 104px; height: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(18, 43, 75, .12)); }
.pp-reading-cta__copy { min-width: 0; }
.pp-reading-cta .pp-reading-cta__brand { display: block; margin: 0 0 6px; color: var(--cta-accent); font: 800 12px/1.4 'Manrope', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.pp-reading-cta .pp-reading-cta__title { margin: 0 0 8px; color: var(--cta-ink); font: 800 clamp(22px, 2.4vw, 28px)/1.2 'Manrope', system-ui, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.pp-reading-cta .pp-reading-cta__description { margin: 0; color: var(--cta-copy); font: 400 14px/1.6 'DM Sans', system-ui, sans-serif; }
.pp-reading-cta .pp-reading-cta__practice { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--cta-accent); font: 700 14px/1.4 'DM Sans', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.pp-reading-cta .pp-reading-cta__android { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cta-accent); border-radius: 999px; color: var(--cta-accent); font: 700 13px/1.4 'Manrope', system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.pp-reading-cta .pp-reading-cta__android:hover { text-decoration: underline; text-underline-offset: 4px; }
.pp-reading-cta__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pp-reading-cta .pp-reading-cta__signup { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 12px 20px; border: 1px solid transparent; border-radius: 999px; background: var(--cta-button); color: var(--cta-button-ink); font: 800 14px/1.4 'Manrope', system-ui, sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(8, 109, 128, .14); }
.pp-reading-cta .pp-reading-cta__signup:hover { background: #075c6c; color: #fff; text-decoration: none; }
.pp-reading-cta .pp-reading-cta__pro { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--cta-accent); font: 700 13px/1.4 'Manrope', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.pp-reading-cta .pp-reading-cta__pro:hover { text-decoration-thickness: 2px; }
.pp-reading-cta a:focus-visible { outline: 3px solid var(--cta-accent); outline-offset: 4px; }

html[data-theme="dark"] .pp-reading-cta {
  --cta-ink: #f1fbff;
  --cta-copy: #bfd3e2;
  --cta-accent: #9be8db;
  --cta-button: #9be8db;
  --cta-button-ink: #102b37;
  border-color: #315469;
  background: radial-gradient(ellipse at 0 100%, #173d42 0, transparent 55%), linear-gradient(115deg, #142b38, #1c2442);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}
html[data-theme="dark"] .pp-reading-cta .pp-reading-cta__signup:hover { background: #c0f4e9; color: #102b37; }

@media (max-width: 760px) {
  .pp-reading-cta { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 22px; }
  .pp-reading-cta__mascot { width: 80px; }
  .pp-reading-cta__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
}

@media (max-width: 420px) {
  .pp-reading-cta { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 16px; }
  .pp-reading-cta__mascot { width: 60px; align-self: start; margin-top: 22px; }
  .pp-reading-cta .pp-reading-cta__brand { font-size: 11px; }
  .pp-reading-cta .pp-reading-cta__title { font-size: 21px; }
  .pp-reading-cta .pp-reading-cta__description { font-size: 13px; }
  .pp-reading-cta__actions { gap: 6px 16px; }
  .pp-reading-cta .pp-reading-cta__signup { padding: 12px 16px; }
}