/* ==========================================================================
   neuronyxai.com: page styles on top of /shared/tokens.css + /shared/base.css.
   Only what the shared system does not already cover. Tokens only, no raw hex.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { text-align: center; }
.hero__inner { display: grid; justify-items: center; gap: var(--space-5); }
/* no hero lockup: the logo is already in the nav, and the CTA must land in the first viewport */
.hero .nx-intro { max-inline-size: 9.75rem; margin-block-end: var(--space-1); }
.hero__title { max-inline-size: 15ch; text-wrap: balance; }
.hero__lead { max-inline-size: 36rem; text-wrap: pretty; }
.hero__actions { display: grid; justify-items: center; gap: var(--space-3); margin-block-start: var(--space-3); }
.hero__note { font-size: var(--fs-caption); color: var(--text-3); }
.page-hero { padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.page-hero .lead { max-inline-size: 40rem; }
.page-hero__title { max-inline-size: 18ch; text-wrap: balance; }
.page-hero .stack { --stack-gap: var(--space-5); }
.page-hero--center { text-align: center; }
.page-hero--center .stack { align-items: center; }

/* ---------- Chat bubbles (a quiet hint of WhatsApp, not a copy of it) ---------- */
.chat { display: grid; gap: var(--space-2); inline-size: min(100%, 24rem); margin-inline: auto; direction: rtl; }
.bubble {
  position: relative; max-inline-size: 88%;
  padding: 0.6rem 0.9rem 0.65rem;
  border-radius: 1.1rem;
  font-family: var(--font-arabic); font-size: 1rem; line-height: 1.6; letter-spacing: 0;
  text-align: start; box-shadow: var(--shadow-xs);
}
.bubble--in { justify-self: start; background: var(--card); border: 1px solid var(--line); border-start-start-radius: 0.35rem; color: var(--text); }
.bubble--out { justify-self: end; background: var(--inverse); color: var(--text-on-inverse); border-end-end-radius: 0.35rem; }
.bubble__meta { display: block; margin-block-start: 0.15rem; font-family: var(--font-body); font-size: 0.6875rem; opacity: 0.6; direction: ltr; text-align: end; }
.bubble:lang(ar) .bubble__meta { font-family: var(--font-arabic); direction: rtl; text-align: end; }
.chat__caption { direction: ltr; text-align: center; margin-block-start: var(--space-2); }

/* ---------- Steps (how we work) ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-7) var(--space-6); counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { display: grid; gap: var(--space-2); align-content: start; padding-block-start: var(--space-5); border-block-start: 1px solid var(--line-strong); counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.steps h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.steps p { color: var(--text-2); font-size: var(--fs-small); }

/* ---------- Lists inside cards ---------- */
.ticks { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-2); }
.ticks li { position: relative; padding-inline-start: 1.6rem; line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.2em; inline-size: 1rem; block-size: 1rem;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='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='M4.5 10.4l3.6 3.6 7.4-8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.card__tagline { font-size: var(--fs-body); color: var(--text); font-weight: var(--fw-medium); line-height: 1.45; }
.card__price { font-size: var(--fs-small); color: var(--text-2); }
.card__price strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Proof cards ---------- */
.proof .card { gap: var(--space-3); }
.proof .card__title { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.proof .badge { align-self: flex-start; white-space: normal; text-align: start; line-height: 1.3; padding-block: 0.3rem; }

/* ---------- Inverse CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .stack { align-items: center; --stack-gap: var(--space-5); }
.cta-band h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-inline-size: 16ch; text-wrap: balance; }
.cta-band .lead { max-inline-size: 34rem; }
.cta-band .caption { color: var(--text-3); }

/* ---------- Agents: stories ---------- */
.stories { display: grid; gap: 0; }
.story { display: grid; gap: var(--space-6) var(--space-10); padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); border-block-start: 1px solid var(--line); }
.story:first-child { border-block-start: 0; padding-block-start: 0; }
@media (min-width: 960px) { .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.story__head { display: grid; gap: var(--space-3); align-content: start; }
@media (min-width: 960px) { .story__head { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-7)); align-self: start; } }
.story__title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); text-wrap: balance; }
.story__status { font-size: var(--fs-small); color: var(--text-2); display: flex; gap: var(--space-2); align-items: flex-start; }
.story__status .badge { flex: none; }
.story__body { display: grid; gap: var(--space-6); }
.story__part h4 { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: 0.02em; text-transform: uppercase; margin-block-end: var(--space-2); }
.story__part p, .story__part li { color: var(--text-2); }
.story__part ul { padding-inline-start: 1.15rem; display: grid; gap: var(--space-2); }
.story__part li::marker { color: var(--text-3); }
.story__result { padding: var(--space-5); border-radius: var(--radius-md); background: var(--card-2); }
.story__result p { color: var(--text); }
.story__note { font-size: var(--fs-small); color: var(--text-3); }

/* ---------- Models ---------- */
.model { gap: var(--space-4); }
.model__id { align-self: flex-start; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-2); letter-spacing: 0; }
.model__price { margin-block-start: auto; padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); display: grid; gap: var(--space-1); }
.model__price-main { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.model__price-unit { font-size: var(--fs-caption); color: var(--text-3); }
.swap { display: grid; gap: var(--space-3); }
.swap__row { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); }
.swap__row--after { border-color: var(--text); }
.swap__label { font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-semibold); }
.swap__text { font-family: var(--font-arabic); font-size: 1.125rem; line-height: 1.7; letter-spacing: 0; color: var(--text); }
.swap__text del { color: var(--text-3); text-decoration-thickness: 1.5px; }
.swap__text ins { text-decoration: none; background: var(--accent-soft); color: var(--accent-text); border-radius: 0.3rem; padding-inline: 0.2em; }
.price-table td.num strong { color: var(--text); font-weight: var(--fw-semibold); }
.price-facts { display: grid; gap: var(--space-5); margin-block-start: var(--space-8); }
@media (min-width: 760px) { .price-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-facts p { font-size: var(--fs-small); color: var(--text-2); }
.price-facts strong { display: block; color: var(--text); margin-block-end: var(--space-1); }
.checks { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
fieldset.field { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.field legend { padding: 0; margin-block-end: var(--space-2); }

/* ---------- About ---------- */
.symbol-hero { display: grid; place-items: center; padding: clamp(2rem, 1rem + 5vw, 5rem); border-radius: var(--radius-2xl); background: var(--card-2); color: var(--text); }
.symbol-hero svg { inline-size: min(100%, 16rem); block-size: auto; }
.symbol-hero figcaption { margin-block-start: var(--space-5); font-size: var(--fs-caption); color: var(--text-3); text-align: center; }
.prose-lg { font-size: var(--fs-lead); line-height: 1.6; letter-spacing: var(--ls-lead); color: var(--text-2); }
.prose-lg > * + * { margin-block-start: var(--space-5); }
.pull-quote { margin: 0; text-align: center; }
.pull-quote p { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-semibold); color: var(--text); max-inline-size: 22ch; margin-inline: auto; text-wrap: balance; }

/* ---------- Contact ---------- */
.channels { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.channel { display: grid; gap: var(--space-1); padding-block: var(--space-5); border-block-end: 1px solid var(--line); }
.channel dt { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-3); }
.channel dd { margin: 0; }
.channel__value { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
a.channel__value:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.channel__note { font-size: var(--fs-small); color: var(--text-2); margin-block-start: var(--space-1); }
@media (min-width: 960px) { .contact-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* ---------- Legal ---------- */
.legal { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--section-y); }
.legal h1 { font-size: var(--fs-h1); }
.legal .updated { margin-block-start: var(--space-4); }
.legal .prose { margin-block-start: var(--space-8); }
.legal .prose h2 { font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); margin-block-start: var(--space-9); }
.legal .prose h3 { font-size: var(--fs-h4); }
.legal-ar { margin-block-start: var(--space-10); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg); background: var(--card-2); }
.legal-ar h2 { margin-block-start: 0 !important; }
.draft-note { flex-basis: 100%; order: 3; color: var(--text-3); }

/* ---------- Docs ---------- */
.docs__intro { display: grid; gap: var(--space-4); margin-block-end: var(--space-9); }
.docs__intro h1 { font-size: var(--fs-h1); }
.docs__section > h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); line-height: 1.2; letter-spacing: -0.022em; scroll-margin-block-start: calc(var(--nav-h) + var(--space-6)); }
.docs__section h3 { scroll-margin-block-start: calc(var(--nav-h) + var(--space-6)); }
.docs__section { scroll-margin-block-start: calc(var(--nav-h) + var(--space-6)); }
.docs .prose > .tabs { margin-block: var(--space-6); }
.docs .params { margin-block: var(--space-5); }
.param__default { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); margin-inline-start: var(--space-2); }
.docs .table td code, .docs .table th code { white-space: nowrap; }
.docs-mobile-toc { margin-block-end: var(--space-8); }
.docs-mobile-toc summary { cursor: pointer; font-weight: var(--fw-semibold); min-block-size: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); list-style: none; }
.docs-mobile-toc summary::-webkit-details-marker { display: none; }
.docs-mobile-toc summary::after {
  content: ""; flex: none; inline-size: 0.55rem; block-size: 0.55rem;
  border-block-end: 1.6px solid var(--text-2); border-inline-end: 1.6px solid var(--text-2);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.docs-mobile-toc[open] summary::after { transform: translateY(25%) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .docs-mobile-toc summary::after { transition: none; } }
.docs-mobile-toc ol { padding-inline-start: 1.25rem; display: grid; gap: var(--space-1); color: var(--text-2); font-size: var(--fs-small); }
.docs-mobile-toc ol { gap: 0; }
.docs-mobile-toc a { color: inherit; text-decoration: none; display: flex; align-items: center; min-block-size: 2.75rem; }
@media (min-width: 1024px) { .docs-mobile-toc { display: none; } }
.code bdi { unicode-bidi: isolate; }

/* ---------- 404 ---------- */
.notfound { min-block-size: 60vh; display: grid; place-items: center; text-align: center; }
.notfound svg { inline-size: 4.5rem; block-size: auto; color: var(--text); margin-inline: auto; }

/* ---------- Small helpers ---------- */
.mt-2 { margin-block-start: var(--space-2); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }
.mt-10 { margin-block-start: var(--space-10); }
.section-header .badge { justify-self: start; }
.section-header--center .badge { justify-self: center; }

/* phones: long centred copy is hard to read and looks like a template, so heroes start-align */
@media (max-width: 599.98px) {
  .hero, .page-hero--center { text-align: start; }
  .hero__inner, .hero__actions { justify-items: start; }
  .hero .btn-row--center { justify-content: flex-start; }
  .page-hero--center .stack { align-items: flex-start; }
  .page-hero--center .btn-row, .page-hero--center .cluster { justify-content: flex-start; }
}

/* phones: primary actions become full-width, equal targets */
@media (max-width: 559.98px) {
  .hero__actions, .hero__actions .btn-row { inline-size: 100%; }
  .hero__actions .btn-row .btn, .cta-band .btn-row .btn, .page-hero .btn-row .btn { flex: 1 1 100%; }
  .cta-band .btn-row, .page-hero .btn-row { inline-size: 100%; }
}
@media (min-width: 960px) { .split--code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* code splits must never push the page wider than the phone */
.split--code { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .split--code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.split > * { min-inline-size: 0; }

/* price table on phones: model and price on one line, the unit underneath */
@media (max-width: 639.98px) {
  .price-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-block-end: 1px solid var(--line); }
  .price-table tbody tr:last-child { border-block-end: 0; }
  .price-table tbody th, .price-table tbody td { border-block-end: 0; }
  .price-table tbody th { grid-column: 1; grid-row: 1; min-inline-size: 0; padding-block-end: var(--space-1); }
  .price-table tbody td.num { grid-column: 2; grid-row: 1; padding-block-end: var(--space-1); }
  .price-table tbody td:not(.num) { grid-column: 1 / -1; grid-row: 2; padding-block-start: 0; font-size: var(--fs-caption); }
}
.docs-mobile-toc.card { padding: var(--space-2) var(--space-5); gap: 0; }
.docs-mobile-toc[open] { padding-block-end: var(--space-5); }
@media (max-width: 639.98px) {
  .errors-table th:nth-child(2), .errors-table td:nth-child(2) { display: none; }
}