/*
 * Marketing landing page.
 *
 * Loaded *after* app.css and only by landing.html, which is the whole trick:
 * rather than restating buttons, cards and the language picker in a dark skin,
 * this sheet re-points the tokens those components are already built on. One
 * :root block turns app.css dark for this page and for no other, because no
 * other page links this file.
 *
 * The neutral ramp and the indigo accent are dashboard.css's, on purpose. The
 * landing page is a promise about the product, and the product is that
 * dashboard — someone who signs up should arrive somewhere that looks like
 * where they came from. What is added here is what a marketing page needs and
 * a console has no use for: the aura behind the fold, the gradient headline,
 * the glass, and the entrance motion.
 *
 * No web fonts: the Content-Security-Policy sends font-src 'self' data: and
 * this app ships no CDN dependency, so the system stack in --font is the stack.
 */

:root {
  color-scheme: dark;

  /* --- app.css tokens, re-pointed ---------------------------------------- */
  --canvas: #07080c;
  --surface: #0e1117;
  --muted: #171c26;

  --border: #1c2230;
  --border-strong: #2b3444;

  --ink: #eef1f6;
  --ink-soft: #99a3b4;
  /* A shade lighter than the dashboard's faint tier. Everything wearing it
     here is 11-12px — axis ticks, kpi labels, the footer line — and at
     #6b7688 that text sat at 4.36:1 on this background, just under AA. */
  --ink-faint: #757f93;

  --accent: #6366f1;
  --accent-hover: #7c83f8;
  --accent-soft: #171a3a;

  --success: #34d399;
  --success-soft: #06281f;
  --warning: #fbbf24;
  --warning-soft: #2a2005;
  --danger: #f87171;
  --danger-soft: #2b1013;

  --radius: 16px;

  /* --- landing-only ------------------------------------------------------ */
  --surface-2: #131722;
  --surface-3: #191f2b;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --accent-ink: #c7d2fe;

  /* One gradient, reused for the headline sweep, the primary button and every
     accent hairline, so the page reads as one light source rather than three. */
  --grad: linear-gradient(100deg, #7dd3fc 0%, #818cf8 44%, #c084fc 100%);
  /* Every stop darkened just enough that white button text clears 4.5:1 on
     all of them — the previous #6366f1 and #8b5cf6 sat at 4.47 and 4.23, and
     on a gradient it is the lightest point that has to pass, not the average.
     Same hues, same sweep; the change is not visible side by side. */
  --grad-btn: linear-gradient(135deg, #5b5ee9 0%, #7340db 55%, #7f4ceb 100%);

  --glass: rgba(255, 255, 255, 0.028);
  --glass-line: rgba(255, 255, 255, 0.07);
  --glow-indigo: rgba(99, 102, 241, 0.34);
  --glow-violet: rgba(168, 85, 247, 0.26);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.62);
  --shadow-glow: 0 18px 46px -14px rgba(79, 70, 229, 0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 66px;
}

html {
  scroll-behavior: smooth;
  /* Anchors land below the sticky bar rather than under it. */
  scroll-padding-top: calc(var(--nav-h) + 20px);
  /* The glows behind the chat window and the closing panel are meant to spill
     past the layout, which widens the scroll area even though no element does.
     `clip` rather than `hidden` on purpose: `hidden` would make the root a
     scroll container, and the sticky nav above would start scrolling with the
     page instead of holding. */
  overflow-x: clip;
}

body.lp {
  background: var(--canvas);
  color: var(--ink);
  overflow-x: clip;
}

.lp ::selection {
  background: rgba(129, 140, 248, 0.32);
}

/* --- Backdrop ------------------------------------------------------------- */

/*
 * Two soft lights and a hairline grid, fixed behind everything. Fixed rather
 * than scrolling, so the page moves *through* the light instead of dragging it
 * along — which is what makes it read as depth rather than as a picture.
 */
.lp-aura,
.lp-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lp-aura {
  background:
    radial-gradient(58rem 34rem at 20% -10%, var(--glow-indigo), transparent 62%),
    radial-gradient(46rem 30rem at 88% 2%, var(--glow-violet), transparent 60%),
    radial-gradient(40rem 28rem at 50% 106%, rgba(56, 189, 248, 0.08), transparent 62%);
}

.lp-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 68px 68px;
  /* Faded out before it reaches the copy: the grid is felt at the edges of the
     fold and never competes with text. */
  -webkit-mask-image: radial-gradient(56rem 38rem at 50% 0%, #000, transparent 76%);
  mask-image: radial-gradient(56rem 38rem at 50% 0%, #000, transparent 76%);
}

/* Everything real sits above the backdrop. */
.lp-nav,
.lp-main,
.lp-foot {
  position: relative;
  z-index: 1;
}

/* --- Shell ---------------------------------------------------------------- */

.lp-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.lp-section {
  /* These sections also carry .lp-wrap, which owns the side padding. Setting
     `padding` here rather than `padding-block` would wipe it, and the copy
     would run to the edge of the screen on anything narrower than the wrap. */
  padding-block: 112px;
}

.lp-section + .lp-section {
  padding-block-start: 0;
}

.lp-head {
  max-width: 62ch;
  margin: 0 0 48px;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.lp-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--grad);
}

.lp-h2 {
  margin: 18px 0 0;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* <em> marks the half of a headline that carries the gradient. Semantic
   emphasis is what it actually is, and it keeps the markup free of a span
   whose only job is to be styled. */
.lp-h1 em,
.lp-final h2 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-lede {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* --- Navigation ----------------------------------------------------------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(7, 8, 12, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.lp-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  /* Fades at both ends, so the bar is separated from the page without a rule
     running edge to edge across a dark screen. */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.09) 20%,
    rgba(255, 255, 255, 0.09) 80%,
    transparent
  );
}

.lp-nav-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

/* The rounded mark the dashboard sidebar wears, in the marketing gradient, so
   the two surfaces share an identity rather than each inventing one. */
.lp-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--grad-btn);
  box-shadow: 0 6px 18px -6px var(--glow-indigo), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.lp-mark svg {
  width: 15px;
  height: 15px;
  color: #fff;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lp-nav-links a {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.lp-nav-links a:hover {
  color: var(--ink);
  background: var(--muted);
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* --- Buttons -------------------------------------------------------------- */

/* app.css already owns .btn. These are the two things a marketing page asks of
   it that an admin page never does: a gradient fill and a larger size. */
.lp .btn {
  border-radius: 10px;
  font-weight: 550;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.18s var(--ease), box-shadow 0.24s var(--ease), color 0.18s var(--ease);
}

.lp .btn:not(.btn-glass):not(.btn-ghost):not(.btn-secondary) {
  background-image: var(--grad-btn);
  background-size: 150% 150%;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
}

.lp .btn:not(.btn-glass):not(.btn-ghost):not(.btn-secondary):hover {
  background-position: 100% 0;
  box-shadow: 0 22px 54px -14px rgba(99, 102, 241, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}

/* Glass secondary: a hairline and a blur, no fill, so it stays the quieter of
   the pair without disappearing on a near-black page. */
.lp .btn-glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp .btn-glass:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ink);
  transform: translateY(-1px);
}

.lp .btn-ghost {
  background: transparent;
  color: var(--ink-soft);
}

.lp .btn-ghost:hover {
  background: var(--muted);
  color: var(--ink);
}

.lp .btn-lg {
  height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 0.9375rem;
}

/* The arrow leans in on hover — the only motion on the primary action, and
   enough to make it feel like a control rather than a coloured rectangle. */
.lp .arrow {
  display: inline-flex;
  transition: transform 0.22s var(--ease);
}

.lp .arrow svg {
  width: 1.05em;
  height: 1.05em;
}

.lp .btn:hover .arrow {
  transform: translateX(3px);
}

/* --- Language picker ------------------------------------------------------ */

/* app.css styles the picker for a white page; only the two places that assume
   white need saying again. */
.lp .lang-menu {
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.lp .lang-menu a {
  color: var(--ink-soft);
}

.lp .lang-menu a:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.lp .lang-menu a[aria-current="true"] {
  color: var(--accent-ink);
}

/* --- Hero ----------------------------------------------------------------- */

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: 68px;
  padding-block: 104px 118px;
}

.lp-pill {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.lp-pill b {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp-h1 {
  margin: 26px 0 0;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* The two halves of the promise sit on their own lines at every width: the
   product on one, the ten minutes on the other. */
.lp-h1 span,
.lp-h1 em {
  display: block;
}

.lp-hero .lp-lede {
  margin-top: 24px;
  font-size: 1.125rem;
  max-width: 52ch;
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* --- Trust points --------------------------------------------------------- */

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.lp-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lp-trust svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #34d399;
}

/* --- Chat preview --------------------------------------------------------- */

.lp-hero-visual {
  position: relative;
  min-width: 0;
}

/* The window's own light, so it sits in the page rather than on it. */
.lp-hero-visual::before {
  content: "";
  position: absolute;
  inset: -14% -10% -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-indigo), transparent 72%);
  filter: blur(18px);
  z-index: -1;
}

.cw {
  /* A <figure>, so the UA margin of `1em 40px` has to go — left alone it
     inset the whole window by 40px on each side. */
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #101420 0%, #0b0e15 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Browser chrome. Real enough to place the widget on a shop, quiet enough not
   to be the thing you look at. */
.cw-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
}

.cw-dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.cw-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2c3444;
}

.cw-dots i:first-child {
  background: #46323a;
}

.cw-dots i:nth-child(2) {
  background: #45402c;
}

.cw-url {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.cw-url svg {
  width: 11px;
  height: 11px;
  flex: none;
}

.cw-url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Assistant header inside the window. */
.cw-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}

.cw-avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--grad-btn);
  box-shadow: 0 6px 18px -8px var(--glow-indigo), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cw-avatar svg {
  width: 17px;
  height: 17px;
  color: #fff;
}

.cw-who {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.cw-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.cw-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: cw-live 2.6s var(--ease) infinite;
}

@keyframes cw-live {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
  }
}

.cw-badge {
  margin-left: auto;
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cw-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
}

.cw-turn {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 88%;
}

.cw-turn.from-customer {
  align-self: flex-end;
  align-items: flex-end;
}

.cw-role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cw-bubble {
  margin: 0;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.55;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
}

.from-customer .cw-bubble {
  border-bottom-right-radius: 5px;
  background: var(--surface-3);
  color: var(--ink);
}

.from-assistant .cw-bubble {
  border-bottom-left-radius: 5px;
  border-color: rgba(129, 140, 248, 0.22);
  background: linear-gradient(
    150deg,
    rgba(99, 102, 241, 0.16) 0%,
    rgba(139, 92, 246, 0.07) 60%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

/* The product card the answer refers to. This is the part that has to look
   like the real widget: a thumbnail, the name, the price and one way on. */
.cw-product {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 2px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.cw-product:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.cw-thumb {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #1d2433 0%, #141926 100%);
  border: 1px solid var(--border);
}

.cw-thumb svg {
  width: 32px;
  height: 32px;
  color: #7f8ba3;
}

.cw-product-meta {
  min-width: 0;
  flex: 1;
  line-height: 1.4;
}

.cw-product-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-product-sub {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.cw-product-price {
  margin-top: 3px;
  font-size: 0.9375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.cw-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  align-self: center;
  padding: 8px 13px;
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
  background: rgba(99, 102, 241, 0.14);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.cw-product:hover .cw-product-cta {
  background: rgba(99, 102, 241, 0.24);
  border-color: rgba(129, 140, 248, 0.5);
}

/* Composer. Decorative — the real one is in the widget — so it is hidden from
   assistive technology in the markup rather than made to look interactive. */
.cw-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
}

.cw-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* A caret that blinks: the cheapest way to make a still frame read as live. */
.cw-input::after {
  content: "";
  width: 1px;
  height: 15px;
  margin-left: 2px;
  background: var(--accent-ink);
  animation: cw-caret 1.15s step-end infinite;
}

@keyframes cw-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.cw-send {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-btn);
  box-shadow: 0 8px 20px -8px var(--glow-indigo);
}

.cw-send svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* --- How it works --------------------------------------------------------- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}

.lp-step {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
    box-shadow 0.28s var(--ease);
}

.lp-step:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* A hairline of the accent gradient along the top edge, brightening on hover.
   Cheaper than a border-image and it can be animated. */
.lp-step::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad);
  opacity: 0.28;
  transition: opacity 0.22s var(--ease);
}

.lp-step:hover::before {
  opacity: 0.85;
}

.lp-step-n {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

.lp-step-n::before {
  content: "0" counter(step);
}

.lp-step h3 {
  margin: 18px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-step p {
  margin: 9px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- Why ------------------------------------------------------------------ */

.lp-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lp-feature {
  padding: 24px 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.lp-feature:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

.lp-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(129, 140, 248, 0.22);
  background: linear-gradient(150deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.08));
}

.lp-ico svg {
  width: 19px;
  height: 19px;
  color: var(--accent-ink);
}

.lp-feature h3 {
  margin: 17px 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-feature p {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--ink-soft);
}

/* --- Dashboard preview ---------------------------------------------------- */

.db {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #0f131c 0%, #0a0d14 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.db-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
}

.db-inner {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
}

/* A real sidebar, not a suggestion of one: the same five destinations the
   product actually has. */
.db-side {
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  background: rgba(0, 0, 0, 0.2);
}

.db-side-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px 16px;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.db-side-brand .lp-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.db-side-brand .lp-mark svg {
  width: 13px;
  height: 13px;
}

.db-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.db-nav span svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.db-nav .on {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.db-main {
  padding: 22px 24px 26px;
  min-width: 0;
}

.db-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.db-head h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.db-head p {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.db-range {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.db-range span {
  padding: 4px 10px;
  border-radius: 7px;
}

.db-range .on {
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 600;
}

.db-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.db-kpi {
  padding: 14px 15px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.db-kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.db-kpi-value {
  margin-top: 7px;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.db-kpi-delta {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.db-kpi-delta b {
  font-weight: 600;
  color: #34d399;
}

.db-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.db-panel {
  padding: 16px 17px 17px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}

.db-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* CSS bars rather than a chart library: it is a picture of a chart, and the
   page ships no JavaScript. */
.db-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 92px;
}

.db-chart i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #818cf8 0%, rgba(99, 102, 241, 0.25) 100%);
  opacity: 0.55;
}

.db-chart i:nth-last-child(-n + 3) {
  opacity: 1;
  background: linear-gradient(180deg, #a78bfa 0%, rgba(139, 92, 246, 0.3) 100%);
}

.db-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

.db-rows {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.db-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}

.db-row-label {
  color: var(--ink-soft);
}

.db-row-value {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.db-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.db-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
}

.db-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #34d399;
}

/* --- Pricing -------------------------------------------------------------- */

/*
 * Three plan cards, built from app/web/plans.py rather than written out three
 * times. Same glass, hairline and radius as the feature cards above, so the
 * section reads as part of this page rather than a pricing table dropped onto
 * it — what separates the recommended plan is the border, the glow and a
 * filled button, not a different shape.
 */
.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease),
    transform 0.22s var(--ease), box-shadow 0.28s var(--ease);
}

.lp-plan:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* The recommended plan. Lit rather than enlarged: scaling a grid item pushes
   it into its neighbours' gap at exactly the widths where the gap is smallest. */
.lp-plan.is-featured {
  border-color: rgba(129, 140, 248, 0.42);
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 46%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow: 0 22px 60px -26px var(--glow-indigo);
}

.lp-plan.is-featured:hover {
  border-color: rgba(129, 140, 248, 0.62);
  box-shadow: 0 30px 72px -24px rgba(99, 102, 241, 0.55);
}

/* The same gradient hairline the how-it-works steps wear, at full strength. */
.lp-plan.is-featured::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad);
}

.lp-plan-badge {
  position: absolute;
  top: 26px;
  right: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(129, 140, 248, 0.34);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-plan-name {
  margin: 0;
  /* Room for the badge floating above the right of this line. Only the
     recommended card has one, but reserving it on all three keeps the heading
     baseline identical across the row — and a longer plan name than "Growth"
     cannot slide underneath it. */
  padding-right: 7.5rem;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--accent-ink);
}

.lp-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 0;
}

.lp-plan-amount {
  font-size: 2.75rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.lp-plan-period {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.lp-plan-desc {
  margin: 14px 0 0;
  min-height: 2.9em;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.lp-plan-cta {
  width: 100%;
  margin-top: 22px;
}

.lp-plan-inherits {
  margin: 26px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Without a preceding "everything in X" line the list still needs the same
   air above it, or the first plan's features sit tight under its button. */
.lp-plan-cta + .lp-plan-features {
  margin-top: 26px;
}

.lp-plan-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.lp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lp-plan-features svg {
  width: 16px;
  height: 16px;
  flex: none;
  /* Nudged onto the cap height of the line it labels. */
  margin-top: 0.14em;
  color: var(--accent-ink);
}

.lp-plans-note {
  margin: 24px 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* --- Final call to action -------------------------------------------------- */

.lp-final {
  position: relative;
  overflow: hidden;
  padding: 84px 40px 90px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  text-align: center;
  background: linear-gradient(180deg, #101420 0%, #0a0d14 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lp-final::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto;
  height: 150%;
  background:
    radial-gradient(34rem 18rem at 50% 0%, var(--glow-indigo), transparent 66%),
    radial-gradient(28rem 16rem at 78% 12%, var(--glow-violet), transparent 62%);
  pointer-events: none;
}

.lp-final > * {
  position: relative;
}

.lp-final h2 {
  margin: 0;
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lp-final h2 span {
  display: block;
}

.lp-final p {
  margin: 18px auto 0;
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.lp-final .lp-cta-row {
  justify-content: center;
}

.lp-final .lp-trust {
  justify-content: center;
  margin-top: 30px;
}

/* --- Footer --------------------------------------------------------------- */

.lp-foot {
  margin-top: 112px;
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
}

.lp-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.lp-foot-legal {
  margin: 18px auto 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.lp-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-left: auto;
}

.lp-foot a {
  color: var(--ink-faint);
  text-decoration: none;
}

.lp-foot a:hover {
  color: var(--ink);
}

/* --- Entrance motion ------------------------------------------------------- */

/*
 * Above the fold, motion runs on a timer: those elements are on screen before
 * a scroll can happen. Everything below uses a scroll-driven timeline inside
 * an @supports, so a browser without it simply gets the page — the reveal is
 * added to visible content, never the other way round, and nothing can end up
 * stuck at opacity 0.
 */
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lp-in {
  animation: lp-rise 0.72s var(--ease) both;
}

.lp-in-1 {
  animation-delay: 0.06s;
}
.lp-in-2 {
  animation-delay: 0.14s;
}
.lp-in-3 {
  animation-delay: 0.22s;
}
.lp-in-4 {
  animation-delay: 0.3s;
}
.lp-in-5 {
  animation-delay: 0.38s;
}

@supports (animation-timeline: view()) {
  .lp-reveal {
    /* Longhands, not the `animation` shorthand: the shorthand resets
       animation-duration to 0s, and a scroll-driven animation needs it left at
       `auto` — that is what makes the range, rather than a clock, drive the
       progress. With 0s every element simply snapped to its end state. */
    animation-name: lp-rise;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
  }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .lp-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding-block: 72px 88px;
  }

  .lp-hero-visual {
    max-width: 560px;
    width: 100%;
  }

  .lp-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-plans {
    gap: 14px;
  }

  .lp-plan {
    padding: 24px 20px 26px;
  }

  .lp-plan-amount {
    font-size: 2.25rem;
  }

  .lp-plan-badge {
    top: 22px;
    right: 18px;
  }

  /* The mini dashboard keeps its shape by dropping the rail rather than
     squeezing it: a 100px sidebar is not what the product looks like. */
  .db-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .db-side {
    display: none;
  }

  .db-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* Anchors to sections that are directly below anyway; the two actions are
     what has to survive at this width. */
  .lp-nav-links {
    display: none;
  }

  .lp-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column rather than a 2 + 1 orphan: three tiers read as a ladder, and a
     lone card centred under a pair reads as an afterthought. */
  .lp-plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Stacked, every card is read on its own, so the reserved line that kept
     three descriptions on a shared baseline is just a gap. */
  .lp-plan-desc {
    min-height: 0;
  }

  .db-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .lp-wrap,
  .lp-nav-inner {
    padding: 0 20px;
  }

  .lp-section {
    padding-block: 84px;
  }

  .lp-hero {
    padding-block: 56px 72px;
  }

  .lp-why {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-cta-row .btn {
    width: 100%;
  }

  .lp-final {
    padding: 64px 22px 68px;
  }

  .cw-turn {
    max-width: 96%;
  }

  .cw-product {
    flex-wrap: wrap;
  }

  .cw-product-cta {
    width: 100%;
    justify-content: center;
  }

  .lp-foot-links {
    margin-left: 0;
  }
}

@media (max-width: 460px) {
  .lp-brand-name {
    display: none;
  }

  .db-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* app.css already flattens every animation under prefers-reduced-motion with
   !important, which covers the keyframes above. The scroll-driven timeline is
   not a duration, so it is switched off here explicitly. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* app.css already collapses every animation-duration to 0.01ms, but not the
     staggered delays below — which would leave the hero blank for a third of a
     second before snapping in. Switching both off outright is the honest
     reading of the preference anyway: no motion, content immediately. */
  .lp-in,
  .lp-reveal {
    animation: none;
  }
}