/* Feature and package pages: the landing and pricing look.
   Stone greys and ink only, borders instead of shadows, engraved icons.
   Light rules first, then .landing-dark overrides at the end. */

/* ── Page shell ─────────────────────────────────────────────────────────── */

body.fp-page {
  background: #fffdfb;
  color: #1c1917;
}

.menu-blur {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

nav svg,
header svg,
#header-placeholder svg {
  max-height: 32px !important;
  width: auto !important;
}

.fp-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.fp-section {
  padding: 4rem 0;
  border-top: 1px solid #e7e5e4;
}

.fp-section-title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1c1917;
}

.fp-section-lede {
  max-width: 40rem;
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #57534e;
}

@media (min-width: 768px) {
  .fp-section {
    padding: 5rem 0;
  }

  .fp-section-title {
    font-size: 2rem;
  }
}

.fp-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: rgba(120, 113, 108, 0.12);
  overflow-wrap: anywhere;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.fp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3.5rem 0 4rem;
}

@media (min-width: 1024px) {
  .fp-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 4rem;
    padding: 5rem 0 5.5rem;
  }
}

.fp-eyebrow {
  display: inline-flex;
  margin: 0 0 1.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: #f5f5f4;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78716c;
}

.fp-title {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #1c1917;
}

.fp-title-line {
  display: block;
  text-wrap: balance;
}

/* The second line answers the first in a quieter tone, like the pricing hero. */
.fp-title-line.is-muted {
  color: #78716c;
}

@media (min-width: 768px) {
  .fp-title {
    font-size: 3rem;
  }
}

.fp-lede {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #57534e;
}

.fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.fp-hero-art {
  display: flex;
  justify-content: flex-start;
}

.fp-hero-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  border: 1px solid #e7e5e4;
  border-radius: 1rem;
  background: #fafaf9;
  --eng-paper: #fafaf9;
}

.fp-hero-frame .fp-icon {
  width: 5.5rem;
  height: 5.5rem;
}

@media (max-width: 1023px) {
  .fp-hero-art {
    order: -1;
  }
}

@media (min-width: 1024px) {
  .fp-hero-art {
    justify-content: flex-end;
  }

  .fp-hero-frame {
    width: 15rem;
    height: 15rem;
  }

  .fp-hero-frame .fp-icon {
    width: 10rem;
    height: 10rem;
  }
}

/* ── Buttons (same as the pricing page) ─────────────────────────────────── */

.fp-btn-primary,
.fp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fp-btn-primary {
  border: 1px solid #1c1917;
  background: #1c1917;
  color: #ffffff;
}

.fp-btn-primary:hover {
  border-color: #292524;
  background: #292524;
}

.fp-btn-secondary {
  border: 1px solid #dfdddb;
  background: #dfdddb;
  color: #18181b;
}

.fp-btn-secondary:hover {
  border-color: #d6d3d1;
  background: #d6d3d1;
}

.fp-btn-primary:focus-visible,
.fp-btn-secondary:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 2px;
}

.fp-btn-primary svg,
.fp-btn-secondary svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.fp-btn-primary:hover svg,
.fp-btn-secondary:hover svg {
  transform: translateX(2px);
}

/* ── Engraved icons ─────────────────────────────────────────────────────── */

/* The hatch and dot fills are the patterns in .mr-eng-defs, which take its color.
   --eng-paper is the knock-out fill; set it to the surface behind each icon. */
.mr-eng-defs {
  color: #1c1917;
}

.fp-page {
  --eng-paper: #fffdfb;
}

.fp-icon {
  display: block;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  color: #1c1917;
}

.fp-icon.is-small {
  width: 2.5rem;
  height: 2.5rem;
}

/* ── How it works: numbered steps (landing's flow) ─────────────────────── */

.fp-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .fp-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fp-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fp-flow.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fp-flow-step {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e7e5e4;
}

.fp-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.fp-flow-num {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #a8a29e;
}

.fp-flow-title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 500;
  color: #1c1917;
}

.fp-flow-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #57534e;
}

/* ── The numbers: fact tiles ───────────────────────────────────────────── */

.fp-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .fp-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fp-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fp-fact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
}

/* Values in the heading serif, like the pricing page's prices. */
.fp-fact-value {
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 500;
  color: #1c1917;
}

.fp-fact-label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #57534e;
}

/* ── What you set: code beside short points ────────────────────────────── */

.fp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .fp-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    align-items: start;
  }
}

.fp-code {
  min-width: 0;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
  overflow: hidden;
}

.fp-code + .fp-code {
  margin-top: 1rem;
}

.fp-code-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #e7e5e4;
  background: #f5f5f4;
}

.fp-code-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #d6d3d1;
}

.fp-code-file {
  margin-left: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: #78716c;
}

.fp-code-body {
  margin: 0;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #1c1917;
  white-space: pre;
  tab-size: 2;
}

.fp-code-body code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
}

/* Code in greys: keys strong, strings muted, comments faint */
.fp-code-body .k {
  font-weight: 600;
}

.fp-code-body .s {
  color: #57534e;
}

.fp-code-body .c {
  color: #a8a29e;
}

.fp-points {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-point {
  display: flex;
  gap: 0.75rem;
}

/* A fixed line height, so the tick can center on the title's line. */
.fp-point-title {
  margin: 0;
  line-height: 1.75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1c1917;
}

.fp-point-text {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #57534e;
}

/* Ticks: the circled seal from the pricing page. */
.fp-tick {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #1c1917;
}

.fp-point .fp-tick {
  margin-top: calc((1.75rem - 1.125rem) / 2);
}

/* ── Good to know ──────────────────────────────────────────────────────── */

.fp-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fp-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fp-note {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e7e5e4;
  background: #fafaf9;
}

@media (min-width: 768px) {
  .fp-note:nth-child(odd) {
    border-right: 1px solid #e7e5e4;
  }

  .fp-note:nth-last-child(-n + 2):nth-child(odd),
  .fp-note:nth-last-child(1) {
    border-bottom: 0;
  }
}

@media (max-width: 767px) {
  .fp-note:last-child {
    border-bottom: 0;
  }
}

.fp-note-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #1c1917;
}

.fp-note-text {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #57534e;
}

/* ── FAQ: the landing page's ─────────────────────────────────────────────
   Centered, dividers between questions only, a chevron that flips when open,
   and answers that slide open. */

.fp-faq-section {
  max-width: 48rem;
  margin: 0 auto;
}

.fp-faq-section .fp-section-title {
  text-align: center;
}

.fp-faq {
  max-width: 48rem;
  margin: 2rem auto 0;
  text-align: left;
}

.fp-faq-item {
  interpolate-size: allow-keywords;
}

.fp-faq-item + .fp-faq-item {
  border-top: 1px solid #e7e5e4;
}

.fp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}

.fp-faq-q::-webkit-details-marker {
  display: none;
}

/* 18px, like landing's questions; heading-size.js adds its boost on top. */
.fp-faq-q h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1c1917;
  transition: color 0.15s ease;
}

.fp-faq-q:hover h3 {
  color: #44403c;
}

.fp-faq-q::after {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  color: #78716c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s ease;
}

.fp-faq-item[open] .fp-faq-q::after {
  transform: rotate(180deg);
}

.fp-faq-q:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 2px;
}

/* Slides open where the browser can animate to height: auto. */
.fp-faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
}

.fp-faq-item[open]::details-content {
  height: auto;
}

.fp-faq-a {
  margin: 0;
  padding: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #393632;
}

/* ── Related features ──────────────────────────────────────────────────── */

.fp-related {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .fp-related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fp-related-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.625rem;
  background: #fafaf9;
  --eng-paper: #fafaf9;
}

.fp-related-link {
  font-size: 1rem;
  font-weight: 500;
  color: #1c1917;
  text-decoration: none;
}

/* Underline and the ↗ show at once on hover, like the pricing page's feature links. */
.fp-related-link:hover,
.fp-related-link:focus-visible {
  text-decoration: underline;
}

.fp-related-out {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  visibility: hidden;
}

.fp-related-link:hover .fp-related-out,
.fp-related-link:focus-visible .fp-related-out {
  visibility: visible;
}

.fp-related-text {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #57534e;
}

/* ── Closing call to action ────────────────────────────────────────────── */

.fp-cta {
  display: grid;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  border: 1px solid #e7e5e4;
  border-radius: 1rem;
  background: #fafaf9;
  text-align: center;
  justify-items: center;
}

.fp-cta .fp-section-lede {
  margin-left: auto;
  margin-right: auto;
}

.fp-cta .fp-actions {
  justify-content: center;
  margin-top: 0;
}

/* ── Cookie notice: a small bordered card ──────────────────────────────── */

.fp-cookie {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 99999;
  max-width: 24rem;
  margin-left: auto;
}

/* The card itself; pages with their own positioning use it on an inner box. */
.fp-cookie-card {
  padding: 1rem 1.125rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.75rem;
  background: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #44403c;
}

.fp-cookie[hidden] {
  display: none;
}

.fp-cookie-card p {
  margin: 0;
}

.fp-cookie-card a {
  color: inherit;
  text-decoration: underline;
}

.fp-cookie-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.fp-cookie-actions button {
  padding: 0.4rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.fp-cookie-accept {
  border: 1px solid #1c1917;
  background: #1c1917;
  color: #ffffff;
}

.fp-cookie-decline {
  border: 1px solid #d6d3d1;
  background: transparent;
  color: #44403c;
}

/* ── Icon motion: one small loop each, only while on screen ────────────── */

.is-animating .fp-icon * {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.fp-icon .k-sun,
.fp-icon .k-seal,
.fp-icon .k-twinkle {
  transform-box: fill-box;
  transform-origin: center;
}

.fp-icon .k-grow {
  transform-box: fill-box;
  transform-origin: left center;
}

.fp-icon .k-bolt {
  stroke-dasharray: 100;
}

.fp-icon .k-tick {
  transform-origin: 24px 27px;
}

.is-animating .k-bolt { animation-name: fp-k-bolt; animation-duration: 3s; }
.is-animating .k-board { animation-name: fp-k-board; }
.is-animating .k-backup { animation-name: fp-k-backup; }
.is-animating .k-scan { animation-name: fp-k-scan; animation-duration: 5s; }
.is-animating .k-coin { animation-name: fp-k-coin; animation-duration: 2.8s; }
.is-animating .k-bubble { animation-name: fp-k-bubble; animation-duration: 2.4s; animation-timing-function: ease-out; }
.is-animating .k-bob { animation-name: fp-k-bob; animation-duration: 3s; }
.is-animating .k-type { animation-name: fp-k-type; animation-duration: 1.4s; }
.is-animating .k-grow { animation-name: fp-k-grow; }
.is-animating .k-tick { animation-name: fp-k-tick; animation-duration: 6s; animation-timing-function: linear; }
.is-animating .k-fly { animation-name: fp-k-fly; animation-duration: 3s; }
.is-animating .k-seal { animation-name: fp-k-seal; }
.is-animating .k-sun { animation-name: fp-k-sun; }
.is-animating .k-twinkle { animation-name: fp-k-twinkle; animation-duration: 2.4s; }
.is-animating .k-led { animation-name: fp-k-led; animation-duration: 1.6s; }
.is-animating .k-sand { animation-name: fp-k-sand; animation-duration: 2.4s; animation-timing-function: linear; }

@keyframes fp-k-bolt {
  0% { stroke-dashoffset: 100; }
  35%, 75% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: -100; }
}

/* The first provider shakes and greys out, the backup lights up */
@keyframes fp-k-board {
  0%, 20% { transform: none; opacity: 1; }
  23% { transform: translateX(-1px); }
  26% { transform: translateX(1px); }
  29% { transform: translateX(-1px); }
  32%, 80% { transform: none; opacity: 0.3; }
  92%, 100% { opacity: 1; }
}

@keyframes fp-k-backup {
  0%, 30% { opacity: 0; }
  40%, 80% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@keyframes fp-k-scan {
  0%, 100% { transform: translate(-6px, -9px); }
  25% { transform: translate(-1px, -9px); }
  50% { transform: translate(-6px, -4px); }
  75% { transform: translate(-1px, 0); }
}

@keyframes fp-k-coin {
  0% { transform: translateY(-4px); opacity: 0; }
  15%, 35% { transform: translateY(-1px); opacity: 1; }
  70%, 100% { transform: translateY(12px); opacity: 1; }
}

@keyframes fp-k-bubble {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}

@keyframes fp-k-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes fp-k-type {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-1.5px); opacity: 1; }
}

@keyframes fp-k-grow {
  0% { transform: scaleX(0); opacity: 0; }
  15%, 80% { transform: scaleX(1); opacity: 1; }
  92%, 100% { transform: scaleX(0); opacity: 0; }
}

@keyframes fp-k-tick {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-k-fly {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1.5px, -1.5px); }
}

@keyframes fp-k-seal {
  0%, 20% { transform: scale(0); opacity: 0; }
  32% { transform: scale(1.15); opacity: 1; }
  40%, 85% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes fp-k-sun {
  0%, 100% { transform: scale(0.85); }
  50% { transform: scale(1.05); }
}

@keyframes fp-k-twinkle {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.4; }
  50% { transform: scale(1.15) rotate(90deg); opacity: 1; }
}

@keyframes fp-k-led {
  0%, 100% { opacity: 0.25; }
  40%, 60% { opacity: 1; }
}

@keyframes fp-k-sand {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -4; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-icon * {
    animation: none !important;
  }

  .fp-btn-primary svg,
  .fp-btn-secondary svg,
  .fp-faq-q::after,
  .fp-faq-item::details-content {
    transition: none;
  }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

.landing-dark body.fp-page {
  background: #121110 !important;
  color: #f5f4f2 !important;
}

.landing-dark .menu-blur {
  background: rgba(18, 17, 16, 0.88);
}

.landing-dark .fp-page {
  --eng-paper: #121110;
}

.landing-dark .mr-eng-defs,
.landing-dark .fp-icon,
.landing-dark .fp-tick {
  color: #f5f5f4;
}

.landing-dark .fp-section,
.landing-dark .fp-flow-step,
.landing-dark .fp-faq-item {
  border-color: #2f2c29;
}

.landing-dark .fp-section-title,
.landing-dark .fp-title,
.landing-dark .fp-flow-title,
.landing-dark .fp-fact-value,
.landing-dark .fp-point-title,
.landing-dark .fp-note-title,
.landing-dark .fp-faq-q h3,
.landing-dark .fp-related-link {
  color: #f5f5f4;
}

.landing-dark .fp-title-line.is-muted,
.landing-dark .fp-flow-num,
.landing-dark .fp-faq-q::after {
  color: #a8a29e;
}

.landing-dark .fp-section-lede,
.landing-dark .fp-lede,
.landing-dark .fp-flow-text,
.landing-dark .fp-fact-label,
.landing-dark .fp-point-text,
.landing-dark .fp-note-text,
.landing-dark .fp-faq-a,
.landing-dark .fp-related-text {
  color: #c9c5c0;
}

.landing-dark .fp-eyebrow {
  background: #282522;
  color: #a8a29e;
}

.landing-dark .fp-hero-frame,
.landing-dark .fp-fact,
.landing-dark .fp-note,
.landing-dark .fp-related-item,
.landing-dark .fp-cta {
  border-color: #2f2c29;
  background: #1f1d1b;
  --eng-paper: #1f1d1b;
}

.landing-dark .fp-notes,
.landing-dark .fp-note {
  border-color: #2f2c29;
}

.landing-dark .fp-code {
  border-color: #2f2c29;
  background: #1c1917;
}

.landing-dark .fp-code-head {
  border-color: #2f2c29;
  background: #1f1d1b;
}

.landing-dark .fp-code-dot {
  background: #44403c;
}

.landing-dark .fp-code-file,
.landing-dark .fp-code-body .c {
  color: #9c9791;
}

.landing-dark .fp-code-body {
  color: #f5f4f2;
}

.landing-dark .fp-code-body .s {
  color: #c9c5c0;
}

.landing-dark .fp-page code {
  background: rgba(231, 229, 228, 0.1);
}

.landing-dark .fp-code-body code {
  background: none;
}

.landing-dark .fp-btn-primary {
  border-color: #f5f5f4;
  background: #f5f5f4;
  color: #18181b;
}

.landing-dark .fp-btn-primary:hover {
  border-color: #e7e5e4;
  background: #e7e5e4;
}

.landing-dark .fp-btn-secondary {
  border-color: #32302e;
  background: #32302e;
  color: #f5f4f2;
}

.landing-dark .fp-btn-secondary:hover {
  border-color: #44403c;
  background: #44403c;
}

.landing-dark .fp-btn-primary:focus-visible,
.landing-dark .fp-btn-secondary:focus-visible,
.landing-dark .fp-faq-q:focus-visible {
  outline-color: #f5f5f4;
}

.landing-dark .fp-cookie-card {
  border-color: #44403c;
  background: #1c1917;
  color: #d6d3d1;
}

.landing-dark .fp-cookie-accept {
  border-color: #f5f5f4;
  background: #f5f5f4;
  color: #18181b;
}

.landing-dark .fp-cookie-decline {
  border-color: #44403c;
  color: #d6d3d1;
}

/* ── Package pages: a developer layout in the same engraved style ──────── */

.pk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding: 3.5rem 0 4rem;
}

@media (min-width: 1024px) {
  /* The grid row ends at the buttons, so the sticky spec sheet stops there. */
  .pk-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 4rem;
    padding: 5rem 0 5.5rem;
  }
}

/* Install command with a copy button */
.pk-install {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 34rem;
  margin-top: 1.75rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.625rem;
  background: #fafaf9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  color: #1c1917;
}

.pk-install-prompt {
  color: #a8a29e;
  user-select: none;
}

.pk-install-cmd {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.fp-page .pk-install-cmd,
.landing-dark .fp-page .pk-install-cmd {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
}

.pk-copy {
  flex-shrink: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: #44403c;
  cursor: pointer;
}

.pk-copy:hover {
  border-color: #a8a29e;
  color: #1c1917;
}

.pk-copy:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 2px;
}

.pk-install-note {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: #78716c;
}

/* Spec sheet: an engraved plate with dotted leaders */
.pk-spec {
  border: 1px solid #e7e5e4;
  border-radius: 0.875rem;
  background: #fafaf9;
  --eng-paper: #fafaf9;
}

/* Beside the hero copy, the spec sheet stays in view below the header
   until its bottom lines up with the buttons. */
@media (min-width: 1024px) {
  .pk-spec {
    position: sticky;
    top: calc(var(--nav-height, 4rem) + 1.5rem);
    align-self: start;
  }
}

.pk-spec-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e7e5e4;
}

.pk-spec-head .fp-icon {
  width: 4rem;
  height: 4rem;
}

.pk-spec-name {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1c1917;
  overflow-wrap: anywhere;
}

.pk-spec-tag {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: #78716c;
}

.pk-spec-rows {
  margin: 0;
  padding: 1rem 1.5rem 1.25rem;
}

.pk-spec-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.pk-spec-row dt {
  flex-shrink: 0;
  color: #57534e;
}

/* The dotted leader between the label and its value */
.pk-spec-row::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted #a8a29e;
  transform: translateY(-0.25rem);
}

.pk-spec-row dd {
  order: 2;
  margin: 0;
  font-weight: 500;
  color: #1c1917;
  text-align: right;
}

/* Quick start: each step beside its code */
.pk-steps {
  display: grid;
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.pk-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .pk-step {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 3rem;
  }
}

.pk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #1c1917;
  border-radius: 9999px;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1c1917;
}

.pk-step-title {
  margin: 0.75rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1c1917;
}

.pk-step-text {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #57534e;
}

/* Tabs over code panels */
.pk-tabs {
  margin-top: 2rem;
}

.pk-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid #e7e5e4;
}

.pk-tab {
  margin-bottom: -1px;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #78716c;
  cursor: pointer;
}

.pk-tab:hover {
  color: #1c1917;
}

.pk-tab[aria-selected="true"] {
  border-bottom-color: #1c1917;
  color: #1c1917;
}

.pk-tab:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: -2px;
}

.pk-tabpanel {
  margin-top: 1rem;
}

.pk-tabpanel[hidden] {
  display: none;
}

.pk-tab-note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: #57534e;
}

/* Reference tables */
.pk-ref-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .pk-ref-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pk-ref-title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1c1917;
}

.pk-ref {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.875rem;
}

.pk-ref th,
.pk-ref td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e7e5e4;
  text-align: left;
  vertical-align: top;
}

.pk-ref tr:last-child td {
  border-bottom: 0;
}

.pk-ref th {
  background: #f5f5f4;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716c;
}

.pk-ref td {
  color: #57534e;
  line-height: 1.5;
}

.pk-ref td:first-child {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: #1c1917;
}

.pk-ref-scroll {
  overflow-x: auto;
}

/* Version history: a ruled timeline with a seal at each release */
.pk-log {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid #d6d3d1;
}

.pk-log-item {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
}

.pk-log-item:last-child {
  padding-bottom: 0;
}

.pk-log-item .fp-tick {
  position: absolute;
  top: 0.15rem;
  left: -0.5625rem;
  background: #fffdfb;
}

.pk-log-version {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1c1917;
}

.pk-log-text {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #57534e;
}

/* Package pages: dark mode */
.landing-dark .pk-install,
.landing-dark .pk-spec {
  border-color: #2f2c29;
  background: #1f1d1b;
  color: #f5f4f2;
  --eng-paper: #1f1d1b;
}

.landing-dark .pk-spec-head,
.landing-dark .pk-tablist,
.landing-dark .pk-ref,
.landing-dark .pk-ref th,
.landing-dark .pk-ref td {
  border-color: #2f2c29;
}

.landing-dark .pk-copy {
  border-color: #44403c;
  background: #282522;
  color: #e7e5e4;
}

.landing-dark .pk-spec-name,
.landing-dark .pk-spec-row dd,
.landing-dark .pk-step-title,
.landing-dark .pk-ref-title,
.landing-dark .pk-ref td:first-child,
.landing-dark .pk-log-version,
.landing-dark .pk-tab:hover,
.landing-dark .pk-tab[aria-selected="true"] {
  color: #f5f5f4;
}

.landing-dark .pk-tab[aria-selected="true"] {
  border-bottom-color: #f5f5f4;
}

.landing-dark .pk-step-num {
  border-color: #f5f5f4;
  color: #f5f5f4;
}

.landing-dark .pk-spec-row dt,
.landing-dark .pk-step-text,
.landing-dark .pk-ref td,
.landing-dark .pk-log-text,
.landing-dark .pk-tab-note {
  color: #c9c5c0;
}

.landing-dark .pk-spec-tag,
.landing-dark .pk-install-note,
.landing-dark .pk-tab,
.landing-dark .pk-ref th {
  color: #a8a29e;
}

.landing-dark .pk-ref th {
  background: #1f1d1b;
}

.landing-dark .pk-spec-row::after {
  border-bottom-color: #57534e;
}

.landing-dark .pk-log {
  border-left-color: #44403c;
}

.landing-dark .pk-log-item .fp-tick {
  background: #121110;
}

/* ── Tool pages (token and pricing calculators) ────────────────────────── */

/* The site header scrolls away here, like the Desk page; the tools bar sticks instead. */
html body.tl-page #header-placeholder {
  position: relative;
}

.tools-subnav-sentinel {
  height: 1px;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
}

.tools-subnav {
  position: sticky;
  top: 0;
  z-index: 45;
  width: 100%;
  border-top: 1px solid #e7e5e4;
  border-bottom: 1px solid #e7e5e4;
  background: rgba(255, 253, 251, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}

.tools-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 80rem;
  height: 3.25rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .tools-subnav-inner {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tools-subnav-inner {
    padding: 0 2rem;
  }
}

.tools-subnav-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #1c1917;
}

/* The logo slides in once the bar is stuck to the top. */
.tools-subnav-mark {
  display: inline-flex;
  align-items: center;
  width: 0;
  height: 1.125rem;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 0.22s ease, margin-right 0.22s ease, opacity 0.22s ease;
}

.tools-subnav-mark svg {
  display: block;
  width: auto;
  height: 1.125rem;
}

.tools-subnav-mark-fill {
  fill: #1c1917;
}

.tools-subnav-mark-wave {
  fill: #fffdfb;
}

.tools-subnav-divider {
  display: inline-block;
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  color: #a8a29e;
  font-size: 0.9375rem;
  line-height: 1;
  transition: max-width 0.22s ease, margin-right 0.22s ease, opacity 0.22s ease;
}

.tools-subnav.is-stuck .tools-subnav-mark {
  width: 1.55rem;
  margin-right: 0.45rem;
  opacity: 1;
  pointer-events: auto;
}

.tools-subnav.is-stuck .tools-subnav-divider {
  max-width: 0.75rem;
  margin-right: 0.4rem;
  opacity: 1;
}

.tools-subnav-title {
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tools-subnav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.tools-subnav-links::-webkit-scrollbar {
  display: none;
}

.tools-subnav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #57534e;
  text-decoration: none;
  white-space: nowrap;
}

.tools-subnav-link:hover {
  color: #1c1917;
}

.tools-subnav-link.is-active {
  border-color: #1c1917;
  color: #1c1917;
}

@media (max-width: 640px) {
  .tools-subnav-inner {
    height: 3rem;
  }

  .tools-subnav-title {
    font-size: 1.0625rem;
  }

  .tools-subnav-link {
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tools-subnav-mark,
  .tools-subnav-divider {
    transition: none;
  }
}

.tl-page .fp-hero {
  padding: 3rem 0 2.5rem;
}

@media (min-width: 1024px) {
  .tl-page .fp-hero {
    padding: 4rem 0 3rem;
  }
}

/* The calculator itself: one bordered sheet. */
.tl-sheet {
  border: 1px solid #e7e5e4;
  border-radius: 1rem;
  background: #fafaf9;
  overflow: hidden;
}

.tl-sheet-body {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .tl-sheet-body {
    padding: 1.75rem;
  }
}

.tl-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78716c;
}

.tl-textarea,
.tl-input,
.tl-select {
  width: 100%;
  border: 1px solid #d6d3d1;
  border-radius: 0.625rem;
  background: #fffdfb;
  color: #1c1917;
  font: inherit;
  outline: none;
}

.tl-textarea {
  display: block;
  min-height: 14rem;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}

.tl-textarea::placeholder {
  color: #a8a29e;
}

.tl-input,
.tl-select {
  height: 2.875rem;
  padding: 0 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.tl-textarea:focus,
.tl-input:focus,
.tl-select:focus {
  border-color: #1c1917;
}

.tl-select-wrap {
  position: relative;
}

.tl-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.tl-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  width: 1rem;
  height: 1rem;
  color: #57534e;
  pointer-events: none;
  transform: translateY(-50%);
}

.tl-fields {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .tl-fields.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tl-fields.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.5rem;
  background: #fffdfb;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1c1917;
  cursor: pointer;
}

.tl-btn:hover {
  border-color: #1c1917;
}

.tl-btn.is-primary {
  border-color: #1c1917;
  background: #1c1917;
  color: #fafaf9;
}

.tl-btn.is-primary:hover {
  background: #292524;
}

.tl-btn svg {
  width: 1rem;
  height: 1rem;
}

.tl-privacy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 auto;
  font-size: 0.8125rem;
  color: #78716c;
}

.tl-privacy svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Results as a ledger: one ruled strip, the key figure set apart. */
.tl-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid #e7e5e4;
  background: #fffdfb;
  list-style: none;
}

.tl-ledger-cell {
  display: grid;
  gap: 0.375rem;
  align-content: start;
  padding: 1.125rem 1.25rem;
  border-right: 1px solid #e7e5e4;
  border-bottom: 1px solid #e7e5e4;
}

.tl-ledger-cell:nth-child(2n) {
  border-right: 0;
}

@media (min-width: 768px) {
  .tl-ledger.is-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tl-ledger.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tl-ledger-cell,
  .tl-ledger-cell:nth-child(2n) {
    border-right: 1px solid #e7e5e4;
    border-bottom: 0;
  }

  .tl-ledger-cell:last-child {
    border-right: 0;
  }
}

.tl-ledger-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78716c;
}

.tl-ledger-value {
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.1;
  color: #1c1917;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tl-ledger-value.is-small {
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
}

.tl-ledger-cell.is-key {
  background: #1c1917;
}

.tl-ledger-cell.is-key .tl-ledger-label {
  color: #d6d3d1;
}

.tl-ledger-cell.is-key .tl-ledger-value {
  color: #fafaf9;
}

.tl-fineprint {
  margin: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e7e5e4;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #78716c;
}

@media (min-width: 768px) {
  .tl-fineprint {
    padding: 1rem 1.75rem;
  }
}

.tl-fineprint + .tl-fineprint {
  padding-top: 0;
  border-top: 0;
}

.tl-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tl-link:hover {
  color: #1c1917;
}

.tl-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.tl-section-head .fp-section-lede {
  margin-bottom: 0;
}

/* Provider cards, filled in by the page script. */
.tl-models {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .tl-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tl-models {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tl-model {
  display: grid;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fffdfb;
}

.tl-model-provider {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78716c;
}

.tl-model-name {
  margin: 0.25rem 0 0;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  color: #1c1917;
  overflow-wrap: anywhere;
}

.tl-model-costs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px dashed #d6d3d1;
  border-bottom: 1px dashed #d6d3d1;
}

.tl-model-costs div {
  padding: 0.625rem 0;
}

.tl-model-costs dt {
  font-size: 0.6875rem;
  color: #78716c;
}

.tl-model-costs dd {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1c1917;
  font-variant-numeric: tabular-nums;
}

.tl-model-rates {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #78716c;
}

/* Cost bars: hatched like the engraved icons. */
.tl-chart {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fffdfb;
}

@media (min-width: 768px) {
  .tl-chart {
    padding: 1.5rem 1.75rem;
  }
}

.tl-bar-row {
  display: grid;
  gap: 0.375rem;
}

.tl-bar-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
}

.tl-bar-name {
  font-weight: 500;
  color: #1c1917;
}

.tl-bar-model {
  color: #78716c;
}

.tl-bar-cost {
  font-weight: 500;
  color: #1c1917;
  font-variant-numeric: tabular-nums;
}

.tl-bar-track {
  height: 0.75rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.25rem;
  background: #f5f5f4;
  overflow: hidden;
}

.tl-bar-fill {
  height: 100%;
  border-right: 1.5px solid #1c1917;
  background: repeating-linear-gradient(135deg, #1c1917 0 1.5px, transparent 1.5px 4px);
}

/* What a token is: one word split into its pieces. */
.tl-explain {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .tl-explain {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.tl-prose p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #57534e;
}

.tl-split {
  padding: 1.5rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
}

.tl-split-word {
  margin: 0 0 1rem;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
  color: #1c1917;
}

.tl-split-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.tl-split-pieces li {
  padding: 0.375rem 0.75rem;
  border: 1px dashed #a8a29e;
  border-radius: 0.375rem;
  background: #fffdfb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  color: #1c1917;
}

.tl-split-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #78716c;
}

/* Dark mode */
.landing-dark .tools-subnav {
  border-color: #292524;
  background: rgba(18, 17, 16, 0.9);
}

.landing-dark .tools-subnav-brand,
.landing-dark .tools-subnav-link:hover,
.landing-dark .tools-subnav-link.is-active {
  color: #f5f5f4;
}

.landing-dark .tools-subnav-link {
  color: #a8a29e;
  background: transparent;
}

.landing-dark .tools-subnav-link.is-active {
  border-color: #f5f5f4;
}

.landing-dark .tools-subnav-mark-fill {
  fill: #f5f5f4;
}

.landing-dark .tools-subnav-mark-wave {
  fill: #121110;
}

.landing-dark .tl-sheet,
.landing-dark .tl-split {
  border-color: #292524;
  background: #1c1a19;
}

.landing-dark .tl-textarea,
.landing-dark .tl-input,
.landing-dark .tl-select,
.landing-dark .tl-btn,
.landing-dark .tl-ledger,
.landing-dark .tl-model,
.landing-dark .tl-chart,
.landing-dark .tl-split-pieces li {
  border-color: #44403c;
  background: #121110;
  color: #f5f5f4;
}

.landing-dark .tl-textarea:focus,
.landing-dark .tl-input:focus,
.landing-dark .tl-select:focus,
.landing-dark .tl-btn:hover {
  border-color: #f5f5f4;
}

.landing-dark .tl-btn.is-primary {
  border-color: #f5f5f4;
  background: #f5f5f4;
  color: #1c1917;
}

.landing-dark .tl-ledger,
.landing-dark .tl-ledger-cell,
.landing-dark .tl-fineprint,
.landing-dark .tl-bar-track {
  border-color: #292524;
}

.landing-dark .tl-ledger-value,
.landing-dark .tl-model-name,
.landing-dark .tl-model-costs dd,
.landing-dark .tl-bar-name,
.landing-dark .tl-bar-cost,
.landing-dark .tl-split-word,
.landing-dark .tl-link:hover {
  color: #f5f5f4;
}

.landing-dark .tl-ledger-cell.is-key {
  background: #f5f5f4;
}

.landing-dark .tl-ledger-cell.is-key .tl-ledger-label {
  color: #57534e;
}

.landing-dark .tl-ledger-cell.is-key .tl-ledger-value {
  color: #1c1917;
}

.landing-dark .tl-prose p {
  color: #a8a29e;
}

.landing-dark .tl-model-costs {
  border-color: #44403c;
}

.landing-dark .tl-bar-track {
  background: #1c1a19;
}

.landing-dark .tl-bar-fill {
  border-right-color: #e7e5e4;
  background: repeating-linear-gradient(135deg, #e7e5e4 0 1.5px, transparent 1.5px 4px);
}

/* ── Sitemap ───────────────────────────────────────────────────────────── */

.sm-meta {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #78716c;
}

/* Balanced columns, so short and long sections pack without gaps. */
.sm-grid {
  columns: 1;
  column-gap: 1.25rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .sm-grid {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .sm-grid {
    columns: 3;
  }
}

.sm-card {
  --eng-paper: #fafaf9;
  break-inside: avoid;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
}

.sm-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e7e5e4;
}

.sm-card-head .fp-icon {
  width: 3rem;
  height: 3rem;
}

.sm-card-title {
  margin: 0;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  color: #1c1917;
}

.sm-card-desc {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #78716c;
}

.sm-card-count {
  align-self: start;
  min-width: 1.75rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid #e7e5e4;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: #78716c;
}

.sm-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-links li + li {
  border-top: 1px dashed #e7e5e4;
}

/* Instant underline on hover, like the pricing page's links. */
.sm-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5625rem 0;
  font-size: 0.9375rem;
  color: #292524;
  text-decoration: none;
}

.sm-link:hover {
  color: #1c1917;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.sm-out {
  width: 0.875rem;
  height: 0.875rem;
  color: #78716c;
}

/* Open-source apps: a name, one line on what it is, and its links. */
.sm-app {
  padding: 0.75rem 0;
}

.sm-app .sm-app-name {
  display: inline-flex;
  padding: 0;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.1875rem;
  font-weight: 500;
}

.sm-app-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #78716c;
}

.sm-app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 0;
}

.sm-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #292524;
  text-decoration: none;
}

.sm-app-link:hover {
  color: #1c1917;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.landing-dark .sm-app-link {
  color: #d6d3d1;
}

.landing-dark .sm-app-link:hover {
  color: #f5f5f4;
}

.landing-dark .sm-card {
  --eng-paper: #1c1a19;
  border-color: #292524;
  background: #1c1a19;
}

.landing-dark .sm-card-head,
.landing-dark .sm-card-count,
.landing-dark .sm-links li + li {
  border-color: #292524;
}

.landing-dark .sm-card-title,
.landing-dark .sm-link:hover {
  color: #f5f5f4;
}

.landing-dark .sm-link {
  color: #d6d3d1;
}

/* ── Alternative pages (LangChain, LlamaIndex) ─────────────────────────── */

.alt-compare-wrap {
  margin-top: 2rem;
}

.pk-ref.alt-compare {
  min-width: 36rem;
  table-layout: fixed;
}

.pk-ref.alt-compare th:first-child,
.pk-ref.alt-compare td:first-child {
  width: 26%;
}

.pk-ref.alt-compare td:first-child {
  white-space: normal;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
}

/* The ModelRiver column reads as the answer: ink text on a paper band. */
.pk-ref.alt-compare th:last-child,
.pk-ref.alt-compare td:last-child {
  background: #f5f5f4;
  color: #1c1917;
}

.pk-ref.alt-compare th:last-child {
  background: #e7e5e4;
  color: #1c1917;
}

.alt-choose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .alt-choose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.alt-choose-card {
  padding: 1.5rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
}

.alt-choose-card + .alt-choose-card {
  border-color: #a8a29e;
}

.alt-choose-title {
  margin: 0 0 1rem;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #1c1917;
}

.alt-choose-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alt-choose-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #44403c;
}

.alt-choose-list .fp-tick {
  margin-top: calc((1.5rem - 1.125rem) / 2);
  background: #fafaf9;
}

.alt-both {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: #78716c;
}

.alt-reads {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .alt-reads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .alt-reads {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.alt-read {
  display: grid;
  gap: 0.375rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  text-decoration: none;
}

.alt-read:hover {
  border-color: #1c1917;
}

.alt-read-title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1c1917;
}

.alt-read:hover .alt-read-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.alt-read-out {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0;
}

.alt-read:hover .alt-read-out {
  opacity: 1;
}

.alt-read-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #78716c;
}

.landing-dark .pk-ref.alt-compare td:last-child {
  background: #1c1a19;
  color: #f5f5f4;
}

.landing-dark .pk-ref.alt-compare th:last-child {
  background: #292524;
  color: #f5f5f4;
}

.landing-dark .alt-choose-card {
  border-color: #292524;
  background: #1c1a19;
}

.landing-dark .alt-choose-card + .alt-choose-card {
  border-color: #57534e;
}

.landing-dark .alt-choose-title,
.landing-dark .alt-read-title {
  color: #f5f5f4;
}

.landing-dark .alt-choose-list li {
  color: #d6d3d1;
}

.landing-dark .alt-choose-list .fp-tick {
  background: #1c1a19;
}

.landing-dark .alt-read {
  border-color: #292524;
}

.landing-dark .alt-read:hover {
  border-color: #f5f5f4;
}

/* On phones each comparison row stacks: the topic, then both answers with their names. */
@media (max-width: 639px) {
  .pk-ref.alt-compare {
    min-width: 0;
    table-layout: auto;
  }

  .pk-ref.alt-compare thead {
    display: none;
  }

  .pk-ref.alt-compare tr {
    display: grid;
    border-bottom: 1px solid #e7e5e4;
  }

  .pk-ref.alt-compare tr:last-child {
    border-bottom: 0;
  }

  .pk-ref.alt-compare td,
  .pk-ref.alt-compare th:first-child,
  .pk-ref.alt-compare td:first-child {
    width: auto;
    border-bottom: 0;
  }

  .pk-ref.alt-compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #78716c;
  }

  .landing-dark .pk-ref.alt-compare tr {
    border-color: #292524;
  }
}

/* ── Migrate pages (/migrate, generated by build-migrate-pages.ts) ─────── */

/* Phones: a 16px gutter, and nothing wider than the screen. */
@media (max-width: 639px) {
  .mg-page .fp-main {
    padding: 0 1rem;
  }
}

.mg-page .fp-main {
  overflow-wrap: anywhere;
}

.mg-crumbs {
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: #78716c;
}

.mg-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-crumbs li + li::before {
  content: "/";
  margin-right: 0.375rem;
  color: #d6d3d1;
}

.mg-crumbs a {
  color: #57534e;
  text-decoration: none;
}

.mg-crumbs a:hover {
  color: #1c1917;
  text-decoration: underline;
}

.fp-hero.mg-hero {
  padding-top: 2rem;
}

.mg-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: #57534e;
}

.mg-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

/* Hero art: the two lines that change, struck through and replaced. */
.mg-swap {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
}

.mg-swap-row {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.mg-swap-key {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716c;
}

.mg-swap-old {
  color: #a8a29e;
  overflow-wrap: anywhere;
}

.mg-swap-new {
  color: #1c1917;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mg-step0 {
  max-width: 40rem;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #44403c;
}

/* Segmented controls. Language tabs are radio inputs before the bar, so they work without
   JavaScript; the script adds .has-pill and slides .mg-pill behind the chosen option. The
   Before/After and platform pickers are radios inside their labels and ship hidden. */
.mg-tabs {
  margin-top: 2rem;
}

.mg-tab-input,
.mg-seg-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mg-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mg-seg {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 1.25rem;
}

.mg-seg[hidden] {
  display: none;
}

.mg-pill {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: #1c1917;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.mg-seg label {
  padding: 0.375rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #57534e;
  cursor: pointer;
}

.mg-seg label:hover {
  color: #1c1917;
}

/* Without the script: the chosen language is outlined. */
.mg-tabs > .mg-tab-input:nth-of-type(1):checked ~ .mg-tab-bar .mg-tab-list label:nth-of-type(1),
.mg-tabs > .mg-tab-input:nth-of-type(2):checked ~ .mg-tab-bar .mg-tab-list label:nth-of-type(2),
.mg-tabs > .mg-tab-input:nth-of-type(3):checked ~ .mg-tab-bar .mg-tab-list label:nth-of-type(3) {
  border-color: #1c1917;
  color: #1c1917;
}

/* With it: the pill is the highlight and the chosen label turns paper-coloured. */
.mg-tabs > .mg-tab-input:nth-of-type(1):checked ~ .mg-tab-bar .mg-tab-list.has-pill label:nth-of-type(1),
.mg-tabs > .mg-tab-input:nth-of-type(2):checked ~ .mg-tab-bar .mg-tab-list.has-pill label:nth-of-type(2),
.mg-tabs > .mg-tab-input:nth-of-type(3):checked ~ .mg-tab-bar .mg-tab-list.has-pill label:nth-of-type(3),
.mg-seg.has-pill label:has(> .mg-seg-input:checked) {
  border-color: transparent;
  color: #fffdfb;
}

.mg-tabs > .mg-tab-input:nth-of-type(1):focus-visible ~ .mg-tab-bar .mg-tab-list label:nth-of-type(1),
.mg-tabs > .mg-tab-input:nth-of-type(2):focus-visible ~ .mg-tab-bar .mg-tab-list label:nth-of-type(2),
.mg-tabs > .mg-tab-input:nth-of-type(3):focus-visible ~ .mg-tab-bar .mg-tab-list label:nth-of-type(3),
.mg-seg label:has(> .mg-seg-input:focus-visible) {
  outline: 2px solid #1c1917;
  outline-offset: 2px;
}

/* Before/After one at a time on phones and tablets; side by side from 1024px. */
@media (min-width: 1024px) {
  .mg-seg-side {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .mg-tabs[data-pick] .mg-diff-side:not(.is-picked),
  .mg-tabs[data-pick] .mg-diff-label {
    display: none;
  }
}

/* One platform card at a time on phones; the grid from 768px. */
.mg-seg-hub {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .mg-seg-hub {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .mg-hub-cards[data-pick] {
    margin-top: 1rem;
  }

  .mg-hub-cards[data-pick] .mg-hub-card:not(.is-picked) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-seg label {
    transition: none;
  }
}

.mg-panel {
  display: none;
}

.mg-tabs > .mg-tab-input:nth-of-type(1):checked ~ .mg-panels > .mg-panel:nth-of-type(1),
.mg-tabs > .mg-tab-input:nth-of-type(2):checked ~ .mg-panels > .mg-panel:nth-of-type(2),
.mg-tabs > .mg-tab-input:nth-of-type(3):checked ~ .mg-panels > .mg-panel:nth-of-type(3) {
  display: grid;
}

.mg-panel,
.mg-config {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.mg-config {
  display: grid;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .mg-panel,
  .mg-config {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.mg-diff-side {
  min-width: 0;
}

.mg-diff-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716c;
}

.mg-copy {
  margin-left: auto;
  padding: 0.125rem 0.625rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.75rem;
  color: #44403c;
  cursor: pointer;
}

.mg-copy:hover {
  border-color: #1c1917;
  color: #1c1917;
}

.mg-copy:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 2px;
}

/* Concept map: two even columns, the note under the ModelRiver answer. */
.pk-ref.alt-compare.mg-map th:first-child,
.pk-ref.alt-compare.mg-map td:first-child {
  width: 45%;
}

.mg-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #78716c;
}

/* Hub grid: one column per platform, ModelRiver last. */
.pk-ref.alt-compare.mg-grid {
  min-width: 52rem;
}

.pk-ref.alt-compare.mg-grid th:first-child,
.pk-ref.alt-compare.mg-grid td:first-child {
  width: 14%;
}

.mg-card {
  min-width: 0;
  border: 1px solid #a8a29e;
  border-radius: 0.75rem;
  background: #fafaf9;
}

.mg-card-title {
  margin: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e7e5e4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1917;
}

.mg-card dl,
.mg-hub-card dl {
  margin: 0;
}

.mg-card-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid #e7e5e4;
  font-size: 0.875rem;
}

.mg-card-row:last-child {
  border-bottom: 0;
}

.mg-card-row dt {
  color: #78716c;
}

.mg-card-row dd {
  margin: 0;
  color: #1c1917;
}

.mg-concept-body p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #44403c;
}

/* Mid-page call to action: a ruled band, not a card. */
.mg-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 2rem 0;
  border-top: 1px solid #e7e5e4;
}

.mg-band p {
  max-width: 44rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #44403c;
}

.mg-stay {
  margin-top: 2rem;
}

.mg-stay .fp-note-text {
  margin: 0;
  color: #44403c;
}

.mg-sub {
  margin: 2.5rem 0 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1c1917;
}

.mg-claims {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e7e5e4;
}

.mg-claims li {
  padding: 0.875rem 0;
  border-bottom: 1px solid #e7e5e4;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #44403c;
}

.mg-claim-src {
  font-size: 0.8125rem;
  color: #78716c;
  white-space: nowrap;
}

.mg-src,
.mg-step-link,
.mg-help a,
.mg-sources a {
  color: #1c1917;
  text-decoration: underline;
  text-decoration-color: #a8a29e;
  text-underline-offset: 0.15em;
}

.mg-src:hover,
.mg-step-link:hover,
.mg-help a:hover,
.mg-sources a:hover {
  text-decoration-color: currentColor;
}

.mg-steps {
  display: grid;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.mg-step {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
  padding: 1.25rem 0;
  border-top: 1px solid #e7e5e4;
}

.mg-step-code {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fafaf9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.mg-step-code code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

.mg-step-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.mg-help {
  max-width: 40rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #57534e;
}

.mg-hub-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .mg-hub-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mg-hub-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
}

.mg-hub-card .mg-card-row {
  padding: 0.5rem 0;
}

.mg-hub-card-title {
  margin: 0;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #1c1917;
}

/* Checked date, sources and trademarks close every page. */
.mg-sources {
  display: grid;
  gap: 0.75rem;
  padding: 2rem 0 4rem;
  border-top: 1px solid #e7e5e4;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #78716c;
}

.mg-checked,
.mg-marks {
  margin: 0;
}

/* Text links that open a new tab show an outbound arrow on hover. The arrow sits outside the
   link box, so nothing shifts when it appears. */
.mg-page .fp-main a[target="_blank"]:not([class*="fp-btn"]):not(.alt-read) {
  position: relative;
}

.mg-page .fp-main a[target="_blank"]:not([class*="fp-btn"]):not(.alt-read)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.95em;
  width: 0.75em;
  height: 0.75em;
  margin-top: -0.375em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h7v7'/%3E%3Cpath d='M13 3 3.5 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h7v7'/%3E%3Cpath d='M13 3 3.5 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.mg-page .fp-main a[target="_blank"]:not([class*="fp-btn"]):not(.alt-read):hover::after,
.mg-page .fp-main a[target="_blank"]:not([class*="fp-btn"]):not(.alt-read):focus-visible::after {
  opacity: 1;
}

/* Gains carry the emphasis; give-ups stay plain and quieter. */
.alt-choose-card.mg-gain-card {
  border-color: #a8a29e;
  background: #ffffff;
}

.alt-choose-card.mg-giveup-card {
  border-color: #e7e5e4;
  background: transparent;
}

.mg-giveup-card .alt-choose-list li {
  color: #57534e;
}

.landing-dark .alt-choose-card.mg-gain-card {
  border-color: #57534e;
  background: #1c1a19;
}

.landing-dark .alt-choose-card.mg-giveup-card {
  border-color: #292524;
  background: transparent;
}

.landing-dark .mg-giveup-card .alt-choose-list li {
  color: #a8a29e;
}

.mg-claims-details summary,
.mg-sources-list summary {
  cursor: pointer;
  color: #44403c;
}

.mg-sources-list ul {
  display: grid;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.mg-src-note {
  color: #a8a29e;
}

@media (max-width: 639px) {
  .mg-claim-src {
    white-space: normal;
  }

  .mg-card-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }

  .pk-ref.alt-compare.mg-grid {
    min-width: 0;
  }

  .pk-ref.alt-compare.mg-map th:first-child,
  .pk-ref.alt-compare.mg-map td:first-child,
  .pk-ref.alt-compare.mg-grid th:first-child,
  .pk-ref.alt-compare.mg-grid td:first-child {
    width: auto;
  }
}

.landing-dark .mg-crumbs,
.landing-dark .mg-crumbs a,
.landing-dark .mg-facts,
.landing-dark .mg-seg label,
.landing-dark .mg-help,
.landing-dark .mg-concept-body p,
.landing-dark .mg-band p,
.landing-dark .mg-stay .fp-note-text,
.landing-dark .mg-claims li,
.landing-dark .mg-step0,
.landing-dark .mg-sources-list summary {
  color: #d6d3d1;
}

.landing-dark .mg-crumbs a:hover,
.landing-dark .mg-swap-new,
.landing-dark .mg-card-title,
.landing-dark .mg-card-row dd,
.landing-dark .mg-sub,
.landing-dark .mg-hub-card-title,
.landing-dark .mg-src,
.landing-dark .mg-step-link,
.landing-dark .mg-help a,
.landing-dark .mg-sources a,
.landing-dark .mg-seg label:hover {
  color: #f5f5f4;
}

.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(1):checked ~ .mg-tab-bar .mg-tab-list label:nth-of-type(1),
.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(2):checked ~ .mg-tab-bar .mg-tab-list label:nth-of-type(2),
.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(3):checked ~ .mg-tab-bar .mg-tab-list label:nth-of-type(3) {
  border-color: #f5f5f4;
  color: #f5f5f4;
}

.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(1):checked ~ .mg-tab-bar .mg-tab-list.has-pill label:nth-of-type(1),
.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(2):checked ~ .mg-tab-bar .mg-tab-list.has-pill label:nth-of-type(2),
.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(3):checked ~ .mg-tab-bar .mg-tab-list.has-pill label:nth-of-type(3),
.landing-dark .mg-seg.has-pill label:has(> .mg-seg-input:checked) {
  border-color: transparent;
  color: #121110;
}

.landing-dark .mg-pill {
  background: #f5f5f4;
}

.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(1):focus-visible ~ .mg-tab-bar .mg-tab-list label:nth-of-type(1),
.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(2):focus-visible ~ .mg-tab-bar .mg-tab-list label:nth-of-type(2),
.landing-dark .mg-tabs > .mg-tab-input:nth-of-type(3):focus-visible ~ .mg-tab-bar .mg-tab-list label:nth-of-type(3),
.landing-dark .mg-seg label:has(> .mg-seg-input:focus-visible) {
  outline-color: #f5f5f4;
}

.landing-dark .mg-swap,
.landing-dark .mg-card,
.landing-dark .mg-hub-card,
.landing-dark .mg-step-code {
  border-color: #2f2c29;
  background: #1c1a19;
}

.landing-dark .mg-card {
  border-color: #57534e;
}

.landing-dark .mg-seg,
.landing-dark .mg-step0,
.landing-dark .mg-card-title,
.landing-dark .mg-card-row,
.landing-dark .mg-band,
.landing-dark .mg-claims,
.landing-dark .mg-claims li,
.landing-dark .mg-step,
.landing-dark .mg-sources {
  border-color: #2f2c29;
}

.landing-dark .mg-copy {
  border-color: #57534e;
  color: #d6d3d1;
}

.landing-dark .mg-copy:hover {
  border-color: #f5f5f4;
  color: #f5f5f4;
}

.landing-dark .mg-crumbs li + li::before {
  color: #57534e;
}

/* ── Migrate pages: engraved icons (client/scripts/migrate-icons.ts) ───── */

/* Small engraved marks set beside text: the fact strip, the checked date, the workflow card. */
.mg-mini {
  display: inline-block;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #1c1917;
  vertical-align: -0.2em;
}

/* Hero art: one engraved emblem per page, over the two lines that change. */
.mg-hero-art {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: #fafaf9;
  --eng-paper: #fafaf9;
}

.mg-hero-emblem {
  display: flex;
  justify-content: center;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid #e7e5e4;
}

.mg-hero-emblem .fp-icon {
  width: 5rem;
  height: 5rem;
}

@media (min-width: 1024px) {
  .mg-hero-emblem {
    padding: 2rem 1rem 1.75rem;
  }

  .mg-hero-emblem .fp-icon {
    width: 8.5rem;
    height: 8.5rem;
  }
}

.mg-hero-art .mg-swap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Section heads: the icon sits above the title. */
.mg-head-icon {
  margin-bottom: 1.25rem;
}

.fp-faq-section .mg-head-icon {
  margin-right: auto;
  margin-left: auto;
}

.mg-page .fp-cta {
  --eng-paper: #fafaf9;
}

.fp-cta .mg-head-icon {
  margin-bottom: -0.5rem;
}

.mg-band-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.mg-band {
  justify-content: flex-start;
}

.mg-band p {
  flex: 1 1 18rem;
}

.mg-band .fp-btn-primary {
  margin-left: auto;
}

@media (max-width: 639px) {
  .mg-band .fp-btn-primary {
    margin-left: 0;
  }
}

.mg-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mg-card,
.mg-hub-card {
  --eng-paper: #fafaf9;
}

.mg-hub-card-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.mg-hub-card-head .fp-icon {
  transition: transform 0.4s ease;
}

.mg-hub-card:hover .mg-hub-card-head .fp-icon {
  transform: rotate(-6deg) translateY(-1px);
}

/* Steps: a dotted route down the left, an engraved waypoint at each step. */
.mg-step {
  position: relative;
  padding-left: 2rem;
}

.mg-step::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  box-sizing: border-box;
  border: 1px solid #1c1917;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #1c1917 0 0.5px, transparent 0.5px 2.5px);
}

.mg-step::after {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: -1.25rem;
  left: 0.5625rem;
  border-left: 1px dashed #a8a29e;
}

.mg-step:last-child::after {
  display: none;
}

/* Motion: one small loop per icon while its section is on screen (the shared .is-animating). */
.fp-icon .k-needle,
.fp-icon .k-helm {
  transform-box: view-box;
  transform-origin: 24px 24px;
}

.fp-icon .k-index {
  transform-box: view-box;
  transform-origin: 24px 6px;
}

.fp-icon .k-sway {
  transform-box: view-box;
  transform-origin: 24px 2px;
}

.fp-icon .k-tilt {
  transform-box: view-box;
  transform-origin: 24px 12.5px;
}

.is-animating .k-needle { animation-name: mg-k-needle; animation-duration: 5s; }
.is-animating .k-index { animation-name: mg-k-index; animation-duration: 5s; }
.is-animating .k-sway { animation-name: mg-k-sway; }
.is-animating .k-tilt { animation-name: mg-k-tilt; animation-duration: 5s; }
.is-animating .k-helm { animation-name: mg-k-helm; animation-duration: 6s; }

@keyframes mg-k-needle {
  0%, 100% { transform: rotate(-14deg); }
  30% { transform: rotate(9deg); }
  50% { transform: rotate(-4deg); }
  65%, 85% { transform: rotate(0deg); }
}

@keyframes mg-k-index {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg); }
}

@keyframes mg-k-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes mg-k-tilt {
  0%, 100% { transform: rotate(-5deg); }
  45%, 55% { transform: rotate(5deg); }
}

@keyframes mg-k-helm {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(28deg); }
  70% { transform: rotate(-12deg); }
}

/* The hero emblem draws itself in once, on load. */
.mg-hero-emblem .fp-icon > :not([class]):not([stroke-dasharray]):not(g) {
  stroke-dasharray: 160;
  animation: mg-draw 1.6s ease-out both;
}

@keyframes mg-draw {
  from { stroke-dashoffset: 160; fill-opacity: 0; }
  60% { fill-opacity: 0; }
  to { stroke-dashoffset: 0; fill-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-hub-card-head .fp-icon {
    transition: none;
  }

  .mg-hub-card:hover .mg-hub-card-head .fp-icon {
    transform: none;
  }
}

.landing-dark .mg-mini {
  color: #f5f5f4;
}

.landing-dark .mg-hero-art,
.landing-dark .mg-card,
.landing-dark .mg-hub-card {
  --eng-paper: #1c1a19;
}

.landing-dark .mg-hero-art {
  border-color: #2f2c29;
  background: #1c1a19;
}

.landing-dark .mg-hero-art .mg-swap {
  background: transparent;
}

.landing-dark .mg-hero-emblem {
  border-color: #2f2c29;
}

.landing-dark .mg-page .fp-cta {
  --eng-paper: #1f1d1b;
}

.landing-dark .mg-step::before {
  border-color: #f5f5f4;
  background: repeating-linear-gradient(45deg, #f5f5f4 0 0.5px, transparent 0.5px 2.5px);
}

.landing-dark .mg-step::after {
  border-color: #57534e;
}