/* How it works (docs/DESIGN.md §20, "How it works, for a person new to
   agents", 2026-10-29): directly under the hero, on the ink stage
   (.lp-dark). The steps on a rail, each with a still scene: the address,
   the link added to the AI, the first chat, Ezra's site when the
   showcase is there, and the profit on the Dashboard. Then the four
   guarantees and one call to action.
   Nothing moves. Light only, like the page. */

/* — The steps on the rail ——————————————————————————————— */
.lp-how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-how-step {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 0.5rem + 3vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
}

.lp-how-step:last-child {
  padding-bottom: 0;
}

/* The rail: a hairline from a step's number down to the next number. */
.lp-how-step::before {
  content: "";
  position: absolute;
  top: 3.5rem;
  bottom: 0;
  left: calc(1.75rem - 0.5px);
  width: 1px;
  background: rgba(234, 240, 255, 0.16);
}

.lp-how-step:last-child::before {
  display: none;
}

.lp-how-num {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-ink-2);
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.2);
  color: var(--color-on-ink);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
}

.lp-how-copy h3 {
  margin-top: 0.55rem;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.lp-how-copy h3 + p {
  max-width: 30rem;
  margin-top: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.55;
  color: var(--color-on-ink-muted);
  text-wrap: pretty;
}

/* The way to /agents, for a person who uses an app in a terminal or an
   editor. */
.lp-how-more {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.lp-how-more a {
  color: var(--color-on-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(234, 240, 255, 0.35);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast) ease;
}

/* — The cards: paper on the ink, as the product's own screens are ———— */
.lp-how-card {
  display: grid;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem 1.25rem;
  border-radius: 18px;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  color: var(--color-ink);
}

.lp-how-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lp-how-label {
  margin-bottom: -0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
}

.lp-how-field {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lp-how-field span {
  color: var(--color-muted);
}

.lp-how-field b {
  font-weight: 500;
}

.lp-how-button {
  justify-self: start;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.lp-how-ok {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1a7f52;
}

.lp-how-ok::before {
  content: "✓ ";
  font-weight: 700;
}

/* — The first chat: the person on the right, the AI on the left ———— */
.lp-how-you,
.lp-how-ai {
  max-width: 85%;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.lp-how-you {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.lp-how-ai {
  justify-self: start;
  border-radius: 14px 14px 14px 4px;
  background: var(--color-paper-2);
}

.lp-how-looks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lp-how-looks span {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  font-size: 0.8rem;
}

.lp-how-looks .lp-how-look-on {
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px var(--color-accent);
  color: var(--color-accent-strong);
  font-weight: 600;
}

.lp-how-chat .lp-how-ok {
  margin-top: 0.3rem;
}

/* — It's live and Profit: a window under the step's words, as wide as
   the words and a scene together ———————————————————————— */
.lp-how-step-live .lp-how-copy,
.lp-how-step-live .lp-how-scene,
.lp-how-step-profit .lp-how-copy,
.lp-how-step-profit .lp-how-scene {
  grid-column: 2 / -1;
}

.lp-how-site,
.lp-how-dash {
  border-radius: 18px;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Ezra's site. The frame takes no pointer. */

.lp-how-site-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper-2);
}

.lp-how-site-bar i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.lp-how-site-bar span {
  flex: 0 1 26rem;
  margin-left: 0.8rem;
  padding: 0.25rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-how-site iframe {
  display: block;
  width: 100%;
  height: clamp(32rem, 24rem + 20vw, 44rem);
  border: 0;
  background: #0c1a2e;
  pointer-events: none;
}

/* — Profit: the Dashboard's Overview as the admin sets it: the title,
   the tabs and the period, the six figures on one panel with hairlines
   between, and visitors by day ——————————————————————————— */
.lp-how-dash {
  padding: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  background: var(--color-canvas);
  color: var(--color-ink);
}

.lp-how-dash-top,
.lp-how-dash-bar,
.lp-how-dash-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lp-how-dash-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lp-how-dash-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9rem;
  color: var(--color-body);
  white-space: nowrap;
}

.lp-how-dash-live i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.lp-how-dash-bar {
  margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

.lp-how-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: -0.9rem;
}

.lp-how-dash-tabs span {
  padding: 0.45em 1.1em;
  border-radius: var(--radius-pill);
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
  font-weight: 500;
  color: var(--color-body);
  white-space: nowrap;
}

.lp-how-dash-tabs .lp-how-dash-tab-on {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  color: var(--color-ink);
}

.lp-how-dash-period {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-accent-strong);
}

.lp-how-dash-period svg {
  width: 1rem;
  height: 1rem;
}

.lp-how-dash-heads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 18px;
  background: var(--color-line);
}

.lp-how-dash-heads > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1rem, 0.7rem + 1vw, 1.6rem) clamp(1rem, 0.7rem + 1vw, 1.75rem) clamp(0.8rem, 0.6rem + 0.6vw, 1.1rem);
  background: var(--color-paper);
}

.lp-how-dash-word {
  font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
  font-weight: 500;
  color: var(--color-body);
}

.lp-how-dash-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  margin-top: 0.35rem;
}

.lp-how-dash-figure b {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.lp-how-dash-figure i {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--color-muted);
}

.lp-how-dash-heads [data-sparkline] {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 1.8rem + 2vw, 3.75rem);
  margin-top: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  color: var(--color-accent);
}

.lp-how-dash-chart {
  margin-top: clamp(1rem, 0.7rem + 1vw, 1.75rem);
  padding: clamp(1rem, 0.7rem + 1vw, 1.6rem) clamp(1rem, 0.7rem + 1vw, 1.75rem) clamp(0.8rem, 0.6rem + 0.6vw, 1.1rem);
  border: 1px solid var(--color-line-strong);
  border-radius: 18px;
  background: var(--color-paper);
}

.lp-how-dash-chart-head b {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.lp-how-dash-chart-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lp-how-dash-chart-head svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* The chart's grid: three hairlines over the axis, the line on them
   (landing_plot's .lp-dash-line). */
.lp-how-dash-plot {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  height: clamp(8rem, 5rem + 10vw, 15rem);
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--color-line);
}

.lp-how-dash-plot i {
  border-top: 1px solid var(--color-line);
}

.lp-how-dash-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* — The guarantees ——————————————————————————————————— */
.lp-how-promises {
  margin-top: clamp(4rem, 2.5rem + 4vw, 6.5rem);
  padding-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
  border-top: 1px solid rgba(234, 240, 255, 0.12);
}

.lp-how-promises-title {
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.lp-how-promises ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-how-promises h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.lp-how-promises h4::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 0.95rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(126, 226, 168, 0.45);
  color: #7ee2a8;
  font-size: 0.8rem;
}

.lp-how-promises p {
  margin-top: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-on-ink-muted);
}

/* — The call to action: a glass pill on the ink, the agent's orb, the
   words, and a paper round with the arrow. Still: a hover changes colour,
   never place. — */
.lp-how-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(234, 240, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.24);
  color: var(--color-on-ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.lp-how-cta .lp-orb {
  width: 1.35rem;
  height: 1.35rem;
}

.lp-how-cta-word {
  font-size: 1.05rem;
  white-space: nowrap;
}

.lp-how-cta-go {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-on-ink);
  color: var(--color-ink);
  font-size: 1.1rem;
  transition: background-color var(--dur-fast) ease;
}

@media (hover: hover) {
  .lp-how-more a:hover {
    text-decoration-color: currentColor;
  }

  .lp-how-cta:hover {
    background: rgba(234, 240, 255, 0.11);
    box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.45);
  }

  .lp-how-cta:hover .lp-how-cta-go {
    background: #fff;
  }
}

/* — Narrower ——————————————————————————————————————— */
@media (max-width: 68rem) {
  .lp-how-promises ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The scene goes under the words, beside the rail. */
@media (max-width: 63.9375rem) {
  .lp-how-step {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .lp-how-scene {
    grid-column: 2;
  }
}

/* One column: the number over its step, and no rail. */
@media (max-width: 47.9375rem) {
  .lp-how-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .lp-how-step::before {
    display: none;
  }

  .lp-how-scene,
  .lp-how-step-live .lp-how-copy,
  .lp-how-step-live .lp-how-scene,
  .lp-how-step-profit .lp-how-copy,
  .lp-how-step-profit .lp-how-scene {
    grid-column: auto;
  }

  /* The Dashboard as the admin sets it on a phone: two figures across,
     and the tabs over the period. */
  .lp-how-dash-heads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-how-dash-live {
    display: none;
  }

  .lp-how-dash-bar {
    flex-wrap: wrap;
  }

  .lp-how-num {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.1rem;
  }

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