/* The plain pages: privacy, terms, from Goodreads, leaving Goodreads and
   not found. They
   share landing.css's nav and footer, and kabook.css's theme; this is the
   reading column. */
.page { padding: 56px 0 0; }
.page .x { max-width: 720px; }
.page-hd .tag { margin-bottom: 14px; }
.page-hd h1 { font-weight: 600; font-size: clamp(38px, 6vw, 58px); line-height: 1; letter-spacing: -.04em; }
.page-hd .sub { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--s-lead); }
.page-hd .eff { margin-top: 12px; font-size: 14.5px; color: var(--s-mute); }
.prose { margin-top: 44px; font-size: 16.5px; line-height: 1.65; color: var(--s-prose); }
.prose section + section { margin-top: 34px; padding-top: 30px; border-top: 1px dashed var(--s-line); }
.prose h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--s-ink); }
.prose h3 { margin-top: 20px; font-size: 17px; font-weight: 650; color: var(--s-ink); }
.prose p, .prose ul { margin-top: 12px; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--s-acc); }
.prose a { color: var(--s-acc); text-underline-offset: 2px; }
.prose strong { font-weight: 650; color: var(--s-ink); }
.prose .note { padding: 14px 16px; border-radius: 14px; background: var(--s-soft); }

/* From Goodreads: numbered steps, what the app shows, a two-column table,
   and the store badges at the end. */
.prose ol.steps { margin-top: 16px; counter-reset: step; }
.prose ol.steps > li { position: relative; padding-left: 40px; counter-increment: step; }
.prose ol.steps > li + li { margin-top: 14px; }
.prose ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--s-acc) 13%, transparent); color: var(--s-acc); font-size: 14px; font-weight: 650; line-height: 1; }
.prose .shown { margin: 12px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--s-line); font-size: 15.5px; line-height: 1.55; color: var(--s-mute); }
.prose .shown strong { display: block; margin-bottom: 2px; font-size: 17px; }
.prose table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--s-line); }
.prose thead th { padding-top: 0; border-top: 0; font-size: 13px; font-weight: 600; color: var(--s-mute); }
.prose tbody th { width: 44%; font-weight: 600; color: var(--s-ink); }
.prose td { padding-right: 0; }
.prose .get-it .stores { margin-top: 18px; --bh: 44px; }

/* Leaving Goodreads: what Kabook does, as a grid of short parts, each
   with its icon on a violet tile; two columns from 640 px. It sits before
   the reading column (.prose), not in it, so the column's lists and
   paragraphs leave the phones in it alone. */
.pitch .page-hd .sub { max-width: 600px; }
.feats { display: grid; gap: 28px 36px; margin-top: 44px; color: var(--s-prose); }
@media (min-width: 640px) { .feats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; } }
.feat .fi { display: block; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--s-acc) 13%, transparent); fill: none; stroke: var(--s-acc); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feat h2 { margin-top: 14px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--s-ink); }
.feat > p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; }
.feats + .prose { padding-top: 34px; border-top: 1px dashed var(--s-line); }
/* The landing's pieces in it: step 1's search (the card and its phone) under
   "Add a book in a few letters", the hero's Reading phone under "Your books,
   not a feed", each in its part's column, so the two phones stand side by
   side from 640 px; and the year's picture after "Your year in books", the
   width of the row (the next part fills the place beside that one). */
.feat .try { margin-top: 26px; }
.feat .det { margin-top: 28px; }
.feat .det::after { display: none; }
.feat-pic { display: flex; justify-content: center; }
@media (min-width: 640px) { .feat-pic { grid-column: 1 / -1; } .feat-pic .yrpic { max-width: 420px; } }

/* Not found */
.nf { padding: 90px 0 0; text-align: center; }
.nf .x { max-width: 640px; }
.nf .shelf { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 34px; }
.nf .shelf > :nth-child(1) .cv { transform: rotate(-6deg); } .nf .shelf > :nth-child(3) .cv { transform: rotate(5deg); }
.nf .gap { width: 58px; aspect-ratio: 2 / 3; border-radius: 3px; border: 2px dashed color-mix(in srgb, var(--s-acc) 45%, transparent); display: grid; place-items: center; color: var(--s-acc); }
.nf .gap svg { width: 22px; height: 22px; fill: currentColor; opacity: .7; }
.nf h1 { font-weight: 600; font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: -.045em; }
.nf p { margin-top: 16px; font-size: 18px; color: var(--s-lead); }
.nf .home { margin-top: 28px; display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 99px; background: var(--s-ink); color: var(--s-on-ink); font-weight: 600; text-decoration: none; }
.nf .home:hover { background: var(--s-acc); }

/* The plain pages' nav: the button to the badges always shows. */
.nav.plain .get-b { display: inline-flex; }

/* Password reset: the email's link lands here and hands the token to the app. */
.reset-go { margin-top: 36px; font-size: 16.5px; line-height: 1.6; color: var(--s-prose); }
.reset-go .open { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 99px; background: var(--s-ink); color: var(--s-on-ink); font-size: 17px; font-weight: 600; text-decoration: none; }
.reset-go .open:hover { background: var(--s-acc); }
.reset-go .missing { padding: 14px 16px; border-radius: 14px; background: var(--s-soft); color: var(--s-ink); }
.reset-go .get-it { margin-top: 30px; }
.reset-go .get-it .stores { margin-top: 18px; --bh: 48px; }