/* ============================================================
   Seurch landing page (private build).

   Styled with the open core's design tokens, which are exposed as CSS
   variables by the committed search/tailwind.css and re-pointed under `.dark`,
   so every colour here flips automatically in dark mode. We alias them to
   local `--lp-*` vars with light-mode fallbacks (the open core may tree-shake
   unused theme vars out of `:root`; `.dark` always defines them), so the page
   renders correctly whether or not a given token survives that build.

   This is a standalone stylesheet because the private build intentionally does
   not run the open core's Tailwind CLI pipeline.

   House rules this file follows (see DESIGN.md):
   * indigo is the only chromatic voice, used sparingly;
   * elevation is the brand's own glow or a hairline border, never grey shadow;
   * one type family, hierarchy by weight and scale;
   * every modern affordance degrades: scroll-driven reveals, `::details-content`
     transitions and `backdrop-filter` are all behind @supports / @media guards.
   ============================================================ */

.lp-page {
  --lp-surface: var(--color-surface, #ffffff);
  --lp-elevated: var(--color-elevated, #f8fafc);
  --lp-edge: var(--color-edge, #e2e8f0);
  --lp-ink: var(--color-ink, #1e293b);
  --lp-ink-muted: var(--color-ink-muted, #64748b);
  --lp-ink-soft: var(--color-ink-soft, #94a3b8);
  --lp-brand: var(--color-brand, #4f46e5);
  --lp-brand-soft: var(--color-brand-soft, #eef2ff);

  /* Brand-tinted section wash that reads in BOTH themes (in dark, surface and
     elevated collapse to the same slate, so a flat elevated band would vanish). */
  --lp-band-bg: color-mix(in oklab, var(--lp-brand) 5%, var(--lp-surface));
  /* Hairline that reads slightly warmer than --edge, for internal rules. */
  --lp-rule: color-mix(in oklab, var(--lp-edge) 70%, var(--lp-surface));
  /* Elevation is the brand's own glow, never a grey drop shadow. */
  --lp-glow: 0 24px 60px -24px color-mix(in oklab, var(--lp-brand) 55%, transparent);
  --lp-ring: 0 0 0 3px color-mix(in oklab, var(--lp-brand) 32%, transparent);
  --lp-shell: 1120px;
  --lp-gutter: clamp(1.25rem, 4vw, 2rem);

  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Keeps the footer at the bottom of the viewport on short viewports. */
.lp-page > main {
  flex: 1 1 auto;
}

/* Two decorative layers behind the top of the page: the wave field (the inline
   `.lp-waves` SVG, first child of .lp-page) and the indigo bloom below. Both
   hang off .lp-page rather than the hero so they can run the full width without
   the negative insets that a centred, max-width hero would need (those overflow
   the page horizontally). Absolute positioning also keeps them out of the flex
   flow. */
.lp-waves,
.lp-page::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
/* Hairline contour lines flowing across the top of the page, faded out with a
   mask. Same quiet register the measured grid held — thin --edge rules, nothing
   that competes with the copy — but the lines drift rather than rule, which
   reads closer to water and terrain than to graph paper. The mask is wider than
   tall because the field wants horizontal breadth; it dies out well before the
   copy below the hero.
   `vector-effect: non-scaling-stroke` keeps every line a true hairline, since
   `preserveAspectRatio="slice"` scales the viewBox up on wide viewports. */
.lp-waves {
  height: 40rem;
  width: 100%;
  color: var(--lp-edge);
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 22%, #000 22%, transparent 76%);
  mask-image: radial-gradient(72% 68% at 50% 22%, #000 22%, transparent 76%);
}
/* The lines crossing the hero pick up a touch of the brand, so the field ties
   into the bloom instead of sitting on it as a separate grey layer. */
.lp-waves .lp-wave-brand {
  color: color-mix(in oklab, var(--lp-brand) 40%, var(--lp-edge));
}
/* One soft indigo bloom behind the headline: the only ambient colour up here. */
.lp-page::after {
  content: '';
  height: 34rem;
  background: radial-gradient(34% 52% at 50% 24%,
    color-mix(in oklab, var(--lp-brand) 15%, transparent), transparent 70%);
}
/* Backgrounds are dropped by the browser when printing, but an inline SVG is
   real markup and would print; it carries no information, so drop it too. */
@media print {
  .lp-waves {
    display: none;
  }
}

.lp-page ::selection {
  background: color-mix(in oklab, var(--lp-brand) 22%, transparent);
}

/* One focus treatment for every interactive element on the page. */
.lp-page :is(a, button, summary):focus-visible {
  outline: 2px solid var(--lp-brand);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* The sticky header would otherwise cover an anchored section's heading. */
.lp-page :is(#features, #open-source, #pricing, #main) {
  scroll-margin-top: 5.5rem;
}

/* ---- Skip link --------------------------------------------------------- */
.lp-skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--lp-brand);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.6rem;
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.lp-skip:focus-visible {
  transform: translateY(0);
}

/* ---- Top navigation ---------------------------------------------------- */
/* Sticky at every width: the bar is a single line on a phone too, because the
   section links live in the menu sheet below rather than wrapping onto a second
   row. It is also the containing block for that sheet, which hangs off its
   bottom edge. */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in oklab, var(--lp-surface) 92%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .lp-header {
    backdrop-filter: saturate(150%) blur(14px);
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .lp-header {
    background: var(--lp-surface);
  }
}
/* The hairline only appears once the page has actually scrolled, so the hero
   reads as one uninterrupted surface at rest. Chrome-only for now; elsewhere
   the header simply keeps its transparent border. */
@supports (animation-timeline: scroll()) {
  .lp-header {
    animation: lp-header-edge linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 6rem;
  }
}
@keyframes lp-header-edge {
  from { border-bottom-color: transparent; }
  to { border-bottom-color: var(--lp-edge); }
}
/* An open sheet is the page's surface up here, so hold the hairline under it
   whatever the scroll position says. */
.lp-header:has(.lp-menu[open]) {
  border-bottom-color: var(--lp-edge);
  animation: none;
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--lp-shell);
  margin: 0 auto;
  padding: 0.7rem var(--lp-gutter);
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
}
/* Below 768px the links are served by the menu sheet, not by this row: a
   wrapped strip of four pills under the brand crowded the top of every phone
   screen and read as leftovers rather than as navigation. */
.lp-nav-links {
  display: none;
  align-items: center;
}
.lp-nav-links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lp-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.55rem;
  border-radius: 9999px;
  transition: color 0.18s ease, background 0.18s ease;
}
.lp-nav-links a:hover {
  color: var(--lp-ink);
  background: color-mix(in oklab, var(--lp-ink) 6%, transparent);
}
.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
/* The theme <form> wraps the toggle for the no-JS fallback; collapse it so the
   button stays a direct flex child of .lp-nav-actions. */
.lp-theme-form {
  display: contents;
}
/* On a phone the bar holds the brand, the theme toggle and the menu button, and
   nothing else: Sign in leads the sheet instead, and the hero repeats it one
   scroll below. */
.lp-nav-actions .lp-nav-cta {
  display: none;
}
.lp-nav-cta {
  padding: 0.6rem 1.15rem;
  font-size: 0.9rem;
}

/* ---- Mobile menu (native <details>, no JS needed) ---------------------- */
.lp-menu {
  /* Static, so the panel below takes its box from .lp-header and spans the full
     width of the bar rather than the width of this button. */
  position: static;
}
.lp-menu-btn {
  list-style: none;   /* drop the default disclosure triangle */
}
.lp-menu-btn::-webkit-details-marker {
  display: none;
}
.lp-menu[open] .lp-menu-btn {
  color: var(--lp-brand);
  background: var(--lp-brand-soft);
  border-color: color-mix(in oklab, var(--lp-brand) 30%, var(--lp-edge));
}
/* One button, two glyphs: the bars become a cross while the sheet is open. */
.lp-menu-icon-close,
.lp-menu[open] .lp-menu-icon-open {
  display: none;
}
.lp-menu[open] .lp-menu-icon-close {
  display: inline;
}

/* The sheet itself: a full-width surface hanging off the bottom of the bar,
   held by the same hairline, so it reads as the header extending rather than as
   a card floating over the hero. Opaque, not the bar's tinted glass: the sheet
   covers running copy, and a nested backdrop-filter inside the (already
   blurred) header is not honoured consistently anyway. */
.lp-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0.25rem var(--lp-gutter) 1.15rem;
  background: var(--lp-surface);
  border-bottom: 1px solid var(--lp-edge);
}
.lp-menu-links {
  display: flex;
  flex-direction: column;
}
/* Rows that bleed to the edges of the sheet while their labels stay on the
   page gutter, in line with the brand above and the button below. Each row is
   its own 44px touch target, and they are told apart by the page's own hairline
   rather than by boxes. */
.lp-menu-links a {
  display: flex;
  align-items: center;
  min-height: 2.9rem;
  margin-inline: calc(var(--lp-gutter) * -1);
  padding: 0.35rem var(--lp-gutter);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lp-ink);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.lp-menu-links a + a {
  box-shadow: 0 -1px 0 var(--lp-rule);
}
.lp-menu-links a:hover,
.lp-menu-links a:active {
  color: var(--lp-brand);
  background: var(--lp-brand-soft);
  box-shadow: none;
}
.lp-menu-cta {
  margin-top: 1rem;
  width: 100%;
}
/* The sheet drops in rather than appearing; closing stays instant, since the
   element is gone from the box tree the moment `open` is dropped. */
@media (prefers-reduced-motion: no-preference) {
  .lp-menu[open] .lp-menu-panel {
    animation: lp-menu-drop 0.2s ease both;
  }
}
@keyframes lp-menu-drop {
  from { opacity: 0; translate: 0 -0.5rem; }
  to { opacity: 1; translate: 0 0; }
}

@media (min-width: 768px) {
  .lp-nav-links {
    display: flex;
    gap: 0.35rem;
    margin: 0 auto;
  }
  .lp-nav-links a {
    font-size: 0.92rem;
    padding: 0.4rem 0.7rem;
  }
  .lp-nav-actions {
    margin-left: 0;
  }
  .lp-nav-actions .lp-nav-cta {
    display: inline-flex;
  }
  .lp-menu {
    display: none;
  }
}

/* ---- Buttons ----------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 9999px;
  padding: 0.75rem 1.4rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-btn-lg {
  font-size: 1rem;
  padding: 0.9rem 1.7rem;
}
.lp-btn-primary {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  box-shadow: 0 6px 18px rgb(79 70 229 / 0.28);
}
.lp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgb(79 70 229 / 0.34);
}
.lp-btn-ghost {
  color: var(--lp-ink);
  background: var(--lp-surface);
  border: 1px solid var(--lp-edge);
}
.lp-btn-ghost:hover {
  color: var(--lp-brand);
  border-color: color-mix(in oklab, var(--lp-brand) 45%, var(--lp-edge));
  background: var(--lp-brand-soft);
}

.lp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px — meets the minimum touch target */
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--lp-edge);
  background: var(--lp-surface);
  color: var(--lp-ink-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lp-icon-btn:hover {
  background: var(--lp-elevated);
  border-color: color-mix(in oklab, var(--lp-brand) 35%, var(--lp-edge));
  color: var(--lp-ink);
}

/* ---- Hero -------------------------------------------------------------- */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.75rem;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--lp-gutter) clamp(1.5rem, 3vw, 2.25rem);
}
.lp-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  max-width: 46rem;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lp-brand);
  background: color-mix(in oklab, var(--lp-brand-soft) 70%, var(--lp-surface));
  border: 1px solid color-mix(in oklab, var(--lp-brand) 22%, transparent);
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
}
.lp-headline {
  font-size: clamp(2.3rem, 6.2vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--lp-ink);
  margin: 0;
  text-wrap: balance;
}
.lp-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--lp-ink-muted);
  max-width: 36rem;
  margin: 0;
  text-wrap: pretty;
}
.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.lp-note {
  font-size: 0.85rem;
  color: var(--lp-ink-muted);   /* was ink-soft — bumped to clear AA on white */
  margin: 0;
}

/* ---- Product preview (screenshot) -------------------------------------- */
.lp-preview {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0;
}
/* Soft ambient glow behind the frame, so the screenshot reads as "lit"
   rather than pasted flat onto the page. */
.lp-preview::before {
  content: '';
  position: absolute;
  /* Kept inside the frame's own box: bleeding sideways would widen the page's
     scrollable area at viewports where the preview is already full width. */
  inset: -8% 0 auto;
  height: 65%;
  background: radial-gradient(60% 60% at 50% 35%, color-mix(in oklab, var(--lp-brand) 28%, transparent), transparent 72%);
  filter: blur(48px);
  z-index: -1;
}
.lp-browser {
  border: 1px solid color-mix(in oklab, var(--lp-brand) 20%, var(--lp-edge));
  border-radius: 1.25rem;
  box-shadow: var(--lp-glow);
  overflow: hidden;
  background: var(--lp-elevated);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-preview:hover .lp-browser {
  transform: translateY(-4px);
  box-shadow: 0 32px 70px -26px color-mix(in oklab, var(--lp-brand) 60%, transparent);
}
/* A slim bar with just the real domain: enough to read as a browser without
   the dated traffic lights (which were also the page's only non-brand hues). */
.lp-browser-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--lp-edge);
  background: var(--lp-elevated);
}
.lp-browser-url {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 20rem;
  padding: 0.28rem 0.95rem;
  border-radius: 999px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-edge);
  color: var(--lp-ink-muted);
  font-size: 0.78rem;
}
.lp-browser-url i {
  font-size: 0.7rem;
  color: var(--lp-ink-soft);
}
.lp-shot-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1568 / 781;
  object-fit: cover;
  background: var(--lp-elevated);
}

/* ---- Source strip ------------------------------------------------------ */
/* Names the upstream engines instead of asserting "many sources". */
.lp-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin: 1.5rem 0 0;
}
.lp-sources-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lp-ink-muted);
}
.lp-source {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--lp-ink);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--lp-edge);
  border-radius: 9999px;
  background: var(--lp-surface);
}

/* ---- Sections ---------------------------------------------------------- */
.lp-section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--lp-gutter);
}
.lp-section-head {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.lp-section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lp-ink);
  margin: 0;
  text-wrap: balance;
}
.lp-section-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--lp-ink-muted);
  margin: 0;
  text-wrap: pretty;
}

/* Full-bleed band (open-source section), brand-tinted so it reads in dark too. */
.lp-band {
  max-width: none;
  background: var(--lp-band-bg);
  border-top: 1px solid var(--lp-edge);
  border-bottom: 1px solid var(--lp-edge);
}

/* ---- Capability board -------------------------------------------------- */
/* One bordered object ruled into cells by 1px gaps, rather than a drift of
   identical floating cards. Three lead cells on top, four supporting below;
   the 12-column track makes 3-up and 4-up rows share the same grid. */
.lp-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--lp-edge);
  border: 1px solid var(--lp-edge);
  border-radius: 1.25rem;
  overflow: hidden;
}
@media (min-width: 640px) {
  .lp-board {
    grid-template-columns: repeat(12, 1fr);
  }
  .lp-cell {
    grid-column: span 6;
  }
  .lp-cell-lead {
    grid-column: span 12;
  }
}
@media (min-width: 900px) {
  /* Order matters: a lead cell carries both classes, so its span has to win. */
  .lp-cell {
    grid-column: span 3;
  }
  .lp-cell-lead {
    grid-column: span 4;
  }
}
.lp-cell {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  background: var(--lp-surface);
  padding: 1.5rem;
  transition: background 0.2s ease;
}
.lp-cell:hover {
  background: color-mix(in oklab, var(--lp-brand) 4%, var(--lp-surface));
}
.lp-cell-lead {
  gap: 0.75rem;
  padding: 1.9rem 1.6rem;
}
.lp-cell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: var(--lp-brand-soft);
  border: 1px solid color-mix(in oklab, var(--lp-brand) 18%, transparent);
  color: var(--lp-brand);
  font-size: 1.15rem;
}
.lp-cell-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
  margin: 0;
}
.lp-cell-title i {
  color: var(--lp-brand);
  font-size: 0.95rem;
  width: 1.1rem;
  text-align: center;
}
.lp-cell-lead .lp-cell-title {
  font-size: 1.15rem;
}
.lp-cell-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--lp-ink-muted);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Open-source band: copy + code panel ------------------------------- */
.lp-os-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: center;
}
@media (min-width: 860px) {
  .lp-os-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}
.lp-os-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: left;
}
.lp-os-copy .lp-section-title {
  text-align: left;
}
/* The claims as facts, in place of a second eyebrow chip (DESIGN.md: one
   deliberate eyebrow per page, not one above every section). */
.lp-os-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.lp-os-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lp-ink);
}
.lp-os-facts i {
  color: var(--lp-brand);
  font-size: 0.85rem;
}
.lp-os-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
.lp-os-code {
  border: 1px solid var(--lp-edge);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--lp-surface);
  box-shadow: var(--lp-glow);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.lp-os-code-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--lp-edge);
  background: var(--lp-elevated);
  font-size: 0.78rem;
  color: var(--lp-ink-muted);
}
.lp-os-code-bar i {
  color: var(--lp-brand);
}
.lp-os-code-body {
  margin: 0;
  padding: 1.1rem 1.2rem;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--lp-ink);
  overflow-x: auto;
}
.lp-os-code-body .c { color: var(--lp-ink-muted); }
.lp-os-code-body .f { color: var(--lp-brand); font-weight: 600; }
.lp-os-code-body .s { color: var(--lp-brand); }

/* ---- Pricing: tax disclaimer -------------------------------------------- */
.lp-tax-note {
  font-size: 0.82rem;
  color: var(--lp-ink-muted);
  margin: 0;
}

/* ---- Pricing: the token scale ------------------------------------------
   The barème itself, inside the opening FAQ entry: what one query to each
   engine costs, then a search as their sum. The plan cards quote a single
   number and link down here, so the section leads with the offers and the
   arithmetic is one click away. No card chrome of its own: the FAQ entry it
   sits in already provides it. */
.lp-scale {
  margin: 0.9rem 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
/* The two halves of the explanation: the per-engine price, then the sum. */
.lp-scale-block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.lp-scale-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* The barème itself: one row per priced provider, its price, and whether a new
   account starts with it on. A table because it is one; the wrapper is what
   scrolls on a narrow phone, so the page itself never does. */
.lp-scale-table-wrap {
  overflow-x: auto;
}
.lp-scale-table {
  width: 100%;
  /* The same measure the FAQ gives its paragraphs (and so the worked sums
     below), so the two halves of the explanation line up. `ch` resolves
     against this element's own size, hence the matching font-size: every cell
     sets its own, so this one only settles the measure. */
  max-width: 58ch;
  font-size: 0.92rem;
  border-collapse: collapse;
  text-align: left;
}
/* The caption is the block's heading, so it keeps .lp-scale-label's type and
   just needs putting back on the left, above the rows. */
.lp-scale-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.7rem;
}
.lp-scale-table :is(th, td) {
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid var(--lp-rule);
  vertical-align: baseline;
}
.lp-scale-table :is(th, td):last-child {
  padding-right: 0;
}
.lp-scale-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--lp-ink-muted);
}
.lp-scale-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
.lp-scale-engine {
  font-size: 0.92rem;
  font-weight: 600;
}
.lp-scale-tokens {
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lp-brand);
  white-space: nowrap;
}
/* Icon + word, never colour alone: the glyph is decorative, the word carries it. */
.lp-scale-default {
  font-size: 0.86rem;
  color: var(--lp-ink-muted);
  white-space: nowrap;
}
.lp-scale-default i {
  margin-right: 0.4rem;
  font-size: 0.75rem;
}
.lp-scale-on {
  color: var(--lp-brand);
}
.lp-scale-off {
  color: var(--lp-ink-soft);
}
/* The worked sums. Laid out as real arithmetic so the rule reads itself:
   the engine names on the left, the total on the right. */
.lp-scale-sums {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lp-scale-sum {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.85rem;
  border-radius: 0.6rem;
  background: var(--lp-band-bg);
}
.lp-scale-terms {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1 1 auto;
}
/* The sum a new account actually runs, marked rather than merely listed: a
   brand hairline on the row and a quiet chip after the engine names. */
.lp-scale-sum-default {
  box-shadow: inset 2px 0 0 var(--lp-brand);
}
.lp-scale-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: var(--lp-brand-soft);
  color: var(--lp-brand);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  vertical-align: 0.05em;
}
.lp-scale-equals {
  color: var(--lp-ink-muted);
  font-weight: 600;
}
.lp-scale-total {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lp-brand);
  white-space: nowrap;
}
.lp-scale-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
}

/* The plan card's one figure, and the link to the arithmetic behind it. On its
   own line rather than trailing the sentence, so it starts at the same place in
   every card whatever the figure above it does to the wrapping — and so a narrow
   card wraps the whole link rather than breaking it mid-phrase. The size comes
   from .lp-plan-example around it. */
.lp-plan-example-link {
  display: block;
  color: var(--lp-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-plan-example-link:hover {
  text-decoration-thickness: 2px;
}

/* ---- Pricing: plan cards ------------------------------------------------ */
/* The cards are the columns of one object rather than four boxes that happen
   to stand side by side: every part of a card shares a row track with the same
   part of its neighbours, so the rule, the token price and the button sit at
   the same height right across the row however differently the copy above them
   wraps — in a longer translation too. The eight tracks, top to bottom:

     1  name and badge      2  price          3  price excluding VAT
     4  what the pack buys  5  the example    6  price per token
     7  renewal note        8  call to action

   Track 3 is empty on the free plan, and empty on every card while the VAT
   exemption holds (where it collapses to nothing), which is exactly why the
   parts are placed on numbered rows rather than left to flow: a line one card
   does not carry must not push everything below it out of step with the
   others. */
.lp-plans {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, auto);
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 700px) {
  .lp-plans { grid-template-columns: repeat(2, 1fr); }
}
/* The card passes those tracks through with `subgrid` instead of laying out
   rows of its own. A subgrid otherwise takes its gutters from the parent grid,
   whose 1.25rem is the space *between* cards, so the card zeroes them for the
   tracks it spans and the spacing inside it comes from the margins below. The
   gutter is then only ever what separates cards, stacked ones included.

   This degrades by itself: a browser without `subgrid` drops that one
   declaration and the card lays the same eight rows out on its own, so the
   cards keep their spacing and their equal heights and only stop lining up
   with one another — which is where the page stood before. */
.lp-plan {
  position: relative;
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  row-gap: 0;
  text-align: left;
  background: var(--lp-surface);
  border: 1px solid var(--lp-edge);
  border-radius: 1.25rem;
  padding: 1.75rem 1.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-plan:hover {
  border-color: color-mix(in oklab, var(--lp-brand) 40%, var(--lp-edge));
  transform: translateY(-2px);
}
.lp-plan-featured {
  border-color: color-mix(in oklab, var(--lp-brand) 55%, var(--lp-edge));
  box-shadow: 0 12px 34px -14px rgb(79 70 229 / 0.35);
}
.lp-plan-featured:hover {
  box-shadow: 0 18px 44px -16px rgb(79 70 229 / 0.42);
}
/* The head and the price are the two flex rows in the card. `align-self` keeps
   each at the top of its track, so a name or a period that wraps in one column
   only makes that track taller instead of re-centring the single lines beside
   it. Every other part is a plain block, which already draws from the top. */
.lp-plan-head {
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.75rem;
}
.lp-plan-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lp-ink);
  margin: 0;
}
/* Sits inside the header row rather than notched over the card's top edge:
   no overlap to work around, and it survives a long translated label. */
.lp-plan-badge {
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
}
.lp-plan-price {
  grid-row: 2;
  align-self: start;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0 0;
}
.lp-plan-amount {
  font-size: clamp(2rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--lp-ink);
}
.lp-plan-period {
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
}
.lp-plan-ht {
  grid-row: 3;
  font-size: 0.78rem;
  color: var(--lp-ink-muted);
  margin: 0.15rem 0 0;
}
/* Tracks 4 to 7, two spec blocks of a heading and a note each, handed down to
   the cards' shared tracks a second time so both halves line up column to
   column. What `gap` used to space is spaced by margins here, since the
   subgrid's own gutters are zero. The bottom margin is the gap before the
   call to action below it. */
.lp-plan-specs {
  grid-row: 4 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 1.35rem 0 1.6rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--lp-rule);
}
.lp-plan-spec {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.lp-plan-spec + .lp-plan-spec {
  margin-top: 0.9rem;
}
.lp-plan-quota {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lp-ink);
  margin: 0;
}
.lp-plan-rate {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lp-brand);
  margin: 0;
}
.lp-plan-example,
.lp-plan-overage {
  font-size: 0.83rem;
  color: var(--lp-ink-muted);
  margin: 0.25rem 0 0;
}
/* Track 8. The tallest label in the row sizes it and the other buttons stretch
   to match, so the four pills share a top and a bottom edge even where one of
   them needs two lines — which any of them can: the free plan's label is a
   sentence rather than a word, and a translation stretches the others, so they
   all wrap kindly rather than only the one that wraps in English. */
.lp-plan-cta {
  grid-row: 8;
  width: 100%;
  line-height: 1.25;
  text-align: center;
}

/* Four across (the free plan and the three packs) only once a column still has
   room for a price; below that they sit two by two, which is a full row either
   way rather than a three-and-one orphan. */
@media (min-width: 1060px) {
  .lp-plans { grid-template-columns: repeat(4, 1fr); }
  .lp-plan { padding: 1.6rem 1.25rem; }
  /* A quarter-width column is narrower than the button's own comfortable
     width, so the call to action tightens rather than wrapping mid-phrase. */
  .lp-plan-cta { padding-left: 0.9rem; padding-right: 0.9rem; font-size: 0.9rem; }
  /* The badge cannot wrap, so its width is the featured column's floor and
     every other column pays for it. Smaller here keeps the row nearly even,
     in the longer translations too. */
  .lp-plan-badge {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.55rem;
  }
}

/* ---- Pricing: FAQ (native <details>, no JS needed) --------------------- */
.lp-faq {
  max-width: 760px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lp-faq-item {
  background: var(--lp-surface);
  border: 1px solid var(--lp-edge);
  border-radius: 1rem;
  padding: 0 1.25rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lp-faq-item:hover,
.lp-faq-item[open] {
  border-color: color-mix(in oklab, var(--lp-brand) 35%, var(--lp-edge));
}
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lp-ink);
  cursor: pointer;
  list-style: none;   /* drop the default disclosure triangle */
}
.lp-faq-item summary::-webkit-details-marker {
  display: none;
}
/* A chevron drawn from borders, so it needs no icon font and rotates cleanly. */
.lp-faq-item summary::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.2rem;
  border-right: 2px solid var(--lp-ink-muted);
  border-bottom: 2px solid var(--lp-ink-muted);
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate 0.22s ease, border-color 0.22s ease;
}
.lp-faq-item[open] summary::after {
  rotate: -135deg;
  translate: 0 0.1rem;
  border-color: var(--lp-brand);
}
.lp-faq-item p {
  margin: 0 0 1.15rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--lp-ink-muted);
  max-width: 58ch;
}
/* Animate the disclosure where the browser can (Chrome 129+); elsewhere the
   panel simply snaps open as it always has. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-faq-item {
      interpolate-size: allow-keywords;
    }
    .lp-faq-item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.28s ease, content-visibility 0.28s ease allow-discrete;
    }
    .lp-faq-item[open]::details-content {
      block-size: auto;
    }
  }
}

/* ---- Pricing: payment note ---------------------------------------------- */
.lp-payment-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--lp-ink-muted);
}
.lp-payment-note i {
  color: var(--lp-brand);
}
/* Text stand-in for Mollie's wordmark (no licensed asset vendored here). */
.lp-mollie-mark {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  background: var(--lp-elevated);
  border: 1px solid var(--lp-edge);
  border-radius: 0.4rem;
  padding: 0.1rem 0.5rem;
}

/* ---- Footer ------------------------------------------------------------ */
.lp-footer {
  border-top: 1px solid var(--lp-edge);
  width: 100%;
  max-width: var(--lp-shell);
  margin: 0 auto;
  padding: 2rem var(--lp-gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--lp-ink-muted);
}
.lp-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.lp-footer-brand {
  font-size: 1.15rem;
}
.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.35rem;
}
.lp-footer a {
  color: var(--lp-ink-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.lp-footer a:hover {
  color: var(--lp-ink);
}
.lp-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lp-rule);
  /* ink-soft would sit near 2.6:1 on white; this line is real copy, so it
     stays on ink-muted to clear AA in both themes. */
  color: var(--lp-ink-muted);
}
.lp-footer-love {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
/* Indigo is the page's only chromatic voice, the heart included. */
.lp-footer-love .fa-heart {
  color: var(--lp-brand);
}

/* ---- Motion ------------------------------------------------------------ */
/* Scroll-driven reveals, no JS: supported browsers get an 12px rise as each
   block enters; everywhere else the content is simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-section-head,
    .lp-board,
    .lp-os-copy,
    .lp-os-code,
    .lp-plan,
    .lp-faq,
    .lp-payment-note {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
  }
  @keyframes lp-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  /* A printed page never scrolls, so nothing would ever reach its end frame. */
  @media print {
    .lp-section-head,
    .lp-board,
    .lp-os-copy,
    .lp-os-code,
    .lp-plan,
    .lp-faq,
    .lp-payment-note {
      animation: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn,
  .lp-icon-btn,
  .lp-skip,
  .lp-nav-links a,
  .lp-menu-links a,
  .lp-cell,
  .lp-plan,
  .lp-faq-item,
  .lp-footer a {
    transition: none;
  }
  .lp-btn-primary:hover,
  .lp-plan:hover,
  .lp-preview:hover .lp-browser {
    transform: none;
  }
}