@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400 700;
  font-display: block;
  src: url("../fonts/books-jakarta.17c8121ba28a.woff2") format('woff2');
}

/* iOS enlarges text in boxes wider than the screen, and the MCP prompt runs past its card on purpose */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Books page tokens on top of new-landing.css, from Figma section "Round 7" */
.books {
  --font-albert: 'Albert Sans', 'Albert Sans Fallback', sans-serif;
  --ink: #333;
  --surface-secondary: #f8f5ed;
  --surface-tertiary: #f5f1e8;
  --text-tertiary: #a6a4a0;
  --books-radius-card: 20px;
  --books-radius-control: 999px;
  --books-page: 1312px;
  --shadow-book: 0 2px 3px -1px #00000029, 0 10px 18px -6px #00000038;
}

/* only the page content; the shared header and footer keep the Readwise landing's Albert Sans */
.books-main {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  font-family: var(--font-sans);
}

.books-main :is(h1, h2, h3) {
  font-family: var(--font-sans);
  font-weight: 500;
}

.books-main {
  display: flex;
  flex-direction: column;
  max-width: calc(var(--books-page) + 2 * var(--gutter));
  margin: auto;
  padding: 32px var(--gutter) 64px;
}

.books .landing-footer {
  max-width: calc(var(--books-page) + 2 * var(--gutter));
}

.books-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--books-radius-control);
  background: var(--ink);
  color: #fff;
  font: 600 15px/22px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

/* as wide as the Readwise landing's page, past the narrower books column */
.books-hero {
  align-self: center;
  width: min(100vw - 2 * var(--gutter), var(--page) - 2 * var(--gutter));
  padding-bottom: 36px;
}

.books-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 544px) minmax(0, 568px);
  justify-content: space-between;
  align-items: start;
  gap: 32px;
  min-height: 592px;
  --books-hero-inset: max(0px, (100% - var(--books-page)) / 2);
  padding: 83px calc(68px + var(--books-hero-inset)) 32px calc(56px + var(--books-hero-inset));
  border-radius: 24px;
  background: linear-gradient(#f9edde, var(--surface-primary));
  overflow: clip;
}

.books-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 46px;
  color: var(--ink);
}

.books-hero-copy h1 {
  max-width: 7.32em;
  font-size: min(72px, 5vw);
  line-height: 1.111;
  letter-spacing: -2.16px;
}

.books-hero-lede {
  font-size: 20px;
  line-height: 30px;
}

.books-hero-waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 194px;
}

.books-hero-waitlist .books-button {
  align-self: stretch;
}

.books-hero-waitlist p {
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}


.books-hero-art {
  position: relative;
  aspect-ratio: 568 / 426;
}

.books-hero-art .books-hero-glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.books-hero-art .books-hero-glow-wide {
  left: -46.4%;
  top: -31.1%;
  width: 141.2%;
  height: 137.8%;
}

.books-hero-art .books-hero-glow-small {
  left: -0.6%;
  top: 26.2%;
  width: 63.96%;
  height: 95.66%;
}

/* the collage is three layers, placed as fractions of its frame */
.books-hero-float {
  position: absolute;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .16));
}

.books-hero-float img {
  display: block;
  width: 100%;
}

.books-hero-snapshot {
  top: 7.9%;
  left: 5.93%;
  width: 44.55%;
}

.books-hero-reading {
  top: 40.17%;
  left: 8.81%;
  width: 39.9%;
}

.books-hero-review {
  top: 25.21%;
  left: 46%;
  width: 49.52%;
}

.books-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.books-video .books-hero-video {
  opacity: 1;
}

/* invisible but still in the accessibility tree, so the cards' descriptions stand in for the muted video */
.books-video .books-hero-float {
  opacity: 0;
  animation: none;
}

/* covers each bar of the snapshot with its cell colour, then lifts off to let the bar grow */
.books-hero-snapshot i {
  position: absolute;
  background: #f8f4ec;
  transform: scaleY(0);
  transform-origin: top;
}

@media (max-width: 900px) {
  .books-hero-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
    min-height: 0;
    padding: 24px;
  }

  .books-hero-art {
    order: -1;
    width: 100%;
    max-width: 568px;
  }

  .books-hero-copy {
    align-items: center;
    gap: 16px;
    margin-top: 0;
    justify-self: stretch;
    text-align: center;
  }

  .books-hero-copy h1 {
    max-width: none;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -1.2px;
  }

  .books-hero-lede {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 680px) {
  .books-hero {
    padding-bottom: 40px;
  }

  .books-hero-copy h1 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.8px;
  }

  .books-hero-waitlist {
    width: 100%;
  }
}

.books-catalog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-inline: calc(50% - 50vw);
  padding: 52px 0 58px;
  background: radial-gradient(2153px 1311px at 50% 0, rgb(255 105 0 / 0.4), rgb(255 105 0 / 0) 70.67%) top / 100% 877px no-repeat;
  overflow: clip;
}

.books-catalog-glow {
  position: absolute;
  top: -280px;
  left: calc(50% - 109px);
  pointer-events: none;
}

.books-catalog-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 826px;
  padding-inline: var(--gutter);
  box-sizing: content-box;
  color: var(--ink);
  text-align: center;
}

.books-catalog-copy h2 {
  max-width: 620px;
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.96px;
}

.books-catalog-copy p {
  font-size: 18px;
  line-height: 28px;
}

/* four rounds of the same covers, starting one round left of centre, so neither edge runs out on a wide screen */
.books-catalog-covers {
  --cover-step: 184px;
  --covers: 7;
  display: flex;
  gap: 24px;
  align-self: flex-start;
  margin-left: calc(50% - 1.5 * var(--covers) * var(--cover-step));
  animation: books-catalog-scroll calc(var(--covers) * 6s) linear infinite paused;
  /* the page keeps vertical swipes; sideways ones reach the drag handler */
  touch-action: pan-y pinch-zoom;
}

.books-catalog-covers[data-dragging], .books-catalog-covers[data-dragging] a {
  cursor: grabbing;
  user-select: none;
}

/* one round of trending books already spans the screen, so two rounds from the left edge are enough */
.books-catalog-trending {
  margin-left: 0;
}

@keyframes books-catalog-scroll {
  to { translate: calc(-1 * var(--covers) * var(--cover-step)); }
}

.books-catalog-round {
  display: contents;
}

.books-catalog-cover {
  position: relative;
  flex: none;
  width: 160px;
  height: 240px;
  border-radius: 2px;
  box-shadow: var(--shadow-book);
  overflow: hidden;
}

.books-catalog-cover::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 8.3%;
  background: url("../images/books/catalog-spine.24c158839e94.webp") 0 0 / 100% 100%;
}

.books-catalog-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.books-catalog-note {
  position: relative;
  padding-inline: var(--gutter);
  color: var(--ink);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

@media (max-width: 680px) {
  .books-catalog {
    gap: 24px;
    padding-block: 48px 40px;
  }

  .books-catalog-copy h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  .books-catalog-copy p {
    font-size: 16px;
    line-height: 24px;
  }

  .books-catalog-copy p br {
    display: none;
  }

  .books-catalog-covers {
    zoom: 0.65;
  }
}

.books-split {
  display: flex;
  align-items: center;
  gap: 72px;
  padding-block: 48px;
  color: var(--ink);
}

.books-split-reverse {
  flex-direction: row-reverse;
}

.books-split-art {
  position: relative;
  flex: 0 1 680px;
  min-width: 0;
}

/* covers over the art's bars and fills, collapsed at rest so the art reads whole without motion */
.books-cover {
  position: absolute;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
}

.books-cover-x {
  transform: scaleX(0);
  transform-origin: right;
}

.books-scan, .books-eq {
  display: none;
}

/* the sessions gallery: one strip of slides, scrolled by the tabs, the auto-advance or a swipe */
.books-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(#fbe7d8, #fbf9f3 75%);
}

.books-gallery-tabs {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.books-gallery-tabs::-webkit-scrollbar, .books-gallery-viewport::-webkit-scrollbar {
  display: none;
}

/* equal widths, so the bolder hover weight never nudges the other tabs */
.books-gallery-tabs button {
  flex: 1 1 0;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: rgb(255 255 255 / 0);
  color: var(--ink);
  font: 500 13px/19px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .4s ease, font-weight .2s ease;
}

/* no ring here; keyboard focus shows as the hover weight on a faint pill */
.books-gallery-tabs button:focus-visible {
  outline: none;
  font-weight: 600;
}

.books-gallery-tabs button:focus-visible:not([aria-selected=true]) {
  background: rgb(255 255 255 / .55);
}

.books-gallery-tabs button[aria-selected=true]:focus-visible {
  box-shadow: inset 0 0 0 1.5px rgb(51 51 51 / .25);
}

.books-gallery-tabs [aria-selected=true] {
  background: #fff;
  font-weight: 600;
}

@media (hover: hover) {
  .books-gallery-tabs button:hover {
    font-weight: 600;
  }
}

.books-gallery-viewport {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.books-gallery-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.books-gallery-art {
  position: relative;
}

.books-gallery-slide figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

.books-gallery-slide strong {
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
}

@media (max-width: 680px) {
  .books-gallery {
    gap: 16px;
    padding: 16px;
  }

  /* the tab row scrolls out to the card's edges instead of stopping at its padding */
  .books-gallery-tabs {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .books-gallery-tabs button {
    flex: 0 0 auto;
  }

  .books-gallery-slide figcaption {
    gap: 4px;
    padding: 12px 4px 0;
    font-size: 14px;
    line-height: 20px;
  }

  .books-gallery-slide strong {
    font-size: 18px;
    line-height: 26px;
  }
}

/* the together art as its Figma layers */
.books-together-art {
  container-type: inline-size;
}

.books-together-scene {
  position: relative;
  aspect-ratio: 680 / 568;
  border-radius: 3.53cqw;
  background: linear-gradient(#ffedd4, #fbf9f3);
  overflow: clip;
}

.books-together-stage, .books-together-stage > *, .books-together-card {
  position: absolute;
}

.books-together-stage {
  inset: 0;
}

.books-together-sessions {
  inset: 0;
}

.books-together-scene img {
  display: block;
  height: auto;
}

.books-together-scene .books-together-note {
  left: 19.12%;
  top: 5.99%;
  width: 61.76%;
}

.books-together-card img {
  width: 100%;
}

.books-together-fernando {
  left: 17.36%;
  top: 28.98%;
  width: 65.17%;
}

.books-together-artem {
  left: 12.62%;
  top: 46.15%;
  width: 74.72%;
}

/* the Figma stack is rotated -23.49deg, so each avatar and the +5 turn with it */
.books-together-scene .books-together-avatar {
  left: var(--x);
  top: var(--y);
  width: 5.88cqw;
  height: 5.88cqw;
  border: .18cqw solid #fbf9f3;
  border-radius: 50%;
  object-fit: cover;
  translate: -50% -50%;
  rotate: 23.49deg;
  box-shadow: 0 1px 1px rgb(42 40 34 / .1), 0 3px 3px rgb(42 40 34 / .1), 0 6px 6px rgb(42 40 34 / .1);
}

.books-together-more {
  left: 78.98%;
  top: 53.11%;
  translate: -50% -50%;
  rotate: 23.49deg;
  font: 700 4.17cqw/1 var(--font-sans);
  color: #7b7a79;
}

@media (max-width: 680px) {
  /* a taller frame, with the 708x572 phone composition centred in it and scaled up so the cards stay legible */
  .books-together-scene {
    aspect-ratio: 708 / 686;
  }

  .books-together-stage {
    inset: 50% 0 auto;
    aspect-ratio: 708 / 572;
    translate: 0 -50%;
    scale: 1.2;
  }

  .books-together-scene .books-together-note {
    left: 20.2%;
    top: 5.94%;
    width: 59.6%;
  }

  .books-together-fernando {
    left: 18.93%;
    top: 27.45%;
    width: 61.44%;
  }

  .books-together-artem {
    left: 14.12%;
    top: 45.1%;
    width: 70.34%;
  }

  .books-together-scene .books-together-avatar {
    left: var(--px);
    top: var(--py);
    width: 5.65cqw;
    height: 5.65cqw;
  }

  .books-together-more {
    left: 81.33%;
    top: 53.01%;
    font-size: 4.01cqw;
  }
}

.books-feature-art {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  container-type: inline-size;
}

.books-mcp-prompt {
  position: absolute;
  margin: 0;
  overflow: hidden;
  font: 400 3.6cqw/5.45cqw var(--font-sans);
  color: #151515;
}

.books-mcp-pill {
  margin: 0 .25em;
  color: #3372ba;
  white-space: nowrap;
}

.books-feature .books-mcp-pill img {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: .3em;
  border-radius: 3px;
  vertical-align: -.2em;
}

.books-mcp-caret {
  display: none;
}

/* the prompt only paints over the art once JS is typing into it */
.landing-js .books-feature[data-shown] .books-mcp-prompt {
  background: #fff;
}

/* registered so a theme change can fade the page instead of snapping */
@property --reader-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #fbf9f5;
}

@property --reader-text {
  syntax: '<color>';
  inherits: true;
  initial-value: #33312d;
}

@property --reader-muted {
  syntax: '<color>';
  inherits: true;
  initial-value: #78746c;
}

/* the feature art as its Figma layers over the frame's own gradient */
.books-layers {
  position: relative;
  aspect-ratio: 408 / 312;
  background: linear-gradient(142.6deg, #ffedd4 10.7%, #fbf9f3 82.1%);
}

.books-layers > img, .books-layers > svg {
  position: absolute;
  height: auto;
}

.books-link-draw {
  stroke-dashoffset: 0;
}

/* the player is laid out in Figma px and scaled to the frame, like the reader screens */
.books-voices-stage {
  --reader-width: 100cqw;
  position: absolute;
  inset: 0 auto auto 0;
  width: 408px;
  height: 312px;
  transform-origin: 0 0;
  scale: tan(atan2(var(--reader-width), 408px));
}

.books-voices-page {
  position: absolute;
  top: 16px;
  left: 32px;
  width: 344px;
  height: 218px;
  padding: 17px 20px 0;
  border-radius: 12px;
  background: #fefcf8;
  box-shadow: 0 5px 16px #4d38241a;
  color: #7a756e;
  font-size: 10px;
  line-height: normal;
}

.books-voices-page p {
  margin: 0;
}

.books-voices-title {
  float: left;
  color: #33312d;
  font-size: 12px;
  font-weight: 600;
}

.books-voices-name {
  text-align: right;
  line-height: 15px;
  padding-top: 1px;
}

.books-voices-page .books-voices-text {
  clear: both;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid #e3ded4;
  color: #33312d;
  font: 500 18px/29px var(--font-serif);
}

.books-voices-text span {
  margin: 0 -1px;
  padding: 0 1px;
  border-radius: 2px;
}

.books-voices-text [data-current] {
  background: #4693fe2e;
}

.books-voices-percent {
  position: absolute;
  top: 185px;
}

.books-voices-player {
  position: absolute;
  top: 214px;
  left: 28px;
  width: 352px;
  padding: 14px 16px 23.8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px -7px #40291221;
}

.books-voices-bar {
  height: 1.628px;
  background: #928d8480;
}

.books-voices-bar i {
  display: block;
  width: calc(80px + var(--played, 0) * 8px);
  height: 100%;
  background: #ff6900;
}

.books-voices-times {
  display: flex;
  justify-content: space-between;
  padding: 0 9.771px;
  color: #928d84;
  font: 500 8.142px/16.285px Inter, sans-serif;
}

.books-voices-buttons {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 26.056px;
  margin: 0 13.028px;
  color: #33312d;
}

.books-voices-buttons svg {
  display: block;
  width: 26.056px;
  height: 26.056px;
}

.books-voices-voice {
  position: relative;
  width: 32.57px;
  color: #78746c;
}

.books-voices-transport {
  display: flex;
  gap: 26.056px;
}

.books-voices-play {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: scale .2s ease;
}

.books-voices-play:hover {
  scale: 1.12;
}

/* a wider hit area than the 26px icon */
.books-voices-play::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.books-voices-play:focus-visible {
  border-radius: 6px;
  outline: 2px solid #4693fe;
  outline-offset: 2px;
}

.books-voices-play .books-voices-pause-icon, .books-voices[data-playing] .books-voices-play-icon {
  display: none;
}

.books-voices[data-playing] .books-voices-play .books-voices-pause-icon {
  display: block;
}

.books-voices-speed {
  width: 32.57px;
  color: #78746c;
  font: 500 14.656px/16.285px Inter, sans-serif;
  text-align: right;
}

/* --u is one Figma px */
.books-reading {
  --u: calc(100cqw / 408);
}

.books-reading-page {
  position: absolute;
  top: -12.18%;
  left: 5.88%;
  width: 57.35%;
  container-type: inline-size;
}

.books-reading .books-reader-screen {
  transition: --reader-bg .6s ease, --reader-text .6s ease, --reader-muted .6s ease;
}

.books-reading[data-theme=sepia] .books-reader-screen {
  --reader-bg: #f8f2e3;
  --reader-text: #3a332a;
  --reader-muted: #7d7264;
}

.books-reading[data-theme=soft] .books-reader-screen {
  --reader-bg: #ebebeb;
  --reader-text: #4a4a4a;
  --reader-muted: #6e6e6e;
}

.books-reading[data-theme=slate] .books-reader-screen {
  --reader-bg: #eef1f4;
  --reader-text: #2c3440;
  --reader-muted: #5f6b78;
}

.books-reading .books-reader-header img {
  width: 19.531px;
}

/* this phone sets its type larger than the tracking one */
.books-reading .books-reader-text {
  font-size: 11.49px;
}

.books-reading .books-reader-text p {
  text-indent: 14.4px;
}

.books-reading-sheet {
  position: absolute;
  top: 17.31%;
  left: 33.09%;
  width: 66.91%;
}

/* the swatch row, anchored on Paper's centre and turned with the sheet */
.books-reading-modes {
  position: absolute;
  top: 24.05%;
  left: 36.58%;
  rotate: 15deg;
}

.books-reading-modes > * {
  position: absolute;
  width: calc(44.5 * var(--u));
  height: calc(44.5 * var(--u));
  border-radius: calc(9 * var(--u));
  translate: calc(-50% + var(--i) * 46.29 * var(--u)) -50%;
}

.books-reading-modes button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.books-reading-ring {
  --i: 0;
  border: calc(1.6 * var(--u)) solid #fe8d3d;
  pointer-events: none;
  transition: translate .45s cubic-bezier(.34, 1.4, .64, 1);
}

.books-reading[data-theme=sepia] .books-reading-ring { --i: 1; }
.books-reading[data-theme=soft] .books-reading-ring { --i: 2; }
.books-reading[data-theme=slate] .books-reading-ring { --i: 3; }

.landing-js .books-feature[data-shown] .books-mcp-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -.15em;
}

.books-split-art img {
  display: block;
  width: 100%;
  height: auto;
}

.books-tracking-art {
  position: relative;
  overflow: hidden;
}

/* sits over the phone in the art, placed as fractions of its 680x608 frame */
.books-reader {
  position: absolute;
  top: 17.6%;
  left: 5.59%;
  width: 42.35%;
  aspect-ratio: 288 / 542.63;
  container-type: inline-size;
}

/* registered as a length so Safari resolves 100cqw to px before the division below */
@property --reader-width {
  syntax: '<length>';
  inherits: false;
  initial-value: 288px;
}

/* the screens are laid out at 240.47px wide; tan(atan2()) divides two lengths into a plain scale factor */
.books-reader-screens {
  --reader-width: 100cqw;
  position: absolute;
  top: 0;
  left: 0;
  width: 240.47px;
  height: 453.05px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 0 0.84px #ddd2c9;
  transform-origin: 0 0;
  scale: tan(atan2(var(--reader-width), 240.47px));
}

.books-reader-screen {
  --reader-bg: #fbf9f5;
  --reader-bar: rgb(251 249 245 / 0.85);
  --reader-text: #33312d;
  --reader-muted: #78746c;
  position: absolute;
  inset: 0;
  background: var(--reader-bg);
  color: var(--reader-muted);
  font: 500 7.934px/10.986px Inter, sans-serif;
}

.books-reader-screen img {
  display: block;
}

.books-reader-text {
  position: absolute;
  inset: 56.15px 0 auto;
  height: 396.9px;
  padding: 9.765px 19.531px;
  overflow: hidden;
  color: var(--reader-text);
  font: 500 11.35px/14.648px var(--font-serif);
}

.books-reader-text p {
  text-indent: 14.6px;
  text-wrap: wrap;
}

.books-reader-text mark {
  background: none;
  color: inherit;
}

/* a slice-broken inline lays its background out as one strip, so growing it sweeps the lines in reading order */
.books-tracking-art mark {
  background: linear-gradient(rgb(255 205 0 / 0.45), rgb(255 205 0 / 0.45)) 0 0 / 100% 100% no-repeat;
}

.books-reader-header {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7.324px;
  padding: 34.178px 9.765px 0;
  background: var(--reader-bg);
}

.books-reader-header::after,
.books-reader-footer::before {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 7.324px;
  background: linear-gradient(var(--reader-bg), transparent);
}

.books-reader-header img {
  width: 19.531px;
  height: 19.531px;
}

.books-reader-header span {
  flex: 1;
  text-align: center;
}

.books-reader-footer {
  position: absolute;
  inset: auto 0 0;
  height: 41.502px;
  padding-top: 4.272px;
  background: var(--reader-bar);
  text-align: center;
  -webkit-backdrop-filter: blur(9.765px);
  backdrop-filter: blur(9.765px);
}

.books-reader-footer::before {
  inset: auto 0 100%;
  background: linear-gradient(to top, var(--reader-bg), transparent);
}

.books-split-copy {
  display: flex;
  flex: 0 1 528px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.books-split-copy h2 {
  max-width: 448px;
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.96px;
}

.books-split-copy h2 i {
  font-style: italic;
}

/* the font has no italic, and the synthesized slant leans into the next word */
.books-split-copy i {
  padding-right: 0.12em;
}

.books-split-copy > p {
  max-width: 468px;
  font-size: 20px;
  line-height: 30px;
}

.books-split-copy > p.books-tracking-import {
  padding-top: 16px;
  font-size: 16px;
  line-height: 24px;
}

.books-tracking-sources {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.books-tracking-sources li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 112px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.books-tracking-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 0.6px rgb(60 64 67 / 0.05), 0 0.9px 2.4px rgb(60 64 67 / 0.1), 0 1.8px 6px rgb(60 64 67 / 0.2);
  overflow: hidden;
}

.books-tracking-icon-soon {
  background: #f0f1f2;
}

/* letter tiles in place of the services' logos */
.books-tracking-letter {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}


.books-sessions-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding-left: 30px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.books-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: 48px 64px;
  color: var(--ink);
}

.books-features h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.8px;
  text-align: center;
}

.books-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 408px));
  justify-content: center;
  gap: 48px 28px;
}

.books-feature img {
  display: block;
  width: 100%;
  height: auto;
}

.books-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 8px 0;
}

.books-feature h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.56px;
}

.books-feature-copy p {
  color: #7b7a79;
  font-size: 18px;
  line-height: 28px;
}

.books-feature-copy .books-feature-note {
  color: var(--ink);
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 1000px) {
  .books-split {
    gap: 40px;
  }

  .books-features-grid {
    grid-template-columns: repeat(2, minmax(0, 408px));
  }
}

@media (max-width: 680px) {
  .books-split,
  .books-split-reverse {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
  }

  .books-split-art {
    flex-basis: auto;
  }

  .books-split-copy {
    flex-basis: auto;
    gap: 16px;
  }

  .books-split-copy h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  .books-split-copy > p {
    font-size: 18px;
    line-height: 28px;
  }

  .books-split-copy > p.books-tracking-import {
    padding-top: 8px;
    font-size: 14px;
    line-height: 22px;
  }

  .books-tracking-sources {
    gap: 12px;
  }

  .books-tracking-sources li {
    width: 106px;
  }


  .books-sessions-benefits {
    gap: 10px;
    padding-left: 27px;
    font-size: 18px;
  }

  .books-features {
    gap: 28px;
  }

  .books-features h2 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.56px;
  }

  .books-features-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .books-feature-copy {
    padding: 16px 0 0;
  }

  .books-feature h3 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
  }

  .books-feature-copy p {
    font-size: 16px;
    line-height: 24px;
  }
}

.books-stories {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-block: 64px;
}

.books-stories h2 {
  max-width: 1000px;
  color: var(--ink);
  font-size: 48px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: -1.4px;
  text-align: center;
}

.books-stories-collage {
  display: grid;
  grid-template-columns: 292fr 696fr 292fr;
  gap: 16px;
  width: 100%;
}

.books-stories-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.books-stories blockquote {
  margin: 0;
}

.books-stories-link {
  display: block;
}

.books-stories-media {
  position: relative;
  overflow: hidden;
}

.books-stories-media > img {
  display: block;
  width: 100%;
}

.books-stories-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
}

.books-stories-post {
  overflow: hidden;
  border-radius: 12px;
  background: #fffefb;
}

.books-stories-credit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding-inline: 16px;
  color: var(--ink);
}

.books-stories-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.books-stories-source {
  display: grid;
  grid-template-columns: 66px 16px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 20px;
}

.books-stories-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 222px;
  padding: 24px;
  border-radius: 12px;
  background: #fcede3;
  color: var(--ink);
}

.books-stories-quote blockquote {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.5px;
}

.books-stories-quote-compact blockquote {
  font-size: 23px;
  line-height: 31px;
  letter-spacing: 0;
}

:is(.books-stories-quote-credit, .books-stories-feature-credit) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.books-stories-feature {
  display: flex;
  overflow: hidden;
  border-radius: 12px;
  background: #fcede3;
  color: var(--ink);
}

.books-stories-feature .books-stories-media {
  flex: 0 0 27.3%;
}

.books-stories-feature .books-stories-media > img {
  height: 100%;
  object-fit: cover;
}

.books-stories-feature-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
}

.books-stories-feature blockquote {
  font-size: 34px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
}

.books-stories .books-stories-feature-credit {
  font-size: 14px;
  line-height: 22px;
}

.books-stories-moments {
  display: grid;
  grid-template-columns: 320fr 360fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .books-stories h2 {
    font-size: 40px;
    line-height: 44px;
  }

  .books-stories-collage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .books-stories {
    gap: 32px;
    padding-block: 48px;
  }

  .books-stories h2 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px;
  }

  .books-stories-moments {
    grid-template-columns: 1fr;
  }

  .books-stories-feature .books-stories-media {
    flex-basis: 40%;
  }

  .books-stories-feature-copy {
    padding: 20px;
  }

  .books-stories-feature blockquote {
    font-size: 22px;
    line-height: 30px;
  }
}

.books-faq {
  padding: 56px 0;
  color: var(--ink);
  /* lands below the sticky header when a link jumps to #faq */
  scroll-margin-top: 76px;
}

.books-faq-intro {
  padding-bottom: 20px;
}

.books-faq h2 {
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.96px;
}

.books-faq-item {
  padding-block: 26px;
  border-top: 1px solid #d9d5ca;
}

.books-faq-item:last-child {
  border-bottom: 1px solid #d9d5ca;
}

.books-faq-item summary {
  display: flex;
  align-items: flex-start;
  list-style: none;
  cursor: pointer;
}

.books-faq-item summary::-webkit-details-marker {
  display: none;
}

.books-faq-number {
  flex: 0 0 74px;
  margin-right: 24px;
  color: #66635d;
  font-size: 24px;
  line-height: 36px;
}

.books-faq-item[open] .books-faq-number {
  color: var(--ink);
}

.books-faq-question {
  flex: 1;
  font-size: 26px;
  font-weight: 500;
  line-height: 36px;
}

.books-faq-item summary img {
  flex: none;
  margin: 6px 0 0 40px;
}

.books-faq-item[open] .books-faq-expand,
.books-faq-item:not([open]) .books-faq-collapse {
  display: none;
}

.books-faq-answer {
  max-width: 858px;
  padding: 16px 0 0 98px;
  color: #66635d;
  font-size: 20px;
  line-height: 30px;
}

.books-faq-answer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .books-faq {
    padding-inline: 0;
  }

  .books-faq-number {
    flex-basis: 64px;
  }

  .books-faq-number {
    margin-right: 24px;
  }

  .books-faq-answer {
    padding-left: 88px;
  }
}

@media (max-width: 680px) {
  .books-faq {
    padding-block: 48px;
  }

  .books-faq-intro {
    padding-bottom: 32px;
  }

  .books-faq h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  .books-faq-item {
    padding-block: 20px;
  }

  .books-faq-number {
    flex-basis: 36px;
    margin-right: 12px;
    font-size: 18px;
    line-height: 28px;
  }

  .books-faq-question {
    font-size: 20px;
    line-height: 28px;
  }

  .books-faq-item summary img {
    margin: 2px 0 0 16px;
  }

  .books-faq-answer {
    padding: 12px 0 0 48px;
    font-size: 17px;
    line-height: 26px;
  }
}

.books-closing {
  padding-block: 64px;
}

.books-closing-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  min-height: 289px;
  padding: 64px;
  border-radius: 40px;
  background: var(--orange-50);
  color: #fff;
}

.books-closing-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.books-closing h2 {
  font-size: 64px;
  font-weight: 600;
  line-height: 70px;
  letter-spacing: -1.8px;
}

.books-closing-copy p {
  font-size: 20px;
  line-height: 30px;
}

.books-closing-button {
  min-width: 194px;
  background: #fff;
  color: var(--ink);
}

.books-closing-button:hover {
  background: var(--surface-tertiary);
}

@media (max-width: 900px) {
  .books-closing-band {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 48px;
  }

  .books-closing h2 {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -1.4px;
  }
}

@media (max-width: 680px) {
  .books-closing {
    padding-block: 48px;
  }

  .books-closing-band {
    padding: 32px 24px;
    border-radius: 28px;
  }

  .books-closing h2 {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }

  .books-closing-copy {
    gap: 16px;
  }

  .books-closing-copy p {
    font-size: 17px;
    line-height: 26px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .books-hero-copy > * {
    animation: landing-rise 1.3s cubic-bezier(.33, 1, .68, 1) both;
  }

  .books-hero-copy > * + * {
    animation-delay: .15s;
  }

  @keyframes books-float {
    to { translate: 0 var(--float); }
  }

  .books-hero-float {
    --float: -10px;
    animation: landing-rise 1.3s cubic-bezier(.33, 1, .68, 1) .3s both, books-float 6s ease-in-out infinite alternate;
  }

  .books-video .books-hero-video {
    animation: landing-rise 1.3s cubic-bezier(.33, 1, .68, 1) .3s both;
  }

  .books-hero-reading {
    --float: 8px;
    animation-duration: 1.3s, 7s;
    animation-delay: .45s, 0s;
  }

  .books-hero-review {
    --float: -14px;
    animation-duration: 1.3s, 8s;
    animation-delay: .6s, 0s;
  }

  @keyframes books-bar-cover {
    from { transform: none; }
  }

  .books-hero-snapshot i {
    animation: books-bar-cover .9s cubic-bezier(.33, 1, .68, 1) both;
    animation-delay: calc(1.1s + var(--i) * 90ms);
  }

  .books-catalog-covers {
    animation-play-state: running;
  }

  .landing-js .books-tracking-art mark {
    background-size: 0 100%;
    transition: background-size 1.8s cubic-bezier(.65, 0, .35, 1) .3s;
  }

  .landing-js .books-tracking-art mark[data-shown] {
    background-size: 100% 100%;
  }

  .books-together-art[data-shown] .books-cover {
    animation: books-bar-cover .9s cubic-bezier(.33, 1, .68, 1) both;
    animation-delay: calc(.4s + var(--i, 0) * 90ms);
  }

  /* each gallery slide's covers lift and its scan runs every time the slide comes up */
  .books-gallery[data-shown] [data-active] .books-cover {
    animation: books-bar-cover .9s cubic-bezier(.33, 1, .68, 1) both;
    animation-delay: calc(.25s + var(--i, 0) * 70ms);
  }

  .books-gallery[data-shown] [data-active] .books-gallery-stages {
    animation-duration: 1.6s;
  }

  .books-gallery .books-scan {
    display: block;
    position: absolute;
    overflow: hidden;
    border-radius: 12px;
    pointer-events: none;
  }

  .books-scan::after {
    content: '';
    position: absolute;
    top: -3%;
    left: 0;
    right: 0;
    height: 2px;
    background: #ff6a00;
    box-shadow: 0 0 12px 3px rgb(255 106 0 / .45);
    opacity: 0;
  }

  .books-gallery[data-shown] [data-active] .books-scan::after {
    animation: books-scan 1.8s cubic-bezier(.45, 0, .2, 1) .3s both;
  }

  @keyframes books-scan {
    0% { top: -3%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 101%; opacity: 0; }
  }

  .books-together-art[data-shown] .books-together-note {
    animation: books-rise-in .9s cubic-bezier(.22, 1, .36, 1) .15s both;
  }

  @keyframes books-rise-in {
    from { opacity: 0; translate: 0 2.4cqw; }
  }

  .books-together-art[data-shown] .books-together-sessions {
    animation: books-fade-in .45s ease .3s both;
  }

  .books-together-art[data-shown] .books-together-fernando {
    animation: books-fernando-unstack 1.1s cubic-bezier(.22, 1, .36, 1) .75s both;
  }

  .books-together-art[data-shown] .books-together-artem {
    animation: books-artem-unstack 1.1s cubic-bezier(.22, 1, .36, 1) .75s both;
  }

  @keyframes books-fade-in {
    from { opacity: 0; }
  }

  /* both start with their tops level, Fernando's narrower card hidden behind Artem's */
  @keyframes books-fernando-unstack {
    from { translate: 0 7.35cqw; scale: .97; }
  }

  @keyframes books-artem-unstack {
    from { translate: 0 -7cqw; }
  }

  .books-together-art[data-shown] .books-together-avatar {
    animation: books-avatar-pop .7s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(1.35s + var(--i) * 120ms);
  }

  @keyframes books-avatar-pop {
    0% { opacity: 0; translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); scale: .5; }
    30% { opacity: 1; }
  }

  .books-together-art[data-shown] .books-together-more {
    animation: books-more-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.8s both;
  }

  @keyframes books-more-pop {
    from { opacity: 0; scale: .5; }
  }

  .books-eq {
    display: flex;
    position: absolute;
    top: 4.07px;
    left: 4.07px;
    width: 17.91px;
    height: 17.91px;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
  }

  .books-eq i {
    width: 9.1%;
    height: 100%;
    border-radius: 999px;
    background: currentColor;
    transform: scaleY(var(--h));
  }

  .books-voices[data-playing] .books-eq i {
    animation: books-eq .55s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -90ms);
  }

  @keyframes books-eq {
    to { transform: scaleY(var(--peak)); }
  }

  /* nudges the play button until the sample has been played once */
  .books-feature[data-shown] .books-voices:not([data-played]) .books-voices-play {
    animation: books-play-nudge 1.6s ease-in-out 1.2s infinite;
  }

  @keyframes books-play-nudge {
    30% { scale: 1.2; }
    60%, to { scale: 1; }
  }

  @keyframes books-blink {
    to { visibility: hidden; }
  }

  .books-mcp-caret {
    animation: books-blink 1s steps(2, start) infinite;
  }

  /* the sheet starts squared up on the page, then slides off to the side and tilts into place */
  .landing-js .books-feature[data-shown] .books-reading-sheet {
    animation: books-sheet-tilt 1.1s cubic-bezier(.22, 1, .36, 1) .35s both;
  }

  @keyframes books-sheet-tilt {
    from { translate: -22cqw 3cqw; rotate: -15deg; }
  }

  .landing-js .books-feature[data-shown] :is(.books-ereaders-device, .books-epubs-row, .books-voices-player, .books-ecosystem-highlight) {
    animation: books-rise-in .9s cubic-bezier(.22, 1, .36, 1) .15s both;
  }

  /* the cover starts tucked behind the e-reader */
  .landing-js .books-feature[data-shown] .books-ereaders-book {
    animation: books-cover-out 1.2s cubic-bezier(.22, 1, .36, 1) .55s both;
  }

  @keyframes books-cover-out {
    from { translate: 24cqw 1cqw; rotate: 6deg; }
  }

  /* the upload sheet slides out from under its row */
  .landing-js .books-feature[data-shown] .books-epubs-upload {
    animation: books-drop-out 1s cubic-bezier(.22, 1, .36, 1) .5s both;
  }

  @keyframes books-drop-out {
    from { opacity: 0; translate: 0 -9cqw; }
  }

  .landing-js .books-feature[data-shown] .books-voices-page {
    animation: books-drop-in .9s cubic-bezier(.22, 1, .36, 1) .3s both;
  }

  @keyframes books-drop-in {
    from { opacity: 0; translate: 0 -2.4cqw; }
  }

  .landing-js .books-feature[data-shown] .books-ecosystem-logo {
    animation: books-more-pop .6s cubic-bezier(.34, 1.56, .64, 1) .45s both;
  }

  .landing-js .books-feature[data-shown] .books-ecosystem-reader {
    animation-delay: .55s;
  }

  .landing-js .books-feature[data-shown] .books-link-draw {
    animation: books-link-draw .7s ease-in-out .8s both;
  }

  .landing-js .books-feature[data-shown] .books-ecosystem-point {
    animation: books-more-pop .4s cubic-bezier(.34, 1.56, .64, 1) 1.4s both;
  }

  @keyframes books-link-draw {
    from { stroke-dashoffset: 1; }
  }

  .landing-js .books-feature[data-shown] .books-ecosystem-strategy {
    animation: books-more-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.35s both;
  }

  .landing-js .books-feature[data-shown] .books-ecosystem-psychology {
    animation: books-more-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.5s both;
  }

  .books-feature:nth-child(3n + 2) {
    transition-delay: .12s;
  }

  .books-feature:nth-child(3n) {
    transition-delay: .24s;
  }

  /* tiles reveal in turn; the hover lift uses translate so it never waits on the reveal delay */
  .books-stories .books-stories-link {
    transition: opacity .6s ease, transform .9s cubic-bezier(.33, 1, .68, 1), translate .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
    transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s, 0s;
  }

  .books-stories-link:hover {
    translate: 0 -6px;
    box-shadow: 0 18px 30px -16px rgb(42 40 34 / 0.35);
  }

  .books-stories-media > img,
  .books-stories-play,
  .books-stories-arrow {
    transition: scale .5s cubic-bezier(.33, 1, .68, 1), translate .35s ease;
  }

  .books-stories-link:hover .books-stories-media > img {
    scale: 1.04;
  }

  .books-stories-link:hover .books-stories-play {
    scale: 1.15;
  }

  .books-stories-link:hover .books-stories-arrow {
    translate: 2px -2px;
  }
}

html:has(.books-dialog[open]) {
  overflow: hidden;
}

/* early-access modal, Figma "Books / Early access modals" 2009:22025 */
.books-dialog {
  --books-text-secondary: #68665f;
  --books-accent: #ff6900;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--books-radius-card);
  background: #fff;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
  box-shadow: 0 12px 24px #4a2b0d24;
  overflow-y: auto;
}

.books-dialog::backdrop {
  background: rgb(0 0 0 / .4);
}

.books-dialog [hidden] {
  display: none;
}

.books-dialog:focus-visible {
  outline: none;
}

.books-dialog-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 144px;
  background: var(--surface-primary);
  overflow: hidden;
}

.books-dialog-room {
  position: absolute;
  top: -38px;
  left: 0;
  width: 100%;
  height: 265px;
  object-fit: cover;
  opacity: .16;
}

/* the close form must not take a grid row, or the icon stops being centred */
.books-dialog-art form {
  display: contents;
}

.books-dialog-icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(#0b4f4a, #022f2e 92%);
  overflow: hidden;
}

.books-dialog-icon img {
  display: block;
}

.books-dialog-check {
  position: absolute;
  top: 28px;
  left: calc(50% + 20px);
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: var(--books-radius-control);
  background: #014a2f;
}

.books-dialog[data-step=waitlisted] .books-dialog-check {
  display: grid;
}

.books-dialog-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--books-radius-control);
  background: #fff;
  cursor: pointer;
}

.books-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

.books-dialog-intro h2 {
  margin: 0 0 12px;
  font: 600 32px/40px 'Plus Jakarta Sans', sans-serif;
}

.books-dialog-intro p {
  margin: 0;
  color: var(--books-text-secondary);
  font-size: 16px;
  line-height: 24px;
}

.books-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.books-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}

.books-dialog-form input {
  height: 52px;
  padding: 0 16px;
  border: 1px solid #dedbd0;
  border-radius: 12px;
  color: var(--ink);
  font: 400 14px/22px 'Plus Jakarta Sans', sans-serif;
}

/* iOS zooms the page into any focused field under 16px */
@media (pointer: coarse) {
  .books-dialog-form input {
    font-size: 16px;
  }
}

.books-dialog-form input::placeholder {
  color: var(--books-text-secondary);
}

.books-dialog-error {
  margin: 0;
  color: #c4320a;
  font-size: 14px;
  line-height: 22px;
}

.books-dialog-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  border: 0;
  border-radius: 48px;
  background: var(--books-accent);
  color: #fff;
  font: 600 16px/20px 'Plus Jakarta Sans', sans-serif;
  font-feature-settings: 'case';
  text-decoration: none;
  cursor: pointer;
}

.books-dialog-button:disabled {
  opacity: .6;
  cursor: progress;
}

.books-dialog-invite {
  padding: 16px;
  border-radius: 12px;
  background: var(--surface-primary);
}

.books-dialog-invite p {
  margin: 0;
  color: var(--books-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

.books-dialog-invite p:first-child {
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}

.books-dialog-invite a {
  color: var(--ink);
  text-decoration: underline;
}

/* nav catalog search, the store's dropdown restyled; box measured from Figma, rows from the store's own CSS */
.books-search {
  position: relative;
  display: flex;
  flex: 0 1 330px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 42px;
  margin-left: auto;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 36px;
  background: var(--surface-elevated);
  box-shadow: 0 1px 2px #00000014;
  text-align: left;
  transition: flex-basis 0.25s ease;
}

.books-search:focus-within {
  border-color: var(--border-primary);
}

/* grows to the dropdown's width while it is open or there is a query, so the results hang straight under the box; with no dropdown to open, focus alone grows it */
.books-search:has(input[type=search]:not(:placeholder-shown)),
.books-search:has(.books-search-results:not([hidden])),
.books-search:not([data-endpoint]):focus-within {
  flex-basis: 480px;
}

@media (prefers-reduced-motion: reduce) {
  .books-search {
    transition: none;
  }
}

.books-search-bar {
  display: contents;
}

.books-search-bar ~ .landing-button {
  margin-left: 0;
  white-space: nowrap;
}

.books-search-open, .books-search-cancel {
  display: none;
}

.books-search input[type=search] {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  font: 400 16px/22px var(--font-sans);
  color: var(--text-primary);
}

.books-search input[type=search]:focus {
  outline: none;
}

.books-search input::-webkit-search-cancel-button {
  appearance: none;
}

.books-search-clear {
  display: flex;
  flex-shrink: 0;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  visibility: hidden;
}

.books-search:focus-within .books-search-clear {
  visibility: visible;
}

.books-search input::placeholder {
  color: rgb(166 164 160 / 0.85);
}

.books-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: -1px;
  right: -1px;
  max-height: min(684px, 80vh);
  overflow-y: auto;
  padding: 12px;
  border-radius: 20px;
  background: var(--surface-elevated);
  box-shadow: 0 0 0 1px #0000001a, 0 1px 1px -0.5px #0000001a, 0 3px 3px -1.5px #0000001a, 0 6px 6px -3px #0000001a, 0 12px 12px -6px #0000001a, 0 24px 24px -12px #0000001a;
  font: 400 14px/20px var(--font-sans);
}

.books-search-results ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.books-search-results li[role=option] {
  border-radius: 8px;
  transition: background-color 0.1s;
}

.books-search-results li[data-navigated] {
  background: var(--surface-secondary);
}

.books-search-results li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  color: var(--text-primary);
}

.books-search-cover {
  flex-shrink: 0;
  display: flex;
  height: 88px;
  border-radius: 4px;
  background: var(--surface-tertiary) url("../images/books/search-print.4fe087d386ed.svg") center / 40% no-repeat;
  box-shadow: 0 1px 1px -0.5px #0000001a, 0 3px 3px -1.5px #0000001a, 0 6px 6px -3px #0000001a;
}

.books-search-cover:empty {
  aspect-ratio: 2 / 3;
}

.books-search-cover img {
  height: 100%;
  width: auto;
  border-radius: inherit;
}

.books-search-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.books-search-title {
  font: 600 18px/1.25 var(--font-sans);
}

.books-search-title, .books-search-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.books-search-subtitle {
  color: var(--text-secondary);
}

.books-search-subtitle:empty {
  display: none;
}

.books-search-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.books-search-byline {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.books-search-formats {
  display: flex;
  align-items: center;
  gap: 2px;
}

.books-search-formats:has(img)::before {
  content: '\2022';
}

.books-search-heading {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  font: 500 16px/20px var(--font-sans);
  color: var(--text-primary);
}

.books-search-heading:not(:first-child) {
  margin-top: 12px;
}

.books-search-results li button {
  width: 100%;
  padding: 4px 8px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

.books-search-more {
  text-align: center;
}

.books-search-more a {
  justify-content: center;
  padding: 14px;
  font-weight: 500;
  color: var(--interactive-text);
}

.books-search-more[data-navigated] a {
  text-decoration: underline;
}

.books-search-empty {
  padding: 8px;
  text-align: center;
  color: var(--text-secondary);
}

.books-search-empty strong {
  display: block;
  font-size: 16px;
  color: var(--text-primary);
}

/* no room beside the tabs on narrow screens, so an icon swaps the tabs for the box, with Cancel to swap them back */
@media (max-width: 899px) {
  .books-search-open {
    display: flex;
    flex-shrink: 0;
    margin-left: auto;
    padding: 6px;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .books-search {
    display: none;
    flex: 1 1 auto;
  }

  .books-search[data-open] {
    display: flex;
  }

  .landing-header:has(.books-search[data-open]) :is(.landing-products, .books-search-open) {
    display: none;
  }

  .books-search-bar:has([data-open]) {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .books-search[data-open] + .books-search-cancel {
    display: block;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: 500 15px/20px var(--font-sans);
    color: var(--interactive-text);
    cursor: pointer;
  }
}

/* phones: the cards grow inside their frames, which keep the design's gutters; the hero's spill into its card padding */
@media (max-width: 680px) {
  .books-hero-art {
    margin-block: 6%;
    scale: 1.15;
  }

  .books-feature-art .books-layers {
    scale: 1.12;
  }
}

/* at the top there is nothing under the header to blur, only the window edge to smudge */
.books .landing-header:not([data-scrolled])::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* phones get the Figma two-row header: brand and account above, the product tabs and search below */
@media (max-width: 680px) {
  .books-faq {
    scroll-margin-top: 116px;
  }

  .books .landing-header {
    display: grid;
    grid-template: "brand account" 44px "products search" 40px / 1fr auto;
    gap: 8px 12px;
    align-items: center;
    height: auto;
    padding: 12px var(--gutter);
  }

  .books .landing-logo {
    display: flex;
    grid-area: brand;
    justify-self: start;
    gap: 12px;
    width: auto;
    height: 40px;
  }

  .books .landing-logo img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .books .landing-logo span {
    display: inline;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.4px;
  }

  .books .landing-header .landing-button {
    grid-area: account;
    min-width: 112px;
    min-height: 44px;
    margin-left: 0;
    padding: 0 24px;
    font-size: 15px;
  }

  /* min-width: 0 so the tab row cannot widen the column the account button shares */
  .books .landing-products {
    grid-area: products;
    align-self: stretch;
    gap: 20px;
    min-width: 0;
    margin-top: 0;
  }

  .books .landing-products a {
    position: relative;
    min-width: 0;
    padding: 0;
    border-top: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    opacity: 0.4;
  }

  .books .landing-products a[aria-current] {
    font-weight: 600;
    opacity: 1;
  }

  .books .landing-products a[aria-current]::after {
    content: '';
    position: absolute;
    inset: auto 0 1px;
    height: 2px;
    background: var(--text-primary);
  }

  .books-search-open {
    grid-area: search;
    justify-self: end;
    margin-left: 0;
    padding: 0;
  }

  .books-search-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .books-search {
    margin-left: 0;
  }

  /* the box sits in the header's second row, so the results start 113px down */
  .books-search-results {
    max-height: calc(100vh - 129px);
    max-height: calc(100dvh - 129px);
  }
}

@media (max-width: 359px) {
  .books .landing-products {
    gap: 12px;
  }
}