/* ==========================================================================
   landing.css — index.html only (lp- prefix). v2 "Lights Out".
   Built on nett.css tokens and components; never redefines a token or a shared
   component's role. The page sits in the shared app shell (UsePaid home):
   status strip, sidebar, top bar with the search pill, bottom tab bar on phones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Frame: main runs full width so the receipt wall can bleed to the shell
   edges; every section re-centres its content on the 1070 column.
   -------------------------------------------------------------------------- */
.nt-page.lp { max-width: none; padding: 0; }
.lp-wrap { width: 100%; max-width: var(--nt-frame); margin-inline: auto; padding-inline: var(--nt-gutter); }
.lp-keep, .lp-nw { white-space: nowrap; }
.lp-phrase { white-space: nowrap; }   /* hero: phrases never split, so phones read "Settled on / Robinhood Chain, / with a public receipt." */
@media (max-width: 479px) { .lp-keep, .lp-nw { white-space: normal; } }

/* One white pill per view: the top-bar primary steps aside while another primary is on
   screen, and the secondary slides into its place (no gap). */
.lp-topcta { transition: opacity var(--nt-d-hover) var(--nt-ease), visibility 0s linear var(--nt-d-hover); }
html.lp-cta-off .lp-topcta { visibility: hidden; opacity: 0; }
html:not(.lp-cta-off) .lp-topcta { transition-delay: 0s; }
html.lp-cta-off .lp-topsec { transform: translateX(var(--lp-cta-shift, 0px)); }
html.lp-cta-ready .lp-topsec { transition: transform var(--nt-d-insert) var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease); }
@media (prefers-reduced-motion: reduce) { html.lp-cta-ready .lp-topsec { transition: background-color var(--nt-d-hover) var(--nt-ease); } }

/* --------------------------------------------------------------------------
   Section rhythm: hairline dividers (X Money), space, no background bands.
   Head = mono eyebrow + display headline (two-tone when it is two sentences)
   + grey lead in the right-hand columns.
   -------------------------------------------------------------------------- */
.lp-sec { margin-top: 80px; padding-top: 80px; }
.lp-sec > .lp-wrap { position: relative; }
.lp-sec > .lp-wrap::before {
  content: "";
  position: absolute;
  top: -80px;
  left: var(--nt-gutter);
  right: var(--nt-gutter);
  height: 1px;
  background: var(--nt-border);
}
.lp-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--nt-grid-gap);
  row-gap: 16px;
  align-items: end;
  margin-bottom: 40px;
}
.lp-head__top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 24px; }
.lp-head__aside { margin-left: auto; }
.lp-head > h2 { grid-column: 1 / span 7; }
.lp-head__lead {
  grid-column: 8 / span 5;
  font-size: var(--nt-fs-ui);
  line-height: 1.5;
  color: var(--nt-muted);
  text-wrap: pretty;
}
.lp-head__lead .nt-at { color: var(--nt-text); font-weight: var(--nt-w-medium); }
/* X Money section label: a small square, then the name. */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  line-height: var(--nt-lh-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  color: var(--nt-text);
}
.lp-eyebrow::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--nt-muted); }
/* Side heads (Pay-to-Buy, FAQ, Request): one column, lead under the headline. */
.lp-head--side { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: 0; }
.lp-head--side > h2 { max-width: 14ch; }
.lp-head--side .lp-head__lead { max-width: 40ch; }
.lp-split, .lp-buywrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  row-gap: 40px;
  align-items: start;
}
@media (max-width: 1023px) {
  .lp-head > h2 { grid-column: 1 / span 11; }
  .lp-head__lead { grid-column: 1 / span 9; max-width: 60ch; }
  .lp-split, .lp-buywrap { grid-template-columns: minmax(0, 1fr); }
  .lp-head--side > h2 { max-width: 20ch; }
}
@media (max-width: 767px) {
  .lp-sec { margin-top: 56px; padding-top: 56px; }
  .lp-sec > .lp-wrap::before { top: -56px; }
  .lp-head { margin-bottom: 28px; row-gap: 12px; }
  .lp-head > h2, .lp-head__lead { grid-column: 1 / -1; }
  .lp-head__aside { margin-left: 0; }
  .lp-head__top > .nt-label.lp-head__aside { display: none; }   /* decorative restatement; chips stay */
  .lp-split, .lp-buywrap { row-gap: 28px; }
}

/* Sub-blocks inside a section (netting, what if, onboarding): copy left, object right.
   They are sub-sections, not sections: a plain mono label (no ■ kicker) and a 28px title,
   between the 48px section display and the 20px card titles. */
.lp-sub {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  row-gap: 28px;
  align-items: start;
  margin-top: 88px;
}
.lp-sub__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lp-sub .lp-eyebrow { color: var(--nt-muted); }
.lp-sub .lp-eyebrow::before { content: none; }
.lp-sub__title { max-width: 22ch; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -0.02em; }
.lp-sub__text { max-width: 44ch; font-size: var(--nt-fs-ui); line-height: 1.5; color: var(--nt-muted); text-wrap: pretty; }
.lp-sub__link { margin-top: 4px; font-size: var(--nt-fs-ui); }
/* Stacked variant: the object needs the full column (What if). */
.lp-sub--stack { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.lp-sub--stack .lp-sub__copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--nt-grid-gap); row-gap: 14px; align-items: end; }
.lp-sub--stack .lp-sub__copy > .lp-eyebrow { grid-column: 1 / -1; justify-self: start; }
.lp-sub--stack .lp-sub__title { grid-column: 1 / span 7; }
.lp-sub--stack .lp-sub__text { grid-column: 8 / span 5; justify-self: start; }   /* same right column as every section lead */
@media (max-width: 1199px) {
  .lp-sub { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
  .lp-sub__title { max-width: 30ch; }
}
@media (max-width: 1023px) { .lp-sub--stack .lp-sub__copy { display: flex; align-items: flex-start; } }
@media (max-width: 767px) { .lp-sub { margin-top: 56px; } }

/* UsePaid list head: "Recent payments  [chip]           Paused  (Pause)" */
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; margin-bottom: 12px; }
.lp-bar__title { font-size: var(--nt-fs-title); line-height: var(--nt-lh-title); letter-spacing: var(--nt-ls-title); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-bar__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 639px) {
  .nt-paused { display: none; }   /* no hover on touch; the pill says Pause / Resume */
  .lp-bar { gap: 8px; }
  .lp-bar__title { flex-basis: 100%; }   /* title on its own line; chips and controls share the next */
  .lp-bar__end { gap: 8px; }
}

/* ==========================================================================
   HERO — centred two-tone headline (UsePaid, X Money), grey sub-copy, the one
   white pill + an outlined pill, a KPI card with rolling digits, then the wall.
   ========================================================================== */
.lp-hero { padding-top: 72px; }
.lp-hero > .lp-wrap { text-align: center; }
.lp-hero__h { max-width: 16em; margin-inline: auto; font-size: clamp(36px, 5vw, 64px); }
.lp-hero__l1, .lp-hero__h .nt-tone { display: block; }
.lp-hero__h .nt-tone { max-width: 13em; margin-inline: auto; }
.lp-hero__sub { max-width: 50ch; margin: 24px auto 0; }
.lp-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.lp-hero__fine { margin-top: 16px; font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); color: var(--nt-muted); }

.lp-kpis { margin-top: 40px; padding: 24px 28px 28px; text-align: left; }
.lp-kpis__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lp-kpis__title { font-size: var(--nt-fs-title); line-height: var(--nt-lh-title); letter-spacing: var(--nt-ls-title); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-kpis__chip { margin-left: auto; }
.lp-kpis__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 28px 0 0; }
.lp-kpi .nt-kpi__value { font-size: min(52px, 15cqi); letter-spacing: -0.03em; line-height: 1.08; }
.lp-kpi dd { margin: 0; }
.lp-kpi .nt-kpi__label { color: var(--nt-muted); }
.lp-kpi .nt-kpi__sub { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); max-width: 40ch; text-wrap: pretty; }

/* The wall bleeds to the edges of the main column (UsePaid home). */
.lp-wall { margin-top: 56px; }
.lp-wall .nt-marquee__group > .nt-post { width: 360px; }
.lp-wall__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.lp-wall__cap { font-size: var(--nt-fs-small); line-height: 1.4; color: var(--nt-muted); }
.lp-wall__cap-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-wall__cap-motion { display: none; }
  .lp-wall__cap-still { display: inline; }
}

@media (max-width: 1099px) {
  .lp-kpis__row { gap: 24px; }
}
@media (max-width: 767px) {
  .lp-hero { padding-top: 40px; }
  .lp-hero__sub { margin-top: 18px; font-size: 17px; }
  .lp-hero__cta { margin-top: 24px; }
  .lp-kpis { margin-top: 28px; padding: 18px 16px 20px; }
  .lp-kpis__head .nt-label { order: 3; flex-basis: 100%; }
  .lp-kpis__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 18px; }
  .lp-kpi:first-child { grid-column: 1 / -1; }
  .lp-kpi .nt-kpi__value { font-size: min(40px, 15cqi); }
  .lp-kpi:first-child .nt-kpi__value { font-size: min(48px, 13cqi); }
  .lp-wall { margin-top: 32px; }
  .lp-wall .nt-marquee__group > .nt-post { width: min(320px, calc(100vw - 56px)); }
}
@media (max-width: 379px) {
  .lp-hero__cta .nt-btn { padding: 0 18px; }
}

/* ==========================================================================
   LIVE LEDGER — UsePaid "Recent payments" rows + two analytics cards
   ========================================================================== */
.lp-ledger { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 24px; align-items: start; }
.lp-ledger__side { display: grid; gap: 16px; padding-top: 48px; }
.lp-ledger__side .nt-chartcard { padding: 20px 20px 16px; }
.lp-ledger__side .nt-bars { --nt-bars-h: 108px; }
.lp-ledger .nt-ledger-foot { padding-top: 14px; }
#ledger-feed .nt-post--row { min-height: 84px; }
@media (max-width: 1099px) {
  .lp-ledger { grid-template-columns: minmax(0, 1fr); }
  .lp-ledger__side { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 12px; }
}
@media (max-width: 639px) {
  .lp-ledger__side { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   THE OLD RAIL — two cards, one comparison. The week strip shows the mechanism:
   ACH credits in weekday blocks, nett runs through the weekend.
   ========================================================================== */
.lp-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-railcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
}
.lp-railcard__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: var(--nt-fs-title);
  line-height: 1.25;
  letter-spacing: var(--nt-ls-title);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
}
.lp-railcard__name .nt-logo__lockup { display: block; height: 22px; width: auto; }
.lp-railcard__fig {
  margin-top: 40px;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--nt-w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text-strong);
  white-space: nowrap;
}
.lp-railcard--old .lp-railcard__fig { color: var(--nt-muted); }
.lp-railcard__sub { margin-top: 10px; font-size: var(--nt-fs-small); color: var(--nt-muted); }
.lp-railcard__foot { margin-top: 28px; padding-top: 18px; border-top: var(--nt-rule-hair); }
.lp-railcard__terms { font-size: var(--nt-fs-small); line-height: 1.45; color: var(--nt-text); }
.lp-railcard__note { margin-top: 8px; font-size: var(--nt-fs-ui); line-height: 1.45; color: var(--nt-muted); }

.lp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 28px; }
.lp-week__d {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 8px;
  background: var(--nt-surface-2);
  box-shadow: inset 0 0 0 1px var(--nt-border);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  color: var(--nt-text);
}
.lp-week__d.is-off { background: transparent; box-shadow: none; border: 1px dashed var(--nt-border-strong); color: var(--nt-muted); }
/* nett: one unbroken band across the week. */
.lp-week--on { gap: 0; border-radius: 8px; background: var(--nt-border-strong); }
.lp-week--on .lp-week__d { background: transparent; box-shadow: none; color: var(--nt-text-strong); }
@media (max-width: 767px) {
  .lp-rail { grid-template-columns: minmax(0, 1fr); }
  .lp-railcard { padding: 20px 16px; }
  .lp-railcard__fig { margin-top: 24px; font-size: 52px; }
}

/* ==========================================================================
   HOW IT WORKS — the stepper drives one stateful order card (post grammar).
   The mark is hollow while the USDG is held in escrow and fills at Settle.
   ========================================================================== */
.lp-how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; row-gap: 24px; align-items: start; }
.lp-order {
  min-width: 0;
  padding: 20px 24px 20px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
}
.lp-order__head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.lp-order__mark { width: 20px; height: 20px; color: var(--nt-text-strong); }
.lp-order__id { font-family: var(--nt-font-mono); font-size: var(--nt-fs-label); letter-spacing: var(--nt-ls-label); text-transform: uppercase; color: var(--nt-muted); white-space: nowrap; }
.lp-order__head > .nt-chip { margin-left: auto; }
.lp-order__who { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.lp-order__poster { min-width: 0; font-size: var(--nt-fs-ui); line-height: 1.3; }
.lp-order__name { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-order__handle { color: var(--nt-muted); }
.lp-order__amount {
  margin-top: 14px;
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--nt-w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text-strong);
}
.lp-order__line { margin-top: 4px; font-size: var(--nt-fs-ui); line-height: 1.4; color: var(--nt-text); }
.lp-order__line .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-order__kv { margin-top: 16px; border-top: var(--nt-rule-hair); }
.lp-order__tl { margin-top: 20px; }
.lp-order__fine { margin-top: 16px; padding-top: 12px; border-top: var(--nt-rule-hair); font-size: var(--nt-fs-micro); line-height: 1.5; color: var(--nt-muted); }
@media (max-width: 1023px) { .lp-how { grid-template-columns: minmax(0, 1fr); } .lp-order { max-width: 560px; } }
@media (max-width: 767px) {
  .lp-order { padding: 16px; }
  .lp-order__amount { font-size: 38px; }
  .nt-step { padding: 14px 12px; }
}

/* Netting — two ledgers side by side, one net line. */
.lp-net { margin: 0; min-width: 0; }
.lp-net__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-net__card { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 14px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-surface); }
.lp-net__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; border-bottom: var(--nt-rule-hair); }
.lp-net__title { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-net__rows { flex: 1 0 auto; }
.lp-net__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 52px; padding: 8px 0; border-bottom: var(--nt-rule-hair); }
.lp-net__who { display: flex; flex-direction: column; min-width: 0; font-size: var(--nt-fs-small); line-height: 1.3; }
.lp-net__who .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-net__via { font-size: var(--nt-fs-micro); color: var(--nt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-net__amt { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-net__total { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: var(--nt-fs-small); color: var(--nt-muted); font-variant-numeric: tabular-nums; }
.lp-net__total > :last-child { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-net__net {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
}
.lp-net__glyph { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nt-surface-2); box-shadow: inset 0 0 0 1px var(--nt-border); }
.lp-net__glyph .nt-netting { width: 20px; height: 20px; }
.lp-net__label { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-medium); color: var(--nt-text); }
.lp-net__sum { margin-left: auto; font-size: 28px; line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--nt-w-bold); color: var(--nt-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .lp-net__cards { grid-template-columns: minmax(0, 1fr); }
  .lp-net__sum { font-size: 24px; }
}

/* ==========================================================================
   WHY IT WON'T BREAK — X Money feature list: outline icon, title, hairlines.
   Evidence is the contract call, set as a mono tag.
   ========================================================================== */
.lp-rules { width: 100%; border-collapse: collapse; }
.lp-rules thead th {
  padding: 0 24px 12px 0;
  border-bottom: var(--nt-rule-hair);
  text-align: left;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  line-height: var(--nt-lh-label);
  letter-spacing: var(--nt-ls-label);
  font-weight: var(--nt-w-regular);
  text-transform: uppercase;
  color: var(--nt-muted);
}
.lp-rules thead th:last-child, .lp-rules td:last-child { padding-right: 0; }
.lp-rules tbody tr { border-bottom: var(--nt-rule-hair); }
.lp-rules tbody :is(th, td) {
  padding: 20px 24px 20px 0;
  text-align: left;
  vertical-align: top;
  font-size: var(--nt-fs-ui);
  line-height: 1.5;
  font-weight: var(--nt-w-regular);
}
.lp-rules tbody th { color: var(--nt-text-strong); font-weight: var(--nt-w-bold); text-wrap: balance; }
.lp-rules tbody td { color: var(--nt-muted); text-wrap: pretty; }
.lp-rule { display: inline-flex; align-items: flex-start; gap: 14px; }
.lp-rule > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--nt-text); }
.lp-rules--g tbody th { width: 30%; }
.lp-rules--g tbody td:not(.lp-ev) { width: 48%; }
.lp-rules--g tbody td.lp-ev, .lp-rules--g thead th:last-child { text-align: right; }
.lp-rules .lp-ev { white-space: nowrap; }
.lp-code {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  background: var(--nt-surface);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 1;
  color: var(--nt-text);
  white-space: nowrap;
}
a.lp-code { text-decoration: none; transition: background-color var(--nt-d-hover) var(--nt-ease), border-color var(--nt-d-hover) var(--nt-ease); }
a.lp-code:hover { background: var(--nt-surface-2); border-color: var(--nt-border-strong); color: var(--nt-text-strong); }
.lp-ifcard { padding: 4px 20px; }
.lp-ifcard .lp-rules thead th { padding-top: 16px; }
.lp-ifcard .lp-rules tbody tr:last-child { border-bottom: 0; }
.lp-rules--if tbody th { width: 28%; }
.lp-rules--if tbody td.lp-ev { width: 1%; }
.lp-rules--if .nt-chip { font-family: var(--nt-font-sans); }
@media (max-width: 767px) {
  .lp-rules thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lp-rules, .lp-rules tbody, .lp-rules tr, .lp-rules tbody :is(th, td) { display: block; width: auto !important; }
  .lp-rules--g tbody { border-top: var(--nt-rule-hair); }
  .lp-rules tbody tr { padding: 18px 0; }
  .lp-rules tbody :is(th, td) { padding: 0; }
  .lp-rules tbody td { margin-top: 6px; }
  .lp-rules--g tbody td { padding-left: 34px; }
  .lp-rules--g tbody td.lp-ev { text-align: left; margin-top: 12px; }
  .lp-rules tbody td.lp-ev { margin-top: 12px; }
  .lp-ifcard { padding: 0 16px; }
}

/* ==========================================================================
   OPEN ORDERS — read-only book in a dark card, countdown + depletion bar
   ========================================================================== */
.lp-bookcard { padding: 0 4px; }
.lp-bookcard .nt-table thead tr { border-bottom-color: var(--nt-border); }
/* New order rows enter without the Signal flash (an order is not money landing). */
.nt-table tr.lp-row-in { overflow: hidden; animation: nt-row-in var(--nt-d-insert) var(--nt-ease) backwards; }
@media (prefers-reduced-motion: reduce) { .nt-table tr.lp-row-in { animation: none; } }

/* ==========================================================================
   FOR PROTOCOLS — endpoint list + dark code panel with Run
   ========================================================================== */
.lp-dev { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; row-gap: 40px; align-items: start; }
.lp-endpoints { border-top: var(--nt-rule-hair); }
.lp-endpoint { padding: 16px 0 18px; border-bottom: var(--nt-rule-hair); }
.lp-endpoint__sig {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nt-font-mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--nt-text-strong);
  overflow-wrap: anywhere;
}
.lp-verb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 52px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-label);
  letter-spacing: 0.06em;
  color: var(--nt-text);
}
.lp-endpoint__text { margin-top: 8px; padding-left: 64px; font-size: var(--nt-fs-ui); line-height: 1.45; color: var(--nt-muted); }
.lp-endpoint__text .nt-at { color: var(--nt-text); }
.lp-dev__figs { margin-top: 32px; }
.lp-dev__panel { min-width: 0; }
.lp-dev__panel .nt-code__body { min-height: 360px; }
.lp-runline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 48px;
  padding: 12px 16px;
  border-top: var(--nt-rule-hair);
  background: var(--nt-surface-2);
  font-size: var(--nt-fs-small);
  line-height: 1.4;
  color: var(--nt-muted);
}
.lp-runline .nt-status { color: var(--nt-text-strong); }
.lp-runline .nt-data { font-size: var(--nt-fs-micro); }
.lp-runline a { color: var(--nt-text); }
.lp-dev__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
@media (max-width: 1023px) { .lp-dev { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .lp-endpoint__text { padding-left: 0; }
  .lp-dev__panel .nt-code__body { min-height: 0; }
  .lp-runline { padding: 10px 12px; }
}

/* ==========================================================================
   FOR FILLERS — desk profile card (X profile header) + onboarding checks
   ========================================================================== */
.lp-desk { padding: 20px 24px 12px; }
.lp-desk__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lp-desk__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-desk__name { font-size: var(--nt-fs-title); line-height: 1.2; font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.lp-desk__name .nt-at { letter-spacing: -0.01em; }
.lp-desk__open { margin-left: auto; }
.lp-desk__figs { margin-top: 28px; padding: 20px 0 4px; border-top: var(--nt-rule-hair); }
.lp-desk__tlabel { margin: 28px 0 4px; }
.lp-desk .nt-table tbody tr:last-child { border-bottom: 0; }
@media (max-width: 767px) {
  .lp-desk { padding: 16px 16px 8px; }
  .lp-desk__bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 10px; }
  .lp-desk__bar > .nt-chip { margin-top: 2px; }
  .lp-desk__open { grid-column: 2 / -1; margin-left: 0; }
  .lp-desk .nt-figures--3 .nt-figure:last-child { grid-column: 1 / -1; }
}

.lp-onboard { margin: 0; padding: 0; list-style: none; border-top: var(--nt-rule-hair); }
.lp-onboard__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  min-height: 56px;
  padding: 17px 0;
  border-bottom: var(--nt-rule-hair);
}
.lp-onboard__num { font-family: var(--nt-font-mono); font-size: var(--nt-fs-label); letter-spacing: var(--nt-ls-label); color: var(--nt-muted); }
.lp-onboard__title { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); white-space: nowrap; }
.lp-onboard__meta { font-size: var(--nt-fs-small); color: var(--nt-muted); text-align: right; }
@media (max-width: 767px) {
  .lp-onboard__item { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
  .lp-onboard__meta { grid-column: 2; text-align: left; }
}

/* ==========================================================================
   PAY-TO-BUY (preview)
   ========================================================================== */
.lp-facts { margin-top: 12px; border-top: var(--nt-rule-hair); }
.lp-facts li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: var(--nt-rule-hair);
  font-size: var(--nt-fs-ui);
  color: var(--nt-text);
}
.lp-buy { padding: 24px; }
.lp-buy.is-done { padding: 0; border: 0; background: transparent; }
.lp-buy__form { display: grid; gap: 20px; }
.lp-buy__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.lp-buy__est { color: var(--nt-muted); }
.lp-money { position: relative; display: block; min-width: 0; }
.lp-money__sym {
  position: absolute;
  top: 0; bottom: 0; left: 15px;
  display: flex;
  align-items: center;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-body);
  color: var(--nt-muted);
  pointer-events: none;
}
.lp-money .nt-input { padding-left: 29px; }
.lp-buy__inst { margin-top: 24px; padding-top: 20px; border-top: var(--nt-rule-hair); }
.lp-buy__insthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lp-buy__sentence {
  margin: 12px 0 16px;
  font-size: var(--nt-fs-title);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--nt-text);
  text-wrap: balance;
}
.lp-buy__sentence .nt-at, .lp-buy__sentence .nt-num { white-space: nowrap; font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-kv__row > dd.lp-kvcopy { display: flex; align-items: center; justify-content: flex-end; gap: 10px; overflow: visible; }
.lp-buy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.lp-buy__state { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: var(--nt-fs-small); color: var(--nt-muted); }
.lp-buy__state .nt-status { color: var(--nt-text-strong); }
.lp-buy__state > span:not(.nt-status) { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); font-variant-numeric: tabular-nums; }
.lp-buy__state:focus { outline: none; }
.lp-buy .nt-receipt { max-width: none; }
@media (max-width: 767px) {
  .lp-buy { padding: 16px; }
  .lp-buy__row { grid-template-columns: minmax(0, 1fr); }
  .lp-buy__sentence { font-size: 18px; }
  .lp-facts li { grid-template-columns: 72px minmax(0, 1fr); }
}

/* ==========================================================================
   RECEIPTS — one receipt post open (the canonical receipt), the stack beside it
   ========================================================================== */
.lp-receipts { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 24px; align-items: start; }
.lp-receipts__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lp-receipts__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: var(--nt-fs-ui); }
@media (max-width: 1199px) { .lp-receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .lp-receipts { grid-template-columns: minmax(0, 1fr); }
  .lp-receipts > * { max-width: 640px; }
}

/* ==========================================================================
   FAQ + REQUEST ACCESS
   ========================================================================== */
.lp-faq .nt-faq__item:first-child .nt-faq__q { padding-top: 16px; }
.lp-req { display: grid; gap: 24px; padding: 24px; }
.lp-req__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-items: start; }
.lp-req__panel[hidden] { display: none; }
.lp-req__wide { grid-column: 1 / -1; }
.lp-req__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 4px; }
.lp-req__done { min-width: 0; }
.lp-req__done:focus { outline: none; }
.lp-req__done:focus-visible { outline: var(--nt-focus); outline-offset: var(--nt-focus-offset); border-radius: var(--nt-r-card); }
.lp-req__done .nt-receipt { max-width: none; }
@media (max-width: 767px) {
  .lp-req { padding: 16px; }
  .lp-req__panel { grid-template-columns: minmax(0, 1fr); }
  .lp-req__foot .nt-btn { width: 100%; }
}

/* Reduced motion: the wall is a still row that scrolls by hand; keep it off the shell edges. */
@media (prefers-reduced-motion: reduce) {
  .lp-wall .nt-marquee { padding-inline: var(--nt-gutter); scroll-padding-inline: var(--nt-gutter); }
}
