:root {
  --tl-paper: #f7f8f6;
  --tl-ink: #172422;
  --tl-green: #285144;
  --tl-muted: #51655e;
  --tl-line: #dce5df;
  --tl-soft: #e9f0eb;
  --tl-gold: #f0bc1e;
}

.landing {
  --paper: var(--tl-paper);
  --paper-2: var(--tl-soft);
  --ink: var(--tl-ink);
  --muted: var(--tl-muted);
  --line: var(--tl-line);
  --brand: var(--tl-green);
  --brand-ink: var(--tl-green);
  --brand-soft: var(--tl-soft);
  --sat-ink: var(--tl-green);
  --sat-muted: var(--tl-muted);
  --r-lg: 20px;
}
.landing .top,
.landing .top.scrolled { background: #fffffff5; border-color: var(--line); }
.landing .hero { background: var(--paper); color: var(--ink); }
.landing .hero .wrap { gap: clamp(24px, 5vw, 72px); }
.landing .hero h1 .h-a { font-size: clamp(19px, 2.2vw, 27px); font-weight: 600; color: var(--brand); }
.landing .hero h1 .h-b { font-size: clamp(35px, 5.2vw, 70px); line-height: 1.26; white-space: normal; }
.landing .hero .btn-quiet { border-color: var(--line); background: #fff; }
.landing .btn-primary:hover { background: #193a2f; }
.landing .hero .fine { gap: 8px 16px; }
.landing .stage { background: var(--tl-soft); border: 1px solid var(--line); border-radius: 28px; padding: 24px 12px; }
.landing .tilt { transform: none; }
.landing .fan { display: none; }
.landing .final .box { background: var(--tl-soft); }
.landing .logo { color: var(--tl-green); }

body.merchant { background: var(--tl-paper); color: var(--tl-ink); font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.merchant .k-card { background: #fff; border: 1px solid var(--tl-line); border-radius: 16px; box-shadow: none; }
.merchant .k-primary, .merchant .sw:checked,
.merchant .a-mark, .merchant .brand-mark, .merchant #planBar { background: var(--tl-green); color: #fff; }
.merchant .k-primary:hover { background: #193a2f; }
.merchant .nav-btn[aria-current="page"], .merchant #upgradeLink { color: var(--tl-green); }
.merchant .a-side::before, .merchant .a-art::before, .merchant .a-art::after { display: none; }
.merchant .a-card { border-color: var(--tl-line); border-radius: 16px; box-shadow: none; }
.merchant .a-art {
  background: var(--tl-green) url("/talaboona-login.webp") center / cover;
  border-radius: 20px;
}
.merchant .a-art-in { justify-content: end; max-width: none; padding: clamp(24px, 4vw, 64px); background: linear-gradient(transparent 48%, #102820e8); }
/* Keep the caption legible over both the shop windows and the bright stone. */
.merchant .a-art-in > :is(.a-art-k, .a-art-h) {
  align-self: flex-start;
  max-width: 100%;
  padding-inline: 16px;
  background: #172422;
}
.merchant .a-art-in > .a-art-k {
  padding-block: 10px 2px;
  border-radius: 10px 10px 0 0;
  color: #f0bc1e;
  opacity: 1;
}
.merchant .a-art-in > .a-art-h {
  margin-top: 0;
  padding-block: 8px 12px;
  border-radius: 10px 0 10px 10px;
  color: #fff;
}
.merchant .a-mark { box-shadow: none; }
.merchant .pv-frame { width: 100%; border: 1px solid var(--tl-line); border-radius: 18px; box-shadow: none; }
.merchant .merchant-nav { display: none; }
.merchant [data-merchant-jump], .merchant .merchant-nav button {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  text-align: start; text-decoration: none; border-radius: 8px;
}
.merchant .merchant-nav :is(a,button):hover,
.merchant .merchant-nav [aria-current="page"] { background: var(--tl-soft); color: var(--tl-green); }
.merchant :is(#merchantProducts,#merchantIdentity,#merchantDelivery) { scroll-margin-top: 75px; }
.merchant :is(.k-input,.k-btn,.a-eye,.merchant-nav a):focus-visible,
.landing a:focus-visible { outline: 2px solid var(--tl-green); outline-offset: 3px; }
.merchant #fulfillmentForm { display: grid; gap: 16px; }
.merchant #fulfillmentForm > * { margin: 0; }
.merchant #fulfillmentForm fieldset { min-width: 0; border: 1px solid var(--tl-line); padding: 14px; border-radius: 12px; }
.merchant #fulfillmentForm fieldset .k-input { width: 100%; }
.merchant #fulfillmentForm > button { justify-self: start; min-height: 44px; }
@media (min-width: 1024px) {
  .merchant #workspace { grid-template-columns: 168px minmax(0, 1fr) minmax(250px, 28%); gap: 20px; }
  .merchant #workspace:not(.hidden) .merchant-nav { display: block; position: sticky; top: 72px; align-self: start; padding: 8px; border: 1px solid var(--tl-line); border-radius: 12px; background: #fff; }
}
@media (min-width: 1320px) {
  .merchant #fulfillmentForm { grid-template-columns: 1fr 1fr; }
  .merchant #fulfillmentForm > :is(button,p) { grid-column: 1 / -1; }
}