/* Landing page, design system "Aushang". Tokens and system classes only; no literal colours.
   Structure: web/landing.template.html, built by scripts/build_landing.py. The demo frames the buyer app
   (web/app) at the desk and on the phone; landing.js sizes the frames and switches screens.
   Breakpoints in em, as in the design system: 37.5em (600 px), 64em (1024 px), 80em (1280 px). */

.lp {
  --lp-max: 90rem;
  --lp-gutter: var(--sf-gutter-phone);
  background: var(--sf-ground);
}
@media (min-width: 64em) {
  .lp { --lp-gutter: var(--sf-gutter-desk); }
}

:root { scroll-padding-block-start: calc(var(--sf-topbar) + var(--sf-space-4)); }
.lp ::selection { background: var(--sf-highlight); color: var(--sf-on-highlight); }

.lp main > section {
  max-inline-size: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* ------------------------------------------------------------------ top bar */
.lp-top { justify-content: space-between; }
.lp-top__nav { display: none; }
@media (min-width: 64em) {
  .lp-top__nav { display: flex; gap: var(--sf-space-1); margin-inline-end: auto; margin-inline-start: var(--sf-space-6); }
}
.lp-top__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sf-hit);
  padding-inline: var(--sf-space-3);
  color: var(--sf-ink-2);
  font-size: var(--sf-text-md);
  font-stretch: var(--sf-width-semi);
  font-weight: var(--sf-weight-semibold);
  text-decoration: none;
}
.lp-top__nav a:hover { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.lp-top__end { display: flex; align-items: center; gap: var(--sf-space-2); }
.lp-top__cta { display: none; }
@media (min-width: 37.5em) {
  .lp-top__cta { display: inline-flex; }
}

.lp-lang ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.lp-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--sf-hit);
  min-block-size: var(--sf-hit);
  color: var(--sf-ink-2);
  font-size: var(--sf-text-sm);
  font-stretch: var(--sf-width-semi);
  font-weight: var(--sf-weight-semibold);
  text-decoration: none;
}
.lp-lang a:hover { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.lp-lang a[aria-current="page"] {
  color: var(--sf-ink);
  font-weight: var(--sf-weight-heavy);
  text-decoration: underline;
  text-decoration-thickness: var(--sf-border-strong);
  text-underline-offset: 0.35em;
}

/* ------------------------------------------------------------------ hero */
.lp-hero {
  display: grid;
  gap: var(--sf-space-5);
  padding-block: var(--sf-space-10) var(--sf-space-8);
}
@media (min-width: 64em) {
  .lp-hero { gap: var(--sf-space-6); padding-block: var(--sf-space-16) var(--sf-space-12); }
}
.lp-hero__title {
  font-size: var(--sf-text-4xl);
  font-stretch: var(--sf-width-condensed);
  font-weight: var(--sf-weight-heavy);
  line-height: var(--sf-leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 37.5em) {
  .lp-hero__title { font-size: var(--sf-text-5xl); }
}
@media (min-width: 64em) {
  .lp-hero__title { font-size: var(--sf-text-6xl); }
}
.lp-hero__side { display: grid; gap: var(--sf-space-5); }
@media (min-width: 64em) {
  .lp-hero__side { grid-template-columns: minmax(0, 40rem) auto; justify-content: space-between; align-items: center; gap: var(--sf-space-12); }
}
.lp-hero__lead { max-inline-size: 64ch; color: var(--sf-ink-2); font-size: var(--sf-text-lg); line-height: var(--sf-leading-body); text-wrap: pretty; }
.lp-hero__plates { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }
@media (max-width: 37.49em) {
  .lp-hero__plates .sf-plate { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ section heads */
.lp-h2 {
  font-size: var(--sf-text-3xl);
  font-stretch: var(--sf-width-condensed);
  font-weight: var(--sf-weight-heavy);
  line-height: var(--sf-leading-tight);
  text-wrap: balance;
}
@media (min-width: 64em) {
  .lp-h2 { font-size: var(--sf-text-4xl); }
}
.lp-section-head, .lp-demo__head { display: grid; gap: var(--sf-space-3); margin-block-end: var(--sf-space-6); }
@media (min-width: 64em) {
  .lp-section-head, .lp-demo__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--sf-space-12); }
}
.lp-section-head__lead, .lp-demo__lead { max-inline-size: 38rem; color: var(--sf-ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------------ demo */
.lp-demo {
  padding-block: var(--sf-space-8) var(--sf-space-12);
  border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
}
.lp-demo__body { display: grid; gap: var(--sf-space-5); }
@media (min-width: 64em) {
  .lp-demo__body { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sf-space-6); align-items: start; }
}

/* Picker: a register beside the frames at the desk. On narrow screens the script swaps the wrapped plates for a
   native select; without the script the plates stay. */
.lp-picker { display: flex; flex-wrap: wrap; gap: var(--sf-space-3) var(--sf-space-4); }
.lp-demo.is-live .lp-picker { display: none; }
.lp-picker__group { min-inline-size: 0; }
.lp-picker__title {
  padding-block-end: var(--sf-space-1);
  color: var(--sf-ink-2);
  font-size: var(--sf-text-xs);
  font-stretch: var(--sf-width-semi);
  font-weight: var(--sf-weight-bold);
}
.lp-picker__list { display: flex; flex-wrap: wrap; gap: var(--sf-space-1); }
.lp-pick {
  display: flex;
  align-items: center;
  min-block-size: var(--sf-hit);
  padding: var(--sf-space-1-5) var(--sf-space-3);
  border: var(--sf-border-hair) solid var(--sf-rule);
  border-radius: var(--sf-radius-plate);
  background: var(--sf-surface);
  color: var(--sf-ink);
  font-size: var(--sf-text-md);
  font-stretch: var(--sf-width-semi);
  font-weight: var(--sf-weight-medium);
  text-decoration: none;
  transition: background-color var(--sf-dur-state) var(--sf-ease-out), border-color var(--sf-dur-state) var(--sf-ease-out);
}
.lp-pick:hover { border-color: var(--sf-control); background: var(--sf-surface-2); }
.lp-pick[aria-current="true"] { border-color: var(--sf-rule-strong); background: var(--sf-select); font-weight: var(--sf-weight-bold); }
@media (min-width: 64em) {
  .lp-picker, .lp-demo.is-live .lp-picker {
    position: sticky;
    inset-block-start: calc(var(--sf-topbar) + var(--sf-space-4));
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--sf-space-4);
    max-block-size: calc(100dvh - var(--sf-topbar) - var(--sf-space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--sf-control) transparent;
    scrollbar-width: thin;
  }
  .lp-picker__list { flex-direction: column; gap: 0; border-block-start: var(--sf-border-hair) solid var(--sf-rule); }
  .lp-pick {
    min-block-size: 2.5rem;
    padding: var(--sf-space-1-5) var(--sf-space-2);
    border: 0;
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: 0;
    background: transparent;
  }
  .lp-pick:hover { background: var(--sf-surface); }
  .lp-pick[aria-current="true"] { background: var(--sf-select); border-block-end-color: var(--sf-rule-strong); }
}

/* Stage bar: what the chosen screen is, how to look at it, where to open it. */
.lp-stage { display: grid; gap: var(--sf-space-4); min-inline-size: 0; }
.lp-stagebar {
  display: grid;
  gap: var(--sf-space-3);
  padding-block-end: var(--sf-space-4);
  border-block-end: var(--sf-border-hair) solid var(--sf-rule);
}
@media (min-width: 48em) {
  .lp-stagebar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sf-space-6); }
  .lp-chooser { grid-column: 1 / -1; }
}
.lp-chooser { display: grid; gap: var(--sf-space-1); max-inline-size: 24rem; }
@media (min-width: 64em) {
  .lp-chooser { display: none; }
}
.lp-caption { display: grid; gap: var(--sf-space-1); min-inline-size: 0; }
.lp-caption__name {
  font-size: var(--sf-text-xl);
  font-stretch: var(--sf-width-condensed);
  font-weight: var(--sf-weight-heavy);
  line-height: var(--sf-leading-tight);
}
.lp-caption__desc { min-block-size: 3em; max-inline-size: 64ch; color: var(--sf-ink-2); text-wrap: pretty; }
.lp-stagebar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2) var(--sf-space-5); }
.lp-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  min-block-size: var(--sf-hit);
  color: var(--sf-link);
  font-weight: var(--sf-weight-semibold);
  text-underline-offset: 0.25em;
}

/* Frames: phone first on narrow screens; at the desk side by side, ending on one line. */
.lp-frames {
  --lp-desk-s: 0.3;
  --lp-desk-h: 800px;
  --lp-phone-s: 0.9;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sf-space-5);
  min-inline-size: 0;
}
.lp-frames[data-mode="desk"] .lp-frame--phone,
.lp-frames[data-mode="phone"] .lp-frame--desk { display: none; }
.lp-frame--phone { order: -1; justify-self: center; }
@media (min-width: 64em) {
  .lp-frames[data-mode="both"] { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sf-space-6); }
  .lp-frame--phone { order: 0; }
}

.lp-frame { display: grid; gap: var(--sf-space-2); min-inline-size: 0; }
.lp-frame__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sf-space-3);
  min-inline-size: 0;
  color: var(--sf-ink-2);
  font-size: var(--sf-text-sm);
  font-stretch: var(--sf-width-semi);
  font-weight: var(--sf-weight-semibold);
}
.lp-frame__addr {
  display: none;
  overflow: hidden;
  color: var(--sf-ink-3);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 64em) {
  .lp-frame__addr { display: block; }
}
.lp-frame__view { position: relative; overflow: hidden; background: var(--sf-ground); }
.lp-frame__view iframe {
  display: block;
  border: 0;
  background: var(--sf-ground);
  color-scheme: light;
  transform-origin: 0 0;
  transition: opacity var(--sf-dur-state) var(--sf-ease-out);
}
.lp-frame__view.is-loading iframe { opacity: 0.35; }
.lp-frame__view.is-absent iframe { visibility: hidden; }
.lp-frame__absent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--sf-space-8);
  color: var(--sf-ink-2);
  font-size: var(--sf-text-lg);
  text-align: center;
  text-wrap: balance;
}

.lp-frame--desk .lp-frame__view {
  block-size: calc(var(--lp-desk-h) * var(--lp-desk-s) + 2px);
  border: var(--sf-border-hair) solid var(--sf-rule-strong);
}
.lp-frame--desk iframe {
  inline-size: var(--lp-desk-w, 1280px);
  block-size: var(--lp-desk-h);
  transform: scale(var(--lp-desk-s));
}
.lp-frame--phone .lp-frame__view {
  inline-size: calc(390px * var(--lp-phone-s) + 12px);
  block-size: calc(844px * var(--lp-phone-s) + 12px);
  border: 6px solid var(--sf-ink);
  border-radius: calc(var(--sf-radius-panel) * 5);
}
.lp-frame--phone iframe {
  inline-size: 390px;
  block-size: 844px;
  transform: scale(var(--lp-phone-s));
}
.lp-demo__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-2);
  max-inline-size: 72ch;
  color: var(--sf-ink-2);
  font-size: var(--sf-text-sm);
}

/* ------------------------------------------------------------------ what it does: a register, not cards */
.lp-jobs { padding-block: var(--sf-space-12); }
.lp-job {
  display: grid;
  gap: var(--sf-space-4);
  padding-block: var(--sf-space-6);
  border-block-start: var(--sf-border-hair) solid var(--sf-rule);
}
.lp-job:first-of-type { border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong); }
@media (min-width: 64em) {
  .lp-job { grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: var(--sf-space-8); align-items: start; }
}
.lp-job__head { display: grid; gap: var(--sf-space-1); }
.lp-job__verb {
  font-size: var(--sf-text-2xl);
  font-stretch: var(--sf-width-condensed);
  font-weight: var(--sf-weight-heavy);
  line-height: var(--sf-leading-tight);
}
.lp-job__lead { color: var(--sf-ink-2); text-wrap: pretty; }
.lp-job__points { display: grid; gap: var(--sf-space-3); }
@media (min-width: 80em) {
  .lp-job__points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sf-space-8); }
}
.lp-job__points li { position: relative; max-inline-size: 60ch; padding-inline-start: var(--sf-space-5); text-wrap: pretty; }
.lp-job__points li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  inline-size: 0.6rem;
  block-size: var(--sf-border-strong);
  background: var(--sf-ink);
}
.lp-job__screens, .lp-step__screens { color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: var(--sf-leading-body); }
.lp-job__label { display: block; color: var(--sf-ink); font-weight: var(--sf-weight-bold); }
.lp-job__screens a, .lp-step__screens a { color: var(--sf-link); font-weight: var(--sf-weight-semibold); text-underline-offset: 0.25em; }

/* ------------------------------------------------------------------ how a case runs: four steps in order */
.lp-how { padding-block: var(--sf-space-12); }
.lp-steps { display: grid; gap: var(--sf-space-8) var(--sf-space-8); counter-reset: lp-step; }
@media (min-width: 48em) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80em) {
  .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lp-step {
  display: grid;
  align-content: start;
  gap: var(--sf-space-2);
  padding-block-start: var(--sf-space-4);
  border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
  counter-increment: lp-step;
}
.lp-step::before {
  content: counter(lp-step);
  font-size: var(--sf-text-4xl);
  font-stretch: var(--sf-width-condensed);
  font-variant-numeric: tabular-nums;
  font-weight: var(--sf-weight-heavy);
  line-height: 1;
}
.lp-step__title { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
.lp-step__text { color: var(--sf-ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------------ who it is for: one posted sheet */
.lp-roles { padding-block: var(--sf-space-12); }
.lp-roles__list {
  display: grid;
  background: var(--sf-surface);
  border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
}
@media (min-width: 48em) {
  .lp-roles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80em) {
  .lp-roles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lp-role {
  display: grid;
  align-content: start;
  gap: var(--sf-space-2);
  padding: var(--sf-space-5) var(--sf-space-5) var(--sf-space-6);
  border-block-end: var(--sf-border-hair) solid var(--sf-rule);
}
@media (min-width: 48em) {
  .lp-role:nth-child(odd) { border-inline-end: var(--sf-border-hair) solid var(--sf-rule); }
}
@media (min-width: 80em) {
  .lp-role { border-block-end: 0; border-inline-end: var(--sf-border-hair) solid var(--sf-rule); }
  .lp-role:last-child { border-inline-end: 0; }
}
.lp-role__title { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
.lp-role__text { color: var(--sf-ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------------ principles */
.lp-rules { padding-block: var(--sf-space-12); }
.lp-rules .lp-h2 { margin-block-end: var(--sf-space-6); }
.lp-rules__list {
  display: grid;
  border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
}
@media (min-width: 48em) {
  .lp-rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sf-space-8); }
}
@media (min-width: 80em) {
  .lp-rules__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lp-rule {
  display: grid;
  gap: var(--sf-space-1);
  padding-block: var(--sf-space-5);
  border-block-end: var(--sf-border-hair) solid var(--sf-rule);
}
.lp-rule__title { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
.lp-rule__text { max-inline-size: 48ch; color: var(--sf-ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------------ questions */
.lp-faq { padding-block: var(--sf-space-12); }
@media (min-width: 64em) {
  .lp-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sf-space-12); align-items: start; }
}
.lp-faq .lp-h2 { margin-block-end: var(--sf-space-5); }
.lp-faq__list {
  border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
  border-block-end: var(--sf-border-hair) solid var(--sf-rule);
}
.lp-faq__item:first-child { border-block-start: 0; }
.lp-faq__item > summary, .lp-faq__item .sf-details__body { padding-inline-end: 0; }
.lp-faq__item > summary { padding-inline-start: 0; }
.lp-faq__item > summary {
  min-block-size: var(--sf-target-phone);
  padding-block: var(--sf-space-2);
  color: var(--sf-ink);
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-semibold);
  cursor: pointer;
}
.lp-faq__item > summary:hover { background: var(--sf-surface-2); }
.lp-faq__item .sf-details__body { padding-inline-start: calc(var(--sf-space-2) + 6px); font-size: var(--sf-text-base); }
.lp-faq__item .sf-details__body p { max-inline-size: 64ch; }

/* ------------------------------------------------------------------ close: a posted notice */
.lp-close { padding-block: var(--sf-space-8) var(--sf-space-16); }
.lp-close__box {
  display: grid;
  justify-items: start;
  gap: var(--sf-space-4);
  padding: var(--sf-space-8) var(--sf-space-5);
  background: var(--sf-surface);
  border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
}
@media (min-width: 64em) {
  .lp-close__box { padding: var(--sf-space-12); }
}
.lp-close__text { max-inline-size: 52ch; color: var(--sf-ink-2); font-size: var(--sf-text-lg); text-wrap: pretty; }

/* ------------------------------------------------------------------ foot */
.lp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-2) var(--sf-space-6);
  max-inline-size: var(--lp-max);
  margin-inline: auto;
  padding: var(--sf-space-6) var(--lp-gutter) var(--sf-space-10);
  border-block-start: var(--sf-border-hair) solid var(--sf-rule);
  color: var(--sf-ink-2);
  font-size: var(--sf-text-sm);
}
.lp-foot__brand { color: var(--sf-ink); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); font-size: var(--sf-text-lg); }
.lp-foot__note { margin-inline-end: auto; }