/* ─────────────────────────────────────────────────────────────
   Landing page — supplemental styles beyond Tailwind utilities.
   Almost everything is handled by Tailwind classes in the
   templates; this file is reserved for things Tailwind can't
   express cleanly (custom keyframes, font weight applied to
   the whole page, etc.).
   ───────────────────────────────────────────────────────────── */

/* Ensure the chosen Google Fonts win over any Tailwind base resets */
body {
  font-family: 'Tajawal', system-ui, sans-serif;
  font-weight: 400;
}
h1, h2, h3, h4 {
  font-family: 'Cairo', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Pricing — billing toggle (شهري / سنوي), glassmorphism.
   These live here because the glass/backdrop-blur effect, the
   JS-driven `.bill-active` class and the `.line-through` utility
   are not emitted by Tailwind's purge (toggle state is added at
   runtime by landing.js).
   ───────────────────────────────────────────────────────────── */

/* Container that holds both toggles + the save badge. Was frosted glass with a
   wide tinted shadow; a plain segmented control reads as one (2026-09-27). */
.glass-toggle {
  position: relative;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

/* Toggle buttons */
.bill-toggle {
  position: relative;
  z-index: 1;
  padding: 0.55rem 1.6rem;
  border: none;
  background: transparent;
  color: #475569;                        /* slate-600: 7.6:1 */
  font-weight: 700;
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.15s ease;
}
.bill-toggle:hover { color: #252B4A; }
.bill-toggle:active { transform: scale(0.97); }

/* Active (selected) toggle: filled navy, no glow */
.bill-active { color: #fff; background: #252B4A; box-shadow: none; }
.bill-active:hover { color: #fff; }

/* "وفّر 20%" chip — sits *inside* the سنوي button, not a 3rd segment.
   White on peach was 1.8:1 at 10.9px; dark peach on a pale tint is 6:1. */
.save-chip {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #8A3700;
  white-space: nowrap;
  vertical-align: middle;
  background: #FFE8D6;
}
.bill-active .save-chip { background: #FFB380; color: #252B4A; }

.line-through {
  text-decoration-line: line-through;
}

/* ═════════════════════════════════════════════════════════════
   2026-09-27 — review with impeccable (critique 18/28).
   The page read as a category template: eyebrow + two-colour H2 +
   three same-size cards, five times, around an invented dashboard.
   These rules carry the rewrite: real product captures, one line of
   evidence, sections that differ in form, contrast at 4.5:1.
   Prefixed lp- because /zatca/ loads this file too.
   ═════════════════════════════════════════════════════════════ */

::selection { background: #252B4A; color: #fff; }
.lp-wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
.lp-section { padding-block: 5.5rem; }
.lp-h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.35;
  color: #252B4A; text-align: center; margin-bottom: .75rem; text-wrap: balance;
}
.lp-sub {
  font-size: 1.125rem; line-height: 1.8; color: #475569; text-align: center;
  max-width: 42rem; margin: 0 auto 3rem; text-wrap: pretty;
}

/* Buttons: one system instead of three looks per section */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: .75rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.lp-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.lp-btn--block { width: 100%; padding-block: 1rem; }
.lp-btn--ghost { background: #fff; color: #252B4A; border: 1.5px solid #CBD5E1; }
.lp-btn--ghost:hover { border-color: #252B4A; background: #F8FAFC; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn:focus-visible, .lp-proof__link:focus-visible, .bill-toggle:focus-visible {
  outline: 3px solid #4068FF; outline-offset: 3px;
}

/* Hero */
.lp-hero {
  padding: 8.5rem 0 4.5rem;
  background: linear-gradient(180deg, #F5F7FF 0%, #FFFFFF 78%);
}
.lp-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .lp-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
/* A current ZATCA announcement, linked to its guide. Text-only: no figures here. */
.lp-hero__notice {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
  padding: .45rem .9rem; border-radius: 999px; background: #FFF4EC; border: 1px solid #FFD9BF;
  color: #7A3100; font-weight: 700; font-size: .95rem; line-height: 1.6; text-decoration: none;
}
.lp-hero__notice:hover { background: #FFE9D9; }
.lp-hero__title {
  font-size: clamp(2rem, 3.3vw, 2.9rem); font-weight: 800; line-height: 1.45;
  color: #252B4A; margin-bottom: 1.5rem; text-wrap: balance;
}
.lp-hero__lead { font-size: 1.2rem; line-height: 1.9; color: #334155; max-width: 38rem; margin-bottom: 1rem; }
.lp-hero__aside {
  font-size: 1rem; line-height: 1.8; color: #475569; max-width: 38rem; margin-bottom: 2rem;
  padding-inline-start: .9rem; border-inline-start: 1px solid #CBD5E1;
}
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.75rem; }
.lp-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: #475569; font-weight: 500; }
.lp-checks li { display: inline-flex; align-items: center; gap: .45rem; }
.lp-hero__shot { margin: 0; max-width: 34rem; justify-self: center; width: 100%; }
.lp-hero__shot img, .lp-features__shot img {
  display: block; width: 100%; height: auto; border-radius: 1rem;
  /* one depth system: an offset shadow, no hairline border */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 22px 36px -22px rgba(15, 23, 42, .38);
}
.lp-hero__shot figcaption, .lp-features__shot figcaption {
  margin-top: .9rem; font-size: .9rem; color: #475569; text-align: center;
}

/* Evidence line (was a band of four non-numbers) */
.lp-proof { background: #252B4A; color: #fff; }
.lp-proof__inner {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
  gap: .75rem 2rem; padding-block: 1.6rem;
}
.lp-proof__text { font-size: 1.05rem; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.lp-proof__text strong { color: #fff; font-weight: 800; }
.lp-proof__link { color: #A0B4FF; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.lp-proof__link:hover { color: #C3D0FF; }

/* Customers, in their own words (tenants/content.py LANDING_CLIENTS) */
.lp-clients { background: #F8FAFF; }
.lp-clients__grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 900px) { .lp-clients__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-client {
  margin: 0; display: flex; flex-direction: column; gap: 1.5rem;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 1.25rem; padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(37, 43, 74, .04);
}
.lp-client__quote {
  margin: 0; position: relative; padding-top: 1.6rem;
  font-size: 1.08rem; line-height: 1.95; color: #252B4A;
}
.lp-client__quote::before {
  content: "\201D"; position: absolute; top: -.9rem; right: 0;
  font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; color: #FFB380;
}
.lp-client__who {
  display: flex; align-items: center; gap: .9rem; margin-top: auto;
  border-top: 1px solid #EEF2F7; padding-top: 1.25rem;
}
.lp-client__logo {
  width: 60px; height: 60px; flex-shrink: 0; object-fit: contain;
  border: 1px solid #E2E8F0; border-radius: 14px; background: #fff;
}
.lp-client__who strong { display: block; color: #0f172a; font-weight: 800; font-size: 1rem; }
.lp-client__who span span { display: block; color: #475569; font-size: .9rem; margin-top: .15rem; }

/* Features: the real POS, then what the product does */
.lp-features__shot { margin: 0 auto 3.5rem; max-width: 64rem; }
.lp-features__list { display: grid; gap: 2rem 3rem; }
@media (min-width: 768px)  { .lp-features__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-features__list { grid-template-columns: repeat(3, 1fr); } }
.lp-features__list > div { border-top: 1px solid #E2E8F0; padding-top: 1.25rem; }
.lp-features__list dt {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Cairo', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; color: #252B4A; margin-bottom: .5rem;
}
.lp-features__list dd { color: #475569; line-height: 1.8; }

/* How it works: a sequence, not three more cards */
.lp-how { background: #F8FAFF; }
.lp-steps { display: grid; gap: 2.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-steps li { position: relative; }
.lp-steps img { height: 4.5rem; width: auto; margin-bottom: 1.1rem; user-select: none; }
.lp-steps h3 { font-family: 'Cairo', system-ui, sans-serif; font-size: 1.3rem; font-weight: 700; color: #252B4A; margin-bottom: .5rem; }
.lp-steps p { color: #475569; line-height: 1.8; }
@media (min-width: 768px) {
  /* a hairline joining the steps at icon height */
  .lp-steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 2.25rem; inset-inline-start: 6rem; inset-inline-end: -1.25rem;
    border-top: 1px dashed #CBD5E1;
  }
}

/* Pricing */
.lp-pricing { background: #F8FAFC; }
.lp-badge {
  position: absolute; top: -.95rem; inset-inline-start: 50%; transform: translateX(50%);
  background: #FFB380; color: #252B4A; font-size: .85rem; font-weight: 800;
  padding: .35rem 1.1rem; border-radius: 9999px; white-space: nowrap;
}

/* Closing call */
.lp-cta { background: #252B4A; }
.lp-cta__inner { text-align: center; padding-block: 5rem; }
.lp-cta__title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: 1rem; text-wrap: balance; }
.lp-cta__text { font-size: 1.15rem; color: rgba(255, 255, 255, .88); margin-bottom: 2rem; }
.lp-cta__note { margin-top: 1rem; font-size: .95rem; color: rgba(255, 255, 255, .78); }

/* Contact */
.lp-contact__grid { display: grid; gap: 2rem 3rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .lp-contact__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-contact__item { border-top: 1px solid #E2E8F0; padding-top: 1.5rem; }
.lp-contact__item h3 { font-family: 'Cairo', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; color: #252B4A; margin: .75rem 0 .5rem; }
.lp-contact__item p { color: #475569; line-height: 1.8; margin-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .lp-btn { transition: none; }
}