/* ==========================================================================
   Lahja product page (lahja.neuronyxai.com). Builds on /shared/tokens.css + base.css.
   Only what the shared system does not already have.
   ========================================================================== */

/* language switch in the bar */
.nav__lang {
  inline-size: auto; min-inline-size: 2.75rem; padding-inline: 0.6rem;
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-semibold); letter-spacing: 0.01em;
  text-decoration: none;
}
.nav__lang:lang(ar) { font-family: var(--font-arabic); font-size: 0.9rem; }

/* ---------------------------------------------------------------- hero */
.lp-hero { padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.lp-hero__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-5); }
.lp-hero__title { max-inline-size: 15em; font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4.75rem); line-height: 1.04; }
.lp-hero__title span { display: block; }
.lp-hero__title .lp-soft { color: var(--text-3); }
:lang(ar) .lp-hero__title { max-inline-size: 18em; font-size: clamp(2.375rem, 1.55rem + 3.3vw, 4.5rem); line-height: 1.25; }
.lp-hero .lead { max-inline-size: 38rem; }
.lp-hero .btn-row { margin-block-start: var(--space-3); }
@media (max-width: 479.98px) { .lp-hero .btn-row { inline-size: 100%; max-inline-size: 22rem; } .lp-hero .btn-row .btn { flex: 1 1 100%; } }
.lp-hero__meta { display: grid; gap: var(--space-1); justify-items: center; }
.lp-hero__meta .caption { font-variant-numeric: tabular-nums; }
.lp-trust { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); color: var(--text-2); font-size: var(--fs-small); }
.lp-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.lp-trust li::before { content: ""; inline-size: 0.35rem; block-size: 0.35rem; border-radius: 50%; background: var(--accent); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ------------------------------------------------------------ phone demo */
.lp-demo {
  display: grid; gap: var(--space-7);
  grid-template-areas: "intro" "tabs" "phone" "tips";
  grid-template-columns: minmax(0, 1fr);   /* never let the chip row's max-content widen the page */
  align-items: start;
}
.lp-demo > * { min-inline-size: 0; }
.lp-demo__intro { grid-area: intro; display: grid; gap: var(--space-4); }
.lp-demo__tabs { grid-area: tabs; display: grid; gap: var(--space-3); justify-items: start; }
.lp-demo__phone { grid-area: phone; position: relative; }
.lp-demo__tips { grid-area: tips; display: grid; gap: var(--space-5); }
.lp-demo__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); }
.lp-demo__tabs .segmented__btn { min-block-size: 2.5rem; padding-inline: 1.1rem; font-size: 0.9375rem; }
:lang(ar) .lp-demo__tabs .segmented__btn { font-family: var(--font-arabic); }
@media (max-width: 959.98px) {
  .lp-demo__intro, .lp-demo__tabs { justify-items: center; text-align: center; }
  .lp-demo__intro .lead { margin-inline: auto; }
  .lp-demo__tabs { justify-self: center; }
  .lp-demo { gap: var(--space-6); }
}
@media (min-width: 960px) {
  .lp-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-template-areas: "intro phone" "tabs phone" "tips phone";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(3rem, 1rem + 5vw, 7rem); row-gap: var(--space-7);
    align-items: start;
  }
  .lp-demo__intro { padding-block-start: var(--space-9); }
}
/* the soft floor the phone stands on */
.lp-demo__phone::before {
  content: ""; position: absolute; inset-inline: 8%; inset-block-end: -1.5rem; block-size: 3rem;
  background: radial-gradient(closest-side, rgba(28, 25, 23, 0.14), transparent);
  filter: blur(6px); z-index: -1;
}
.lp-tries { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.lp-tries li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--text-2); font-size: var(--fs-small); }
.lp-tries strong { display: block; color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.lp-tries__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-sm); background: var(--fill); color: var(--text); }
.lp-tries__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.lp-demo__note { display: grid; gap: var(--space-3); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
@media (max-width: 959.98px) { .lp-demo__tips { max-inline-size: 30rem; margin-inline: auto; } }

/* --------------------------------------------------------- what it does */
.lp-features { --grid-gap: clamp(2rem, 1.4rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.lp-features .feature { padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.lp-features .feature__icon { inline-size: 1.6rem; block-size: 1.6rem; }
.lp-features .feature__icon svg { inline-size: 100%; block-size: 100%; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* --------------------------------------------------------------- steps */
.lp-steps { list-style: none; padding: 0; counter-reset: none; }
.lp-step { display: grid; gap: var(--space-3); align-content: start; }
.lp-step__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem);
  line-height: 1; letter-spacing: -0.04em; color: var(--text-3); font-variant-numeric: tabular-nums;
  padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); margin-block-end: var(--space-2);
}
:lang(ar) .lp-step__n { font-family: var(--font-arabic); font-weight: 600; }
.lp-step__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); }
.lp-step p { color: var(--text-2); }

/* ---------------------------------------------------------- industries */
.lp-ind { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lp-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-ind__more { grid-column: 1 / -1; } }
@media (min-width: 960px) { .lp-ind { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lp-ind > * { grid-column: span 2; } .lp-ind > .lp-ind__more { grid-column: span 4; } }
.lp-ind .card { gap: var(--space-4); }
.lp-ask {
  align-self: flex-start;
  max-inline-size: 100%;
  padding: 0.55rem 0.85rem; border-radius: 1rem; border-start-end-radius: 0.3rem;
  background: var(--accent-soft); color: var(--text);
  font-size: var(--fs-small); line-height: 1.5;
}
.lp-ind__more { justify-content: center; }
.lp-ind__more .lp-ask { background: rgba(250, 249, 247, 0.1); }
.lp-ind__more .btn-row { margin-block-start: var(--space-2); }

/* ------------------------------------------------------------- pricing */
.price-card__iqd { font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; margin-block-end: var(--space-2); }
.price-card__desc { min-block-size: 0; }
.price-card__price { min-block-size: clamp(2.5rem, 2.1rem + 1.4vw, 3.25rem); }  /* 'Contact us' row lines up with the $ rows */
.price-card__features + .price-card__features { margin-block-start: var(--space-6); }
.price-card__features li.is-extra::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.65;
}
.price-card__features li .lp-addon-price { display: block; color: var(--text-3); font-size: var(--fs-caption); margin-block-start: 0.15rem; }
.price-card .price-card__note { margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.lp-plan-notes { display: grid; gap: var(--space-2); max-inline-size: 44rem; margin: var(--space-8) auto 0; text-align: center; color: var(--text-3); font-size: var(--fs-caption); }
.lp-plan-notes p:first-child { color: var(--text-2); font-size: var(--fs-small); }

/* ------------------------------------------------------------------ faq */
.lp-faq { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .lp-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--space-10); align-items: start; }
  .lp-faq .section-header { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-8)); margin-block-end: 0; }
}
.lp-faq .faq__a a { color: var(--accent-text); }
:lang(ar) .faq__q { font-family: var(--font-arabic); font-weight: 600; }
/* shared .faq__q::after uses border-inline-end, which points sideways in RTL: re-aim it */
[dir="rtl"] .faq__q::after { transform: translateY(-25%) rotate(-45deg); }
[dir="rtl"] .faq__item[open] .faq__q::after { transform: translateY(25%) rotate(135deg); }

/* ----------------------------------------------------------------- book */
.lp-book { align-items: start; }
.lp-next { list-style: none; padding: 0; display: grid; gap: var(--space-4); margin-block-start: var(--space-7); }
.lp-next li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); color: var(--text-2); }
.lp-next__n {
  display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.lp-next strong { color: var(--text); display: block; }
.lp-book .card { gap: var(--space-5); }
.lp-book .form__consent { font-size: var(--fs-caption); color: var(--text-3); }
.lp-book .form__status a { text-decoration: underline; }

/* -------------------------------------------------------------- try band */
.lp-try { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .lp-try { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-11); } }
.lp-try .lead { max-inline-size: 36rem; }
.lp-try__num { color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.lp-qr { display: none; }
@media (min-width: 960px) and (hover: hover) {
  .lp-qr { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
}
.lp-qr__tile { inline-size: 11rem; padding: 0.75rem; border-radius: var(--radius-lg); background: #FAF9F7; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.lp-qr__tile img, .lp-qr__tile svg { inline-size: 100%; block-size: auto; border-radius: var(--radius-xs); }
.lp-qr .caption { max-inline-size: 12rem; }

/* footer: product endorsement line */
.lp-endorse { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.0625rem; letter-spacing: -0.015em; }
.lp-endorse span { color: var(--text-3); font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-small); letter-spacing: 0; }
:lang(ar) .lp-endorse { font-family: var(--font-arabic); }

/* section rhythm */
.lp-section-tight-top { padding-block-start: clamp(1rem, 0.5rem + 2vw, 2.5rem); }

/* shared .segmented__indicator: components.js measures --seg-x from the LEFT edge, but the
   indicator is anchored with inset-inline-start (the RIGHT edge in RTL). Anchor it left. */
[dir="rtl"] .segmented__indicator { inset-inline-start: auto; left: 0; right: auto; }

/* phones: start-align the hero (long centred copy reads as a template at 390 px) */
@media (max-width: 599.98px) {
  .lp-hero__inner, .lp-hero__meta { justify-items: start; text-align: start; }
  .lp-hero .btn-row--center { justify-content: flex-start; }
  .lp-trust { justify-content: flex-start; }
}

/* 404 */
.lp-404 { min-block-size: 60vh; }