/* Static landing illustrations share a visual language, not application state. */
.lp-preview { width: 100%; max-width: 657px; height: 370px; color: #707b85; font: 11px/1.4 "Noto Sans Display", sans-serif; text-align: left; overflow: hidden; background: #fff; border: 1px solid #e4e9ee; border-radius: 6px; box-shadow: 0 10px 35px rgb(39 57 83 / 9%); }
.lp-preview *, .lp-preview *::before, .lp-preview *::after { box-sizing: border-box; }
.lp-preview__surface { height: 100%; }
.lp-preview__header { height: 52px; padding: 0 23px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eff1f3; }
.lp-preview__brand { font-size: 23px; color: #6489ae; font-weight: 700; font-style: italic; letter-spacing: -.8px; }
.lp-preview__product { color: #3e4650; font-size: 12px; white-space: nowrap; }
.lp-preview__product sup { font-size: 6px; }
.lp-preview__environment { margin-left: auto; color: #a4acb5; font-size: 7px; letter-spacing: .7px; }
.lp-preview__avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #f1f3f5; border-radius: 50%; color: #8d98a4; }
.lp-preview__body { padding: 0 24px 15px; }
.lp-preview__tabs { display: flex; gap: 24px; align-items: center; min-height: 41px; border-bottom: 1px solid #dfe4e9; color: #5d83ab; }
.lp-preview__tabs > span { display: flex; align-items: center; height: 41px; border-bottom: 2px solid transparent; white-space: nowrap; }
.lp-preview__tabs > .lp-preview__tab--active { border-bottom-color: #7295b9; }
.lp-preview__toolbar { min-height: 47px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-preview__toolbar strong { font-size: 13px; font-weight: 500; color: #535d6c; }
.lp-preview__search { display: inline-flex; align-items: center; gap: 8px; min-width: 43%; height: 26px; padding: 0 8px; border: 1px solid #dce2e8; border-radius: 2px; color: #9aa5af; }
.lp-preview svg { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.lp-preview small { display: block; margin-top: 3px; color: #a1a9b0; font-size: 9px; font-weight: 400; }
.lp-preview__muted { color: #a1a9b0; }
.lp-preview__link { color: #6c91b7; }
.lp-preview__row { display: grid; align-items: center; gap: 13px; min-height: 45px; border-bottom: 1px solid #e7ebef; }
.lp-preview__table--assets .lp-preview__row, .lp-preview__table--invoices .lp-preview__row { grid-template-columns: 1.5fr 1fr 1fr; }
.lp-preview__table--history .lp-preview__row { grid-template-columns: 1.5fr .7fr .7fr .8fr; }
.lp-preview__row > :last-child { text-align: right; }
.lp-preview__row--head { min-height: 29px; font-size: 10px; color: #85909b; background: #f5f7f9; padding: 0 7px; }
.lp-preview__row:not(.lp-preview__row--head) { padding: 0 7px; }
.lp-preview__asset { display: flex; align-items: center; gap: 10px; }
.lp-preview__coin { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; color: #fff; font-size: 16px; font-style: normal; background: #8496ae; }
.lp-preview__coin--ltc { background: #456d9c; }
.lp-preview__coin--btc { background: #e9a73c; }
.lp-preview__coin--eth { background: #7c87aa; }
.lp-preview__coin--trx { background: #bc6772; font-size: 13px; }
.lp-preview__button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 2px; color: #fff; background: #6f92b5; white-space: nowrap; }
.lp-preview__button--muted { color: #9aa9b7; background: #e8edf2; }
.lp-preview__strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #f3f5f7; color: #a2aab3; }
.lp-preview__address { min-height: 40px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #e7ebef; color: #7697b6; }
.lp-preview__address > :last-child { margin-left: auto; color: #7d8893; }
.lp-preview__tag { display: inline-block; padding: 3px 6px; border-radius: 3px; color: #7e96aa; background: #edf3f7; font-size: 9px; font-style: normal; white-space: nowrap; }
.lp-preview__field { display: grid; grid-template-columns: 83px minmax(0, 1fr); align-items: center; gap: 10px; margin: 10px 0; }
.lp-preview__field > div { min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border: 1px solid #dce2e8; border-radius: 2px; color: #a0aab5; overflow-wrap: anywhere; }
.lp-preview__field > div > span { color: #8b97a4; }
.lp-preview__event { display: flex; align-items: center; gap: 11px; min-height: 50px; border-bottom: 1px solid #e7ebef; }
.lp-preview__event strong { font-weight: 500; }
.lp-preview__event-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #6a8dac; background: #f0f4f8; }
.lp-preview__event > :last-child { margin-left: auto; }
.lp-preview__segments { display: flex; margin-bottom: 13px; font-size: 10px; color: #7795b3; }
.lp-preview__segments > span { border: 1px solid #c5d2df; padding: 6px 10px; white-space: nowrap; }
.lp-preview__segments > span + span { border-left: 0; }
.lp-preview__segments > .lp-preview__segment--active { color: #fff; background: #7697b9; }
.lp-preview__total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 10px; background: #f1f4f6; }
.lp-preview__total strong { font-weight: 500; }
.lp-preview__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 9px; color: #a0a9b2; }
.lp-preview__field > .lp-preview__recipients { display: grid; gap: 5px; }
.lp-preview__recipients > span { display: flex; justify-content: space-between; gap: 20px; }
.lp-preview__recipients i { font-style: normal; color: #b0b9c2; }
.lp-preview__note { padding: 12px; margin-top: 12px; background: #f2f5f8; color: #8b98a5; font-size: 10px; line-height: 1.6; }
.lp-preview__stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-preview__store { display: grid; justify-items: center; align-content: center; height: 126px; padding: 8px; border: 1px solid #e3e8ee; border-radius: 4px; }
.lp-preview__store strong { font-weight: 500; color: #536474; font-size: 11px; }
.lp-preview__store-mark { display: grid; place-items: center; height: 42px; margin-bottom: 5px; font-size: 21px; font-weight: 700; letter-spacing: -1px; }
.lp-preview__store-mark--woo { color: #8e68ae; font-style: italic; }
.lp-preview__store-mark--presta { color: #936b99; }
.lp-preview__store-mark--open { color: #48a1c5; font-style: italic; }
.lp-preview__widget-layout { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px; padding: 6px 10px; }
.lp-preview__widget-code { color: #6a88a2; font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.9; overflow-wrap: anywhere; }
.lp-preview__widget-code > span { color: #a7b2be; }
.lp-preview__checkout { display: grid; justify-items: center; gap: 8px; padding: 15px; border: 1px solid #e1e7ed; border-radius: 6px; box-shadow: 0 4px 15px rgb(54 73 100 / 5%); }
.lp-preview__checkout strong { color: #4e6071; font-weight: 500; }
.lp-preview__checkout-pattern { display: grid; place-items: center; color: #92a8bd; width: 63px; height: 49px; background: #f3f6f9; border: 1px dashed #ced9e3; }
.lp-preview__code { border-radius: 4px; background: #263344; color: #d7e2ec; overflow: hidden; }
.lp-preview__code > div { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid #344255; }
.lp-preview__code i { width: 6px; height: 6px; background: #748499; border-radius: 50%; }
.lp-preview__code i:first-child { background: #cd8992; }
.lp-preview__code i:nth-child(2) { background: #d6b26e; }
.lp-preview__code i:nth-child(3) { background: #7cac9d; }
.lp-preview__code > div > span { margin-left: auto; color: #8595a9; font-size: 8px; }
.lp-preview__code pre { margin: 0; padding: 16px; color: inherit; font: 10px/1.75 ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.lp-preview__code pre > span { color: #879bb0; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass, .lp-preview--auto) .lp-preview__toolbar { min-height: 36px; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass) .lp-preview__segments { font-size: 9px; margin-bottom: 6px; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass) .lp-preview__segments > span { padding: 4px 8px; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass, .lp-preview--auto) .lp-preview__field { margin-block: 6px; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass, .lp-preview--auto) .lp-preview__field > div { min-height: 24px; padding: 4px 8px; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass) .lp-preview__total { margin-top: 8px; padding-block: 8px; }
.lp-preview:is(.lp-preview--manual, .lp-preview--mass, .lp-preview--auto) .lp-preview__bottom { margin-top: 8px; }

/* Integration artwork sits freely in the page, like the reference's product tour. */
.lp-preview:is(.lp-preview--plugins, .lp-preview--widgets, .lp-preview--api) { border: 0; box-shadow: none; background: transparent; }
.lp-preview:is(.lp-preview--plugins, .lp-preview--widgets, .lp-preview--api) .lp-preview__header,
.lp-preview:is(.lp-preview--plugins, .lp-preview--widgets, .lp-preview--api) .lp-preview__tabs,
.lp-preview:is(.lp-preview--plugins, .lp-preview--widgets, .lp-preview--api) .lp-preview__toolbar { display: none; }
.lp-preview:is(.lp-preview--plugins, .lp-preview--widgets, .lp-preview--api) .lp-preview__body { padding: 25px 24px; }
.lp-preview--plugins .lp-preview__stores { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.lp-preview--plugins .lp-preview__store { width: 260px; max-width: 85%; height: 77px; border: 0; border-radius: 16px; background: linear-gradient(135deg,#ecf3fb,#fff); box-shadow: 0 10px 25px rgb(51 86 122 / 4%); }
.lp-preview--plugins .lp-preview__store:nth-child(odd) { transform: translateX(32px); }
.lp-preview--plugins .lp-preview__store-mark { height: auto; margin: 0; font-size: 27px; }
.lp-preview--plugins .lp-preview__store strong { display: none; }
.lp-preview--plugins .lp-preview__note, .lp-preview--api .lp-preview__note { display: none; }
.lp-preview--api .lp-preview__code { margin-top: 18px; background: #2f2e41; border-radius: 20px; }
.lp-preview--api .lp-preview__code pre { padding: 25px; font-size: 13px; line-height: 1.9; }
.lp-preview--widgets .lp-preview__widget-layout { min-height: 300px; }
@media (max-width: 700px) {
  .lp-preview { height: 330px; font-size: 9px; }
  .lp-preview__header { height: 43px; padding-inline: 13px; gap: 7px; }
  .lp-preview__brand { font-size: 21px; }
  .lp-preview__product { font-size: 10px; }
  .lp-preview__environment { font-size: 6px; letter-spacing: .3px; }
  .lp-preview__avatar { width: 23px; height: 23px; }
  .lp-preview__body { padding-inline: 13px; }
  .lp-preview__tabs { min-height: 35px; gap: 17px; }
  .lp-preview__tabs > span { height: 35px; }
  .lp-preview__toolbar { min-height: 43px; gap: 7px; }
  .lp-preview__toolbar strong { font-size: 11px; }
  .lp-preview__row { min-height: 40px; gap: 7px; }
  .lp-preview__row--head { min-height: 26px; font-size: 9px; }
  .lp-preview__address { min-height: 36px; }
  .lp-preview small, .lp-preview__tag { font-size: 8px; }
  .lp-preview__field { grid-template-columns: 67px minmax(0, 1fr); gap: 7px; margin-block: 8px; }
  .lp-preview__field > div { min-height: 27px; }
  .lp-preview__segments { font-size: 8px; margin-bottom: 9px; }
  .lp-preview__segments > span { padding: 6px; }
  .lp-preview:is(.lp-preview--manual, .lp-preview--mass) .lp-preview__segments { font-size: 8px; }
  .lp-preview:is(.lp-preview--manual, .lp-preview--mass) .lp-preview__segments > span { padding: 4px 6px; }
  .lp-preview__total { padding-block: 9px; margin-top: 10px; }
  .lp-preview__bottom { font-size: 8px; margin-top: 9px; }
  .lp-preview__stores { gap: 7px; }
  .lp-preview__store { height: 115px; padding: 5px; }
  .lp-preview__store strong { font-size: 9px; }
  .lp-preview__store-mark { font-size: 19px; }
  .lp-preview__widget-layout { gap: 9px; padding-inline: 0; }
  .lp-preview__widget-code { font-size: 8px; }
  .lp-preview__checkout { padding: 10px; }
  .lp-preview__note { font-size: 9px; margin-top: 10px; padding: 9px; }
  .lp-preview__code pre { font-size: 8px; padding: 12px; }
  .lp-preview__code > div { height: 25px; }
  .lp-preview--plugins .lp-preview__store:nth-child(odd) { transform: translateX(16px); }
  .lp-preview--api .lp-preview__code pre { font-size: 10px; padding: 18px; }
  .lp-preview--widgets .lp-preview__widget-layout { min-height: 250px; }
}