/* ==========================================================================
   Wave 19 — marketing landing page (aicall.axonmarketing.ir/). Brand-neutral:
   ink / paper / greys only, the existing brand blue reserved for plain text
   links (inherited from app.css's bare `a{color:var(--ax-brand-600)}` — never
   re-declared here). Everything below is scoped under body.ld-page so it can
   never bleed into / be bled into by app.css's panel + auth rules, which this
   same <head> (components/head.php) also loads. Redeclares the handful of
   tokens app.css already defines at :root (ax-ink/paper/line/muted) rather
   than relying on load order, per brief-19's instruction either is fine —
   this way landing.css has zero runtime dependency on app.css beyond the
   font-face + base reset it already ships.
   ========================================================================== */

:root {
  --ld-ink: #0E1116;
  --ld-paper: #FFFFFF;
  --ld-line: #DCE1E8;
  --ld-muted: #5C6675;
  --ld-surface: #F5F7FA;
  --ld-surface-2: #EDF0F5;
  --ld-radius: 14px;
  --ld-radius-s: 8px;
  --ld-max: 1120px;
  --ld-gutter: 24px;
}

body.ld-page {
  background: var(--ld-paper);
  color: var(--ld-ink);
  font-size: 17px;
  line-height: 1.8;
}
body.ld-page .ld-container { max-width: var(--ld-max); margin: 0 auto; padding: 0 var(--ld-gutter); }
body.ld-page img { display: block; }
body.ld-page :focus-visible { outline: 2px solid var(--ld-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- type scale ---------- */
body.ld-page h1, body.ld-page h2, body.ld-page h3 { color: var(--ld-ink); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
body.ld-page .ld-h1 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.5rem); line-height: 1.22; }
body.ld-page .ld-h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
body.ld-page .ld-h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.75rem); }
body.ld-page p { max-width: 70ch; }
body.ld-page .ld-muted { color: var(--ld-muted); }
body.ld-page .ld-lead { font-size: 1.1rem; line-height: 1.8; color: var(--ld-muted); }

/* ---------- buttons ---------- */
body.ld-page .ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  border: 1.5px solid transparent; cursor: pointer; transition: transform .12s, background .15s, color .15s, border-color .15s;
  color: var(--ld-ink); text-decoration: none; line-height: 1.2; white-space: nowrap; flex: none;
}
body.ld-page .ld-btn:hover { transform: translateY(-1px); }
body.ld-page .ld-btn-primary { background: var(--ld-ink); color: var(--ld-paper); }
body.ld-page .ld-btn-primary:hover { background: #262c36; color: var(--ld-paper); }
body.ld-page .ld-btn-ghost { background: transparent; border-color: var(--ld-line); color: var(--ld-ink); }
body.ld-page .ld-btn-ghost:hover { background: var(--ld-surface); border-color: var(--ld-ink); }
body.ld-page .ld-btn-sm { padding: 0 16px; font-size: .85rem; }
body.ld-page .ld-btn svg { width: 16px; height: 16px; }

/* ---------- header ---------- */
body.ld-page .ld-header {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--ld-line);
}
body.ld-page .ld-header-row { display: flex; align-items: center; gap: 20px; height: 64px; }
body.ld-page .ld-logo { display: flex; align-items: center; flex: none; }
body.ld-page .ld-logo img { height: 28px; width: auto; }
body.ld-page .ld-nav { display: flex; align-items: center; gap: 28px; margin-inline-end: auto; flex: none; }
body.ld-page .ld-nav a { color: var(--ld-ink); font-size: .92rem; font-weight: 600; opacity: .8; white-space: nowrap; }
body.ld-page .ld-nav a:hover { opacity: 1; }
body.ld-page .ld-header-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---------- sections ---------- */
body.ld-page .ld-section { padding: 80px 0; }
body.ld-page .ld-section + .ld-section { border-top: 1px solid var(--ld-line); }
body.ld-page .ld-section-head { max-width: 640px; margin: 0 0 48px; }
body.ld-page .ld-kicker { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--ld-muted); letter-spacing: .04em; margin-bottom: 10px; }
body.ld-page .ld-surface { background: var(--ld-surface); }

/* ---------- hero ---------- */
body.ld-page .ld-hero { min-height: min(calc(100vh - 64px), 760px); display: flex; align-items: center; padding: 48px 0; }
body.ld-page .ld-hero .ld-container { width: 100%; }
body.ld-page .ld-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
body.ld-page .ld-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; }
body.ld-page .ld-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ld-muted); font-size: .92rem; }
body.ld-page .ld-proof span { display: inline-flex; align-items: center; gap: 8px; }
body.ld-page .ld-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ld-muted); flex: none; }
body.ld-page .ld-proof span:first-child::before { display: none; }

/* phone demo card */
body.ld-page .ld-phone {
  position: relative; background: var(--ld-ink); color: #fff; border-radius: 32px; padding: 22px;
  box-shadow: 0 30px 70px -30px rgba(14,17,22,.45); max-width: 360px; margin: 0 auto;
}
body.ld-page .ld-phone-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; }
body.ld-page .ld-phone-id { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #C9D0DA; }
body.ld-page .ld-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; animation: ld-pulse 1.6s ease-in-out infinite; }
@keyframes ld-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Fixed-height chat column that scrolls; the JS keeps it scrolled to the newest line while typing. */
body.ld-page .ld-phone-transcript { background: #171B22; border-radius: 18px; padding: 16px; height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
body.ld-page .ld-phone-transcript::-webkit-scrollbar { display: none; }
/* `flex: none` is what stops the bubbles from being squeezed: an explicit min-height cancels
   a flex item's automatic minimum, so without it the column compressed every bubble to fit
   the fixed height and the text spilled under the next bubble. */
body.ld-page .ld-bubble { flex: none; max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.6; opacity: 1; transition: opacity .2s; min-height: 1.6em; }
body.ld-page .ld-bubble-agent { align-self: flex-start; background: #262C36; color: #fff; border-bottom-left-radius: 4px; }
body.ld-page .ld-bubble-caller { align-self: flex-end; background: #fff; color: var(--ld-ink); border-bottom-right-radius: 4px; }
/* System/status notice (an order placed, an appointment booked) — visually distinct from
   both conversational bubbles: centered, muted, pill-shaped, clearly not a spoken line. */
body.ld-page .ld-bubble-action { align-self: center; max-width: 92%; background: transparent; border: 1px dashed rgba(255,255,255,.28); color: #9aa4b2; font-size: .78rem; text-align: center; padding: 6px 14px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px; }
body.ld-page .ld-bubble-action svg { width: 14px; height: 14px; flex: none; }
/* The server renders the full transcript (what no-JS, reduced-motion and first-paint visitors
   see). Pressing Play adds .ld-anim, hides the bubbles and re-reveals each one (.is-visible)
   as it is typed in sync with the audio. */
body.ld-page .ld-anim .ld-bubble { opacity: 0; }
body.ld-page .ld-anim .ld-bubble.is-visible { opacity: 1; }
body.ld-page .ld-phone-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
body.ld-page .ld-play-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: #fff; color: var(--ld-ink); border: none; border-radius: 999px; padding: 12px 18px;
  font-weight: 700; font-size: .9rem; cursor: pointer;
}
body.ld-page .ld-play-btn:hover { background: #F1F3F6; }
body.ld-page .ld-play-btn svg { width: 16px; height: 16px; }
body.ld-page .ld-play-btn[aria-pressed="true"] svg { animation: ld-pulse 1s ease-in-out infinite; }

/* ---------- capabilities (2-col list) ---------- */
body.ld-page .ld-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
body.ld-page .ld-cap { display: flex; gap: 14px; align-items: flex-start; }
body.ld-page .ld-cap-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ld-ink); color: #fff; display: flex; align-items: center; justify-content: center; }
body.ld-page .ld-cap-ic svg { width: 19px; height: 19px; }
body.ld-page .ld-cap h3 { font-size: 1.02rem; margin-bottom: 4px; }
body.ld-page .ld-cap p { color: var(--ld-muted); font-size: .92rem; margin: 0; }

/* ---------- steps ---------- */
body.ld-page .ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
body.ld-page .ld-step { position: relative; padding-inline-start: 0; }
body.ld-page .ld-step-num { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ld-ink); align-items: center; justify-content: center; font-weight: 800; margin-bottom: 14px; }
body.ld-page .ld-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
body.ld-page .ld-step p { color: var(--ld-muted); font-size: .93rem; }

/* copilot mock (pure HTML/CSS) — a full-width card below the steps row, not inside a step */
body.ld-page .ld-mock-wrap { max-width: 720px; margin: 48px auto 0; }
body.ld-page .ld-mock { background: var(--ld-surface); border: 1px solid var(--ld-line); border-radius: var(--ld-radius); padding: 16px; }
body.ld-page .ld-mock-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
body.ld-page .ld-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ld-line); }
body.ld-page .ld-mock-row { display: flex; gap: 8px; margin-bottom: 8px; }
body.ld-page .ld-mock-bubble { font-size: .85rem; line-height: 1.6; padding: 9px 13px; border-radius: 10px; max-width: 440px; }
body.ld-page .ld-mock-bubble.me { background: var(--ld-ink); color: #fff; margin-inline-start: auto; }
body.ld-page .ld-mock-bubble.bot { background: var(--ld-paper); border: 1px solid var(--ld-line); }
body.ld-page .ld-mock-caption { text-align: center; color: var(--ld-muted); font-size: .85rem; margin: 12px 0 0; }

/* ---------- use-cases ---------- */
body.ld-page .ld-usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.ld-page .ld-usecase { background: var(--ld-paper); border: 1px solid var(--ld-line); border-radius: var(--ld-radius); padding: 22px; }
body.ld-page .ld-usecase h3 { font-size: 1.02rem; margin-bottom: 8px; }
body.ld-page .ld-usecase .ld-quote { font-size: .88rem; color: var(--ld-muted); border-right: 2px solid var(--ld-line); padding-right: 10px; margin: 10px 0 0; }

/* ---------- engines ---------- */
body.ld-page .ld-engines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.ld-page .ld-engine { background: var(--ld-paper); border: 1px solid var(--ld-line); border-radius: var(--ld-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
body.ld-page .ld-engine h3 { font-size: 1rem; }
body.ld-page .ld-engine p { color: var(--ld-muted); font-size: .86rem; margin: 0; flex: 1; }
body.ld-page .ld-engine-play { display: inline-flex; align-items: center; gap: 6px; background: var(--ld-surface); border: 1px solid var(--ld-line); border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; width: fit-content; }
body.ld-page .ld-engine-play:hover { background: var(--ld-surface-2); }
body.ld-page .ld-engine-play svg { width: 13px; height: 13px; }

/* ---------- pricing ---------- */
body.ld-page .ld-period-toggle { display: inline-flex; background: var(--ld-surface); border: 1px solid var(--ld-line); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 36px; }
body.ld-page .ld-period-toggle button { border: none; background: transparent; padding: 9px 18px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--ld-muted); cursor: pointer; }
body.ld-page .ld-period-toggle button[aria-pressed="true"] { background: var(--ld-ink); color: #fff; }
body.ld-page .ld-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
body.ld-page .ld-plan { position: relative; background: var(--ld-paper); border: 1px solid var(--ld-line); border-radius: var(--ld-radius); padding: 28px 24px; display: flex; flex-direction: column; }
body.ld-page .ld-plan.is-popular { border-color: var(--ld-ink); box-shadow: 0 16px 40px -20px rgba(14,17,22,.25); }
body.ld-page .ld-plan-badge { position: absolute; top: -13px; inset-inline-start: 24px; background: var(--ld-ink); color: #fff; font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
body.ld-page .ld-plan-badge svg { width: 12px; height: 12px; }
body.ld-page .ld-plan h3 { font-size: 1.1rem; margin-bottom: 4px; }
body.ld-page .ld-plan-price { margin: 14px 0 2px; }
body.ld-page .ld-plan-price b { font-size: 1.9rem; font-weight: 800; }
body.ld-page .ld-plan-price-unit { color: var(--ld-muted); font-size: .85rem; }
body.ld-page .ld-plan-save { font-size: .8rem; color: var(--ld-muted); min-height: 1.2em; margin-bottom: 14px; }
body.ld-page .ld-plan-gift { font-size: .88rem; font-weight: 700; margin-bottom: 14px; padding: 10px 12px; background: var(--ld-surface); border-radius: var(--ld-radius-s); }
body.ld-page .ld-plan-feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .88rem; color: var(--ld-ink); flex: 1; }
body.ld-page .ld-plan-feats li { display: flex; gap: 8px; align-items: flex-start; }
body.ld-page .ld-plan-feats svg { flex: none; width: 15px; height: 15px; margin-top: 3px; }
body.ld-page .ld-plan .ld-btn { width: 100%; }

body.ld-page .ld-explainer { margin-top: 28px; padding: 16px 18px; background: var(--ld-surface); border-radius: var(--ld-radius); font-size: .9rem; color: var(--ld-muted); }
body.ld-page .ld-explainer b { color: var(--ld-ink); }

body.ld-page .ld-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
body.ld-page .ld-addon-box { border: 1px solid var(--ld-line); border-radius: var(--ld-radius); padding: 22px; }
body.ld-page .ld-addon-box h3 { font-size: .98rem; margin-bottom: 14px; }
body.ld-page .ld-addon-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--ld-line); font-size: .9rem; }
body.ld-page .ld-addon-row:first-of-type { border-top: none; }
body.ld-page .ld-addon-row b { font-weight: 700; }

/* ---------- FAQ ---------- */
body.ld-page .ld-faq { max-width: 760px; }
body.ld-page .ld-faq details { border-bottom: 1px solid var(--ld-line); padding: 18px 0; }
body.ld-page .ld-faq details:first-child { border-top: 1px solid var(--ld-line); }
body.ld-page .ld-faq summary { cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body.ld-page .ld-faq summary::-webkit-details-marker { display: none; }
body.ld-page .ld-faq summary .ld-faq-ic { flex: none; transition: transform .15s; }
body.ld-page .ld-faq summary .ld-faq-ic svg { width: 18px; height: 18px; }
body.ld-page .ld-faq details[open] summary .ld-faq-ic { transform: rotate(180deg); }
body.ld-page .ld-faq .ld-faq-a { color: var(--ld-muted); margin: 12px 0 0; font-size: .94rem; }

/* ---------- final CTA + footer ---------- */
body.ld-page .ld-cta-band { background: var(--ld-ink); color: #fff; text-align: center; padding: 76px 0; }
body.ld-page .ld-cta-band .ld-h2 { color: #fff; }
body.ld-page .ld-cta-band p { color: #C9D0DA; margin: 10px auto 28px; }
body.ld-page .ld-cta-band .ld-btn-primary { background: #fff; color: var(--ld-ink); }
body.ld-page .ld-cta-band .ld-btn-ghost { border-color: #39404B; color: #fff; }
body.ld-page .ld-cta-band .ld-btn-ghost:hover { background: #171B22; border-color: #fff; }

body.ld-page .ld-footer { padding: 48px 0; color: var(--ld-muted); font-size: .88rem; }
body.ld-page .ld-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
body.ld-page .ld-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
body.ld-page .ld-footer-links a { color: var(--ld-muted); }
body.ld-page .ld-footer-links a:hover { color: var(--ld-ink); }
body.ld-page .ld-footer-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  body.ld-page .ld-hero-grid { grid-template-columns: 1fr; }
  body.ld-page .ld-phone { margin: 0 auto; }
  body.ld-page .ld-caps { grid-template-columns: 1fr; }
  body.ld-page .ld-steps { grid-template-columns: 1fr; gap: 36px; }
  body.ld-page .ld-usecases { grid-template-columns: repeat(2, 1fr); }
  body.ld-page .ld-engines { grid-template-columns: repeat(2, 1fr); }
  body.ld-page .ld-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  body.ld-page .ld-addons { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  body.ld-page .ld-nav { display: none; }
  /* With the in-page nav hidden, the row's default packing (flex-start/"normal")
     bunches the logo and header-cta together at the RTL start (right) edge, leaving
     a large empty gap on the left where the nav used to sit. Spreading the two
     remaining items to opposite edges matches the desktop layout's balance (logo on
     one end, actions on the other) instead of a lopsided header. */
  body.ld-page .ld-header-row { justify-content: space-between; }
}
@media (max-width: 560px) {
  body.ld-page .ld-section { padding: 48px 0; }
  body.ld-page .ld-usecases { grid-template-columns: 1fr; }
  body.ld-page .ld-engines { grid-template-columns: 1fr; }
  body.ld-page .ld-hero { padding: 32px 0; }
  body.ld-page .ld-header-cta .ld-btn-ghost { display: none; }
  body.ld-page .ld-footer-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.ld-page .ld-live-dot { animation: none; }
  body.ld-page .ld-btn, body.ld-page .ld-faq summary .ld-faq-ic { transition: none; }
  body.ld-page .ld-bubble { transition: none; }
}