/*
 * Near Fine
 *
 * Plain CSS served by Propshaft. No build step. Colors are OKLCH tokens with a dark
 * variant under prefers-color-scheme; components only reference the semantic tokens.
 * The palette is paper and ink with one accent, cinnabar: the red that printers used
 * for rubrics and title pages, here kept for the few marks that matter.
 * Type is Source Serif 4 for reading, with Departure Mono, a pixel monospace, for
 * labels, controls and code (both SIL Open Font License, self-hosted as Latin
 * subsets).
 */

/* Fonts
   ========================================================================== */

@font-face {
  font-family: "Source Serif";
  src: url("/assets/source-serif-1a2ec00b.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Departure Mono";
  src: url("/assets/departure-mono-7d5f0643.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Tokens
   ========================================================================== */

:root {
  color-scheme: light dark;

  --font-serif: "Source Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Running text grows from 19px on phones to 23px on wide screens, and leads
     stay a step above it */
  --text-body: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  --text-lead: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);

  --color-bg: oklch(0.982 0.004 85);
  --color-surface: oklch(0.997 0.002 85);
  --color-subtle: oklch(0.958 0.005 85);
  --color-border: oklch(0.895 0.006 80);
  --color-border-strong: oklch(0.6 0.009 75);
  --color-rule: oklch(0.8 0.008 78);
  --color-text: oklch(0.2 0.008 70);
  --color-text-secondary: oklch(0.47 0.01 70);

  /* Cinnabar: a fill for marks, and a deeper shade for text and links */
  --color-accent: oklch(0.58 0.17 30);
  --color-accent-text: oklch(0.52 0.17 29);
  --color-accent-subtle: oklch(0.58 0.17 30 / 0.16);

  --color-primary: oklch(0.2 0.008 70);
  --color-primary-hover: oklch(0.34 0.009 70);
  --color-on-primary: oklch(0.982 0.004 85);
  --color-focus: oklch(0.2 0.008 70);
  --color-positive: oklch(0.47 0.09 160);
  --color-cover: oklch(0.27 0.008 70);
  --color-on-cover: oklch(0.93 0.005 85);
  --color-image-outline: oklch(0 0 0 / 0.08);

  --shadow-md: 0 1px 2px oklch(0.2 0.01 70 / 0.06), 0 12px 28px -12px oklch(0.2 0.01 70 / 0.2);
  --shadow-cover: drop-shadow(0 1px 1px oklch(0.2 0.01 70 / 0.16)) drop-shadow(0 6px 10px oklch(0.2 0.01 70 / 0.1));

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --page: 76rem;
  --measure: min(100% - 2 * var(--gutter), var(--page));
  --section: clamp(4rem, 3rem + 5vw, 8rem);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: oklch(0.17 0.005 70);
    --color-surface: oklch(0.205 0.006 70);
    --color-subtle: oklch(0.24 0.007 70);
    --color-border: oklch(0.305 0.008 70);
    --color-border-strong: oklch(0.56 0.01 70);
    --color-rule: oklch(0.305 0.008 70);
    --color-text: oklch(0.95 0.005 85);
    --color-text-secondary: oklch(0.75 0.01 80);

    --color-accent: oklch(0.68 0.15 33);
    --color-accent-text: oklch(0.74 0.13 35);
    --color-accent-subtle: oklch(0.68 0.15 33 / 0.22);

    --color-primary: oklch(0.95 0.005 85);
    --color-primary-hover: oklch(0.86 0.006 85);
    --color-on-primary: oklch(0.17 0.005 70);
    --color-focus: oklch(0.95 0.005 85);
    --color-positive: oklch(0.77 0.1 160);
    --color-cover: oklch(0.34 0.008 70);
    --color-image-outline: oklch(1 0 0 / 0.08);

    --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.06), 0 16px 32px -12px oklch(0 0 0 / 0.6);
    --shadow-cover: drop-shadow(0 2px 8px oklch(0 0 0 / 0.5));
  }
}

/* Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  @view-transition {
    navigation: auto;
  }
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--color-subtle);
}

::selection {
  background: var(--color-accent-subtle);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  color: var(--color-on-primary);
  background: var(--color-primary);
  translate: 0 -100%;
}

.skip-link:focus {
  translate: 0 0;
}

/* A quiet label above a page title */
.eyebrow {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-accent-text);
}

/* Wordmark
   ========================================================================== */

/* 22px on phones, 26px on wide screens */
.wordmark {
  display: inline-block;
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  view-transition-name: wordmark;
}

.wordmark-dot {
  color: var(--color-accent);
}

/* A hand-drawn underline, as on lineofflig.ht: a filled shape that swells and
   tapers like ink from a pen, stretched to the width of the word */
.scribble {
  position: relative;
  display: inline-block;
  padding-bottom: 0.3em;
}

.scribble svg {
  position: absolute;
  left: -3%;
  bottom: 0;
  width: 106%;
  height: 0.38em;
  overflow: visible;
  fill: var(--color-accent);
}

/* Header and footer
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--color-bg);
}

.site-header-inner {
  display: flex;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  width: var(--measure);
  margin-inline: auto;
  padding-block: 1.25rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 5vw - 0.25rem, 1.75rem);
  font-size: 1rem;
  font-weight: 500;
}

.site-nav a {
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-decoration: none;
  transition: color 150ms var(--ease);
}

/* With "Sign in" or "Alerts" too, the links drop under the wordmark on phones */
.site-header-inner:has(.site-nav a + a + a) {
  flex-wrap: wrap;
}

/* With Pricing as well, Docs gives way on phones, since the footer has it too,
   and the rest keep to one row down to 390px */
@media (max-width: 31rem) {
  .site-nav:has(> :nth-child(5)) {
    font-size: 0.9375rem;
  }

  .site-nav:has(> :nth-child(5)) .site-nav-docs {
    display: none;
  }
}

.site-nav a[aria-current="page"] {
  color: var(--color-text);
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--color-text);
  }
}

.site-footer {
  border-top: 1px solid var(--color-border);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  width: var(--measure);
  margin-inline: auto;
  padding-block: 1.75rem 2.25rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* A line of its own across the footer, with the links under it */
.footer-disclosure {
  flex-basis: 100%;
  text-wrap: pretty;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-nav a {
  text-decoration: none;
  transition: color 150ms var(--ease);
}

@media (hover: hover) {
  .footer-nav a:hover {
    color: var(--color-text);
  }
}

/* Buttons
   ========================================================================== */

.button {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), scale 150ms ease-out;
}

.button svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):active {
    scale: 0.97;
  }
}

.button--primary {
  color: var(--color-on-primary);
  background: var(--color-primary);
}

.button--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.button--secondary svg {
  color: var(--color-text-secondary);
}

@media (hover: hover) {
  .button--primary:hover {
    background: var(--color-primary-hover);
  }

  .button--secondary:hover {
    border-color: var(--color-border-strong);
  }
}

/* Search form
   ========================================================================== */

/* The field and its button share one frame, which shows focus for the input inside it */
.search-form {
  position: relative;
  display: flex;
  gap: 0.375rem;
  align-items: center;
  width: 100%;
  padding: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.search-form:has(.search-input:focus-visible) {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-border);
}

.combobox {
  flex: 1;
  min-width: 0;
}

.search-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.5rem 0 0.875rem;
  font-size: 1.0625rem;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  appearance: none;
}

.search-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.search-input::-webkit-search-decoration {
  appearance: none;
}

/* Chrome draws the clear button in blue */
.search-input::-webkit-search-cancel-button {
  filter: grayscale(1);
}

/* The frame around it shows focus instead */
.search-input:focus-visible {
  outline: 2px solid transparent;
}

.search-button {
  display: inline-flex;
  flex: none;
  gap: 0.5rem;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.125rem 0 1rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--ease), scale 150ms ease-out;
}

.search-button svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

@media (prefers-reduced-motion: no-preference) {
  .search-button:not(:disabled):active {
    scale: 0.97;
  }
}

@media (hover: hover) {
  .search-button:hover {
    background: var(--color-primary-hover);
  }
}

@media (max-width: 30rem) {
  .search-button {
    justify-content: center;
    width: 2.5rem;
    padding: 0;
  }

  .search-button span {
    display: none;
  }
}

/* Suggestions (typeahead listbox), under the whole frame */

.suggestions {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 60dvh;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  text-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.suggestion {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.suggestion[aria-selected="true"] {
  background: var(--color-subtle);
}

@media (hover: hover) {
  .suggestion:hover {
    background: var(--color-subtle);
  }
}

.suggestion-title {
  font-weight: 500;
}

.suggestion-author {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* Home: hero
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:
      "title title"
      "copy sketch";
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: clamp(2rem, 3.5vw, 3rem);
  }

  .hero-title {
    grid-area: title;
  }

  .hero-copy {
    grid-area: copy;
  }

  .sketch {
    grid-area: sketch;
  }
}

/* Two lines, broken after the comma. Narrow enough that "from any bookseller" can't join the
   first line, and on phones small enough that it still fits on the second. */
.hero-title {
  max-width: 8.4em;
  font-size: clamp(2rem, min(1.25rem + 6.2vw, 11.6vw - 0.25rem), 6.75rem);
  font-weight: 560;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: wrap;
}

/* The full stop echoes the wordmark's */
.hero-stop {
  color: var(--color-accent);
}

.hero-copy {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  justify-items: start;
}

/* Wide enough for two lines on tablets and in the desktop grid from about 1240px. In em so the
   cap scales with the fluid lead size. */
.hero-lead {
  max-width: 23em;
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.hero .search-form {
  max-width: 36rem;
  padding: 0.3125rem;
}

.hero .search-input,
.hero .search-button {
  height: 3rem;
}

.hero .search-input {
  padding-inline: 1rem 0.5rem;
  font-size: 1.125rem;
}

@media (max-width: 30rem) {
  .hero .search-button {
    width: 3rem;
  }
}

.hero-examples {
  margin-top: -0.375rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.hero-examples a {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--color-border-strong);
  transition: text-decoration-color 150ms var(--ease);
}

@media (hover: hover) {
  .hero-examples a:hover {
    text-decoration-color: var(--color-accent);
  }
}

.hero-assistants {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  text-wrap: pretty;
}

/* The arrow stays with the last word when the line wraps */
.hero-assistants svg {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  vertical-align: -0.1875rem;
  color: var(--color-accent-text);
  transition: translate 200ms var(--ease);
}

@media (hover: hover) {
  .hero-assistants:hover svg {
    translate: 3px 0;
  }
}

/* A book in charcoal pencil (see application/_sketch.html.erb), ink on the paper in either
   theme, with the cinnabar of the full stop in the ribbon */
.sketch {
  display: block;
  align-self: end;
  width: 100%;
  max-width: 30rem;
  height: auto;
  color: var(--color-text);
}

.sketch-ribbon {
  fill: var(--color-accent);
}

/* Home: booksellers
   ========================================================================== */

.sellers {
  display: grid;
  gap: 0.75rem 3rem;
  width: var(--measure);
  margin-inline: auto;
  padding-block: 1.5rem 1.625rem;
  border-block: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
  .sellers {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.sellers-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-secondary);
}

.sellers-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.125rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  list-style: none;
}

.sellers-list li {
  white-space: nowrap;
}

.sellers-list li:not(:last-child)::after {
  content: "/" / "";
  margin-inline: 0.45em;
  font-weight: 300;
  color: var(--color-border-strong);
}

/* Home: how it works
   ========================================================================== */

.section {
  padding-block: var(--section);
}

.section-inner {
  width: var(--measure);
  margin-inline: auto;
}

.section-title {
  max-width: 15ch;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.02em;
}

.section-header {
  display: grid;
  gap: 1rem 4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
  .section-header {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.section-lead {
  max-width: 30rem;
  font-size: var(--text-lead);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Two ways in: the site and an assistant, each with a small example */
.ways {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 52rem) {
  .ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.way {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.25rem;
  margin: 0;
}

.way figcaption {
  display: grid;
  gap: 0.375rem;
}

.way h3 {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  letter-spacing: -0.02em;
}

.way p {
  max-width: 34rem;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.demo {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 17rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.demo-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.25rem 0.875rem;
  font-size: 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.demo-search-button {
  width: 2.25rem;
  height: 1.875rem;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

.demo-status {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.demo-offers {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-offer {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.125rem 0.875rem;
  align-items: center;
  padding-block: 0.75rem;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--color-border);
}

.demo-cover {
  display: grid;
  grid-row: span 2;
  place-items: center;
  aspect-ratio: 2 / 3;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-on-cover);
  background: var(--color-cover);
  border-radius: 2px 3px 3px 2px;
}

.demo-price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.demo-offer--best .demo-amount {
  color: var(--color-accent-text);
}

.demo-meta {
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-free {
  font-weight: 600;
  color: var(--color-positive);
}

.demo--chat {
  gap: 1rem;
  font-size: 1rem;
}

.chat-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.75rem 1rem;
  background: var(--color-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  text-wrap: pretty;
}

.chat-tool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.chat-tool svg {
  width: 1rem;
  height: 1rem;
  padding: 0.1875rem;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: 50%;
}

.chat-tool code {
  font-size: 0.8125rem;
}

.chat-reply {
  max-width: 92%;
  text-wrap: pretty;
}

.chat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chat-links span {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.chat-links span::after {
  content: "↗" / "";
  color: var(--color-text-secondary);
}

/* The examples play in order once they scroll into view (see reveal_controller.js) */
.is-pending [style*="--i"] {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .is-revealed [style*="--i"] {
    animation: rise 600ms var(--ease-out) calc(var(--i) * 450ms) both;
  }

  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }
}

.features {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* With alerts there are four, two to a row */
  .features:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-text);
}

.feature h3 {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  letter-spacing: -0.015em;
}

.feature p {
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Home: AI assistants
   ========================================================================== */

.assistants {
  padding-block: var(--section);
  background: var(--color-subtle);
}

/* minmax(0, …) keeps long code from widening the columns past the page */
.assistants-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 5rem);
  width: var(--measure);
  margin-inline: auto;
}

.assistants-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: end;
}

@media (min-width: 62rem) {
  .assistants-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.assistants-heading {
  display: grid;
  gap: 1.25rem;
}

.assistants-lead {
  max-width: 36rem;
  font-size: var(--text-lead);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.assistants-connect {
  display: grid;
  gap: 1rem;
}

.assistants-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  list-style: none;
}

.assistants-links a {
  text-decoration-color: var(--color-border-strong);
  transition: text-decoration-color 150ms var(--ease);
}

@media (hover: hover) {
  .assistants-links a:hover {
    text-decoration-color: var(--color-accent);
  }
}

/* A value to copy: the server URL */
.copyable-label {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.copyable {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3125rem 0.3125rem 0.3125rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Long values wrap rather than scroll, so they can be read in full */
.copyable code {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  overflow-wrap: anywhere;
  background: none;
}

.copy-button {
  flex: none;
  min-width: 4.75rem;
  padding: 0.5rem 1rem;
}

.steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Step numbers hang in their own column */
.steps li {
  position: relative;
  padding-left: 1.75rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.tools {
  display: grid;
  gap: 0.5rem;
}

.tools dd + dt {
  margin-top: 0.5rem;
}

.tools dt code {
  font-size: 1rem;
}

/* Results
   ========================================================================== */

.search-page {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.site-header--search {
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--color-bg) 85%, transparent);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(16px) saturate(1.4);
}

.site-header--search .site-header-inner {
  justify-content: flex-start;
  width: auto;
  margin-inline: var(--gutter);
  padding-block: 0.75rem;
}

/* The footer lines up with the results, which run gutter to gutter */
.search-page ~ .site-footer .site-footer-inner {
  width: auto;
  margin-inline: var(--gutter);
}

.site-header--search .search-form {
  flex: 1;
  min-width: 0;
  max-width: 48rem;
}

.progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width 300ms var(--ease), opacity 300ms var(--ease);
}

.progress.is-done .progress-bar {
  opacity: 0;
}

.results-page {
  width: 100%;
  padding: 0 var(--gutter) 4rem;
}

.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 0;
}

.results-status {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Segmented control: radios inside styled labels */

.segmented {
  display: inline-flex;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--color-border);
  background: var(--color-subtle);
  border-radius: var(--radius-sm);
}

.segmented label {
  position: relative;
}

.segmented input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented span {
  display: block;
  padding: 0.3125rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-text-secondary);
  border-radius: 4px;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.segmented input:checked + span {
  color: var(--color-on-primary);
  background: var(--color-primary);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.segmented[hidden],
.segmented label[hidden] {
  display: none;
}

/* Ebooks and audiobooks wait above the print copies: a row per format, naming each
   seller once at its cheapest */

.also {
  display: grid;
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.also[hidden],
.also-format[hidden],
.also-all[hidden] {
  display: none;
}

.also-format {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  align-items: center;
  padding: 0.625rem 0;
}

.also-format:not([hidden]) ~ .also-format:not([hidden]) {
  border-top: 1px solid var(--color-border);
}

.also-title {
  margin-right: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.also-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  padding: 0;
  list-style: none;
}

.also-offer {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.25rem 0.625rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.also-seller {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.also-price {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.also-all {
  padding: 0.25rem 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
}

.also-offer:focus-visible,
.also-all:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .also-offer:hover {
    background: var(--color-subtle);
    border-color: var(--color-border-strong);
  }

  .also-all:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: from-font;
  }
}

/* Only the chosen format's cards show in the results */
.results[data-format="print"] > .product:not([data-format="print"]),
.results[data-format="ebook"] > .product:not([data-format="ebook"]),
.results[data-format="audiobook"] > .product:not([data-format="audiobook"]) {
  display: none;
}

.results,
.skeleton {
  --results-gap: 0.75rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--results-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .results,
  .skeleton {
    --results-gap: 1rem;

    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  }
}

/* The masonry controller spans each card over as many of these short rows as it needs */
.results.is-masonry {
  grid-auto-rows: 4px;
  row-gap: 0;
}

.product {
  display: flex;
}

.is-masonry > .product {
  align-self: start;
  padding-bottom: var(--results-gap);
}

@media (prefers-reduced-motion: no-preference) {
  .product {
    animation: enter-card 350ms var(--ease-out) both;
  }

  @keyframes enter-card {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }
}

.product-link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 150ms var(--ease), box-shadow 200ms var(--ease);
}

@media (hover: hover) {
  .product-link:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
  }

  .product-link:hover .product-name {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
  }
}

.product-cover {
  display: grid;
  place-items: center;
  margin: 0.3125rem 0.3125rem 0;
  padding: 1rem 1rem 0.875rem;
  background: var(--color-subtle);
  border-radius: calc(var(--radius-md) - 0.3125rem);
}

/* Covers keep their own shape, which is what gives the grid its varied heights */
.product-cover img {
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: contain;
  filter: var(--shadow-cover);
}

/* Without a cover, a plain binding with the title's initial */
.product-initial {
  display: none;
  place-items: center;
  width: 72%;
  aspect-ratio: 2 / 3;
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-on-cover);
  background: var(--color-cover);
  border-radius: 2px 4px 4px 2px;
  filter: var(--shadow-cover);
}

.product--no-cover img {
  display: none;
}

.product[hidden] {
  display: none;
}

/* Amazon has no price to show, so its card stands apart and points out of the site */
.product--amazon .product-link {
  border: 1px dashed var(--color-border-strong);
}

.product--no-cover .product-initial {
  display: grid;
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem 0.875rem;
}

/* Offers come after the title in the markup, so screen readers name the book first, but lead visually */
.product-offers {
  display: grid;
  order: -1;
  gap: 0.5rem;
  margin: 0 0 0.375rem;
  padding: 0;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.offer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem 0.5rem;
  align-items: baseline;
}

.offer-price {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.offer-type {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* Booksellers send conditions in lower case */
.offer-type::first-letter {
  text-transform: uppercase;
}

.offer-meta {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.offer-shipping--free {
  font-weight: 600;
  color: var(--color-positive);
}

.product-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  text-decoration-thickness: from-font;
  text-wrap: pretty;
}

.product-creator,
.product-seller,
.product-origin {
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-origin {
  white-space: normal;
  text-wrap: pretty;
}

.product-seller {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.product-creator:empty,
.product-origin:empty {
  display: none;
}

/* What the shopper asked for that the bookseller or Jev confirms, such as "1st ed." */
.product-claims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.product-claims:empty {
  display: none;
}

.product-claim {
  padding: 0.0625rem 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent-subtle);
  border-radius: 4px;
}

/* Jev's match, in the cover's corner and left unexplained */
.product-match {
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-text-secondary);
}

.product-match:empty {
  display: none;
}

/* Listings Jev doubts wait behind a quiet control under the results */
.results:not(.is-showing-all) > .product--doubtful {
  display: none;
}

.results-more {
  display: block;
  margin: 1.5rem auto 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
}

.results-more:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .results-more:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: from-font;
  }
}

/* Placeholders while the first booksellers answer */

.skeleton-card {
  overflow: hidden;
  padding: 0.3125rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.skeleton-cover,
.skeleton-line {
  background: var(--color-subtle);
}

.skeleton-cover {
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius-md) - 0.3125rem);
}

.skeleton-line {
  height: 0.625rem;
  margin: 0.75rem 0.5rem 0;
  border-radius: 3px;
}

.skeleton-line:nth-child(2) {
  width: 40%;
  height: 1rem;
}

.skeleton-line:last-child {
  width: 60%;
  margin-bottom: 0.625rem;
}

/* A sheen sweeps across while the booksellers answer */
@media (prefers-reduced-motion: no-preference) {
  .skeleton-cover,
  .skeleton-line {
    background:
      linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--color-surface) 70%, transparent) 50%, transparent 70%)
      var(--color-subtle);
    background-size: 250% 100%;
    background-attachment: fixed;
    animation: sheen 1.6s linear infinite;
  }

  @keyframes sheen {
    from {
      background-position: 125% 0;
    }

    to {
      background-position: -125% 0;
    }
  }
}

/* Empty and error states */

.notice {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  max-width: 32rem;
  margin-inline: auto;
  padding: 4rem 1rem;
  text-align: center;
}

.notice > svg {
  box-sizing: content-box;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.5rem;
  padding: 0.875rem;
  color: var(--color-text-secondary);
  background: var(--color-subtle);
  border-radius: 50%;
}

.notice h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.015em;
}

.notice p {
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.notice .button {
  padding: 0.5625rem 1rem;
  font-size: 0.9375rem;
}

/* Prose pages (about, cookies)
   ========================================================================== */

/* Text pages sit on the same grid as the header and footer, starting at the
   wordmark, with the text in a column narrow enough to read. Headlines may
   run wider. */
.prose {
  --prose-column: 44rem;
  width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) 5rem;
}

.prose > * {
  max-width: var(--prose-column);
}

.prose > h1 {
  max-width: 60rem;
}

.prose h1 {
  margin: 0.75rem 0 1.5rem;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin: 3rem 0 0.75rem;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.prose p,
.prose ul {
  max-width: 65ch;
  margin-bottom: 1rem;
  text-wrap: pretty;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose li::marker {
  color: var(--color-accent);
}

.prose .lead {
  margin-bottom: 2rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* The about page's bookshop: a pencil sketch on white, multiplied so the paper takes the
   page's colour. In dark mode it's inverted, the hue turned back so the book stays red,
   and screened, so the pencil reads light on the dark paper, as the home page's sketch does. */
.prose-art {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  .prose-art {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }
}

.prose a {
  overflow-wrap: anywhere;
  text-decoration-color: var(--color-accent);
  transition: text-decoration-thickness 150ms var(--ease);
}

.prose code {
  white-space: nowrap;
}

.prose table {
  width: 100%;
  max-width: var(--prose-column);
  margin: 1.5rem 0 2rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
  border-top: 1px solid var(--color-text);
}

.prose th,
.prose td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.prose th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.prose td:last-child,
.prose th:last-child {
  padding-right: 0;
}

.prose td:first-child,
.prose th:first-child {
  padding-left: 0;
}

.prose pre,
.prose-mono-box {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
}

.postal-slip {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}

.postal-slip-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed var(--color-border-strong);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.postal-slip-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 0.7rem;
  border: 1px solid currentColor;
  color: var(--color-accent);
}

.postal-slip-badge--ok {
  color: var(--color-positive);
}

.postal-slip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.postal-field-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

.postal-field-value {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.customs-routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

@media (min-width: 40rem) {
  .customs-routes {
    grid-template-columns: 1fr 1fr;
  }
}

.customs-route {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.customs-route--warn {
  border-left: 3px solid var(--color-accent);
}

.customs-route--good {
  border-left: 3px solid var(--color-positive);
}

.customs-route-title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.customs-route--good .customs-route-title {
  color: var(--color-positive);
}

.customs-route--warn .customs-route-title {
  color: var(--color-accent);
}

.customs-route-step {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2.5rem 0 3.5rem;
}

@media (min-width: 44rem) {
  .guides-grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

.guide-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 150ms var(--ease);
}

.guide-card:hover {
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.guide-card-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.guide-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.guide-card-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
}

.guide-card-cta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.prose .guide-cta {
  max-width: var(--prose-column);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

@media (min-width: 48rem) {
  .prose .guide-cta {
    white-space: nowrap;
  }
}

@media (hover: hover) {
  .prose a:hover {
    text-decoration-thickness: 2px;
  }
}

/* Key facts, such as the cookie's name and lifetime */
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0 0 2rem;
  font-size: 1rem;
  border-top: 1px solid var(--color-text);
}

.facts dt,
.facts dd {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.facts dt {
  padding-right: 2rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

@media (max-width: 30rem) {
  .facts {
    grid-template-columns: 1fr;
  }

  .facts dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .facts dd {
    padding-top: 0.125rem;
  }
}

/* Assistants and docs pages
   ========================================================================== */

.prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: var(--text-body);
  font-weight: 600;
}

.prose h2 + h3 {
  margin-top: 1.25rem;
}

.prose h3 code {
  font-size: 0.9375em;
}

.prose .steps {
  margin-bottom: 1rem;
}

.prose .steps li + li {
  margin-top: 0;
}

.prose .steps b {
  font-weight: 600;
  white-space: nowrap;
}

.prose-note {
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.prose-copyable {
  margin-bottom: 1.5rem;
}

/* A command wraps rather than runs off a phone screen */
.prose .copyable code {
  white-space: normal;
}

/* So does a long path */
.prose code.path {
  white-space: normal;
  overflow-wrap: anywhere;
}

.prose pre {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
  background: var(--color-subtle);
  border-radius: var(--radius-md);
}

.prose pre code {
  padding: 0;
  font-size: inherit;
  white-space: inherit;
  background: none;
}

.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  max-width: none;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1rem;
  list-style: none;
}

.toc li + li {
  margin-top: 0;
}

/* On wide screens the contents move to a rail on the right and stay in view.
   Pages whose contents only make sense as a rail hide them on smaller screens. */
@media (min-width: 72rem) {
  .prose:has(> .toc) {
    position: relative;
  }

  /* Headlines keep clear of the rail */
  .prose:has(> .toc) > h1 {
    max-width: min(60rem, 100% - 17rem);
  }

  .prose > .toc {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 13rem;
    max-width: none;
    padding-top: clamp(2.5rem, 7vw, 5.5rem);
  }

  .prose > .toc ul {
    position: sticky;
    top: 2rem;
    flex-direction: column;
    gap: 1.25rem;
    padding-left: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.3;
    border-left: 1px solid var(--color-rule);
  }

  .prose > .toc a {
    position: relative;
    display: block;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 150ms var(--ease);
  }

  @media (hover: hover) {
    .prose > .toc a:hover {
      color: var(--color-text);
    }
  }

  /* The section being read, marked on the rule */
  .prose > .toc a[aria-current] {
    color: var(--color-text);
  }

  .prose > .toc a[aria-current]::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1.25rem - 1px);
    width: 2px;
    content: "";
    background: var(--color-accent);
  }
}

@media (max-width: 71.99rem) {
  .toc--aside {
    display: none;
  }
}

/* Long field names wrap in their own column rather than squeeze the text */
.prose--docs .facts {
  grid-template-columns: fit-content(12rem) minmax(0, 1fr);
}

/* Tables and code run as wide as the headline, clear of the rail */
.prose--docs > :is(.facts, pre) {
  max-width: none;
}

@media (min-width: 72rem) {
  .prose--docs > :is(.facts, pre) {
    max-width: min(60rem, 100% - 17rem);
  }
}

@media (max-width: 30rem) {
  .prose--docs .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Accounts and alerts
   ========================================================================== */

/* Forms stay a short, centred column */
.prose--narrow {
  width: min(100% - 2 * var(--gutter), 36rem);
}

.form {
  display: grid;
  gap: 0.5rem;
  max-width: 26rem;
  margin-block: 0.5rem 2rem;
}

.form label {
  font-size: 1rem;
  font-weight: 500;
}

.input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  font-size: 1.0625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.input:focus-visible {
  border-color: var(--color-focus);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--color-border);
}

.input[aria-invalid="true"] {
  border-color: var(--color-accent-text);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.form-actions .button,
.form .button {
  padding: 0.5625rem 1rem;
}

.form-error {
  font-size: 1rem;
  color: var(--color-accent-text);
}

.prose .form-note {
  font-size: 1rem;
  color: var(--color-text-secondary);
}

/* "Alert me", beside the status line; the sort and format controls stay right */
.alert-me {
  display: flex;
  margin-right: auto;
}

.alert-me .button {
  white-space: normal;
  text-align: left;
}

.alert-me .button svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent-text);
}

.alert-me-what {
  color: var(--color-text-secondary);
}

.alert-me-what:not(:empty)::before {
  content: " · ";
}

.site-header--search .site-nav {
  flex: none;
  margin-left: auto;
}

/* Phones keep the whole width for the search; "Alert me" is there anyway */
@media (max-width: 40rem) {
  .site-header--search .site-nav {
    display: none;
  }
}

.button--danger {
  color: var(--color-on-primary);
  background: var(--color-accent-text);
}

@media (hover: hover) {
  .button--danger:hover {
    background: var(--color-accent);
  }
}

.checkbox {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  font-size: 1rem;
  cursor: pointer;
}

.checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-accent-text);
}

/* The code from a sign-in email */
.input--code {
  max-width: 11rem;
  font-family: var(--font-mono);
  font-size: 1.375rem;
  letter-spacing: 0.2em;
}

/* Connecting an assistant: what to check before allowing it */
.prose .warning {
  padding: 0.875rem 1rem;
  font-size: 1rem;
  background: var(--color-subtle);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* Connected assistants, on the account page */
.prose .connections {
  display: grid;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.prose .connections li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--color-border);
}

.prose .connections p {
  margin: 0;
}

.connection-name {
  font-weight: 500;
}

.connection-host {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.prose .connection-meta {
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.prose--alerts {
  --prose-column: 48rem;
}

.alerts {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

/* The grid spaces the cards, not the prose list's margin */
.prose .alerts > li + li,
.prose .plans > li + li {
  margin-top: 0;
}

.alert-card {
  padding: 1.25rem 1.5rem 1.375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  scroll-margin-top: 2rem;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

/* The alert just set or changed */
.alert-card:target {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.prose .alert-card p {
  max-width: none;
  margin: 0;
}

.alert-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.prose .alert-title {
  margin: 0;
  font-size: 1.375rem;
  overflow-wrap: anywhere;
}

.prose .alert-title a {
  text-decoration: none;
}

@media (hover: hover) {
  .prose .alert-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
  }
}

.alert-status {
  flex: none;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  background: var(--color-subtle);
  border-radius: 999px;
}

.alert-card--found .alert-status {
  color: var(--color-accent-text);
  background: var(--color-accent-subtle);
}

.alert-card--live .alert-status {
  color: var(--color-positive);
}

.prose .alert-watching {
  margin-top: 0.25rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.prose .alert-meta {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.alert-actions .button,
.alert-lower .button {
  padding: 0.5rem 0.9375rem;
}

.found {
  display: grid;
  gap: 0.125rem;
  margin-top: 1rem;
  padding-top: 1rem;
  font-size: 1rem;
  border-top: 1px solid var(--color-border);
}

.prose .found-when {
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-accent-text);
}

.prose .found-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.found-author {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.found-seller {
  color: var(--color-text-secondary);
}

.found-words {
  margin: 0.625rem 0 0;
  padding-left: 1rem;
  font-style: italic;
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-border);
}

.alert-lower {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.money-input {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  color: var(--color-text);
}

.money-input .input {
  width: 6.5rem;
  height: 2.375rem;
}

.prose .alerts-plan {
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.alerts-empty {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-subtle);
  border-radius: var(--radius-lg);
}

.prose .alerts-empty p {
  margin: 0;
}

/* Pro's want list, folded away above the alerts */
.want-list {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--color-subtle);
  border-radius: var(--radius-lg);
}

.want-list summary {
  font-weight: 500;
  cursor: pointer;
}

.want-list .form {
  max-width: 36rem;
  margin-block: 1.25rem 0.5rem;
}

.prose .want-list .form-note {
  margin: 0 0 0.75rem;
}

.want-list textarea.input {
  height: auto;
  padding-block: 0.625rem;
  line-height: 1.5;
  resize: vertical;
}

.want-list input[type="file"] {
  font-size: 1rem;
}

/* As a secondary button */
.want-list input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* What a want list set, skipped and had no room for */
.prose .want-list-result {
  max-width: var(--prose-column);
  margin: 1.5rem 0;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  background: var(--color-subtle);
  border-left: 3px solid var(--color-positive);
  border-radius: var(--radius-sm);
}

/* Plans */

.prose--plans {
  --prose-column: none;
}

/* Searching, free for everyone, in a band above the alert plans */
.plans-search {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.5rem);
  background: var(--color-subtle);
  border-radius: var(--radius-lg);
}

.plans-search > div {
  flex: 1 1 26rem;
}

.prose .plans-search-title {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.prose .plans-search p {
  max-width: none;
  margin: 0;
  font-size: 1.0625rem;
}

.plans-search strong {
  font-weight: 600;
}

.prose .plans-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.plan--current {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.prose .plan-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  font-size: 1.5rem;
}

.plan-badge {
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-accent-text);
  background: var(--color-accent-subtle);
  border-radius: 999px;
}

/* The amount large, "a month" and the year's price beside and under it */
.prose .plan-price {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.plan-price strong {
  margin-right: 0.125rem;
  font-size: clamp(2.25rem, 1.9rem + 1vw, 2.75rem);
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.prose .plan-features {
  margin: 0;
  padding: 1rem 0 0;
  font-size: 1rem;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.prose .plan-features li + li {
  margin-top: 0.25rem;
}

.prose .plan-features .plan-alerts {
  margin-bottom: 0.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* As wide as the cards */
.prose .plans-note {
  max-width: var(--prose-column);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.prose .plans-soon {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: var(--color-subtle);
  border-radius: var(--radius-md);
}

.prose .plans-action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.plans-form {
  max-width: 38rem;
  margin-top: 2rem;
}

/* Sized like the home page's sections and features */
.prose .plans-questions {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.02em;
}

.questions {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .questions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.question {
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-text);
}

.prose .question h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  letter-spacing: -0.015em;
}

.prose .question p {
  margin: 0;
  color: var(--color-text-secondary);
}

.prose .plans-more {
  margin-top: 2.5rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.plan-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.plan-choices legend {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.plan-choice {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.plan-choice:has(input:checked) {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.plan-choice input {
  margin: 0;
  accent-color: var(--color-accent-text);
}

.checkbox--top {
  align-items: flex-start;
}

.checkbox--top input {
  margin-top: 0.25rem;
}

/* Labels, navigation and small controls take the pixel mono
   ========================================================================== */
.eyebrow,
.site-nav,
.button,
.alert-status,
.found-when,
.plan-badge,
.plans-search-title,
.sellers-title,
.results-status,
.results-more,
.also-title,
.also-all,
.offer-type,
.product-claim,
.product-match,
.copyable-label,
.demo-status,
.hero-examples,
.hero-assistants,
.segmented span,
.site-footer-inner {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
}

.eyebrow,
.plans-search-title,
.sellers-title,
.copyable-label {
  text-transform: uppercase;
}