@font-face {
  font-family: 'Albert Sans';
  font-weight: 400 600;
  font-display: block;
  src: url("../fonts/landing2-albert-sans.2306d6918134.woff2") format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-weight: 600;
  font-display: block;
  src: url("../fonts/landing2-serif.0038c752c3c7.woff2") format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/landing2-serif-italic.616339a3db67.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-weight: 400 600;
  font-display: block;
  src: url("../fonts/landing2-inter.c6c0b8687416.woff2") format('woff2');
}

/* fallbacks sized to the web fonts so text does not shift when they swap in */
@font-face {
  font-family: 'Albert Sans Fallback';
  src: local('Arial');
  size-adjust: 103.91%;
  ascent-override: 91.42%;
  descent-override: 24.06%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  size-adjust: 101.44%;
  ascent-override: 102.13%;
  descent-override: 33.02%;
  line-gap-override: 0%;
}

/* Figma variables from Marketing Pages (MJQulcGpKqwjqmlGnNgbhD) */
.landing {
  --surface-primary: #fbf9f3;
  --surface-inverse: #161616;
  --text-primary: #333;
  --text-secondary: #7b7a79;
  --border-primary: #dbd7cd;
  --border-subtle: #f5f1e8;
  --surface-elevated: #fff;
  --twitter-blue: #1d9bf0;
  --text-inverse: #fff;
  --orange-50: #ff6900;
  --button-neutral: #e8e6e1;
  --interactive-text: #2675de;
  --highlight-mark: rgb(247 220 31 / 0.6);
  --highlight-mark-soft: rgb(247 220 31 / 0.4);
  --font-sans: 'Albert Sans', 'Albert Sans Fallback', sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback', serif;
  --text-lg-semibold: 600 16px/22px var(--font-sans);
  --text-xl: 400 20px/28px var(--font-sans);
  --text-xl-semibold: 600 20px/28px var(--font-sans);
  --text-2xl: 400 22px/28px var(--font-sans);
  --text-2xl-semibold: 600 22px/28px var(--font-sans);
  --gutter: 48px;
  --page: 1440px;
  --content: 1200px;
  --section-pad: 64px;
  margin: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  font: 400 16px/22px var(--font-sans);
  font-optical-sizing: auto;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.landing * {
  box-sizing: border-box;
}

.landing :is(h1, h2, h3, p) {
  margin: 0;
  text-wrap: pretty;
}

.landing img {
  max-width: 100%;
  height: auto;
}

:where(.landing a) {
  color: inherit;
  text-decoration: none;
}

.landing :focus-visible {
  outline: 3px solid var(--orange-50);
  outline-offset: 4px;
}

.landing :is(h1, h2, h3) {
  font-family: var(--font-serif);
  font-weight: 600;
}

.landing h1 {
  font-size: 54px;
  line-height: 100%;
  letter-spacing: -2px;
}

.landing h2 {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -1px;
}

.landing h3 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.4px;
}

/* a heading and its paragraph, spaced by --copy-gap instead of margins */
.landing-copy {
  display: flex;
  flex-direction: column;
  gap: var(--copy-gap, 16px);
}

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

.landing-skip:focus {
  display: block;
  padding: 12px;
}

.landing-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 9px 20px;
  border: 0;
  border-radius: 40px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font: var(--text-lg-semibold);
}

.landing-button:hover {
  background: var(--text-primary);
}

.landing-button-neutral {
  background: var(--button-neutral);
  color: var(--text-primary);
}

.landing-button-neutral:hover {
  background: var(--border-primary);
}

/* header items sit 4px below centre in Figma; the active underline still touches the top edge */
.landing-header {
  --header-lift: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
  max-width: var(--page);
  margin: auto;
  padding: var(--header-lift) var(--gutter) 0;
}

/* full-bleed glass backdrop, like Reader's navbar; covers the band edges beyond --page while stuck */
.landing-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  margin-inline: calc(50% - 50vw);
  transition: background-color 0.5s ease;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.landing-header[data-scrolled]::before {
  background: rgb(251 249 243 / 0.34);
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  font: var(--text-xl-semibold);
}

.landing-logo span {
  display: none;
}

.landing-logo img, .landing-footer-logo img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.landing-products {
  display: flex;
  align-self: stretch;
  gap: 16px;
  margin-top: calc(-1 * var(--header-lift));
}

.landing-products a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: var(--header-lift) 4px 0;
  border-top: 2px solid transparent;
  font-weight: 600;
}

.landing-products a[aria-current] {
  border-top-color: var(--text-primary);
}

.landing-header .landing-button {
  min-width: 120px;
  margin-left: auto;
}

.landing-main {
  max-width: var(--page);
  margin: auto;
  padding: 8px var(--gutter) 0;
}

.landing-section {
  max-width: var(--content);
  margin: auto;
  padding: var(--section-pad) 0;
}

/* one Figma pixel of the 1344px hero frame, scaled to the container width */
.landing-hero {
  position: relative;
  container-type: inline-size;
  --figma-px: min(1px, calc(100cqw / 1344));
}

.landing-hero-art {
  position: relative;
  overflow: hidden;
  border-radius: calc(32 * var(--figma-px));
  background: var(--surface-primary);
  /* fade the bottom edge into the page */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 8px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 8px), transparent);
}

.landing-hero-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma's Top Fade, drawn over the cards like the design */
.landing-hero-art::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 35.14%;
  background: linear-gradient(rgb(251 249 243 / .6) 5.7%, rgb(251 249 243 / .3) 46.8%, rgb(251 249 243 / 0) 72.4%);
}

.landing-hero-cards, .landing-cta-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  --card-w: calc(360 * var(--figma-px));
  --lane-gap: calc(120 * var(--figma-px));
}

.landing-hero-cards {
  --hero-card-path: shape(from 117% 94%,
    curve to 83% 64% with 105% 78% / 96% 68%,
    curve to 34% 40% with 70% 60% / 45% 46%,
    curve to 6% 21% with 23% 34% / 9% 30%,
    curve to -18% -7% with 3% 12% / -6% 3%);
  /* Figma masks the whole column, so cards read as glass that firms up toward the bottom-right */
  --hero-card-fade: linear-gradient(135deg, rgb(0 0 0 / .36) 12%, rgb(0 0 0 / .46) 48%, rgb(0 0 0 / .56) 100%);
  -webkit-mask-image: var(--hero-card-fade);
  mask-image: var(--hero-card-fade);
}

.landing-hero-fade {
  position: absolute;
  top: 59.5%;
  left: 0;
  z-index: 3;
  width: 100%;
  height: auto;
}

.landing-lane {
  position: absolute;
  width: var(--card-w);
}

.landing-hero-cards .hl-card {
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  transform: translate(-50%, -50%) rotate(var(--card-angle)) skewX(12deg) scaleY(var(--card-scale, .82));
}

/* Static positions also keep the composition intact in browsers without shape() support. */
.landing-hero-cards .hl-card:nth-child(1) { --card-step: 0; --card-x: 117%; --card-y: 94%; --card-angle: -48deg; }
.landing-hero-cards .hl-card:nth-child(2) { --card-step: 1; --card-x: 105%; --card-y: 79%; --card-angle: -48deg; }
.landing-hero-cards .hl-card:nth-child(3) { --card-step: 2; --card-x: 88%; --card-y: 69%; --card-angle: -48deg; }
.landing-hero-cards .hl-card:nth-child(4) { --card-step: 3; --card-x: 71%; --card-y: 60%; --card-angle: -40deg; }
.landing-hero-cards .hl-card:nth-child(5) { --card-step: 4; --card-x: 53%; --card-y: 54%; --card-angle: -32deg; }
.landing-hero-cards .hl-card:nth-child(6) { --card-step: 5; --card-x: 34%; --card-y: 46%; --card-angle: -22deg; }
.landing-hero-cards .hl-card:nth-child(7) { --card-step: 6; --card-x: 17%; --card-y: 36%; --card-angle: -14deg; --card-scale: .5; }
.landing-hero-cards .hl-card:nth-child(8) { --card-step: 7; --card-x: 6%; --card-y: 19%; --card-angle: -8deg; }
.landing-hero-cards .hl-card:nth-child(9) { --card-step: 8; --card-x: -4%; --card-y: 3%; --card-angle: -18deg; }

@supports (offset-path: shape(from 0% 0%, line to 100% 100%)) {
  .landing-hero-cards .hl-card {
    left: 0;
    top: 0;
    /* Endpoints sit beyond the clipped hero so each card wraps out of sight. */
    offset-path: var(--hero-card-path);
    offset-distance: calc(var(--card-step) * 100% / 9);
    offset-rotate: 0deg;
    offset-anchor: center;
    transform: rotate(var(--card-angle)) skewX(12deg) scaleY(var(--card-scale, .82));
  }
}

.landing-lane-track {
  display: flex;
  flex-direction: column;
}

.landing-lane-track > * {
  flex: none;
  margin-bottom: var(--lane-gap);
}

.landing-cta-grid {
  position: absolute;
  top: -16%;
  left: 87%;
  transform-origin: 0 0;
  transform: rotate(16deg) skewX(-28deg);
}

.landing-cta-grid .landing-lane:nth-child(2) {
  left: calc(var(--card-w) + var(--lane-gap));
}

.landing-cta-grid .landing-lane:nth-child(3) {
  left: calc(2 * (var(--card-w) + var(--lane-gap)));
}

.hl-card {
  --u: calc(var(--card-w) / 376);
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  box-sizing: border-box;
  width: var(--card-w);
  padding-top: calc(16 * var(--u));
  border: 1px solid var(--border-primary);
  border-radius: calc(16 * var(--u));
  background: var(--surface-elevated);
  box-shadow: 0 3px 5px rgb(0 0 0 / .1), 0 6px 24px rgb(0 0 0 / .15);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-align: left;
}

.hl-card p {
  margin: 0;
}

.hl-card header {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(8 * var(--u));
}

.hl-card header div {
  flex: 1;
  min-width: 0;
}

.hl-card-cover {
  flex: none;
  width: calc(27 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(4 * var(--u)) calc(10.5 * var(--u));
  border-radius: 1px;
  object-fit: cover;
  box-shadow: 0 .6px .6px rgb(0 0 0 / .1), inset 1.5px 0 1px rgb(255 255 255 / .35);
}

.hl-card-avatar {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  margin: calc(9 * var(--u));
  border-radius: calc(3 * var(--u));
  box-shadow: none;
}

.hl-card-title {
  overflow: hidden;
  font: 600 calc(15 * var(--u)) / calc(20 * var(--u)) var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-card-author {
  color: var(--text-secondary);
  font: 500 calc(12 * var(--u)) / calc(16 * var(--u)) var(--font-sans);
}

.hl-card-more {
  flex: none;
  width: calc(32 * var(--u));
  color: var(--text-secondary);
  font-size: calc(16 * var(--u));
  letter-spacing: -.1em;
  text-align: center;
}

.hl-card-quote {
  padding: 0 calc(16 * var(--u));
  font: 600 calc(12 * var(--u)) / calc(17 * var(--u)) var(--font-serif);
}

.hl-card footer {
  display: flex;
  justify-content: space-between;
  padding: calc(4 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u));
}

.hl-card footer img {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

/* the Screens node exported from Figma with its own alpha; the box is its offset in the 2688x2800 frame */
.landing-hero-screens {
  position: absolute;
  top: 20.286%;
  left: 12.016%;
  z-index: 4;
  width: 87.984%;
  height: auto;
}

/* sits on the iPad's book rows in the screen's own cream, and wipes off left to right on load */
.landing-hero-veil {
  position: absolute;
  top: 20.286%;
  left: 12.016%;
  z-index: 5;
  width: 87.984%;
  aspect-ratio: 2365 / 1964;
  pointer-events: none;
}

/* without mask support the veil would never wipe off, so leave the still image alone */
@supports (mask-image: linear-gradient(transparent, #000)) {
  .landing-hero-veil::before {
    content: '';
    position: absolute;
    top: 27.6%;
    left: 2.96%;
    width: 59.87%;
    height: 29.2%;
    background: linear-gradient(90deg, #fbfaf3, #faf9f3 52%, #f8f7f2 74%, #f5f3ed 89%, #f4f1ec 97.8%, #ebe8e0 98.5%, #faf7ef 98.8%);
    mask-image: linear-gradient(90deg, transparent 45%, #000 55%);
    mask-size: 250% 100%;
    mask-position: 0 0;
  }
}

.landing-hero-copy {
  position: absolute;
  top: calc(96 * var(--figma-px));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--figma-px));
  text-align: center;
}

.landing-hero-copy .landing-copy {
  --copy-gap: calc(24 * var(--figma-px));
  align-items: center;
}

.landing-hero-copy h1 {
  font-size: calc(64 * var(--figma-px));
  line-height: 1.1;
  letter-spacing: calc(-1.28 * var(--figma-px));
  font-variation-settings: 'opsz' 20;
  text-wrap: wrap;
}

.landing-hero-copy p {
  max-width: calc(431 * var(--figma-px));
  font-size: calc(22 * var(--figma-px));
  line-height: calc(28 * var(--figma-px));
}

.landing-hero-copy mark {
  padding: calc(3 * var(--figma-px)) 0;
  border-radius: 2px;
  background: var(--highlight-mark);
  color: var(--surface-inverse);
  box-decoration-break: clone;
}

.landing-hero-copy .landing-button {
  padding: 10px 24px;
}

.landing-cta .landing-button {
  padding: 10px 16px;
  font-size: 18px;
}

/* the cards sit over the hero's bottom fade; 139 of the hero's 1400 Figma pixels */
.landing-features {
  position: relative;
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  margin-top: -10.34%;
  padding-top: 0;
}

.landing-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px 16px;
  text-align: center;
}

.landing-feature .landing-copy {
  --copy-gap: 4px;
}

.landing-feature img {
  width: 64px;
  height: 64px;
}

.landing-feature h2 {
  font: var(--text-2xl-semibold);
  letter-spacing: 0;
}

.landing-feature p {
  color: var(--text-secondary);
  font: var(--text-xl);
}

.landing-rows {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.landing-row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.landing-row-flipped {
  flex-direction: row-reverse;
}

.landing-row-text {
  flex: 1;
  padding: 32px clamp(24px, 4vw, 50px);
}

/* Figma lifts the flipped row's copy with extra bottom padding */
.landing-row-flipped .landing-row-text {
  padding-bottom: 64px;
}

/* Figma's 40/22px at 1440, scaled down as the half-width columns narrow */
.landing-row-text h2 {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: normal;
  letter-spacing: -0.02em;
}

.landing-row-text p {
  color: var(--text-secondary);
  font: 400 clamp(18px, 1.7vw, 22px)/1.27 var(--font-sans);
}

.landing-row-accent {
  color: var(--interactive-text);
}

.landing-row img {
  display: block;
  flex: 0 1 536px;
  min-width: 0;
  max-width: 50%;
  height: auto;
  border-radius: 24px;
}

.landing-integrations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}

/* Figma's 54px at 1440, scaled down on narrower desktops */
.landing-integrations h2, .landing-testimonials h2, .landing-domore h2, .landing-mcp h2 {
  font-size: clamp(40px, 3.75vw, 54px);
  line-height: normal;
  letter-spacing: -1.08px;
}

.landing-integrations mark, .landing-mcp mark {
  padding: 0 3px;
  border-radius: 2px;
  background: var(--highlight-mark-soft);
  color: var(--surface-inverse);
}

/* Figma tile: 82px, radius 16, inner shadow; --tile scales the whole grid */
.landing-integrations-grid {
  --tile: 82px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--tile) * 16 / 82);
  max-width: calc(var(--tile) * (7 + 16 / 82 * 6));
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * 16 / 82);
  background: var(--border-subtle);
  box-shadow: inset 0 2px 10px rgb(0 0 0 / .1);
}

.landing-tile img {
  width: calc(var(--tile) * var(--glyph) / 82);
  height: auto;
}

.landing-tile-app img {
  border-radius: calc(var(--tile) * 12 / 82);
}

.landing-integrations a {
  color: var(--interactive-text);
  font: var(--text-2xl);
}

/* full-bleed band; the corner strips are page background with rounded ends */
.landing-testimonials {
  --tweet-width: 363px;
  --band-fade: left 0 bottom -200px / 100% 567px;
  --corner-top: 48px;
  --corner-bottom: 44px;
  --corner-radius: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
  margin: 26px calc(50% - 50vw);
  padding: 148px 0 166px;
  overflow: hidden;
  background:
    linear-gradient(rgb(251 249 243 / 0) 6.4%, rgb(251 249 243 / .8) 82.8%) var(--band-fade) no-repeat,
    url("../images/landing2/testimonials-bg.fcda8ea24800.webp") center / cover;
}

.landing-testimonials::before, .landing-testimonials::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid var(--border-primary);
  background: var(--surface-primary);
}

.landing-testimonials::before {
  top: 0;
  height: var(--corner-top);
  border-top: 0;
  border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}

.landing-testimonials::after {
  bottom: 0;
  height: var(--corner-bottom);
  border-bottom: 0;
  border-radius: var(--corner-radius) var(--corner-radius) 0 0;
}

.landing-testimonials-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.landing-testimonials-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgb(255 255 255 / .6);
  font: 500 17px/22px var(--font-sans);
  letter-spacing: -0.1px;
}

.landing-testimonials-rating img {
  width: 136px;
}

.landing-tweets {
  width: 100%;
  /* overflow-x also clips the y axis, so the bottom card keeps its shadow on borrowed padding */
  padding-bottom: 8px;
  margin-bottom: -8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.landing-tweets-track, .landing-tweets-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-tweets-track {
  width: max-content;
}

.landing-tweets-column {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  width: var(--tweet-width);
}

.landing-domore {
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: center;
}

.landing-domore-cards {
  display: flex;
  gap: 16px;
  container-type: inline-size;
  text-align: left;
}

/* the card art has Figma's fade baked in; the background continues it under the text, scaled to the card width */
.landing-domore-card {
  --card-width: calc((100cqw - 32px) / 3);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(#f5f1e8 calc(var(--card-width) * 248 / 389.33), var(--surface-primary) calc(var(--card-width) * 518 / 389.33));
}

.landing-domore-card-flipped {
  flex-direction: column-reverse;
}

.landing-domore-card img {
  display: block;
  width: 100%;
}

.landing-domore-card .landing-copy {
  --copy-gap: 10px;
  padding: 0 40px 40px;
}

.landing-domore-card-flipped .landing-copy {
  padding: 32px 40px 0;
}

.landing-domore-card h3 {
  font: 600 clamp(20px, 1.67vw, 24px)/normal var(--font-sans);
  letter-spacing: 0;
}

.landing-domore-card p {
  color: var(--text-secondary);
  font: 400 clamp(17px, 1.39vw, 20px)/1.25 var(--font-sans);
}

.landing-domore-dots {
  display: none;
}

/* text and items centre against the graphic; the empty 1fr rows do the centring */
.landing-mcp {
  display: grid;
  grid-template-columns: minmax(0, 575fr) minmax(0, 561fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "graphic ." "graphic text" "graphic items" "graphic .";
  column-gap: 64px;
  margin-top: 25px;
}

.landing-mcp-graphic {
  grid-area: graphic;
}

.landing-mcp-graphic img {
  display: block;
  width: 100%;
  border-radius: 24px;
}

.landing-mcp-text {
  --copy-gap: 24px;
  grid-area: text;
}

.landing-mcp h2 {
  color: var(--surface-inverse);
}

.landing-mcp-text p {
  font: 400 clamp(18px, 1.7vw, 22px)/1.27 var(--font-sans);
}

.landing-mcp-items {
  grid-area: items;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}

.landing-mcp-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.landing-mcp-item img {
  flex: none;
  width: 64px;
}

.landing-mcp-item .landing-copy {
  --copy-gap: 4px;
}

.landing-mcp-item h3 {
  font: var(--text-xl-semibold);
  letter-spacing: 0;
}

.landing-mcp-item:hover h3 {
  text-decoration: underline;
}

.landing-mcp-item p {
  color: var(--text-secondary);
  font: 400 clamp(17px, 1.39vw, 20px)/1.4 var(--font-sans);
}

/* same treatment as the hero: art underneath, copy on top */
.landing-cta {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  --figma-px: calc(100cqw / 1344);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  margin: var(--section-pad) 0 48px;
  padding: 160px 128px;
  border-radius: 32px;
  overflow: hidden;
}

.landing-cta picture, .landing-cta-cards {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.landing-cta-cards {
  container-type: inline-size;
  --card-w: calc(260 * var(--figma-px));
  --lane-gap: calc(12 * var(--figma-px));
  --cta-card-fade: linear-gradient(#000 15%, rgb(0 0 0 / .8) 55%, rgb(0 0 0 / .2) 100%);
  opacity: .34;
  -webkit-mask-image: var(--cta-card-fade);
  mask-image: var(--cta-card-fade);
}

.landing-cta-cards .hl-card {
  box-shadow: none;
}

.landing-cta-cards .hl-card-title {
  font-size: calc(18 * var(--u));
}

.landing-cta-cards .hl-card-author {
  font-size: calc(14 * var(--u));
}

.landing-cta-cards .hl-card-quote {
  font-size: calc(19 * var(--u));
  line-height: calc(22 * var(--u));
}

.landing-cta picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-cta h2 {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -1.28px;
  font-variation-settings: 'opsz' 20;
}

.landing-footer {
  display: flex;
  max-width: var(--page);
  margin: auto;
  padding: 0 var(--gutter) 40px;
}

.landing-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 328px;
  min-width: 170px;
  align-self: flex-start;
  font: var(--text-xl-semibold);
}

.landing-footer-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 64px;
  padding-top: 6px;
}

.landing-footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 200px)) 120px;
  gap: 24px;
}

.landing-footer-links > div:not(.landing-footer-stores) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-footer-links h2 {
  font: 600 16px/28px var(--font-sans);
  letter-spacing: 0;
}

.landing-footer-links a {
  color: var(--text-secondary);
  font-weight: 500;
}

.landing-footer-links a:hover {
  color: var(--text-primary);
}

.landing-footer-stores {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landing-footer-stores img {
  display: block;
  width: 120px;
  height: 40px;
  object-fit: contain;
}

.landing-footer-legal {
  color: var(--text-secondary);
  font-weight: 500;
}

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

/* Reader's auth modal, so its colours are its own and not the landing tokens */
.landing-dialog {
  --font-sans: 'Inter', sans-serif;
  font-family: var(--font-sans);
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #28313b;
  box-shadow: 0 2px 10px rgb(0 0 0 / .15);
  overflow-y: auto;
}

.landing-dialog::backdrop {
  background: rgb(0 0 0 / .6);
}

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

/* no padding on the dialog itself, so a click that lands on it can only be the backdrop */
.landing-dialog-body {
  position: relative;
}

/* takes the dialog's initial focus so no button opens with a focus ring */
.landing-dialog-body:focus-visible {
  outline: none;
}

.landing-dialog-top {
  display: flex;
  gap: 20px;
  padding: 24px 32px;
  border-bottom: 1px solid #e0e3e6;
}

.landing-dialog h2 {
  font: 600 16px/20px var(--font-sans);
  letter-spacing: 0;
}

.landing-dialog-top p {
  color: #616c77;
  font-size: 14px;
  line-height: 20px;
}

.landing-dialog-middle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-bottom: 1px solid #e0e3e6;
}

.landing-dialog-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 6px;
  font: 600 16px/20px var(--font-sans);
  cursor: pointer;
}

.landing-dialog-button:disabled {
  opacity: .6;
  cursor: default;
}

.landing-dialog-button-blue {
  background: #376ef2;
  color: #fff;
}

.landing-dialog-button-amazon {
  background: #fbda83;
  color: #000;
}

.landing-dialog-apple {
  height: 40px;
  cursor: pointer;
}

.landing-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 500 14px/20px var(--font-sans);
  text-align: left;
}

.landing-dialog-form input {
  padding: 10px 12px;
  border: 1px solid #c1c7ce;
  border-radius: 6px;
  color: inherit;
  font: 400 14px/15px var(--font-sans);
}

.landing-dialog-form input:focus-visible {
  outline-offset: 0;
}

.landing-dialog-or {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 13px/20px var(--font-sans);
}

.landing-dialog-or::before,
.landing-dialog-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid #e0e3e6;
}

.landing-dialog-reset {
  align-self: center;
  margin-bottom: 16px;
  color: #376ef2;
  font: 500 13px/20px var(--font-sans);
}

.landing-dialog-link {
  display: block;
  color: #376ef2;
  font: 600 15px/20px var(--font-sans);
  text-align: center;
}

.landing-dialog-middle .landing-dialog-link {
  margin-top: 20px;
}

.landing-dialog-link:hover {
  color: #2449ec;
}

.landing-dialog-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: rgb(62 72 83 / .03);
  color: #616c77;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.landing-dialog-bottom p a {
  text-decoration: underline;
}

.landing-dialog-close {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #616c77;
  font: 200 28px/1.4 var(--font-sans);
  cursor: pointer;
}

.landing-dialog-close:hover {
  color: #000;
}

@media (max-width: 1100px) {
  .landing-cta-cards {
    --cta-card-fade: linear-gradient(90deg, transparent 50%, rgb(0 0 0 / .7));
  }

  .landing-footer {
    flex-direction: column;
    gap: 32px;
  }

  .landing-footer-logo {
    flex-basis: auto;
  }

  .landing-footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-footer-stores {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .landing-domore {
    gap: 32px;
  }

  /* the side padding centres a 345px card, or keeps the gutter on narrower phones */
  .landing-domore-cards {
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 max(var(--gutter), calc(50% + var(--gutter) - 172.5px));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .landing-domore-card {
    --card-width: min(345px, 100cqw);
    flex: 0 0 var(--card-width);
    scroll-snap-align: center;
    background: linear-gradient(#f5f1e8 calc(var(--card-width) * 273 / 345), var(--surface-primary) calc(var(--card-width) * 543 / 345));
  }

  /* Figma lets the heading run into the right padding */
  .landing-domore-card h3 {
    margin-right: -20px;
    font-size: 24px;
  }

  .landing-domore-card p {
    font-size: 20px;
  }

  /* 4px under the cards, not the section's 32px gap */
  .landing-domore-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: -28px;
  }

  .landing-domore-dots span {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: var(--text-primary);
    opacity: .3;
    transition: width .2s, opacity .2s;
  }

  .landing-domore-dots [data-active] {
    width: 32px;
    opacity: .8;
  }

  .landing-mcp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "text" "graphic" "items";
    row-gap: 32px;
    justify-items: center;
    text-align: center;
  }

  .landing-mcp-graphic {
    width: 100%;
    max-width: 480px;
  }

  .landing-mcp-items {
    max-width: 480px;
    margin-top: 0;
  }

  .landing-mcp-item {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 16px;
  }

  .landing-mcp-item h3 {
    font: var(--text-2xl-semibold);
  }

  .landing-mcp-item p {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  .landing-row, .landing-row-flipped {
    flex-direction: column-reverse;
    gap: 32px;
  }

  .landing-row-text, .landing-row-flipped .landing-row-text {
    padding: 0;
    text-align: center;
  }

  .landing-row img {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }

  .landing-cta {
    padding: 96px 48px;
  }
}

@media (max-width: 680px) {
  .landing-hero-fade {
    display: none;
  }

  .landing-hero-art::before {
    height: 26.667%;
  }

  .landing-hero-art::after {
    content: '';
    position: absolute;
    inset: 53.125% 0 0;
    z-index: 3;
    background: linear-gradient(transparent 29.5%, var(--surface-primary));
  }

  .landing-hero-screens {
    top: 4.896%;
    left: 0;
    width: 100%;
  }

  .landing-hero-veil {
    display: none;
  }

  .landing-hero-cards {
    --card-w: calc(224 * var(--figma-px));
    --hero-card-fade: linear-gradient(transparent 28%, rgb(0 0 0 / .4) 36%, rgb(0 0 0 / .56) 80%);
    --hero-card-path: shape(from 160% 105%,
      curve to 94% 80% with 120% 92% / 105% 85%,
      curve to 5% 57% with 80% 75% / 25% 65%,
      curve to -12% 43% with -3% 52% / -10% 48%,
      curve to -65% 28% with -12% 36% / -40% 32%);
  }

  .landing-hero-cards .hl-card:nth-child(n + 7) {
    display: none;
  }

  .landing-hero-cards .hl-card {
    offset-distance: calc(var(--card-step) * 100% / 6);
  }

  .landing-hero-cards .hl-card-title {
    font-size: calc(18 * var(--u));
  }

  .landing-hero-cards .hl-card-author {
    font-size: calc(14 * var(--u));
  }

  .landing-hero-cards .hl-card-quote {
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    font-weight: 400;
  }

  .landing-cta-cards {
    --figma-px: calc(100cqw / 393);
    --card-w: calc(236 * var(--figma-px));
    --cta-card-fade: linear-gradient(rgb(0 0 0 / .8), rgb(0 0 0 / .45) 50%, rgb(0 0 0 / .2));
  }

  .landing-cta-grid {
    top: -38%;
    left: 110%;
  }

  .landing {
    --gutter: 24px;
    --section-pad: 48px;
  }

  .landing-header {
    --header-lift: 0px;
    height: 68px;
    padding-left: 10px;
    padding-right: 8px;
  }

  .landing-logo span {
    display: inline;
  }

  .landing-products {
    display: none;
  }

  .landing h1 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .landing-main {
    padding-top: 0;
  }

  .landing-hero {
    --figma-px: calc(100cqw / 393);
    max-width: 480px;
    margin: 0 auto;
  }

  .landing-hero-copy {
    top: calc(64 * var(--figma-px));
    gap: calc(24 * var(--figma-px));
    padding: 0 calc(24 * var(--figma-px));
  }

  .landing-hero-copy .landing-copy {
    --copy-gap: calc(16 * var(--figma-px));
  }

  .landing-hero-copy h1 {
    font-size: calc(40 * var(--figma-px));
    line-height: calc(44 * var(--figma-px));
    letter-spacing: calc(-0.8 * var(--figma-px));
  }

  .landing-hero-copy p {
    max-width: none;
    font-size: calc(17 * var(--figma-px));
    line-height: calc(22 * var(--figma-px));
    letter-spacing: -0.1px;
  }

  .landing-hero-copy mark {
    padding: calc(2 * var(--figma-px)) 0;
  }

  .landing-features {
    flex-direction: column;
    gap: 32px;
    margin-top: 0;
    padding-top: var(--section-pad);
  }

  .landing-feature {
    padding: 16px;
  }

  .landing-rows {
    gap: 48px;
  }

  .landing-row, .landing-row-flipped {
    padding: 16px 0;
  }

  .landing-row-text {
    --copy-gap: 12px;
  }

  .landing-row-text h2 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.56px;
  }

  .landing-row-text p {
    font: var(--text-xl);
  }

  .landing-integrations {
    gap: 32px;
  }

  .landing-integrations h2, .landing-testimonials h2, .landing-domore h2, .landing-mcp h2 {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.6px;
  }

  .landing-integrations-grid {
    --tile: 41px;
    margin-bottom: 8px;
  }

  .landing-integrations a {
    font: var(--text-xl);
  }

  .landing-testimonials {
    --tweet-width: 300px;
    --band-fade: left 0 bottom 0 / 100% 300px;
    --corner-top: 16px;
    --corner-bottom: 16px;
    --corner-radius: 24px;
    gap: 32px;
    margin-block: 0;
    padding: 64px 0 72px;
  }

  .landing-testimonials-heading {
    gap: 32px;
    padding: 0 var(--gutter);
  }

  .landing-testimonials-rating {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
  }

  .landing-testimonials-rating img {
    width: 113px;
  }

  .landing-mcp {
    margin-top: 0;
  }

  .landing-mcp-text {
    --copy-gap: 16px;
  }

  .landing-mcp-text p {
    font: 400 17px/22px var(--font-sans);
    letter-spacing: -0.1px;
  }

  .landing-cta {
    align-items: center;
    gap: 24px;
    margin: 24px 0 0;
    padding: 138px 24px;
    border-radius: 24px;
    text-align: center;
  }

  .landing-cta h2 {
    font-size: 34px;
    line-height: 39px;
    letter-spacing: -0.68px;
  }

  .landing-footer {
    gap: 36px;
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
  }

  .landing-footer-content {
    gap: 36px;
    padding-top: 0;
  }

  .landing-footer-links {
    grid-template-columns: repeat(2, minmax(0, 170px));
    gap: 32px 24px;
  }

  /* 36px below the links, not the 32px gap between link rows */
  .landing-footer-stores {
    flex-direction: column;
    margin-top: 4px;
  }

  .landing-footer-logo {
    gap: 12px;
  }
}

@media (max-width: 528px) {
  .landing-hero {
    max-width: none;
    margin: 0 calc(-1 * var(--gutter));
  }

  .landing-cta {
    margin: 24px calc(-1 * var(--gutter)) 0;
  }
}

/* motion springboard, each block copies a Reader landing pattern for the designer to keep or cut */
@media (prefers-reduced-motion: no-preference) {
  @keyframes landing-rise {
    from { opacity: 0; transform: translateY(24px); }
  }

  @keyframes landing-fade {
    from { opacity: 0; }
  }

  @keyframes landing-float {
    to { transform: translateY(-8px); }
  }

  /* hero entrance: copy rises first, the art fades in behind it */
  .landing-hero-copy > * {
    animation: landing-rise 1.3s cubic-bezier(.33, 1, .68, 1) both;
  }

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

  .landing-hero-art {
    animation: landing-fade 1.3s ease both .3s;
  }

  @keyframes landing-wipe {
    from { mask-position: 100% 0; }
  }

  .landing-hero-veil::before {
    animation: landing-wipe 1.4s ease-in-out both .6s;
  }

  /* each track holds three copies of its cards, so a third of its length is exactly one loop */
  @keyframes landing-lane-up {
    to { transform: translateY(calc(-100% / 3)); }
  }

  @keyframes landing-hero-card-travel {
    from { offset-distance: 0%; transform: rotate(-48deg) skewX(12deg) scaleY(.82) scale(var(--card-render-scale, 1)); }
    22% { transform: rotate(-48deg) skewX(12deg) scaleY(.82) scale(var(--card-render-scale, 1)); }
    44% { transform: rotate(-32deg) skewX(18deg) scaleY(.65) scale(var(--card-render-scale, 1)); }
    65% { transform: rotate(-14deg) skewX(24deg) scaleY(.5) scale(var(--card-render-scale, 1)); }
    78% { transform: rotate(-8deg) skewX(12deg) scaleY(.82) scale(var(--card-render-scale, 1)); }
    88% { transform: rotate(-18deg) skewX(12deg) scaleY(.78) scale(var(--card-render-scale, 1)); }
    to { offset-distance: 100%; transform: rotate(-35deg) skewX(12deg) scaleY(.72) scale(var(--card-render-scale, 1)); }
  }

  @supports (offset-path: shape(from 0% 0%, line to 100% 100%)) {
    .landing-hero-cards .hl-card {
      animation: landing-hero-card-travel 63s linear infinite;
      animation-delay: calc(var(--card-step) * -7s);
    }

    @media (min-width: 901px) and (resolution < 2dppx) {
      .landing-hero-cards .hl-card {
        /* Rasterize small, tilted text at double resolution before compositing it at its original size. */
        --card-render-scale: .5;
        --u: calc(var(--card-w) * 2 / 376);
        width: calc(var(--card-w) * 2);
        border-width: 2px;
        box-shadow: 0 6px 10px rgb(0 0 0 / .1), 0 12px 48px rgb(0 0 0 / .15);
        will-change: transform;
        /* Keep the serif's optical size unchanged when doubling its font size. */
        font-optical-sizing: none;
      }
    }
  }

  @keyframes landing-hero-card-mobile {
    from { offset-distance: 0%; transform: rotate(-48deg) skewX(12deg) scaleY(.82); }
    30% { transform: rotate(-48deg) skewX(12deg) scaleY(.82); }
    55% { transform: rotate(-22deg) skewX(18deg) scaleY(.82); }
    75% { transform: rotate(-16deg) skewX(18deg) scaleY(.82); }
    to { offset-distance: 100%; transform: rotate(-24deg) skewX(12deg) scaleY(.82); }
  }

  @media (max-width: 680px) {
    @supports (offset-path: shape(from 0% 0%, line to 100% 100%)) {
      .landing-hero-cards .hl-card {
        animation-name: landing-hero-card-mobile;
        animation-duration: 60s;
        animation-delay: calc(var(--card-step) * -10s);
      }
    }
  }

  @keyframes landing-lane-down {
    from { transform: translateY(calc(-100% / 3)); }
  }

  .landing-lane-up .landing-lane-track {
    animation: landing-lane-up 60s linear infinite;
    animation-delay: inherit;
  }

  .landing-lane-down .landing-lane-track {
    animation: landing-lane-down 60s linear infinite;
  }

  /* scroll reveal: rises into place the first time it enters the viewport; hidden only once JS can reveal it */
  .landing-js .landing-reveal {
    --reveal-from: translateY(24px);
    opacity: 0;
    transform: var(--reveal-from);
    transition: opacity .6s ease, transform .9s cubic-bezier(.33, 1, .68, 1);
  }

  .landing-reveal[data-shown] {
    opacity: 1;
    transform: none;
  }

  @media (max-width: 1100px) {
    .landing-domore-card.landing-reveal {
      --reveal-from: none;
    }
  }

  .landing-feature:nth-child(2), .landing-domore-card:nth-child(2), .landing-mcp-item:nth-child(2) {
    transition-delay: .12s;
  }

  .landing-feature:nth-child(3), .landing-domore-card:nth-child(3), .landing-mcp-item:nth-child(3) {
    transition-delay: .24s;
  }

  @media (min-width: 901px) {
    .landing-row img.landing-reveal {
      --reveal-from: translate(48px, 24px);
    }

    .landing-row-flipped img.landing-reveal {
      --reveal-from: translate(-48px, 24px);
    }
  }

  /* integration tiles stagger in, then spring up and wiggle on hover */
  .landing-integrations-grid .landing-reveal {
    transition-delay: calc(var(--i) * 40ms);
  }

  .landing-tile {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
  }

  .landing-tile:hover, .landing-tile:focus-visible {
    transform: translateY(-6px) rotate(-4deg) scale(1.08);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / .1), 0 14px 24px -10px rgb(0 0 0 / .3);
  }

  .landing-tile:hover img {
    animation: landing-tile-pop .5s cubic-bezier(.34, 1.56, .64, 1);
  }

  @keyframes landing-tile-pop {
    50% { transform: scale(1.18) rotate(6deg); }
  }

  /* feature icons drift like Reader's ghost */
  .landing-feature img {
    animation: landing-float 4s ease-in-out infinite alternate;
  }

  .landing-feature:nth-child(2) img {
    animation-delay: -1.3s;
  }

  .landing-feature:nth-child(3) img {
    animation-delay: -2.6s;
  }
}