/* ConvertKit review (prefix ckr-): landscape variant of the fam-rv template (see fam-rv.css section 10). */

.ckr-wide { width: min(100% - 2 * var(--gutter), 79.5rem); margin-inline: auto; }
.ckr-layout { --aside: 23.1rem; gap: .55rem; }

/* Hero */
.ckr-hero { --hero-h: 16.5rem; background: #f7f9fb; }
.ckr-hero::before { background: linear-gradient(90deg, rgba(247, 249, 251, .97) 0%, rgba(247, 249, 251, .95) 46%, rgba(247, 249, 251, .5) 52%, rgba(247, 249, 251, 0) 57%); }
.ckr-hero .hero__bg { left: 33%; }
.ckr-hero .hero__bg img { object-position: 0% 60%; }
.ckr-hero .hero__inner { padding-inline-start: clamp(0px, 8vw - 3rem, 6.2rem); padding-block: .4rem .55rem; align-items: start; }
.ckr-hero .hero__content { max-width: 37.5rem; }
.ckr-hero .breadcrumb { font-size: .82rem; margin-bottom: .25rem; }
.ckr-title { max-width: 32rem; font-size: clamp(1.6rem, .7rem + 1.8vw, 2.02rem); line-height: 1.02; letter-spacing: -.03em; color: #0e1f4d; margin-bottom: .2em; }
.ckr-hero .hero__lead { font-size: max(.82rem, 16px) /* rt-1019 */; line-height: 1.18; color: #26314d; max-width: 31rem; }
.ckr-points { margin-top: .45rem; gap: .35rem .6rem; }
.ckr-points li { gap: .3rem; font-size: max(.6rem, 16px) /* rt-1019 */; }
.ckr-points strong { font-size: .64rem; }
.ckr-points .ib { --s: 1.7rem; }
.ckr-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .5rem; }
.ckr-btn { min-height: 2rem; min-width: 13.2rem; padding: .25rem 1rem; font-size: .86rem; }
.ckr-btn .icon { width: 1.05rem; height: 1.05rem; }
.ckr-btn--ghost { --btn-fg: #0e1f4d; --btn-bd: #0e1f4d; min-width: 11.6rem; }
.ckr-brand { position: absolute; right: 9.5%; top: 34%; margin: 0; }
.ckr-brand .wordmark { font-size: 2.15rem; color: #13265a; text-shadow: 0 0 18px #fff; }
.ckr-note { right: 2.2%; top: .9rem; font-size: 1.3rem; text-align: left; color: #0e1f4d; }
.ckr-note::after { width: 75%; margin-left: 10%; }

/* Disclosure / trust line under the hero */
.ckr-trustline { list-style: none; margin: .1rem 0 0; padding: 0 0 0 2.3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; font-size: .64rem; color: var(--rv-text); }
.ckr-trustline li { display: flex; align-items: center; gap: .4rem; }
.ckr-trustline li:first-child { max-width: 34rem; }
.ckr-trustline .icon { width: 1.05rem; height: 1.05rem; color: var(--rv-ink); }
.ckr-trustline li:first-child .icon { color: var(--green-600); }
.ckr-trustline a { color: inherit; }

/* Score row */
.ckr-scores { padding: .35rem .5rem; border-radius: var(--radius-sm); background: #eef4fb; border: 1px solid #e3ebf6; }
.ckr-scores ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ckr-scores li { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .2rem .3rem; font-size: max(.66rem, 16px) /* rt-1019 */; line-height: 1.2; color: var(--rv-ink); }
.ckr-scores li + li { border-left: 1px solid #d9e3f0; }
.ckr-scores strong { display: block; font-family: var(--font-head); font-size: .98rem; }
.ckr-scores .icon { width: 1.4rem; height: 1.4rem; color: var(--blue-600); }
.ckr-scores li:first-child .icon { color: var(--gold); }
.ckr-scores li:nth-child(4) .icon { color: var(--green-600); }
.ckr-scores li:nth-child(6) .icon { color: var(--green-600); }

/* Verdict row: blue verdict box + green overall box */
.ckr-verdict-row { display: grid; grid-template-columns: minmax(0, 1.54fr) minmax(0, 1fr); gap: .5rem; }
.ckr-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; padding: .4rem .9rem .4rem .6rem; border-radius: var(--radius-sm); background: #eef4fb; border: 1px solid #e3ebf6; }
.ckr-verdict__mark { display: grid; place-items: center; width: 4.9rem; height: 4.9rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); }
.ckr-verdict__mark .tool-mark { --s: 3.4rem; }
.ckr-verdict h2 { margin: 0 0 .2rem; font-size: 1.15rem; letter-spacing: -.02em; }
.ckr-verdict p { margin: 0; font-size: max(.68rem, 16px) /* rt-1019 */; line-height: 1.34; color: var(--rv-text); }
.ckr-overall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; padding: .4rem .55rem; border-radius: var(--radius-sm); background: #eef7f0; border: 1px solid #dcefe0; }
.ckr-overall__score { display: grid; justify-items: center; }
.ckr-overall__score .verdict-label { font-size: .78rem; padding: .2rem .7rem; }
.ckr-overall__list { gap: .15rem; }
.ckr-overall__list li { font-size: max(.58rem, 16px) /* rt-1019 */; line-height: 1.3; padding-left: 1.15rem; color: var(--rv-text); }
.ckr-overall__list li::before { width: .82rem; height: .82rem; background-color: var(--green-600); }

/* Pros / cons */
.ckr-pc .pros, .ckr-pc .cons { padding: .5rem 1rem .6rem; }
.ckr-pc h2 { font-size: 1.05rem; gap: .65rem; }
.ckr-pc h2 .ib { --s: 1.75rem; }
.ckr-pc h2 .ib .icon { width: 60%; height: 60%; color: #fff; }
.ckr-pc .checklist li { font-size: max(.7rem, 16px) /* rt-1019 */; padding-left: 1.45rem; }

/* Section heads with inline sub copy */
.ckr-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .35rem; }
.ckr-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.ckr-head p { margin: 0; font-size: max(.66rem, 16px) /* rt-1019 */; color: var(--rv-text); }

/* Features */
.ckr-feats { --gap: .5rem; }
.ckr-feat { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem .65rem; border-color: #e6ebf2; }
.ckr-feat .ib { --s: 2.4rem; border-radius: 7px; }
.ckr-feat h3 { margin: .05rem 0 .15rem; font-size: .76rem; }
.ckr-feat p { margin: 0; font-size: max(.66rem, 16px) /* rt-1019 */; line-height: 1.32; color: #5d6884; }

/* Pricing */
.ckr-plans { --gap: .5rem; }
.ckr-plan { padding: .45rem .8rem .55rem; }
.ckr-plan .btn { margin-left: 0; width: 100%; }

/* Sidebar */
.ckr-aside { gap: .45rem; }
.ckr-quick { background: #f7f9fc; }
.ckr-quick h2 { margin-bottom: .05rem; font-size: 1.05rem; }
.ckr-quick__rating .stars .icon { width: 1.15em; height: 1.15em; }
.ckr-quick__rating { display: flex; align-items: center; gap: .5rem; margin: 0; }
.ckr-quick__rating .stars { color: var(--gold); }
.ckr-quick__rating strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--rv-ink); }
.ckr-quick__note { margin: .1rem 0 .3rem; font-size: .62rem; color: var(--rv-text); }
.ckr-quick .lnd-bars { gap: .02rem; }
.ckr-quick .lnd-bars div { grid-template-columns: 7.8rem minmax(0, 1fr) 2.2rem; font-size: .64rem; line-height: 1.3; }
.ckr-visit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .55rem 1.1rem .55rem 1.3rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, #1b8139, #23933f); color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); }
.ckr-visit:hover { color: #fff; background: var(--green-700); }
.ckr-visit > .icon { width: 1.7rem; height: 1.7rem; }
.ckr-visit > .icon:nth-of-type(2) { width: 1.1rem; height: 1.1rem; }
.ckr-visit strong { display: block; font-family: var(--font-head); font-size: 1.02rem; }
.ckr-visit span { font-size: .64rem; line-height: 1.3; color: #e7f5ea; }
.lnd-kit--cover { display: grid; grid-template-columns: minmax(0, 1fr) 6.9rem; column-gap: .4rem; }
.lnd-kit--cover > :not(.lnd-kit__cover) { grid-column: 1; }
.lnd-kit--cover .lnd-kit__cover { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; }
.lnd-kit--cover .ebook { --w: 6.8rem; transform: perspective(900px) rotateY(-10deg) rotate(4deg); }
.lnd-kit--cover .ebook__title { font-size: .78rem; margin-top: .35rem; }
.ckr-ask { font-size: .66rem; }

.ckr-overall__score .stars .icon { width: 1.05em; height: 1.05em; }
.ckr-overall__score .lnd-rating strong { font-size: .9rem; }
.ckr-aside .lnd-faq__list { gap: .15rem; }
.ckr-aside .lnd-faq__list summary { padding: .08rem .5rem; line-height: 1.25; justify-content: flex-start; }
.ckr-aside .lnd-faq__list { gap: .1rem; }
.ckr-aside .lnd-faq__list summary::after { margin-left: auto; }
.ckr-aside .lnd-faq__list summary::before { content: "+"; font-weight: 700; color: var(--rv-ink); margin-right: .2rem; }
.ckr-hero ~ .lnd-band .lnd-band__inner { padding-block: .6rem; }

/* Band: copy, button and three trust items on the dark photo */
.ckr-band__items { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; }
.ckr-band__items li { display: flex; align-items: center; gap: .45rem; font-size: max(.58rem, 16px) /* rt-1019 */; line-height: 1.25; color: #dfe7f2; }
.ckr-band__items strong { display: block; font-size: .64rem; color: #fff; }
.ckr-band__icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; color: var(--navy-900); }
.ckr-band__icon .icon { width: 58%; height: 58%; }
.ckr-hero ~ .lnd-band .cta-band__copy { max-width: 27rem; text-align: left; }
.ckr-hero ~ .lnd-band h2 { font-size: 1.12rem; }

@media (max-width: 1180px) {
  .ckr-brand, .ckr-note { display: none; }
  .ckr-hero::before { background: linear-gradient(90deg, rgba(247, 249, 251, .96) 0%, rgba(247, 249, 251, .93) 52%, rgba(247, 249, 251, .4) 70%, rgba(247, 249, 251, 0) 80%); }
  .ckr-scores ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .3rem; }
  .ckr-scores li:nth-child(4) { border-left: 0; }
  .ckr-band__items { flex-wrap: wrap; }
}
@media (max-width: 960px) {
  .ckr-verdict-row { grid-template-columns: minmax(0, 1fr); }
  .ckr-verdict p, .ckr-feat p, .ckr-overall__list li, .ckr-pc .checklist li { font-size: max(.86rem, 16px) /* rt-1019 */; }
  .ckr-trustline { padding-left: 0; font-size: .78rem; }
}
@media (max-width: 760px) {
  .ckr-hero { --hero-mobile-h: 190px; }
  .ckr-hero .hero__bg { left: 0; }
  .ckr-hero .hero__inner { padding-block: 1rem 1.2rem; }
  .ckr-title { max-width: 32rem; font-size: 1.6rem; }
  .ckr-title br { display: none; }
  .ckr-btn { width: 100%; }
  .ckr-scores ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ckr-scores li, .ckr-scores li + li { border-left: 0; justify-content: flex-start; }
  .ckr-head { flex-direction: column; gap: .2rem; }
  .ckr-head h2 { white-space: normal; }
  .ckr-feats { grid-template-columns: minmax(0, 1fr); }
  .ckr-overall { grid-template-columns: minmax(0, 1fr); }
  .ckr-verdict { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ckr-plans { grid-template-columns: minmax(0, 1fr); }
}
