/* The kabook.app landing page: round 2's page (kabook-brand/round-2/landing.html). */
/* Colours come from the theme's tokens (kabook.css), light and dark. */
html { background: var(--s-bg); color: var(--s-ink); font: 400 16px/1.55 var(--f-sans); }
::selection { background: var(--s-sel); }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--s-acc); }
.x { width: min(1160px, 100% - 48px); margin-inline: auto; }
@media (max-width: 560px) { .x { width: calc(100% - 32px); } }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--s-acc); }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
h2.big { margin-top: 12px; font-weight: 600; font-size: clamp(36px, 5.2vw, 62px); line-height: 1; letter-spacing: -.04em; }
h2.big em { font-size: 1.1em; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: var(--s-nav); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.sc { border-bottom-color: var(--s-line); }
.nav .x { display: flex; align-items: center; gap: 26px; height: 66px; }
.nav .wm { height: 27px; width: auto; color: var(--s-ink); }
/* The wordmark's bang is the accent: #6D35F2 on light, #9F7BFF on dark. */
.wm svg { fill: var(--s-acc); }
.nav nav { display: flex; gap: 24px; font-size: 15px; color: var(--s-mute); }
.nav nav a { text-decoration: none; } .nav nav a:hover { color: var(--s-ink); }

/* Hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(50% 60% at 82% 34%, rgb(var(--glow-v) / .14), transparent 70%), radial-gradient(30% 34% at 64% 88%, rgb(var(--glow-p) / .08), transparent 70%), radial-gradient(26% 30% at 98% 80%, rgb(var(--glow-o) / .08), transparent 70%); }
.hero .x { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 30px; align-items: center; padding-top: 34px; }
.hl { font-weight: 600; font-size: clamp(50px, 7.6vw, 100px); line-height: .95; letter-spacing: -.05em; }
.hl em { font-size: 1.12em; padding-right: .03em; }
.lead { margin-top: 24px; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--s-lead); max-width: 480px; }
.stores { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.ticks { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--s-mute); }
.ticks span { display: inline-flex; align-items: center; gap: 6px; } .ticks .ic { width: 15px; height: 15px; color: var(--s-acc); stroke-width: 2.4; }
.hero-vis { position: relative; display: flex; justify-content: flex-end; padding: 8px 56px 0 0; min-height: 640px; }
.hero-vis .phone { --ph-shadow: 0 40px 80px -30px rgb(var(--sh-deep) / .5); margin-bottom: -40px; }
.fl { position: absolute; z-index: 5; background: var(--s-card); border-radius: 18px; box-shadow: 0 0 0 1px var(--s-line), 0 24px 44px -18px rgb(var(--sh) / .4); }
.f-st { left: -10px; top: 300px; width: 236px; padding: 12px; font-family: var(--a-ui); }
.f-st .f-sth { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--s-line); }
.f-st .f-sth b { display: block; font: 600 15px/1.15 var(--f-book); font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 18; }
.f-st .f-sth span span { display: block; font-size: 12px; color: var(--s-mute); }
.f-st .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.f-st .opts button { white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 500; transition: background .2s; }
.f-st .opts button .gl { width: 14px; height: 14px; color: var(--st); }
.f-st .opts button:hover { background: var(--s-soft); }
.f-st .opts button[aria-pressed=true] { background: color-mix(in srgb, var(--st) 14%, var(--s-card)); color: color-mix(in oklab, var(--st) 70%, var(--s-st-mix)); font-weight: 650; }
.f-rate { right: 0; top: 70px; padding: 10px 13px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.f-rate .s { display: flex; color: var(--s-acc); } .f-rate .star { width: 15px; height: 15px; }
.f-off { right: 14px; bottom: 150px; padding: 8px 13px; border-radius: 99px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.f-off .ic { width: 16px; height: 16px; color: var(--s-acc); }
@media (max-width: 960px) { .hero .x { grid-template-columns: minmax(0, 1fr); } .hero-vis { min-height: 0; padding-right: 0; flex-direction: column; align-items: center; gap: 0; } .hero-vis .phone { margin-bottom: 0; } .f-st { position: relative; left: auto; top: auto; margin-top: -120px; width: min(300px, 100%); } .f-rate { right: max(0px, calc(50% - 250px)); } .f-off { display: none; } }
@media (max-width: 560px) { .f-rate { display: none; } .hero .x { padding-bottom: 50px; } }
.hero-foot { height: 70px; background: linear-gradient(transparent, var(--s-bg)); margin-top: -70px; position: relative; z-index: 6; }

/* Step 1's phone is the search (search-demo.js): it opens empty, and as you
   type, in the card beside it or in its own field, it asks Kabook's own
   catalogue and draws the answers as its own rows. The field, the count line and
   "Add a book" stay put; the rows under them are their own scroll area
   (.ks-res), padded at the end so the last ones can rise above the crop's
   fade. */
.det-try { flex-direction: column; align-items: center; }
/* The card under step 1's copy is the search's own field: empty, a caret
   blinking in it, "Try it" on its edge. It looks like a field (the ring on
   hover and focus, the text cursor), anywhere on it takes the focus, and
   what is typed in it shows in the phone beside it. It, and the examples
   under it, show only with JavaScript; without, the scripted card and the
   still stand in for it (.c-fix, from 1120 px). */
html:not(.js) .try { display: none; }
html.js :is(.c-fix, .c-toast.t1) { display: none; }
.try { position: relative; z-index: 4; margin-top: 30px; max-width: 420px; }
.try-card { position: relative; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 6px 0 18px; border-radius: 16px; background: var(--s-card); color: var(--s-mute); cursor: text; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--s-acc) 30%, var(--s-line)), 0 14px 30px -18px rgb(var(--sh) / .45); transition: box-shadow .15s; }
.try-card:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-acc) 60%, transparent), 0 0 0 6px color-mix(in srgb, var(--s-acc) 10%, transparent), 0 14px 30px -18px rgb(var(--sh) / .45); }
.try-card:focus-within { box-shadow: 0 0 0 2px var(--s-acc), 0 0 0 6px color-mix(in srgb, var(--s-acc) 20%, transparent), 0 14px 30px -18px rgb(var(--sh) / .45); }
.try-card > .ic { width: 20px; height: 20px; flex: none; color: var(--s-acc); }
.try-tag { position: absolute; z-index: 1; left: 14px; top: 0; translate: 0 -50%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 9px; border-radius: 99px; background: var(--s-acc); color: var(--s-on-ink); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--s-acc) 70%, transparent); }
.try-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.try-f { position: relative; flex: 1; min-width: 0; display: flex; align-self: stretch; }
.try-f input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: none; color: var(--s-ink); font: 500 17px/1.2 var(--f-sans); -webkit-appearance: none; appearance: none; cursor: text; }
.try-f input::placeholder { color: var(--s-mute); opacity: 1; }
.try-f input::-webkit-search-cancel-button, .try-f input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* The caret while nobody is in the field; in it, the browser's own. */
.try-caret { position: absolute; left: -2px; top: 50%; width: 2px; height: 22px; margin-top: -11px; border-radius: 1px; background: var(--s-acc); pointer-events: none; animation: try-blink 1.1s steps(1) infinite; }
.try-f:has(input:focus) .try-caret, .try-f:has(input:not(:placeholder-shown)) .try-caret { display: none; }
@keyframes try-blink { 50% { opacity: 0; } }
.try-clr { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--s-card); }
.try-clr::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--s-mute); }
.try-clr .ic { position: relative; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.try-clr[hidden] { display: none; }
.try-clr:focus-visible { outline-offset: -8px; }
.try-hints { position: relative; z-index: 4; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--s-mute); }
.try-hints span { margin-right: 8px; }
.try-hints button { padding: 10px 2px; color: var(--s-acc); font-size: 14px; font-weight: 600; border-radius: 6px; }
.try-hints button + button::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 9px 0 7px; vertical-align: middle; border-radius: 50%; background: var(--s-mute); }
.try-hints button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .try { margin-top: 26px; } .try-card { padding-left: 14px; gap: 8px; } .try-f input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .try-caret { animation: none; } .try-card { transition: none; } }
[data-search-demo] .ks-sheet { display: flex; flex-direction: column; overflow: hidden; touch-action: none; }
[data-search-demo] .ks-sheet > * { flex: none; }
[data-search-demo] .ks-res { flex: 1 1 auto; min-height: 0; margin: 0 -12px; padding: 0 12px 196px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
[data-search-demo] .ks-res::-webkit-scrollbar { display: none; }
[data-search-demo] .ks-list:empty { display: none; }
/* The field looks focused only when it is: the app's raised field then,
   with the accent round it; otherwise the plain one, typing from the card
   included. */
[data-search-demo] .ks-search.on { background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: none; transition: background-color .15s, box-shadow .15s; }
[data-search-demo] .ks-search:has(input:focus) { background: var(--card); box-shadow: 0 0 0 1.5px var(--acc), 0 4px 14px -8px rgba(0, 0, 0, .3); }
[data-search-demo] .ks-search input:focus-visible { outline: none; }
/* One way to clear: the phone's own ×, 44 px to tap round its 16 px circle. */
[data-search-demo] .ks-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
[data-search-demo] .ks-clr { position: relative; width: 44px; height: 44px; margin: -6px -14px -6px -8px; background: none; color: var(--card); border-radius: 12px; }
[data-search-demo] .ks-clr::before { content: ''; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--mute); }
[data-search-demo] .ks-clr .ic { position: relative; }
[data-search-demo] .ks-clr[hidden] { display: none; }
[data-search-demo] .ks-clr:focus-visible { outline-offset: -9px; }
/* Covers from the catalogue, over the placeholder until they come. */
[data-search-demo] .cv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
[data-search-demo] .cv > img.in { opacity: 1; }
/* A search on its way dims the last answer, after a moment, so a quick one never flickers. */
[data-search-demo] .ks-list { transition: opacity .2s; }
/* A catalogue row's +, pressed: on the pretend wish list. */
[data-search-demo] .ks-addb.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
[data-search-demo].busy .ks-list { opacity: .5; transition-delay: .25s; }
/* No match, or no answer: a note where the rows go. */
.ks-note { padding: 14px; text-align: center; color: var(--mute); font-size: 11px; line-height: 1.45; }
.ks-note b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 11.5px; font-weight: 600; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { [data-search-demo] :is(.ks-list, .cv > img, .ks-search.on) { transition: none; } }

/* How it works */
.how { padding-top: 110px; }
.how > .x > p { margin-top: 14px; color: var(--s-mute); max-width: 580px; font-size: 17px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; align-items: center; padding: 70px 0; border-top: 1px dashed var(--s-line); }
.step:first-of-type { margin-top: 50px; }
.step .n { font: italic 400 46px/1 var(--f-serif); color: var(--s-acc); }
.step .txt h3 { margin-top: 10px; font-size: clamp(26px, 3vw, 34px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.step .txt > p { margin-top: 12px; color: var(--s-body); font-size: 17px; max-width: 460px; }
.step.flipd .txt { order: 2; }
.det { position: relative; display: flex; justify-content: center; }
.det::before { content: ''; position: absolute; inset: 10% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow-v) / .12), transparent); z-index: -1; }
.crop { position: relative; height: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.crop.top { height: 420px; }
@media (max-width: 860px) { .step { grid-template-columns: minmax(0, 1fr); padding: 54px 0; } .step.flipd .txt { order: 0; } }
.legend { margin-top: 22px; display: grid; gap: 2px; max-width: 420px; }
.legend li { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; font-size: 14.5px; border-top: 1px solid var(--s-line); }
.legend li:first-child { border-top: 0; }
.legend li > .gl { width: 16px; height: 16px; color: var(--st); }
.legend li > b { font-weight: 650; } .legend li > span { color: var(--s-mute); }
.kept { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.kept span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--s-soft); font-size: 13.5px; font-weight: 500; }
.kept .ic, .kept .star { width: 14px; height: 14px; color: var(--s-acc); }
/* Everywhere: the sync demo */
.sync { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sw-sig { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 99px; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-line), 0 10px 24px -14px rgb(var(--sh) / .4); font-size: 14px; font-weight: 600; }
.sw-sig .ic { width: 17px; height: 17px; color: var(--s-acc); }
.sw-sig .ks-tog { width: 44px; height: 26px; } .sw-sig .ks-tog::after { width: 22px; height: 22px; } .sw-sig .ks-tog.on::after { transform: translateX(18px); }
.sw-sig { --acc: var(--s-acc); --ink: var(--s-ink); }
.devs { display: flex; align-items: flex-end; gap: 22px; }
.devs .crop { height: 440px; }
.andr { position: relative; width: 196px; height: 400px; padding: 7px; border-radius: 30px; background: #1d1d1f; box-shadow: inset 0 0 0 1.5px #3c3c3e, 0 30px 50px -24px rgba(0, 0, 0, .4); flex: none; }
.andr .scr { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--an-bg); font-family: Roboto, system-ui, sans-serif; color: var(--ink); }
.andr .cam { position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #111; }
.andr .sbar { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 10px; font-weight: 500; }
.andr .h4 { padding: 10px 14px 4px; font-size: 20px; font-weight: 400; }
.andr .sy { margin: 0 14px 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--acc-t); color: var(--acc-p); font-size: 10px; font-weight: 500; transition: background .3s; }
.andr .sy .ic { width: 12px; height: 12px; }
.andr .sy.wait { background: var(--an-wait); color: var(--mute); }
.andr .sy.got { animation: got 1s ease-out; }
@keyframes got { 0% { transform: scale(1.12); background: var(--an-got); color: var(--an-got-ink); } }
.andr ul { padding: 0 10px; }
.andr li { display: flex; gap: 9px; align-items: center; padding: 6px 4px; border-radius: 10px; }
.andr li b { display: block; font: 600 11px/1.2 var(--f-book); font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.andr li span { min-width: 0; }
.andr li small { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--mute); }
.andr li small .dot { width: 5px; height: 5px; }
.andr li.chg { animation: chg 1.4s ease-out; }
@keyframes chg { 0%, 30% { background: color-mix(in srgb, var(--st) 18%, transparent); } }
.devs .dl { text-align: center; font-size: 12.5px; color: var(--s-mute); margin-top: 10px; }
@media (max-width: 640px) { .devs { flex-direction: column; align-items: center; } }

/* Your year in books: the year page's picture, square, as the app shares
   it (assets/year-2025-*.png; README, "The year's picture"), on the landing
   beside its section's copy and on the Goodreads alternative page. Light or
   dark with the page: both are lazy, so only the one showing is fetched. */
.yr { padding-bottom: 30px; }
.yr .x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 60px; align-items: center; padding-top: 70px; border-top: 1px dashed var(--s-line); }
.yr .txt > p { margin-top: 14px; color: var(--s-body); font-size: 17px; max-width: 460px; }
@media (max-width: 860px) { .yr .x { grid-template-columns: minmax(0, 1fr); padding-top: 54px; } }
.yrpic { display: block; width: 100%; max-width: 440px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--s-line), 0 40px 70px -40px rgb(var(--sh-deep) / .5); }
.yrpic img { display: block; width: 100%; height: auto; }
.yrpic .yr-d { display: none; }
html[data-theme="dark"] .yrpic .yr-l { display: none; }
html[data-theme="dark"] .yrpic .yr-d { display: block; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .yrpic .yr-l { display: none; }
  html[data-theme="system"] .yrpic .yr-d { display: block; }
}

/* Quote */
.quote { margin-top: 70px; padding: 100px 0; background: radial-gradient(60% 90% at 50% 100%, rgb(var(--glow-v) / .1), transparent 70%), var(--s-band); position: relative; overflow: hidden; }
.quote .x { max-width: 900px; text-align: center; position: relative; }
.quote .qm { width: 46px; height: 60px; margin: 0 auto 20px; fill: var(--s-acc); }
.quote blockquote { font-size: clamp(24px, 3.3vw, 38px); line-height: 1.28; letter-spacing: -.025em; font-weight: 500; color: var(--s-quote); }
.quote blockquote b { color: var(--s-ink); font-weight: 650; }
.quote .cite { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; font-style: normal; font-size: 16px; font-weight: 600; }
.quote .cite .s { display: flex; color: var(--s-acc); } .quote .cite .star { width: 17px; height: 17px; }
.quote .shf { position: absolute; bottom: 26px; display: flex; gap: 10px; opacity: .9; }
.quote .shf.l { left: max(-40px, calc(50% - 720px)); transform: rotate(-4deg); } .quote .shf.r { right: max(-40px, calc(50% - 720px)); transform: rotate(4deg); }
@media (max-width: 1100px) { .quote .shf { display: none; } }

/* Get it */
.get { padding: 110px 0 0; text-align: center; }
.get .ic-b { width: 96px; height: 96px; margin: 0 auto 22px; filter: drop-shadow(0 18px 24px rgb(var(--sh-ic) / .3)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.get .ic-b:hover { transform: rotate(-6deg) scale(1.05); }
.get h2.big { margin-top: 0; }
.get p { margin-top: 12px; color: var(--s-mute); font-size: 17px; }
.get .stores { justify-content: center; }

/* Footer */
.foot { margin-top: 110px; border-top: 1px solid var(--s-line); }
.foot .x { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; padding: 34px 0 40px; }
.foot .wm { height: 26px; width: auto; color: var(--s-ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; }
.foot nav a { text-decoration: none; color: var(--s-foot); } .foot nav a:hover { color: var(--s-acc); }
.foot small { font-size: 13.5px; color: var(--s-mute); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Theme: System, Light and Dark, as pakratt's footer has it. A real radio
   group (arrow keys move it) drawn as a small segmented pill; theme-init.js
   applies and keeps the choice. With JavaScript off it has nothing to drive. */
.theme-pick { display: inline-flex; gap: 2px; margin: 0; padding: 3px; min-inline-size: 0; border: 0; border-radius: 99px; background: var(--s-pick); box-shadow: inset 0 0 0 1px var(--s-line); }
.theme-pick label { position: relative; display: block; cursor: pointer; }
.theme-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-pick span { display: block; padding: 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--s-mute); transition: background .2s, color .2s, box-shadow .2s; }
.theme-pick label:hover span { color: var(--s-ink); }
.theme-pick input:checked + span { background: var(--s-pick-on); color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-line), 0 1px 3px rgb(var(--sh) / .12); }
.theme-pick input:focus-visible + span { outline: 2.5px solid var(--s-acc); outline-offset: 2px; }
html:not(.js) .theme-pick { display: none; }
/* While the theme turns (theme-init.js), nothing fades: every colour changes
   in the same frame, the switch's segments included. */
.theme-turning *, .theme-turning *::before, .theme-turning *::after { transition: none !important; }
.foot .bk { width: 26px; height: 26px; fill: var(--s-acc); opacity: .9; }
@media (max-width: 760px) { .foot .x { grid-template-columns: minmax(0, 1fr); } .foot .bk { display: none; } }

/* Nav: the store badges on wide screens, one button to them on narrow ones. */
.nav .st { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav .get-b { display: none; align-items: center; height: 38px; padding: 0 16px; border-radius: 99px; background: var(--s-ink); color: var(--s-on-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) { .nav .st .badges { display: none; } .nav .get-b { display: inline-flex; } }
/* The nav's one link, Leaving Goodreads?: beside the wordmark on wide
   screens; below 860 px beside the button, below 440 px both a touch
   smaller, and below 385 px there is room only for the button. */
.nav nav a[aria-current] { color: var(--s-ink); }
@media (max-width: 860px) {
  .nav .x { gap: 16px; }
  .nav nav { margin-left: auto; }
  .nav nav a { white-space: nowrap; }
  .nav .st { margin-left: 0; }
}
@media (max-width: 439px) {
  .nav .x { gap: 12px; }
  .nav nav { font-size: 14px; }
  .nav .get-b { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 384px) { .nav nav { display: none; } .nav .st { margin-left: auto; } }

/* Official store badges, Apple's and Google's artwork, unmodified. Apple's
   badge is drawn edge to edge; Google's PNG carries transparent margin (the
   badge proper is 564 x 168 of its 646 x 250, 41 px clear on every side), so it
   is set larger by that ratio and the margin taken back, for the two badges to
   stand the same height. App Store first, a quarter of the badge height clear
   between them (a tenth in the nav, the guidelines' limited-space rule). */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--bh, 48px) * .25); }
.badges a { display: block; flex: none; border-radius: 8px; transition: transform .2s; }
.badges a:hover { transform: translateY(-2px); }
.badges img { display: block; width: auto; }
.badges .as img { height: var(--bh, 48px); }
.badges .gp { margin: calc(var(--bh, 48px) * -.244); }
.badges .gp img { height: calc(var(--bh, 48px) * 1.488); }
.nav .badges { --bh: 40px; gap: 8px; }
.hero .badges, .get .badges { --bh: 52px; }
@media (max-width: 400px) { .hero .badges, .get .badges { --bh: 46px; } }
.stores { margin-top: 30px; }
.get .badges { justify-content: center; }

/* The free line, where the Free and Plus table was */
.free { margin-top: 12px; color: var(--s-mute); font-size: 17px; }

/* Footer: trademark lines for the badges */
.foot .legal { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--s-mute); max-width: 720px; }
.foot small a { color: inherit; text-decoration: none; } .foot small a:hover { color: var(--s-acc); }

/* With JavaScript off the phones are a still: the switch that drives the
   sync demo has nothing to drive. */
html:not(.js) .sw-sig { display: none; }

/* Skip link */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--s-ink); color: var(--s-on-ink); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2.5px solid var(--s-acc); outline-offset: 3px; }

/* The Android stand-in has nothing to scroll; a drag on it is still inside a
   phone, so it leaves the page alone, as the iPhones do. */
.andr { touch-action: none; user-select: none; -webkit-user-select: none; }

/* ---------- Desktop ----------
   From 900 px the page sits on a breath of violet with glows behind the
   hero and each phone, the sections run closer together, and a long shelf
   crosses the page before the quote. From 1120 px the hero grows and each
   phone gets company: cards and covers about the step it shows. Below
   900 px none of this exists and the phone layout is as it was. */
.hero-row, .f-shelf, .f-sync, .cmp, .sylink, .band, .gcv, .legend .cv { display: none; }
@media (max-width: 899px) { .step .txt h3 em { font: inherit; color: inherit; letter-spacing: inherit; } }

@media (min-width: 900px) {
  html { background: var(--s-field); }
  .nav { background: var(--s-nav-w); }
  .hero-foot { background: linear-gradient(transparent, var(--s-field)); }

  /* The covers under the headline: every status, and Piranesi follows the card. */
  .hero-row { display: block; margin-top: 34px; }
  .hero-row .shelf-in { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; }
  .hero-row .cv { --cv-sh: 0 2px 4px rgb(var(--sh-cv) / .14), 0 14px 22px -12px rgb(var(--sh-cv) / .45); }

  /* How it works: closer together, headings as big as the section's. */
  .how { padding-top: 60px; }
  .how > .x > p { font-size: 18px; }
  .step { padding: 72px 0; border-top: 1px solid var(--s-line); gap: 30px 50px; }
  .step:first-of-type { margin-top: 44px; border-top: 0; }
  .step .n { font-size: 50px; }
  .step .txt h3 { margin-top: 6px; font-size: clamp(36px, 3.7vw, 54px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
  .step .txt h3 em { font-size: 1.1em; padding-right: .04em; }
  .step .txt > p { margin-top: 14px; font-size: 18px; max-width: 470px; }
  .crop { height: 430px; } .crop.top { height: 400px; } .devs .crop { height: 430px; }
  [data-search-demo] .ks-res { padding-bottom: 216px; }
  .det { isolation: isolate; }
  .det::before { inset: -8% -12%; background: radial-gradient(closest-side, rgb(var(--glow-v) / .17), rgb(var(--glow-v) / .06) 55%, transparent); }
  .det::after { content: ''; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: 4%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow-p) / .09), transparent); }
  .step.flipd .det::after { right: auto; left: 4%; background: radial-gradient(closest-side, rgb(var(--glow-o) / .09), transparent); }

  /* Step 2: the six statuses as cards, each with a cover wearing it. */
  .legend { max-width: 560px; margin-top: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .legend li { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 3px 11px; align-items: start; padding: 9px; border: 0; border-radius: 16px; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-line), 0 14px 26px -20px rgb(var(--sh) / .45); }
  .legend li:first-child { border: 0; }
  .legend .cv { display: block; grid-row: 1 / 3; }
  .legend li > .gl { display: none; }
  .legend li > b { align-self: end; padding-top: 14px; font-size: 15px; letter-spacing: -.01em; color: color-mix(in oklab, var(--st) 72%, var(--s-st-mix)); }
  .legend li > span { font-size: 13px; line-height: 1.35; }

  .kept span { background: var(--s-card); box-shadow: 0 0 0 1px var(--s-line); }

  /* Your year in books, ruled off as the steps are. */
  .yr .x { border-top: 1px solid var(--s-line); gap: 30px 50px; }
  .yr .txt > p { font-size: 18px; max-width: 470px; }

  /* The shelf: every book in the library, drifting by. */
  .band { display: block; position: relative; overflow: hidden; padding: 6px 0 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 24px; height: 10px; background: linear-gradient(var(--s-plank), var(--s-plank-2)); box-shadow: 0 1px 0 rgb(var(--sh-deep) / .08), 0 14px 22px -10px rgb(var(--sh-deep) / .28); }
  .band .shelf-in { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 18px; padding: 14px 18px 0 0; }
  .band .cv { --cv-sh: 0 1px 2px rgba(0, 0, 0, .18), 0 16px 22px -12px rgb(var(--sh-cv) / .5); }
  .band:hover .shelf-in { animation-play-state: paused; }

  /* The quote, larger, with the shelf above it. */
  .quote { margin-top: 36px; padding: 10px 0 90px; background: radial-gradient(55% 60% at 50% 72%, rgb(var(--glow-v) / .12), transparent 72%), linear-gradient(rgb(var(--glow-v) / 0), rgb(var(--glow-v) / .045) 22%, rgb(var(--glow-v) / .045) 78%, rgb(var(--glow-v) / 0)); }
  .quote .x { max-width: 1080px; padding-top: 50px; }
  .quote .qm { width: 56px; height: 72px; margin-bottom: 26px; }
  .quote blockquote { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.16; letter-spacing: -.035em; }
  .quote .cite { margin-top: 32px; font-size: 18px; } .quote .cite .star { width: 20px; height: 20px; }

  /* The closing, a card on the field. */
  .get { position: relative; overflow: hidden; padding: 30px 0 70px; background: radial-gradient(40% 60% at 50% 55%, rgb(var(--glow-v) / .16), transparent 72%); }
  .get .x { position: relative; z-index: 1; width: min(980px, 100% - 64px); padding: 54px 48px 50px; border-radius: 34px; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-line), 0 50px 90px -50px rgb(var(--sh-deep) / .5); }
  .get h2.big { font-size: clamp(40px, 4.4vw, 58px); }
  .foot { margin-top: 30px; }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .band .shelf-in { animation: drift 140s linear infinite; }
  @keyframes drift { to { transform: translateX(-50%); } }
}

@media (min-width: 1120px) {
  .x { width: min(1200px, 100% - 64px); }

  /* Hero: a bigger headline and phone, more around it. */
  .hero { background: radial-gradient(44% 60% at 77% 42%, rgb(var(--glow-v) / .2), transparent 70%), radial-gradient(28% 34% at 60% 88%, rgb(var(--glow-p) / .1), transparent 70%), radial-gradient(26% 30% at 97% 78%, rgb(var(--glow-o) / .1), transparent 70%); }
  .hero .x { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; padding-top: 44px; }
  .hl { font-size: clamp(50px, 8.1vw, 120px); }
  .lead { margin-top: 26px; font-size: 21px; max-width: 520px; }
  .hero-vis { min-height: 760px; padding: 4px 64px 0 0; }
  .hero-vis .phone { scale: 1.12; transform-origin: 50% 0; }
  .f-st { left: -46px; top: 236px; }
  .f-rate { top: 84px; right: -6px; }
  .f-off { right: -10px; bottom: 150px; }
  .f-sync { display: flex; right: -26px; top: 352px; padding: 8px 13px; border-radius: 99px; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
  .f-sync .ic { width: 16px; height: 16px; color: var(--done); }
  .f-shelf { display: block; left: -18px; top: 468px; padding: 11px 12px 12px; }
  .f-shelf .f-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 9px; font-size: 13px; }
  .f-shelf .f-h span { font-size: 12px; color: var(--s-mute); }
  .f-shelf .shelf-in { flex-wrap: nowrap; gap: 8px; }

  /* Steps: text beside a stage, the phone with company on it. */
  .step { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .step.flipd { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .cmp { display: block; position: absolute; z-index: 3; font-family: var(--a-ui); }
  .cmp.card, .c-fix, .c-note, .c-hist, .c-stars { background: var(--s-card); border-radius: 18px; box-shadow: 0 0 0 1px var(--s-line), 0 24px 44px -18px rgb(var(--sh) / .4); }
  .c-toast { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 99px; background: var(--s-toast); color: var(--s-toast-ink); font: 500 13.5px/1.2 var(--f-sans); white-space: nowrap; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45); }
  .c-toast .dot { width: 9px; height: 9px; --wish: var(--inv-wish); --next: var(--inv-next); --reading: var(--inv-reading); --paused: var(--inv-paused); --done: var(--inv-done); --quit: var(--inv-quit); }

  /* 1: the spelling, fixed: the still's card, shown only with JavaScript off */
  .c-fix { left: calc(50% - 330px); top: 158px; width: 262px; padding: 12px; }
  .c-q { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 11px; background: var(--s-fill); font-size: 15.5px; }
  .c-q .ic { width: 16px; height: 16px; color: var(--s-mute); }
  .c-q span { text-decoration: underline wavy var(--danger); text-decoration-thickness: 1.2px; text-underline-offset: 4px; }
  .caret { width: 1.6px; height: 18px; margin-left: -5px; background: var(--s-acc); }
  .c-to { display: flex; align-items: center; gap: 6px; margin: 10px 4px 9px; font-size: 13px; color: var(--s-mute); }
  .c-to .ic { width: 15px; height: 15px; color: var(--s-acc); flex: none; }
  .c-to b { color: var(--s-ink); font-weight: 650; }
  .c-to ins { text-decoration: none; color: var(--s-acc); background: var(--acc-t); border-radius: 3px; padding: 0 1px; }
  .c-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--s-row); }
  .c-row b { display: block; font: 600 14px/1.2 var(--f-book); font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 14; }
  .c-row small { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--s-mute); }
  .c-toast.t1 { left: calc(50% + 100px); top: 300px; }
  .c-ed { display: flex; z-index: -1; left: calc(50% + 104px); top: 92px; }
  .c-ed .cv { rotate: 7deg; } .c-ed > :last-child .cv { margin: 26px 0 0 -26px; rotate: 14deg; }

  /* 2: covers wearing their status, large */
  .c-big { z-index: -1; }
  .c-big.b1 { left: calc(50% - 256px); top: 34px; rotate: -7deg; }
  .c-big.b2 { left: calc(50% - 292px); top: 300px; rotate: 6deg; }
  .c-big .cv { --cv-sh: 0 2px 4px rgba(0, 0, 0, .2), 0 24px 34px -16px rgb(var(--sh-cv) / .55); }
  .c-toast.t2 { left: calc(50% + 104px); top: 110px; }

  /* 3: the stars, the note, the dates */
  .c-stars { left: calc(50% + 92px); top: 60px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font: 600 13.5px/1 var(--f-sans); }
  .c-stars .s { display: flex; color: var(--s-acc); } .c-stars .star { width: 16px; height: 16px; }
  .c-note { left: calc(50% - 330px); top: 150px; width: 252px; display: flex; gap: 12px; align-items: center; padding: 12px; }
  .c-note small { display: block; font-size: 11.5px; font-weight: 600; color: var(--s-mute); }
  .c-nt { display: block; margin-top: 3px; font: 600 17px/1.25 var(--f-book); font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 18; letter-spacing: -.01em; }
  .c-hist { left: calc(50% + 104px); top: 214px; width: 214px; padding: 12px 14px 8px; }
  .c-hh { font-size: 11.5px; font-weight: 600; color: var(--s-mute); margin-bottom: 4px; }
  .c-hist ul { position: relative; }
  .c-hist ul::before { content: ''; position: absolute; left: 3px; top: 14px; bottom: 14px; border-left: 1.5px dotted color-mix(in srgb, var(--s-ink) 20%, transparent); }
  .c-hist li { position: relative; display: grid; grid-template-columns: 7px 1fr auto; gap: 9px; align-items: center; padding: 6px 0; font-size: 13px; }
  .c-hist li b { font-weight: 600; } .c-hist li span { color: var(--s-mute); font-size: 12px; }
  .c-hist li:first-child b { color: color-mix(in oklab, var(--st) 75%, var(--s-st-mix)); }

  /* 4: the line between the two phones */
  .devs { gap: 0; }
  .sylink { display: block; position: relative; align-self: center; width: 118px; height: 40px; margin: 0 -12px; z-index: 3; }
  .sylink .ln { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed color-mix(in srgb, var(--s-acc) 40%, transparent); }
  .sylink .ln::after { content: ''; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--s-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-acc) 18%, transparent); }
  .sylink .pill { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 99px; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-line), 0 12px 24px -12px rgb(var(--sh) / .45); font: 600 13px/1 var(--f-sans); color: var(--s-acc); white-space: nowrap; transition: color .3s; }
  .sylink .pill .ic { width: 15px; height: 15px; }
  .sylink .off { display: none; }
  .sylink.wait .pill { color: var(--s-mute); } .sylink.wait .on { display: none; } .sylink.wait .off { display: inline; }
  .sylink.wait .ln { border-top-color: color-mix(in srgb, var(--s-ink) 18%, transparent); } .sylink.wait .ln::after { display: none; }
  .sylink.got .pill { animation: got 1s ease-out; }

  /* The closing card's covers */
  /* Each side: the big cover tucked under the card, the small one in front of it. */
  .gcv { display: flex; position: absolute; z-index: 0; align-items: flex-start; }
  .gcv.l { right: calc(50% + 430px); top: 110px; flex-direction: row-reverse; }
  .gcv.r { left: calc(50% + 430px); top: 92px; }
  .gcv .cv { --cv-sh: 0 2px 4px rgba(0, 0, 0, .18), 0 24px 34px -16px rgb(var(--sh-cv) / .5); }
  .gcv > :last-child .cv { position: relative; z-index: 1; margin-top: 120px; }
  .gcv.l > :first-child .cv { rotate: -8deg; } .gcv.l > :last-child .cv { rotate: -4deg; margin-right: -40px; }
  .gcv.r > :first-child .cv { rotate: 7deg; } .gcv.r > :last-child .cv { rotate: 4deg; margin-left: -40px; }
}

/* Something is always moving, gently, unless asked not to. The status card,
   which takes clicks, stays still. */
@media (min-width: 1120px) and (prefers-reduced-motion: no-preference) {
  .hero-vis .fl:not(.f-st), .c-toast, .c-stars, .c-hist, .c-fix, .c-note { animation: bob 7s ease-in-out infinite; }
  .c-fix, .c-note { animation-duration: 8s; animation-delay: -3s; }
  .f-shelf, .c-hist { animation-delay: -5s; }
  .f-sync, .c-toast.t1 { animation-duration: 6s; animation-delay: -1s; }
  .hero-vis .fl:hover, .cmp:hover { animation-play-state: paused; }
  .caret { animation: blink 1.1s steps(1) infinite; }
  .sylink .ln::after { animation: travel 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
  @keyframes bob { 50% { translate: 0 -7px; } }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes travel { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
}

/* On a touch screen a phone (and the Android stand-in) is asleep until it is
   tapped: a finger dragging down the page over it moves the page, never the
   demo. Asleep, none of its scroll areas (the screen, Add's sheet and its
   results, the Next up strip) scroll or hold their overscroll, and no part of it (the tab
   bar, the keyboard, the strip above a sheet) holds the page still. A tap
   wakes it (`.awake`, landing.js) and it behaves as above; a tap anywhere
   else, or scrolling it out of view, puts it back to sleep. Asleep, its
   screen is a shade dimmer, and the hero says "Tap to try" until the first
   phone wakes. */
.tap-hint { display: none; }
@media (pointer: coarse) {
  .phone:not(.awake) :is(.ph-scroll, .ks-sheet, .ks-hrow, .ks-res) { overflow: hidden; overscroll-behavior: auto; }
  :is(.phone, .andr):not(.awake), :is(.phone, .andr):not(.awake) * { touch-action: manipulation; }
  html.js .ph-screen::after, html.js .andr .scr::after { content: ''; position: absolute; inset: 0; z-index: 90; border-radius: inherit; background: var(--s-dim); pointer-events: none; transition: opacity .35s; }
  html.js .awake .ph-screen::after, html.js .andr.awake .scr::after { opacity: 0; }
  html.js .tap-hint { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--s-mute); transition: opacity .4s; }
  .tap-hint .ic { width: 15px; height: 15px; color: var(--s-acc); }
  html.woke .tap-hint { opacity: 0; }
}
@media (pointer: coarse) and (min-width: 960px) { html.js .tap-hint { display: none; } }