/* Landing page (pages/landing.js).
 *
 * Editorial and quiet: type carries the page, hairlines separate instead of
 * boxes, one green from the logo does the work and the gold only ever
 * decorates. The product scenes are the imagery. No gradients, no glows, no
 * emoji (owner's rules). Logical properties throughout, so RTL is the
 * default and LTR is the mirror, not the other way round.
 */

.lp {
  --lp-max: 1160px;
  --lp-gutter: clamp(16px, 4vw, 40px);
  --lp-section: clamp(64px, 9vw, 120px);
  --lp-measure: 46ch;
  --lp-luxury-ink: #07140D;
  --lp-luxury-panel: rgba(255, 255, 255, .9);
  --lp-luxury-line: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: var(--bg);
  color: var(--text);
  min-block-size: 100vh;
}

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

.lp-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* --- Type ----------------------------------------------------------------- */
.lp-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 68px;
  line-height: 1.16;
  max-inline-size: 15ch;
  margin: 0;
  text-wrap: balance;
}
/* Latin headlines sit tighter; Arabic script must never be tracked. */
.lp-display:lang(en), .lp-h2:lang(en) { letter-spacing: 0; line-height: 1.1; }
/* English runs longer than Arabic for the same sentence. */
.lp-display:lang(en) { max-inline-size: 18ch; font-size: 62px; }

.lp-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.24;
  margin: 0 0 var(--sp-5);
  max-inline-size: 22ch;
  text-wrap: balance;
  scroll-margin-block-start: 96px;
}
.lp-h2:focus { outline: none; }

.lp-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  margin: 0 0 var(--sp-4);
}

.lp-lede {
  font-size: var(--fs-body-l);
  line-height: 1.75;
  color: var(--text-muted);
  max-inline-size: var(--lp-measure);
  margin: 0 0 var(--sp-8);
}

.lp-body {
  font-size: var(--fs-body-m);
  line-height: 1.75;
  color: var(--text-muted);
  max-inline-size: var(--lp-measure);
  margin: 0 0 var(--sp-6);
}

.lp-small { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-muted); margin: var(--sp-4) 0 0; }

.lp-index {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  color: var(--text-subtle);
  font-size: var(--fs-label);
}
/* The logo's gold, as a short rule — decoration, never text. */
.lp-index::after { content: ''; inline-size: 28px; block-size: 2px; border-radius: 2px; background: var(--accent); }

/* --- Buttons & links -------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 48px;
  padding-inline: var(--sp-7);
  border-radius: var(--r-pill);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--text-inverse);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--brand) 55%, transparent);
  transition: background-color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease);
}
.lp-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--brand) 70%, transparent); }
.lp-btn--quiet { background: transparent; color: var(--brand-text); border-color: var(--border-strong); }
.lp-btn--quiet:hover { background: var(--surface-hover); border-color: var(--brand); }
.lp-btn--sm { position: relative; min-block-size: 40px; padding-inline: var(--sp-5); font-size: var(--fs-label); }
/* 40px to look at, 48px to hit (CLAUDE.md §1.7). */
.lp-btn--sm::after { content: ''; position: absolute; inset: -4px; }

.lp-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-block-size: 48px;
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: none;
}
.lp-link__muted { color: var(--text-muted); font-weight: 400; }
.lp-link:hover span:not(.lp-link__muted) { text-decoration: underline; text-underline-offset: 4px; }
.lp-link svg { transition: transform var(--m-fast) var(--ease); }
.lp-link:hover svg { transform: translateX(3px); }
[dir="rtl"] .lp-link:hover svg { transform: scaleX(-1) translateX(3px); }

.lp :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }

/* --- Header ----------------------------------------------------------------- */
.lp-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 8px 28px -28px rgba(7, 20, 13, .5);
}
.lp-header__row { display: flex; align-items: center; gap: var(--sp-6); min-block-size: 68px; }
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 48px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.lp-brand img { filter: drop-shadow(0 8px 14px rgba(7, 20, 13, .12)); }
.lp-header__nav { display: flex; gap: var(--sp-7); margin-inline-start: var(--sp-5); }
.lp-header__nav a, .lp-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-label);
}
.lp-header__nav a:hover, .lp-footer__nav a:hover { color: var(--text); }
.lp-header__tools { display: flex; align-items: center; gap: var(--sp-3); margin-inline-start: auto; }

/* Three language names, divided by hairlines; the current one is simply darker. */
.lp-langs { display: flex; align-items: center; }
.lp-langs__item {
  position: relative;
  min-block-size: 48px;
  padding-inline: var(--sp-3);
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
}
.lp-langs__item + .lp-langs__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 16px;
  inline-size: 1px;
  background: var(--border-strong);
}
.lp-langs__item[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.lp-langs__item:hover { color: var(--text); }

.lp-icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.lp-icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* --- Hero ------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: min(820px, calc(100svh - 68px));
  padding-block: clamp(54px, 7vw, 92px);
  overflow: clip;
  color: #F8FBF8;
  background-color: var(--lp-luxury-ink);
}
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../images/banner_clinics.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.lp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 20, 13, .68);
  box-shadow: inset 56vw 0 0 rgba(7, 20, 13, .26), inset 0 -160px 0 rgba(7, 20, 13, .26), inset 0 140px 0 rgba(7, 20, 13, .2);
}
.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(280px, 4fr);
  gap: clamp(36px, 7vw, 104px);
  align-items: center;
}
.lp-hero__copy {
  position: relative;
  padding-block: clamp(18px, 3vw, 38px);
}
.lp-hero__copy::before {
  content: '';
  display: block;
  inline-size: 88px;
  block-size: 2px;
  margin-block-end: var(--sp-7);
  background: var(--accent);
}
.lp-hero__copy .lp-lede { margin-block-start: var(--sp-7); }
.lp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
.lp-hero .lp-display { text-shadow: 0 18px 48px rgba(0, 0, 0, .38); }
.lp-hero .lp-lede { color: rgba(248, 251, 248, .82); }
.lp-hero .lp-btn {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 86%, white);
  color: #102014;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .54);
}
.lp-hero .lp-btn:hover {
  background: color-mix(in srgb, var(--accent) 88%, white);
  border-color: color-mix(in srgb, var(--accent) 74%, white);
}
.lp-hero .lp-link { color: #FFFFFF; }
.lp-hero .lp-link__muted { color: rgba(248, 251, 248, .72); }

/* The phone: a frame and a screen, nothing more. */
.lp-device-wrap { position: relative; justify-self: center; inline-size: min(100%, 340px); }
.lp-device {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 38px;
  background: rgba(248, 251, 248, .92);
  color: var(--text);
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .62), 0 0 0 1px rgba(201, 160, 90, .18);
}
.lp-device__screen {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: 29px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft));
}

.ticket__status { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--success); font-weight: 600; font-size: var(--fs-label); }
.ticket__who { display: flex; align-items: center; gap: var(--sp-4); }
.ticket__who p { margin: 0; }
.ticket__name { font-weight: 600; }
.ticket__meta { color: var(--text-muted); font-size: var(--fs-label); }
.ticket__place, .ticket__serving { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; color: var(--text-muted); font-size: var(--fs-label); }
.ticket__dot { color: var(--text-subtle); }

.ticket__queue {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--lp-luxury-line);
  background: color-mix(in srgb, var(--surface) 88%, var(--brand-soft));
}
.ticket__queue p { margin: 0; }
.ticket__label { color: var(--text-muted); font-size: var(--fs-caption); }
.ticket__number { font-size: 56px; line-height: 1; font-weight: 600; color: var(--brand-text); }
/* The queue as dots: seen, being seen, waiting, and you. */
.ticket__line { display: flex; align-items: center; gap: 5px; list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.ticket__line li { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.ticket__line li.is-done { background: var(--border-strong); }
.ticket__line li.is-now { background: var(--brand); border-color: var(--brand); }
.ticket__line li.is-you { inline-size: 14px; block-size: 14px; border: 2px solid var(--brand); }
.ticket__fee {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block-start: var(--sp-4);
  border-block-start: 1px dashed var(--border-strong);
  font-size: var(--fs-label);
}

/* The reminder, pinned beside the phone the way a notification arrives. */
.lp-note {
  position: absolute;
  inset-block-end: 64px;
  inset-inline-end: -56px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-inline-size: 216px;
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 42px -24px rgba(0, 0, 0, .55);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}
.lp-note svg { flex: none; color: var(--brand-text); }

.lp-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-soft) 74%, white);
  color: var(--brand-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  font-weight: 700;
  font-size: var(--fs-label);
}
.lp-avatar--nursing { background: color-mix(in srgb, var(--lane-nursing) 16%, var(--surface)); color: var(--lane-nursing); }

/* --- Sections --------------------------------------------------------------- */
.lp-section { padding-block: var(--lp-section); border-block-start: 1px solid var(--border); }
.lp-section--sunken {
  background: color-mix(in srgb, var(--surface-sunken) 92%, var(--brand-soft));
}
.lp-section--tight { padding-block: clamp(48px, 6vw, 72px); }

.lp-features { list-style: none; margin: var(--sp-10) 0 0; padding: 0; }
.lp-feature {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
}
.lp-feature::before {
  content: '';
  position: absolute;
  inset-block: clamp(28px, 4vw, 48px);
  inset-inline: calc(var(--lp-gutter) * -1);
  z-index: -1;
  border-block: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background-color: color-mix(in srgb, var(--surface) 80%, var(--brand-soft));
  background-size: cover;
  background-position: center;
  opacity: .18;
}
.lp-feature--clinic::before { background-image: url('../images/banner_clinics.jpg'); }
.lp-feature--pharmacy::before { background-image: url('../images/banner_pharmacy.jpg'); }
.lp-feature--nursing::before { background-image: url('../images/banner_nursing.jpg'); }
.lp-feature:first-child { padding-block-start: 0; }
.lp-feature + .lp-feature { border-block-start: 1px solid var(--border); }
.lp-feature:nth-child(even) .lp-feature__scene { order: -1; }

.lp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.lp-ticks li { display: flex; align-items: center; gap: var(--sp-3); }
.lp-ticks svg { flex: none; color: var(--accent); }

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.lp-split--reverse > :last-child { order: -1; }

.lp-points { list-style: none; margin: 0; padding: 0; max-inline-size: var(--lp-measure); }
.lp-points li { padding-block: var(--sp-5); border-block-start: 1px solid var(--lp-luxury-line); line-height: 1.7; }
.lp-points li:last-child { border-block-end: 1px solid var(--lp-luxury-line); }

.lp-defs { margin: 0 0 var(--sp-8); max-inline-size: var(--lp-measure); }
.lp-defs > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-5); padding-block: var(--sp-5); border-block-start: 1px solid var(--lp-luxury-line); }
.lp-defs > div:last-child { border-block-end: 1px solid var(--lp-luxury-line); }
.lp-defs dt { font-weight: 600; }
.lp-defs dd { margin: 0; color: var(--text-muted); line-height: 1.7; }

.lp-app { display: flex; align-items: center; gap: var(--sp-7); }
.lp-app {
  padding: clamp(24px, 4vw, 40px);
  border-block: 1px solid var(--lp-luxury-line);
  background: color-mix(in srgb, var(--surface) 86%, var(--brand-soft));
}
.lp-app .lp-h3 { margin-block-end: var(--sp-2); }
.lp-app .lp-body { margin: 0; }
.lp-app__mark { flex: none; filter: drop-shadow(0 14px 22px rgba(12, 30, 20, .16)); }

/* --- Scenes ----------------------------------------------------------------- */
.scene {
  display: grid;
  gap: var(--sp-5);
  inline-size: 100%;
  max-inline-size: 460px;
  justify-self: center;
  margin: 0;
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--border-strong) 78%, var(--accent));
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-soft));
  box-shadow: 0 24px 48px -34px rgba(12, 30, 20, .32), inset 0 1px 0 rgba(255, 255, 255, .48);
}
.scene__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--lp-luxury-line);
}
.scene__title { font-weight: 600; }
.scene__muted { color: var(--text-muted); font-size: var(--fs-label); }
.scene__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-1);
  min-block-size: 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 88%, white);
}
.slot--taken { border-style: dashed; border-color: var(--border); color: var(--text-subtle); }
.slot--taken .lp-data { text-decoration: line-through; }
.slot__note { font-size: var(--fs-caption); line-height: 1; }
.slot--chosen { background: var(--brand); border-color: var(--brand); color: var(--text-inverse); font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--sp-4);
  align-items: start;
  padding-block-end: var(--sp-6);
  color: var(--text-muted);
}
.step:last-child { padding-block-end: 0; }
/* The rail between markers. */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: 11px;
  inset-block: 26px 2px;
  inline-size: 2px;
  background: var(--border);
}
.step--done:not(:last-child)::before { background: var(--brand); }
.step__mark {
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
}
.step--done .step__mark { background: var(--brand); border-color: var(--brand); color: var(--text-inverse); }
.step--now { color: var(--text); font-weight: 600; }
.step--now .step__mark { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 12px var(--brand); }
.step__text { display: grid; gap: var(--sp-1); }
.step__sub { color: var(--brand-text); font-weight: 400; font-size: var(--fs-label); }
.step .lp-data { font-size: var(--fs-label); color: var(--text-subtle); }

/* A route, drawn — the patient's address is never on the page. */
.route {
  border-radius: var(--r-md);
  border: 1px solid var(--lp-luxury-line);
  background: color-mix(in srgb, var(--surface-sunken) 88%, var(--brand-soft));
  padding: var(--sp-3);
}
.route__svg { display: block; inline-size: 100%; block-size: auto; }
[dir="rtl"] .route__svg { transform: scaleX(-1); }
.route__path { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.route__done { fill: none; stroke: var(--lane-nursing); stroke-width: 3; stroke-linecap: round; }
.route__start { fill: var(--lane-nursing); }
.route__nurse { fill: var(--surface); stroke: var(--lane-nursing); stroke-width: 3; }
.route__home { fill: var(--text); }

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 32px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: var(--fs-label);
  font-weight: 600;
}
.lp-chip--quiet { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 400; }

.log { list-style: none; margin: 0; padding: 0; }
.log__row { padding-block: var(--sp-4); border-block-start: 1px solid var(--lp-luxury-line); }
.log__row p { margin: 0; line-height: 1.6; }
.log__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-label); }
.log__end { margin: 0; padding-block-start: var(--sp-4); border-block-start: 1px solid var(--lp-luxury-line); }

.mini-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.mini-table td { padding-block: var(--sp-4); border-block-start: 1px solid var(--lp-luxury-line); text-align: start; }
.mini-table td:first-child { inline-size: 4.5rem; color: var(--text-muted); }
.mini-table td:last-child { text-align: end; }

/* --- Footer ----------------------------------------------------------------- */
.lp-footer {
  padding-block: var(--sp-10);
  border-block-start: 1px solid var(--lp-luxury-line);
  background: color-mix(in srgb, var(--surface-sunken) 82%, var(--bg));
}
.lp-footer__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-7); }
.lp-footer__row .lp-small { margin-block-start: var(--sp-2); }
.lp-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-7); }

/* --- Smaller screens -------------------------------------------------------- */
@media (max-width: 1180px) {
  .lp-note { inset-inline-end: -16px; }
}

@media (max-width: 960px) {
  .lp-header__nav { display: none; }
  .lp-hero { min-block-size: auto; padding-block: clamp(40px, 8vw, 72px); }
  .lp-hero__grid, .lp-feature, .lp-split { grid-template-columns: minmax(0, 1fr); }
  .lp-hero__grid { gap: var(--sp-10); }
  .lp-hero::after { box-shadow: inset 0 0 0 100vmax rgba(7, 20, 13, .14), inset 0 -160px 0 rgba(7, 20, 13, .32); }
  .lp-feature:nth-child(even) .lp-feature__scene, .lp-split--reverse > :last-child { order: 0; }
  .lp-note { position: static; max-inline-size: none; margin-block-start: var(--sp-5); }
  .lp-display, .lp-display:lang(en) { font-size: 48px; }
  .lp-h2 { font-size: 34px; }
}

@media (max-width: 560px) {
  .lp-header__row { gap: var(--sp-2); }
  .lp-brand span { display: none; }
  .lp-header__tools { gap: var(--sp-1); }
  .lp-langs__item { padding-inline: var(--sp-2); }
  /* Three language names and the theme fit at 320px; sign-in is in the hero and footer. */
  .lp-header__tools .lp-btn--sm { display: none; }
  .lp-display, .lp-display:lang(en) { font-size: 36px; }
  .lp-h2 { font-size: 28px; }
  .lp-defs > div { grid-template-columns: 1fr; gap: var(--sp-1); }
  .lp-app { align-items: flex-start; }
  .scene, .lp-device__screen { padding: var(--sp-5); }
  .ticket__number { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; }
}