/* Setup, Mix B: the build the founder asked for on 18 Oct 2026 (Figma "Web 2026-10 Merchants", Mix B: setup 1440
 * and 390). The shopfront doodle right of the title with no panel (title at y 148 at 1440), the option cards
 * beside a sticky head column carrying the perk-storefront model, the enforce checks beside the
 * verification-reader model alone and centred under the copy, the step cards on the tint band, the questions
 * beside a sticky intro, and the dark closing band with the orange email pill.
 * Loaded after site.css and site-launch.css, before company-theme.css (tokens, header and footer in the dark).
 */

.ls .su-main { padding-bottom: 0; }

/* ---------- shared type ---------- */
.ls .su-kicker { color: var(--ls-accent-text); font-size: 14px; font-weight: 700; line-height: 1.5; }
.ls .su-h2 { font-size: 40px; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; text-wrap: wrap; }
.ls .su-line { color: var(--ls-soft); font-size: 17px; font-weight: 500; line-height: 1.6; }
.ls .su-side, .ls .su-steps-head > div { display: flex; flex-direction: column; gap: 12px; }

/* ---------- hero ---------- */
.ls .su-hero { padding: 23px 0 72px; }
.ls .su-hero-row { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 40px; align-items: center; }
.ls .su-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ls .su-pill { padding: 6px 14px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-sand); font-size: 14px; font-weight: 700; line-height: 1.2; }
.ls .su-title { font-size: 56px; font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.ls .su-lede { color: var(--ls-soft); font-size: 19px; font-weight: 500; line-height: 1.5; }
.ls .su-aside { color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 1.4; }
.ls .su-aside a { color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ls .su-aside a:hover { text-decoration-thickness: 2.5px; }
/* The shopfront, untilted, flush with the content's right edge, as tall as the title block. */
.ls .su-hero-art { display: flex; justify-content: flex-end; }
.ls .su-hero-art img { display: block; width: auto; height: 301px; max-width: 100%; object-fit: contain; }

/* ---------- bands ---------- */
.ls .su-band { padding: 96px 0; }
.ls .su-band--tint { background: var(--ls-tint); }
.ls .su-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 0 80px; align-items: start; }
/* A short column beside a long one holds still on desktop, only where the whole column fits. */
@media (min-width: 900px) and (min-height: 760px) {
  .ls .su-side--sticky { position: sticky; top: 112px; }
}

/* ---------- 3D models (homepage hero pose; tilt.js press, drag and settle) ---------- */
.ls .su-model-box { display: grid; place-items: center; }
.ls .su-model { display: block; line-height: 0; transform-origin: 50% 100%; }
.ls .su-model img { display: block; width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
:root:not([data-theme="dark"]) .ls .su-model-dark, :root[data-theme="dark"] .ls .su-model-light { display: none; }
.ls .tud-tilt { position: relative; z-index: 1; display: block; line-height: 0; transform-origin: 50% 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ls .tud-tilt.is-grabbing { cursor: grabbing; }
.ls .su-model.is-before { transform: translateY(20px) scale(.9); }
@media (prefers-reduced-motion: reduce) { .ls .su-model.is-before { transform: none; } }
.ls .su-model-box--store { height: 340px; margin-top: 28px; }
.ls .su-model-box--store .su-model { width: 330px; }
/* The reader alone (the founder dropped the hijab doodle here): centred in the left column under the copy. */
.ls .su-model-box--reader { grid-area: model; height: 300px; margin-top: 32px; }
.ls .su-model-box--reader .su-model { width: 296px; }

/* The homepage's verify scanner delight on the reader (home.css .tud-scan rules, copied unchanged and scoped here so
   the homepage keeps its own file): tilt.js builds the layers for data-tilt-scan and plays them as the section comes
   in (replay.js, setAt 0.62, 260 ms later, again on the way back) and on a tap; never under reduced motion. The beam
   and glow are masked to the card's face (the same mask, traced from the same 800 x 790 still), the arch hops and the
   base light blinks. */
.ls .su-model-box--reader .tud-scan { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url("/assets/img/models/verification-reader-card.png") 0 0 / 100% 100% no-repeat; mask: url("/assets/img/models/verification-reader-card.png") 0 0 / 100% 100% no-repeat; }
.ls .su-model-box--reader .tud-scan-beam { position: absolute; left: -15%; width: 130%; top: 10%; height: 14%; rotate: 13deg; background: linear-gradient(rgba(255, 92, 38, 0) 0, rgba(255, 92, 38, .05) 45%, rgba(255, 92, 38, .16) calc(100% - 3px), rgba(255, 248, 240, 1) calc(100% - 3px), rgba(255, 248, 240, 1) calc(100% - 2px), rgba(255, 92, 38, 1) calc(100% - 2px)); }
.ls .su-model-box--reader .tud-scan-beam::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(rgba(255, 92, 38, .35), rgba(255, 92, 38, 0)); }
.ls .su-model-box--reader .tud-scan-glow { position: absolute; inset: 0; background: radial-gradient(circle at 39.8% 38.2%, rgba(255, 92, 38, .30) 0, rgba(255, 92, 38, .16) 7%, rgba(255, 92, 38, 0) 13%); }
.ls .su-model-box--reader .tud-scan-lamp { position: absolute; z-index: 5; left: 11.6%; top: 79%; width: 13.5%; height: 1.7%; border-radius: 999px; pointer-events: none; background: rgba(255, 248, 240, .9); box-shadow: 0 0 10px 3px rgba(255, 92, 38, .85), 0 0 26px 8px rgba(255, 92, 38, .35); transform: rotate(10.7deg); }

/* ---------- option cards ---------- */
.ls .su-options { display: flex; flex-direction: column; gap: 16px; }
.ls .su-option { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .su-option-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ls .su-option h3 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; }
.ls .su-option > p { color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 1.6; }
.ls .su-chip { padding: 4px 12px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-chai); font-size: 13px; font-weight: 700; line-height: 1.2; }

/* ---------- questions (the shared site accordion) ---------- */
.ls .su-faq summary { min-height: 102px; }
.ls .su-faq--card details:last-child { border-bottom: 0; }
.ls .su-faq--card .ls-faq-body > :last-child { padding-bottom: 26px; }

/* ---------- enforce checks ---------- */
.ls .su-split--enforce { grid-template-areas: "side checks" "model checks"; }
.ls .su-split--enforce .su-side { grid-area: side; }
.ls .su-checks { grid-area: checks; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ls .su-check { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .su-check--wide { grid-column: 1 / -1; }
.ls .su-check dt { color: var(--ls-ink); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.ls .su-check dd { margin: 0; color: var(--ls-soft); font-size: 15px; font-weight: 500; line-height: 1.5; }

/* ---------- steps ---------- */
.ls .su-steps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 48px; }
.ls .su-steps-head .su-line { width: 440px; max-width: 100%; }
.ls .su-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ls .su-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line); }
.ls .su-step-num { position: absolute; top: 25px; right: 25px; color: var(--ls-accent-text); font-family: var(--tud-font-secondary); font-size: 13px; font-weight: 700; line-height: 1; }
/* One box for every doodle, each untilted and centred at the size the design gives it. */
.ls .su-step-art { display: grid; place-items: center; height: 136px; }
.ls .su-step-art img { display: block; width: auto; height: 118px; }
.ls .su-step-art--hands img { height: auto; width: 161px; }
.ls .su-step h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.ls .su-step p { color: var(--ls-soft); font-size: 15px; font-weight: 500; line-height: 1.5; }

/* ---------- closing band ---------- */
.ls .su-cta { padding: 72px 0; color: #FFFFFF; background: #141412; }
.ls .su-cta .ls-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ls .su-cta h2 { max-width: 720px; color: #FFFFFF; font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls .su-cta p { max-width: 640px; color: #FFFFFF; font-size: 17px; font-weight: 500; line-height: 1.55; }
.ls .su-cta .su-cta-btn { min-height: 52px; border-color: var(--ls-orange); color: #141412; background: var(--ls-orange); overflow-wrap: anywhere; }
.ls .su-cta .su-cta-btn:hover { border-color: #EB501D; background: #EB501D; }
.ls .su-cta .su-cta-btn:focus-visible { outline-color: #FAF7F2; }
@media (prefers-reduced-motion: reduce) { .ls .su-cta .su-cta-btn { transition: none; transform: none; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .ls .su-split { grid-template-columns: 320px minmax(0, 1fr); column-gap: 48px; }
  .ls .su-model-box--store .su-model { width: 300px; }
}
@media (max-width: 900px) {
  .ls .su-hero-row { grid-template-columns: 1fr; gap: 28px; }
  .ls .su-hero-art { justify-content: center; }
  .ls .su-hero-art img { height: auto; width: min(100%, 300px); }
  .ls .su-split { grid-template-columns: minmax(0, 1fr); }
  .ls .su-split--enforce { grid-template-areas: "side" "checks" "model"; }
  .ls .su-model-box--store { height: 250px; margin: 28px 0; }
  .ls .su-model-box--store .su-model { width: 250px; }
  .ls .su-split--enforce .su-checks { margin-top: 28px; }
  .ls .su-split > .ls-faq { margin-top: 24px; }
  .ls .su-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ls .su-steps-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
}
@media (max-width: 600px) {
  .ls .su-hero { padding: 16px 0 48px; }
  .ls .su-hero-copy { gap: 16px; }
  .ls .su-title { font-size: 40px; letter-spacing: -0.04em; }
  .ls .su-lede { font-size: 16px; }
  .ls .su-aside-q { display: block; margin-bottom: 2px; }
  .ls .su-band { padding: 56px 0; }
  .ls .su-h2 { font-size: 32px; }
  .ls .su-option { padding: 21px; }
  .ls .su-checks { grid-template-columns: minmax(0, 1fr); }
  .ls .su-model-box--reader { height: auto; margin-top: 32px; }
  .ls .su-model-box--reader .su-model { width: 220px; }
  .ls .su-step { padding: 21px; }
  .ls .su-step-num { top: 22px; right: 22px; }
  .ls .su-cta { padding: 48px 0; }
  .ls .su-cta h2 { font-size: 30px; }
}

/* ---------- dark ---------- */
/* The tint bands take the dark tint, cards the paper; the pill and chip take the deep tones (cream text 8:1 and
   up); the closing band is the darkest band below the ground, its orange pill unchanged with ink words (6.0:1). */
:root[data-theme="dark"] .ls .su-cta { color: #F6EFE4; background: var(--ls-band); box-shadow: inset 0 1px 0 #2E2822; }
:root[data-theme="dark"] .ls .su-cta :is(h2, p) { color: #F6EFE4; }
:root[data-theme="dark"] .ls .su-cta .su-cta-btn { color: #141412; }
/* The tint bands stay a warm step above the ground without the light tint's orange cast; their cards rise one more
   step to the raised surface with the hairline (soft text 8.0:1, accent text 6.3:1 on the raised cards). */
:root[data-theme="dark"] .ls .su-band--tint { background: #261C16; }
:root[data-theme="dark"] .ls .su-band--tint :is(.su-option, .su-step) { background: var(--ls-raised); box-shadow: inset 0 0 0 1px var(--ls-line-2); }