@font-face {
  font-family: 'Lilex';
  src: url("/fonts/Lilex-Bold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lilex';
  src: url("/fonts/Lilex-BoldItalic.ttf") format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --background: var(--color-primary-0);
  --foreground: var(--color-primary-2700);
  --card: var(--color-primary-0);
  --card-foreground: var(--color-primary-2700);
  --muted: var(--color-primary-100);
  --muted-foreground: var(--color-secondary-muted-1500);
  --border: var(--color-primary-200);
  --radius: 0.625rem;
  --tw-border-color: var(--color-primary-200);
  --landing-header-height: 5rem;
}

.border,
.border-b,
.border-t,
.border-l,
.border-r {
  border-color: var(--tw-border-color);
}

body {
  font-family: var(--font-body), sans-serif;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display), serif;
  color: var(--color-primary-1900);

  span {
    font-family: var(--font-display), serif;
  }
}

h1 {
  text-align: center;
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  border-color: var(--border);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  margin-bottom: calc(var(--spacing) * 8);
  --tw-leading: var(--leading-tight);
  line-height: 1.3;
  font-family: var(--font-display), serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-weight: 400;
}

p,
span,
li,
button,
summary {
  font-family: var(--font-body), sans-serif;
}

/* Custom classes for landing page */
.text-foreground {
  color: var(--foreground);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

/* Fills the first screen, but never past 60rem or a 4:3 box, so tall monitors and portrait tablets don't open empty gaps */
.landing-hero {
  min-height: min(calc(100vh - var(--landing-header-height, 5rem)), 60rem, 75vw);
  min-height: min(calc(100svh - var(--landing-header-height, 5rem)), 60rem, 75vw);
}

.hover\:text-foreground:hover {
  color: var(--foreground);
}

.landing-video {
  overflow: hidden;
}

.landing-video__frame {
  transform: scale(1.005);
}

/* Logo lockup (LogoHelper#landing_logo), sized by the word's font size: the lockup is 769/1024 em tall.
   28 px type in the footer and on phones (beside Get Started); 36 px in the header from sm,
   a confident anchor for the 80 px bar that answers the large hero headline */
.lc-landing-logo {
  --lc-logo-type: 1.75rem;
  display: block;
  width: auto;
  height: calc(var(--lc-logo-type) * 769 / 1024);
}

@media (min-width: 640px) {
  .lc-landing-logo--header {
    --lc-logo-type: 2.25rem;
  }
}

/* Hero title specifics */
.hero-title {
  font-family: var(--font-display), serif;
  font-weight: 400;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

/* Utility classes that might be missing */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Backdrop filter support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Transition utilities */
.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

:root {
  --color-primary-0: #fff;
  --color-primary-100: #f8f8f8;
  --color-primary-200: #f9f4ee;
  --color-primary-300: #f9eee1;
  --color-primary-400: #f9e7d2;
  --color-primary-500: #f9dec0;
  --color-primary-600: #f9d4a9;
  --color-primary-700: #f8c88e;
  --color-primary-800: #f7ba6d;
  --color-primary-900: #f5a93e;
  --color-primary-1000: #f29400;
  --color-primary-1100: #ef7d00;
  --color-primary-1200: #e95f00;
  --color-primary-1300: #e23700;
  --color-primary-1400: #d90000;
  --color-primary-1500: #b80000;
  --color-primary-1600: #990000;
  --color-primary-1700: #7d0000;
  --color-primary-1800: #640400;
  --color-primary-1900: #4e0800;
  --color-primary-2000: #3c0800;
  --color-primary-2100: #2d0800;
  --color-primary-2200: #210700;
  --color-primary-2300: #160500;
  --color-primary-2400: #0e0400;
  --color-primary-2500: #070300;
  --color-primary-2600: #040201;
  --color-primary-2700: #020202;
  --color-secondary-0: #fff;
  --color-secondary-100: #f8f8f8;
  --color-secondary-200: #edede9;
  --color-secondary-300: #e1e2da;
  --color-secondary-400: #d6d8cc;
  --color-secondary-500: #cacdbd;
  --color-secondary-600: #bfc2af;
  --color-secondary-700: #b4b8a1;
  --color-secondary-800: #a9ad93;
  --color-secondary-900: #9ea385;
  --color-secondary-1000: #939977;
  --color-secondary-1100: #898f69;
  --color-secondary-1200: #7e855b;
  --color-secondary-1300: #747b4e;
  --color-secondary-1400: #6a7140;
  --color-secondary-1500: #61663a;
  --color-secondary-1600: #575c35;
  --color-secondary-1700: #4e522f;
  --color-secondary-1800: #44492a;
  --color-secondary-1900: #3b3f24;
  --color-secondary-2000: #33361f;
  --color-secondary-2100: #2a2d1a;
  --color-secondary-2200: #222415;
  --color-secondary-2300: #1a1b10;
  --color-secondary-2400: #12130b;
  --color-secondary-2500: #0b0c07;
  --color-secondary-2600: #050504;
  --color-secondary-2700: #020202;
  --color-primary-muted-0: #fff;
  --color-primary-muted-100: #f8f8f8;
  --color-primary-muted-200: #f6f4f2;
  --color-primary-muted-300: #f2efeb;
  --color-primary-muted-400: #eee8e2;
  --color-primary-muted-500: #e9e1d7;
  --color-primary-muted-600: #e2d7cb;
  --color-primary-muted-700: #dbccbb;
  --color-primary-muted-800: #d1bfa8;
  --color-primary-muted-900: #c6af8e;
  --color-primary-muted-1000: #b4985c;
  --color-primary-muted-1100: #a58344;
  --color-primary-muted-1200: #936a31;
  --color-primary-muted-1300: #7c491c;
  --color-primary-muted-1400: #480000;
  --color-primary-muted-1500: #400000;
  --color-primary-muted-1600: #3a0700;
  --color-primary-muted-1700: #340e01;
  --color-primary-muted-1800: #2d1105;
  --color-primary-muted-1900: #261006;
  --color-primary-muted-2000: #1e0f06;
  --color-primary-muted-2100: #180c06;
  --color-primary-muted-2200: #120a06;
  --color-primary-muted-2300: #0d0705;
  --color-primary-muted-2400: #080504;
  --color-primary-muted-2500: #050403;
  --color-primary-muted-2600: #030202;
  --color-primary-muted-2700: #020202;
  --color-secondary-muted-0: #fff;
  --color-secondary-muted-100: #f8f8f8;
  --color-secondary-muted-200: #ededec;
  --color-secondary-muted-300: #e1e2df;
  --color-secondary-muted-400: #d6d7d3;
  --color-secondary-muted-500: #cbccc7;
  --color-secondary-muted-600: #c0c1bb;
  --color-secondary-muted-700: #b5b6af;
  --color-secondary-muted-800: #aaaba3;
  --color-secondary-muted-900: #9fa198;
  --color-secondary-muted-1000: #95968c;
  --color-secondary-muted-1100: #8a8c81;
  --color-secondary-muted-1200: #808275;
  --color-secondary-muted-1300: #75776a;
  --color-secondary-muted-1400: #6b6d5f;
  --color-secondary-muted-1500: #626356;
  --color-secondary-muted-1600: #585a4e;
  --color-secondary-muted-1700: #4e5045;
  --color-secondary-muted-1800: #45463d;
  --color-secondary-muted-1900: #3c3d35;
  --color-secondary-muted-2000: #33342d;
  --color-secondary-muted-2100: #2b2b26;
  --color-secondary-muted-2200: #22231e;
  --color-secondary-muted-2300: #1a1b17;
  --color-secondary-muted-2400: #121310;
  --color-secondary-muted-2500: #0b0b0a;
  --color-secondary-muted-2600: #050505;
  --color-secondary-muted-2700: #020202;
  --font-display: 'Nanum Myeongjo';
  --font-body: 'IBM Plex Sans';
  --font-mono: 'IBM Plex Mono';
  --animate-hero-vert-scroll-infinite: animate-hero-vert-scroll-infinite 30s linear infinite;
  --animate-hero-vert-scroll-infinite-reverse: animate-hero-vert-scroll-infinite-reverse 30s linear infinite;
  --animate-hero-vert-scroll-infinite-x: animate-hero-vert-scroll-infinite-x 30s linear infinite;
  --animate-hero-vert-scroll-infinite-x-reverse: animate-hero-vert-scroll-infinite-x-reverse 30s linear infinite;

  @keyframes animate-hero-vert-scroll-infinite {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-100%);
    }
  }

  @keyframes animate-hero-vert-scroll-infinite-reverse {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(100%);
    }
  }

  @keyframes animate-hero-vert-scroll-infinite-x {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes animate-hero-vert-scroll-infinite-x-reverse {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(100%);
    }
  }
}
/* ------------------------------------------------------------------
   Editorial landing (home#index)
   Paper, ink and one pencil-orange accent. Hairline rules instead of
   cards and shadows. Unlayered, so these win over Tailwind utilities.
   ------------------------------------------------------------------ */
:root {
  --lc-paper: var(--color-primary-200);
  --lc-paper-deep: #f3eadf;
  --lc-ink: var(--color-primary-muted-2000);
  --lc-ink-soft: var(--color-secondary-muted-1700);
  --lc-accent: var(--color-primary-1100);
  --lc-rule: color-mix(in oklab, var(--lc-ink) 16%, transparent);
  --lc-rule-strong: color-mix(in oklab, var(--lc-ink) 70%, transparent);
}

/* Header (shared with static pages) */
.lc-header {
  border-bottom: 1px solid var(--lc-rule);
}

.lc-nav a,
.lc-nav-link {
  font-family: var(--font-body), sans-serif;
  font-size: 0.9375rem;
  color: var(--lc-ink-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.lc-nav a:hover,
.lc-nav-link:hover {
  color: var(--lc-ink);
  text-decoration-color: var(--lc-accent);
}

/* Buttons */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid var(--lc-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.lc-btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.9375rem;
}

.lc-btn--ink {
  background-color: var(--lc-ink);
  color: var(--lc-paper);
}

.lc-btn--ink:hover {
  background-color: var(--lc-accent);
  border-color: var(--lc-accent);
  color: var(--lc-ink);
}

.lc-btn--outline {
  background-color: transparent;
  color: var(--lc-ink);
}

.lc-btn--outline:hover {
  background-color: var(--lc-ink);
  color: var(--lc-paper);
}

.lc-link {
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lc-ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--lc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  transition: color 150ms ease;
}

.lc-link:hover {
  color: var(--lc-accent);
}

/* Page base */
.lc-home {
  color: var(--lc-ink);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lc-home h1,
.lc-home h2,
.lc-home h3 {
  color: var(--lc-ink);
  text-align: left;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

.lc-home h3 {
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.lc-home h2.lc-center {
  text-align: center;
}

.lc-muted {
  color: var(--muted-foreground);
  line-height: 1.65;
}

.lc-accent {
  color: var(--lc-accent);
}

/* Pencil underline for emphasised phrases */
.lc-mark {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--lc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: auto;
}

/* Hero */
/* Sized by width so "Transform Your Books Into" stays on one line from tablets up, and capped by height so the
   ribbon and the button still fit on short laptop screens. Centred on the ribbon's axis. */
.lc-home h1.lc-hero-title {
  margin: clamp(1.5rem, 6vh, 4rem) 0 0;
  margin-top: clamp(1.5rem, 6svh, 4rem);
  font-size: clamp(3rem, min((100vw - 2rem) / 11.6, 11.5vh), 6rem);
  font-size: clamp(3rem, min((100vw - 2rem) / 11.6, 11.5svh), 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-align: center;
}

.lc-hero-title__second {
  display: block;
}

.lc-hero-foot {
  padding-bottom: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(2rem, 6svh, 4rem);
}

.lc-swash {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.lc-swash svg {
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.02em;
  width: calc(100% + 0.08em);
  height: 0.22em;
  overflow: visible;
}

.lc-swash path {
  fill: none;
  stroke: var(--lc-accent);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: lc-draw 1.1s 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes lc-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-swash path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.lc-joint {
  border: 1px solid var(--lc-ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--lc-accent);
}

.lc-rule-top {
  border-top: 1px solid var(--lc-rule-strong);
}

.lc-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--lc-ink-soft);
  max-width: 38rem;
}

.lc-lede .lc-mark {
  color: var(--lc-ink);
}

@media (min-width: 768px) {
  .lc-lede {
    font-size: 1.25rem;
  }
}

/* How it works: numbered columns split by rules */
.lc-steps {
  border-top: 1px solid var(--lc-rule-strong);
}

.lc-steps > li {
  padding: 2rem 0;
  border-bottom: 1px solid var(--lc-rule);
}

@media (min-width: 768px) {
  .lc-steps > li {
    padding: 2.5rem 2.5rem 1rem 0;
    border-bottom: 0;
  }

  .lc-steps > li + li {
    padding-left: 2.5rem;
    border-left: 1px solid var(--lc-rule);
  }
}

.lc-numeral {
  display: block;
  font-family: var(--font-display), serif !important;
  font-size: 5.5rem;
  line-height: 0.9;
  color: var(--lc-accent);
  margin-bottom: 1.75rem;
}

/* Dark philosophy band */
.lc-dark {
  background-color: var(--lc-ink);
  color: color-mix(in oklab, var(--lc-paper) 88%, transparent);
}

.lc-home .lc-dark h2 {
  color: var(--lc-paper);
}

.lc-dark .lc-mark {
  color: var(--lc-paper);
}

.lc-video {
  border: 1px solid color-mix(in oklab, var(--lc-paper) 22%, transparent);
  border-radius: 2px;
  background: #000;
}

/* Features: index-like list */
.lc-index > div {
  border-top: 1px solid var(--lc-rule-strong);
  padding: 1.25rem 0 2.25rem;
}

.lc-index__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.lc-folio {
  font-family: var(--font-mono), monospace !important;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--lc-accent);
  flex-shrink: 0;
}

/* Audience band */
.lc-band {
  background-color: var(--lc-paper-deep);
  border-top: 1px solid var(--lc-rule);
  border-bottom: 1px solid var(--lc-rule);
}

.lc-columns > div {
  border-top: 2px solid var(--lc-ink);
  padding: 1.5rem 0 2.5rem;
}

@media (min-width: 768px) {
  .lc-columns {
    gap: 3rem;
  }

  .lc-columns > div {
    padding-bottom: 0;
  }
}

/* Differentiators: ruled rows */
.lc-rows > div {
  border-top: 1px solid var(--lc-rule-strong);
  padding: 1.75rem 0;
}

.lc-rows > div:last-child {
  border-bottom: 1px solid var(--lc-rule-strong);
}

/* Pricing: one ruled table */
.lc-pricing {
  border: 1px solid var(--lc-rule-strong);
}

.lc-plan {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

.lc-plan + .lc-plan {
  border-top: 1px solid var(--lc-rule-strong);
}

@media (min-width: 768px) {
  .lc-plan + .lc-plan {
    border-top: 0;
    border-left: 1px solid var(--lc-rule-strong);
  }

  .lc-plan {
    padding: 2.5rem;
  }
}

.lc-plan--featured {
  background-color: var(--lc-paper-deep);
}

.lc-price {
  font-family: var(--font-display), serif;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lc-ink);
  margin-bottom: 0.75rem;
}

.lc-ticks li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.5rem;
  border-top: 1px solid var(--lc-rule);
  color: var(--lc-ink);
}

.lc-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.75rem;
  height: 1px;
  background: var(--lc-accent);
}

.lc-ticks strong {
  font-family: var(--font-mono), monospace;
  font-weight: 500;
}

/* FAQ */
.lc-faq details {
  border-top: 1px solid var(--lc-rule-strong);
}

.lc-faq details:last-child {
  border-bottom: 1px solid var(--lc-rule-strong);
}

.lc-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--font-display), serif;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--lc-ink);
}

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

.lc-faq summary > span:first-child {
  font-family: var(--font-display), serif;
  transition: color 150ms ease;
}

.lc-faq summary:hover > span:first-child {
  color: var(--color-primary-1900);
}

.lc-faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 200ms ease;
}

.lc-faq__toggle::before,
.lc-faq__toggle::after {
  content: "";
  position: absolute;
  background: var(--lc-accent);
}

.lc-faq__toggle::before {
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
}

.lc-faq__toggle::after {
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
}

.lc-faq details[open] .lc-faq__toggle {
  transform: rotate(45deg);
}

.lc-faq details > p {
  padding: 0 3rem 1.75rem 0;
  max-width: 44rem;
}

/* Closing call to action */
.lc-cta {
  background-color: var(--lc-accent);
  color: var(--lc-ink);
}

.lc-home .lc-cta h2 {
  color: var(--lc-ink);
}

.lc-cta .lc-btn--ink:hover {
  background-color: var(--lc-paper);
  border-color: var(--lc-paper);
}

.lc-cta .lc-btn--outline:hover {
  background-color: var(--lc-ink);
}

.lc-footer {
  border-top-color: var(--lc-rule);
}

/* Inline links in running text: ink with a pencil underline */
.lc-inline-link,
.lc-doc a {
  color: var(--lc-ink);
  text-decoration: underline;
  text-decoration-color: var(--lc-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color 150ms ease;
}

.lc-inline-link:hover,
.lc-doc a:hover {
  color: var(--color-primary-1900);
  text-decoration-thickness: 2px;
}

.lc-inline-link:focus-visible,
.lc-doc a:focus-visible {
  outline: 2px solid var(--lc-ink);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Legal pages: a title column beside long-form text */
.lc-legal h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .lc-legal h1 {
    font-size: 3.75rem;
  }
}

.lc-legal__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--lc-rule-strong);
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}

/* The runhead's ¶, drawn by CSS so it isn't part of the text */
.lc-legal__meta::after {
  content: "¶";
  content: "¶" / "";
  font-family: var(--font-display), serif;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--lc-accent);
}

.lc-doc {
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--lc-ink-soft);
}

.lc-doc p {
  margin: 0 0 1.1em;
}

/* Paragraphs before the first rule read as the lede */
.lc-doc > p:not(hr ~ p) {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--lc-ink);
}

.lc-doc hr {
  margin: 3.5rem 0 1.75rem;
  border: 0;
  border-top: 1px solid var(--lc-rule-strong);
}

.lc-doc h2 {
  margin: 0 0 1.25rem;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .lc-doc h2 {
    font-size: 2rem;
  }
}

/* One step deeper than --lc-accent: 3.1:1, enough for heading-size text */
.lc-doc__num {
  color: var(--color-primary-1200);
}

.lc-doc h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.lc-doc h2 + h3 {
  margin-top: 0.5rem;
}

.lc-doc ul {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}

.lc-doc li {
  position: relative;
  padding-left: 1.5rem;
}

.lc-doc li + li {
  margin-top: 0.45em;
}

/* Same pencil dash as the pricing ticks */
.lc-doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.75rem;
  height: 1px;
  background: var(--lc-accent);
}

.lc-doc strong {
  font-weight: 600;
  color: var(--lc-ink);
}

.lc-doc > :last-child,
.lc-doc > div > :last-child {
  margin-bottom: 0;
}

/* Cookie banner: a deeper paper slip under an ink rule, no shadow */
.lc-cookie {
  background-color: var(--lc-paper-deep);
  border-top: 1px solid var(--lc-rule-strong);
  color: var(--lc-ink);
}

/* Display comes from the markup: hidden on phones */
.lc-cookie__icon {
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--lc-paper);
  color: var(--lc-ink);
}

.lc-cookie__title {
  margin-bottom: 0.375rem;
  font-family: var(--font-display), serif;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--lc-ink);
}

.lc-cookie__text {
  max-width: 54rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .lc-cookie__text {
    font-size: 0.9375rem;
  }
}

.lc-cookie .lc-btn:focus-visible,
.demo-modal .lc-btn:focus-visible,
.demo-modal .lc-nav-link:focus-visible {
  outline: 2px solid var(--lc-ink);
  outline-offset: 3px;
}

/* Demo request modal: a paper sheet with the hero joints' offset, over a paper veil */
.demo-modal-overlay {
  background-color: color-mix(in oklab, var(--lc-paper) 72%, transparent);
  backdrop-filter: blur(6px);
}

.demo-modal {
  background-color: var(--lc-paper);
  border: 1px solid var(--lc-ink);
  border-radius: 2px;
  box-shadow: 6px 6px 0 var(--lc-accent);
  color: var(--lc-ink);
}

.demo-modal__header {
  border-bottom: 1px solid var(--lc-rule-strong);
}

.demo-modal__title {
  margin: 0;
  font-family: var(--font-display), serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--lc-ink);
}

@media (min-width: 768px) {
  .demo-modal__title {
    font-size: 2.5rem;
  }
}

.demo-modal__subtitle {
  margin-top: 0.75rem;
  max-width: 36rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.demo-modal__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.25rem -0.5rem 0 0;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--lc-ink-soft);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.demo-modal__close:hover {
  border-color: var(--lc-rule-strong);
  color: var(--lc-ink);
}

.demo-modal__close:focus-visible {
  outline: 2px solid var(--lc-ink);
  outline-offset: 2px;
}

.demo-modal__label {
  display: block;
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}

.demo-modal__field {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--lc-rule-strong);
  border-radius: 2px;
  background-color: color-mix(in oklab, #fff 55%, var(--lc-paper));
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  color: var(--lc-ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.demo-modal__field:hover {
  border-color: var(--lc-ink);
}

/* Focus: the border thickens to ink and the pencil line appears under the text */
.demo-modal__field:focus {
  outline: none;
  border-color: var(--lc-ink);
  box-shadow: 0 0 0 1px var(--lc-ink), inset 0 -2px 0 var(--lc-accent);
}

.demo-modal__field::placeholder {
  color: var(--muted-foreground);
}

textarea.demo-modal__field {
  min-height: 140px;
  resize: vertical;
}

.demo-modal__note {
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--color-primary-1500);
}

.demo-modal__note-title {
  font-weight: 600;
  color: var(--lc-ink);
}

.demo-modal__note-text {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--lc-ink-soft);
}

.demo-modal__tick {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--lc-paper);
  color: var(--lc-ink);
}

.demo-modal__success-title {
  font-family: var(--font-display), serif;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--lc-ink);
}

.demo-modal__cancel {
  padding: 0.75rem 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}