, so it cannot zero the centring the bands depend on. */ .lp-cmp :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, figcaption, table, caption) { margin: 0; padding: 0; } .lp-cmp :where(ul, ol) { list-style: none; } .lp-cmp :where(img, svg) { max-width: 100%; } .lp-cmp { --cmp-pad: clamp(36px, 3.6vw, 60px); /* Same pair as .landing2026HeaderInner — a narrower column leaves the logo and header button hanging outside the text on wide screens. */ --cmp-gutter: clamp(24px, 4vw, 72px); --cmp-max: 1180px; --cmp-measure: 760px; color: var(--rk-ink); font-family: var(--rk-font-body); } /* ═══ BANDS ═══════════════════════════════════════════════════════════════ */ .lp-cmp > section { width: min(calc(100% - 2 * var(--cmp-gutter)), var(--cmp-max)); margin-inline: auto; padding-block: var(--cmp-pad); } .lp-cmp h2 { font-family: var(--rk-font-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; margin-bottom: 18px; } /* ═══ HERO ════════════════════════════════════════════════════════════════ No artwork: this page answers a question, and a picture of our own book above that answer reads as an advert wearing a comparison's clothes. Weight comes from type size alone. */ .rk-cmp-kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rk-emerald); margin-bottom: 12px; } .lp-cmp .rk-cmp-hero { padding-top: clamp(28px, 3vw, 52px); } .lp-cmp .rk-cmp-hero h1 { font-family: var(--rk-font-display); font-size: clamp(32px, 4vw, 52px); line-height: 1.12; max-width: 18ch; margin-bottom: 20px; } .rk-cmp-lede { max-width: var(--cmp-measure); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--rk-ink-soft); } /* The checked-on date. Quiet, but present on every comparison page — a comparison with no date is a claim with no shelf life, and the reader is entitled to weigh it. */ .rk-cmp-verified { margin-top: 18px; font-size: 13px; color: var(--rk-ink-soft); } .rk-cmp-verified time { font-variant-numeric: tabular-nums; } /* ═══ TABLE ═══════════════════════════════════════════════════════════════ The scroll container, not the page, absorbs overflow. Without this a six-column table at a narrow viewport widens and every other section on the page starts scrolling sideways with it. */ .rk-cmp-scroll { overflow-x: auto; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-lg); background: var(--rk-surface); box-shadow: var(--rk-shadow-card); } .rk-cmp-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14px; line-height: 1.5; text-align: left; } .rk-cmp-table caption { /* Present for screen readers and for anything parsing the table's meaning; the visible heading above already says the same thing to sighted readers, so showing both is repetition. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rk-cmp-table th, .rk-cmp-table td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--rk-line); } .rk-cmp-table thead th { font-family: var(--rk-font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--rk-ink-soft); background: var(--rk-paper-2); white-space: nowrap; } .rk-cmp-table tbody th { font-weight: 600; color: var(--rk-ink); white-space: nowrap; } .rk-cmp-table tbody tr:last-child th, .rk-cmp-table tbody tr:last-child td { border-bottom: 0; } .rk-cmp-table a { color: var(--rk-ink); text-decoration: underline; text-underline-offset: 3px; } .rk-cmp-table a:hover { color: var(--rk-emerald); } /* Our own row, marked as ours. A comparison table on our own domain that hides which row is ours is the shape readers distrust, and saying so costs nothing. */ .rk-cmp-row--us th, .rk-cmp-row--us td { background: var(--rk-emerald-soft); } .rk-cmp-row--us th { color: var(--rk-ink); } .rk-cmp-col--us { background: var(--rk-emerald-soft); } .rk-cmp-table--vs { min-width: 720px; } .rk-cmp-table--vs th[scope="row"] { width: 26%; white-space: normal; } .lp-cmp .rk-cmp-sourcerow { padding-block: 0; } .rk-cmp-source { max-width: var(--cmp-measure); font-size: 13px; color: var(--rk-ink-soft); } .rk-cmp-source a { color: var(--rk-ink-soft); text-decoration: underline; text-underline-offset: 3px; } .rk-cmp-source a:hover { color: var(--rk-emerald); } /* ═══ PER-TOOL CARDS ══════════════════════════════════════════════════════ */ .rk-cmp-cards-intro { max-width: var(--cmp-measure); margin-bottom: 28px; color: var(--rk-ink-soft); line-height: 1.6; } .rk-cmp-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .rk-cmp-card { padding: 22px 24px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-lg); background: var(--rk-surface); } .rk-cmp-card h3 { font-family: var(--rk-font-display); font-size: 19px; margin-bottom: 6px; } .rk-cmp-card-best { font-size: 14px; color: var(--rk-emerald); margin-bottom: 16px; } .rk-cmp-card-spec dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--rk-ink-soft); margin-bottom: 4px; } .rk-cmp-card-spec dd { font-size: 14px; line-height: 1.55; margin-bottom: 14px; } .rk-cmp-card-spec dd:last-child { margin-bottom: 0; } .rk-cmp-card-link { margin-top: 18px; font-size: 14px; } .rk-cmp-card-link a { color: var(--rk-ink); text-decoration: underline; text-underline-offset: 3px; } .rk-cmp-card-link a:hover { color: var(--rk-emerald); } /* ═══ PROSE BANDS ═════════════════════════════════════════════════════════ */ .rk-cmp-fit p, .rk-cmp-arg p { max-width: var(--cmp-measure); font-size: 16px; line-height: 1.7; color: var(--rk-ink-soft); margin-bottom: 16px; } .rk-cmp-fit p:last-child, .rk-cmp-arg p:last-child { margin-bottom: 0; } .lp-cmp .rk-cmp-arg { padding-block: clamp(20px, 2vw, 30px); } /* ═══ CHOOSE BY WHAT THE BOOK HAS TO DO ═══════════════════════════════════ Theirs on the left, deliberately, and styled identically — a page that sends people away should not visually discount the column doing the sending. */ .rk-cmp-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .rk-cmp-choose-col { padding: 24px 26px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-lg); background: var(--rk-surface); } .rk-cmp-choose-col--us { background: var(--rk-emerald-soft); border-color: transparent; } .rk-cmp-choose-col h3 { font-family: var(--rk-font-display); font-size: 18px; margin-bottom: 14px; } .rk-cmp-choose-col li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); } .rk-cmp-choose-col li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--rk-emerald); } .rk-cmp-choose-col li:last-child { margin-bottom: 0; } /* ═══ FAQ ═════════════════════════════════════════════════════════════════ The `.faq` skin itself comes from the shared sheet — a third FAQ treatment on a site that already carries two is drift, not design. Only the measure is this family's business. */ .lp-cmp .rk-cmp-faq .faq { max-width: 860px; } .lp-cmp .rk-cmp-faq h2 { text-align: center; } /* The closing card is the home page's own component; home-v3.css writes its rules as `#faq .final…`, which is why the card sits inside the section carrying that id. Only the top margin is adjusted, because this family already spends a band's padding on the gap above it. */ #faq.rk-cmp-faq .final.final-home { margin-top: var(--cmp-pad); } /* ═══ CROSSLINKS ══════════════════════════════════════════════════════════ */ .lp-cmp .rk-cmp-cross { padding-bottom: clamp(48px, 5vw, 80px); } .rk-cmp-cross h2 { font-size: 18px; margin-bottom: 14px; } .rk-cmp-cross-row { display: flex; flex-wrap: wrap; gap: 10px; } .rk-cmp-chip { display: inline-block; padding: 9px 16px; border: 1px solid var(--rk-line); border-radius: 999px; background: var(--rk-surface); font-size: 14px; color: var(--rk-ink); text-decoration: none; } .rk-cmp-chip:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); } @media (max-width: 860px) { .lp-cmp .rk-cmp-hero h1 { max-width: none; } .rk-cmp-cardgrid { grid-template-columns: 1fr; } } /* ── Ways in ────────────────────────────────────────────────────────────────────────────────── Three on this page, one per moment it actually convinces someone: after the table, at the end of "Where ReadKidz fits", and the inherited closing card. Deliberately quiet — the only reason this page can rank for "alternatives" is that it reads as an answer rather than an advert, and a loud banner after the table would spend the credibility the honest half was written to buy. Hence a hairline rule and a single button, not a filled panel. */ .rk-cmp-nudge { width: min(100% - 2 * clamp(24px, 4vw, 72px), 1180px); margin: clamp(20px, 3vw, 32px) auto 0; padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--rk-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; } .rk-cmp-nudge-text { margin: 0; max-width: 46ch; color: var(--rk-ink-soft); font-size: 0.95rem; line-height: 1.55; } .rk-cmp-nudge-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; background: var(--rk-emerald); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background 160ms ease; } .rk-cmp-nudge-btn:hover { background: var(--rk-emerald-deep, var(--rk-emerald)); color: #fff; } .rk-cmp-nudge-btn:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 3px; } /* The fit section's own row. It sits inside .rk-cmp-fit, which already owns the column width, so this one must NOT restate the container formula — doing so would nest a 1180px block inside the narrower prose column and push it out of alignment with the paragraphs above it. */ .rk-cmp-fit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(18px, 2.4vw, 26px); } .rk-cmp-fit-quiet { color: var(--rk-ink-soft); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; } .rk-cmp-fit-quiet:hover { color: var(--rk-emerald); } .rk-cmp-fit-note { color: var(--rk-ink-faint, var(--rk-ink-soft)); font-size: 0.85rem; } @media (max-width: 640px) { .rk-cmp-nudge { justify-content: flex-start; } }