/* 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);
  --lp-phone-w: 390px;
  --lp-phone-h: 844px;
  --lp-desk-w: 1280px;
  --lp-desk-s: 0.28;
  --lp-phone-s: 0.9;
  --lp-desk-h: 800px;
  background: var(--sf-ground);
}
@media (min-width: 64em) {
  .lp { --lp-gutter: var(--sf-gutter-desk); --lp-phone-s: 0.72; }
}

: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 main > .lp-demo { padding-block-start: var(--sf-space-8); }
.lp-demo__body { display: grid; gap: var(--sf-space-5); }
@media (min-width: 64em) {
  .lp-demo__body { grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--sf-space-8); align-items: start; }
}

/* Picker: wrapped plates on phones and tablets, a register beside the frames at the desk. */
.lp-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-3) var(--sf-space-4);
}
.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;
  white-space: nowrap;
  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 {
    position: sticky;
    inset-block-start: calc(var(--sf-topbar) + var(--sf-space-4));
    flex-direction: column;
    gap: var(--sf-space-4);
    flex-wrap: nowrap;
  }
  .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;
    white-space: normal;
  }
  .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: phone first on small screens, desk and phone side by side at the desk, caption below. */
.lp-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sf-space-5);
  min-inline-size: 0;
}
.lp-frame--phone { order: -1; justify-self: center; }
@media (min-width: 64em) {
  .lp-stage { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sf-space-6); }
  .lp-frame--phone { order: 0; }
  .lp-caption { grid-column: 1 / -1; }
}

.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-surface); }
.lp-frame__view iframe {
  display: block;
  color-scheme: light;
  border: 0;
  background: var(--sf-ground);
  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--desk .lp-frame__view {
  block-size: calc(var(--lp-desk-h) * var(--lp-desk-s));
  border: var(--sf-border-hair) solid var(--sf-rule-strong);
}
.lp-frame--desk iframe {
  inline-size: var(--lp-desk-w);
  block-size: var(--lp-desk-h);
  transform: scale(var(--lp-desk-s));
}

.lp-frame--phone .lp-frame__view {
  inline-size: calc(var(--lp-phone-w) * var(--lp-phone-s) + 12px);
  block-size: calc(var(--lp-phone-h) * 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: var(--lp-phone-w);
  block-size: var(--lp-phone-h);
  transform: scale(var(--lp-phone-s));
}

.lp-caption {
  display: grid;
  gap: var(--sf-space-1);
  padding-block-start: var(--sf-space-3);
  border-block-start: var(--sf-border-hair) solid var(--sf-rule);
}
@media (min-width: 37.5em) {
  .lp-caption { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sf-space-6); align-items: baseline; }
  .lp-caption__open { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.lp-caption__name { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
.lp-caption__desc { max-inline-size: 60ch; color: var(--sf-ink-2); }
.lp-caption__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;
}
.lp-demo__note {
  max-inline-size: 72ch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-2);
  margin-block-start: var(--sf-space-5);
  color: var(--sf-ink-2);
  font-size: var(--sf-text-sm);
}

/* ------------------------------------------------------------------ three jobs: a register, not cards */
.lp-jobs { padding-block: var(--sf-space-12); }
.lp-job {
  display: grid;
  gap: var(--sf-space-3);
  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: 14rem minmax(0, 1fr) 16rem; gap: var(--sf-space-8); align-items: baseline; }
}
.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__text { max-inline-size: 64ch; text-wrap: pretty; }
.lp-job__screens { color: var(--sf-ink-2); font-size: var(--sf-text-sm); line-height: var(--sf-leading-body); }
.lp-job__label { display: block; font-weight: var(--sf-weight-bold); color: var(--sf-ink); }
.lp-job__screens a { color: var(--sf-link); font-weight: var(--sf-weight-semibold); text-underline-offset: 0.25em; }

/* ------------------------------------------------------------------ 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; }