/* The landing page (/landing): the vendor's table seen from straight above. A dark table cloth is the one ground, and
   the app's own objects lie on it: thermal receipts, the phone running a deal, a binder of real cards, the till drawer.
   The paper objects keep the app's paper tokens (style.css, light theme) and its rules: ink text, money green "+" and
   orange "−", cobalt only on what can be pressed, Archivo condensed for money and wide caps for printed heads.
   Everything is scoped under .lp so nothing leaks into the app. */
.lp {
  --cloth: #1d1f22;
  --on-cloth: #f1ece2;
  --on-cloth-muted: #aaa397;
  --cloth-line: rgba(241, 236, 226, .16);
  --drop: 0 30px 40px -24px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .25);
  display: block; overflow-x: clip; color: var(--on-cloth);
  background: radial-gradient(130% 80% at 50% 0, rgba(255, 250, 238, .07), transparent 65%) var(--cloth);
}
.lp ::selection { background: var(--accent); color: var(--accent-ink); }
.lp main { max-width: none; padding: 0; }
.lp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .lp-wrap { padding: 0 32px; } }
.lp a { color: inherit; text-decoration: none; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; }
.lp [id] { scroll-margin-top: 76px; }
html:has(.lp) { scroll-behavior: smooth; background: #1d1f22; }
@media (prefers-reduced-motion: reduce) { html:has(.lp) { scroll-behavior: auto; } }
.lp :focus-visible { outline: 2px solid #97acff; outline-offset: 3px; }

/* paper lying on the cloth: the app's slip, its edges perforated where it was torn off the roll */
.paper { background: var(--s1); color: var(--text); box-shadow: var(--drop); }
.rc-bottom { padding-bottom: 34px !important; box-shadow: none; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .55));
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) 0 0 / 14px 100%;
  mask: radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) 0 0 / 14px 100%; }
.rc-both { box-shadow: none; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .55));
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) top / 14px 51% repeat-x,
                radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) bottom / 14px 51% repeat-x;
  mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) top / 14px 51% repeat-x,
        radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) bottom / 14px 51% repeat-x; }

/* ---- keys: cobalt only on what can be pressed ---------------------------------------------------------------- */
.lp-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  padding: 0 24px; border-radius: 8px; background: var(--accent); color: var(--accent-ink) !important; font: 700 16px var(--font);
  transition: background .15s, transform .1s; }
.lp-btn:hover { background: var(--accent-hover); }
.lp-btn:active { transform: scale(.98); }
.lp-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }
.lp-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.lp-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 700; color: var(--accent) !important;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lp-text:hover { color: var(--accent-hover) !important; }

/* ---- top bar, on the cloth ------------------------------------------------------------------------------------- */
.lp-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--cloth) 94%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.lp-top.stuck { border-bottom-color: var(--cloth-line); }
.lp-top-in { display: flex; align-items: center; gap: 10px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.lp .logo { background: var(--on-cloth); color: var(--cloth); }
.lp-nav { display: none; gap: 26px; margin: 0 auto; font-size: 14px; font-weight: 600; color: var(--on-cloth-muted); }
.lp-nav a:hover, .lp-login:hover { color: var(--on-cloth); }
.lp-login { margin-left: auto; padding: 10px 6px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--on-cloth-muted); }
@media (min-width: 960px) { .lp-nav { display: flex; } .lp-login { margin-left: 0; } }
/* Svenska / English: landing.js swaps the page's texts; the top bar's is pushed right, before Logga in */
.lp-lang { display: inline-flex; flex: none; padding: 3px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--cloth-line); }
.lp-lang button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 99px; background: none; color: var(--on-cloth-muted);
  font: 700 12px var(--font); letter-spacing: .04em; cursor: pointer; }
.lp-lang button:hover { color: var(--on-cloth); }
.lp-lang button[aria-pressed="true"] { background: var(--on-cloth); color: var(--cloth); }
.lp-top .lp-lang { margin-left: auto; }
.lp-top .lp-lang + .lp-login { margin-left: 0; }
/* a narrow phone has room for one key in the bar: the other language's */
@media (max-width: 420px) { .lp-top .lp-lang button[aria-pressed="true"] { display: none; }
  .lp-top-in { gap: 4px; } .lp-top .lp-btn-sm { padding: 0 12px; } }

/* printed voices */
.lp-cap { font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.lp-muted { color: var(--muted); }
.lp-money { display: block; font-weight: 800; line-height: .95; letter-spacing: -.02em; font-stretch: 78%;
  font-variant-numeric: tabular-nums lining-nums; }
.lp .in { color: var(--ok); }
.lp .out { color: var(--out); }
.lp .warn { color: var(--warn); }
.lp-stamp { display: inline-block; padding: 2px 6px 1px; border-radius: 2px; color: var(--s1); font-size: 10.5px; font-weight: 800;
  font-stretch: 125%; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.lp-stamp.sale { background: var(--k-sale); }
.lp-stamp.purchase { background: var(--k-purchase); }
.lp-stamp.trade { background: var(--k-trade); }
.ca { flex: none; display: block; width: 36px; height: auto; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line); background: var(--s2); }

/* ---- the table: objects placed on a stage, as they lie --------------------------------------------------------- */
.lp-table { padding-top: 20px; }
.lp-stage { position: relative; display: grid; gap: 28px; justify-items: center; padding: 8px 0 24px; }
.lp-hero-rc { position: relative; z-index: 3; width: min(100%, 520px); padding: 30px 28px 0; transform: rotate(-1deg); }
/* sized to the receipt, not the window: its longest word ("kortaffären") must fit the slip at every width */
.lp-hero-rc { container-type: inline-size; }
.lp-hero-rc h1 { font-size: clamp(36px, 18.5cqi, 84px); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.lp-hero-rc > p:not(.lp-rc-foot) { margin-top: 16px; font-size: 18px; line-height: 1.45; color: var(--muted); max-width: 38ch; }
.lp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; }
.lp-rc-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px !important; padding-top: 10px;
  border-top: 2px solid var(--text); font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* the binder: dark vinyl, nine pockets of real cards */
.lp-binder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 330px); padding: 14px; border-radius: 10px;
  background: linear-gradient(160deg, #3d4046, #2e3135); box-shadow: var(--drop), inset 0 0 0 1px rgba(255, 255, 255, .06); transform: rotate(-6deg); }
.lp-binder img { width: 100%; height: auto; aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; display: block;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .1), 0 4px 6px -3px rgba(0, 0, 0, .6); }

/* the phone, drawn in ink, its screen the app's paper */
.lp-phone { width: 316px; padding: 10px; border-radius: 42px; background: #0f1012; box-shadow: var(--drop), inset 0 0 0 1.5px #3a3d42; transform: rotate(6deg); }
/* clip-path, not only overflow: Safari stops clipping to the radius once a child animates or has a filter */
.lp-screen { position: relative; overflow: hidden; clip-path: inset(0 round 33px); border-radius: 33px; background: var(--bg); color: var(--text);
  padding: 34px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.lp-screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 82px; height: 22px; margin-left: -41px; border-radius: 99px; background: #0f1012; }
.lp-ph-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; font-size: 15px; }
.lp-x { margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1; }
.lp-keys, .lp-pay { display: flex; gap: 4px; align-items: center; padding: 4px; border-radius: 99px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.lp-keys > span { padding: 0 6px 0 8px; }
.lp-keys i, .lp-pay i { flex: 1; font-style: normal; text-align: center; padding: 6px 0; border-radius: 99px; }
.lp-keys i.on, .lp-pay i.on { background: var(--text); color: var(--bg); }
.lp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-lines li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; background: var(--s1);
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px var(--shadow); }
.lp-lines .t { display: grid; min-width: 0; }
.lp-lines .t b { font-size: 14px; }
.lp-lines small { font-size: 11.5px; color: var(--muted); }
.lp-lines .p { margin-left: auto; display: grid; text-align: right; }
.lp-lines .p b { font-size: 16px; font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; }
.lp-lines.go li { animation: lp-land .45s var(--ease-out) backwards; animation-delay: calc(var(--d) * 260ms); }
@keyframes lp-land { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.lp-pay { margin-top: 6px; }
.lp-total { display: flex; align-items: flex-end; gap: 10px; margin: 0 -12px -12px; padding: 20px 16px 16px; background: var(--s1);
  filter: drop-shadow(0 -6px 14px var(--shadow));
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) 0 0 / 14px 100%;
  mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) 0 0 / 14px 100%; }
.lp-total > div { display: grid; }
.lp-total small { font-size: 11.5px; color: var(--muted); }
.lp-total .lp-money { font-size: 36px; margin: 2px 0 4px; white-space: nowrap; }
.lp-save { margin-left: auto; padding: 13px 20px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; }
.lp-save.press { animation: lp-press .3s; }
@keyframes lp-press { 50% { transform: scale(.94); background: var(--accent-hover); } }
.lp-phone { position: relative; }
.lp-slip { position: absolute; left: 12px; right: 12px; top: calc(100% - 6px); z-index: -1; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 18px; background: var(--s1); color: var(--text); font-size: 12px; font-weight: 600; opacity: 0;
  -webkit-mask: radial-gradient(circle 4px at 50% 100%, transparent 97%, #000) 0 0 / 12px 100%;
  mask: radial-gradient(circle 4px at 50% 100%, transparent 97%, #000) 0 0 / 12px 100%; }
.lp-slip > * { white-space: nowrap; flex: none; }
/* if a font runs wide, the middle text gives way, never the amount */
.lp-slip .lp-stamp { font-size: 9px; }
.lp-slip > span:not(.lp-stamp) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-slip b { margin-left: auto; font-size: 18px; font-weight: 800; font-stretch: 78%; font-variant-numeric: tabular-nums; }
.lp-slip.print { animation: lp-print 1.5s var(--ease-out) forwards; }
@keyframes lp-print {
  0% { opacity: 1; clip-path: inset(0 0 100% 0); transform: none; }
  40% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  55% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(4px) rotate(-1.5deg); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate(-150px, 120px) rotate(-16deg); }
}

/* the till drawer: ink body, a front plate with the day, one well per payment method */
.lp-drawer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 520px); padding: 12px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #2f3236, #1a1c1f); box-shadow: var(--drop), inset 0 1px 0 rgba(255, 255, 255, .08); transform: rotate(-1.5deg); }
.lp-drawer-front { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 6px 8px; color: var(--on-cloth); }
.lp-drawer-front .lp-money { font-size: clamp(40px, 5vw, 56px); color: #45d08a; }
.tray { display: grid; padding: 10px 12px 9px; border-radius: 4px; background: var(--s2); color: var(--text); box-shadow: inset 0 3px 6px -3px rgba(0, 0, 0, .45); }
.tray small { font-size: 10px; font-weight: 800; font-stretch: 125%; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tray b { font-size: 22px; font-weight: 800; font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; }
.lp-drawer.hit { animation: lp-tug .6s var(--ease-out); }
@keyframes lp-tug { 30% { scale: .985; } }

/* labels on the cloth, each on a leader line toward its object */
.lp-tag { display: none; font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; color: var(--on-cloth-muted); }
.lp-ex { font-size: 12px; color: var(--on-cloth-muted); }
/* phone: the deal first, then the drawer it counts into, then the binder */
/* each object with its label (and the phone with "Exempel") under it */
.lp-spot { display: grid; gap: 16px; justify-items: center; width: 100%; }
@media (max-width: 1099px) { .s-phone { order: 1; } .lp-drawer { order: 2; } .s-binder { order: 3; } }
@media (max-width: 719px) { .s-binder { display: none; } }

/* desktop: the objects lie where they would on the table, the receipt in the middle */
@media (min-width: 1100px) {
  .lp-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); row-gap: 0;
    grid-template-areas: "binder rc phone" "binder drawer phone"; align-items: start; justify-items: stretch; padding: 12px 0 0; }
  .lp-hero-rc { grid-area: rc; width: 100%; }
  .lp-drawer { grid-area: drawer; width: 100%; margin-top: 36px; }
  .s-binder { grid-area: binder; justify-items: start; margin-top: 36px; }
  .lp-binder { width: 100%; max-width: 330px; }
  .s-phone { grid-area: phone; justify-items: end; }
  .lp-phone { width: min(316px, 100%); }
  .lp-tag { display: block; width: min(100%, 330px); margin-top: 12px; }
  .lp-tag::after { content: ""; display: block; height: 1px; margin-top: 8px; background: var(--cloth-line); }
  .t-phone { text-align: right; width: min(100%, 316px); }
}

/* ---- sections: one object picked up off the table at a time --------------------------------------------------- */
.lp-sec { padding-top: 120px; }
@media (max-width: 719px) { .lp-sec { padding-top: 84px; } .lp-table + .lp-sec { padding-top: 40px; } .lp-stage { padding-bottom: 0; } }
.lp h2, .lp-h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.lp-pick { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) {
  .lp-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(56px, 6vw, 96px); row-gap: 32px; align-items: start; }
  .lp-copy { grid-column: 1; grid-row: 1; align-self: end; } .lp-labels { grid-column: 1; grid-row: 2; }
  .lp-art { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .lp-pick.flip .lp-copy, .lp-pick.flip .lp-labels { grid-column: 2; } .lp-pick.flip .lp-art { grid-column: 1; }
}
.lp-copy h2 { max-width: 14ch; }
.lp-copy > p { margin-top: 16px; color: var(--on-cloth-muted); font-size: 18px; line-height: 1.5; max-width: 40ch; }
/* the object's parts, named on the cloth on leader lines that run toward it */
.lp-labels { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-labels li { display: flex; align-items: baseline; gap: 4px 10px; font-size: 12px; font-weight: 800; font-stretch: 125%;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.4; color: var(--on-cloth-muted); }
.lp-labels b { white-space: nowrap; font-size: 22px; letter-spacing: -.01em; font-stretch: 78%; text-transform: none; color: var(--on-cloth); font-variant-numeric: tabular-nums; }
@media (max-width: 959px) { .lp-labels { gap: 0; border-top: 1px solid var(--cloth-line); }
  .lp-labels li { padding: 12px 0; border-bottom: 1px solid var(--cloth-line); } }
/* side by side, each label's leader line runs across to the object: after the words when the object is to the right,
   before them when it is to the left */
@media (min-width: 960px) {
  .lp-labels { gap: 16px; }
  .lp-labels li::after { content: ""; flex: 1 0 40px; height: 1px; align-self: flex-start; margin-top: .75em; margin-right: -32px;
    background: var(--on-cloth-muted); opacity: .5; }
  .lp-pick.flip .lp-labels li::after { order: -1; margin: .75em 0 0 -32px; flex: 0 0 48px; } }

.lp-art { display: grid; justify-items: center; }

/* the binder page, close up, and the receipt its cards land on: side by side on the table, the receipt over the
   page's edge; stacked on a phone */
.lp-scan { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0; }
.lp-scan .lp-ex { margin-top: 14px; }
@media (min-width: 560px) {
  .lp-scan { grid-template-columns: minmax(0, 340px) minmax(0, 300px); justify-content: center; justify-items: stretch; }
  .lp-scan .lp-found { margin: 64px 0 0 -6px; }
  .lp-scan .lp-ex { grid-column: 1 / -1; justify-self: center; }
}
/* two objects side by side: this section gives its art the wider column */
@media (min-width: 960px) { #skanna.lp-pick { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); } }
.lp-page { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 460px); padding: 18px;
  border-radius: 10px; background: linear-gradient(160deg, #3d4046, #2e3135); box-shadow: var(--drop); transform: rotate(-2deg); }
@media (min-width: 560px) { .lp-page { width: 100%; gap: 10px; padding: 16px; } }
.lp-page > span { position: relative; display: block; }
.lp-page .ca { width: 100%; border-radius: 4.5% / 3.2%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
/* each card outlined as the app outlines a page's cards, green when sure, amber when it wants a look */
.lp-page > span::before { content: ""; position: absolute; inset: -4px; border-radius: 7px; border: 2px solid #45d08a; }
.lp-page > span.chk::before { border-color: #ffb020; }
.lp-page > span::after { content: ""; position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #2e3135; background: #157a41 center / 13px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.lp-page > span.chk::after { background: #9a5a00 center / 13px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.01'/%3E%3C/svg%3E"); }
.lp-page-sum { grid-column: 1 / -1; display: flex; gap: 14px; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--on-cloth); }
.lp-page-sum span:first-child { margin-right: auto; }
@media (min-width: 560px) { .lp-page-sum span:first-child { margin-right: 0; } }  /* the receipt lies over the right edge */
.lp-page-sum .in { color: #45d08a; }
.lp-page-sum .warn { color: #ffb020; }
.lp-sweep { position: absolute; left: 10px; right: 10px; top: 18px; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #7d97ff 20%, #7d97ff 80%, transparent); box-shadow: 0 0 16px 2px rgba(125, 151, 255, .5); }

/* the receipt: one row per card, in the order read, then the page's value */
.lp-found { position: relative; z-index: 1; width: min(100%, 340px); padding: 18px 18px 14px; transform: rotate(2deg); }
/* its torn edge is a strip of its own: a mask on the receipt itself (.rc-bottom) leaves its animated rows unpainted
   in Chrome at phone sizes */
.lp-found::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: var(--s1);
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) 0 0 / 14px 100%;
  mask: radial-gradient(circle 5px at 50% 100%, transparent 97%, #000) 0 0 / 14px 100%; }
@media (max-width: 559px) { .lp-found { margin-top: 10px; } }
.lp-fr { display: grid; grid-template-columns: 14px 22px minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.lp-fr .n { font-size: 11px; font-weight: 800; font-stretch: 78%; color: var(--muted); }
.lp-fr .ca { width: 22px; }
.lp-fr .t { display: grid; min-width: 0; line-height: 1.2; }
.lp-fr .t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-fr small { font-size: 11px; color: var(--muted); }
.lp-fr i { font-style: normal; padding: 1px 5px; border-radius: 2px; background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn); font-size: 9.5px; font-weight: 800; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; }
.lp-fr .m { grid-column: 5; font-size: 15px; font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.lp-found .lp-rc-total .lp-money { font-size: 34px; }

/* the scan, looped while on screen (landing.js: .armed, then .go, taken off and put back): a line sweeps down the
   photo with the cards dimmed as in the camera's reel, then each card lights up with its outline and mark while its
   row lands on the receipt, then the count and the page's value. Taking .go off fades it all back for the next round. */
.lp-scan { --sweep: 2.2s; --read: 2.7s; --step: 380ms; --done: 6.3s; }
.lp-scan.armed .lp-page > span::before, .lp-scan.armed .lp-page > span::after, .lp-scan.armed .lp-page .ca,
.lp-scan.armed .lp-page-sum > span, .lp-scan.armed .lp-fr, .lp-scan.armed .lp-rc-total { transition: opacity .5s; }
.lp-scan.armed:not(.go) .lp-page > span::before, .lp-scan.armed:not(.go) .lp-page > span::after,
.lp-scan.armed:not(.go) .lp-page-sum > span, .lp-scan.armed:not(.go) .lp-fr, .lp-scan.armed:not(.go) .lp-rc-total { opacity: 0; }
.lp-scan.armed:not(.go) .lp-page .ca { opacity: .55; }
.lp-scan.go .lp-sweep { animation: lp-sweep var(--sweep) ease-in-out .4s; }
@keyframes lp-sweep { 0% { opacity: 0; top: 18px; } 10%, 90% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 52px); } }
.lp-scan.go .lp-page .ca { animation: lp-read .4s var(--ease-out) backwards; animation-delay: calc(var(--read) + var(--i) * var(--step)); }
@keyframes lp-read { from { opacity: .55; } }
.lp-scan.go .lp-page > span::before { animation: lp-ol .45s var(--ease-out) backwards; animation-delay: calc(var(--read) + var(--i) * var(--step)); }
@keyframes lp-ol { from { opacity: 0; transform: scale(1.08); } }
.lp-scan.go .lp-page > span::after { animation: lp-pop .4s var(--ease-out) backwards; animation-delay: calc(var(--read) + .1s + var(--i) * var(--step)); }
@keyframes lp-pop { from { opacity: 0; transform: scale(.4); } }
.lp-scan.go .lp-fr { animation: lp-fade .45s var(--ease-out) backwards; animation-delay: calc(var(--read) + .15s + var(--i) * var(--step)); }
.lp-scan.go .lp-page-sum > span { animation: lp-fade .4s var(--ease-out) backwards; animation-delay: var(--done); }
.lp-scan.go .lp-page-sum > span:nth-child(2) { animation-delay: calc(var(--done) + .2s); }
.lp-scan.go .lp-page-sum > span:nth-child(3) { animation-delay: calc(var(--done) + .4s); }
.lp-scan.go .lp-rc-total { animation: lp-fade .5s var(--ease-out) backwards; animation-delay: calc(var(--done) + .3s); }
@keyframes lp-fade { from { opacity: 0; transform: translateY(5px); } }

/* two receipts, one on the other */
.lp-receipts { position: relative; min-height: 680px; width: 100%; }
.lp-rc { position: absolute; width: min(82%, 340px); padding: 20px 20px 0; }
.lp-rc.r1 { left: 0; top: 0; transform: rotate(-3deg); z-index: 2; }
.lp-rc.r2 { right: 0; top: 390px; transform: rotate(4deg); z-index: 1; }
.lp-rc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 2px solid var(--text); font-size: 11px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.lp-rl { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.lp-rl .ca { width: 26px; }
.lp-rl b { margin-left: auto; font-stretch: 78%; font-size: 17px; font-variant-numeric: tabular-nums; }
.lp-rc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px !important; }
.lp-rc-total .lp-money { font-size: 40px; }
.lp-rc-note { margin-top: 6px !important; font-size: 13px; color: var(--muted); }
.lp-trade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0 4px; }
.lp-trade div { display: grid; gap: 2px; }
.lp-trade b { font-size: 26px; font-weight: 800; font-stretch: 78%; font-variant-numeric: tabular-nums; }
.lp-trade small { font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 559px) {
  .lp-receipts { min-height: 0; display: grid; gap: 0; }
  .lp-rc { position: relative; width: 100%; max-width: 340px; left: auto !important; right: auto !important; top: auto !important; }
  .lp-rc.r2 { margin-top: 18px; justify-self: end; }
}

/* the fair's till */
.lp-event { width: min(100%, 400px); padding: 22px 22px 0; transform: rotate(1.5deg); }
.lp-ev-big { font-size: clamp(52px, 6vw, 68px); margin-top: 4px; }
.lp-trays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.lp-mini { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.lp-mini li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lp-mini b { margin-left: auto; font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; font-size: 16px; }

/* the stock sheet, printed */
.lp-sheet { width: 100%; max-width: 600px; padding: 0; border-radius: 4px; overflow: hidden; transform: rotate(-1deg); }
.lp-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px 18px 12px; font-size: 13px; color: var(--muted); }
.lp-sheet-head > b { font-size: 17px; color: var(--text); }
.lp-sheet-head .sp { flex: 1; }
.lp-sheet-head span b { color: var(--text); font-stretch: 78%; font-size: 15px; font-variant-numeric: tabular-nums; }
.lp-sheet table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-sheet th { padding: 8px; background: var(--s2); text-align: left; font-size: 10.5px; font-weight: 800; font-stretch: 125%;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lp-sheet td { padding: 9px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.lp-sheet td:nth-child(2) { display: grid; }
.lp-sheet small { font-size: 11.5px; color: var(--muted); }
.lp-sheet td:first-child, .lp-sheet th:first-child { width: 46px; padding-left: 18px; padding-right: 0; }
.lp-sheet .ca { width: 28px; }
.lp-sheet .n { text-align: right; font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; font-size: 15px; }
.lp-sheet td.n.in, .lp-sheet td.n.out { font-weight: 700; }
.lp-sheet tr > :last-child { padding-right: 18px; }
@media (max-width: 559px) { .lp-sheet th:nth-child(3), .lp-sheet td:nth-child(3) { display: none; } }

/* vendor, not collector: one long receipt */
.lp-long { max-width: 760px; margin: 0 auto; padding: 44px clamp(20px, 5vw, 56px); transform: rotate(.6deg); }
.lp-long h2 { font-size: clamp(28px, 3.6vw, 42px); }
.lp-ledger { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--text); }
.lp-ledger li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lp-ledger li:last-child { border-bottom: 0; }
.lp-ledger .sgn { flex: none; width: 30px; font-size: 32px; font-weight: 800; line-height: .9; font-stretch: 78%; text-align: center; }
.lp-ledger b { font-size: 17px; }
.lp-ledger p { margin-top: 4px; color: var(--muted); line-height: 1.5; }

/* plans: receipts of the length their plan needs */
.lp-sub { margin-top: 16px !important; max-width: 58ch; color: var(--on-cloth-muted); font-size: 18px; line-height: 1.5; }
.lp-plans { display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 900px) { .lp-plans { grid-template-columns: repeat(3, 1fr); align-items: start; gap: 28px; } }
.lp-plan { padding: 22px 22px 0; }
.lp-plan:nth-child(1) { transform: rotate(-1.5deg); }
.lp-plan:nth-child(2) { transform: rotate(.8deg); }
.lp-plan:nth-child(3) { transform: rotate(-.6deg); }
.lp-plan h3 { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--text); font-size: 15px;
  font-weight: 800; font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; }
.lp-tag-stamp { margin-left: auto; padding: 3px 8px; border-radius: 2px; background: var(--text); color: var(--s1); font-size: 11px; letter-spacing: .06em; }
.lp-plan-for { margin-top: 12px !important; color: var(--muted); font-size: 14px; }
.lp-plan ul { list-style: none; margin: 12px 0 0; padding: 0; }
.lp-plan li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.lp-plan li:last-child { border-bottom: 0; }
.lp-plan li.soon { color: var(--muted); border-bottom-style: dashed; }

/* questions: a sheet */
.lp-faq { display: grid; gap: 28px 64px; }
@media (min-width: 960px) { .lp-faq { grid-template-columns: 1fr 1.6fr; align-items: start; } }
.lp-qs { padding: 4px 28px; border-radius: 4px; transform: rotate(-.4deg); }
.lp-qs details + details { border-top: 1px solid var(--line); }
.lp-qs summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 0; font-size: 17px; font-weight: 700;
  cursor: pointer; list-style: none; }
.lp-qs summary::-webkit-details-marker { display: none; }
.lp-qs summary svg { flex: none; margin-left: auto; width: 22px; height: 22px; color: var(--muted); transition: transform .2s var(--ease-out); }
.lp-qs details[open] summary svg { transform: rotate(45deg); }
.lp-qs details p { padding: 0 36px 20px 0; color: var(--muted); line-height: 1.55; }

/* closing: the next receipt */
.lp-end { max-width: 640px; margin: 0 auto; padding: 48px 28px 0; text-align: center; transform: rotate(-.8deg); }
.lp-end h2 { font-size: clamp(40px, 6vw, 72px); }
.lp-end > p { margin-top: 14px; color: var(--muted); font-size: 18px; }
.lp-end .lp-ctas { justify-content: center; }

.lp-foot { max-width: none; margin-top: 120px; padding: 36px 0 max(36px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cloth-line);
  font-size: 15px; color: var(--on-cloth); text-align: left; }
.lp-foot-in { display: grid; gap: 20px; }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 600; color: var(--on-cloth-muted); }
.lp-foot nav a:hover { color: var(--on-cloth); }
.lp-tm { font-size: 12px; color: var(--on-cloth-muted); }
.lp-foot .lp-lang { justify-self: start; }
@media (min-width: 900px) { .lp-foot-in { grid-template-columns: auto 1fr; align-items: center; } .lp-foot nav { justify-content: flex-end; }
  .lp-tm { grid-column: 1 / -1; } }

/* ---- laid on the table: objects drop and settle as they come into view (landing.js adds .lay, then .on) -------- */
.obj.lay { opacity: 0; translate: 0 -18px; scale: 1.04; transition: opacity .5s var(--ease-out), translate .7s var(--ease-out), scale .7s var(--ease-out); }
.obj.lay.on { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .obj.lay { opacity: 1; translate: none !important; scale: none; transition: none; }
  .lp-lines.go li, .lp-drawer.hit, .lp-save.press, .lp-slip.print { animation: none !important; }
}